*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
/* Police système « San Francisco » (rendu Apple natif sur Mac/iOS, sobre ailleurs). */
--font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--navy:#0f2544;
--navy2:#1a3a6b;
--blue:#3f5d82;
--blue-l:#e8f0fb;
--blue-ll:#f0f5fd;
--slate:#5d6b7e;
--slate-l:#94a3b8;
--text:#1a2332;
--white:#ffffff;
--off:#f8fafc;
--border:#e2e8f0;
--border2:#cbd5e1;
--orange:#e85d20;
--orange-l:#fff4ef;
/* Gouttière latérale responsive : pleine largeur du navigateur, sans cap centré. */
--gx:clamp(1.25rem,4vw,4rem);
/* ── Tokens Phase 2/3 (esthétique « Apple » : douceur + air) ─────────────── */
/* Rayons plus doux et arrondis — coins généreux à la Apple. */
--r-sm:10px;
--r:14px;
--r-lg:20px;
--r-pill:100px;
/* Boutons en PILULE — esthétique Apple (coins entièrement arrondis). */
--r-btn:100px;
/* Rythme vertical des sections — plus d'air (la marge latérale passe par --gx). */
--sp-section:6.5rem;
/* Accent par défaut = bleu marque. Surchargé par secteur via body.sec-* (ci-dessous). */
--accent:var(--blue);
--accent-soft:var(--blue-ll);
/* ── Tokens design (Phase 3 — polish) ─────────────────────────────────────── */
/* Ombres en 3 couches cohérentes (teinte navy froide, jamais du noir pur) →
remplacent les box-shadow ad hoc, pour une élévation homogène. */
--shadow-sm:0 1px 2px rgba(15,37,68,0.06),0 1px 3px rgba(15,37,68,0.07);
--shadow-md:0 4px 14px rgba(15,37,68,0.08),0 2px 5px rgba(15,37,68,0.05);
--shadow-lg:0 14px 36px rgba(15,37,68,0.12),0 5px 12px rgba(15,37,68,0.06);
/* Durée + courbe d'accélération standard (mouvement « doux » cohérent). */
--dur-fast:0.15s; --dur:0.25s; --ease:cubic-bezier(0.22,0.61,0.36,1);
}
/* Couleur de signature par secteur — alignée sur la palette du menu (chrome.js).
Branchée sur les classes body.page-* DÉJÀ présentes → correcte dès le premier
rendu (zéro flash), aucune modification du HTML nécessaire. Les pages utilisent
var(--accent)/var(--accent-soft) au lieu de couleurs en dur (sauf couleurs
sémantiques : vert = écologie/éco-conduite, rouge = danger, etc. — conservées). */
body.page-entreprises { --accent:#3f5d82; --accent-soft:#eff6ff; }
body.page-associations { --accent:#15803d; --accent-soft:#f0fdf4; }
body.page-collectivites{ --accent:#c2410c; --accent-soft:#fff7ed; }
body.page-particuliers { --accent:#be185d; --accent-soft:#fdf2f8; }
body.page-ecoles { --accent:#7c3aed; --accent-soft:#faf5ff; }
html{scroll-behavior:smooth;margin:0;padding:0}
body{font-family:var(--font),sans-serif;background:var(--navy);color:var(--text);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;margin:0;padding:0}
/* ── Accessibilité ─────────────────────────────────────────────────────────── */
/* Lien d'évitement : hors écran par défaut, glisse à l'écran au focus clavier. */
.skip-link{position:fixed;top:-100px;left:1rem;z-index:10000;background:var(--navy);color:#fff;padding:0.65rem 1rem;border-radius:var(--r-btn);font-weight:600;text-decoration:none;box-shadow:0 4px 14px rgba(15,37,68,0.25);transition:top 0.15s ease}
.skip-link:focus{top:1rem}
/* Focus clavier visible et cohérent (sans gêner le pointeur). */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[data-theme="dark"] :focus-visible{outline-color:#60a5fa}
/* ── Zone d'intervention (puces communes) ───────────────────────────────────── */
.zone-chip{display:inline-flex;align-items:center;padding:0.45rem 0.9rem;background:var(--off);border:1px solid var(--border);border-radius:var(--r-pill);font-size:0.85rem;font-weight:600;color:var(--navy)}
/* ── FAQ (accordéon SEO) ────────────────────────────────────────────────────── */
.faq-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:0 1.25rem}
.faq-item summary{list-style:none;cursor:pointer;padding:1.1rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{font-size:1.02rem;font-weight:700;color:var(--navy);margin:0;display:inline}
.faq-item summary::after{content:'+';font-size:1.5rem;font-weight:400;color:var(--blue);line-height:1;transition:transform 0.2s ease;flex:0 0 auto}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item > p{margin:0 0 1.15rem;color:#475569;line-height:1.65}
[data-theme="dark"] .faq-item > p{color:#94a3b8}
/* ── Page loader (splash) ─────────────────────────────────────────────────── */
/* Invisible par défaut, apparaît après 150ms — pas de flash sur les chargements rapides */
#page-loader{position:fixed;inset:0;background:var(--white);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem;visibility:hidden;opacity:0;animation:plShow 0s ease 0.15s forwards;transition:opacity 0.35s ease,visibility 0.35s ease}
#page-loader.loaded{animation:none;opacity:0;visibility:hidden;pointer-events:none}
@keyframes plShow{to{visibility:visible;opacity:1}}
#page-loader-icon{width:68px;height:68px}
/* plPulse retirée 2026-05-24 — préférence Julien : logo statique */
.page-loader-bar{width:140px;height:3px;background:var(--border);border-radius:var(--r-pill);overflow:hidden;position:relative}
.page-loader-bar::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:var(--s1);border-radius:var(--r-pill);animation:plBar 1.3s ease-in-out infinite}
@keyframes plBar{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
[data-theme="dark"] #page-loader{background:#0f172a}
/* NAV — matériau Liquid Glass (couche flottante).
Architecture deux couches : le verre dépoli universel (blur + saturate) vit
sur l'élément ; la réfraction SVG (url(#lg-refract), injecté par chrome.js)
vit sur ::after. Mettre url() directement sur l'élément casse le rendu sur
certains moteurs — ne jamais fusionner les deux couches. */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.72);-webkit-backdrop-filter:blur(14px) saturate(185%) brightness(1.03);backdrop-filter:blur(14px) saturate(185%) brightness(1.03);border-bottom:1px solid rgba(255,255,255,0.6);box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.8),0 8px 24px rgba(15,37,68,0.06);padding:0 var(--gx)}
/* Couche de réfraction : seule à porter url() ; les moteurs qui l'ignorent gardent le dépoli. */
nav::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;-webkit-backdrop-filter:url(#lg-refract);backdrop-filter:url(#lg-refract)}
.nav-inner{max-width:none;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:66px;gap:1.75rem}
.nav-logo{font-size:1.05rem;font-weight:700;color:var(--navy);text-decoration:none;letter-spacing:-0.01em}
.nav-logo span{color:var(--blue)}
.nav-links{display:flex;gap:1rem;list-style:none;justify-content:center;flex:1;flex-wrap:nowrap}
.nav-links a{color:#334155;text-decoration:none;font-size:0.875rem;font-weight:500;transition:color 0.15s;white-space:nowrap}
.nav-links a:hover{color:var(--navy)}
.nav-links a.nav-active{color:var(--navy);font-weight:600}
/* CTA nav — flat, navy plein (couleur réservée à l'action primaire), sans reflet ni ombre. */
.nav-cta{background:var(--navy);color:var(--white);padding:0.5rem 1.25rem;border-radius:var(--r-btn);font-size:0.85rem;font-weight:600;text-decoration:none;transition:background-color 0.15s}
.nav-cta:hover{background-color:var(--navy2)}
/* Bouton « Se connecter » (nav) — verre neutre dépoli, en flat (sans reflet). */
#nav-login-desktop{background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.65);border-radius:var(--r-btn)}
/* HERO */
.hero{position:relative;overflow:hidden;padding:clamp(8rem,15vh,11rem) var(--gx) clamp(5rem,10vh,7.5rem);background:var(--white);border-bottom:1px solid var(--border)}
/* Fond saisonnier ANIMÉ du hero : deux nappes de couleurs (teinte de la saison)
qui dérivent lentement façon « aurore », comme le fond de l'app. Couches
::before/::after derrière le contenu ; classe body.season-X posée par seasonal.js. */
.hero::before,.hero::after{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;will-change:transform}
.hero::before{opacity:.30;animation:heroDriftA 19s ease-in-out infinite alternate}
.hero::after{opacity:.26;animation:heroDriftB 24s ease-in-out infinite alternate}
@keyframes heroDriftA{from{transform:translate3d(-8%,-7%,0) scale(1.15)}to{transform:translate3d(8%,7%,0) scale(1.4)}}
@keyframes heroDriftB{from{transform:translate3d(8%,7%,0) scale(1.35) rotate(10deg)}to{transform:translate3d(-8%,-7%,0) scale(1.15) rotate(-10deg)}}
@media (prefers-reduced-motion: reduce){.hero::before,.hero::after{animation:none}}
@media (pointer: coarse){.hero::before,.hero::after{animation:none}}
body.season-spring .hero::before{background:radial-gradient(46% 60% at 24% 30%,rgba(134,239,172,.42),transparent 72%),radial-gradient(44% 56% at 76% 72%,rgba(253,224,150,.36),transparent 72%)}
body.season-spring .hero::after{background:radial-gradient(42% 54% at 82% 24%,rgba(244,114,182,.40),transparent 72%),radial-gradient(42% 54% at 18% 82%,rgba(196,181,253,.38),transparent 72%)}
body.season-summer .hero::before{background:radial-gradient(46% 60% at 24% 30%,rgba(251,191,36,.40),transparent 72%),radial-gradient(44% 56% at 76% 72%,rgba(251,146,60,.36),transparent 72%)}
body.season-summer .hero::after{background:radial-gradient(42% 54% at 82% 24%,rgba(125,211,252,.36),transparent 72%),radial-gradient(42% 54% at 18% 82%,rgba(94,234,212,.34),transparent 72%)}
body.season-autumn .hero::before{background:radial-gradient(46% 60% at 24% 30%,rgba(234,88,12,.40),transparent 72%),radial-gradient(44% 56% at 76% 72%,rgba(245,158,11,.38),transparent 72%)}
body.season-autumn .hero::after{background:radial-gradient(42% 54% at 82% 24%,rgba(220,38,38,.32),transparent 72%),radial-gradient(42% 54% at 18% 82%,rgba(146,93,40,.34),transparent 72%)}
body.season-winter .hero::before{background:radial-gradient(46% 60% at 24% 30%,rgba(186,230,253,.42),transparent 72%),radial-gradient(44% 56% at 76% 72%,rgba(153,246,228,.34),transparent 72%)}
body.season-winter .hero::after{background:radial-gradient(42% 54% at 82% 24%,rgba(165,180,252,.36),transparent 72%),radial-gradient(42% 54% at 18% 82%,rgba(148,163,184,.34),transparent 72%)}
[data-theme="dark"] .hero::before{opacity:.24}
[data-theme="dark"] .hero::after{opacity:.20}
/* HÉROS CENTRÉ « Apple » : colonne unique centrée (accroche monumentale), la
carte de crédibilité devient une vitrine centrée SOUS les boutons. Remplace
l'ancien format texte-à-gauche + carte-à-droite. S'applique à toutes les pages
à héros via le CSS (aucune édition HTML). */
/* HÉROS deux colonnes : accroche à GAUCHE, animation « trajet » à DROITE (remplace
l'ancienne tuile). Le texte n'est plus perdu au centre d'un grand vide. */
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:3.5rem;align-items:center;max-width:1180px;margin:0 auto;text-align:left}
.hero-inner > div:first-child{max-width:640px}
.hero-season{display:none}
/* Dessin de saison (colonne du milieu, entre le texte et la tuile) — ABSTRAIT :
la saison est rendue par la COULEUR (pas d'icône). Médaillon : sphère dégradée
+ anneau fin. Couleurs pilotées par la classe body.season-* (cf. seasonal.js). */
.hero-season{position:relative;align-self:center;justify-self:center;width:100%;max-width:150px;aspect-ratio:1/1;pointer-events:none;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M10 20c5.5-2.5.8-6.4 3-10'/%3E%3Cpath d='M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z'/%3E%3Cpath d='M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z'/%3E%3C/svg%3E");background-color:#0f2544;opacity:.01;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
body.season-spring .hero-season{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M10 20c5.5-2.5.8-6.4 3-10'/%3E%3Cpath d='M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z'/%3E%3Cpath d='M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z'/%3E%3C/svg%3E")}
body.season-summer .hero-season{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E")}
body.season-autumn .hero-season{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E")}
body.season-winter .hero-season{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' x2='22' y1='12' y2='12'/%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='m20 16-4-4 4-4'/%3E%3Cpath d='m4 8 4 4-4 4'/%3E%3Cpath d='m16 4-4 4-4-4'/%3E%3Cpath d='m8 20 4-4 4 4'/%3E%3C/svg%3E")}
[data-theme="dark"] .hero-season{background-color:#cbd5e1;opacity:.01}
@media(max-width:1100px){.hero-season{display:none}}
@media(min-width:901px) and (max-width:1100px){.hero-inner{grid-template-columns:minmax(0,1fr) 420px}}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:3rem}}
.hero-tag{display:inline-flex;align-items:center;gap:0.5rem;background:var(--accent-soft);color:var(--accent);padding:0.375rem 0.875rem;border-radius:var(--r-pill);font-size:0.78rem;font-weight:600;margin-bottom:1.5rem;letter-spacing:0.01em;text-transform:uppercase}
h1{font-size:clamp(2.5rem,5.6vw,4.2rem);font-weight:800;line-height:1.04;letter-spacing:-0.035em;color:var(--navy);margin-bottom:1.4rem}
h1 em{font-style:normal;color:var(--blue)}
.hero-sub{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--slate);max-width:560px;line-height:1.65;font-weight:400;margin:0 0 2.25rem}
.hero-actions{display:flex;align-items:center;justify-content:flex-start;gap:1rem;flex-wrap:wrap}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:2.5rem}}
/* Boutons d'action — flat. Le primaire = navy plein ; le secondaire = verre neutre
dépoli (translucide + flou conservés), mais sans reflet ni ombre. */
.btn-primary{background:var(--navy);color:var(--white);padding:0.875rem 1.75rem;border-radius:var(--r-btn);font-size:0.9rem;font-weight:600;text-decoration:none;transition:background-color 0.15s;display:inline-flex;align-items:center;gap:0.4rem}
.btn-primary:hover{background-color:var(--navy2)}
.btn-outline{color:var(--navy);padding:0.875rem 1.5rem;border-radius:var(--r-btn);font-size:0.9rem;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,0.65);background:rgba(255,255,255,0.5);-webkit-backdrop-filter:blur(8px) saturate(185%);backdrop-filter:blur(8px) saturate(185%);transition:background-color 0.15s,border-color 0.15s}
.btn-outline:hover{border-color:var(--navy);background:rgba(255,255,255,0.72)}
/* HERO CARD — verre dépoli léger : le fond aurore du hero transparaît derrière.
Pas de couche de réfraction ici (réservée au chrome flottant, coût GPU). */
/* La tuile de crédibilité ne fait PLUS partie du héros (demande Julien) : section
d'accroche = texte + boutons uniquement, épurée. La carte est masquée. */
.hero-card{display:none}
.hero-card--legacy{position:relative;background:rgba(255,255,255,0.55);-webkit-backdrop-filter:blur(10px) saturate(185%);backdrop-filter:blur(10px) saturate(185%);border:1px solid rgba(255,255,255,0.6);box-shadow:var(--shadow-lg);border-radius:var(--r-lg);padding:2rem;flex-direction:column;gap:1.25rem}
.hcard-header{display:flex;align-items:center;gap:1rem}
.hcard-avatar{width:52px;height:52px;background:var(--navy);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:var(--white);flex-shrink:0}
.hcard-name{font-weight:700;font-size:1rem;color:var(--navy)}
.hcard-role{font-size:0.8rem;color:var(--slate);margin-top:2px}
.hcard-divider{height:1px;background:var(--border)}
.hcard-badges{display:flex;flex-direction:column;gap:0.625rem}
.hcard-badge{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 0.875rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm)}
.badge-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.badge-dot.blue{background:var(--blue)}
.badge-dot.green{background:#16a34a}
.badge-dot.orange{background:var(--orange)}
.badge-dot.purple{background:#7c3aed}
.badge-text{font-size:0.82rem;color:var(--text);font-weight:500}
.badge-sub{font-size:0.75rem;color:var(--slate);margin-top:1px}
/* LOGOS / STATS BAND */
.stats-band{background:var(--navy);padding:2.5rem var(--gx)}
.stats-inner{max-width:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
@media(max-width:700px){.stats-inner{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center}
.stat-val{font-size:1.75rem;font-weight:800;color:var(--white);letter-spacing:-0.02em}
.stat-val span{color:#60a5fa}
.stat-label{font-size:0.78rem;color:#94a3b8;margin-top:0.25rem;font-weight:400}
/* SECTIONS */
section{padding:var(--sp-section) var(--gx)}
.section-inner{max-width:none;margin:0 auto}
.section-tag{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:0.875rem}
.section-title{font-size:clamp(1.8rem,4vw,2.9rem);font-weight:800;letter-spacing:-0.03em;line-height:1.1;color:var(--navy);margin-bottom:1rem}
.section-sub{color:var(--slate);font-size:clamp(1rem,1.4vw,1.12rem);font-weight:400;max-width:560px;line-height:1.7}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem;gap:2rem;flex-wrap:wrap}
/* FORMATIONS */
.formations{background:var(--off)}
.formations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:900px){.formations-grid{grid-template-columns:1fr}}
.f-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);display:flex;flex-direction:column}
.f-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.f-icon{width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1.25rem}
.f-icon.blue{background:var(--blue-l)}
.f-icon.navy{background:#e8edf5}
.f-icon.orange{background:var(--orange-l)}
.f-title{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:0.5rem;letter-spacing:-0.01em}
.f-desc{font-size:0.875rem;color:var(--slate);line-height:1.7;flex:1;margin-bottom:1.5rem}
.f-tags{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:1.25rem}
.f-tag{background:var(--off);border:1px solid var(--border);color:var(--slate);padding:0.2rem 0.6rem;border-radius:var(--r-sm);font-size:0.72rem;font-weight:500}
.f-link{color:var(--blue);font-size:0.85rem;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:0.375rem;margin-top:auto;transition:gap 0.15s}
.f-link:hover{gap:0.6rem}
/* QUALIF */
.qualif{background:var(--white)}
.qualif-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
@media(max-width:768px){.qualif-layout{grid-template-columns:1fr}}
.q-list{display:flex;flex-direction:column;gap:0.875rem}
.q-item{display:flex;gap:1rem;padding:1.25rem;border:1px solid var(--border);border-radius:var(--r);background:var(--off);transition:border-color 0.15s}
.q-item:hover{border-color:var(--blue)}
.q-num{width:34px;height:34px;min-width:34px;background:var(--blue-l);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:700;font-size:0.8rem}
.q-name{font-weight:700;font-size:0.9rem;color:var(--navy);margin-bottom:0.25rem}
.q-detail{font-size:0.8rem;color:var(--slate);line-height:1.5}
.q-right{display:flex;flex-direction:column;gap:1.25rem}
.about-card{background:var(--navy);border-radius:var(--r-lg);padding:2rem;color:var(--white)}
.about-card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.about-avatar{width:48px;height:48px;background:rgba(255,255,255,0.15);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem}
.about-name{font-weight:700;font-size:1.05rem}
.about-role{font-size:0.8rem;color:#93c5fd;margin-top:2px}
.about-text{font-size:0.875rem;color:#cbd5e1;line-height:1.75}
.zone-card{background:var(--off);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem}
.zone-title{font-weight:700;font-size:0.875rem;color:var(--navy);margin-bottom:0.875rem;display:flex;align-items:center;gap:0.5rem}
.zone-tags{display:flex;flex-wrap:wrap;gap:0.5rem}
.z-tag{background:var(--white);border:1px solid var(--border);color:var(--slate);padding:0.3rem 0.7rem;border-radius:var(--r-sm);font-size:0.78rem;font-weight:500}
.info-card{background:var(--blue-ll);border:1px solid var(--blue-l);border-radius:var(--r);padding:1.25rem;display:flex;gap:0.875rem;align-items:flex-start}
.info-icon{font-size:1.25rem;flex-shrink:0;margin-top:2px}
.info-text{font-size:0.83rem;color:var(--navy);line-height:1.6}
/* PROCESS */
.process{background:var(--off)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.steps{grid-template-columns:1fr}}
.step{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem;position:relative}
.step-num{font-size:2.5rem;font-weight:800;color:var(--blue-l);letter-spacing:-0.04em;line-height:1;margin-bottom:1rem}
.step-title{font-weight:700;font-size:0.9rem;color:var(--navy);margin-bottom:0.5rem}
.step-desc{font-size:0.82rem;color:var(--slate);line-height:1.65}
/* CONTACT */
.contact{background:var(--white)}
.contact-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;margin-top:3rem}
@media(max-width:768px){.contact-layout{grid-template-columns:1fr}}
.c-info{display:flex;flex-direction:column;gap:2rem}
.c-item{display:flex;gap:1rem;align-items:flex-start}
.c-icon{width:40px;height:40px;min-width:40px;background:var(--blue-l);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.c-label{font-size:0.72rem;color:var(--slate);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-bottom:0.25rem}
.c-val{font-size:0.9rem;color:var(--text);font-weight:500}
.c-val a{color:var(--blue);text-decoration:none}
.obligation-box{background:var(--off);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:var(--r-sm);padding:1.25rem;font-size:0.83rem;color:var(--slate);line-height:1.65}
.obligation-box strong{color:var(--navy);font-weight:600}
/* FORM */
.form{display:flex;flex-direction:column;gap:1rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.f-row{grid-template-columns:1fr}}
.fg{display:flex;flex-direction:column;gap:0.35rem}
.fg label{font-size:0.8rem;color:var(--slate);font-weight:500}
.fg input,.fg select,.fg textarea{background:var(--off);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:0.7rem 1rem;color:var(--text);font-family:var(--font),sans-serif;font-size:0.875rem;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);width:100%}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--accent);background:var(--white);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.fg input::placeholder,.fg textarea::placeholder{color:var(--slate-l)}
.fg select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.fg textarea{resize:vertical;min-height:100px}
.btn-submit{background:var(--navy);color:var(--white);padding:0.875rem 2rem;border-radius:var(--r-btn);font-size:0.9rem;font-weight:600;border:none;cursor:pointer;transition:background-color 0.15s;font-family:var(--font),sans-serif;width:100%;margin-top:0.5rem}
.btn-submit:hover{background-color:var(--navy2)}
/* CTA BAND */
.cta-band{background:var(--blue-ll);border-top:1px solid var(--blue-l);border-bottom:1px solid var(--blue-l);padding:4rem var(--gx);text-align:center}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:0.875rem}
.cta-band p{color:var(--slate);font-size:0.975rem;margin-bottom:2rem}
/* FOOTER */
footer{background:var(--navy);padding:0;margin:0;display:block;width:100%}
@media(max-width:768px){
.nav-links{display:none}
.footer-inner{flex-direction:column;text-align:center}
}
/* ═══════════════════════════════════════════════════════════
DARK MODE
═══════════════════════════════════════════════════════════ */
/* Bouton toggle */
.theme-switch {
display: flex;
align-items: center;
gap: 0.375rem;
flex-shrink: 0;
cursor: pointer;
}
.theme-switch-track {
width: 40px; height: 22px;
background: var(--border2);
border-radius: 100px;
position: relative;
transition: background 0.25s;
flex-shrink: 0;
}
.theme-switch-thumb {
width: 16px; height: 16px;
background: white;
border-radius: 50%;
position: absolute;
top: 3px; left: 3px;
transition: transform 0.25s, background 0.25s;
display: flex; align-items: center; justify-content: center;
font-size: 9px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
[data-theme="dark"] .theme-switch-track { background: #475569; }
[data-theme="dark"] .theme-switch-thumb { transform: translateX(18px); }
/* ── Bandeau dev (roddier.dev = dev/staging) — repris du bandeau de l'app ── */
.dev-banner {
/* 100 % identique au bandeau de l'app (.app-dev-banner, app.css) : hauteur FIXE
1.85rem (= le decalage du body et de la nav, jointif sur tous les moteurs),
flex centre, police systeme. Seul le domaine affiche change. */
position: fixed; top: 0; left: 0; right: 0;
background: #ff3b30; color: #fff;
font-size: 0.72rem; font-weight: 700;
height: 1.85rem;
display: flex; align-items: center; justify-content: center;
padding: 0 1rem;
z-index: 9999; letter-spacing: 0.04em; text-transform: uppercase;
box-shadow: 0 2px 8px rgba(0,0,0,0.20);
pointer-events: none;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
}
.dev-banner::before { content: '\26A0 '; }
body.has-dev-banner { padding-top: 1.85rem; }
body.has-dev-banner nav { top: 1.85rem; }
@media print { .dev-banner { display: none !important; } body.has-dev-banner { padding-top: 0 !important; } }
/* ── Interrupteur thème 3 états (Clair / Système / Sombre) — repris de l'app ── */
.theme-switch3 { box-sizing: border-box; display: inline-flex; align-items: center; position: relative; background: var(--off); border: 1px solid var(--border); border-radius: 100px; padding: 4px; height: 34px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); flex-shrink: 0; }
.theme-switch3-thumb { position: absolute; top: 4px; left: 4px; width: 32px; height: 24px; background: #fff; border-radius: 100px; box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); z-index: 1; }
[data-theme="dark"] .theme-switch3-thumb { box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); }
[data-theme="dark"] .theme-switch3-opt[aria-pressed="true"] { color: #0f2544; }
.theme-switch3-opt { position: relative; z-index: 2; width: 32px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--slate); cursor: pointer; padding: 0; border-radius: 100px; transition: color 0.2s; font-family: inherit; }
.theme-switch3-opt svg { width: 14px; height: 14px; }
.theme-switch3-opt:hover { color: var(--navy); }
.theme-switch3-opt[aria-pressed="true"] { color: var(--blue); }
[data-theme-pref="light"] .theme-switch3-thumb { transform: translateX(0); }
[data-theme-pref="auto"] .theme-switch3-thumb { transform: translateX(32px); }
[data-theme-pref="dark"] .theme-switch3-thumb { transform: translateX(64px); }
:root:not([data-theme-pref]) .theme-switch3-thumb { transform: translateX(32px); }
/* Variables dark — palette « soft dark » avec hiérarchie body / cartes / sous-tuiles */
[data-theme="dark"] {
--navy: #e8eef8; /* texte principal — warm off-white */
--navy2: #cbd5e1;
--blue: #7eb1f5; /* bleu pastel plus lumineux */
--blue-l: rgba(126,177,245,0.16);
--blue-ll: rgba(126,177,245,0.09);
--slate: #9aa8bd; /* gris-bleu chaleureux pour les paragraphes */
--slate-l: #64748b;
--text: #e8eef8;
--white: #1c2640; /* fond des cartes — slate-navy élevé */
--off: #283454; /* fond des sous-tuiles — encore + élevé */
--border: #354263; /* bordures subtiles mais visibles */
--border2: #4b5a7a;
--orange: #fbb074;
--orange-l: rgba(251,176,116,0.12);
/* Ombres en sombre : portées plus marquées (noir) pour détacher les surfaces
élevées d'un fond déjà sombre — les ombres navy translucides y disparaîtraient. */
--shadow-sm:0 1px 2px rgba(0,0,0,0.30),0 1px 3px rgba(0,0,0,0.24);
--shadow-md:0 4px 14px rgba(0,0,0,0.38),0 2px 5px rgba(0,0,0,0.28);
--shadow-lg:0 14px 36px rgba(0,0,0,0.50),0 5px 12px rgba(0,0,0,0.32);
}
[data-theme="dark"] body { background: #0e1729; }
/* Thème sombre : --accent-soft n'est pas redéfini par page → il resterait clair
(boîtes accent-soft illisibles). On le rend adaptatif (tuile bleutée sur fond
sombre). Spécificité html[data-theme] body pour battre body.page-* . */
html[data-theme="dark"] body { --accent-soft: rgba(126,177,245,0.12); }
[data-theme="dark"] nav { background: rgba(15,23,42,0.72); border-color: rgba(255,255,255,0.14); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.35); }
[data-theme="dark"] .nav-logo { color: #e2e8f0; }
/* Logo en mode sombre : INVERSION (rond blanc + route bleu nuit) — harmonisé avec l'app.
Le rond navy se fondrait dans le fond sombre, donc on l'éclaircit en blanc. */
[data-theme="dark"] .logo-bg,
[data-theme="dark"] #page-loader-icon circle { fill: #ffffff; }
[data-theme="dark"] .nav-mobile { background: rgba(15,23,42,0.88); border-color: rgba(255,255,255,0.14); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .nav-mobile a { color: #e2e8f0; border-color: #334155; }
[data-theme="dark"] .nav-mobile-cta { background-color: #3f5d82 !important; color: white !important; }
[data-theme="dark"] .nav-cta { background-color: #60a5fa; color: #0f172a; }
[data-theme="dark"] #nav-login-desktop { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .hero { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .hero-card { background: rgba(30,41,59,0.55); border-color: rgba(255,255,255,0.12); box-shadow: inset 1px 1px 0 rgba(255,255,255,0.06); }
[data-theme="dark"] .hcard-divider { background: #334155; }
[data-theme="dark"] .hcard-badge { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .hcard-name { color: #e2e8f0; }
[data-theme="dark"] .badge-sub { color: #64748b; }
[data-theme="dark"] .stats-band { background: #1e293b; }
[data-theme="dark"] .formations { background: #0f172a; }
[data-theme="dark"] .f-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .f-title { color: #e2e8f0; }
[data-theme="dark"] .f-tag { background: #0f172a; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .qualif { background: #0f172a; }
[data-theme="dark"] .q-item { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .q-name { color: #e2e8f0; }
[data-theme="dark"] .about-card { background: #1e293b; }
[data-theme="dark"] .zone-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .z-tag { background: #0f172a; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .info-card { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.2); }
[data-theme="dark"] .info-text { color: #e2e8f0; }
[data-theme="dark"] .process { background: #0f172a; }
[data-theme="dark"] .step { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .step-title { color: #e2e8f0; }
[data-theme="dark"] .contact { background: #0f172a; }
[data-theme="dark"] .fg input,
[data-theme="dark"] .fg select,
[data-theme="dark"] .fg textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .fg label { color: #94a3b8; }
[data-theme="dark"] .obligation-box { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .btn-submit { background-color: #60a5fa; color: #0f172a; }
[data-theme="dark"] .cta-band, [data-theme="dark"] #cta-band { background: linear-gradient(135deg,rgba(63,93,130,0.15),rgba(22,163,74,0.12)) !important; border-color: rgba(96,165,250,0.2) !important; }
[data-theme="dark"] .cta-band h2, [data-theme="dark"] #cta-band h2 { color: #e2e8f0 !important; }
[data-theme="dark"] .cta-band p, [data-theme="dark"] #cta-band p { color: #94a3b8 !important; }
[data-theme="dark"] .cta-band h2 { color: #e2e8f0; }
[data-theme="dark"] .divider { background: linear-gradient(to right, transparent, #334155, transparent); }
[data-theme="dark"] footer { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .section-title { color: #e2e8f0; }
[data-theme="dark"] .section-tag { color: #60a5fa; }
[data-theme="dark"] #legal-overlay > div { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] #rousseau-overlay > div { background: #1e293b; }
[data-theme="dark"] .login-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .chart-table th { background: #0f172a; color: #94a3b8; }
[data-theme="dark"] .chart-table td { border-color: #1e293b; }
/* ── Corrections dark mode complémentaires ── */
/* ── Logo : animation de la route — tracé arrondi qui avance (compatible iOS) ──
On dessine/efface le TRACÉ lui-même (stroke-dashoffset) → le bout ARRONDI de la
route avance le long de la courbe (pas une barre droite qui glisse).
⚠ iOS/WebKit écrase les dashoffset NÉGATIFS. On reste donc en valeurs >= 0 :
la longueur du tracé ≈ 1195, dasharray 1200 (période 2400, donc 0 et 2400 = « plein »).
- 0→15% : 1200→0 = la route se dessine de gauche à droite (entrée).
- 15→64% : maintien (plein).
- 64→65% : saut INSTANTANÉ 0→2400 (step-end) — invisible car 0 et 2400 = même état plein.
- 65→90% : 2400→1200 = la route s'efface de gauche à droite (sortie), bord arrondi.
- 90→100%: maintien (caché). Boucle vers 0% (1200=caché) sans à-coup.
Durée 13s à garder synchro avec DUR dans resumeLogoAnim() (chrome.js). */
@keyframes roadDraw{0%{stroke-dashoffset:1200}15%{stroke-dashoffset:0}64%{stroke-dashoffset:0;animation-timing-function:step-end}65%{stroke-dashoffset:2400}90%{stroke-dashoffset:1200}100%{stroke-dashoffset:1200}}
.logo-road{stroke-dasharray:1200;stroke-dashoffset:1200;animation:roadDraw 13s ease-in-out infinite;animation-delay:.2s}
/* ── Logo dark mode — inversé ── */
[data-theme="dark"] .logo-road { stroke: #0f2544 !important; }
/* Réduire les animations : logo figé dessiné (harmonisé avec l'app). */
@media (prefers-reduced-motion: reduce) { .logo-road { animation: none; stroke-dashoffset: 0; } }
/* ── Éléments à fond navy — restent sombres en dark mode ── */
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"],
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r)"] {
background: #0f2544 !important;
color: white !important;
}
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div,
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r)"] div {
color: inherit;
}
/* Newsletter section */
[data-theme="dark"] section[style*="background:var(--navy)"] {
background: #0f2544 !important;
}
[data-theme="dark"] section[style*="background:var(--navy)"] h2 {
color: #f1f5f9 !important;
}
[data-theme="dark"] section[style*="background:var(--navy)"] p {
color: #94a3b8 !important;
}
/* Input newsletter en dark */
[data-theme="dark"] input[style*="background:rgba(255,255,255,0.08)"] {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.2) !important;
color: white !important;
}
/* Stats band (déjà sombre, ne pas toucher) */
[data-theme="dark"] .stats-band {
background: #1e293b !important;
}
/* N°1 stat + calc result — textes internes */
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div[style*="color:var(--blue)"] { color: #60a5fa !important; }
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div[style*="color:#60a5fa"] { color: #60a5fa !important; }
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div[style*="color:#94a3b8"] { color: #94a3b8 !important; }
/* Textes généraux */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span { color: inherit; }
[data-theme="dark"] .section-sub { color: #94a3b8; }
[data-theme="dark"] .hero-sub { color: #94a3b8; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #e2e8f0; }
/* Icônes SVG inline (stroke/fill héritent) */
[data-theme="dark"] svg { color: inherit; }
/* Hero */
[data-theme="dark"] .hero-stat-val { color: #60a5fa; }
[data-theme="dark"] .hero-stat-label { color: #94a3b8; }
[data-theme="dark"] .badge-text { color: #e2e8f0; }
[data-theme="dark"] .btn-primary { background-color: #60a5fa; color: #0f172a; }
[data-theme="dark"] .btn-outline { border-color: rgba(255,255,255,0.18); color: #e2e8f0; background: rgba(255,255,255,0.06); }
[data-theme="dark"] .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
/* Stats band */
[data-theme="dark"] .stat-val { color: #e2e8f0; }
[data-theme="dark"] .stat-label { color: #94a3b8; }
/* Formations */
[data-theme="dark"] .f-desc { color: #94a3b8; }
[data-theme="dark"] .f-link { color: #60a5fa; }
[data-theme="dark"] .f-icon { background: #0f172a !important; }
[data-theme="dark"] .formations-header p { color: #94a3b8; }
[data-theme="dark"] p[style*="font-size:0.72rem;font-weight:700"][style*="color:var(--navy)"] { color: #60a5fa !important; border-color: #60a5fa !important; }
[data-theme="dark"] p[style*="color:#16a34a"] { color: #4ade80 !important; border-color: #4ade80 !important; }
/* Calculateur */
[data-theme="dark"] .calc-slider { background: #334155; }
[data-theme="dark"] .calc-result { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] div[style*="background:#f8fafc"] { background: #1e293b !important; }
[data-theme="dark"] div[style*="background:white"] { background: #1e293b !important; }
[data-theme="dark"] div[style*="background:#fff"] { background: #1e293b !important; }
[data-theme="dark"] div[style*="color:#0f2544"] { color: #e2e8f0 !important; }
[data-theme="dark"] div[style*="color:#1a2332"] { color: #e2e8f0 !important; }
[data-theme="dark"] div[style*="color:#3f5d82"] { color: #60a5fa !important; }
[data-theme="dark"] div[style*="color:#64748b"] { color: #94a3b8 !important; }
[data-theme="dark"] div[style*="color:#475569"] { color: #94a3b8 !important; }
[data-theme="dark"] div[style*="color:#334155"] { color: #94a3b8 !important; }
/* Qualifications */
[data-theme="dark"] .q-num { background: #0f172a; color: #60a5fa; border-color: #334155; }
[data-theme="dark"] .q-detail { color: #94a3b8; }
[data-theme="dark"] .about-title { color: #e2e8f0; }
[data-theme="dark"] .about-sub { color: #94a3b8; }
[data-theme="dark"] .about-stat-val { color: #60a5fa; }
[data-theme="dark"] .about-stat-label { color: #94a3b8; }
/* Steps */
[data-theme="dark"] .step-num { background: #1e293b; border-color: #334155; color: #60a5fa; }
[data-theme="dark"] .step-desc { color: #94a3b8; }
[data-theme="dark"] .step-connector { background: #334155; }
/* Stats sections (grandes stats) */
[data-theme="dark"] div[style*="color:#0f2544;font-size:3rem"] { color: #60a5fa !important; }
[data-theme="dark"] div[style*="color:var(--blue);font-size:3rem"] { color: #60a5fa !important; }
[data-theme="dark"] section[style*="background:var(--white)"] { background: #0f172a !important; }
[data-theme="dark"] section[style*="background:var(--off)"] { background: #1e293b !important; }
/* Partenaires */
[data-theme="dark"] div[style*="border-radius:var(--r-lg);padding:2rem;display:flex;flex-direction:column"] { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] div[style*="font-weight:700;font-size:1rem;color:var(--navy)"] { color: #e2e8f0 !important; }
/* Horloge */
[data-theme="dark"] #eco-conduite { background: #0f172a !important; }
[data-theme="dark"] #eco-conduite .section-sub { color: #94a3b8; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] { background: rgba(22,163,74,0.08) !important; border-color: rgba(22,163,74,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] h3 { color: #4ade80 !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] p { color: #86efac !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] label { color: #4ade80 !important; }
[data-theme="dark"] #eco-saving { color: #4ade80 !important; }
[data-theme="dark"] #eco-liters, [data-theme="dark"] #eco-co2 { color: #4ade80 !important; }
[data-theme="dark"] div[style*="background:white;border-radius:var(--r-lg);padding:2rem;box-shadow"] { background: #1e293b !important; }
[data-theme="dark"] #faq-overlay > div { background: #1e293b !important; }
[data-theme="dark"] #faq-overlay h2 { color: #e2e8f0 !important; }
[data-theme="dark"] #faq-overlay p { color: #94a3b8 !important; }
[data-theme="dark"] .faq-item { border-color: #334155 !important; }
[data-theme="dark"] .faq-item button { background: #0f172a !important; color: #e2e8f0 !important; }
[data-theme="dark"] .faq-item div[id^="faq-answer"] { background: #1e293b !important; color: #94a3b8 !important; }
[data-theme="dark"] #clock-time { color: white; }
[data-theme="dark"] #clock-date { color: #93c5fd; }
/* Contact */
[data-theme="dark"] .contact-info-val { color: #e2e8f0; }
[data-theme="dark"] .contact-info-label { color: #94a3b8; }
[data-theme="dark"] select option { background: #1e293b; color: #e2e8f0; }
/* Sections encadrées inline */
/* (Anciennes règles génériques div[style*="background:#XXX"] retirées :
elles captaient aussi les icon containers et créaient des incohérences.
Remplacées par des règles ciblées plus bas — voir « FIXES round 8 ».) */
[data-theme="dark"] input[style*="background:#f8fafc"] { background: #1e293b !important; color: #e2e8f0 !important; }
/* Footer */
[data-theme="dark"] footer { background: #0a1628 !important; display:block; width:100%; margin:0; }
/* Bouton espace stagiaire nav */
[data-theme="dark"] button[onclick="openPassRousseau()"] { background: #1e293b !important; border-color: #475569 !important; color: #e2e8f0 !important; }
/* Modals */
[data-theme="dark"] #legal-overlay > div h2,
[data-theme="dark"] #legal-overlay > div h3,
[data-theme="dark"] #legal-overlay > div p,
[data-theme="dark"] #legal-overlay > div li { color: #e2e8f0; }
[data-theme="dark"] #rousseau-overlay > div h2 { color: #e2e8f0; }
[data-theme="dark"] #rousseau-overlay > div p { color: #94a3b8; }
/* Nav links */
[data-theme="dark"] section[style*="faf5ff"] { background: linear-gradient(180deg,#0f172a 0%,rgba(124,58,237,0.05) 50%,#0f172a 100%) !important; }
[data-theme="dark"] section[style*="fff7ed"] { background: linear-gradient(180deg,#1e293b 0%,rgba(234,88,12,0.05) 50%,#1e293b 100%) !important; }
[data-theme="dark"] section[style*="eff6ff"][style*="f0fdf4"] { background: linear-gradient(180deg,#0f172a 0%,rgba(63,93,130,0.06) 40%,rgba(22,163,74,0.06) 70%,#0f172a 100%) !important; }
[data-theme="dark"] section[style*="f0fdf4"][id="eco-conduite"] { background: linear-gradient(180deg,#0f172a 0%,rgba(22,163,74,0.05) 50%,#0f172a 100%) !important; }
[data-theme="dark"] div[style*="background:#eff6ff;border:1px solid #bfdbfe"] { background: rgba(63,93,130,0.15) !important; border-color: rgba(63,93,130,0.3) !important; }
[data-theme="dark"] div[style*="background:#f0fdf4;border:1px solid #86efac"] { background: rgba(22,163,74,0.15) !important; border-color: rgba(22,163,74,0.3) !important; }
[data-theme="dark"] div[style*="background:#fff7ed;border:1px solid #fed7aa"] { background: rgba(234,88,12,0.15) !important; border-color: rgba(234,88,12,0.3) !important; }
/* Steps dark mode */
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#eff6ff"] { background: rgba(63,93,130,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] { background: rgba(22,163,74,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#fff7ed"] { background: rgba(234,88,12,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#faf5ff"] { background: rgba(124,58,237,0.2) !important; }
[data-theme="dark"] .nav-links a { color: #94a3b8; }
[data-theme="dark"] .nav-links a:hover { color: #e2e8f0; }
[data-theme="dark"] .nav-links a.nav-active { color: #e2e8f0; }
/* ═══════════════════════════════════════════════════════════
RESPONSIVE — MOBILE FIRST
═══════════════════════════════════════════════════════════ */
/* Hamburger menu */
@media (max-width: 700px) {
.eco-stats-grid { grid-template-columns: 1fr !important; }
.roi-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}
/* Footer responsive */
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 700px) {
.footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}
/* Bas footer responsive */
@media (max-width: 600px) {
.footer-bottom { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
}
/* Bouton « retour en haut » — couche flottante : action primaire, pastille navy
+ reflet de verre. Le style visuel vit ICI (source unique) ; les pages ne
gardent que le positionnement inline. */
#scroll-top {
background-color: var(--accent);
color: #fff;
box-shadow: 0 6px 18px rgba(15,37,68,0.22);
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}
#scroll-top:hover {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(15,37,68,0.30);
}
/* Relief visuel */
.section-onisr::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(63,93,130,0.04) 0%, transparent 70%);
pointer-events: none;
}
.f-card { transition: all 0.2s; }
.f-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.step { transition: all 0.2s; }
.step:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.06); border-color: var(--blue); }
/* ── Protections ── */
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input, textarea, select, [contenteditable] {
-webkit-user-select: text;
user-select: text;
}
img {
-webkit-user-drag: none;
user-drag: none;
pointer-events: none;
}
/* Graphiques ONISR */
.charts-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) {
.charts-grid { grid-template-columns: 1fr !important; }
.charts-grid canvas { max-width: 100% !important; }
}
/* ── Dropdown menu ── */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
content: '';
display: inline-block;
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
margin-left: 5px;
vertical-align: middle;
opacity: 0.5;
transition: transform 0.2s;
}
.nav-dropdown:hover > a::after { transform: rotate(180deg); }
.nav-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding-top: 12px;
z-index: 200;
min-width: 220px;
}
.nav-dropdown-menu::before {
content: '';
display: block;
position: absolute;
top: 0; left: 0; right: 0;
height: 12px;
}
/* Carte du dropdown — même matériau que la nav : verre dépoli sur l'élément,
réfraction sur ::after. isolation:isolate crée le contexte d'empilement
nécessaire au z-index négatif de la couche de réfraction. */
.nav-dropdown-inner {
position: relative;
isolation: isolate;
background: rgba(255,255,255,0.65);
-webkit-backdrop-filter: blur(16px) saturate(185%);
backdrop-filter: blur(16px) saturate(185%);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 12px;
padding: 0.5rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 24px rgba(15,37,68,0.12);
}
.nav-dropdown-inner::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
-webkit-backdrop-filter: url(#lg-refract);
backdrop-filter: url(#lg-refract);
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; animation: navDropIn 0.26s cubic-bezier(0.34,1.56,0.64,1); transform-origin: top center; }
@keyframes navDropIn { from { opacity: 0; transform: translateY(-8px) scale(0.92); } to { opacity: 1; transform: none; } }
.nav-dropdown-menu a {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 0.875rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
color: var(--text);
text-decoration: none;
transition: background 0.15s;
white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--off); color: var(--navy); }
.nav-dropdown-menu .dropdown-icon {
width: 28px; height: 28px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 14px;
}
[data-theme="dark"] .nav-dropdown-inner {
background: rgba(30,41,59,0.65);
border-color: rgba(255,255,255,0.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .nav-dropdown-menu a { color: #e2e8f0; }
[data-theme="dark"] .nav-dropdown-menu a:hover { background: #0f172a; }
/* Nav groupe droit */
.nav-right { gap: 0.625rem; }
@media (max-width: 900px) {
.nav-right .theme-switch { display: flex; }
}
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 8px;
background: none;
border: none;
flex-shrink: 0;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--navy);
border-radius: 2px;
transition: all 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Menu mobile overlay — verre dépoli plus opaque que la nav (lisibilité d'une
liste pleine largeur), sans couche de réfraction. */
.nav-mobile {
display: none;
position: fixed;
top: 66px;
left: 0;
right: 0;
background: rgba(255,255,255,0.85);
-webkit-backdrop-filter: blur(20px) saturate(185%);
backdrop-filter: blur(20px) saturate(185%);
border-bottom: 1px solid rgba(255,255,255,0.6);
padding: 1.5rem 2rem;
flex-direction: column;
gap: 0;
z-index: 99;
box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.8), 0 8px 24px rgba(15,37,68,0.1);
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
display: block;
padding: 0.875rem 0;
border-bottom: 1px solid var(--border);
color: var(--text);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile .nav-mobile-cta {
margin-top: 1rem;
background: var(--navy);
color: white;
text-align: center;
padding: 0.875rem;
border-radius: var(--r-btn);
font-weight: 600;
}
/* Bascule en menu hamburger plus tôt pour éviter le débordement : 8 liens de tête
(5 secteurs + Produit + Contact + FAQ) demandent ~1345px ; en dessous → hamburger. */
@media (max-width: 1360px) {
.nav-links { display: none; }
.nav-hamburger { display: flex; }
#nav-cta-desktop { display: none; }
#nav-login-desktop { display: none !important; } /* page produit : sinon pousse le hamburger hors écran */
button[onclick="openPassRousseau()"] { display: none; }
}
@media (max-width: 900px) {
/* HERO */
.hero { padding: 7rem 1.5rem 4rem; }
.hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.hero-stat-val { font-size: 1.4rem; }
.hero-stats { gap: 1.5rem; }
/* STATS BAND */
.stats-inner { grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
/* FORMATIONS */
.formations-grid { grid-template-columns: 1fr; }
div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
/* QUALIFICATIONS */
.qualif-layout { grid-template-columns: 1fr; }
/* STEPS */
.steps { grid-template-columns: repeat(2,1fr); }
/* CONTACT */
.contact-layout { grid-template-columns: 1fr; }
.f-row { grid-template-columns: 1fr; }
/* FOOTER */
.footer-inner { flex-direction: column; text-align: center; gap: 0.75rem; }
.footer-links { flex-wrap: wrap; justify-content: center; }
/* GRAPHIQUES */
div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
div[style*="grid-template-columns:1fr 1fr;gap:2rem"] { grid-template-columns: 1fr !important; }
/* CALCULATEUR */
div[style*="grid-template-columns:1fr 1.3fr"] { grid-template-columns: 1fr !important; }
div[style*="grid-template-columns:1fr 1.2fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
/* GLOBAL */
section { padding: 4rem 1.25rem; }
.section-inner { padding: 0; }
/* NAV */
nav { padding: 0 1rem; }
/* HERO */
h1 { font-size: 2rem; }
.hero-sub { font-size: 0.95rem; }
.hero-actions { flex-direction: column; align-items: flex-start; }
.btn-primary, .btn-outline { width: 100%; text-align: center; justify-content: center; }
.hero-stats { grid-template-columns: repeat(2,1fr); display: grid; gap: 1rem; }
/* HERO CARD */
.hero-card { padding: 1.5rem; }
/* STATS BAND */
.stats-band { padding: 2rem 1.25rem; }
.stats-inner { grid-template-columns: repeat(2,1fr); gap: 1rem; }
.stat-val { font-size: 1.4rem; }
/* STEPS */
.steps { grid-template-columns: 1fr; }
/* SECTIONS STATS */
div[style*="grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem"] {
grid-template-columns: 1fr !important;
}
div[style*="grid-template-columns:repeat(2,1fr);gap:1.5rem"] {
grid-template-columns: 1fr !important;
}
/* PARTENAIRES */
div[style*="display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem"] {
grid-template-columns: 1fr !important;
}
/* SECTIONS STATS GRANDE */
div[style*="grid-template-columns:repeat(3,1fr)"] {
grid-template-columns: 1fr !important;
}
/* QUALIFICATIONS */
.q-right { gap: 1rem; }
.about-card { padding: 1.5rem; }
/* CONTACT */
.contact { padding: 4rem 1.25rem; }
.btn-submit { font-size: 0.875rem; }
/* NEWSLETTER */
div[style*="display:flex;gap:0.75rem;flex-wrap:wrap"] input { min-width: 100% !important; }
/* FOOTER */
footer { padding: 2rem 1.25rem; width: 100%; box-sizing: border-box; }
/* LEGAL MODAL */
#legal-overlay { padding: 1rem 0.75rem; }
#legal-overlay > div { padding: 2rem 1.25rem; }
/* ROUSSEAU MODAL */
#rousseau-overlay { padding: 1rem; }
#rousseau-overlay > div { padding: 1.75rem 1.25rem; }
}
/* ═══════════════════════════════════════════════════════════
STYLES COMMUNS AUX PAGES CIBLES
(entreprises, associations, collectivites, particuliers, ecoles)
═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.fg input,.fg select,.fg textarea{background:var(--off);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:0.7rem 1rem;color:var(--text);font-family:var(--font),sans-serif;font-size:0.875rem;transition:border-color 0.15s;width:100%}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--blue);background:var(--white)}
.fg input::placeholder,.fg textarea::placeholder{color:var(--slate-l)}
[data-theme="dark"] .fg input,
[data-theme="dark"] .fg select,
[data-theme="dark"] .fg textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .cta-band, [data-theme="dark"] #cta-band { background: linear-gradient(135deg,rgba(63,93,130,0.15),rgba(22,163,74,0.12)) !important; border-color: rgba(96,165,250,0.2) !important; }
[data-theme="dark"] .cta-band h2, [data-theme="dark"] #cta-band h2 { color: #e2e8f0 !important; }
[data-theme="dark"] .cta-band p, [data-theme="dark"] #cta-band p { color: #94a3b8 !important; }
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"],
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r)"] {
background: #0f2544 !important;
color: white !important;
}
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div,
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r)"] div {
color: inherit;
}
[data-theme="dark"] input[style*="background:rgba(255,255,255,0.08)"] {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.2) !important;
color: white !important;
}
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span { color: inherit; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #e2e8f0; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] { background: rgba(22,163,74,0.08) !important; border-color: rgba(22,163,74,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] h3 { color: #4ade80 !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] p { color: #86efac !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] label { color: #4ade80 !important; }
[data-theme="dark"] #eco-liters, [data-theme="dark"] #eco-co2 { color: #4ade80 !important; }
[data-theme="dark"] #legal-overlay > div h2,
[data-theme="dark"] #legal-overlay > div h3,
[data-theme="dark"] #legal-overlay > div p,
[data-theme="dark"] #legal-overlay > div li { color: #e2e8f0; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#eff6ff"] { background: rgba(63,93,130,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#fff7ed"] { background: rgba(234,88,12,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#faf5ff"] { background: rgba(124,58,237,0.2) !important; }
input, textarea, select, [contenteditable] {
-webkit-user-select: text;
user-select: text;
}
.nav-dropdown-menu a.active-target {
background: var(--blue-ll);
color: var(--blue);
font-weight: 700;
}
[data-theme="dark"] .nav-dropdown-menu a.active-target {
background: rgba(96,165,250,0.15);
color: #60a5fa;
}
.offre-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.offre-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 16px;
padding: 2rem;
display: flex;
flex-direction: column;
position: relative;
transition: all 0.2s;
}
.offre-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.offre-card .offre-num {
position: absolute;
top: -16px; left: 2rem;
background: var(--blue);
color: white;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.375rem 0.875rem;
border-radius: 100px;
}
.offre-card .offre-icon {
width: 56px; height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
margin-top: 0.5rem;
}
.offre-card h3 {
font-size: 1.15rem;
font-weight: 800;
color: var(--navy);
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.offre-card .offre-baseline {
font-size: 0.82rem;
color: var(--blue);
font-weight: 600;
margin-bottom: 1rem;
}
.offre-card .offre-desc {
font-size: 0.875rem;
color: var(--slate);
line-height: 1.7;
margin-bottom: 1.25rem;
}
.offre-card ul.offre-list {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.offre-card ul.offre-list li {
font-size: 0.83rem;
color: var(--text);
display: flex;
align-items: flex-start;
gap: 0.625rem;
line-height: 1.5;
}
.offre-card ul.offre-list li::before {
content: '';
width: 6px; height: 6px;
background: var(--blue);
border-radius: 50%;
margin-top: 8px;
flex-shrink: 0;
}
.offre-card .offre-cta {
margin-top: auto;
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--blue);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: gap 0.15s;
}
.offre-card .offre-cta:hover { gap: 0.65rem; }
.offre-note {
margin-top: 2rem;
background: var(--blue-ll);
border: 1px solid var(--blue-l);
border-left: 3px solid var(--blue);
border-radius: 10px;
padding: 1.25rem 1.5rem;
font-size: 0.85rem;
color: var(--navy);
line-height: 1.65;
}
.offre-note strong { color: var(--blue); font-weight: 700; }
[data-theme="dark"] .offre-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .offre-card h3 { color: #e2e8f0; }
[data-theme="dark"] .offre-card ul.offre-list li { color: #e2e8f0; }
[data-theme="dark"] .offre-note { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.2); color: #e2e8f0; }
[data-theme="dark"] .offre-note strong { color: #60a5fa; }
.legal-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 3rem;
align-items: start;
}
.legal-article {
background: var(--navy);
color: white;
border-radius: 18px;
padding: 2.5rem;
position: relative;
overflow: hidden;
}
.legal-article::before {
content: '§';
position: absolute;
top: -40px; right: -20px;
font-size: 14rem;
font-weight: 800;
color: rgba(255,255,255,0.05);
line-height: 1;
font-family: serif;
pointer-events: none;
}
.legal-article .legal-ref {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #93c5fd;
margin-bottom: 0.75rem;
position: relative;
}
.legal-article .legal-title {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
margin-bottom: 1.25rem;
position: relative;
}
.legal-article .legal-quote {
font-size: 0.95rem;
line-height: 1.7;
color: #cbd5e1;
font-style: italic;
border-left: 2px solid rgba(96,165,250,0.5);
padding-left: 1.25rem;
margin-bottom: 1.5rem;
position: relative;
}
.legal-article .legal-source {
font-size: 0.75rem;
color: #94a3b8;
position: relative;
}
.legal-article .legal-source a { color: #93c5fd; text-decoration: none; }
.legal-impacts { display: flex; flex-direction: column; gap: 1rem; }
.legal-impact-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.5rem;
}
.legal-impact-card .impact-head {
display: flex;
align-items: center;
gap: 0.875rem;
margin-bottom: 0.625rem;
}
.legal-impact-card .impact-icon {
width: 40px; height: 40px;
background: var(--blue-l);
color: var(--blue);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.legal-impact-card .impact-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--navy);
}
.legal-impact-card p {
font-size: 0.82rem;
color: var(--slate);
line-height: 1.65;
}
[data-theme="dark"] .legal-article { background: #1e293b; }
[data-theme="dark"] .legal-impact-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .legal-impact-card .impact-title { color: #e2e8f0; }
.finance-section { background: linear-gradient(180deg, var(--white) 0%, #fff7ed 50%, var(--white) 100%); }
.finance-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 2.5rem;
}
@media (max-width: 768px) { .finance-grid { grid-template-columns: 1fr; } }
.finance-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.finance-card .finance-tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.3rem 0.75rem;
border-radius: 100px;
width: fit-content;
}
.finance-card.path-a .finance-tag { background: #dcfce7; color: #15803d; }
.finance-card.path-b .finance-tag { background: #fef3c7; color: #b45309; }
.finance-card h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.01em;
}
.finance-card p {
font-size: 0.875rem;
color: var(--slate);
line-height: 1.65;
}
.finance-card ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.finance-card ul li {
font-size: 0.82rem;
color: var(--text);
padding-left: 1.25rem;
position: relative;
line-height: 1.55;
}
.finance-card ul li::before {
content: '✓';
position: absolute;
left: 0;
color: #16a34a;
font-weight: 700;
}
[data-theme="dark"] .finance-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .finance-card h3 { color: #e2e8f0; }
[data-theme="dark"] .finance-card ul li { color: #e2e8f0; }
.nav-dropdown-menu .active-target{background:var(--blue-l);color:var(--blue)!important;font-weight:600}
.nav-dropdown-menu .active-target:hover{background:var(--blue-l)}
/* Fil d'Ariane : fond IDENTIQUE au héros (pas de bande grise ni de liseré) → il
se fond dans le haut de la page au lieu de former un « rectangle » détaché.
margin-top = hauteur du menu fixe (évite tout liseré navy sous le menu). */
.breadcrumb{background:var(--white);padding:0.625rem 2rem;margin-top:66px;position:relative;z-index:50}
/* Fil d'Ariane DANS le héros : flotte sur le fond clair du héros, juste sous le
menu fixe → intégré, sans bande grise ni liseré navy. Le héros (overflow:hidden,
position:relative) le contient ; sa marge haute de 9rem (7rem mobile) laisse la place. */
.hero.has-breadcrumb > .breadcrumb {
position: absolute; top: calc(67px + 0.7rem); left: var(--gx);
z-index: 2; margin: 0;
}
.breadcrumb-inner{max-width:none;margin:0 auto;display:flex;align-items:center;gap:0.5rem;font-size:0.78rem;color:var(--slate)}
.breadcrumb-inner a{display:inline-flex;align-items:center;gap:0.4rem;color:var(--slate);text-decoration:none;transition:color 0.15s;font-weight:500}
.breadcrumb-inner a:hover{color:var(--blue)}
.breadcrumb-inner span[aria-current]{color:var(--navy);font-weight:600}
.hcard-stats{display:flex;flex-direction:column;gap:0.75rem}
.hcard-stat{display:flex;align-items:center;gap:1rem;padding:0.875rem 1rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r)}
.page-associations .hstat-val{font-family:var(--font),sans-serif;font-size:1.55rem;font-weight:800;line-height:1;letter-spacing:-0.02em;min-width:54px;text-align:center;flex-shrink:0}
.page-associations .hstat-val sup{font-size:0.55em;font-weight:700;vertical-align:super}
.page-associations .hstat-text{font-size:0.78rem;line-height:1.4}
.page-associations .hstat-text strong{color:var(--navy);font-weight:700;font-size:0.83rem}
.page-associations .hstat-text span{color:var(--slate);font-weight:400;font-size:0.74rem}
.page-associations .offre-card.highlighted{background:linear-gradient(180deg,#f0fdf4 0%,var(--white) 60%);border-color:#86efac;box-shadow:0 4px 18px rgba(22,163,74,0.08)}
.page-associations .offre-card.highlighted:hover{box-shadow:0 8px 24px rgba(22,163,74,0.12)}
.page-associations .offre-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#16a34a;color:white;font-size:0.7rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:0.35rem 0.875rem;border-radius:var(--r-pill);white-space:nowrap;box-shadow:0 4px 10px rgba(22,163,74,0.25)}
.page-associations .offre-card .offre-num{position:absolute !important;top:1.25rem !important;right:1.5rem !important;left:auto !important;bottom:auto !important;background:transparent !important;color:var(--border2) !important;padding:0 !important;border-radius:0 !important;font-family:var(--font),sans-serif !important;font-size:1.5rem !important;font-weight:800 !important;letter-spacing:-0.02em !important;text-transform:none !important;line-height:1 !important;width:auto !important}
.page-associations .offre-card .offre-icon{width:46px !important;height:46px !important;border-radius:12px !important;display:flex !important;align-items:center !important;justify-content:center !important;margin-bottom:0.25rem !important;margin-top:0 !important;position:relative !important;top:auto !important;left:auto !important}
.page-associations .offre-card .offre-lead{font-size:0.92rem;color:var(--text);line-height:1.6;margin-bottom:0.25rem}
.page-associations .offre-card .offre-lead em{font-style:italic;color:var(--blue);font-weight:500}
.page-associations .offre-card .offre-ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.5rem;font-size:0.84rem;color:var(--slate);line-height:1.55}
.page-associations .offre-card .offre-ul li{position:relative;padding-left:1.1rem}
.page-associations .offre-card .offre-ul li::before{content:"";position:absolute;left:0;top:0.55rem;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.page-associations .offre-card.highlighted .offre-ul li::before{background:#16a34a}
.page-associations .offre-card .offre-meta{display:flex;flex-direction:column;gap:0.25rem;margin-top:0.5rem;padding-top:0.75rem;border-top:1px dashed var(--border)}
.page-associations .offre-card .offre-meta span{font-size:0.73rem;color:var(--slate-l);font-weight:500}
.page-associations .offre-card .offre-meta span::before{content:"→ ";color:var(--border2)}
.page-associations .offre-foot{display:flex;align-items:flex-start;gap:0.875rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem;font-size:0.88rem;line-height:1.6;margin-top:0.5rem}
.page-associations .resp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2rem}
.page-associations .resp-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-lg);padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:0.75rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.page-associations .resp-head{display:flex;align-items:center;gap:0.875rem;margin-bottom:0.25rem}
.page-associations .resp-icon{width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.page-associations .resp-title{font-family:var(--font),sans-serif;font-size:1rem;font-weight:700;color:white;letter-spacing:-0.005em}
.page-associations .resp-tag{display:inline-block;font-size:0.7rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:#fbbf24;padding:0.3rem 0.75rem;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);border-radius:var(--r-pill);align-self:flex-start;margin-bottom:0.25rem}
.page-associations .resp-card p{font-size:0.88rem;color:rgba(255,255,255,0.78);line-height:1.65;margin:0}
.page-associations .resp-card p strong{color:white;font-weight:700}
.page-associations .resp-foot{display:flex;align-items:flex-start;gap:0.875rem;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);border-radius:var(--r-lg);padding:1.25rem 1.5rem;font-size:0.88rem;line-height:1.65;color:rgba(255,255,255,0.78)}
.page-associations .resp-foot svg{margin-top:0.25rem}
@media(max-width:800px){.finance-grid{grid-template-columns:1fr}}
.page-associations .finance-card.path-a{border-left:4px solid #16a34a}
.page-associations .finance-card.path-b{border-left:4px solid #b45309}
.page-associations .finance-tag{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate);align-self:flex-start;margin-bottom:0.25rem}
.page-associations .finance-card.path-a ul li::before{color:#16a34a}
.page-associations .finance-card.path-b ul li::before{color:#b45309}
.page-associations .finance-extras{background:var(--white);border:1px dashed var(--border2);border-radius:var(--r-lg);padding:1.5rem 1.75rem;margin-bottom:0.5rem}
.page-associations .finance-extras-head{display:flex;align-items:center;gap:0.625rem;margin-bottom:1rem;font-size:0.92rem;color:var(--navy)}
.page-associations .finance-extras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.page-associations .fex-title{font-family:var(--font),sans-serif;font-size:0.92rem;font-weight:700;color:var(--navy);margin-bottom:0.4rem}
.page-associations .finance-extras p{font-size:0.82rem;color:var(--slate);line-height:1.6;margin:0}
[data-theme="dark"] .page-associations .breadcrumb{background:#1e293b;border-color:#334155}
[data-theme="dark"] .page-associations .breadcrumb-inner{color:#94a3b8}
[data-theme="dark"] .page-associations .breadcrumb-inner a{color:#94a3b8}
[data-theme="dark"] .page-associations .breadcrumb-inner a:hover{color:#60a5fa}
[data-theme="dark"] .page-associations .breadcrumb-inner span[aria-current]{color:#e2e8f0}
[data-theme="dark"] .page-associations .hcard-stat{background:#0f172a;border-color:#334155}
[data-theme="dark"] .page-associations .hstat-text strong{color:#e2e8f0}
[data-theme="dark"] .page-associations .hstat-text span{color:#94a3b8}
[data-theme="dark"] .page-associations .offre-section{background:#0f172a !important}
[data-theme="dark"] .page-associations .offre-card.highlighted{background:linear-gradient(180deg,rgba(22,163,74,0.12) 0%,#1e293b 60%) !important;border-color:rgba(134,239,172,0.3)}
[data-theme="dark"] .page-associations .offre-card .offre-lead{color:#cbd5e1}
[data-theme="dark"] .page-associations .offre-card .offre-lead em{color:#60a5fa}
[data-theme="dark"] .page-associations .offre-card .offre-ul{color:#94a3b8}
[data-theme="dark"] .page-associations .offre-card .offre-meta{border-top-color:#334155}
[data-theme="dark"] .page-associations .offre-foot{background:#1e293b;border-color:#334155;color:#cbd5e1}
[data-theme="dark"] .page-associations .offre-foot strong{color:#e2e8f0}
[data-theme="dark"] .page-associations .offre-foot span{color:#94a3b8}
[data-theme="dark"] .page-associations .offre-card .offre-num{color:#475569}
[data-theme="dark"] .cadre-resp{background:#0a1628 !important}
[data-theme="dark"] .resp-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1)}
[data-theme="dark"] .resp-title{color:white}
[data-theme="dark"] .finance-section{background:linear-gradient(180deg,#0f172a 0%,rgba(22,163,74,0.06) 50%,#0f172a 100%) !important}
[data-theme="dark"] .finance-card p{color:#cbd5e1}
[data-theme="dark"] .finance-tag{color:#94a3b8}
[data-theme="dark"] .finance-extras{background:#1e293b;border-color:#475569}
[data-theme="dark"] .finance-extras-head{color:#e2e8f0}
[data-theme="dark"] .fex-title{color:#e2e8f0}
[data-theme="dark"] .finance-extras p{color:#94a3b8}
[data-theme="dark"] .nav-dropdown-menu .active-target{background:rgba(96,165,250,0.15);color:#60a5fa !important}
.breadcrumb a {
color: var(--slate);
text-decoration: none;
transition: color 0.15s;
}
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb-current { color: var(--navy); font-weight: 600; }
.breadcrumb-sep { color: var(--slate-l); }
[data-theme="dark"] .breadcrumb-current { color: #e2e8f0; }
.offre-price{font-size:0.82rem;color:var(--slate);margin:0.5rem 0 1rem;padding:0.5rem 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border)}
.offre-price strong{color:#be185d;font-weight:800;font-size:1rem}
html, body {
overflow-x: hidden;
max-width: 100vw;
}
@media (max-width: 480px) {
section { padding-left: 1rem; padding-right: 1rem; }
.stats-band { padding-left: 1rem; padding-right: 1rem; }
.hero { padding-left: 1rem; padding-right: 1rem; }
}
.calc-grid { grid-template-columns: 1fr 1fr; }
#calc-result {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
word-break: normal;
}
#result-level, #result-text, #result-cost {
overflow-wrap: anywhere;
word-break: normal;
max-width: 100%;
}
.advantage-grid { grid-template-columns: repeat(2, 1fr); }
[data-theme="dark"] .advantage-grid > div {
background: #1e293b !important;
}
[data-theme="dark"] .advantage-grid > div > div:last-child > div:first-child {
color: #c4b5fd !important;
}
[data-theme="dark"] .advantage-grid > div > div:last-child > div:last-child {
color: #94a3b8 !important;
}
/* ── Offre 3 volets — Responsive ── */
@media (max-width: 900px) {
.offre-grid { grid-template-columns: 1fr !important; }
.offre-card { padding: 1.5rem !important; }
}
@media (max-width: 600px) {
.offre-card { padding: 1.25rem !important; }
.offre-card .offre-num { left: 1rem; font-size: 0.68rem; }
.offre-card h3 { font-size: 1.05rem !important; }
.offre-card .offre-desc { font-size: 0.85rem !important; }
}
/* ── Page Associations — Responsive ── */
@media (max-width: 900px) {
.page-associations .resp-grid { grid-template-columns: 1fr !important; }
.page-associations .offre-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
.page-associations .resp-card { padding: 1.25rem !important; }
.page-associations .offre-card .offre-num { font-size: 1.25rem !important; top: 1rem; right: 1rem; }
.page-associations .offre-card .offre-icon { width: 40px !important; height: 40px !important; }
}
/* ── Page Associations — Override Mobile Final ── */
@media (max-width: 600px) {
.page-associations .offre-card .offre-num {
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
left: auto !important;
background: transparent !important;
color: var(--border2) !important;
padding: 0 !important;
border-radius: 0 !important;
font-size: 1.25rem !important;
font-weight: 800 !important;
width: auto !important;
}
.page-associations .offre-card .offre-icon {
width: 40px !important;
height: 40px !important;
}
}
/* ── Menu mobile — Items uniformes ── */
.nav-mobile a {
display: block !important;
padding: 0.875rem 0 !important;
border-bottom: 1px solid var(--border) !important;
color: var(--text) !important;
text-decoration: none !important;
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.5 !important;
}
.nav-mobile a.nav-mobile-cta {
margin-top: 1rem !important;
background: var(--navy) !important;
color: white !important;
text-align: center !important;
padding: 0.875rem !important;
border-radius: 10px !important;
font-weight: 600 !important;
border: none !important;
}
[data-theme="dark"] .nav-mobile a { color: #e2e8f0 !important; border-color: #334155 !important; }
[data-theme="dark"] .nav-mobile a.nav-mobile-cta { background: #3f5d82 !important; color: white !important; }
/* ── Volet 3 highlighted — agencement avec badge centré ── */
.page-associations .offre-card.highlighted {
padding-top: 2rem !important;
}
.page-associations .offre-badge {
z-index: 2;
}
/* ── Volets associations — Espacement bouton CTA ── */
.page-associations .offre-card .offre-cta {
margin-top: 1.5rem !important;
padding-top: 0.75rem;
}
/* ── Page Particuliers — Boutons offre-cta (rose) ── */
.page-particuliers .offre-card .offre-cta {
background: #db2777 !important;
color: white !important;
padding: 0.875rem 1.5rem !important;
border-radius: 10px !important;
justify-content: center !important;
text-align: center !important;
font-weight: 600 !important;
margin-top: 1.5rem !important;
width: 100%;
transition: background 0.15s, transform 0.15s !important;
}
.page-particuliers .offre-card .offre-cta:hover {
background: #be185d !important;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(219,39,119,0.25);
}
/* ── Lien page active dans les menus ── */
.nav-mobile a.active-target {
background: var(--blue-l) !important;
color: var(--blue) !important;
font-weight: 700 !important;
border-radius: 8px !important;
padding-left: 0.875rem !important;
padding-right: 0.875rem !important;
border-bottom: 1px solid var(--border) !important;
position: relative;
}
.nav-mobile a.active-target::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 20px;
background: var(--blue);
border-radius: 0 2px 2px 0;
}
.nav-dropdown-menu a.active-target {
background: var(--blue-l) !important;
color: var(--blue) !important;
font-weight: 700 !important;
}
[data-theme="dark"] .nav-mobile a.active-target {
background: rgba(96,165,250,0.15) !important;
color: #60a5fa !important;
}
[data-theme="dark"] .nav-mobile a.active-target::before {
background: #60a5fa;
}
[data-theme="dark"] .nav-dropdown-menu a.active-target {
background: rgba(96,165,250,0.15) !important;
color: #60a5fa !important;
}
/* ── Footer — Classes propres ── */
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 2.25rem;
margin-bottom: 3rem;
}
.footer-col-title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.66);
margin-bottom: 1rem;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.footer-links a {
font-size: 0.85rem;
color: rgba(255,255,255,0.74);
text-decoration: none;
transition: color 0.15s;
}
.footer-links a:hover {
color: white;
}
.footer-links a.active {
color: #60a5fa;
font-weight: 700;
}
.footer-links a.active:hover {
color: #60a5fa;
}
.footer-identity-text {
font-size: 0.82rem;
color: rgba(255,255,255,0.7);
line-height: 1.7;
}
.footer-identity-credit {
font-size: 0.75rem;
color: rgba(255,255,255,0.64);
margin-top: 1rem;
}
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr !important; }
}
/* ── Footer unifié (source unique : assets/chrome.js) ── */
.site-footer { background: var(--navy); padding: 3.5rem var(--gx) 2rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); width: 100%; margin: 0; }
.site-footer-inner { max-width: none; margin: 0 auto; }
.site-footer .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
/* Barre du bas : rangée de liens légaux, puis mentions fines + lien admin. */
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 0.5rem; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.footer-legal-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.footer-legal-row a { font-size: 0.8rem; color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.15s; }
.footer-legal-row a:hover { color: #fff; }
.footer-fineprint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
.footer-bottom-legal { font-size: 0.76rem; color: rgba(255,255,255,0.62); -webkit-user-select: text; user-select: text; }
.footer-admin-link { font-size: 0.76rem; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.15s; flex-shrink: 0; }
.footer-admin-link:hover { color: #fff; }
.footer-identity-credit a { color: rgba(255,255,255,0.78); text-decoration: underline; text-underline-offset: 2px; }
.footer-identity-credit a:hover { color: #fff; }
/* ── Section commerciale écoles ── */
.commercial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
@media (max-width: 900px) {
.commercial-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
.commercial-grid { grid-template-columns: 1fr !important; }
}
/* ── Catégories enseignées (5 colonnes) ── */
.categories-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
max-width: 880px;
margin: 0 auto;
}
@media (max-width: 900px) {
.categories-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
.categories-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ── Comparatif coût Salarié vs Indépendant ── */
@media (max-width: 800px) {
.cost-totals { grid-template-columns: 1fr !important; }
.cost-details { grid-template-columns: 1fr !important; }
}
/* ── Grille cibles (index) — Responsive ── */
@media (max-width: 900px) {
.cibles-grid > a { flex: 0 1 calc((100% - 1.25rem) / 2) !important; }
}
@media (max-width: 600px) {
.cibles-grid > a { flex: 0 1 100% !important; }
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — Améliorations ciblées
Corrige les conflits ' light-on-light ' liés aux backgrounds
pastel hardcodés et donne plus de relief aux tuiles.
═══════════════════════════════════════════════════════════ */
/* Cartes sectorielles (À qui je m'adresse) : un peu plus claires que la section
pour qu'elles ressortent visuellement en dark mode */
[data-theme="dark"] .cibles-grid > a[style*="background:var(--white)"] {
background: #28324d !important;
border-color: #3f4d70 !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
/* Liens "Découvrir l'offre →" sur ces cartes : couleurs plus lumineuses en dark */
[data-theme="dark"] .cibles-grid a span[style*="color:#3f5d82"] { color: #93c5fd !important; }
[data-theme="dark"] .cibles-grid a span[style*="color:#16a34a"] { color: #4ade80 !important; }
[data-theme="dark"] .cibles-grid a span[style*="color:#ea580c"] { color: #fbb074 !important; }
[data-theme="dark"] .cibles-grid a span[style*="color:#db2777"] { color: #f472b6 !important; }
[data-theme="dark"] .cibles-grid a span[style*="color:var(--navy)"] { color: #e8eef8 !important; }
/* Boîtes pastel à fond clair (Offre exclusive Liberty Rider, etc.) :
on remplace par un fond sombre teinté + texte lumineux pour rester lisible */
[data-theme="dark"] [style*="background:#fff7ed"][style*="border-left:3px solid #e85d20"],
[data-theme="dark"] [style*="background:#fff7ed"][style*="color:var(--navy)"] {
background: rgba(251,176,116,0.08) !important;
color: #fbb074 !important;
}
[data-theme="dark"] [style*="background:#fff7ed"][style*="border-left:3px solid #e85d20"] strong {
color: #fb923c !important;
}
/* Tags secteurs (chips) sur cartes partenaires : harmoniser avec dark
en gardant un fond pastel adouci et un texte plus lumineux */
[data-theme="dark"] span[style*="background:#eff6ff"][style*="color:#3f5d82"] {
background: rgba(126,177,245,0.14) !important; color: #93c5fd !important;
}
[data-theme="dark"] span[style*="background:#f0fdf4"][style*="color:#16a34a"] {
background: rgba(74,222,128,0.14) !important; color: #4ade80 !important;
}
[data-theme="dark"] span[style*="background:#fff7ed"][style*="color:#ea580c"] {
background: rgba(251,176,116,0.14) !important; color: #fbb074 !important;
}
[data-theme="dark"] span[style*="background:#fdf2f8"][style*="color:#db2777"] {
background: rgba(244,114,182,0.14) !important; color: #f472b6 !important;
}
[data-theme="dark"] span[style*="background:#faf5ff"][style*="color:#7c3aed"] {
background: rgba(192,132,252,0.14) !important; color: #c084fc !important;
}
/* Carte Coyote (bientôt) — gradient adaptatif */
[data-theme="dark"] div[style*="linear-gradient(180deg,var(--white)"][style*="border:1.5px dashed"] {
background: linear-gradient(180deg,#1c2640 0%,#283454 100%) !important;
}
/* Process : numéros d'étape — on garde les fonds pastel mais on assombrit le texte
pour préserver la lecture */
[data-theme="dark"] .step-num[style*="background:linear-gradient"] {
background: rgba(126,177,245,0.18) !important;
color: #93c5fd !important;
}
/* Newsletter dark : la section a déjà --navy bg, donc on s'assure que le formulaire
reste lisible (déjà géré par les rules existantes) */
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIXES additionnels (round 2)
═══════════════════════════════════════════════════════════ */
/* 1) Carte « Formateur indépendant - Val d'Europe » (.about-card)
Bug : .about-card a `color:var(--white)` qui devient sombre en dark
→ nom Julien Roddier invisible sur fond sombre. On force un texte clair. */
[data-theme="dark"] .about-card { background: #1c2640 !important; color: #e8eef8 !important; }
[data-theme="dark"] .about-card .about-name { color: #e8eef8; }
[data-theme="dark"] .about-card .about-avatar { background: rgba(126,177,245,0.18); color: #e8eef8; }
/* 2) Icons des cartes secteurs (À qui je m'adresse) :
En light, fond pastel clair + stroke coloré. En dark, on bascule sur fond
translucide + stroke lumineux pour homogénéité avec les autres tuiles. */
[data-theme="dark"] .cibles-grid > a > div[style*="background:#eff6ff"][style*="color:#3f5d82"] {
background: rgba(126,177,245,0.14) !important; color: #93c5fd !important;
}
[data-theme="dark"] .cibles-grid > a > div[style*="background:#f0fdf4"][style*="color:#16a34a"] {
background: rgba(74,222,128,0.14) !important; color: #4ade80 !important;
}
[data-theme="dark"] .cibles-grid > a > div[style*="background:#fff7ed"][style*="color:#ea580c"] {
background: rgba(251,176,116,0.14) !important; color: #fbb074 !important;
}
[data-theme="dark"] .cibles-grid > a > div[style*="background:#fdf2f8"][style*="color:#db2777"] {
background: rgba(244,114,182,0.14) !important; color: #f472b6 !important;
}
/* Écoles de conduite — pastille violette (accent écoles), alignée sur les autres. */
[data-theme="dark"] .cibles-grid > a > div[style*="background:#faf5ff"][style*="color:#7c3aed"] {
background: rgba(167,139,250,0.16) !important; color: #c4b5fd !important;
}
/* 3) Icons du dropdown « Secteurs » dans la navbar :
Même logique — fonds translucides cohérents en dark mode. */
[data-theme="dark"] .dropdown-icon[style*="background:#eff6ff"] {
background: rgba(126,177,245,0.14) !important; color: #93c5fd !important;
}
[data-theme="dark"] .dropdown-icon[style*="background:#f0fdf4"] {
background: rgba(74,222,128,0.14) !important; color: #4ade80 !important;
}
[data-theme="dark"] .dropdown-icon[style*="background:#fff7ed"] {
background: rgba(251,176,116,0.14) !important; color: #fbb074 !important;
}
[data-theme="dark"] .dropdown-icon[style*="background:#fdf2f8"] {
background: rgba(244,114,182,0.14) !important; color: #f472b6 !important;
}
[data-theme="dark"] .dropdown-icon[style*="background:#faf5ff"] {
background: rgba(192,132,252,0.14) !important; color: #c084fc !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIXES round 3 : éléments .offre-* et bouton scroll-top
═══════════════════════════════════════════════════════════ */
/* Volet 3 mis en avant : .offre-num et .offre-icon ont background:var(--navy)
inline (devient clair en dark) avec color:white (reste blanc) → blanc sur clair
invisible. On force un bleu profond OPAQUE pour que les éléments ressortent
comme des « puces » distinctes au-dessus de la carte (qui a un fond bleu très
léger en dark mode). */
[data-theme="dark"] .offre-card .offre-num[style*="background:var(--navy)"],
[data-theme="dark"] .offre-card .offre-icon[style*="background:var(--navy)"] {
background: #3f5d82 !important;
color: #ffffff !important;
}
/* Bouton « Retour en haut » (scroll-top) en thème sombre : bleu profond, à plat. */
[data-theme="dark"] #scroll-top {
background-color: #3f5d82 !important;
color: #fff !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIXES round 4 : Transition écologique (collectivités)
═══════════════════════════════════════════════════════════ */
/* Section transition-ecologique : la bande verte hardcodée #f0fdf4 au milieu
du gradient ressort trop fort sur fond sombre. On passe en tint vert subtil. */
[data-theme="dark"] section#transition-ecologique {
background: linear-gradient(180deg, var(--white) 0%, rgba(74,222,128,0.05) 50%, var(--white) 100%) !important;
}
/* Bloc « Vos obligations légales » : gradient vert clair → translucide */
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] {
background: linear-gradient(135deg, rgba(74,222,128,0.08), rgba(74,222,128,0.12)) !important;
border-color: rgba(74,222,128,0.25) !important;
}
/* Titre h3 et paragraphe d'intro du bloc */
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] h3 {
color: #6ee7a7 !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] p {
color: #9aa8bd !important;
}
/* Les 3 cards blanches imbriquées dans le bloc obligations */
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] div[style*="background:white"] {
background: var(--off) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] div[style*="background:white"] div[style*="color:var(--navy)"] {
color: #e8eef8 !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] div[style*="background:white"] div[style*="color:var(--slate)"] {
color: #9aa8bd !important;
}
/* Mini icons 28x28 vert pâle dans les cards obligations */
[data-theme="dark"] div[style*="background:#dcfce7"][style*="color:#16a34a"] {
background: rgba(74,222,128,0.20) !important;
color: #6ee7a7 !important;
}
/* Tile « Pourquoi cette expertise est légitime » : gradient bleu clair + texte
var(--navy) qui deviendrait invisible sur fond clair en dark.
→ translucide bleu + texte clair. */
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0f9ff,#eff6ff)"][style*="border:1.5px solid #bae6fd"] {
background: linear-gradient(135deg, rgba(126,177,245,0.10), rgba(126,177,245,0.14)) !important;
border-color: rgba(126,177,245,0.30) !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0f9ff,#eff6ff)"][style*="border:1.5px solid #bae6fd"] div[style*="color:var(--navy)"] {
color: #e8eef8 !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0f9ff,#eff6ff)"][style*="border:1.5px solid #bae6fd"] div[style*="color:var(--slate)"] {
color: #cbd5e1 !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0f9ff,#eff6ff)"][style*="border:1.5px solid #bae6fd"] strong[style*="color:var(--navy)"] {
color: #93c5fd !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIX round 5 : tile CDG & CHSCT (collectivités)
═══════════════════════════════════════════════════════════ */
/* Bloc fond vert pastel avec bordure gauche verte → translucide en dark
pour rester intégré au reste de la palette. */
[data-theme="dark"] div[style*="background:#f0fdf4"][style*="border-left:4px solid #16a34a"] {
background: rgba(74,222,128,0.10) !important;
border-left-color: #4ade80 !important;
}
[data-theme="dark"] div[style*="background:#f0fdf4"][style*="border-left:4px solid #16a34a"] div[style*="color:#16a34a"] {
color: #6ee7a7 !important;
}
[data-theme="dark"] div[style*="background:#f0fdf4"][style*="border-left:4px solid #16a34a"] p[style*="color:#14532d"] {
color: #d1fae5 !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIX round 6 : offre-card mises en avant avec fond pastel hardcodé
═══════════════════════════════════════════════════════════ */
/* particuliers.html : Volet 2 rose pastel #fdf2f8 + bordure #db2777
ecoles-de-conduite.html : Volet 3 violet pastel #faf5ff + bordure #7c3aed
Texte (h3, offre-desc, etc.) adapté en dark via les règles .offre-card
existantes → mais le fond pastel reste clair = texte clair sur clair. */
[data-theme="dark"] .offre-card[style*="background:#fdf2f8"] {
background: rgba(244,114,182,0.08) !important;
border-color: rgba(244,114,182,0.30) !important;
}
[data-theme="dark"] .offre-card[style*="background:#faf5ff"] {
background: rgba(192,132,252,0.08) !important;
border-color: rgba(192,132,252,0.30) !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIX round 7 : obligation-box override rose (particuliers)
═══════════════════════════════════════════════════════════ */
/* particuliers.html : .obligation-box surchargée avec fond rose pastel hardcodé
→ en dark, le fond reste rose clair et le texte var(--slate)/var(--navy)
devient clair = invisible. On bascule en translucide rose. */
/* 3 attributs ciblés → spécificité (0,0,3,0), supérieure à la règle "keep-dark"
générique [style*="background:#fdf2f8"] (0,0,2,0) qui imposerait sinon un texte
rose FONCÉ illisible : ici le fond est translucide sombre, le texte doit être clair. */
[data-theme="dark"] .obligation-box[style*="background:#fdf2f8"][style*="border-left-color:#be185d"] {
background: rgba(244,114,182,0.10) !important;
border-color: rgba(244,114,182,0.25) !important;
border-left-color: #f472b6 !important;
color: #f9a8d4 !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIXES round 8 : ecoles-de-conduite spécifique
═══════════════════════════════════════════════════════════ */
/* 1) Banner « Nouveau · Au-delà de la formation » :
Gradient pastel amber→orange→rouge avec texte var(--navy)/var(--slate)
qui devient clair en dark → invisible.
NB : on cible via `section > div > a[href]` (et pas via le contenu de
l'attribut style) car le hover JS modifie l'inline style et le navigateur
sérialise les hex en rgb() — un sélecteur [style*="#fef3c7"] casserait
au survol. La structure DOM est stable, elle. */
[data-theme="dark"] section > div > a[href="#commercial"] {
background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(251,176,116,0.10), rgba(248,113,113,0.12)) !important;
border-color: rgba(251,176,116,0.30) !important;
}
[data-theme="dark"] section > div > a[href="#commercial"] div[style*="color:var(--navy)"] { color: #e8eef8 !important; }
[data-theme="dark"] section > div > a[href="#commercial"] div[style*="color:var(--slate)"] { color: #cbd5e1 !important; }
/* Icon container blanc à gauche du banner */
[data-theme="dark"] section > div > a[href="#commercial"] > div:first-child {
background: rgba(251,176,116,0.18) !important;
color: #fbb074 !important;
}
/* Flèche → en bout de banner */
[data-theme="dark"] section > div > a[href="#commercial"] > div:last-child {
color: #fbb074 !important;
}
/* 2) Tile « Ce qui n'apparaît jamais sur ma facture » :
Gradient violet pastel + cards blanches imbriquées. */
[data-theme="dark"] div[style*="linear-gradient(135deg,#faf5ff,#ede9fe)"] {
background: linear-gradient(135deg, rgba(192,132,252,0.08), rgba(192,132,252,0.14)) !important;
border-color: rgba(192,132,252,0.30) !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#faf5ff,#ede9fe)"] h3[style*="color:#4c1d95"] {
color: #e9d5ff !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#faf5ff,#ede9fe)"] div[style*="color:#6d28d9"] {
color: #c4b5fd !important;
}
/* Les cards blanches dans .advantage-grid */
[data-theme="dark"] .advantage-grid > div[style*="background:white"] {
background: var(--off) !important;
}
[data-theme="dark"] .advantage-grid > div[style*="background:white"] div[style*="color:#4c1d95"] {
color: #e8eef8 !important;
}
[data-theme="dark"] .advantage-grid > div[style*="background:white"] div[style*="color:#64748b"] {
color: #9aa8bd !important;
}
/* 3 & 4) Tiles « Salarié CDI » et « Formateur indépendant » dans .cost-totals :
On utilise des sélecteurs positionnels (:nth-child) au lieu de matcher le
contenu de l'attribut style (qui peut être sérialisé différemment par le
navigateur). Plus robuste. */
/* Salarié CDI (1ʳᵉ tuile) — gradient rouge pastel */
[data-theme="dark"] .cost-totals > div:nth-child(1) {
background: linear-gradient(135deg, rgba(248,113,113,0.10), rgba(248,113,113,0.04)) !important;
border-color: rgba(248,113,113,0.30) !important;
}
/* Formateur indépendant (2ᵉ tuile) — gradient vert pastel */
[data-theme="dark"] .cost-totals > div:nth-child(2) {
background: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(74,222,128,0.04)) !important;
border-color: rgba(74,222,128,0.30) !important;
}
/* Texte des deux tuiles : montants (var(--navy)) et légendes (var(--slate))
doivent être lumineux pour rester lisibles sur le fond translucide. */
[data-theme="dark"] .cost-totals > div div[style*="color:var(--navy)"],
[data-theme="dark"] .cost-totals #cout-salarie-total,
[data-theme="dark"] .cost-totals #cout-indep-total {
color: #e8eef8 !important;
}
[data-theme="dark"] .cost-totals > div div[style*="color:var(--slate)"],
[data-theme="dark"] .cost-totals #cout-indep-jours {
color: #cbd5e1 !important;
}
/* 5) Icons commerciales (.commercial-grid) — homogénéisation en dark mode.
En light, chaque carte a une pastille de couleur. En dark, on bascule
sur des fonds translucides cohérents pour toutes les 9 cartes. */
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#fef3c7"] {
background: rgba(251,191,36,0.16) !important; color: #fcd34d !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#dbeafe"] {
background: rgba(126,177,245,0.16) !important; color: #93c5fd !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#f0fdf4"] {
background: rgba(74,222,128,0.16) !important; color: #4ade80 !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#faf5ff"] {
background: rgba(192,132,252,0.16) !important; color: #c084fc !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#fee2e2"] {
background: rgba(248,113,113,0.16) !important; color: #fca5a5 !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#fff7ed"] {
background: rgba(251,176,116,0.16) !important; color: #fbb074 !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#ecfeff"] {
background: rgba(34,211,238,0.16) !important; color: #67e8f9 !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#eef2ff"] {
background: rgba(129,140,248,0.16) !important; color: #a5b4fc !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#f5f3ff"] {
background: rgba(192,132,252,0.16) !important; color: #c084fc !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIX round 9 : tuile « Honnêteté intellectuelle »
═══════════════════════════════════════════════════════════ */
/* Fond violet très translucide + texte #4c1d95 (violet foncé) =
illisible en dark. On éclaircit le texte pour qu'il soit lisible. */
[data-theme="dark"] div[style*="background:rgba(124,58,237,0.08)"][style*="border-left:3px solid #7c3aed"] {
background: rgba(192,132,252,0.10) !important;
color: #e9d5ff !important;
}
[data-theme="dark"] div[style*="background:rgba(124,58,237,0.08)"][style*="border-left:3px solid #7c3aed"] strong {
color: #d8b4fe !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIX round 10 : tile détail Formateur indépendant
═══════════════════════════════════════════════════════════ */
/* La tuile détaillée (table avec les lignes Tarif journalier, Charges sociales,
Mutuelle, Formation continue, Équipement, Total annuel) avait un gradient
#f0fdf4 → var(--white) qui en dark donnait : haut vert clair (illisible),
bas dark. + le row Total annuel a un fond hardcodé #f0fdf4 invisible. */
[data-theme="dark"] .cost-details > div:nth-child(2) {
background: linear-gradient(180deg, rgba(74,222,128,0.10) 0%, var(--white) 60%) !important;
border-color: rgba(74,222,128,0.40) !important;
}
/* Row "Total annuel" — fond hardcodé #f0fdf4 → translucide vert */
[data-theme="dark"] .cost-details > div:nth-child(2) tbody tr:last-child {
background: rgba(74,222,128,0.14) !important;
}
/* Couleurs vert foncé (#16a34a) → vert clair lumineux pour rester lisibles
sur le fond translucide */
[data-theme="dark"] .cost-details > div:nth-child(2) td[style*="color:#16a34a"],
[data-theme="dark"] .cost-details > div:nth-child(2) [id="cout-indep-total-detail"] {
color: #4ade80 !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIX round 11 : row « Total annuel » côté Salarié
═══════════════════════════════════════════════════════════ */
/* Row "Total annuel" sur le tableau Salarié : fond #fef2f2 hardcodé
(rouge pastel) qui reste clair en dark. */
[data-theme="dark"] .cost-details > div:nth-child(1) tbody tr:last-child {
background: rgba(248,113,113,0.14) !important;
}
/* Le total en rouge foncé (#dc2626) doit aussi être éclairci pour rester
lisible sur le fond translucide rouge */
[data-theme="dark"] .cost-details > div:nth-child(1) [id="cout-sal-total-detail"] {
color: #fca5a5 !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIX round 12 : harmonisation des opacités du footer
═══════════════════════════════════════════════════════════ */
/* En light, le footer a un fort contraste avec la page (sombre vs blanc) →
les textes faibles paraissent très discrets. En dark, le contraste est
moindre → les mêmes opacités paraissent plus visibles. On baisse pour
préserver la sensation de "discrétion". */
[data-theme="dark"] .footer-identity-credit {
color: rgba(255,255,255,0.62) !important;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — FIX round 13 : derniers contrastes (audit axe 22 pages)
═══════════════════════════════════════════════════════════ */
/* Boutons d'action à fond saturé INLINE (accent secteur). En dark, .btn-submit /
.btn-primary basculent en texte sombre (#0f172a) sur fond bleu clair — mais quand
un fond saturé est forcé en inline (ex : #db2777, #7c3aed), ce texte sombre ne
contraste plus. On rétablit le texte blanc (fond saturé + blanc passe déjà AA en clair). */
[data-theme="dark"] .btn-submit[style*="background:#"],
[data-theme="dark"] .btn-primary[style*="background:#"] { color: #fff !important; }
/* entreprises : CTA avec background:var(--blue) inline. En dark, --blue est clair →
le texte blanc devient illisible. Texte sombre sur bleu clair (et le hover JS qui
bascule sur var(--navy) clair reste lisible avec un texte sombre). */
[data-theme="dark"] a[style*="background:var(--blue)"] { color: #0a1628 !important; }
/* produit : bouton blanc dans la bande CTA. En dark, color:var(--navy) devient clair
sur le fond blanc du bouton → texte sombre forcé. */
[data-theme="dark"] .page-produit .cta-band .btn-primary { color: #0a1628 !important; }
/* securite-routiere : widget « Temps de réaction ». L'état idle (.rt-idle) et les
toggles sélectionnés (.da-opt.da-on) utilisent var(--navy) comme fond SOMBRE →
clair en dark, donc texte blanc illisible. Fond sombre fixe pour garder le blanc. */
[data-theme="dark"] .rt-idle { background: #1e293b !important; }
[data-theme="dark"] .da-opt.da-on { background: #3b5a82 !important; }
/* ═══════════════════════════════════════════════════════════════════════════
AMBIANCE SAISONNIÈRE (year-round)
Formes décoratives discrètes en fond, dont la teinte change selon la saison.
Appliquées via `body.season-X` (classe posée par seasonal.js).
═══════════════════════════════════════════════════════════════════════════ */
/* Conteneur des ambiances : 2 blobs fixes (haut-droite + bas-gauche), positionnés
derrière le contenu et insensibles aux clics. */
body[class*="season-"]::before,
body[class*="season-"]::after {
content: '';
position: fixed;
pointer-events: none;
z-index: 0;
border-radius: 50%;
transition: background 1s ease;
will-change: transform;
}
body[class*="season-"]::before {
top: -180px; right: -180px;
width: 540px; height: 540px;
}
body[class*="season-"]::after {
bottom: -220px; left: -220px;
width: 620px; height: 620px;
}
/* On désactive le pseudo dans l'admin pour ne pas interférer avec le dashboard */
body.season-spring:has(#admin-screen),
body.season-summer:has(#admin-screen),
body.season-autumn:has(#admin-screen),
body.season-winter:has(#admin-screen) {
/* placeholder — :has() peu utile ici, mais évite tout effet sur l'admin */
}
/* ── PRINTEMPS : roses pastel + verts tendres (très diffus) ──────────────── */
body.season-spring::before { background: radial-gradient(circle, rgba(244,114,182,0.05) 0%, transparent 80%); }
body.season-spring::after { background: radial-gradient(circle, rgba(134,239,172,0.05) 0%, transparent 80%); }
/* ── ÉTÉ : dorés chauds + ambres ─────────────────────────────────────────── */
body.season-summer::before { background: radial-gradient(circle, rgba(251,191,36,0.06) 0%, transparent 80%); }
body.season-summer::after { background: radial-gradient(circle, rgba(251,146,60,0.05) 0%, transparent 80%); }
/* ── AUTOMNE : oranges rouille + ocres ───────────────────────────────────── */
body.season-autumn::before { background: radial-gradient(circle, rgba(234,88,12,0.05) 0%, transparent 80%); }
body.season-autumn::after { background: radial-gradient(circle, rgba(180,83,9,0.05) 0%, transparent 80%); }
/* ── HIVER : bleus glacés + slate argenté ────────────────────────────────── */
body.season-winter::before { background: radial-gradient(circle, rgba(186,230,253,0.07) 0%, transparent 80%); }
body.season-winter::after { background: radial-gradient(circle, rgba(148,163,184,0.05) 0%, transparent 80%); }
/* Dark mode : opacité encore réduite (contraste sombre amplifie la perception) */
[data-theme="dark"] body.season-spring::before { background: radial-gradient(circle, rgba(244,114,182,0.04) 0%, transparent 80%); }
[data-theme="dark"] body.season-spring::after { background: radial-gradient(circle, rgba(134,239,172,0.03) 0%, transparent 80%); }
[data-theme="dark"] body.season-summer::before { background: radial-gradient(circle, rgba(251,191,36,0.04) 0%, transparent 80%); }
[data-theme="dark"] body.season-summer::after { background: radial-gradient(circle, rgba(251,146,60,0.03) 0%, transparent 80%); }
[data-theme="dark"] body.season-autumn::before { background: radial-gradient(circle, rgba(234,88,12,0.04) 0%, transparent 80%); }
[data-theme="dark"] body.season-autumn::after { background: radial-gradient(circle, rgba(180,83,9,0.04) 0%, transparent 80%); }
[data-theme="dark"] body.season-winter::before { background: radial-gradient(circle, rgba(186,230,253,0.04) 0%, transparent 80%); }
[data-theme="dark"] body.season-winter::after { background: radial-gradient(circle, rgba(148,163,184,0.03) 0%, transparent 80%); }
/* ═══════════════════════════════════════════════════════════════════════════
CERCLES DÉCORATIFS DANS LES SECTIONS — repeints en couleurs saisonnières
On cible tout div absolu avec radial-gradient + pointer-events:none
(le pattern des « Formes décoratives » qui parsèment les pages).
Les couleurs originales (bleues, oranges, vertes…) sont remplacées par
les teintes de la saison courante.
═══════════════════════════════════════════════════════════════════════════ */
/* Couleur "primaire" — pour le premier cercle décoratif de chaque section */
body.season-spring section > div[style*="radial-gradient"][style*="pointer-events:none"]:first-of-type,
body.season-spring div[style*="radial-gradient"][style*="pointer-events:none"][style*="top:"] {
background: radial-gradient(circle, rgba(244,114,182,0.05) 0%, transparent 80%) !important;
}
body.season-summer section > div[style*="radial-gradient"][style*="pointer-events:none"]:first-of-type,
body.season-summer div[style*="radial-gradient"][style*="pointer-events:none"][style*="top:"] {
background: radial-gradient(circle, rgba(251,191,36,0.06) 0%, transparent 80%) !important;
}
body.season-autumn section > div[style*="radial-gradient"][style*="pointer-events:none"]:first-of-type,
body.season-autumn div[style*="radial-gradient"][style*="pointer-events:none"][style*="top:"] {
background: radial-gradient(circle, rgba(234,88,12,0.05) 0%, transparent 80%) !important;
}
body.season-winter section > div[style*="radial-gradient"][style*="pointer-events:none"]:first-of-type,
body.season-winter div[style*="radial-gradient"][style*="pointer-events:none"][style*="top:"] {
background: radial-gradient(circle, rgba(186,230,253,0.07) 0%, transparent 80%) !important;
}
/* Couleur "secondaire" — pour le second cercle (souvent en bas/gauche) */
body.season-spring div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
background: radial-gradient(circle, rgba(134,239,172,0.05) 0%, transparent 80%) !important;
}
body.season-summer div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
background: radial-gradient(circle, rgba(251,146,60,0.05) 0%, transparent 80%) !important;
}
body.season-autumn div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
background: radial-gradient(circle, rgba(180,83,9,0.05) 0%, transparent 80%) !important;
}
body.season-winter div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
background: radial-gradient(circle, rgba(148,163,184,0.05) 0%, transparent 80%) !important;
}
/* Dark mode : opacité réduite sur les cercles décoratifs aussi */
[data-theme="dark"] body[class*="season-"] div[style*="radial-gradient"][style*="pointer-events:none"] {
opacity: 0.7;
}
/* Sur mobile, on réduit la taille des blobs pour ne pas envahir */
@media (max-width: 700px) {
body[class*="season-"]::before { width: 320px; height: 320px; top: -100px; right: -100px; }
body[class*="season-"]::after { width: 380px; height: 380px; bottom: -130px; left: -130px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PETIT ANNEAU DÉCORATIF DU HERO → icône saisonnière très discrète
Cible le div 160x160 avec border-radius:50% positionné à top:40% des heros.
Le bord est retiré, remplacé par un SVG d'icône saisonnière en filigrane.
═══════════════════════════════════════════════════════════════════════════ */
body[class*="season-"] div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
border: none !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
opacity: 0.04; /* fantôme — à peine perceptible */
}
/* ── PRINTEMPS : courbe ascendante (croissance) ──────────────────────────── */
body.season-spring div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* ── ÉTÉ : disque plein (plénitude, chaleur) ─────────────────────────────── */
body.season-summer div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* ── AUTOMNE : ondulation descendante (vent, chute) ──────────────────────── */
body.season-autumn div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* ── HIVER : hexagone (cristal, géométrie froide) ────────────────────────── */
body.season-winter div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* Dark mode : on inverse le gris en blanc pour rester perceptible sur fond
sombre, et opacité encore plus basse */
[data-theme="dark"] body[class*="season-"] div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
opacity: 0.05;
filter: invert(1);
}
/* ═══════════════════════════════════════════════════════════════════════════
LIQUID GLASS — ACCESSIBILITÉ ET ROBUSTESSE
Surfaces en verre du site : nav, dropdown, menu mobile, carte du hero,
boutons secondaires, resp-card. Trois garde-fous :
1. transparence réduite (réglage système) → dépoli coupé, fonds quasi opaques ;
2. contraste renforcé → bordures franches ;
3. navigateur sans backdrop-filter → repli opaque.
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-transparency: reduce) {
nav, .nav-mobile, .nav-dropdown-inner, .hero-card,
.btn-outline, #nav-login-desktop, .page-associations .resp-card {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
nav { background: rgba(255,255,255,0.96) !important; }
.nav-mobile { background: rgba(255,255,255,0.98) !important; }
.nav-dropdown-inner { background: rgba(255,255,255,0.98) !important; }
.hero-card, .btn-outline, #nav-login-desktop { background: var(--off) !important; }
[data-theme="dark"] nav { background: rgba(15,23,42,0.96) !important; }
[data-theme="dark"] .nav-mobile { background: rgba(15,23,42,0.98) !important; }
[data-theme="dark"] .nav-dropdown-inner { background: rgba(30,41,59,0.98) !important; }
[data-theme="dark"] .hero-card,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] #nav-login-desktop { background: #1e293b !important; }
/* Couches de réfraction coupées avec le reste du verre. */
nav::after, .nav-dropdown-inner::after { display: none !important; }
}
@media (prefers-contrast: more) {
nav, .nav-mobile, .nav-dropdown-inner, .hero-card,
.btn-outline, #nav-login-desktop {
border-color: rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] nav,
[data-theme="dark"] .nav-mobile,
[data-theme="dark"] .nav-dropdown-inner,
[data-theme="dark"] .hero-card,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] #nav-login-desktop {
border-color: rgba(255,255,255,0.6) !important;
}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
nav { background: rgba(255,255,255,0.96); }
.nav-mobile { background: rgba(255,255,255,0.98); }
.nav-dropdown-inner { background: #ffffff; }
.hero-card, .btn-outline, #nav-login-desktop { background: var(--off); }
[data-theme="dark"] nav { background: rgba(15,23,42,0.96); }
[data-theme="dark"] .nav-mobile { background: rgba(15,23,42,0.98); }
[data-theme="dark"] .nav-dropdown-inner { background: #1e293b; }
[data-theme="dark"] .hero-card,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] #nav-login-desktop { background: #1e293b; }
}
/* === MOTION LIQUIDE (parite avec l'app) =====================================
1. GEL : les contrôles se compriment au press, retour ressort.
2. LUMIERE EN MOUVEMENT : un glint balaye la nav pendant le defilement
(animation-timeline: scroll, Chromium ; statique ailleurs).
3. Survols a ressort sur les cartes (transitions transform existantes). */
.btn-primary, .nav-cta, .btn-submit, .btn-outline, #nav-login-desktop, .nav-links a {
transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), background-color 0.15s ease,
box-shadow 0.2s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary:active, .nav-cta:active, .btn-submit:active, .btn-outline:active,
#nav-login-desktop:active { transform: scale(0.965); transition-duration: 0.08s; }
.nav-links a:active { transform: scale(0.94); transition-duration: 0.08s; }
/* Glint de nav au scroll : couche ::before entre la refraction (::after) et le
contenu — le reflet suit le defilement, jamais d'animation au repos. */
nav::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.34) 47%, rgba(255,255,255,0.10) 53%, transparent 66%);
background-size: 250% 100%;
background-position: 85% 0;
background-repeat: no-repeat;
opacity: 0.7;
}
@supports (animation-timeline: scroll()) {
nav::before { animation: siteNavSheen linear both; animation-timeline: scroll(root); }
}
@keyframes siteNavSheen { from { background-position: 120% 0; } to { background-position: -30% 0; } }
/* Survol des cartes : meme courbe ressort que l'app sur le transform existant. */
.hero-card, .f-card, .offre-card, .step, .about-card, .zone-card {
transition-timing-function: cubic-bezier(0.34,1.56,0.64,1);
}
@media (prefers-reduced-motion: reduce) {
.btn-primary, .nav-cta, .btn-submit, .btn-outline, #nav-login-desktop, .nav-links a { transition: none; }
.btn-primary:active, .nav-cta:active, .btn-submit:active, .btn-outline:active,
#nav-login-desktop:active, .nav-links a:active { transform: none; }
nav::before { animation: none; }
.nav-dropdown:hover .nav-dropdown-menu { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
nav::before { display: none !important; }
}
/* === FLUIDITE GENERALE ======================================================
1. Cross-fade entre les pages (View Transitions multi-pages, Chromium/Safari
recents ; navigation normale ailleurs). La nav, nommee, parait persistante.
2. Hero : entree en cascade au chargement.
3. Revelation au defilement : etats CSS pilotes par chrome.js (IntersectionObserver).
L'etat initial cache n'est pose QUE par le JS — sans JS, tout est visible.
4. Defilement doux pour les ancres. */
/* Transition de page « premium » (View Transitions API).
Le flash BLANC d'avant venait du splash blanc affiché entre deux pages → corrigé
(splash une seule fois par session, cf. script.js). Ici : la nouvelle page apparaît
en FONDU DOUX + léger zoom PAR-DESSUS l'ancienne (qui reste opaque dessous) → aucun
intervalle blanc, transition feutrée. Le menu garde son identité (ne clignote pas).
Navigateurs sans support : navigation instantanée (progressive enhancement). */
@view-transition { navigation: auto; }
@keyframes rdPageIn { from { opacity: 0; transform: scale(0.992); } to { opacity: 1; transform: none; } }
::view-transition-old(root) { animation: none; } /* l'ancienne page reste dessous */
::view-transition-new(root) { animation: rdPageIn 0.42s cubic-bezier(0.22,0.61,0.36,1) both; }
nav { view-transition-name: site-nav; } /* le menu fixe ne fond pas */
html { scroll-behavior: smooth; }
@keyframes heroRise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
.hero-tag { animation: heroRise 0.55s cubic-bezier(0.22,0.61,0.36,1) 0.05s both; }
.hero h1 { animation: heroRise 0.55s cubic-bezier(0.22,0.61,0.36,1) 0.12s both; }
.hero-sub { animation: heroRise 0.55s cubic-bezier(0.22,0.61,0.36,1) 0.20s both; }
.hero-actions { animation: heroRise 0.55s cubic-bezier(0.22,0.61,0.36,1) 0.28s both; }
.hero-card { animation: heroRise 0.6s cubic-bezier(0.22,0.61,0.36,1) 0.36s both; }
/* Revelation au defilement (classes posees par chrome.js). */
.lg-reveal { opacity: 0; transform: translateY(14px); }
.lg-reveal-in {
opacity: 1;
transform: none;
transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
html { scroll-behavior: auto; }
/* Entrees en fondu simple, sans translation (interface vivante mais calme). */
.hero-tag, .hero h1, .hero-sub, .hero-actions, .hero-card {
animation: heroFadeOnly 0.3s ease both; animation-delay: 0s;
}
.lg-reveal { opacity: 1; transform: none; }
.lg-reveal-in { transition: none; }
}
@keyframes heroFadeOnly { from { opacity: 0; } to { opacity: 1; } }
/* === Touches ajoutées : soulignement animé de la nav + accent dessiné sur le mot-clé du héros.
(Les compteurs animés sont gérés par chrome.js ; le héros + les halos existent déjà.) === */
.nav-links a { position: relative; }
.nav-links a::after {
content: ""; position: absolute; left: 2px; right: 2px; bottom: -4px; height: 2px;
background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: left center;
transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-links a:hover::after, .nav-links a.nav-active::after { transform: scaleX(1); }
.hero h1 em { position: relative; }
.hero h1 em::after {
content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px;
background: var(--blue); border-radius: 3px; transform: scaleX(0); transform-origin: left;
animation: emDraw 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.1s both;
}
@keyframes emDraw { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.nav-links a::after { transition: none; }
.hero h1 em::after { animation: none; transform: scaleX(1); }
}
/* === Décor « route » : séparateur fil-conducteur de la marque ===
Une ligne de route discrète dont les pointillés défilent doucement (chaussée qui
se déroule). Posé par chrome.js à une rupture naturelle de page. Décoratif, faible
opacité, masqué en fondu sur les bords. Animation coupée si « mouvement réduit ». */
.rd-road { position: relative; height: 20px; margin: 0; overflow: hidden; pointer-events: none; background: transparent; }
.rd-road::before {
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-0.5px);
background: linear-gradient(90deg, transparent, var(--border) 14%, var(--border) 86%, transparent);
}
.rd-road .rd-road-dash {
position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-1px);
background-image: repeating-linear-gradient(90deg, var(--s1) 0 22px, transparent 22px 56px);
background-size: 56px 100%; background-repeat: repeat-x; opacity: 0.28;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
animation: rdRoadDash 2.6s linear infinite;
}
@keyframes rdRoadDash { from { background-position: 0 0; } to { background-position: 56px 0; } }
[data-theme="dark"] .rd-road .rd-road-dash { opacity: 0.42; }
@media (prefers-reduced-motion: reduce) {
.rd-road .rd-road-dash { animation: none; }
}
/* === Micro-interaction au survol des cartes de contenu (subtil, esprit Apple) ===
Léger soulèvement + ombre douce. Uniquement sur appareils à survol réel, et
désactivé si « mouvement réduit ». N'affecte pas les cartes à gestion de survol
propre (styles inline) : celles-ci continuent de piloter leur transform. */
.f-card, .offre-card, .about-card, .zone-card, .resp-card {
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) {
.f-card:hover, .offre-card:hover, .about-card:hover, .zone-card:hover, .resp-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
/* bordure teintée de l'accent de la page → chaque univers garde sa couleur au survol */
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
/* En sombre, l'ombre noire seule manque de vie : on ajoute un fin liseré + un
halo très diffus, tous deux à la couleur d'accent → la carte « s'allume ». */
[data-theme="dark"] .f-card:hover, [data-theme="dark"] .offre-card:hover,
[data-theme="dark"] .zone-card:hover, [data-theme="dark"] .resp-card:hover {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent),
0 10px 34px color-mix(in srgb, var(--accent) 15%, transparent),
var(--shadow-lg);
}
}
@media (prefers-reduced-motion: reduce) {
.f-card, .offre-card, .about-card, .zone-card, .resp-card { transition: none; }
.f-card:hover, .offre-card:hover, .about-card:hover, .zone-card:hover, .resp-card:hover { transform: none; }
}
/* === Effets interactifs (curseur / défilement) ===
Posés par chrome.js. Pointeur fin uniquement pour halo/relief ; tout est coupé
sous « mouvement réduit » (cf. chrome.js + règles ci-dessous). */
/* Barre de progression de lecture (fine ligne « route » en haut). */
.rd-progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px;
transform: scaleX(0); transform-origin: left center;
background: linear-gradient(90deg, var(--navy), var(--blue));
z-index: 9998; pointer-events: none; will-change: transform;
}
body.has-dev-banner .rd-progress { top: 1.85rem; } /* sous le bandeau dev (roddier.dev) */
.hero-inner { position: relative; z-index: 1; } /* contenu au-dessus des couleurs de fond */
/* === Frise du parcours : connecteur qui se remplit au défilement (desktop) === */
@media (min-width:901px) {
.process .steps { position:relative; }
.process .steps::before, .process .steps::after { content:""; position:absolute; top:3.4rem; height:3px; border-radius:3px; z-index:0; }
.process .steps::before { left:11%; right:11%; background:var(--border); }
.process .steps::after { left:11%; width:calc(78% * var(--p, 0)); background:linear-gradient(90deg, var(--navy), var(--blue)); transition:width 0.15s linear; }
.process .step { z-index:1; }
}
/* === Couleurs de fond du héros, déplacées par la souris (parallaxe) ===
Deux halos bleus désaturés ; le curseur décale leurs positions en sens opposés
(variables --hx/--hy posées par chrome.js) → les couleurs « bougent » avec la
souris. Sans pointeur/JS, elles restent à leur position par défaut. */
.hero {
background-image:
radial-gradient(closest-side, color-mix(in srgb, var(--accent) 17%, transparent), transparent),
radial-gradient(closest-side, color-mix(in srgb, var(--accent) 11%, transparent), transparent);
background-repeat:no-repeat;
background-size:60% 60%, 50% 50%;
background-position:
calc(20% + var(--hx, 0px)) calc(26% + var(--hy, 0px)),
calc(82% - var(--hx, 0px)) calc(18% - var(--hy, 0px));
transition: background-position 0.3s ease-out;
}
[data-theme="dark"] .hero {
background-image:
radial-gradient(closest-side, color-mix(in srgb, var(--accent) 24%, transparent), transparent),
radial-gradient(closest-side, color-mix(in srgb, var(--accent) 15%, transparent), transparent);
}
/* Repli si color-mix non supporté : on garde des halos bleus désaturés (jamais de héros « plat »). */
@supports not (background: color-mix(in srgb, red, blue)) {
.hero { background-image:
radial-gradient(closest-side, rgba(94,127,168,0.16), transparent),
radial-gradient(closest-side, rgba(94,127,168,0.11), transparent); }
[data-theme="dark"] .hero { background-image:
radial-gradient(closest-side, rgba(96,165,250,0.18), transparent),
radial-gradient(closest-side, rgba(96,165,250,0.12), transparent); }
}
@media (prefers-reduced-motion: reduce) { .hero { transition:none; } }
/* === Icônes qui se tracent au défilement (posé en JS via .rd-draw-pending) === */
.rd-draw-pending path, .rd-draw-pending polyline, .rd-draw-pending line,
.rd-draw-pending circle, .rd-draw-pending rect, .rd-draw-pending polygon { stroke-dasharray:300; stroke-dashoffset:300; }
.rd-draw-go path, .rd-draw-go polyline, .rd-draw-go line,
.rd-draw-go circle, .rd-draw-go rect, .rd-draw-go polygon { animation:rdIconDraw 0.9s ease forwards; }
@keyframes rdIconDraw { to { stroke-dashoffset:0; } }
/* === Animation de confirmation à l'envoi du formulaire === */
#newsletter-success { animation:rdPop 0.5s ease both, rdGlow 1.1s ease 0.2s 1; }
#newsletter-success svg path, #newsletter-success svg polyline { stroke-dasharray:60; stroke-dashoffset:60; animation:rdIconDraw 0.7s ease 0.15s forwards; }
@keyframes rdPop { from { opacity:0; transform:scale(0.96); } to { opacity:1; transform:none; } }
@keyframes rdGlow { 0%{ box-shadow:0 0 0 0 rgba(22,163,74,0); } 30%{ box-shadow:0 0 0 6px rgba(22,163,74,0.18); } 100%{ box-shadow:0 0 0 0 rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) {
.hero { animation:none; }
.rd-draw-pending path, .rd-draw-pending polyline, .rd-draw-pending line,
.rd-draw-pending circle, .rd-draw-pending rect, .rd-draw-pending polygon { stroke-dasharray:none; stroke-dashoffset:0; }
#newsletter-success, #newsletter-success svg path, #newsletter-success svg polyline { animation:none; stroke-dashoffset:0; }
}
/* === Zone d'intervention : communes groupées (Val d'Europe / Marne-la-Vallée) === */
.zone-groups { margin-top:1.75rem; display:flex; flex-direction:column; gap:1.5rem; }
.zone-group-t { font-size:0.78rem; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:0.06em; margin:0 0 0.75rem; }
.zone-chips { display:flex; flex-wrap:wrap; gap:0.6rem; }
/* === Carte de la zone d'intervention (contours réels des communes) === */
.zmap2-wrap { margin:1.75rem 0 0; }
.zmap2 { display:block; width:100%; height:auto; background:#eef3fa; border:1px solid var(--border); border-radius:16px; }
.zm-c { fill:#cdddf0; stroke:#eef3fa; stroke-width:2.5; stroke-linejoin:round; transition:fill 0.15s ease; outline:none; }
.zm-c:hover, .zm-c:focus { fill:#88a6cc; }
.zm-base { fill:var(--navy); }
.zm-l { font-family:var(--font),sans-serif; font-size:12px; fill:#46566b; text-anchor:middle; pointer-events:none; paint-order:stroke; stroke:#eef3fa; stroke-width:2.6px; stroke-linejoin:round; }
.zm-lbase { fill:#fff; font-weight:800; stroke:none; font-size:13px; }
.zmap2-cap { display:block; margin-top:0.6rem; font-size:0.75rem; color:var(--slate); font-style:italic; }
[data-theme="dark"] .zmap2 { background:#0f172a; }
[data-theme="dark"] .zm-c { fill:#1e293b; stroke:#0f172a; }
[data-theme="dark"] .zm-c:hover, [data-theme="dark"] .zm-c:focus { fill:#3a4a63; }
[data-theme="dark"] .zm-base { fill:#60a5fa; }
[data-theme="dark"] .zm-l { fill:#cbd5e1; stroke:#0f172a; }
[data-theme="dark"] .zm-lbase { fill:#0f172a; }
/* === Liens dans le contenu : couleur de marque, sans soulignement bleu par défaut ===
(les liens « nus » du texte héritaient du bleu souligné du navigateur). Soulignés
uniquement au survol, dans les zones de contenu. Les liens à classe — nav, boutons,
cartes — gardent leur propre style. */
a { color: var(--blue); text-decoration: none; }
.section-sub a:hover, .section-inner a:not([class]):hover, .faq-item a:hover, details a:hover { text-decoration: underline; }
/* === Plus de couleur : accent + teinte des sections par page ===
Le gris des sections alternées (--off) est teinté de l'accent de la page → tout
le site gagne en couleur. Teinte limitée au thème clair (le thème sombre garde
son propre --off). */
body.page-formation { --accent:#0f766e; --accent-soft:#e7f6f4; }
body.page-accueil { --accent:#3f5d82; --accent-soft:#eef4fb; }
body.page-faq { --accent:#3f5d82; --accent-soft:#eef4fb; }
/* Fil d'Ariane (injecté par chrome.js en tête du contenu, hors accueil) */
/* Fil d'Ariane — épuré « Apple » : léger, aéré, discret. */
.breadcrumb { font-size:0.8rem; color:var(--slate-l); padding:1.25rem var(--gx) 0; display:flex; align-items:center; gap:0.55rem; flex-wrap:wrap; font-weight:500; letter-spacing:0.005em }
.breadcrumb a { color:var(--slate); text-decoration:none; transition:color 0.15s ease }
.breadcrumb a:hover { color:var(--accent) }
.breadcrumb .breadcrumb-sep { color:var(--slate-l); opacity:0.6; font-weight:400 }
.breadcrumb [aria-current="page"] { color:var(--navy); font-weight:600 }
body.page-produit { --accent:#3f5d82; --accent-soft:#eef4fb; }
/* === Fond des pages de CONTENU (sans héros) ===
Le body est navy par défaut (il sert de fond derrière les héros/sections des
pages d'accueil et secteur). Les pages de contenu — FAQ, ressources, blog,
glossaire, formations, produit, sécurité routière… — n'ont pas de héros plein
cadre : sans fond explicite, leur contenu s'afficherait sur le navy. On leur
donne donc une surface claire (qui s'adapte au thème via --white). */
body.page-faq,
body.page-produit,
body.page-formation { background: var(--white); }
html:not([data-theme="dark"]) body.page-entreprises { --off:#e8f1fb; }
html:not([data-theme="dark"]) body.page-associations { --off:#e9f7ef; }
html:not([data-theme="dark"]) body.page-collectivites{ --off:#fdf1e7; }
html:not([data-theme="dark"]) body.page-particuliers { --off:#fcebf3; }
html:not([data-theme="dark"]) body.page-ecoles { --off:#f3ecfd; }
html:not([data-theme="dark"]) body.page-formation { --off:#e7f6f4; }
html:not([data-theme="dark"]) body.page-accueil { --off:#eef4fb; }
html:not([data-theme="dark"]) body.page-produit { --off:#eef4fb; }
/* === Couche couleur premium : pastilles d'accent + héros teinté par page === */
.section-tag {
display:inline-block;
background:var(--accent-soft);
color:var(--accent);
padding:0.34rem 0.8rem;
border-radius:999px;
}
[data-theme="dark"] .section-tag { background:rgba(126,177,245,0.12); color:#7eb1f5; }
/* héros : voile d'accent très léger derrière les halos (thème clair) */
html:not([data-theme="dark"]) .hero { background-color:var(--accent-soft); }
/* === Mode sombre : pastilles d'icônes alignées (fond translucide uniforme) ===
Certaines pastilles utilisaient un hex pastel codé en dur (ne s'adaptait pas) →
on harmonise toutes les pastilles .cseil-ico sur un fond translucide ; l'icône
garde sa couleur d'accent, lisible sur fond sombre. */
[data-theme="dark"] .cseil-ico { background: rgba(255,255,255,0.07) !important; }
/* Mode sombre : pastilles numérotées du parcours (background:var(--navy) qui
s'éclaircit en dark → numéro illisible). On force un bleu profond lisible. */
[data-theme="dark"] .rd-card > div[style*="border-radius:50%"][style*="background:var(--navy)"] {
background: #3f5d82 !important; color: #fff !important;
}
[data-theme="dark"] .c-icon { background: rgba(255,255,255,0.07) !important; }
/* === Carte des zones depuis Serris (anneaux + légende tarifaire) === */
.zmap2-wrap { max-width: 760px; margin: 1.75rem auto 0; }
.zr-km { font-family:var(--font),sans-serif; font-size:3px; font-weight:700; fill:var(--slate); text-anchor:middle; }
.zt { font-family:var(--font),sans-serif; font-size:3px; fill:var(--navy); }
.zt-home { font-weight:800; font-size:3.6px; text-anchor:middle; }
.zhome { fill:#0f2544; }
.zhome-ring { stroke:#0f2544; }
.zlegend { list-style:none; margin:1.25rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0.55rem 1.5rem; font-size:0.86rem; color:var(--slate); }
.zlegend li { display:flex; align-items:center; gap:0.5rem; }
.zlegend b { color:var(--navy); font-weight:700; }
.zl-dot { display:inline-block; width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.zone-group-t .zl-dot { vertical-align:middle; margin-right:0.15rem; }
[data-theme="dark"] .zt { fill:#cbd5e1; }
[data-theme="dark"] .zt-home { fill:#ffffff; }
[data-theme="dark"] .zr-km { fill:#94a3b8; }
[data-theme="dark"] .zhome { fill:#cbd5e1; }
[data-theme="dark"] .zhome-ring { stroke:#cbd5e1; }
/* === Carte des zones : interactivité === */
.ztpt { cursor: default; }
.ztpt:focus { outline: none; }
.ztline { stroke-width: 0.5; stroke-dasharray: 1 1; opacity: 0; transition: opacity 0.15s ease; }
.ztdot { transition: r 0.15s ease; }
.ztpt:hover .ztline, .ztpt:focus .ztline { opacity: 0.65; }
.ztpt:hover .ztdot, .ztpt:focus .ztdot { r: 2.6; }
.ztpt:hover .zt, .ztpt:focus .zt { font-weight: 800; }
.zr { transition: stroke-opacity 0.15s ease, stroke-width 0.15s ease, fill-opacity 0.15s ease; }
.zr.zr-active { stroke-opacity: 1; stroke-width: 0.9; fill-opacity: 0.30; }
.zhome-pulse { fill: rgba(15,37,68,0.4); transform-box: fill-box; transform-origin: center; animation: zpulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes zpulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.8); opacity: 0; } }
.zli { cursor: pointer; border-radius: 8px; padding: 0.2rem 0.45rem; transition: background 0.15s ease; }
.zli:hover { background: var(--accent-soft); }
[data-theme="dark"] .zhome-pulse { fill: rgba(203,213,225,0.45); }
@media (prefers-reduced-motion: reduce) { .zhome-pulse { display: none; } }
/* === Zone : mise en page pleine largeur (carte large + légende/communes) === */
.zone-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:2.5rem; align-items:center; margin-top:2rem; }
@media (max-width:900px){ .zone-layout { grid-template-columns:1fr; gap:1.75rem; align-items:start; } }
.zone-map-col .zmap2-wrap { max-width:none; margin:0; }
.zlegend { flex-direction:column; gap:0.55rem; }
.zlegend-note { font-size:0.8rem; color:var(--slate); margin:0.9rem 0 0; line-height:1.5; }
.zone-info-col .zone-groups { margin-top:1.5rem; }
/* === Bouton d'installation PWA (injecté dans le pied de page par script.js) === */
.pwa-install-btn {
display:inline-flex; align-items:center; gap:0.45rem;
margin-top:0.25rem;
padding:0.4rem 0.85rem;
border:1px solid var(--border);
border-radius:var(--r-pill);
background:transparent;
color:var(--slate);
font-family:inherit; font-size:0.74rem; font-weight:600;
cursor:pointer;
transition:color 0.15s, border-color 0.15s, background 0.15s;
}
.pwa-install-btn:hover { color:var(--blue); border-color:var(--blue); }
.pwa-install-btn svg { flex:0 0 auto; }
[data-theme="dark"] .pwa-install-btn { color:#94a3b8; border-color:#334155; }
[data-theme="dark"] .pwa-install-btn:hover { color:#60a5fa; border-color:#60a5fa; }
/* === Avis clients auto-hébergés (rendus par script.js dans [data-avis]) ===
Styles inertes tant qu'aucune page n'utilise le conteneur. */
.avis-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; margin-top:1.5rem; }
.avis-card { margin:0; padding:1.5rem; background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); display:flex; flex-direction:column; gap:0.75rem; }
.avis-note { display:flex; gap:0.15rem; color:#f59e0b; }
.avis-texte { margin:0; color:var(--text); line-height:1.7; font-size:0.95rem; }
.avis-texte::before { content:'\201C'; }
.avis-texte::after { content:'\201D'; }
.avis-auteur { color:var(--slate); font-size:0.85rem; font-weight:600; }
[data-theme="dark"] .avis-card { background:#1e293b; border-color:#334155; }
/* ============================================================================
DESIGN DES PAGES DE CONTENU (body.page-faq) — couleur + cartes
Les classes .rd-grid / .rd-card n'étaient stylées que dans produit.html.
On les définit ici pour toutes les pages de contenu, avec l'accent de page
(var --accent, posé par chrome.js) pour de la couleur et de la variété.
============================================================================ */
/* Intro colorée : voile d'accent derrière le haut de page */
body.page-faq main#contenu > section:first-of-type {
position: relative;
background:
radial-gradient(90% 120% at 100% 0%, var(--accent-soft) 0%, transparent 60%),
radial-gradient(70% 90% at 0% 0%, var(--accent-soft) 0%, transparent 55%);
}
[data-theme="dark"] body.page-faq main#contenu > section:first-of-type { background: none; }
/* Titre de page : barre d'accent sous le H1 */
body.page-faq .section-title { position: relative; }
/* Grille de cartes générique */
body.page-faq .rd-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
/* Carte : surface claire, liseré d'accent en haut, survol vivant */
body.page-faq .rd-card {
position: relative;
overflow: hidden;
background: var(--white);
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.6rem 1.5rem;
display: flex;
flex-direction: column;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.page-faq .rd-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--accent);
}
body.page-faq .rd-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 34px rgba(15, 37, 68, 0.12);
border-color: transparent;
}
body.page-faq .rd-card h3 {
font-family: var(--font), sans-serif;
font-size: 1.05rem;
font-weight: 800;
color: var(--navy);
margin: 0 0 0.5rem;
}
body.page-faq .rd-card p { color: var(--slate); font-size: 0.9rem; line-height: 1.65; margin: 0; }
[data-theme="dark"] body.page-faq .rd-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] body.page-faq .rd-card h3 { color: #e2e8f0; }
/* Pastille d'icône colorée des cartes (n'était définie que dans produit.html) */
.rd-ico {
width: 44px; height: 44px;
border-radius: 13px;
background: var(--accent-soft);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1rem; flex-shrink: 0;
}
.rd-ico.c-blue { background: #2563eb; color: #fff; }
.rd-ico.c-green { background: #16a34a; color: #fff; }
.rd-ico.c-orange { background: #e85d20; color: #fff; }
.rd-ico.c-purple { background: #7c3aed; color: #fff; }
.rd-ico.c-teal { background: #0d9488; color: #fff; }
.rd-ico.c-indigo { background: #4f46e5; color: #fff; }
.rd-ico.c-pink { background: #db2777; color: #fff; }
/* Glossaire () : termes en accent, définitions aérées en cartes */
body.page-faq dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.5rem 0 0; }
body.page-faq dl > div, body.page-faq dl .glossaire-item {
background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--accent);
border-radius: 12px; padding: 1.1rem 1.25rem;
}
body.page-faq dt { font-weight: 800; color: var(--accent); margin: 0 0 0.3rem; font-size: 0.98rem; }
body.page-faq dd { margin: 0; color: var(--slate); font-size: 0.9rem; line-height: 1.6; }
[data-theme="dark"] body.page-faq dl > div, [data-theme="dark"] body.page-faq dl .glossaire-item { background: #1e293b; border-color: #334155; border-left-color: var(--accent); }
/* Accordéons natifs () : carte avec marqueur d'accent */
body.page-faq details {
background: var(--white); border: 1px solid var(--border); border-radius: 12px;
padding: 0.25rem 1.25rem; margin: 0.75rem 0; transition: border-color 0.15s, box-shadow 0.15s;
}
body.page-faq details[open] { border-color: var(--accent); box-shadow: 0 8px 22px rgba(15,37,68,0.07); }
body.page-faq summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 0.9rem 0; list-style: none; display: flex; align-items: center; gap: 0.6rem; }
body.page-faq summary::-webkit-details-marker { display: none; }
body.page-faq summary::before { content: "+"; color: var(--accent); font-weight: 800; font-size: 1.1rem; width: 1rem; display: inline-block; }
body.page-faq details[open] summary::before { content: "\2212"; }
[data-theme="dark"] body.page-faq details { background: #1e293b; border-color: #334155; }
[data-theme="dark"] body.page-faq summary { color: #e2e8f0; }
/* Tableaux (ex. comparatif formations) : en-tête teinté d'accent */
body.page-faq table thead th { background: var(--accent-soft); color: var(--navy); }
body.page-faq table th[scope="row"] { color: var(--accent); }
[data-theme="dark"] body.page-faq table thead th { background: rgba(126,177,245,0.12); color: #e2e8f0; }
/* === Blog page unique : sommaire + articles en sections ancrées === */
.blog-toc { list-style:none; margin:1.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0.5rem; }
.blog-toc a { display:inline-block; padding:0.4rem 0.9rem; background:var(--off); color:var(--navy); border:1px solid var(--border); border-radius:999px; text-decoration:none; font-size:0.82rem; font-weight:600; transition:border-color 0.15s, color 0.15s; }
.blog-toc a:hover { border-color:var(--accent); color:var(--accent); }
.blog-article { padding-top:2.5rem; margin-top:2.5rem; border-top:1px solid var(--border); scroll-margin-top:90px; }
.blog-article:first-of-type { border-top:none; }
.blog-cat { font-size:0.74rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; margin:0 0 0.4rem; }
/* ============================================================================
COULEURS THÉMATIQUES — remap thème sombre des accents inline
Les libellés/accents sont codés en couleurs FONCÉES inline (lisibles sur fond
clair). En thème sombre, ces mêmes couleurs deviennent illisibles sur fond foncé.
On remappe chaque teinte vers sa variante CLAIRE (source unique). Sélecteurs
d'attribut [style*="color:#…"] → s'appliquent à tout usage inline, sans refonte
du markup. (Vérifié : aucune de ces teintes n'est utilisée en background-color.)
============================================================================ */
[data-theme="dark"] [style*="color:#15803d"] { color: #4ade80 !important; } /* vert */
[data-theme="dark"] [style*="color:#0f7a39"] { color: #4ade80 !important; } /* vert WhatsApp */
[data-theme="dark"] [style*="color:#0f6b2e"] { color: #4ade80 !important; } /* vert (badge produit) */
[data-theme="dark"] [style*="color:#14532d"] { color: #4ade80 !important; } /* vert foncé (estimateur) */
[data-theme="dark"] [style*="color:#c2410c"] { color: #fb923c !important; } /* orange */
[data-theme="dark"] [style*="color:#dc2626"] { color: #fca5a5 !important; } /* rouge (comparatifs) */
/* Symétrique en clair : #dc2626 sur les fonds pastels (rose/violet/bleu très clairs)
tombe sous 4.5:1 → on fonce en #b91c1c (AA) sans toucher aux barres background:#dc2626. */
html:not([data-theme="dark"]) [style*="color:#dc2626"] { color: #b91c1c !important; }
[data-theme="dark"] [style*="color:#be185d"] { color: #f9a8d4 !important; } /* rose */
[data-theme="dark"] [style*="color:#2563eb"] { color: #7eb1f5 !important; } /* bleu */
[data-theme="dark"] [style*="color:#3f5d82"] { color: #93c5fd !important; } /* bleu ardoise (liens) */
[data-theme="dark"] [style*="color:#7c3aed"] { color: #c4b5fd !important; } /* violet */
[data-theme="dark"] [style*="color:#0f766e"] { color: #5eead4 !important; } /* teal */
[data-theme="dark"] [style*="color:#4f46e5"] { color: #a5b4fc !important; } /* indigo */
[data-theme="dark"] [style*="color:#455d7d"] { color: #b0bccd !important; } /* slate doux (badges) */
/* Exception : éléments à FOND pastel clair codé en inline (pastilles secteur). Leur
fond reste clair en sombre → le texte doit rester FONCÉ (ces règles, placées après
les remaps, l'emportent par l'ordre source). */
[data-theme="dark"] [style*="background:#f0fdf4"] { color: #15803d !important; }
[data-theme="dark"] [style*="background:#fff7ed"] { color: #c2410c !important; }
[data-theme="dark"] [style*="background:#fdf2f8"] { color: #be185d !important; }
[data-theme="dark"] [style*="background:#eff6ff"] { color: #2563eb !important; }
[data-theme="dark"] [style*="background:#faf5ff"] { color: #7c3aed !important; }
/* Bouton newsletter (fond bleu clair en sombre) : texte foncé lisible */
[data-theme="dark"] button[onclick="subscribeNewsletter(this)"] { color: #0a1628 !important; }
[data-theme="dark"] .blog-toc a { background:#1e293b; border-color:#334155; color:#e2e8f0; }
[data-theme="dark"] .blog-article { border-top-color:#334155; }
/* Bouton « Partager » d'article (ajouté par script.js) */
.share-btn { display:inline-flex; align-items:center; gap:0.45rem; margin-top:1.25rem; padding:0.4rem 0.9rem; border:1px solid var(--border); border-radius:var(--r-pill); background:transparent; color:var(--slate); font-family:inherit; font-size:0.8rem; font-weight:600; cursor:pointer; transition:border-color 0.15s, color 0.15s; }
.share-btn:hover { border-color:var(--accent); color:var(--accent); }
[data-theme="dark"] .share-btn { border-color:#334155; color:#94a3b8; }
/* === Impression : page propre (articles, contact) sans le superflu === */
@media print {
nav, #site-footer, .site-footer, #cookie-banner, #scroll-top, .share-btn,
.mobile-cta, .pwa-install-btn, .sw-update, .breadcrumb, .blog-toc, [data-actus-live], [data-articles] { display:none !important; }
body { background:#fff !important; color:#000 !important; padding:0 !important; }
a { color:#000 !important; text-decoration:underline; }
.rd-card, .blog-article { break-inside:avoid; border-color:#ccc !important; box-shadow:none !important; }
.section-title, .rd-card h3, h1, h2, h3 { color:#000 !important; }
}
/* === Maillage interne « Pour aller plus loin » (injecté par chrome.js) ===
Fond explicite : ce bloc est inséré en fin de , juste avant le footer.
Sur les pages à body navy (accueil/secteur), un fond clair évite qu'il laisse
voir le navy entre la dernière section et le footer. */
.related-links { background:var(--white); }
.related-links .related-grid, .related-title { max-width:900px; margin-left:auto; margin-right:auto; }
.related-links { padding:2.5rem var(--gx) 3rem; }
.related-title { font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); margin:0 0 1rem; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0.75rem; }
.related-card { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.9rem 1.1rem; background:var(--white); border:1px solid var(--border); border-radius:var(--r); color:var(--navy); text-decoration:none; font-weight:600; font-size:0.92rem; transition:border-color 0.15s, color 0.15s, transform 0.15s; }
.related-card svg { flex:0 0 auto; color:var(--slate); transition:transform 0.15s, color 0.15s; }
.related-card:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.related-card:hover svg { color:var(--blue); transform:translateX(3px); }
[data-theme="dark"] .related-card { background:#1e293b; border-color:#334155; color:#e2e8f0; }
[data-theme="dark"] .related-card:hover { border-color:#60a5fa; color:#60a5fa; }
/* === Actualités sécurité routière (ressources officielles + actus locales) === */
.actus-officiel { list-style:none; margin:1.25rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0.75rem; }
.actus-officiel a, .actus-card a { display:flex; flex-direction:column; gap:0.2rem; padding:0.85rem 1rem; background:var(--white); border:1px solid var(--border); border-radius:var(--r); text-decoration:none; transition:border-color 0.15s, transform 0.15s; }
.actus-officiel a:hover, .actus-card a:hover { border-color:var(--blue); transform:translateY(-2px); }
.actus-officiel span, .actus-card-title { color:var(--navy); font-weight:600; font-size:0.95rem; }
.actus-officiel small, .actus-card-meta { color:var(--slate); font-size:0.8rem; line-height:1.4; }
.actus-card-title { font-size:0.92rem; }
.actus-live-title { font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue); margin:1.5rem 0 0.75rem; }
.actus-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0.75rem; }
[data-theme="dark"] .actus-officiel a, [data-theme="dark"] .actus-card a { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .actus-officiel span, [data-theme="dark"] .actus-card-title { color:#e2e8f0; }
[data-theme="dark"] .actus-officiel a:hover, [data-theme="dark"] .actus-card a:hover { border-color:#60a5fa; }
/* === Bandeau « nouvelle version » (service worker, injecté par chrome.js) === */
.sw-update {
position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:300;
display:flex; align-items:center; gap:1rem;
max-width:calc(100% - 2rem);
background:var(--navy); color:#fff;
padding:0.7rem 0.7rem 0.7rem 1.1rem;
border-radius:var(--r-pill);
box-shadow:0 8px 28px rgba(15,37,68,0.28);
font-size:0.86rem;
}
.sw-update button {
background:#60a5fa; color:#0f172a; border:none;
border-radius:var(--r-pill); padding:0.4rem 1rem;
font-family:inherit; font-size:0.82rem; font-weight:600; cursor:pointer;
}
.sw-update button:hover { background:#93c5fd; }
/* Au-dessus de la barre d'action mobile */
@media (max-width:760px) { .sw-update { bottom:5rem; } }
/* === Accessibilité : filet global « mouvement réduit » ===
Complète les règles ciblées plus haut : neutralise TOUTE animation/transition
restante pour les personnes qui demandent moins de mouvement (système). */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* === Accessibilité : visibilité du focus clavier (baseline) ===
Faible spécificité → les styles de focus dédiés plus haut restent prioritaires.
Garantit un anneau visible sur tout élément interactif au clavier (y compris les
blocs injectés : barre mobile, cartes liées, bouton PWA, bandeau MAJ). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: 3px;
}
/* ═══════════════════════════════════════════════════════════════════════════
POLISH design (Phase 3) — raffinements transverses, sans toucher au HTML.
NB : reveals au scroll, compteurs, tilt 3D, barre de progression, motif route,
parallaxe héros sont DÉJÀ gérés par chrome.js — on ne les redouble pas ici.
═══════════════════════════════════════════════════════════════════════════ */
/* 1) Chiffres tabulaires : tarifs, tableaux de coûts, estimateur, chrono réaction →
les colonnes de nombres s'alignent au pixel, plus de « danse » des chiffres. */
table, .price, .pricing, [class*="tarif"], [class*="cout"], [class*="-total"],
[id*="cout"], [id*="total"], .est-result, #est-result, .da-total, .rt-time {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* 2) Mesure de lecture confortable (~68 caractères) sur le texte long.
Cible le corps des articles et des réponses FAQ ; n'affecte pas les grilles. */
.blog-article > p, .blog-article li,
.faq-item > p {
max-width: 68ch;
}
/* ═══════════════════════════════════════════════════════════════════════════
ANIMATIONS (lot complet) — TOUTES coupées sous prefers-reduced-motion.
Complètent les effets déjà gérés par chrome.js (reveals, compteurs, tilt,
parallaxe, motif route). Aucune n'altère le HTML ni l'accessibilité.
═══════════════════════════════════════════════════════════════════════════ */
/* NB : View Transitions et cascade d'entrée du héros existent déjà plus haut
(cherche @view-transition / @keyframes heroRise) — on ne les redouble pas ici. */
/* 1) Effet « presse » au clic sur les cartes (léger enfoncement tactile). */
@media (hover: hover) {
.f-card:active, .offre-card:active, .zone-card:active, .resp-card:active, .about-card:active {
transform: translateY(-1px) scale(0.994);
}
}
/* 3) Soulignement de lien dans le contenu : présent au repos (1px → reste
distinguable, conforme WCAG), s'épaissit/colore à l'accent au survol. */
.blog-article > p a:not([class]), .faq-item > p a:not([class]) {
text-decoration: none;
background-image: linear-gradient(var(--accent), var(--accent));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 1px;
transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.blog-article > p a:not([class]):hover, .blog-article > p a:not([class]):focus-visible,
.faq-item > p a:not([class]):hover, .faq-item > p a:not([class]):focus-visible {
background-size: 100% 2px; color: var(--accent);
}
/* — Le reste = mouvement : désactivé si l'utilisateur préfère moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
/* 2) Icônes secteur animées au survol de LEUR carte. */
.f-card .f-icon, .offre-card .offre-icon, .c-card .c-icon, .resp-card svg {
transition: transform var(--dur) var(--ease);
}
.f-card:hover .f-icon { transform: scale(1.08) rotate(-4deg); }
.offre-card:hover .offre-icon { transform: scale(1.08) rotate(-4deg); }
.c-card:hover .c-icon { transform: scale(1.1); }
.resp-card:hover svg { transform: scale(1.08); }
/* 6) Flèches de CTA qui avancent au survol (généralise le motif .f-link). */
.btn-primary, .nav-cta, .offre-cta, .f-link { }
.btn-primary:hover svg, .nav-cta:hover svg { transform: translateX(3px); }
.btn-primary svg, .nav-cta svg { transition: transform var(--dur) var(--ease); }
/* 7) Secousse douce d'un formulaire invalide (classe posée par script.js). */
@keyframes rdShake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
.rd-shake { animation: rdShake 0.45s cubic-bezier(.36,.07,.19,.97) both; }
/* 8) Coche « envoyé » qui se trace (état succès des boutons d'envoi). */
@keyframes rdDraw { to { stroke-dashoffset: 0; } }
.rd-sent svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: rdDraw 0.5s var(--ease) forwards; }
}
/* ═══════════════════════════════════════════════════════════════════════════
STYLE APPLE (pass global) — police SF (var --font), titres centrés, indice
de défilement, cartes douces. Accessibilité préservée, mouvement coupé sous
prefers-reduced-motion.
═══════════════════════════════════════════════════════════════════════════ */
/* Intro de section centrée (suréticule + titre + sous-titre) — pattern Apple. */
.section-tag { display:block; width:fit-content; margin-left:auto; margin-right:auto; }
.section-title { text-align:center; }
.section-sub { text-align:center; max-width:680px; margin-left:auto; margin-right:auto; }
/* Cartes « Apple » : légère élévation au repos (douce), en plus du survol. */
.f-card, .offre-card { box-shadow: var(--shadow-sm); }
/* Indice de défilement au bas du héros (chevron, injecté par chrome.js). */
.hero-scroll {
position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
z-index:2; display:inline-flex; align-items:center; justify-content:center;
width:46px; height:46px; border-radius:50%;
border:1px solid var(--border); background:rgba(255,255,255,0.6);
-webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%);
color:var(--accent); cursor:pointer; transition:background 0.15s ease, color 0.15s ease;
}
.hero-scroll:hover { background:var(--white); }
[data-theme="dark"] .hero-scroll { background:rgba(28,38,64,0.6); }
@media (max-width:700px), (max-height:760px) { .hero-scroll { display:none; } }
@media (prefers-reduced-motion: no-preference) {
@keyframes heroCueBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }
.hero-scroll { animation: heroCueBounce 2.2s ease-in-out infinite; }
}
/* Animation « trajet » du héros (injectée par chrome.js, colonne droite). */
.hero-anim { width:100%; display:flex; align-items:center; justify-content:center; color:var(--accent); }
.hero-anim-panel {
position:relative; width:100%; max-width:440px; aspect-ratio:1 / 0.9; min-height:300px;
border-radius:var(--r-lg); padding:1.5rem; overflow:hidden;
background:linear-gradient(160deg, var(--white), var(--off));
border:1px solid var(--border); box-shadow:var(--shadow-lg);
}
[data-theme="dark"] .hero-anim-panel { background:linear-gradient(160deg,#16223a,#0f1a30); }
.hero-anim-panel svg { display:block; }
.ha-route { stroke-dasharray:100; stroke-dashoffset:100; }
@media (prefers-reduced-motion: reduce) { .ha-route { stroke-dashoffset:0; } }
@media (prefers-reduced-motion: no-preference) {
@keyframes haDraw { to { stroke-dashoffset:0; } }
.ha-route { animation: haDraw 2.1s ease forwards; }
}
@media (max-width:900px) { .hero-anim-panel { max-width:400px; margin:0 auto; } }
@media (max-width:480px) { .hero-anim { display:none; } }
/* ═══════════════════════════════════════════════════════════════════════════
HÉROS IMMERSIF (effet « whaou ») — fond sombre cinématique + traînées de
lumière (injectées par chrome.js). Gated sur .hero-immersive (ajoutée par JS) :
sans JS, le héros clair d'origine reste affiché. Texte blanc → fort contraste.
═══════════════════════════════════════════════════════════════════════════ */
.hero-immersive {
background:
radial-gradient(62% 80% at 18% -10%, rgba(40,72,130,0.55), transparent 70%),
radial-gradient(55% 75% at 92% 110%, rgba(30,92,186,0.34), transparent 70%),
linear-gradient(158deg, #0c1d38 0%, #0f2544 52%, #091630 100%) !important;
color:#fff; border-bottom:none;
min-height:clamp(560px,84vh,800px); display:flex; align-items:center;
}
/* Accroche CENTRÉE sur le fond immersif. */
.hero-immersive .hero-inner { display:flex; flex-direction:column; align-items:center; text-align:center; max-width:840px; margin:0 auto; }
.hero-immersive .hero-inner > div:first-child { max-width:820px; }
.hero-immersive .hero-sub { margin-left:auto; margin-right:auto; }
.hero-immersive .hero-actions { justify-content:center; }
.hero-immersive .hero-anim, .hero-immersive .hero-card, .hero-immersive .hero-season, .hero-orb { display:none; }
/* Couche de fond : pleine surface, derrière le contenu, légère parallaxe au curseur. */
.hero-backdrop {
position:absolute; inset:0; z-index:0; color:var(--accent); pointer-events:none;
transform:translate(calc(var(--hx,0px) * 0.6), calc(var(--hy,0px) * 0.6));
transition:transform 0.3s ease-out;
}
.hero-backdrop svg { width:100%; height:100%; display:block; }
.ha-trail { stroke-dasharray:12 88; stroke-dashoffset:100; }
.ha-trail-static { stroke-dasharray:none; opacity:0.5; }
@media (prefers-reduced-motion: no-preference) {
@keyframes haFlow { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }
.ha-trail { animation-name:haFlow; animation-timing-function:linear; animation-iteration-count:infinite; }
}
/* Texte & éléments du héros sur fond sombre. */
.hero-immersive h1 { color:#fff; }
.hero-immersive h1 em { color:var(--s1); }
.hero-immersive .hero-sub { color:rgba(255,255,255,0.82); }
.hero-immersive .hero-sub strong { color:#fff !important; }
.hero-immersive .hero-tag {
background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.22);
}
.hero-immersive .btn-primary { background:#fff; color:var(--navy); }
.hero-immersive .btn-primary:hover { background:rgba(255,255,255,0.88); }
.hero-immersive .btn-outline {
color:#fff; border-color:rgba(255,255,255,0.45); background:rgba(255,255,255,0.08);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero-immersive .btn-outline:hover { border-color:#fff; background:rgba(255,255,255,0.16); }
/* Fil d'Ariane lisible sur fond sombre. */
.hero-immersive .breadcrumb a { color:rgba(255,255,255,0.72); }
.hero-immersive .breadcrumb a:hover { color:#fff; }
.hero-immersive .breadcrumb [aria-current="page"] { color:#fff; }
.hero-immersive .breadcrumb .breadcrumb-sep { color:rgba(255,255,255,0.4); }
/* ═══════════════════════════════════════════════════════════════════════════
FIL D'ARIANE — chip « verre » élégant (icône maison › page). S'adapte au fond
clair des pages comme au héros immersif sombre. (Bloc final = autorité.)
═══════════════════════════════════════════════════════════════════════════ */
.breadcrumb {
display:inline-flex; align-items:center; gap:0.5rem; width:auto;
margin:calc(67px + 1.1rem) 0 0 var(--gx); /* hors héros : sous le menu, avec gouttière */
padding:0.4rem 0.85rem 0.4rem 0.7rem;
border-radius:var(--r-pill);
background:rgba(15,37,68,0.05);
border:1px solid var(--border);
-webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%);
font-size:0.78rem; font-weight:600; letter-spacing:0.005em; line-height:1;
color:var(--slate); text-align:left; box-shadow:var(--shadow-sm);
}
.breadcrumb .breadcrumb-home { display:inline-flex; align-items:center; color:var(--slate); text-decoration:none; transition:color 0.15s ease; }
.breadcrumb .breadcrumb-home:hover { color:var(--accent); }
.breadcrumb .breadcrumb-sep { color:var(--slate-l); font-weight:400; }
.breadcrumb [aria-current="page"] { color:var(--navy); font-weight:600; }
/* Sur le héros immersif (sombre) : verre clair translucide, texte clair. */
.hero-immersive .breadcrumb {
background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.20);
box-shadow:0 4px 18px rgba(0,0,0,0.18);
}
.hero-immersive .breadcrumb .breadcrumb-home { color:rgba(255,255,255,0.85); }
.hero-immersive .breadcrumb .breadcrumb-home:hover { color:#fff; }
.hero-immersive .breadcrumb .breadcrumb-sep { color:rgba(255,255,255,0.45); }
.hero-immersive .breadcrumb [aria-current="page"] { color:#fff; }
/* Mode sombre hors héros (pages de contenu sombres). */
[data-theme="dark"]:not(.x) .breadcrumb { background:rgba(255,255,255,0.06); border-color:var(--border); }
/* ═══════════════════════════════════════════════════════════════════════════
POLISH design (lot « Apple ») — bandeaux CTA sombres (rythme clair/sombre),
grain cinématique du héros, profondeur du mode sombre.
═══════════════════════════════════════════════════════════════════════════ */
/* Bandeaux CTA en SOMBRE premium (crée le rythme clair → sombre → clair façon Apple). */
.cta-band {
background:
radial-gradient(60% 120% at 18% 0%, rgba(40,72,130,0.5), transparent 70%),
linear-gradient(160deg, #0c1d38 0%, #0f2544 58%, #091630 100%) !important;
border-top:none !important; border-bottom:none !important; color:#fff;
}
.cta-band h2 { color:#fff; }
.cta-band p { color:rgba(255,255,255,0.82); }
/* Bouton blanc sur le bandeau sombre — texte FIXE (var(--navy) bascule en clair
en thème sombre → illisible). Exclut les boutons à fond inline (accent secteur). */
.cta-band .btn-primary:not([style*="background"]) { background:#fff; color:#0a1628; }
.cta-band .btn-primary:not([style*="background"]):hover { background:rgba(255,255,255,0.88); }
.cta-band .btn-outline:not([style*="background"]) {
color:#fff; border-color:rgba(255,255,255,0.45); background:rgba(255,255,255,0.08);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cta-band .btn-outline:not([style*="background"]):hover { border-color:#fff; background:rgba(255,255,255,0.16); }
/* Grain cinématique très léger sur le héros immersif (texture premium). */
.hero-immersive .hero-backdrop::after {
content:""; position:absolute; inset:0; pointer-events:none; opacity:0.05;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Profondeur du mode sombre : fin liseré clair en haut des cartes (lumière douce). */
[data-theme="dark"] .f-card, [data-theme="dark"] .offre-card {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), var(--shadow-sm);
}
/* ═══════════════════════════════════════════════════════════════════════════
MEGA-MENU « Secteurs » (nav desktop) — panneau riche au survol / clic.
═══════════════════════════════════════════════════════════════════════════ */
.nav-mega-wrap { position:relative; display:flex; align-items:center; }
.nav-mega-trigger {
display:inline-flex; align-items:center; gap:0.3rem; background:none; border:0; cursor:pointer;
font-family:inherit; font-size:0.875rem; font-weight:500; color:#334155; padding:0; white-space:nowrap;
}
.nav-mega-trigger:hover, .nav-mega-trigger.nav-active { color:var(--navy); }
.nav-mega-trigger.nav-active { font-weight:600; }
.nav-mega-caret { transition:transform 0.2s ease; }
.nav-mega-wrap:hover .nav-mega-caret, .nav-mega-wrap.mega-open .nav-mega-caret { transform:rotate(180deg); }
.nav-mega {
position:absolute; top:calc(100% + 1.1rem); left:50%; transform:translateX(-50%) translateY(8px);
width:min(600px,92vw); display:grid; grid-template-columns:1fr 1fr; gap:0.35rem; padding:0.55rem;
border-radius:var(--r-lg); background:rgba(255,255,255,0.92);
-webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
border:1px solid var(--border); box-shadow:var(--shadow-lg);
opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.18s ease, transform 0.18s ease; z-index:120;
}
/* pont invisible pour ne pas perdre le survol entre le déclencheur et le panneau */
.nav-mega-wrap::after { content:""; position:absolute; top:100%; left:0; right:0; height:1.2rem; }
.nav-mega-wrap:hover .nav-mega, .nav-mega-wrap:focus-within .nav-mega, .nav-mega-wrap.mega-open .nav-mega {
opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-mega-card { display:flex; align-items:center; gap:0.75rem; padding:0.7rem 0.8rem; border-radius:var(--r); text-decoration:none; transition:background 0.15s ease; }
.nav-mega-card:hover, .nav-mega-card[aria-current="page"] { background:var(--accent-soft); }
.nav-mega-ico { flex:0 0 auto; width:38px; height:38px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; }
.nav-mega-tx { display:flex; flex-direction:column; min-width:0; }
.nav-mega-t { font-weight:700; font-size:0.875rem; color:var(--navy); }
.nav-mega-d { font-size:0.74rem; color:var(--slate); margin-top:1px; }
[data-theme="dark"] .nav-mega { background:rgba(15,23,42,0.94); border-color:rgba(255,255,255,0.12); }
[data-theme="dark"] .nav-mega-trigger { color:#cbd5e1; }
[data-theme="dark"] .nav-mega-trigger:hover, [data-theme="dark"] .nav-mega-trigger.nav-active { color:#fff; }
@media (max-width:600px) { .nav-mega { grid-template-columns:1fr; } }
/* ═══════════════════════════════════════════════════════════════════════════
STICKY STORYTELLING (section « Comment ça marche ») — intro figée à gauche,
étapes qui défilent à droite. Se replie en une colonne sous 900px.
═══════════════════════════════════════════════════════════════════════════ */
.sticky-story { display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:3.5rem; align-items:start; text-align:left; }
.sticky-story .ss-aside { position:sticky; top:96px; }
.sticky-story .ss-aside .section-tag { margin-left:0; margin-right:0; }
.sticky-story .ss-aside .section-title,
.sticky-story .ss-aside .section-sub { text-align:left; max-width:none; margin-left:0; margin-right:0; }
/* étapes en colonne, reliées par un rail vertical (on neutralise le rail horizontal) */
.sticky-story .steps { display:flex; flex-direction:column; }
.sticky-story .steps::before, .sticky-story .steps::after { display:none !important; }
.sticky-story .ss-main .step { position:relative; padding:0 0 2.5rem 1.9rem; border-left:2px solid var(--border); }
.sticky-story .ss-main .step:last-child { padding-bottom:0; border-left-color:transparent; }
.sticky-story .ss-main .step::before {
content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%;
background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);
}
@media (max-width:900px) {
.sticky-story { grid-template-columns:1fr; gap:2rem; }
.sticky-story .ss-aside { position:static; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PALETTE SAISONNIÈRE (--s1..--s4) — couleurs des traînées/halos du héros, qui
changent avec la saison (classe body.season-* posée par seasonal.js).
Défaut (hors saison) = bleus de marque, pour rester élégant.
═══════════════════════════════════════════════════════════════════════════ */
:root { --s1:#7eb1f5; --s2:#9ec5ff; --s3:#cfe0fb; --s4:#ffffff; }
body.season-spring { --s1:#4ade80; --s2:#f9a8d4; --s3:#fde68a; --s4:#c4b5fd; }
body.season-summer { --s1:#fbbf24; --s2:#fb923c; --s3:#7dd3fc; --s4:#5eead4; }
body.season-autumn { --s1:#fb923c; --s2:#f87171; --s3:#fcd34d; --s4:#fdba74; }
body.season-winter { --s1:#bae6fd; --s2:#99f6e4; --s3:#a5b4fc; --s4:#e0e7ff; }
/* Sur le héros immersif (sombre), on rend les halos saisonniers VIFS (le sombre
fait ressortir la couleur) → spectaculaire et coloré. */
.hero-immersive::before { opacity:0.55 !important; }
.hero-immersive::after { opacity:0.5 !important; }
[data-theme="dark"] .hero-immersive::before { opacity:0.5 !important; }
[data-theme="dark"] .hero-immersive::after { opacity:0.45 !important; }
/* ═══════════════════════════════════════════════════════════════════════════
AMBIANCE SAISONNIÈRE SUR TOUT LE SITE — halos colorés (--s1..--s4) sur les
bandes sombres + barre de progression. Le « whaou » coloré ne se limite plus
au héros. Base sombre conservée → texte blanc lisible ; glows en coin, doux.
═══════════════════════════════════════════════════════════════════════════ */
.cta-band {
background:
radial-gradient(55% 120% at 12% 0%, color-mix(in srgb, var(--s1) 24%, transparent), transparent 70%),
radial-gradient(52% 110% at 92% 100%, color-mix(in srgb, var(--s2) 22%, transparent), transparent 70%),
linear-gradient(160deg,#0c1d38 0%,#0f2544 58%,#091630 100%) !important;
}
.ri-band {
background:
radial-gradient(55% 120% at 15% 0%, color-mix(in srgb, var(--s1) 22%, transparent), transparent 70%),
radial-gradient(50% 110% at 90% 100%, color-mix(in srgb, var(--s2) 20%, transparent), transparent 70%),
linear-gradient(160deg,#0c1d38,#0f2544 60%,#091630) !important;
}
.stats-band, [data-theme="dark"] .stats-band {
background:
radial-gradient(52% 130% at 8% 0%, color-mix(in srgb, var(--s1) 20%, transparent), transparent 72%),
radial-gradient(48% 120% at 96% 100%, color-mix(in srgb, var(--s2) 18%, transparent), transparent 72%),
var(--navy) !important;
}
.site-footer, [data-theme="dark"] .site-footer {
background:
radial-gradient(42% 130% at 10% 0%, color-mix(in srgb, var(--s1) 16%, transparent), transparent 72%),
radial-gradient(42% 130% at 95% 100%, color-mix(in srgb, var(--s3) 15%, transparent), transparent 72%),
var(--navy) !important;
}
/* Barre de progression de lecture aux couleurs de la saison. */
.rd-progress { background: linear-gradient(90deg, var(--s1), var(--s2)) !important; }