/* ============================================================== THIERRY DRIVER PACA — THEMES.CSS Overrides de tokens par [data-theme], chargé APRÈS style.css. Le thème actif est posé sur par header.php (réglage « site.theme » éditable dans l'admin). « classique » = base :root de style.css (aucun override ici). Les autres thèmes redéfinissent les tokens couleur + typo ; quelques overrides ciblés gèrent les composants où --ink sert de FOND sombre (barre utilitaire, header, section électrique, footer, boutons). ============================================================== */ /* ============================================================== COMMUN — Sélecteur de langue FR / EN (barre utilitaire, tous thèmes) ============================================================== */ .utility-lang{ display:inline-flex; align-items:center; gap:8px; border:none; padding:0; } .utility-lang a{ color:inherit; opacity:.55; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; transition:opacity var(--t-base) var(--ease), color var(--t-base) var(--ease); } .utility-lang a:hover{opacity:1} .utility-lang a.is-active{opacity:1;color:var(--accent-light);font-weight:600} /* Ancres internes (#services, #profils…) : décalage sous le header sticky pour que la cible ne soit pas masquée à l'arrivée. */ :where([id]){scroll-margin-top:96px} /* ---- Menu déroulant « Zones » (nav desktop) — tokens, compatible 4 thèmes ---- */ .nav-zones{position:relative;display:flex;align-items:center} .nav-zones-toggle{ font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-soft); letter-spacing:0.02em;padding:6px 0;display:inline-flex;align-items:center;gap:4px;cursor:pointer; } .nav-zones-toggle:hover{color:var(--accent)} .nav-zones-menu{ position:absolute;top:calc(100% + 12px);left:50%; transform:translateX(-50%) translateY(8px); min-width:230px;background:var(--bg-paper);border:1px solid var(--rule); border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:8px; display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden; transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); z-index:var(--z-drawer); } .nav-zones:hover .nav-zones-menu, .nav-zones.is-open .nav-zones-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .nav-zones-menu a{padding:9px 14px;border-radius:var(--r-sm);font-size:14px;color:var(--ink-soft);white-space:nowrap} .nav-zones-menu a:hover{background:var(--bg-cream);color:var(--accent)} /* Étiquette de section dans le menu mobile */ .mobile-nav-label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:10px} /* Nav un peu plus compacte sur desktop étroit (entrée « Zones » ajoutée) */ @media (max-width:1150px) and (min-width:901px){ .nav{gap:22px} } /* Mini-nav d'ancres (page Services) : section courante mise en évidence */ .services-anchor-nav a.is-current{color:var(--accent);font-weight:600} /* ============================================================== THÈME — NUIT SUR LA CORNICHE (cinématique, nocturne) nuit #0B1722 · ambre #F0B45F · azur #7FC9D9 ============================================================== */ html[data-theme="nuit"]{ color-scheme:dark; /* Palette */ --bg-paper:#0B1722; --bg-cream:#0F2030; --ink:#F4EFE7; /* devient l'encre CLAIRE (texte / titres) */ --ink-soft:#DCE5EC; --ink-mute:#9DB1BF; --ink-faint:#5F7480; --accent:#F0B45F; /* lueur ambre des phares */ --accent-dark:#D9923A; --accent-light:#F6C786; --rule:rgba(255,255,255,.12); --gold:#7FC9D9; /* azur méditerranéen (réutilise le token gold) */ --shadow-card:0 30px 70px -24px rgba(0,0,0,.65); /* Typographie */ --serif:'Instrument Serif', Georgia, 'Times New Roman', serif; --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* — Composants où --ink était un FOND sombre : on rétablit explicitement — */ html[data-theme="nuit"] .utility-bar{background:#060E16;color:#9DB1BF} html[data-theme="nuit"] .utility-bar a{color:#C9D4DC} html[data-theme="nuit"] .utility-lang{border-color:rgba(255,255,255,.18)} html[data-theme="nuit"] .site-header{ background:rgba(11,23,34,.86); border-bottom-color:rgba(255,255,255,.10); } html[data-theme="nuit"] .nav-cta{background:var(--accent);color:#0B1722 !important} html[data-theme="nuit"] .nav-cta:hover{background:var(--accent-light)} html[data-theme="nuit"] .btn-primary, html[data-theme="nuit"] .btn-primary:hover{color:#0B1722} html[data-theme="nuit"] .btn-outline{color:var(--ink);border-color:var(--ink)} html[data-theme="nuit"] .btn-outline:hover{background:var(--ink);color:#0B1722} /* Section électrique : reste un bloc profond, texte clair (override du rgba en dur) */ html[data-theme="nuit"] .electric{background:#08131C} html[data-theme="nuit"] .electric .section-title{color:var(--ink)} html[data-theme="nuit"] .electric p{color:var(--ink-mute)} /* Footer : reste profond, texte clair */ html[data-theme="nuit"] .site-footer{background:#08131C;color:var(--ink-mute)} html[data-theme="nuit"] .footer-logo{color:var(--ink)} html[data-theme="nuit"] .footer-grid a, html[data-theme="nuit"] .footer-links a, html[data-theme="nuit"] .footer-contact a{color:var(--ink-mute)} html[data-theme="nuit"] .footer-grid a:hover, html[data-theme="nuit"] .footer-links a:hover, html[data-theme="nuit"] .footer-contact a:hover, html[data-theme="nuit"] .footer-credit a:hover, html[data-theme="nuit"] .footer-legal-inline a:hover{color:var(--ink)} /* Signature nuit : eyebrows en mono + lueur ambre sur les chiffres-repères */ html[data-theme="nuit"] .section-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.28em} html[data-theme="nuit"] .trust-figure{text-shadow:0 0 22px rgba(240,180,95,.35)} /* — Surfaces TOUJOURS sombres (photo hero, etc.) : texte clair. En nuit, --ink est devenu clair → on le réutilise. — */ html[data-theme="nuit"] .hero .hero-inner, html[data-theme="nuit"] .hero-title, html[data-theme="nuit"] .hero-subtitle, html[data-theme="nuit"] .hero-phone, html[data-theme="nuit"] .hero-scroll{color:var(--ink)} html[data-theme="nuit"] .hero-actions .btn-ghost{color:var(--ink);border-color:var(--ink)} /* — Blocs « feature » jadis background:var(--ink) → panneaux profonds, texte clair — */ html[data-theme="nuit"] .services-cta, html[data-theme="nuit"] .cta-final-block, html[data-theme="nuit"] .card-dark{background:#08131C;color:var(--ink)} /* — Section CTA finale (fond accent ambre) → texte SOMBRE pour le contraste — */ html[data-theme="nuit"] .cta-final, html[data-theme="nuit"] .cta-final-lead, html[data-theme="nuit"] .cta-final-phone{color:#0B1722} html[data-theme="nuit"] .cta-final .btn-primary{background:#0B1722;color:var(--ink)} html[data-theme="nuit"] .cta-final .btn-primary:hover{background:#06101A;color:var(--ink)} /* — Boutons / CTA solides → ambre + texte sombre — */ html[data-theme="nuit"] .bk-submit, html[data-theme="nuit"] .bk-partner-validate, html[data-theme="nuit"] .ctm-btn, html[data-theme="nuit"] .price-card-cta, html[data-theme="nuit"] .vehicle-detail-actions .btn-primary{background:var(--accent);color:#0B1722} /* — États sélectionnés / actifs → ambre + texte sombre — */ html[data-theme="nuit"] .bk-choice.is-selected, html[data-theme="nuit"] .bk-pref.is-selected, html[data-theme="nuit"] .bk-service-pill.is-selected, html[data-theme="nuit"] .bk-vehicle.is-selected, html[data-theme="nuit"] .service-btn.active, html[data-theme="nuit"] .bk-step.is-active .bk-step-circle{background:var(--accent);color:#0B1722;border-color:var(--accent)} html[data-theme="nuit"] .bk-vehicle.is-selected::after{background:#0B1722} /* ============================================================== THÈME — LUMIÈRE DE PROVENCE (diurne, architectural) calcaire #F2EFE9 · azur cobalt #1E5B8F · ink #15140F ============================================================== */ html[data-theme="lumiere"]{ color-scheme:light; /* Palette */ --bg-paper:#F2EFE9; --bg-cream:#E7E1D6; --ink:#15140F; --ink-soft:#23211B; --ink-mute:#5C5A50; --ink-faint:#9A9588; --accent:#1E5B8F; /* azur cobalt méditerranéen */ --accent-dark:#16456C; --accent-light:#3E80B8; --rule:#DAD3C5; --gold:#C08A2D; /* contrepoint chaud (soleil) */ --shadow-card:0 24px 60px -20px rgba(21,20,15,.18); /* Typographie — display grotesque architecturale */ --serif:'Bricolage Grotesque', system-ui, sans-serif; --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Le grotesque demande plus de corps que le serif (qui vivait à 300) */ html[data-theme="lumiere"] h1, html[data-theme="lumiere"] h2, html[data-theme="lumiere"] h3, html[data-theme="lumiere"] h4, html[data-theme="lumiere"] .brand, html[data-theme="lumiere"] .footer-logo{font-weight:600;font-style:normal;letter-spacing:-0.02em} html[data-theme="lumiere"] .brand-name{font-style:normal} /* Header teinté calcaire */ html[data-theme="lumiere"] .site-header{background:rgba(242,239,233,.92)} /* Signature lumière : filet d'accent azur plus marqué sous les eyebrows */ html[data-theme="lumiere"] .section-eyebrow::before{width:48px;height:2px;background:var(--accent)} /* ============================================================== THÈME — CARNET DE ROUTE (éditorial graphique, itinéraire) blanc chaud #F6F3EC · ink #141310 · soleil #E0A21B · teal #1F6F6B ============================================================== */ html[data-theme="carnet"]{ color-scheme:light; /* Palette */ --bg-paper:#F6F3EC; --bg-cream:#ECE7DC; --ink:#141310; --ink-soft:#201E18; --ink-mute:#5A564C; --ink-faint:#989284; --accent:#1F6F6B; /* teal profond */ --accent-dark:#155551; --accent-light:#2E928D; --rule:#DED7C8; --gold:#E0A21B; /* soleil — accent secondaire vif */ --shadow-card:0 24px 60px -20px rgba(20,19,16,.16); /* Typographie — display grotesque + mono pour les horaires (signature) */ --serif:'Space Grotesk', system-ui, sans-serif; --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* Display XXL, plus de graisse et de présence */ html[data-theme="carnet"] h1, html[data-theme="carnet"] h2, html[data-theme="carnet"] h3, html[data-theme="carnet"] .brand, html[data-theme="carnet"] .footer-logo{font-weight:600;font-style:normal;letter-spacing:-0.03em} html[data-theme="carnet"] .brand-name{font-style:normal} html[data-theme="carnet"] .hero-title{letter-spacing:-0.035em} /* Header teinté blanc chaud */ html[data-theme="carnet"] .site-header{background:rgba(246,243,236,.92)} /* Signature carnet : eyebrows en mono (« étiquettes d'itinéraire ») */ html[data-theme="carnet"] .section-eyebrow, html[data-theme="carnet"] .hero-eyebrow{font-family:var(--mono);letter-spacing:0.2em;text-transform:uppercase} html[data-theme="carnet"] .trust-figure em{color:var(--gold)} /* ============================================================== THÈMES CLAIRS — contraste sur fond ACCENT L'azur cobalt (lumière) et le teal (carnet) sont des accents FONCÉS : le texte posé dessus doit être CLAIR (le défaut --ink y serait illisible). ============================================================== */ html[data-theme="lumiere"] .btn-primary, html[data-theme="lumiere"] .btn-primary:hover, html[data-theme="lumiere"] .cta-final, html[data-theme="lumiere"] .cta-final-lead, html[data-theme="lumiere"] .cta-final-phone, html[data-theme="lumiere"] .ctm-btn-primary, html[data-theme="lumiere"] .maint-btn.primary, html[data-theme="carnet"] .btn-primary, html[data-theme="carnet"] .btn-primary:hover, html[data-theme="carnet"] .cta-final, html[data-theme="carnet"] .cta-final-lead, html[data-theme="carnet"] .cta-final-phone, html[data-theme="carnet"] .ctm-btn-primary, html[data-theme="carnet"] .maint-btn.primary{color:#FBFAF7} /* ============================================================== QUALITÉ — réduction de mouvement respectée pour tous les thèmes ============================================================== */ @media (prefers-reduced-motion:reduce){ html[data-theme] *{scroll-behavior:auto} }