/* ========================================================================== MONTEK — da.css Direction artistique « technique et éditoriale » appliquée au site réel. Chargée APRÈS style.css (et audit.css le cas échéant) sur toutes les pages, activée par la classe « da » sur . Elle rethème les composants existants sans modifier le HTML porteur de SEO : le méga-menu, le footer et les contenus restent strictement identiques. Branche de test uniquement tant que la direction n'est pas arbitrée. Origine du langage graphique : apercu.css (maquette /apercu-design/). ========================================================================== */ body.da { --da-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --da-ink: #0B0C0E; --da-ink-soft: #3F444C; --da-ink-mute: #767C87; --da-line: #E3E5E9; --da-line-soft: #EFF1F4; --da-paper: #FFFFFF; --da-paper-alt: #F7F8FA; --da-accent: #2563EB; --da-accent-dark: #1D4ED8; --da-accent-soft: rgba(37, 99, 235, 0.08); --da-accent-line: rgba(37, 99, 235, 0.28); --da-deep: #132340; --da-deep-2: #0E1B31; --da-deep-tile: #182A4B; --da-deep-line: rgba(148, 178, 240, 0.20); background: var(--da-paper); color: var(--da-ink); } /* -------------------------------------------------------------------------- Sections : fond blanc continu, filets, plus d'alternance grise. La règle de style.css fait (0,3,1) : on repasse au-dessus avec body.da. -------------------------------------------------------------------------- */ body.da section:nth-of-type(even):not(.hero):not(.cta-band):not(.da-dark):not(.da-final) { background: transparent; } body.da section:not(.hero):not(.cta-band):not(.pro-audit-band):not(.da-dark) { border-top: 1px solid var(--da-line); } body.da .hero + section, body.da section:first-of-type { border-top: 0; } /* Typographie de section */ body.da .section-label { font-family: var(--da-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--da-ink-mute); background: none; border: 0; padding: 0; border-radius: 0; display: inline-block; } body.da .section-title { letter-spacing: -0.025em; color: var(--da-ink); } body.da .section-subtitle, body.da .section-intro, body.da .section-text { color: var(--da-ink-soft); } body.da .section-text a:not(.btn), body.da .faq-answer a:not(.btn) { color: var(--da-accent); } /* -------------------------------------------------------------------------- Boutons : rectangles francs, un seul accent -------------------------------------------------------------------------- */ body.da .btn, body.da .nav-cta, body.da .nav-drawer-cta, body.da .cta-btn, body.da .action-btn, body.da button[type="submit"] { border-radius: 2px; box-shadow: none; background: var(--da-accent); color: #fff; border: 1px solid transparent; font-weight: 600; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; transform: none; } body.da .btn:hover, body.da .nav-cta:hover, body.da .nav-drawer-cta:hover, body.da .cta-btn:hover, body.da button[type="submit"]:hover { background: var(--da-accent-dark); transform: none; box-shadow: none; } body.da .btn-outline, body.da .btn-cta-outline { background: transparent; color: var(--da-ink); border: 1px solid var(--da-line); font-family: var(--da-mono); letter-spacing: 0.02em; } body.da .btn-outline:hover, body.da .btn-cta-outline:hover { background: transparent; border-color: var(--da-accent); color: var(--da-accent); } /* -------------------------------------------------------------------------- En-tête : barre plate collante, filet bas, libellés monospace. Les DEUX états (repos et .is-scrolled) sont définis identiques : la « pilule flottante » disparaît sans provoquer de saut de hauteur. -------------------------------------------------------------------------- */ body.da .site-header, body.da .site-header.is-scrolled { position: sticky; top: 0; padding: 0.875rem 1rem; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--da-line); box-shadow: none; } body.da .site-header .container, body.da .site-header.is-scrolled .container { background: transparent; box-shadow: none; border-radius: 0; padding-top: 0; padding-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } body.da .site-logo { color: var(--da-ink); letter-spacing: -0.04em; } body.da .site-logo span { color: var(--da-accent); } body.da .site-nav > .nav-item > .nav-trigger, body.da .site-nav > a:not(.nav-cta) { font-family: var(--da-mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--da-ink-soft); background: none; border-radius: 0; } body.da .site-nav > .nav-item > .nav-trigger:hover, body.da .site-nav > a:not(.nav-cta):hover { color: var(--da-ink); background: none; } /* Menus déroulants : panneaux plats, filet, ombre portée sobre */ body.da .nav-dropdown { border-radius: 0; border: 1px solid var(--da-line); box-shadow: 0 18px 40px -20px rgba(11, 12, 14, 0.35); background: var(--da-paper); } body.da .nav-dropdown a { border-radius: 0; color: var(--da-ink-soft); border-left: 2px solid transparent; } body.da .nav-dropdown a:hover { color: var(--da-ink); background: var(--da-paper-alt); border-left-color: var(--da-accent); } body.da .nav-dropdown-group { font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--da-ink-mute); } body.da .nav-cta { border-radius: 2px; } /* Tiroir mobile : blanc plat, mêmes filets */ body.da .nav-drawer { background: var(--da-paper); border-left: 1px solid var(--da-line); } body.da .nav-drawer-link { border-radius: 0; color: var(--da-ink); } body.da .nav-drawer-link:hover { background: var(--da-paper-alt); } body.da .nav-acc-trigger { font-family: var(--da-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 0; } body.da .nav-acc-panel a { border-radius: 0; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ body.da .hero { background: var(--da-paper); } body.da .hero h1 { letter-spacing: -0.035em; color: var(--da-ink); } body.da .hero-badge { font-family: var(--da-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--da-ink-mute); background: none; border: 0; border-radius: 0; padding: 0; } body.da .hero-text p { color: var(--da-ink-soft); } body.da .hero-img-wrapper { border-radius: 4px; box-shadow: 0 1px 0 var(--da-line), 0 24px 48px -24px rgba(11, 12, 14, 0.28); } body.da .hero-trust-item { font-family: var(--da-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--da-ink-soft); background: none; border: 0; padding: 0; } /* -------------------------------------------------------------------------- Barre de preuves : bandeau de faits, filets, sans pastilles colorées -------------------------------------------------------------------------- */ body.da .proof-section { background: var(--da-paper); } body.da .proof-bar { gap: 0; border-top: 1px solid var(--da-line); background: none; border-radius: 0; box-shadow: none; padding: 0; } body.da .proof-item { background: none; border: 0; border-right: 1px solid var(--da-line); border-radius: 0; box-shadow: none; padding: 1.5rem 1.5rem 1.5rem 0; } body.da .proof-item + .proof-item { padding-left: 1.5rem; } body.da .proof-item:last-child { border-right: 0; } body.da .proof-icon { background: none; box-shadow: none; border: 0; color: var(--da-accent); width: auto; height: auto; } body.da .proof-text strong { font-family: var(--da-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--da-ink); } body.da .proof-text span { color: var(--da-ink-soft); } /* -------------------------------------------------------------------------- Cartes : services, zones, pourquoi, packs. Plates, filets, sans rayon. -------------------------------------------------------------------------- */ body.da .service-card, body.da .zone-link-card, body.da .why-item, body.da .pack-card, body.da .contact-info-card, body.da .step { background: var(--da-paper); border: 1px solid var(--da-line); border-radius: 0; box-shadow: none; transform: none; transition: background 0.2s ease, border-color 0.2s ease; } body.da .service-card:hover, body.da .zone-link-card:hover, body.da .pack-card:hover { background: var(--da-paper-alt); border-color: var(--da-line); box-shadow: none; transform: none; } body.da .service-icon, body.da .why-icon, body.da .zlc-icon, body.da .pack-icon { background: none; border-radius: 0; color: var(--da-accent); box-shadow: none; } body.da .service-card h3, body.da .why-item h3, body.da .pack-card h3 { letter-spacing: -0.015em; color: var(--da-ink); } body.da .service-arrow { font-family: var(--da-mono); font-size: 0.72rem; color: var(--da-accent); } body.da .pack-popular { border-color: rgba(37, 99, 235, 0.5); box-shadow: inset 0 2px 0 var(--da-accent); } body.da .pack-tagline { font-family: var(--da-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-ink-mute); } /* -------------------------------------------------------------------------- Étapes numérotées -------------------------------------------------------------------------- */ body.da .steps { gap: 0; } body.da .step { border: 0; border-top: 2px solid var(--da-line); border-radius: 0; background: none; padding-left: 0; } body.da .step:first-child { border-top-color: var(--da-accent); } /* -------------------------------------------------------------------------- FAQ : lignes séparées par des filets, pas de cartes -------------------------------------------------------------------------- */ body.da .faq-item { background: none; border: 0; border-bottom: 1px solid var(--da-line); border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; } body.da .faq-item:first-of-type { border-top: 1px solid var(--da-line); } body.da .faq-item summary { color: var(--da-ink); letter-spacing: -0.015em; background: none; } body.da .faq-item summary:hover { color: var(--da-accent); } body.da .faq-answer { color: var(--da-ink-soft); } /* -------------------------------------------------------------------------- Bandeau CTA : encre bleue profonde, boutons francs -------------------------------------------------------------------------- */ body.da .cta-band { background: linear-gradient(165deg, var(--da-deep) 0%, var(--da-deep-2) 100%); border-radius: 0; } body.da .cta-band .cta-inner { background: none; border: 0; box-shadow: none; border-radius: 0; } body.da .cta-band h2 { color: #fff; letter-spacing: -0.03em; } body.da .cta-band p { color: rgba(232, 237, 247, 0.72); } body.da .btn-cta-primary { background: var(--da-accent); color: #fff; border-radius: 2px; box-shadow: none; } body.da .btn-cta-primary:hover { background: #fff; color: var(--da-ink); } body.da .cta-band .btn-cta-outline { border-color: rgba(148, 178, 240, 0.35); color: #fff; font-family: var(--da-mono); } body.da .cta-band .btn-cta-outline:hover { border-color: #fff; color: #fff; } /* -------------------------------------------------------------------------- Bande audit discrète -------------------------------------------------------------------------- */ body.da .pro-audit-band { background: var(--da-paper); border-top: 0; border-bottom: 0; padding: clamp(2rem, 4vw, 3rem) 0; } body.da .da-proband { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem 2rem; align-items: center; padding: 1.3rem 1.75rem; background: var(--da-paper-alt); border: 1px solid var(--da-line); border-left: 2px solid var(--da-accent); } body.da .da-proband-k { font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--da-ink-mute); white-space: nowrap; } body.da .da-proband p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--da-ink-soft); } body.da .da-proband strong { color: var(--da-ink); font-weight: 600; } body.da .da-proband > a { font-family: var(--da-mono); font-size: 0.76rem; letter-spacing: 0.03em; color: var(--da-accent); text-decoration: none; white-space: nowrap; } body.da .da-proband > a::after { content: " →"; transition: none; } body.da .da-proband > a:hover { text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 720px) { body.da .da-proband { grid-template-columns: 1fr; gap: 0.6rem; } } /* -------------------------------------------------------------------------- Pied de page : même encre profonde que les sections sombres -------------------------------------------------------------------------- */ body.da .site-footer { background: var(--da-deep-2); color: rgba(255, 255, 255, 0.62); } body.da .site-footer .footer-col h4 { font-family: var(--da-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7FA3F5; font-weight: 500; } body.da .site-footer a { color: rgba(255, 255, 255, 0.72); } body.da .site-footer a:hover { color: #fff; } body.da .footer-logo { color: #fff; } body.da .footer-logo span { color: #7FA3F5; } body.da .footer-brand p, body.da .footer-zone { color: rgba(255, 255, 255, 0.62); } body.da .footer-bottom { font-family: var(--da-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.42); border-top: 1px solid var(--da-deep-line); } body.da .footer-bottom a { color: rgba(255, 255, 255, 0.55); } /* -------------------------------------------------------------------------- Formulaires : champs plats, libellés monospace -------------------------------------------------------------------------- */ body.da .form-group label { font-family: var(--da-mono); font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-ink-soft); } body.da .form-group input, body.da .form-group select, body.da .form-group textarea { border-radius: 2px; border: 1px solid var(--da-line); background: var(--da-paper); box-shadow: none; } body.da .form-group input:focus, body.da .form-group select:focus, body.da .form-group textarea:focus { outline: none; border-color: var(--da-accent); box-shadow: 0 0 0 3px var(--da-accent-soft); } body.da .form-rgpd { color: var(--da-ink-soft); } body.da .form-rgpd a { color: var(--da-accent); } /* -------------------------------------------------------------------------- Composants audit (audit.css) : alignement sur la même langue -------------------------------------------------------------------------- */ body.da .breadcrumb { font-family: var(--da-mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--da-ink-mute); } body.da .breadcrumb a { color: var(--da-ink-mute); } body.da .breadcrumb a:hover { color: var(--da-accent); } body.da .perimeter, body.da .report-excerpt, body.da .finding, body.da .recap-cell, body.da .msg-box, body.da .preview-box { border-radius: 0; box-shadow: none; border: 1px solid var(--da-line); background: var(--da-paper); } body.da .perimeter-num, body.da .finding-ref, body.da .preview-label { font-family: var(--da-mono); color: var(--da-ink-mute); } body.da .report-excerpt-header, body.da .report-excerpt-footer { font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--da-paper-alt); color: var(--da-ink-mute); border-radius: 0; } body.da .crit, body.da .crit-high, body.da .crit-med, body.da .crit-low { border-radius: 0; font-family: var(--da-mono); letter-spacing: 0.08em; text-transform: uppercase; } body.da .method li, body.da .checks li { border-radius: 0; } /* -------------------------------------------------------------------------- Divers : appel collant, bulle d'avis, bandeau de confiance -------------------------------------------------------------------------- */ body.da .sticky-call { border-radius: 2px; box-shadow: 0 12px 30px -12px rgba(11, 12, 14, 0.4); } body.da .google-review-bubble { border-radius: 2px; border: 1px solid var(--da-line); box-shadow: 0 12px 30px -16px rgba(11, 12, 14, 0.3); } body.da .trust-banner { background: var(--da-paper-alt); border: 1px solid var(--da-line); border-radius: 0; } body.da .trust-item { font-family: var(--da-mono); font-size: 0.72rem; letter-spacing: 0.04em; } /* Liens internes en bas des pages ville */ body.da .internal-links a, body.da .metier-links a { color: var(--da-accent); } /* Quiz d'auto-diagnostic : boutons et cadres plats */ body.da .diag-shell, body.da .diag-results, body.da .diag-tips { border-radius: 0; box-shadow: none; border: 1px solid var(--da-line); } body.da .diag-progress-track { border-radius: 0; } body.da .diag-progress-fill { border-radius: 0; background: var(--da-accent); } /* Cellules récap et pages légales : rien à faire, elles héritent. */ /* -------------------------------------------------------------------------- Corrections après premier balayage visuel -------------------------------------------------------------------------- */ /* FAQ : plus de carte grise centrée, des lignes pleine largeur */ body.da .faq-section { background: none; border-radius: 0; padding: 0; max-width: none; margin: 0; } body.da .faq-section .section-title { text-align: left; } body.da .faq-subtitle { text-align: left; color: var(--da-ink-soft); } /* Packs : « Sur devis » quitte l'orange décoratif */ body.da .pack-price { color: var(--da-ink); font-family: var(--da-mono); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; } body.da .badge { border-radius: 2px; font-family: var(--da-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; } body.da .pack-card .pack-icon, body.da .pack-popular .pack-icon { background: none; color: var(--da-accent); box-shadow: none; border-radius: 0; } /* Étapes : numéros monospace sur filet, plus de pastilles rondes */ body.da .steps::before { display: none; } body.da .step { text-align: left; border-top: 2px solid var(--da-line); padding: 1.5rem 1.5rem 0 0; } body.da .step:first-child { border-top-color: var(--da-accent); } body.da .step::before { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; color: var(--da-ink-mute); font-family: var(--da-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em; justify-content: flex-start; margin: 0 0 0.7rem; } /* Coches et icônes de confiance : un seul accent, le bleu */ body.da .trust-item svg, body.da .hero-trust-item svg, body.da .included-check { color: var(--da-accent); } /* -------------------------------------------------------------------------- Correctifs de contraste signalés -------------------------------------------------------------------------- */ /* Bandeau cookies : « Refuser » doit rester blanc sur fond sombre (exigence CNIL : aussi lisible qu'« Accepter »). La règle générique body.da .btn-outline le passait en encre sombre. */ body.da .cookie-banner-actions .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: transparent; } body.da .cookie-banner-actions .btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; } body.da .cookie-banner-actions .btn:not(.btn-outline) { background: var(--da-accent); color: #fff; } /* Bouton d'action de l'en-tête : texte blanc. style.css impose #1d1d1f avec !important, on doit répondre pareil. */ body.da .nav-cta, body.da .nav-cta:hover { color: #fff !important; } /* ========================================================================== BAS DE PAGE D'ACCUEIL : section audit sombre + carte de contact finale (portés de la maquette apercu.css, préfixe da-) ========================================================================== */ body.da section.da-dark:not(.hero):not(.cta-band):not(.pro-audit-band) { background: linear-gradient(165deg, var(--da-deep) 0%, var(--da-deep-2) 100%); border-top: 0; color: #E8EDF7; } body.da .da-dark .section-label { color: rgba(232, 237, 247, 0.55); } body.da .da-dark .section-title { color: #FFFFFF; } body.da .da-dark .section-subtitle { color: rgba(232, 237, 247, 0.7); } /* Bandeau d'objection */ body.da .da-objection { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.15rem 1.35rem; border: 1px solid var(--da-deep-line); border-left: 2px solid #6E9BF5; background: rgba(255, 255, 255, 0.03); margin-bottom: 1.75rem; } body.da .da-objection .k { font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8FB2F2; white-space: nowrap; padding-top: 0.15rem; } body.da .da-objection p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(232, 237, 247, 0.82); } body.da .da-objection strong { color: #fff; font-weight: 600; } /* Cartes de formule */ body.da .da-tiers { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 1.1rem; align-items: stretch; margin-bottom: 2rem; } body.da .da-tier { position: relative; overflow: hidden; background: var(--da-deep-tile); border: 1px solid var(--da-deep-line); padding: 1.6rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.8rem; } body.da .da-tier::before { content: attr(data-n); position: absolute; top: 0.85rem; right: 1.05rem; font-family: var(--da-mono); font-size: 2.7rem; font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: rgba(143, 178, 242, 0.13); pointer-events: none; } body.da .da-tier--main { background: linear-gradient(180deg, #1E3562 0%, #17294A 100%); border-color: rgba(110, 155, 245, 0.5); box-shadow: inset 0 2px 0 #6E9BF5, 0 28px 56px -28px rgba(0, 0, 0, 0.55); } body.da .da-tier-flag { align-self: flex-start; font-family: var(--da-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: #0E1B31; background: #6E9BF5; padding: 0.28rem 0.6rem; } body.da .da-tier-lab { font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8FB2F2; } body.da .da-tier h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: #FFFFFF; } body.da .da-tier > p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: rgba(232, 237, 247, 0.72); } body.da .da-tier ul { list-style: none; margin: 0.3rem 0 0; padding: 0; } body.da .da-tier li { position: relative; padding: 0.52rem 0 0.52rem 1.35rem; border-top: 1px solid rgba(148, 178, 240, 0.13); font-size: 0.84rem; line-height: 1.5; color: rgba(232, 237, 247, 0.8); } body.da .da-tier li::before { content: "+"; position: absolute; left: 0.1rem; top: 0.5rem; font-family: var(--da-mono); font-size: 0.82rem; color: #6E9BF5; } body.da .da-tier li.da-tier-inherit { font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: #8FB2F2; padding-top: 0.6rem; padding-bottom: 0.45rem; } body.da .da-tier li.da-tier-inherit::before { content: "↳"; top: 0.55rem; } body.da .da-tier-go { margin-top: auto; padding-top: 1.1rem; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--da-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: #FFFFFF; text-decoration: none; } body.da .da-tier-go::after { content: "→"; color: #6E9BF5; transition: transform 0.18s ease; } body.da .da-tier-go:hover { text-decoration: underline; text-underline-offset: 4px; } body.da .da-tier-go:hover::after { transform: translateX(3px); } /* Boutons sur fond sombre */ body.da .da-dark .btn-outline { border-color: rgba(148, 178, 240, 0.35); color: #fff; } body.da .da-dark .btn-outline:hover { border-color: #fff; color: #fff; } body.da .da-dark .btn:not(.btn-outline):hover { background: #fff; color: var(--da-ink); } body.da .da-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } body.da .da-limit { font-family: var(--da-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: rgba(232, 237, 247, 0.55); margin: 1.5rem 0 0; } /* Carte de contact finale */ body.da .da-final { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem); background: radial-gradient(120% 140% at 12% 0%, rgba(37, 99, 235, 0.07) 0%, rgba(37, 99, 235, 0) 58%), var(--da-paper); border-top: 1px solid var(--da-line); } body.da .da-final-card { display: grid; grid-template-columns: 1.15fr 0.85fr; border: 1px solid var(--da-line); background: var(--da-paper); box-shadow: 0 1px 2px rgba(11, 12, 14, 0.03), 0 28px 60px -34px rgba(19, 35, 64, 0.30); } body.da .da-final-left { padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; border-right: 1px solid var(--da-line); } body.da .da-final-left h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); line-height: 1.08; letter-spacing: -0.032em; margin: 0; max-width: 17ch; color: var(--da-ink); } body.da .da-final-left > p { margin: 0; color: var(--da-ink-soft); font-size: 0.97rem; line-height: 1.65; max-width: 42ch; } body.da .da-live { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--da-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #1B7A4B; } body.da .da-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22A560; box-shadow: 0 0 0 3px rgba(34, 165, 96, 0.16); } body.da .da-live.is-off { color: var(--da-ink-mute); } body.da .da-live.is-off::before { background: #B0B6C0; box-shadow: 0 0 0 3px rgba(176, 182, 192, 0.16); } body.da .da-final-right { padding: clamp(1.75rem, 3vw, 2.25rem); background: var(--da-paper-alt); display: flex; flex-direction: column; gap: 1.25rem; } body.da .da-tel { display: block; font-family: var(--da-mono); font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 500; letter-spacing: -0.03em; color: var(--da-ink); text-decoration: none; line-height: 1.1; transition: color 0.18s ease; } body.da .da-tel:hover { color: var(--da-accent); } body.da .da-tel small { display: block; font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--da-ink-mute); margin-bottom: 0.45rem; font-weight: 400; } body.da .da-specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--da-line); } body.da .da-specs li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--da-line); font-size: 0.84rem; } body.da .da-specs .k { font-family: var(--da-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-ink-mute); white-space: nowrap; } body.da .da-specs .v { color: var(--da-ink); text-align: right; font-weight: 500; } body.da .da-final-right .da-actions { margin-top: auto; } body.da .da-final-right .btn { flex: 1; justify-content: center; text-align: center; } @media (max-width: 900px) { body.da .da-tiers { grid-template-columns: 1fr; } body.da .da-final-card { grid-template-columns: 1fr; } body.da .da-final-left { border-right: 0; border-bottom: 1px solid var(--da-line); } } @media (max-width: 560px) { body.da .da-objection { grid-template-columns: 1fr; gap: 0.5rem; } } /* -------------------------------------------------------------------------- Tableaux comparatifs (pages guides) : couleurs inline trop pâles sur blanc, et débordement horizontal sur mobile. Les couleurs d'état restent sémantiques mais passent au seuil AA. -------------------------------------------------------------------------- */ body.da .section-text table { display: block; overflow-x: auto; max-width: 100%; } body.da td[style*="#10b981"], body.da th[style*="#10b981"], body.da span[style*="#10b981"], body.da strong[style*="#10b981"] { color: #0B7A50 !important; } body.da td[style*="#f59e0b"], body.da th[style*="#f59e0b"], body.da span[style*="#f59e0b"], body.da strong[style*="#f59e0b"] { color: #92610A !important; } body.da td[style*="#ef4444"], body.da th[style*="#ef4444"], body.da span[style*="#ef4444"], body.da strong[style*="#ef4444"] { color: #C22A1E !important; } /* ========================================================================== PAGE D'ACCUEIL : structure complète de la maquette /apercu-design/ Règles transposées depuis apercu.css (préfixe ap- devenu da-, portée restreinte à body.da). L'en-tête, la navigation et le pied de page ne sont PAS repris : le site garde les siens, qui portent le méga-menu, le tiroir mobile et la colonne « Zones d'intervention ». ========================================================================== */ body.da body, body.da { background: var(--da-paper); color: var(--da-ink); } body.da .da-section { border-top: 1px solid var(--da-line); padding: clamp(3.5rem, 7vw, 6rem) 0; } body.da .da-section--flush { border-top: 0; } body.da .da-head { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 1.5rem; align-items: start; margin-bottom: clamp(2rem, 4vw, 3rem); } body.da .da-num { font-family: var(--da-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--da-ink-mute); padding-top: 0.55rem; border-top: 2px solid var(--da-accent); display: block; } body.da .da-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 0.6rem; color: var(--da-ink); max-width: 22ch; } body.da .da-head p { margin: 0; color: var(--da-ink-soft); font-size: 1rem; line-height: 1.65; max-width: 58ch; } body.da .da-label { font-family: var(--da-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; /* --da-ink-mute donnait 3,95 sur le fond bleute des cartes pro, sous le seuil AA de 4,5. Ce libelle porte une information, pas un ornement. */ color: var(--da-ink-soft); } body.da section:nth-of-type(even):not(.hero):not(.cta-band):not(.da-dark) { background: transparent; } body.da section.da-dark:not(.hero):not(.cta-band) { background: linear-gradient(165deg, var(--da-deep) 0%, var(--da-deep-2) 100%); } body.da .da-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); } body.da .da-hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } body.da .da-hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; margin: 1rem 0 1.25rem; color: var(--da-ink); } body.da .da-hero h1 em { font-style: normal; color: var(--da-accent); } body.da .da-hero-lede { font-size: 1.06rem; line-height: 1.65; color: var(--da-ink-soft); max-width: 46ch; margin: 0 0 2rem; } body.da .da-hero-portrait { aspect-ratio: 4 / 5; max-width: 330px; margin-left: auto; border-radius: 4px; overflow: hidden; background: var(--da-paper-alt); box-shadow: 0 1px 0 var(--da-line), 0 24px 48px -24px rgba(11, 12, 14, 0.28); } body.da .da-hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } body.da .da-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--da-line); margin-top: clamp(2rem, 4vw, 3rem); } body.da .da-fact { padding: 1.5rem 1.5rem 1.5rem 0; border-right: 1px solid var(--da-line); } body.da .da-fact:last-child { border-right: 0; } body.da .da-fact + .da-fact { padding-left: 1.5rem; } body.da .da-fact-k { font-family: var(--da-mono); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; color: var(--da-accent); display: block; line-height: 1; margin-bottom: 0.5rem; } body.da .da-fact-v { font-size: 0.83rem; line-height: 1.45; /* --da-ink-mute donnait 4,20 sur fond blanc, sous le seuil AA de 4,5 pour du texte courant. Ce libellé est de l'information, pas de la décoration. */ color: var(--da-ink-soft); display: block; } body.da .da-services { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; background: var(--da-line); border: 1px solid var(--da-line); } body.da .da-svc { background: var(--da-paper); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; text-decoration: none; color: inherit; transition: background 0.2s ease; } body.da .da-svc:hover { background: var(--da-paper-alt); } body.da .da-svc--lead { grid-row: span 2; justify-content: flex-end; padding: 2.25rem 2rem; } body.da .da-svc-ref { font-family: var(--da-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--da-ink-mute); } body.da .da-svc h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--da-ink); } body.da .da-svc--lead h3 { font-size: 1.5rem; line-height: 1.15; } body.da .da-svc p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--da-ink-soft); } body.da .da-svc-go { font-family: var(--da-mono); font-size: 0.72rem; color: var(--da-accent); margin-top: 0.35rem; } body.da .da-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: ap-step; list-style: none; padding: 0; margin: 0; } body.da .da-step { counter-increment: ap-step; padding: 1.75rem 1.5rem 0 0; border-top: 2px solid var(--da-line); position: relative; } body.da .da-step:first-child { border-top-color: var(--da-accent); } body.da .da-step::before { content: "0" counter(ap-step); font-family: var(--da-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--da-ink-mute); display: block; margin-bottom: 0.7rem; } body.da .da-step h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.45rem; letter-spacing: -0.015em; } body.da .da-step p { margin: 0; font-size: 0.87rem; line-height: 1.55; color: var(--da-ink-soft); } body.da .da-dark { background: linear-gradient(165deg, var(--da-deep) 0%, var(--da-deep-2) 100%); color: #E8EDF7; border-top: 0; } body.da .da-dark .da-num { color: rgba(232,237,247,0.55); border-top-color: #6E9BF5; } body.da .da-dark .da-head h2 { color: #FFFFFF; } body.da .da-dark .da-head p { color: rgba(232,237,247,0.7); } body.da .da-dark .da-label { color: rgba(232,237,247,0.55); } body.da .da-zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--da-deep-line); border: 1px solid var(--da-deep-line); } body.da .da-zone { background: var(--da-deep-tile); padding: 1.25rem 1.25rem 1.35rem; text-decoration: none; color: inherit; display: block; transition: background 0.2s ease; } body.da .da-zone:hover { background: #1F3560; box-shadow: inset 2px 0 0 #6E9BF5; } body.da .da-zone-name { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; color: #FFFFFF; margin-bottom: 0.3rem; } body.da .da-zone-meta { font-family: var(--da-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: #8FB2F2; } body.da .da-quote { border-left: 2px solid var(--da-accent); padding: 0.25rem 0 0.25rem 1.75rem; max-width: 44ch; } body.da .da-quote p { font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.35; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 1rem; color: var(--da-ink); } body.da .da-quote footer { font-family: var(--da-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--da-ink-mute); } body.da .da-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } body.da .da-reasons { list-style: none; margin: 0; padding: 0; } body.da .da-reasons li { padding: 1rem 0; border-bottom: 1px solid var(--da-line-soft); display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; } body.da .da-reasons li:first-child { border-top: 1px solid var(--da-line-soft); } body.da .da-reasons .da-svc-ref { padding-top: 0.2rem; } body.da .da-reasons strong { display: block; font-size: 0.95rem; margin-bottom: 0.2rem; } body.da .da-reasons span { font-size: 0.87rem; line-height: 1.55; color: var(--da-ink-soft); } @media (max-width: 900px) { body.da .da-hero-portrait { margin: 0 0 1.5rem; max-width: 240px; } body.da .da-services { grid-template-columns: 1fr 1fr; } body.da .da-svc--lead { grid-row: auto; grid-column: span 2; } body.da .da-steps { grid-template-columns: 1fr 1fr; } body.da .da-facts { grid-template-columns: 1fr 1fr; } body.da .da-fact { border-bottom: 1px solid var(--da-line); } body.da .da-fact:nth-child(2n) { border-right: 0; } } @media (max-width: 560px) { body.da .da-head { grid-template-columns: 1fr; gap: 0.9rem; } body.da .da-num { display: inline-block; padding-top: 0.4rem; } body.da .da-services, body.da .da-steps { grid-template-columns: 1fr; } body.da .da-svc--lead { grid-column: auto; } body.da .da-step { padding-right: 0; } body.da .da-fact, body.da .da-fact + .da-fact { padding-left: 0; border-right: 0; } } body.da .da-faq { border-top: 1px solid var(--da-line); } body.da .da-faq details { border-bottom: 1px solid var(--da-line); padding: 0; } body.da .da-faq summary { display: grid; grid-template-columns: 3.5rem 1fr 1.5rem; align-items: baseline; gap: 1rem; padding: 1.35rem 0; cursor: pointer; list-style: none; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; color: var(--da-ink); transition: color 0.16s ease; } body.da .da-faq summary::-webkit-details-marker { display: none; } body.da .da-faq summary:hover { color: var(--da-accent); } body.da .da-faq summary::before { content: attr(data-n); font-family: var(--da-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; color: var(--da-ink-mute); } body.da .da-faq summary::after { content: "+"; font-family: var(--da-mono); font-size: 1.1rem; color: var(--da-ink-mute); text-align: right; line-height: 1; } body.da .da-faq details[open] summary::after { content: "−"; } body.da .da-faq details > p { margin: 0 1.5rem 1.5rem 4.5rem; font-size: 0.93rem; line-height: 1.7; color: var(--da-ink-soft); max-width: 62ch; } @media (max-width: 900px) { body.da .da-zones { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { body.da .da-faq summary { grid-template-columns: 2.5rem 1fr 1.2rem; gap: 0.7rem; font-size: 0.95rem; } body.da .da-faq details > p { margin-left: 3.2rem; margin-right: 0; } } body.da .da-step-delay { display: inline-block; font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-accent); background: var(--da-accent-soft); padding: 0.22rem 0.5rem; margin-bottom: 0.7rem; } body.da .da-step::before { margin-bottom: 0.5rem; } body.da .da-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--da-line); border: 1px solid var(--da-line); } body.da .da-aud { background: var(--da-paper); padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 0.85rem; position: relative; transition: background 0.2s ease; } body.da .da-aud:hover { background: var(--da-paper-alt); } body.da .da-aud--pro { background: linear-gradient(180deg, rgba(37,99,235,0.045) 0%, rgba(37,99,235,0.015) 100%); } body.da .da-aud--pro:hover { background: rgba(37,99,235,0.07); } body.da .da-aud h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 700; letter-spacing: -0.022em; margin: 0; color: var(--da-ink); } body.da .da-aud > p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--da-ink-soft); } body.da .da-aud ul { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } body.da .da-aud li { font-size: 0.865rem; line-height: 1.5; color: var(--da-ink-soft); padding-left: 1.1rem; position: relative; } body.da .da-aud li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--da-accent); } @media (max-width: 900px) { body.da .da-split2 { grid-template-columns: 1fr; } } body.da .da-zc { border: 1px solid var(--da-deep-line); background: rgba(255, 255, 255, 0.03); padding: 1.35rem 1.5rem; margin-bottom: 1.75rem; } body.da .da-zc-lab { display: block; font-family: var(--da-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8FB2F2; margin-bottom: 0.7rem; } body.da .da-zc input { width: 100%; max-width: 420px; font: inherit; font-size: 0.95rem; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--da-deep-line); border-radius: 2px; padding: 0.7rem 0.9rem; transition: border-color 0.18s ease, background 0.18s ease; } body.da .da-zc input::placeholder { color: rgba(232, 237, 247, 0.42); } body.da .da-zc input:focus { outline: none; border-color: #6E9BF5; background: rgba(255, 255, 255, 0.09); } body.da .da-zc-res { margin-top: 1rem; padding-left: 0.9rem; border-left: 2px solid #6E9BF5; } body.da .da-zc-res strong { display: block; color: #fff; font-size: 0.97rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.3rem; } body.da .da-zc-res span { display: block; font-size: 0.87rem; line-height: 1.55; color: rgba(232, 237, 247, 0.72); max-width: 62ch; } body.da .da-zc-res.is-ok { border-left-color: #3FBF7F; } body.da .da-zc-res.is-limite { border-left-color: #E0A64B; } body.da .da-zc-res.is-distance { border-left-color: #6E9BF5; } body.da .da-tri { margin-top: 1.75rem; } body.da .da-tri-lab { display: block; font-family: var(--da-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-ink-mute); margin-bottom: 0.85rem; } body.da .da-tri-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; } body.da .da-tri-btns button { font: inherit; font-size: 0.865rem; color: var(--da-ink-soft); background: var(--da-paper); border: 1px solid var(--da-line); border-radius: 2px; padding: 0.6rem 1rem; cursor: pointer; transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease; } body.da .da-tri-btns button:hover { border-color: var(--da-accent); color: var(--da-accent); } body.da .da-tri-btns button.is-on { background: var(--da-accent); border-color: var(--da-accent); color: #fff; } body.da .da-tri-res { margin-top: 1.25rem; border: 1px solid var(--da-line); border-left: 2px solid var(--da-accent); background: var(--da-paper-alt); padding: 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; max-width: 72ch; } body.da .da-tri-res h4 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.018em; color: var(--da-ink); } body.da .da-tri-res p { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--da-ink-soft); } body.da .da-tri-dist { align-self: flex-start; font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.24rem 0.55rem; } body.da .da-tri-dist.is-ok { color: #1B7A4B; background: rgba(34, 165, 96, 0.11); } body.da .da-tri-dist.is-limite { color: #96650F; background: rgba(224, 166, 75, 0.15); } body.da .da-tri-dist.is-distance { color: var(--da-accent); background: var(--da-accent-soft); } body.da .da-tri-res a { font-family: var(--da-mono); font-size: 0.76rem; color: var(--da-accent); text-decoration: none; align-self: flex-start; } body.da .da-tri-res a:hover { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 560px) { body.da .da-tri-btns button { width: 100%; text-align: left; } } body.da .da-crumb { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 1.2rem 0 0; font-family: var(--da-mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--da-ink-mute); } body.da .da-crumb a { color: var(--da-ink-mute); text-decoration: none; transition: color 0.16s ease; } body.da .da-crumb a:hover { color: var(--da-accent); } body.da .da-crumb li + li::before { content: "/"; margin-right: 0.6rem; opacity: 0.45; } body.da .da-pagehero { padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); } body.da .da-pagehero h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.06; letter-spacing: -0.033em; font-weight: 800; margin: 1rem 0 1.25rem; color: var(--da-ink); max-width: 24ch; } body.da .da-pagehero h1 em { font-style: normal; color: var(--da-accent); } body.da .da-report { border: 1px solid var(--da-line); background: var(--da-paper); box-shadow: 0 1px 2px rgba(11,12,14,0.03), 0 24px 50px -30px rgba(19,35,64,0.25); max-width: 760px; } body.da .da-report-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.8rem 1.35rem; border-bottom: 1px solid var(--da-line); background: var(--da-paper-alt); font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-ink-mute); } body.da .da-report-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.1rem; align-items: start; padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--da-line-soft); } body.da .da-report-row:last-child { border-bottom: 0; } body.da .da-report-row strong { display: block; font-size: 0.94rem; font-weight: 700; letter-spacing: -0.012em; color: var(--da-ink); margin-bottom: 0.3rem; } body.da .da-report-row p { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--da-ink-soft); } body.da .da-crit { display: inline-block; font-family: var(--da-mono); font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.26rem 0.5rem; margin-top: 0.15rem; text-align: center; } body.da .da-crit--critique { color: #B42318; background: rgba(180, 35, 24, 0.09); } body.da .da-crit--important { color: #96650F; background: rgba(224, 166, 75, 0.15); } body.da .da-crit--conforme { color: #1B7A4B; background: rgba(34, 165, 96, 0.11); } body.da .da-report-note { font-family: var(--da-mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--da-ink-mute); margin: 0.9rem 0 0; } body.da .da-contact { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; } body.da .da-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.25rem; } body.da .da-field { display: flex; flex-direction: column; gap: 0.45rem; } body.da .da-field--full { grid-column: 1 / -1; } body.da .da-field label { font-family: var(--da-mono); font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-ink-soft); } body.da .da-field label em { font-style: normal; color: var(--da-ink-mute); letter-spacing: 0.05em; } body.da .da-field input, body.da .da-field textarea { font: inherit; font-size: 0.95rem; color: var(--da-ink); background: var(--da-paper); border: 1px solid var(--da-line); border-radius: 2px; padding: 0.72rem 0.9rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; } body.da .da-field input::placeholder, body.da .da-field textarea::placeholder { color: var(--da-ink-mute); } body.da .da-field input:focus, body.da .da-field textarea:focus { outline: none; border-color: var(--da-accent); box-shadow: 0 0 0 3px var(--da-accent-soft); } body.da .da-field textarea { min-height: 9.5rem; resize: vertical; } body.da .da-form-rgpd { grid-column: 1 / -1; font-size: 0.79rem; line-height: 1.65; color: var(--da-ink-soft); margin: 0; } body.da .da-form-rgpd a { color: var(--da-accent); } body.da .da-side { border: 1px solid var(--da-line); background: var(--da-paper-alt); padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 1.25rem; } body.da .da-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--da-line); border: 1px solid var(--da-line); } body.da .da-links a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.05rem 1.3rem; background: var(--da-paper); text-decoration: none; color: var(--da-ink); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.012em; transition: background 0.16s ease; } body.da .da-links a::after { content: "→"; font-family: var(--da-mono); font-size: 0.8rem; color: var(--da-accent); } body.da .da-links a:hover { background: var(--da-paper-alt); } body.da .da-links a small { font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--da-ink-mute); font-weight: 400; margin-left: auto; } @media (max-width: 900px) { body.da .da-contact { grid-template-columns: 1fr; } } @media (max-width: 560px) { body.da .da-form { grid-template-columns: 1fr; } body.da .da-links { grid-template-columns: 1fr; } body.da .da-report-row { grid-template-columns: 1fr; gap: 0.6rem; } body.da .da-crit { justify-self: start; } } /* L'attribut hidden doit l'emporter sur display:flex : sans cette regle, le panneau de resultat du triage s'affiche vide au chargement. */ body.da .da-tri-res[hidden], body.da .da-zc-res[hidden], body.da .da-tri[hidden] { display: none; } /* -------------------------------------------------------------------------- Pages de contenu long (pilier audit) : en-tetes numerotees appliquees a des titres beaucoup plus longs que ceux de la maquette, et sections de rupture sombres contenant du texte courant. -------------------------------------------------------------------------- */ body.da .da-head h2 { max-width: 32ch; } body.da .da-head .section-label { display: block; margin-bottom: 0.5rem; } /* Texte courant sur fond sombre */ body.da .da-dark .section-text, body.da .da-dark .section-text p, body.da .da-dark p, body.da .da-dark li { color: rgba(232, 237, 247, 0.82); } body.da .da-dark .section-text strong, body.da .da-dark strong { color: #FFFFFF; } body.da .da-dark h3 { color: #FFFFFF; } body.da .da-dark .section-text a:not(.btn), body.da .da-dark a:not(.btn):not(.da-tier-go) { color: #8FB2F2; } body.da .da-dark .section-text a:not(.btn):hover, body.da .da-dark a:not(.btn):not(.da-tier-go):hover { color: #FFFFFF; } /* Les puces carrees des listes .checks doivent rester visibles sur sombre */ body.da .da-dark .checks li::before { background: #6E9BF5; } /* Hero du pilier : le bandeau de chiffres cles se cale sous la grille */ body.da .hero .da-facts { margin-top: clamp(2.5rem, 5vw, 3.5rem); } body.da .hero .da-label { display: block; margin-bottom: 0.75rem; } /* .hero .btn de style.css ajoute des marges laterales qui s'additionnent au gap du conteneur flex : deux boutons qui tiennent tombent a la ligne. */ body.da .da-actions > .btn, body.da .da-actions > a { margin: 0; } /* -------------------------------------------------------------------------- Formulaire de contact : bloc facultatif repliable. Les champs de qualification restent disponibles mais ne barrent plus la route ; ils sont toujours envoyes, vides le cas echeant, et la fonction serveur les remplace par « Non renseigne ». -------------------------------------------------------------------------- */ body.da .form-plus { border: 1px solid var(--da-line); border-left: 2px solid var(--da-accent); background: var(--da-paper-alt); padding: 0 1.15rem; margin: 1.5rem 0; } body.da .form-plus > summary { cursor: pointer; list-style: none; padding: 0.9rem 0; font-family: var(--da-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--da-ink-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } body.da .form-plus > summary::-webkit-details-marker { display: none; } body.da .form-plus > summary::after { content: "+"; font-family: var(--da-mono); font-size: 1.05rem; color: var(--da-accent); line-height: 1; } body.da .form-plus[open] > summary::after { content: "−"; } body.da .form-plus > summary:hover { color: var(--da-accent); } body.da .form-plus-note { margin: 0 0 1.1rem; font-size: 0.82rem; line-height: 1.6; color: var(--da-ink-soft); } body.da .form-plus .form-group:last-of-type { margin-bottom: 1.15rem; } /* -------------------------------------------------------------------------- Selecteur de commune : liste construite a la main plutot que le menu natif du , qui n'est ni stylable ni identique d'un navigateur a l'autre. Chaque entree porte sa distance, l'information reellement utile ici. -------------------------------------------------------------------------- */ body.da .da-combo { position: relative; } body.da .da-combo-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 0.25rem; list-style: none; max-height: 17rem; overflow-y: auto; background: var(--da-paper); border: 1px solid var(--da-line); box-shadow: 0 18px 40px -20px rgba(11, 12, 14, 0.35); } body.da .da-combo-list[hidden] { display: none; } body.da .da-combo-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.7rem; cursor: pointer; border-left: 2px solid transparent; font-size: 0.92rem; color: var(--da-ink); } body.da .da-combo-item:hover, body.da .da-combo-item.is-actif { background: var(--da-paper-alt); border-left-color: var(--da-accent); } body.da .da-combo-nom b { font-weight: 700; color: var(--da-accent); } body.da .da-combo-km { font-family: var(--da-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--da-ink-mute); white-space: nowrap; } body.da .da-combo-km.is-limite { color: #92610A; } body.da .da-combo-km.is-loin { color: var(--da-accent); } /* Retour affiche une fois la commune choisie */ body.da .da-combo-etat { margin: 0.6rem 0 0; padding-left: 0.75rem; border-left: 2px solid var(--da-line); font-size: 0.83rem; line-height: 1.55; color: var(--da-ink-soft); } body.da .da-combo-etat[hidden] { display: none; } body.da .da-combo-etat.is-ok { border-left-color: #1B7A4B; } body.da .da-combo-etat.is-limite { border-left-color: #B8860B; } body.da .da-combo-etat.is-distance { border-left-color: var(--da-accent); } /* ========================================================================== CORRECTIFS MOBILE ========================================================================== */ /* 1. Empilement des grilles du hero et de la citation. La regle d'origine groupait .ap-hero-grid, .ap-split et .ap-final-card ; mon script de portage a rejete le groupe entier a cause du troisieme selecteur, deja defini a la main. Les deux premiers manquaient donc. */ @media (max-width: 900px) { body.da .da-hero-grid, body.da .da-split { grid-template-columns: 1fr; } } /* 2. .hero de style.css centre son texte a toutes les largeurs. L'ancien balisage l'annulait via .hero-split .hero-text, absent du nouveau. */ body.da .da-hero, body.da .da-hero .da-hero-grid, body.da .da-hero .da-facts { text-align: left; } @media (max-width: 900px) { body.da .da-hero-portrait { margin: 1.75rem 0 0; max-width: 220px; } body.da .da-hero-lede { max-width: none; } } /* 3. Le bandeau de consentement etait remonte de 4,75rem pour laisser passer le bouton d'appel collant : il flottait au milieu de l'ecran. Il redescend en bas, et le bouton d'appel s'efface tant qu'il est la. */ @media (max-width: 768px) { body.da .cookie-banner { bottom: 0; } } body.da:has(.cookie-banner) .sticky-call { display: none; } /* 4. Mouvement reduit : regle perdue au portage pour les memes raisons. */ @media (prefers-reduced-motion: reduce) { body.da .da-svc, body.da .da-zone { transition: none; } } /* ============================================================ ORDRE DES CTA DU HERO (mobile uniquement) L'appel passe en premier et en rempli, le devis en second et en contour. Un seul balisage : l'inversion se fait par order, donc le DOM garde l'ordre d'origine et le desktop ne bouge pas. Ces regles vivent dans da.css et non dans style.css : da.css se charge apres, et ses regles .btn-outline l'emporteraient sinon a specificite egale. ============================================================ */ @media (max-width: 768px) { body.da .da-actions--hero { display: flex; flex-direction: column; align-items: stretch; } body.da .da-actions--hero > a[href^="tel:"] { order: 1; background: var(--secondary); color: #fff; border-color: transparent; font-family: inherit; letter-spacing: normal; min-height: 48px; } body.da .da-actions--hero > a[href^="tel:"]:hover { background: var(--secondary-hover); color: #fff; border-color: transparent; } body.da .da-actions--hero > a:not([href^="tel:"]) { order: 2; background: transparent; color: var(--accent); border: 1px solid var(--accent); min-height: 48px; } body.da .da-actions--hero > a:not([href^="tel:"]):hover { background: var(--accent-light); color: var(--accent); } }