/* Roboto - the single typeface of the app and the site (Apache 2.0) */
@font-face{font-family:'Roboto';font-weight:400;font-display:swap;src:url(/assets/fonts/roboto-400.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:500;font-display:swap;src:url(/assets/fonts/roboto-500.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:700;font-display:swap;src:url(/assets/fonts/roboto-700.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:900;font-display:swap;src:url(/assets/fonts/roboto-900.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* System typeface « San Francisco » (native Apple rendering on Mac/iOS, plain elsewhere). */
  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --navy:var(--releve-252525);
  --navy2:var(--releve-3b3b3b);
  --blue:var(--releve-2563eb);
  --blue-l:var(--releve-ebebeb);
  --blue-ll:var(--releve-f4f4f4);
  --slate:var(--releve-6a6a6a);
  --slate-l:var(--releve-6c6c6c);
  /* Slate ink (neutral blue-grey) of the pictograms outside a sector (the
     « Entreprises » cards of 404/403/401/500, the expertise cards of authorities.html).
     Unchanged in light mode; lightened in dark (see below) because its background becomes
     a translucent bluish tile (html[data-theme="dark"] body{--accent-soft}). */
  --ardoise-ink:var(--releve-5a6b8c);
  --text:var(--releve-232323);
  --white:var(--releve-ffffff);
  --off:var(--releve-fafafa);
  /* Themed PAGE background: light in light mode, deep navy in dark. The body
     must NEVER remain plain navy (navy headings are unreadable on sections
     with no background of their own). */
  --page-bg:var(--releve-f7f7f7);
  --border:var(--releve-e7e7e7);
  --border2:var(--releve-d4d4d4);
  --orange:var(--releve-e85d20);
  --orange-l:var(--releve-fff4ef);
  /* Responsive side gutter: full browser width, with no centered max-width cap. */
  --gx:clamp(1.25rem,4vw,4rem);

  /* ── Phase 2/3 tokens (« Apple » look: softness + air) ───────────────────── */
  /* Softer, rounder radii — generous corners, the Apple way. */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-pill:100px;
  /* PILL buttons — Apple look (fully rounded corners). */
  --r-btn:100px;
  /* Vertical section rhythm — more breathing room (side margins use --gx). */
  --sp-section:6.5rem;
  /* Default accent = brand blue. Overridden per sector through body.sec-* (below). */
  --accent:var(--blue);
  --accent-soft:var(--blue-ll);
  /* Semantic tokens (guards against misusing the blue) — dark variants below. */
  --ok:var(--releve-0f7a39);     --ok-soft:var(--releve-eaf6ee);
  --warn:var(--accent);   --warn-soft:var(--releve-fdf3e7);
  --danger:var(--releve-c0392b); --danger-soft:var(--releve-fdecec);

  /* ── Tokens design (Phase 3 — polish) ─────────────────────────────────────── */
  /* Consistent 3-layer shadows (cool navy tint, never pure black) →
     replace ad hoc box-shadow rules for consistent elevation. */
  --shadow-sm:0 1px 2px rgba(37, 37, 37,0.06),0 1px 3px rgba(37, 37, 37,0.07);
  --shadow-md:0 4px 14px rgba(37, 37, 37,0.08),0 2px 5px rgba(37, 37, 37,0.05);
  --shadow-lg:0 14px 36px rgba(37, 37, 37,0.12),0 5px 12px rgba(37, 37, 37,0.06);
  /* Standard duration + easing curve (consistent « soft » motion). */
  --dur-fast:0.15s; --dur:0.25s; --ease:cubic-bezier(0.22,0.61,0.36,1);
}

/* Signature color by sector — aligned with the menu palette (chrome.js).
   Connected to the ALREADY present body.page-* classes → correct from the first
   render (zero flash), no HTML changes needed. The pages use
   var(--accent)/var(--accent-soft) instead of hard-coded colours (except the semantic
   ones: green = ecology/eco-driving, red = danger, and so on — those are kept). */
/* THESE VALUES COME FROM THE STYLE GUIDE, dock-02 to dock-14 in the console. Do not
   « corriger » them toward more common shades: they were chosen to work
   together and with the logo's four dots. */
/* Shades are named by AUDIENCE and declared ONLY ONCE here. The
   body.page-* rules connect to them, and the pricing page reuses them row by row
   (one table row = one audience). Fix a shade here, along with its
   nowhere else: two definitions of the same color eventually diverge.
   Three variants per audience: the vivid shade (backgrounds, pills), its
   pale version (--soft) and its TEXT ink (--ink), readable on light backgrounds and on
   on a dark card. */
:root{
  --pub-ecoles:var(--prairie-500);       --pub-ecoles-soft:var(--prairie-50);       --pub-ecoles-ink:var(--prairie-800);
  --pub-independant:var(--turquoise-500); --pub-independant-soft:var(--turquoise-50); --pub-independant-ink:var(--turquoise-800);
  --pub-associations:var(--menthe-500);   --pub-associations-soft:var(--menthe-50);   --pub-associations-ink:var(--menthe-800);
  --pub-entreprises:var(--corail-500);    --pub-entreprises-soft:var(--corail-50);    --pub-entreprises-ink:var(--corail-700);
  --pub-collectivites:var(--mangue-500);  --pub-collectivites-soft:var(--mangue-50);  --pub-collectivites-ink:var(--mangue-800);
  --pub-particuliers:var(--framboise-500);--pub-particuliers-soft:var(--framboise-50);--pub-particuliers-ink:var(--framboise-800);
  --pub-neutre:var(--orchidee-500);       --pub-neutre-soft:var(--orchidee-50);       --pub-neutre-ink:var(--orchidee-800);
}
/* In dark mode, each ink is lightened just enough to remain readable on the dark
   card — never washed out: a pastel color on a dark background loses its identity.
   Only the ink changes; the vivid shade and its pale version do not. */
[data-theme="dark"]{
  --pub-ecoles-ink:var(--prairie-300);
  --pub-independant-ink:var(--turquoise-300);
  --pub-associations-ink:var(--menthe-300);
  --pub-entreprises-ink:var(--corail-200);
  --pub-collectivites-ink:var(--mangue-300);
  --pub-particuliers-ink:var(--framboise-300);
  --pub-neutre-ink:var(--orchidee-300);
}
body.page-entreprises  {
  --accent:var(--pub-entreprises);
  --accent-soft:var(--pub-entreprises-soft);
  --accent-ink:var(--pub-entreprises-ink);
  --accent-on-dark:var(--corail-200);
  --accent-muted-on-dark:var(--sable-200);
  --blue:var(--pub-entreprises-ink);
  --blue-l:var(--corail-200);
  --blue-ll:var(--corail-50);
  --hero-immersive-glow-b:rgba(255,99,52,0.34);
  --hero-immersive-bg-a:var(--sable-900);
  --hero-immersive-bg-b:var(--releve-252525);
  --hero-immersive-bg-c:var(--releve-171717);
}
body.page-associations { --accent:var(--pub-associations);  --accent-soft:var(--pub-associations-soft); }
body.page-collectivites{ --accent:var(--pub-collectivites); --accent-soft:var(--pub-collectivites-soft); }
body.page-particuliers { --accent:var(--pub-particuliers);  --accent-soft:var(--pub-particuliers-soft); }
body.page-ecoles       { --accent:var(--pub-ecoles);        --accent-soft:var(--pub-ecoles-soft); }
/* Accent ink: the TEXT variant of the sector accent, AA contrast on a light
   background (light mode) or on a dark card (dark mode). The raw, vivid accent
   remains for backgrounds/badges; all inline color:var(--accent) text
   uses this ink through the rule below. */
body.page-associations { --accent-ink:var(--pub-associations-ink); }
body.page-collectivites{ --accent-ink:var(--pub-collectivites-ink); }
body.page-particuliers { --accent-ink:var(--pub-particuliers-ink); }
body.page-ecoles       { --accent-ink:var(--pub-ecoles-ink); }
body [style^="color:var(--accent)"],
body [style*=";color:var(--accent)"]{ color:var(--accent-ink,var(--accent)) !important; }
/* Exception : bandes sombres (fond navy inline, maintenu sombre en dark) ->
   the VIVID accent is the right choice there, not the ink. */
section[style*="background:var(--navy)"] [style^="color:var(--accent)"],
section[style*="background:var(--navy)"] [style*=";color:var(--accent)"]{ color:var(--accent) !important; }
body.page-faq          { --accent-ink:var(--pub-neutre-ink); }
body.page-formation    { --accent-ink:var(--pub-independant-ink); }
body.page-metiers      { --accent-ink:var(--framboise-800); }
body.page-questions    { --accent-ink:var(--soleil-800); }
body.page-financement  { --accent-ink:var(--citron-800); }
body.page-marche-public{ --accent-ink:var(--mangue-800); }
html{scroll-behavior:smooth;margin:0;padding:0}
body{font-family:var(--font),sans-serif;background:var(--page-bg);color:var(--text);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;margin:0;padding:0}

/* ── Accessibility ──────────────────────────────────────────────────────── */
/* Skip link: off screen by default, slides into view on keyboard focus. */
.skip-link{position:fixed;top:-100px;left:1rem;z-index:10000;background:var(--navy);color:var(--releve-ffffff);padding:0.65rem 1rem;border-radius:var(--r-btn);font-weight:600;text-decoration:none;box-shadow:0 4px 14px rgba(37, 37, 37,0.25);transition:top 0.15s ease}
.skip-link:focus{top:1rem}
/* Visible and consistent keyboard focus (without getting in the pointer's way). */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[data-theme="dark"] :focus-visible{outline-color:var(--releve-60a5fa)}
[data-theme="dark"] .skip-link{color:var(--releve-252525)}

/* ── Coverage area (municipality chips) ─────────────────────────────────── */
.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 (SEO accordion) ────────────────────────────────────────────────── */
.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:var(--releve-545454);line-height:1.65}
[data-theme="dark"] .faq-item > p{color:var(--releve-a2a2a2)}

/* ── Page loader (splash) ─────────────────────────────────────────────────── */
/* Hidden by default, appears after 150ms — no flash on fast loads */
#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 removed 2026-05-24 — a static logo is preferred */
.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:var(--releve-171717)}

/* NAV — Liquid Glass material (floating layer).
   Two-layer architecture: the universal frosted glass (blur + saturate) lives
   on the element; SVG refraction (url(#lg-refract), injected by chrome.js)
   lives on ::after. Putting url() directly on the element breaks rendering in
   some engines — never merge the two layers. */
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(37, 37, 37,0.06);padding:0 var(--gx)}
/* Refraction layer: the only one carrying url(); engines that ignore it keep the frosted glass. */
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:var(--releve-404040);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}
/* Nav CTA — flat, solid navy (a colour reserved for the primary action), no sheen, no shadow. */
.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)}
/* « Se connecter » button (nav) — neutral frosted glass, flat (no sheen). */
#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)}
/* ANIMATED seasonal hero background: two color sheets (seasonal shade)
   drifting slowly like an « aurore », as in the app background. Layers
   ::before/::after sit behind the content; the body.season-X class is set by 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(191, 191, 191,.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(223, 223, 223,.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(184, 184, 184,.36),transparent 72%),radial-gradient(42% 54% at 18% 82%,rgba(162, 162, 162,.34),transparent 72%)}
[data-theme="dark"] .hero::before{opacity:.24}
[data-theme="dark"] .hero::after{opacity:.20}
/* CENTRED « Apple » HERO: a single centred column (monumental headline), and
   the credibility card becomes a centered showcase BELOW the buttons. Replaces
   the old text-left + card-right layout. Applies to every page that has
   with a hero via CSS (no HTML edits). */
/* Two-column hero: headline on the LEFT, « trajet » animation on the RIGHT (replaces
   the old tile). The text is no longer lost in the middle of a large empty space. */
.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}
/* Seasonal artwork (middle column, between the text and the tile) — ABSTRACT:
   the season is shown through COLOR (no icon). Medallion: gradient sphere
   + thin ring. Colours driven by the body.season-* class (see 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:var(--releve-252525);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:var(--releve-d4d4d4);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.45rem 0.95rem;border-radius:var(--r-pill);font-size:0.8125rem;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}}
/* Action buttons — flat. The primary = solid navy; the secondary = neutral
   frosted glass (translucency + blur retained), but without highlight or shadow. */
.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 — light frosted glass: the hero's aurora background shows through.
   No refraction layer here (reserved for the floating chrome, GPU cost). */
/* The credibility tile is NO LONGER part of the hero: the intro
   section = text + buttons only, stripped back. The card is hidden. */
.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:var(--ok)}
.badge-dot.orange{background:var(--orange)}
.badge-dot.purple{background:var(--accent)}
.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:var(--releve-60a5fa)}
.stat-label{font-size:0.8125rem;color:var(--releve-a2a2a2);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.75rem;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}
.rd-grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.formations-grid{grid-template-columns:1fr}}
@media(max-width:900px){.rd-grid-3{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:var(--releve-ededed)}
.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(--accent-soft);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--accent-ink,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:var(--releve-c1c1c1);margin-top:2px}
.about-text{font-size:0.875rem;color:var(--releve-d4d4d4);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:color-mix(in srgb, var(--accent) 42%, var(--white));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(--accent-soft);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--accent-ink,var(--blue))}
.c-label{font-size:0.75rem;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(--accent);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.85rem;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
   ═══════════════════════════════════════════════════════════ */

/* Toggle button */

/* ── 3-state theme switch (Light / System / Dark) — taken from the 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: 38px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); flex-shrink: 0; }
.theme-switch3-thumb { position: absolute; top: 4px; left: 4px; width: 40px; height: 28px; background: var(--releve-ffffff); 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 { background: var(--sable-800); border-color: var(--sable-700); }
[data-theme="dark"] .theme-switch3-thumb { background: var(--sable-700); 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 { color: var(--sable-300); }
[data-theme="dark"] .theme-switch3-opt[aria-pressed="true"] { color: var(--sable-50); }
.theme-switch3-opt { position: relative; z-index: 2; width: 40px; height: 28px; 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: 15px; height: 15px; }
.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(40px); }
[data-theme-pref="dark"]  .theme-switch3-thumb { transform: translateX(80px); }
:root:not([data-theme-pref]) .theme-switch3-thumb { transform: translateX(40px); }

/* Dark variables — « soft dark » palette with a body / card / sub-tile hierarchy */
[data-theme="dark"] {
  --navy: var(--releve-ededed);         /* texte principal — warm off-white */
  --navy2: var(--releve-d4d4d4);
  --blue: var(--releve-7eb1f5);          /* bleu pastel plus lumineux */
  --blue-l: rgba(126,177,245,0.16);
  --blue-ll: rgba(126,177,245,0.09);
  --slate: var(--releve-a7a7a7);          /* gris-bleu chaleureux pour les paragraphes */
  --slate-l: var(--releve-a2a2a2);
  --ardoise-ink: var(--releve-9db2d6);    /* eclaircie : 4,3 a 5,4 sur la tuile accent-soft sombre */
  --text: var(--releve-ededed);
  --white: var(--releve-272727);          /* fond des cartes — slate-navy élevé */
  --off: var(--releve-353535);            /* fond des sous-tuiles — encore + élevé */
  --border: var(--releve-434343);         /* bordures subtiles mais visibles */
  --border2: var(--releve-5a5a5a);
  --orange: var(--releve-fbb074);
  --orange-l: rgba(251,176,116,0.12);
  --page-bg: var(--releve-171717);
  --ok:var(--releve-86efac);     --ok-soft:rgba(34,197,94,0.15);
  --warn:var(--releve-fcd9a8);   --warn-soft:rgba(251,176,116,0.15);
  --danger:var(--releve-fca5a5); --danger-soft:rgba(248,113,113,0.15);
  /* Dark-mode shadows: stronger black casts to separate raised surfaces
     from an already dark background — translucent navy shadows would disappear there. */
  --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: var(--releve-171717); }
/* Before script.js sets data-theme: follow the system preference (zero flash). */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --page-bg:var(--releve-171717); } }
/* Dark theme: --accent-soft is not redefined per page → it would remain light
   (unreadable accent-soft boxes). Make it adaptive (bluish tile on a dark background
   ). Specificity html[data-theme] body so it beats body.page-* . */
html[data-theme="dark"] body { --accent-soft: rgba(126,177,245,0.12); }
[data-theme="dark"] nav { background: rgba(23, 23, 23,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: var(--releve-e7e7e7); }
[data-theme="dark"] .nav-mobile { background: rgba(23, 23, 23,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: var(--releve-e7e7e7); border-color: var(--releve-404040); }
[data-theme="dark"] .nav-mobile-cta { background-color: var(--releve-6b6b6b) !important; color: white !important; }
[data-theme="dark"] .nav-cta { background-color: var(--releve-60a5fa); color: var(--releve-171717); }
[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: var(--releve-171717); border-color: var(--releve-404040); }
[data-theme="dark"] .hero-card { background: rgba(41, 41, 41,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: var(--releve-404040); }
[data-theme="dark"] .hcard-badge { background: var(--releve-171717); border-color: var(--releve-404040); }
[data-theme="dark"] .hcard-name { color: var(--releve-e7e7e7); }
[data-theme="dark"] .badge-sub { color: var(--releve-737373); }
[data-theme="dark"] .stats-band { background: var(--releve-292929); }
[data-theme="dark"] .formations { background: var(--releve-171717); }
[data-theme="dark"] .f-card { background: var(--releve-292929); border-color: var(--releve-404040); }
[data-theme="dark"] .f-title { color: var(--releve-e7e7e7); }
[data-theme="dark"] .f-tag { background: var(--releve-171717); border-color: var(--releve-404040); color: var(--releve-a2a2a2); }
[data-theme="dark"] .qualif { background: var(--releve-171717); }
[data-theme="dark"] .q-item { background: var(--releve-292929); border-color: var(--releve-404040); }
[data-theme="dark"] .q-name { color: var(--releve-e7e7e7); }
[data-theme="dark"] .about-card { background: var(--releve-292929); }
[data-theme="dark"] .zone-card { background: var(--releve-292929); border-color: var(--releve-404040); }
[data-theme="dark"] .z-tag { background: var(--releve-171717); border-color: var(--releve-404040); color: var(--releve-a2a2a2); }
[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: var(--releve-e7e7e7); }
[data-theme="dark"] .process { background: var(--releve-171717); }
[data-theme="dark"] .step { background: var(--releve-292929); border-color: var(--releve-404040); }
[data-theme="dark"] .step-title { color: var(--releve-e7e7e7); }
[data-theme="dark"] .contact { background: var(--releve-171717); }
[data-theme="dark"] .fg input,
[data-theme="dark"] .fg select,
[data-theme="dark"] .fg textarea { background: var(--releve-292929); border-color: var(--releve-404040); color: var(--releve-e7e7e7); }
[data-theme="dark"] .fg label { color: var(--releve-a2a2a2); }
[data-theme="dark"] .obligation-box { background: var(--releve-292929); border-color: var(--releve-404040); }
[data-theme="dark"] .btn-submit { background-color: var(--releve-60a5fa); color: var(--releve-171717); }
[data-theme="dark"] .cta-band, [data-theme="dark"] #cta-band { background: linear-gradient(135deg,rgba(63,93,130,0.15),rgba(126,177,245,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: var(--releve-e7e7e7) !important; }
[data-theme="dark"] .cta-band p, [data-theme="dark"] #cta-band p { color: var(--releve-a2a2a2) !important; }
[data-theme="dark"] .cta-band h2 { color: var(--releve-e7e7e7); }
[data-theme="dark"] .divider { background: linear-gradient(to right, transparent, var(--releve-404040), transparent); }
[data-theme="dark"] footer { background: var(--releve-171717); border-color: var(--releve-404040); }
[data-theme="dark"] .section-title { color: var(--releve-e7e7e7); }
[data-theme="dark"] .section-tag { color: var(--accent); }
[data-theme="dark"] #legal-overlay > div { background: var(--releve-292929); color: var(--releve-e7e7e7); }
[data-theme="dark"] .login-card { background: var(--releve-292929); border-color: var(--releve-404040); }
[data-theme="dark"] .card { background: var(--releve-292929); border-color: var(--releve-404040); }
[data-theme="dark"] .chart-table th { background: var(--releve-171717); color: var(--releve-a2a2a2); }
[data-theme="dark"] .chart-table td { border-color: var(--releve-292929); }

/* ── Further dark mode corrections ── */


/* ── Logo: road animation — advancing rounded stroke (iOS compatible) ──
   We draw/erase the STROKE itself (stroke-dashoffset) → the ROUNDED end of the
   road advances along the curve (not a straight bar sliding across).
   WARNING: iOS/WebKit clamps NEGATIVE dashoffset values. So use values >= 0:
   stroke length ≈ 1195, dasharray 1200 (period 2400, so 0 and 2400 = “full”).
   - 0→15%  : 1200→0   = the road draws itself from left to right (entrance).
   - 15→64% : held (full).
   - 64→65% : INSTANT jump 0→2400 (step-end) — invisible because 0 and 2400 = the same full state.
   - 65→90% : 2400→1200 = the road erases itself from left to right (exit), rounded end.
   - 90→100%: held (hidden). Loops back to 0% (1200=hidden) without a jolt.
   Keep the 13s duration in sync with DUR in resumeLogoAnim() (chrome.js). */


/* ── Elements on a navy background — they stay dark in 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: var(--releve-252525) !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: var(--releve-252525) !important;
}
[data-theme="dark"] section[style*="background:var(--navy)"] h2 {
  color: var(--releve-f4f4f4) !important;
}
[data-theme="dark"] section[style*="background:var(--navy)"] p {
  color: var(--releve-a2a2a2) !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 (already dark, do not touch) */
[data-theme="dark"] .stats-band {
  background: var(--releve-292929) !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: var(--releve-60a5fa) !important; }
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div[style*="color:#60a5fa"] { color: var(--releve-60a5fa) !important; }
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div[style*="color:#a2a2a2"] { color: var(--releve-a2a2a2) !important; }


/* General text */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span { color: inherit; }
[data-theme="dark"] .section-sub { color: var(--releve-a2a2a2); }
[data-theme="dark"] .hero-sub { color: var(--releve-a2a2a2); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--releve-e7e7e7); }

/* Inline SVG icons (stroke/fill inherit) */
[data-theme="dark"] svg { color: inherit; }

/* Hero */
[data-theme="dark"] .hero-stat-val { color: var(--releve-60a5fa); }
[data-theme="dark"] .hero-stat-label { color: var(--releve-a2a2a2); }
[data-theme="dark"] .badge-text { color: var(--releve-e7e7e7); }
[data-theme="dark"] .btn-primary { background-color: var(--releve-60a5fa); color: var(--releve-171717); }
[data-theme="dark"] .btn-outline { border-color: rgba(255,255,255,0.18); color: var(--releve-e7e7e7); 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: var(--releve-e7e7e7); }
[data-theme="dark"] .stat-label { color: var(--releve-a2a2a2); }

/* Formations */
[data-theme="dark"] .f-desc { color: var(--releve-a2a2a2); }
[data-theme="dark"] .f-link { color: var(--releve-60a5fa); }
[data-theme="dark"] .formations-header p { color: var(--releve-a2a2a2); }
[data-theme="dark"] p[style*="font-size:0.72rem;font-weight:700"][style*="color:var(--navy)"] { color: var(--releve-60a5fa) !important; border-color: var(--releve-60a5fa) !important; }

/* Calculateur */
[data-theme="dark"] .calc-slider { background: var(--releve-404040); }
[data-theme="dark"] .calc-result { background: var(--releve-292929); border-color: var(--releve-404040); color: var(--releve-e7e7e7); }
[data-theme="dark"] div[style*="background:white"] { background: var(--releve-292929) !important; }
[data-theme="dark"] div[style*="background:#fff"] { background: var(--releve-292929) !important; }
[data-theme="dark"] div[style*="color:#252525"] { color: var(--releve-e7e7e7) !important; }
[data-theme="dark"] div[style*="color:#6b6b6b"] { color: var(--releve-60a5fa) !important; }
[data-theme="dark"] div[style*="color:#737373"] { color: var(--releve-a2a2a2) !important; }
[data-theme="dark"] div[style*="color:#545454"] { color: var(--releve-a2a2a2) !important; }

/* Qualifications */
[data-theme="dark"] .q-num { background: var(--releve-171717); color: var(--releve-60a5fa); border-color: var(--releve-404040); }
[data-theme="dark"] .q-detail { color: var(--releve-a2a2a2); }
[data-theme="dark"] .about-title { color: var(--releve-e7e7e7); }
[data-theme="dark"] .about-sub { color: var(--releve-a2a2a2); }
[data-theme="dark"] .about-stat-val { color: var(--releve-60a5fa); }
[data-theme="dark"] .about-stat-label { color: var(--releve-a2a2a2); }

/* Steps */
[data-theme="dark"] .step-num { background: var(--releve-292929); border-color: var(--releve-404040); color: var(--releve-60a5fa); }
[data-theme="dark"] .step-desc { color: var(--releve-a2a2a2); }
[data-theme="dark"] .step-connector { background: var(--releve-404040); }

/* Stats sections (grandes stats) */
[data-theme="dark"] section[style*="background:var(--white)"] { background: var(--releve-171717) !important; }
[data-theme="dark"] section[style*="background:var(--off)"] { background: var(--releve-292929) !important; }

/* Partenaires */
[data-theme="dark"] div[style*="border-radius:var(--r-lg);padding:2rem;display:flex;flex-direction:column"] { background: var(--releve-292929) !important; border-color: var(--releve-404040) !important; }
[data-theme="dark"] div[style*="font-weight:700;font-size:1rem;color:var(--navy)"] { color: var(--releve-e7e7e7) !important; }

/* Horloge */

[data-theme="dark"] #eco-conduite { background: var(--releve-171717) !important; }
[data-theme="dark"] #eco-conduite .section-sub { color: var(--releve-a2a2a2); }
[data-theme="dark"] #eco-saving { color: var(--releve-4ade80) !important; }
[data-theme="dark"] #eco-liters, [data-theme="dark"] #eco-co2 { color: var(--releve-4ade80) !important; }
[data-theme="dark"] div[style*="background:white;border-radius:var(--r-lg);padding:2rem;box-shadow"] { background: var(--releve-292929) !important; }


[data-theme="dark"] #faq-overlay > div { background: var(--releve-292929) !important; }
[data-theme="dark"] #faq-overlay h2 { color: var(--releve-e7e7e7) !important; }
[data-theme="dark"] #faq-overlay p { color: var(--releve-a2a2a2) !important; }
[data-theme="dark"] .faq-item { border-color: var(--releve-404040) !important; }
[data-theme="dark"] .faq-item button { background: var(--releve-171717) !important; color: var(--releve-e7e7e7) !important; }
[data-theme="dark"] .faq-item div[id^="faq-answer"] { background: var(--releve-292929) !important; color: var(--releve-a2a2a2) !important; }

[data-theme="dark"] #clock-time { color: white; }
[data-theme="dark"] #clock-date { color: var(--releve-c1c1c1); }

/* Contact */
[data-theme="dark"] .contact-info-val { color: var(--releve-e7e7e7); }
[data-theme="dark"] .contact-info-label { color: var(--releve-a2a2a2); }
[data-theme="dark"] select option { background: var(--releve-292929); color: var(--releve-e7e7e7); }

/* Inline framed sections */
/* (The old generic div[style*="background:#XXX"] rules were removed:
    they also matched icon containers and created inconsistencies.
    Replaced by targeted rules further down — see « FIXES round 8 ».) */

/* Footer */
[data-theme="dark"] footer { background: var(--releve-161616) !important; display:block; width:100%; margin:0; }

/* 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: var(--releve-e7e7e7); }

/* Nav links */
[data-theme="dark"] section[style*="fff7ed"] { background: linear-gradient(180deg,var(--releve-292929) 0%,rgba(234,88,12,0.05) 50%,var(--releve-292929) 100%) !important; }
[data-theme="dark"] section[style*="f0fdf4"][id="eco-conduite"] { background: linear-gradient(180deg,var(--releve-171717) 0%,rgba(126,177,245,0.05) 50%,var(--releve-171717) 100%) !important; }


/* Steps dark mode */

[data-theme="dark"] .nav-links a { color: var(--releve-a2a2a2); }
[data-theme="dark"] .nav-links a:hover { color: var(--releve-e7e7e7); }
[data-theme="dark"] .nav-links a.nav-active { color: var(--releve-e7e7e7); }

/* ═══════════════════════════════════════════════════════════
   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
   + glass highlight. The visual style lives HERE (single source); pages only
   keep inline positioning. */
#scroll-top {
  background-color: var(--accent);
  color: var(--releve-ffffff);
  box-shadow: 0 6px 18px rgba(37, 37, 37,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(37, 37, 37,0.30);
}

/* Relief visuel */
.section-onisr::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(72% 48% at 28% 34%, rgba(63,93,130,0.0400) 0%, rgba(63,93,130,0.0288) 24%, rgba(63,93,130,0.0168) 46%, rgba(63,93,130,0.0080) 66%, rgba(63,93,130,0.0028) 82%, rgba(63,93,130,0.0000) 100%);
  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); }

/* (Anti-copy protections removed: they broke accessibility and image interactivity) */

/* Graphiques ONISR */
.charts-grid { display: 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 ── */
/* Dropdown card — same material as the nav: frosted glass on the element,
   refraction on ::after. isolation:isolate creates the stacking context
   needed for the negative z-index of the refraction layer. */
@keyframes navDropIn { from { opacity: 0; transform: translateY(-8px) scale(0.92); } to { opacity: 1; transform: none; } }

/* Nav right-hand group */
.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: 12px 11px;
  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); }

/* Mobile menu overlay — more opaque frosted glass than the nav (readability on a
   full-width list), with no refraction layer. */
.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(37, 37, 37,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;
}

/* Switch to the hamburger menu earlier to avoid overflow: 8 top links
   (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 */
}

@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; }
  .charts-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; }
}

/* ═══════════════════════════════════════════════════════════
   STYLES SHARED BY THE AUDIENCE PAGES
   (businesses, associations, local authorities, individuals, driving schools)
   ═══════════════════════════════════════════════════════════ */

*,*::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: var(--releve-292929); border-color: var(--releve-404040); color: var(--releve-e7e7e7); }




[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: var(--releve-e7e7e7); }


[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: var(--releve-e7e7e7); }

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: var(--releve-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;
  min-height: 44px;
  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: var(--releve-292929); border-color: var(--releve-404040); }

[data-theme="dark"] .offre-card h3 { color: var(--releve-e7e7e7); }

[data-theme="dark"] .offre-card ul.offre-list li { color: var(--releve-e7e7e7); }

[data-theme="dark"] .offre-note { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.2); color: var(--releve-e7e7e7); }

[data-theme="dark"] .offre-note strong { color: var(--releve-60a5fa); }

.legal-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: start;
}

.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);
}

[data-theme="dark"] .legal-impact-card .impact-title { color: var(--releve-e7e7e7); }

.finance-section { background: linear-gradient(180deg, var(--white) 0%, var(--accent-soft) 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: var(--ok-soft); color: var(--ok); }

.finance-card.path-b .finance-tag { background: var(--releve-fef3c7); color: var(--accent); }

.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: var(--ok);
  font-weight: 700;
}

[data-theme="dark"] .finance-card { background: var(--releve-292929); border-color: var(--releve-404040); }

[data-theme="dark"] .finance-card h3 { color: var(--releve-e7e7e7); }

[data-theme="dark"] .finance-card ul li { color: var(--releve-e7e7e7); }

/* Breadcrumb: background IDENTICAL to the hero (no gray band or border) → it
   blends into the top of the page instead of forming a detached « rectangle ».
   margin-top = fixed menu height (prevents any navy line below the menu). */
.breadcrumb{background:var(--white);padding:0.625rem 2rem;margin-top:66px;position:relative;z-index:50}
/* Breadcrumb INSIDE the hero: floats on the hero's light background, just below the
   fixed menu → integrated, without a gray band or navy border. The hero (overflow:hidden,
   position:relative) contains it; its 9rem top margin (7rem mobile) leaves room. */
.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,var(--ok-soft) 0%,var(--white) 60%);border-color:var(--releve-86efac);box-shadow:0 4px 18px rgba(126,177,245,0.08)}

.page-associations .offre-card.highlighted:hover{box-shadow:0 8px 24px rgba(126,177,245,0.12)}

.page-associations .offre-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--ok);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(126,177,245,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(--accent-ink,var(--releve-737373)) !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:var(--ok)}

.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:var(--releve-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 var(--ok)}

.page-associations .finance-card.path-b{border-left:4px solid var(--accent)}

.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:var(--ok)}

.page-associations .finance-card.path-b ul li::before{color:var(--accent)}

.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:var(--releve-292929);border-color:var(--releve-404040)}

[data-theme="dark"] .page-associations .breadcrumb-inner{color:var(--releve-a2a2a2)}

[data-theme="dark"] .page-associations .breadcrumb-inner a{color:var(--releve-a2a2a2)}

[data-theme="dark"] .page-associations .breadcrumb-inner a:hover{color:var(--releve-60a5fa)}

[data-theme="dark"] .page-associations .breadcrumb-inner span[aria-current]{color:var(--releve-e7e7e7)}

[data-theme="dark"] .page-associations .hcard-stat{background:var(--releve-171717);border-color:var(--releve-404040)}

[data-theme="dark"] .page-associations .hstat-text strong{color:var(--releve-e7e7e7)}

[data-theme="dark"] .page-associations .hstat-text span{color:var(--releve-a2a2a2)}

[data-theme="dark"] .page-associations .offre-section{background:var(--releve-171717) !important}

[data-theme="dark"] .page-associations .offre-card.highlighted{background:linear-gradient(180deg,rgba(126,177,245,0.12) 0%,var(--releve-292929) 60%) !important;border-color:rgba(134,239,172,0.3)}

[data-theme="dark"] .page-associations .offre-card .offre-lead{color:var(--releve-d4d4d4)}

[data-theme="dark"] .page-associations .offre-card .offre-lead em{color:var(--releve-60a5fa)}

[data-theme="dark"] .page-associations .offre-card .offre-ul{color:var(--releve-a2a2a2)}

[data-theme="dark"] .page-associations .offre-card .offre-meta{border-top-color:var(--releve-404040)}

[data-theme="dark"] .page-associations .offre-foot{background:var(--releve-292929);border-color:var(--releve-404040);color:var(--releve-d4d4d4)}

[data-theme="dark"] .page-associations .offre-foot strong{color:var(--releve-e7e7e7)}

[data-theme="dark"] .page-associations .offre-foot span{color:var(--releve-a2a2a2)}

[data-theme="dark"] .page-associations .offre-card .offre-num{color:var(--accent-ink,var(--releve-a2a2a2)) !important}

body.page-associations [style*="rgba(245,158,11,0.15)"][style*="border-radius:var(--r-pill)"]{color:var(--accent)}

[data-theme="dark"] .cadre-resp{background:var(--releve-161616) !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,var(--releve-171717) 0%,rgba(126,177,245,0.06) 50%,var(--releve-171717) 100%) !important}

[data-theme="dark"] .finance-card p{color:var(--releve-d4d4d4)}

[data-theme="dark"] .finance-tag{color:var(--releve-a2a2a2)}

[data-theme="dark"] .finance-extras{background:var(--releve-292929);border-color:var(--releve-545454)}

[data-theme="dark"] .finance-extras-head{color:var(--releve-e7e7e7)}

[data-theme="dark"] .fex-title{color:var(--releve-e7e7e7)}

[data-theme="dark"] .finance-extras p{color:var(--releve-a2a2a2)}

.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); }
[data-theme="dark"] .breadcrumb-sep { color: var(--releve-a2a2a2); }

[data-theme="dark"] .breadcrumb-current { color: var(--releve-e7e7e7); }

.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:var(--accent);font-weight:800;font-size:1rem}
.offre-price > strong{color:var(--accent-ink,var(--accent))}

/* Service priced case by case: instead of a blunt « sur devis », state
   WHAT the price depends on. The amount is still missing, the details are not. Sits below a
   price (offer card) as it would in a contact-information row. */
.prix-selon{display:block;margin-top:0.3rem;font-size:0.78rem;font-weight:500;line-height:1.5;color:var(--slate);letter-spacing:0;text-transform:none}
.prix-selon strong{color:var(--navy);font-weight:600;font-size:inherit}

/* Service priced case by case: instead of a blunt « sur devis », state
   WHAT the price depends on. The amount is still missing, the details are not. Sits below a
   price (offer card) as it would in a contact-information row. */
.prix-selon{display:block;margin-top:0.3rem;font-size:0.78rem;font-weight:500;line-height:1.5;color:var(--slate);letter-spacing:0;text-transform:none}
.prix-selon strong{color:var(--navy);font-weight:600;font-size:inherit}

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: var(--releve-292929) !important;
}

[data-theme="dark"] .advantage-grid > div > div:last-child > div:first-child {
  color: var(--accent-ink,var(--releve-7eb1f5)) !important;
}

[data-theme="dark"] .advantage-grid > div > div:last-child > div:last-child {
  color: var(--releve-a2a2a2) !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 — 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(--accent-ink,var(--releve-737373)) !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: var(--releve-e7e7e7) !important; border-color: var(--releve-404040) !important; }
[data-theme="dark"] .nav-mobile a.nav-mobile-cta { background: var(--releve-6b6b6b) !important; color: white !important; }

/* ── Panel 3 highlighted — layout with a centred badge ── */
.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 {
  /* The background is set further down (accent-ink, contrast): same selector, same
     priority, later in the stylesheet — declaring it here would never paint. */
  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: var(--accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(219,39,119,0.25);
}

/* ── 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.78rem;
  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: var(--releve-60a5fa);
  font-weight: 700;
}
.footer-links a.active:hover {
  color: var(--releve-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; }
}

/* ── Unified footer (single source: 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 1fr; }
/* Identity + four link columns: five cells. They no longer fit on
   one line below 1150 px — the identity then takes the full width and the links
   fall into three columns, then two (900 px), then one (700 px). */
@media (max-width: 1150px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer .footer-identity { grid-column: 1 / -1; }
}
/* Bottom bar: a row of legal links, then the fine print + the admin link. */
.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: var(--releve-ffffff); }
.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-identity-credit a { color: rgba(255,255,255,0.78); text-decoration: underline; text-underline-offset: 2px; }
.footer-identity-credit a:hover { color: var(--releve-ffffff); }

/* ── Driving school sales section ── */
.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; }
}

/* ── Categories taught (5 columns) ── */
.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; }
}

/* ── Cost comparison, employee versus self-employed ── */
@media (max-width: 800px) {
  .cost-totals { grid-template-columns: 1fr !important; }
  .cost-details { grid-template-columns: minmax(0,1fr) !important; }
  .cost-details > div { min-width: 0; }
  body.comp .compo-table tbody th[scope="row"] { white-space: normal; }
}

/* ── 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 — targeted improvements
   Fixes ' light-on-light ' conflicts caused by backgrounds
   hard-coded pastels, and gives the tiles more relief.
   ═══════════════════════════════════════════════════════════ */

/* Sector cards (Who I work with): slightly lighter than the section
   so that they stand out visually in dark mode */
[data-theme="dark"] .cibles-grid > a[style*="background:var(--white)"] {
  background: var(--releve-333333) !important;
  border-color: var(--releve-4e4e4e) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}

/* The "Découvrir l'offre →" links on these cards: brighter colours in dark mode */
[data-theme="dark"] .cibles-grid a span[style*="color:#6b6b6b"] { color: var(--releve-c1c1c1) !important; }
[data-theme="dark"] .cibles-grid a span[style*="color:var(--navy)"] { color: var(--releve-ededed) !important; }

/* Pastel boxes on a light background (Offre exclusive Liberty Rider, and so on):
   replace with a tinted dark background + bright text to remain readable */

/* Sector tags (chips) on partner cards: match dark mode
   while keeping a softened pastel background and brighter text */

/* Card for a partnership to come — adaptive gradient */
[data-theme="dark"] div[style*="linear-gradient(180deg,var(--white)"][style*="border:1.5px dashed"] {
  background: linear-gradient(180deg,var(--releve-272727) 0%,var(--releve-353535) 100%) !important;
}

/* Process: step numbers — keep the pastel backgrounds but darken the text
   to preserve readability */
[data-theme="dark"] .step-num[style*="background:linear-gradient"] {
  background: rgba(126,177,245,0.18) !important;
  color: var(--releve-c1c1c1) !important;
}

/* Dark newsletter: the section already has --navy bg, so make sure the form
   stays readable (already handled by the existing rules) */


/* ═══════════════════════════════════════════════════════════
   DARK MODE — further fixes (round 2)
   ═══════════════════════════════════════════════════════════ */

/* 1) The « Formateur indépendant - Val d'Europe » card (.about-card)
   Fault: .about-card carries `color:var(--white)`, which turns dark in dark mode
   → the name became invisible on a dark background. Light text is forced. */
[data-theme="dark"] .about-card { background: var(--releve-272727) !important; color: var(--releve-ededed) !important; }
[data-theme="dark"] .about-card .about-name { color: var(--releve-ededed); }
[data-theme="dark"] .about-card .about-avatar { background: rgba(126,177,245,0.18); color: var(--releve-ededed); }

/* 2) Sector card icons (Who I work with):
   In light mode, a pale pastel background + a coloured stroke. In dark, it switches to a
   translucent + bright stroke to match the other tiles. */
/* Driving schools — purple badge (driving-school accent), aligned with the others. */

/* 3) « Secteurs » dropdown icons in the navbar:
   Same logic — consistent translucent backgrounds in dark mode. */

/* ═══════════════════════════════════════════════════════════
   DARK MODE — round 3 fixes: the .offre-* elements and the scroll-top button
   ═══════════════════════════════════════════════════════════ */

/* Panel 3 highlighted: .offre-num and .offre-icon carry background:var(--navy)
   inline (turns light in dark mode) with color:white (stays white) → white on light
   is invisible. Force an OPAQUE deep blue so the elements stand out
   as distinct « puces » above the card (whose background is a very light
   blue in 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: var(--releve-6b6b6b) !important;
  color: var(--releve-ffffff) !important;
}

/* Offer pictograms with translucent backgrounds in dark mode: pastel backgrounds
   (--blue-l, --accent-soft, --ok-soft, etc.) become too transparent for
   good contrast with the light number colors. One solution:
   contrasting opaque background + white for every case. */

/* Cas 1: background:var(--blue-l) + color:var(--blue) (entreprises, collectivites) */
[data-theme="dark"] .offre-card .offre-icon[style*="background:var(--blue-l)"] {
  background: var(--releve-4a5568) !important;
  color: var(--releve-ffffff) !important;
}

/* Cas 2: background:var(--accent-soft) + color:var(--accent) ou color:5a6b8c
   (associations, ecoles-de-conduite, particuliers) */
[data-theme="dark"] .offre-card .offre-icon[style*="background:var(--accent-soft)"] {
  background: var(--releve-4a5568) !important;
  color: var(--releve-ffffff) !important;
}

/* Cas 3: background:var(--ok-soft) + color:var(--ok) (associations) */
[data-theme="dark"] .offre-card .offre-icon[style*="background:var(--ok-soft)"] {
  background: var(--releve-4a5568) !important;
  color: var(--releve-ffffff) !important;
}

/* Panels 1 and 2 of the businesses page: the badge carries inline
   background:var(--blue-l);color:var(--blue). On this page, --blue-l becomes
   --corail-200 and --blue is --pub-entreprises-ink, which also becomes
   --corail-200 in dark mode: stroke and background become the SAME color and the
   pictogram disappears (measured ratio 1.00). Only the one variable is redefined, the
   background, on the badge itself, so the coral ink keeps a dark background
   beneath it. No !important: the inline style paints background, it does not
   not define --blue-l. */
[data-theme="dark"] body.page-entreprises .offre-card .offre-icon {
  --blue-l: var(--corail-900);
}

/* The same collapse affects two other badges on the page, set inline without a
   class (a 32 px pictogram on --blue-l, measured at 1.00, and a 44 px one on
   --blue-ll, measured at 1.35). Same cause, same fix, limited to containers that
   carry a stroke: a LIGHT-mode pale background must not remain beneath a DARK-mode
   ink. Page text is untouched; only elements containing an svg are affected. */
[data-theme="dark"] body.page-entreprises [style*="background:var(--blue-l"]:has(> svg) {
  --blue-l: var(--corail-900);
  --blue-ll: var(--corail-900);
}

/* « Retour en haut » button (scroll-top) in dark theme: deep blue, flat. */
[data-theme="dark"] #scroll-top {
  background-color: var(--releve-6b6b6b) !important;
  color: var(--releve-ffffff) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — round 4 fixes: ecological transition (local authorities)
   ═══════════════════════════════════════════════════════════ */

/* transition-ecologique section: the hard-coded var(--ok-soft) green band in the middle
   from the gradient stands out too strongly on a dark background. Switch to a subtle green tint. */
[data-theme="dark"] section#transition-ecologique {
  background: linear-gradient(180deg, var(--white) 0%, rgba(74,222,128,0.05) 50%, var(--white) 100%) !important;
}

/* « Vos obligations légales » block: pale green gradient → translucent */
/* The h3 title and the intro paragraph of the block */
/* The 3 white cards nested inside the obligations block */
/* 28x28 pale green mini icons in the obligations cards */

/* « Pourquoi cette expertise est légitime » tile: pale blue gradient + text
   var(--navy), which would become invisible on a light background in dark mode.
   → translucent blue + light text. */

/* ═══════════════════════════════════════════════════════════
   DARK MODE — round 5 fix: the CDG & CHSCT tile (local authorities)
   ═══════════════════════════════════════════════════════════ */
/* Pastel green block with a green left border → translucent in dark mode
   to stay integrated with the rest of the palette. */

/* ═══════════════════════════════════════════════════════════
   DARK MODE — round 6 fix: highlighted offre-card with a hard-coded pastel background
   ═══════════════════════════════════════════════════════════ */
/* individuals.html: panel 2, pastel pink var(--accent-soft) + var(--accent) border
   driving-schools.html: panel 3, pastel violet faf5ff + var(--accent) border
   The text (h3, offre-desc, and so on) is adapted in dark mode by the .offre-card rules
   existing ones → but the pastel background stays light = light text on light. */

/* ═══════════════════════════════════════════════════════════
   DARK MODE — round 7 fix: the pink obligation-box override (individuals)
   ═══════════════════════════════════════════════════════════ */
/* individuals.html: .obligation-box overridden with a hard-coded pastel pink background
   → in dark mode the background stays pale pink and the var(--slate)/var(--navy) text
   turns light = invisible. It switches to translucent pink. */
/* 3 targeted attributes → specificity (0,0,3,0), above the generic "keep-dark" rule
   generic [style*="background:fdf2f8"] (0,0,2,0), which would otherwise force
   DARK pink text that is unreadable: here the background is dark translucent, so the text must be light. */

/* ═══════════════════════════════════════════════════════════
   DARK MODE — round 8 fixes: specific to the driving schools page
   ═══════════════════════════════════════════════════════════ */

/* 1) The « Nouveau · Au-delà de la formation » banner:
   Pastel amber→orange→red gradient with var(--navy)/var(--slate) text
   which turns light in dark mode → invisible.
   Note: target through `section > div > a[href]` (not through the contents of
   the style attribute) because the JS hover changes the inline style and the browser
   serializes hex values as rgb() — a [style*="fef3c7"] selector would break
   on hover. The DOM structure is stable. */
[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: var(--releve-ededed) !important; }
[data-theme="dark"] section > div > a[href="#commercial"] div[style*="color:var(--slate)"] { color: var(--releve-d4d4d4) !important; }
/* White icon container at the left of the banner */
[data-theme="dark"] section > div > a[href="#commercial"] > div:first-child {
  background: rgba(251,176,116,0.18) !important;
  color: var(--releve-fbb074) !important;
}
/* Arrow → at the end of the banner */
[data-theme="dark"] section > div > a[href="#commercial"] > div:last-child {
  color: var(--releve-fbb074) !important;
}

/* 2) The « Ce qui n'apparaît jamais sur ma facture » tile:
   Pastel violet gradient + nested white cards. */
/* The white cards in .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:#737373"] {
  color: var(--releve-a7a7a7) !important;
}

/* 3 & 4) The « Salarié CDI » and « Formateur indépendant » tiles in .cost-totals:
   Use positional selectors (:nth-child) instead of matching the
   contents of the style attribute (which the
   browser rewrites). More robust. */

/* Permanent employee (1st tile) — pastel red gradient */
[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;
}

/* Independent instructor (2nd tile) — pastel green gradient */
[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;
}

/* Text of both tiles: amounts (var(--navy)) and captions (var(--slate))
   must be bright to remain readable on the translucent background. */
[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: var(--releve-ededed) !important;
}
[data-theme="dark"] .cost-totals > div div[style*="color:var(--slate)"],
[data-theme="dark"] .cost-totals #cout-indep-jours {
  color: var(--releve-d4d4d4) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — round 9 fix: the « Honnêteté intellectuelle » tile
   ═══════════════════════════════════════════════════════════ */
/* Very translucent violet background + var(--accent) text (dark violet) =
   unreadable in dark mode. Lighten the text so it is readable. */

/* ═══════════════════════════════════════════════════════════
   DARK MODE — round 10 fix: the Independent instructor detail tile
   ═══════════════════════════════════════════════════════════ */
/* The detailed tile (table with Daily rate, Social contributions,
   Health insurance, Continuing education, Equipment, Annual total) had a gradient
   var(--ok-soft) → var(--white) which gave a pale green top in dark mode (unreadable),
   and a dark bottom. + the Annual total row has a hardcoded var(--ok-soft) background that is 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;
}
/* The "Total annuel" row — hard-coded var(--ok-soft) background → translucent green */
[data-theme="dark"] .cost-details > div:nth-child(2) tbody tr:last-child {
  background: rgba(74,222,128,0.14) !important;
}
/* Dark green colours (var(--ok)) → bright pale green so they stay readable
   on the translucent background */
[data-theme="dark"] .cost-details > div:nth-child(2) [id="cout-indep-total-detail"] {
  color: var(--releve-4ade80) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — round 11 fix: the « Total annuel » row on the employee side
   ═══════════════════════════════════════════════════════════ */
/* “Total annuel” row in the Salarié table: hardcoded fef2f2 background
   (pastel red), which stays light in dark mode. */
[data-theme="dark"] .cost-details > div:nth-child(1) tbody tr:last-child {
  background: rgba(248,113,113,0.14) !important;
}
/* The dark red total (dc2626) must also be lightened to remain
   readable on the translucent red background */
[data-theme="dark"] .cost-details > div:nth-child(1) [id="cout-sal-total-detail"] {
  color: var(--releve-fca5a5) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIX round 12: footer opacity alignment
   ═══════════════════════════════════════════════════════════ */
/* In light mode, the footer strongly contrasts with the page (dark vs white) →
   low-emphasis text looks very subtle. In dark mode, the contrast is
   lower → the same opacity values look more visible. Reduce them to
   preserve the sense of "discretion". */
[data-theme="dark"] .footer-identity-credit {
  color: rgba(255,255,255,0.62) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — round 13 fix: the last contrasts (audit across 22 pages)
   ═══════════════════════════════════════════════════════════ */

/* Action buttons with an INLINE saturated background (sector accent). In dark mode, .btn-submit /
   .btn-primary switches to dark text (171717) on a light blue background — but when
   a saturated background is forced inline (for example var(--accent), var(--accent)), this dark text does not
   contrast any more. White text is restored (a saturated background + white already passes AA in light mode). */
[data-theme="dark"] .btn-submit[style*="background:#"],
[data-theme="dark"] .btn-primary[style*="background:#"] { color: var(--releve-ffffff) !important; }

/* companies: CTA with inline background:var(--blue). In dark mode, --blue is light →
   white text becomes unreadable. Dark text on light blue (and the JS hover that
   switches to light var(--navy) stays readable with dark text). */
[data-theme="dark"] a[style*="background:var(--blue)"] { color: var(--releve-161616) !important; }

/* product: white button in the CTA band. In dark mode, color:var(--navy) becomes light
   on the button's white background → force dark text. */
[data-theme="dark"] .page-produit .cta-band .btn-primary { color: var(--releve-161616) !important; }

/* security-road: the « Temps de réaction » widget. The idle state (.rt-idle) keeps a
   fixed dark background to keep the text white. */
[data-theme="dark"] .rt-idle { background: var(--releve-292929) !important; }
/* Segmented control (Apple) in dark mode: the track = var(--off) (353535) is lighter
   than var(--white) (272727), so the active thumb would recede instead of rising.
   Force it to a raised shade lighter than the track + light text. */
[data-theme="dark"] .da-opt.da-on { background: var(--releve-46557d) !important; color: var(--releve-ededed) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEASONAL AMBIENCE (year-round)
   Subtle decorative background shapes whose shade changes with the season.
   Applied through `body.season-X` (the class is set by seasonal.js).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ambience container: 2 fixed blobs (top right + bottom left), placed
   behind the content and insensitive to clicks. */
body[class*="season-"]::before,
body[class*="season-"]::after {
  content: '';
  position: fixed;
  /* THE LAYER EXTENDS FAR BEYOND THE VIEWPORT. As long as it is screen-sized,
     the slightest translation brings its edge into view — and an entering edge is the circle
     we see. Here it stays offscreen at every position. */
  inset: -45%;
  width: auto; height: auto;
  border-radius: 0;
  pointer-events: none;
  z-index: 0;
  transition: background 1s ease;
  will-change: transform;
}
/* Two layers that are NEVER synchronized: coprime durations, opposite
   directions, and a slow rotation on one. The combined pattern does not repeat at
   the scale of a single visit. */
body[class*="season-"]::before { animation: ambianceA 37s ease-in-out infinite alternate; }
body[class*="season-"]::after  { animation: ambianceB 53s ease-in-out infinite alternate; }
@keyframes ambianceA {
  0%   { transform: translate3d(-18%, -12%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(10%, 14%, 0) scale(1.14) rotate(4deg); }
  100% { transform: translate3d(16%, -8%, 0) scale(1.08) rotate(-3deg); }
}
@keyframes ambianceB {
  0%   { transform: translate3d(14%, 10%, 0) scale(1.12); }
  50%  { transform: translate3d(-12%, -6%, 0) scale(1.04); }
  100% { transform: translate3d(-16%, 12%, 0) scale(1.16); }
}
/* An atmosphere must never be forced on someone who requested less motion. */
@media (prefers-reduced-motion: reduce) {
  body[class*="season-"]::before,
  body[class*="season-"]::after { animation: none; }
}

/* Disable the pseudo-element in admin so it does not interfere with the 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() is of little use here, but prevents any effect on admin */
}

/* ── SPRING: pastel pinks + tender greens (very diffuse) ─────────────────── */
body.season-spring::before { background: radial-gradient(58% 82% at 72% 62%, rgba(244,114,182,0.0500) 0%, rgba(244,114,182,0.0360) 24%, rgba(244,114,182,0.0210) 46%, rgba(244,114,182,0.0100) 66%, rgba(244,114,182,0.0035) 82%, rgba(244,114,182,0.0000) 100%); }
body.season-spring::after  { background: radial-gradient(86% 54% at 40% 74%, rgba(134,239,172,0.0500) 0%, rgba(134,239,172,0.0360) 24%, rgba(134,239,172,0.0210) 46%, rgba(134,239,172,0.0100) 66%, rgba(134,239,172,0.0035) 82%, rgba(134,239,172,0.0000) 100%); }

/* ── SUMMER: warm golds + ambers ────────────────────────────────────────── */
body.season-summer::before { background: radial-gradient(64% 76% at 66% 26%, rgba(251,191,36,0.0600) 0%, rgba(251,191,36,0.0432) 24%, rgba(251,191,36,0.0252) 46%, rgba(251,191,36,0.0120) 66%, rgba(251,191,36,0.0042) 82%, rgba(251,191,36,0.0000) 100%); }
body.season-summer::after  { background: radial-gradient(72% 48% at 28% 34%, rgba(251,146,60,0.0500) 0%, rgba(251,146,60,0.0360) 24%, rgba(251,146,60,0.0210) 46%, rgba(251,146,60,0.0100) 66%, rgba(251,146,60,0.0035) 82%, rgba(251,146,60,0.0000) 100%); }

/* ── AUTUMN: rust oranges + ochres ──────────────────────────────────────────── */
body.season-autumn::before { background: radial-gradient(58% 82% at 72% 62%, rgba(234,88,12,0.0500) 0%, rgba(234,88,12,0.0360) 24%, rgba(234,88,12,0.0210) 46%, rgba(234,88,12,0.0100) 66%, rgba(234,88,12,0.0035) 82%, rgba(234,88,12,0.0000) 100%); }
body.season-autumn::after  { background: radial-gradient(86% 54% at 40% 74%, rgba(180,83,9,0.0500) 0%, rgba(180,83,9,0.0360) 24%, rgba(180,83,9,0.0210) 46%, rgba(180,83,9,0.0100) 66%, rgba(180,83,9,0.0035) 82%, rgba(180,83,9,0.0000) 100%); }

/* ── WINTER: iced blues + silvered slate ────────────────────────────────── */
body.season-winter::before { background: radial-gradient(64% 76% at 66% 26%, rgba(223, 223, 223,0.0700) 0%, rgba(223, 223, 223,0.0504) 24%, rgba(223, 223, 223,0.0294) 46%, rgba(223, 223, 223,0.0140) 66%, rgba(223, 223, 223,0.0049) 82%, rgba(223, 223, 223,0.0000) 100%); }
body.season-winter::after  { background: radial-gradient(72% 48% at 28% 34%, rgba(162, 162, 162,0.0500) 0%, rgba(162, 162, 162,0.0360) 24%, rgba(162, 162, 162,0.0210) 46%, rgba(162, 162, 162,0.0100) 66%, rgba(162, 162, 162,0.0035) 82%, rgba(162, 162, 162,0.0000) 100%); }

/* Dark mode: opacity reduced further (dark contrast amplifies perception) */
[data-theme="dark"] body.season-spring::before { background: radial-gradient(58% 82% at 72% 62%, rgba(244,114,182,0.0400) 0%, rgba(244,114,182,0.0288) 24%, rgba(244,114,182,0.0168) 46%, rgba(244,114,182,0.0080) 66%, rgba(244,114,182,0.0028) 82%, rgba(244,114,182,0.0000) 100%); }
[data-theme="dark"] body.season-spring::after  { background: radial-gradient(86% 54% at 40% 74%, rgba(134,239,172,0.0300) 0%, rgba(134,239,172,0.0216) 24%, rgba(134,239,172,0.0126) 46%, rgba(134,239,172,0.0060) 66%, rgba(134,239,172,0.0021) 82%, rgba(134,239,172,0.0000) 100%); }
[data-theme="dark"] body.season-summer::before { background: radial-gradient(64% 76% at 66% 26%, rgba(251,191,36,0.0400) 0%, rgba(251,191,36,0.0288) 24%, rgba(251,191,36,0.0168) 46%, rgba(251,191,36,0.0080) 66%, rgba(251,191,36,0.0028) 82%, rgba(251,191,36,0.0000) 100%); }
[data-theme="dark"] body.season-summer::after  { background: radial-gradient(72% 48% at 28% 34%, rgba(251,146,60,0.0300) 0%, rgba(251,146,60,0.0216) 24%, rgba(251,146,60,0.0126) 46%, rgba(251,146,60,0.0060) 66%, rgba(251,146,60,0.0021) 82%, rgba(251,146,60,0.0000) 100%); }
[data-theme="dark"] body.season-autumn::before { background: radial-gradient(58% 82% at 72% 62%, rgba(234,88,12,0.0400) 0%, rgba(234,88,12,0.0288) 24%, rgba(234,88,12,0.0168) 46%, rgba(234,88,12,0.0080) 66%, rgba(234,88,12,0.0028) 82%, rgba(234,88,12,0.0000) 100%); }
[data-theme="dark"] body.season-autumn::after  { background: radial-gradient(86% 54% at 40% 74%, rgba(180,83,9,0.0400) 0%, rgba(180,83,9,0.0288) 24%, rgba(180,83,9,0.0168) 46%, rgba(180,83,9,0.0080) 66%, rgba(180,83,9,0.0028) 82%, rgba(180,83,9,0.0000) 100%); }
[data-theme="dark"] body.season-winter::before { background: radial-gradient(64% 76% at 66% 26%, rgba(223, 223, 223,0.0400) 0%, rgba(223, 223, 223,0.0288) 24%, rgba(223, 223, 223,0.0168) 46%, rgba(223, 223, 223,0.0080) 66%, rgba(223, 223, 223,0.0028) 82%, rgba(223, 223, 223,0.0000) 100%); }
[data-theme="dark"] body.season-winter::after  { background: radial-gradient(72% 48% at 28% 34%, rgba(162, 162, 162,0.0300) 0%, rgba(162, 162, 162,0.0216) 24%, rgba(162, 162, 162,0.0126) 46%, rgba(162, 162, 162,0.0060) 66%, rgba(162, 162, 162,0.0021) 82%, rgba(162, 162, 162,0.0000) 100%); }

/* ═══════════════════════════════════════════════════════════════════════════
   DECORATIVE CIRCLES IN SECTIONS — repainted in seasonal colors
   Every absolute div with a radial-gradient + pointer-events:none is targeted
   (the « Formes décoratives » pattern scattered across the pages).
   The original colors (blue, orange, green…) are replaced with
   the current season's shades.
   ═══════════════════════════════════════════════════════════════════════════ */

/* "primaire" color — for the first decorative circle in each 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(58% 82% at 72% 62%, rgba(244,114,182,0.0500) 0%, rgba(244,114,182,0.0360) 24%, rgba(244,114,182,0.0210) 46%, rgba(244,114,182,0.0100) 66%, rgba(244,114,182,0.0035) 82%, rgba(244,114,182,0.0000) 100%) !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(86% 54% at 40% 74%, rgba(251,191,36,0.0600) 0%, rgba(251,191,36,0.0432) 24%, rgba(251,191,36,0.0252) 46%, rgba(251,191,36,0.0120) 66%, rgba(251,191,36,0.0042) 82%, rgba(251,191,36,0.0000) 100%) !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(64% 76% at 66% 26%, rgba(234,88,12,0.0500) 0%, rgba(234,88,12,0.0360) 24%, rgba(234,88,12,0.0210) 46%, rgba(234,88,12,0.0100) 66%, rgba(234,88,12,0.0035) 82%, rgba(234,88,12,0.0000) 100%) !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(72% 48% at 28% 34%, rgba(223, 223, 223,0.0700) 0%, rgba(223, 223, 223,0.0504) 24%, rgba(223, 223, 223,0.0294) 46%, rgba(223, 223, 223,0.0140) 66%, rgba(223, 223, 223,0.0049) 82%, rgba(223, 223, 223,0.0000) 100%) !important;
}

/* "secondaire" color — for the second circle (often at the bottom/left) */
body.season-spring div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
  background: radial-gradient(58% 82% at 72% 62%, rgba(134,239,172,0.0500) 0%, rgba(134,239,172,0.0360) 24%, rgba(134,239,172,0.0210) 46%, rgba(134,239,172,0.0100) 66%, rgba(134,239,172,0.0035) 82%, rgba(134,239,172,0.0000) 100%) !important;
}
body.season-summer div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
  background: radial-gradient(86% 54% at 40% 74%, rgba(251,146,60,0.0500) 0%, rgba(251,146,60,0.0360) 24%, rgba(251,146,60,0.0210) 46%, rgba(251,146,60,0.0100) 66%, rgba(251,146,60,0.0035) 82%, rgba(251,146,60,0.0000) 100%) !important;
}
body.season-autumn div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
  background: radial-gradient(64% 76% at 66% 26%, rgba(180,83,9,0.0500) 0%, rgba(180,83,9,0.0360) 24%, rgba(180,83,9,0.0210) 46%, rgba(180,83,9,0.0100) 66%, rgba(180,83,9,0.0035) 82%, rgba(180,83,9,0.0000) 100%) !important;
}
body.season-winter div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
  background: radial-gradient(72% 48% at 28% 34%, rgba(162, 162, 162,0.0500) 0%, rgba(162, 162, 162,0.0360) 24%, rgba(162, 162, 162,0.0210) 46%, rgba(162, 162, 162,0.0100) 66%, rgba(162, 162, 162,0.0035) 82%, rgba(162, 162, 162,0.0000) 100%) !important;
}

/* Dark mode: reduced opacity on decorative circles too */
[data-theme="dark"] body[class*="season-"] div[style*="radial-gradient"][style*="pointer-events:none"] {
  opacity: 0.7;
}

/* On mobile, reduce blob size so they do not take over */
@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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMALL DECORATIVE HERO RING → very subtle seasonal icon
   Targets the 160x160 div with border-radius:50% positioned at top:40% of heroes.
   The border is removed and replaced with a seasonal SVG icon as a watermark.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SPRING: rising curve (growth) ─────────────────────────────────────────── */

/* ── SUMMER: full disc (fullness, warmth) ───────────────────────────────── */

/* ── AUTUMN: falling ripple (wind, fall) ────────────────────────────────── */

/* ── WINTER: hexagon (crystal, cold geometry) ───────────────────────────── */

/* Dark mode: invert gray to white so it remains visible on a dark background
   background, and with a still lower opacity */

/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — ACCESSIBILITY AND ROBUSTNESS
   The glass surfaces of the site: nav, dropdown, mobile menu, hero card,
   secondary buttons, resp-card. Three safeguards:
   1. reduced transparency (system setting) → frosting off, backgrounds almost opaque;
   2. increased contrast → clear-cut borders;
   3. browser without backdrop-filter → opaque fallback.
   ═══════════════════════════════════════════════════════════════════════════ */

@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(23, 23, 23,0.96) !important; }
  [data-theme="dark"] .nav-mobile { background: rgba(23, 23, 23,0.98) !important; }
  [data-theme="dark"] .nav-dropdown-inner { background: rgba(41, 41, 41,0.98) !important; }
  [data-theme="dark"] .hero-card,
  [data-theme="dark"] .btn-outline,
  [data-theme="dark"] #nav-login-desktop { background: var(--releve-292929) !important; }
  /* Refraction layers disabled with the rest of the glass. */
  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); }
  .hero-card, .btn-outline, #nav-login-desktop { background: var(--off); }
  [data-theme="dark"] nav { background: rgba(23, 23, 23,0.96); }
  [data-theme="dark"] .nav-mobile { background: rgba(23, 23, 23,0.98); }
  [data-theme="dark"] .hero-card,
  [data-theme="dark"] .btn-outline,
  [data-theme="dark"] #nav-login-desktop { background: var(--releve-292929); }
}


/* === LIQUID MOTION (parity with the app) ===================================
   1. GEL: controls compress on press, then spring back.
   2. MOVING LIGHT: a glint sweeps across the nav while scrolling
      (animation-timeline: scroll, Chromium; static elsewhere).
   3. Spring hover effects on cards (existing transform transitions). */
.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; }

/* Nav glint on scroll: ::before layer between refraction (::after) and
   content — the highlight follows scrolling, with no idle animation. */
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; } }

/* Card hover: same spring curve as the app on the existing transform. */
.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; }
}
@media (prefers-reduced-transparency: reduce) {
  nav::before { display: none !important; }
}


/* === OVERALL FLUIDITY =======================================================
   1. Cross-fade between pages (multi-page View Transitions, recent Chromium/Safari;
      normal navigation elsewhere). The nav, being named, appears persistent.
   2. Hero: cascading entrance on load.
   3. Reveal on scroll: CSS states driven by chrome.js (IntersectionObserver).
      The initial hidden state is set ONLY by JS — without JS, everything is visible.
   4. Smooth scrolling for anchors. */
/* « Premium » page transition (View Transitions API).
   The previous WHITE flash came from the white splash shown between pages → fixed
   (splash once per session, see script.js). Here: the new page appears
   with a SOFT FADE + slight zoom OVER the old one (which stays opaque underneath) → no
   white gap, muted transition. The menu keeps its identity (no flashing).
   Browsers without support: instant navigation (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; }

/* Reveal on scroll (classes set by chrome.js). */
.lg-reveal { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.lg-reveal-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22,0.61,0.36,1), filter 0.55s ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto; }
  /* Simple fade-ins, without translation (lively but calm interface). */
  .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; filter: none; }
  .lg-reveal-in { transition: none; }
}
@keyframes heroFadeOnly { from { opacity: 0; } to { opacity: 1; } }

/* Micro send confirmation (Apple): the button turns green with a check mark,
   a small reassuring pulse, then it returns to its initial state (handled in JS). */
.btn-sent, .btn-sent:hover {
  background: var(--releve-2f9e54) !important; color: var(--releve-ffffff) !important;
  animation: btnSentPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes btnSentPop { 0% { transform: scale(0.96); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .btn-sent { animation: none; } }

/* === Added touches: animated nav underline + hand-drawn accent on the hero keyword.
   (Animated counters are handled by chrome.js; the hero + halos already exist.) === */
.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); }
}

/* === « Route » decoration: the separator that threads the brand ===
   A subtle road line whose dashes move gently (roadway that
   unrolls). Set by chrome.js at a natural break in the page. Decorative, low
   opacity, faded out at the edges. Animation disabled when « 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, var(--releve-000000) 18%, var(--releve-000000) 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--releve-000000) 18%, var(--releve-000000) 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; }
}

/* === Hover micro-interaction on content cards (subtle, Apple spirit) ===
   A slight lift + a soft shadow. Only on devices with a real hover, and
   disabled when « mouvement réduit ». Does not affect cards with hover handling
   of their own (inline styles): those keep driving their own 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);
    /* page-accent-tinted border → each world keeps its color on hover */
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  }
  /* In dark mode a black shadow alone lacks life: add a thin edge line + a
     very diffuse halo, both in the accent color → the card « 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; }
}

/* === Interactive effects (cursor / scroll) ===
   Set by chrome.js. Fine pointer only for halo/elevation; everything is disabled
   under « mouvement réduit » (see chrome.js + the rules below). */

/* Reading progress bar (thin « route » line at the top). */
.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 */


/* === Journey timeline: connector that fills while scrolling (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; }
}

/* === Hero background colors moved by the mouse (parallax) ===
   Two desaturated blue halos; the cursor shifts their positions in opposite directions
   (variables --hx/--hy set by chrome.js) → the colors “move” with the
   mouse. Without a pointer/JS, they stay at their default positions. */
.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);
}
/* Fallback if color-mix is unsupported: keep desaturated blue halos (never a « plat » hero). */
@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; } }

/* === Icons that draw themselves on scroll (set in JS through .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; } }

/* === Confirmation animation when the form is submitted === */
#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(126,177,245,0); } 30%{ box-shadow:0 0 0 6px rgba(126,177,245,0.18); } 100%{ box-shadow:0 0 0 0 rgba(126,177,245,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; }
}

/* === Coverage area: grouped municipalities (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; }

/* === Service area map (real municipality outlines) === */
.zmap2-wrap { margin:1.75rem 0 0; }
.zmap2 { display:block; width:100%; height:auto; background:var(--releve-f2f2f2); border:1px solid var(--border); border-radius:16px; }
.zm-c { fill:var(--releve-dbdbdb); stroke:var(--releve-f2f2f2); stroke-width:2.5; stroke-linejoin:round; transition:fill 0.15s ease; outline:none; }
.zm-c:hover, .zm-c:focus { fill:var(--releve-a3a3a3); }
.zm-base { fill:var(--navy); }
.zm-l { font-family:var(--font),sans-serif; font-size:12px; fill:var(--releve-555555); text-anchor:middle; pointer-events:none; paint-order:stroke; stroke:var(--releve-f2f2f2); stroke-width:2.6px; stroke-linejoin:round; }
.zm-lbase { fill:var(--releve-ffffff); 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:var(--releve-171717); }
[data-theme="dark"] .zm-c { fill:var(--releve-292929); stroke:var(--releve-171717); }
[data-theme="dark"] .zm-c:hover, [data-theme="dark"] .zm-c:focus { fill:var(--releve-494949); }
[data-theme="dark"] .zm-base { fill:var(--releve-60a5fa); }
[data-theme="dark"] .zm-l { fill:var(--releve-d4d4d4); stroke:var(--releve-171717); }
[data-theme="dark"] .zm-lbase { fill:var(--releve-171717); }

/* === Content links: brand color, without default blue underline ===
   (the « nus » text links inherited the browser's underlined blue). Underlined
   only on hover in content areas. Links with a class — nav, buttons,
   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; }

/* === More colour: accent + section tint, per page ===
   The gray of alternating sections (--off) is tinted with the page accent → everything
   the site gains colour. The tint is limited to the light theme (the dark theme keeps
   its own --off). */
body.page-faq.page-formation { --accent:var(--lagon-800); --accent-soft:var(--lagon-50); --accent-ink:var(--lagon-800); }
/* The home page carries NO sector color: the five cards carry the
   (businesses blue, associations green, local authorities orange, individuals pink,
   driving-school cyan). The entrance remains warm neutral, otherwise it suggests
   that we are already in one of the rooms. */
body.page-accueil   { --accent:var(--sable-800);       --accent-soft:var(--sable-50);
                      --accent-ink:var(--sable-900); }
body.page-faq       { --accent:var(--orchidee-800);    --accent-soft:var(--orchidee-50); --accent-ink:var(--orchidee-800); }
body.page-metiers       { --accent:var(--framboise-500);--accent-soft:var(--framboise-50); }
body.page-questions     { --accent:var(--soleil-800);   --accent-soft:var(--soleil-50); --accent-ink:var(--soleil-800); }
body.page-financement   { --accent:var(--citron-800);   --accent-soft:var(--citron-50); --accent-ink:var(--citron-800); }
body.page-marche-public { --accent:var(--mangue-800);   --accent-soft:var(--mangue-50); --accent-ink:var(--mangue-800); }
body.page-produit       { --accent:var(--pub-entreprises); --accent-soft:var(--pub-entreprises-soft); --accent-ink:var(--pub-entreprises-ink); }
body.page-sentinelle    { --accent:var(--turquoise-800); --accent-soft:var(--turquoise-50); --accent-ink:var(--turquoise-800); }
body.page-glossaire { --accent:var(--turquoise-800); --accent-soft:var(--turquoise-50); --accent-ink:var(--turquoise-800); }
body.page-eco-conception { --accent:var(--menthe-800); --accent-soft:var(--menthe-50); --accent-ink:var(--menthe-800); }
body.page-poids-des-pages { --accent:var(--prairie-800); --accent-soft:var(--prairie-50); --accent-ink:var(--prairie-800); }
body.page-sitemap-page { --accent:var(--myrtille-800); --accent-soft:var(--myrtille-50); --accent-ink:var(--myrtille-800); }
body.page-recherche { --accent:var(--corail-800); --accent-soft:var(--corail-50); --accent-ink:var(--corail-800); }
body.page-quelle-formation { --accent:var(--framboise-800); --accent-soft:var(--framboise-50); --accent-ink:var(--framboise-800); }
body.page-a-propos,
body.page-a-propos { --accent:var(--orchidee-800); --accent-soft:var(--orchidee-50); --accent-ink:var(--orchidee-800); }
body.page-assistance { --accent:var(--violet-800); --accent-soft:var(--violet-50); --accent-ink:var(--violet-800); }
body.page-blog { --accent:var(--mangue-800); --accent-soft:var(--mangue-50); --accent-ink:var(--mangue-800); }
body.page-glossaire-gestion { --accent:var(--soleil-800); --accent-soft:var(--soleil-50); --accent-ink:var(--soleil-800); }
/* « Si ça s'arrête » — reversibility. The page had no shade of its own: it
   inherited the orchid that body.page-faq gives to 35 content pages at once.
   It takes turquoise, which belongs to no sector (companies coral,
   associations mint, local authorities mango, individuals raspberry, driving schools meadow)
   and which the site already uses for things that are kept and consulted. The veil moves from
   -50 to -100: at 0.10 saturation, -50 is visible but does not count as color,
   either to the eye or to the measurement. */
body.page-faq.page-si-ca-s-arrete { --accent:var(--turquoise-800); --accent-soft:var(--turquoise-100); --accent-ink:var(--turquoise-800); }
html:not([data-theme="dark"]) body.page-faq.page-si-ca-s-arrete { --off:var(--turquoise-50); }

/* « Financement » — same flaw as « Si ça s'arrête », one step lower. The page
   already declared citron (line 2472) but only applied it as citron-50: at 0.077
   saturation, this veil is visible but does not count as color, either to the eye or
   to the measurement, which only calls a pixel « coloré » above 0.18. Citron
   is naturally light: where turquoise-100 crosses the threshold (0.232), citron-100
   stays below it (0.155). It must go to -200 (0.300). -50 remains the
   sub-tile background. Citron belongs to no sector (companies coral,
   associations mint, local authorities mango, individuals raspberry, driving
   prairie), and it is one of the six palette families the site showed
   nowhere. Shade limited to the light theme: the dark theme has its own veils,
   set further down. */
html:not([data-theme="dark"]) body.page-financement { --accent-soft:var(--citron-200); }
/* With the veil raised to -200, the -800 ink no longer works: citron-800 on citron-200
   measures 4.47 against the required 4.5 — gaining color would cost readability. The ink
   drops to -900 (7.10). Defect found by qa/contrast.js, not by calculation. */
html:not([data-theme="dark"]) body.page-financement .section-tag { color:var(--citron-900); }
/* Same flaw, same form, another family: soleil-800 on its soleil-50 veil measures
   4.49 against the required 4.5. One hundredth is missing, and it is missing on SEVEN pages — the six
   questions and the management glossary. The ink drops to -900 (7.34). */
html:not([data-theme="dark"]) body.page-questions .section-tag,
html:not([data-theme="dark"]) body.page-glossaire-gestion .section-tag { color:var(--soleil-900); }
/* The same hundredth is missing from the LINKS placed on the same veil: --blue is soleil-800 on
   these pages and the closing boxes are soleil-50. The link drops to -900 too,
   otherwise we fix the label and leave the link just below the threshold. */
html:not([data-theme="dark"]) body.page-questions,
html:not([data-theme="dark"]) body.page-glossaire-gestion { --blue:var(--soleil-900); }

/* The « financement » page was rebuilt on the evening of 11/08: its badges, its
   steps and its state label now carry the classes fin-a / fin-b /
   fin-c, fin-step-n and fin-etat, declared in the page itself, and they
   take their shade from --accent, so from the citron set just above. The
   rules targeting voie-a/b/c, etape-num, etape-finale and etat-encours no longer
   matched any element: measured at 0 occurrences in financement.html.
   They are not carried over as-is.

   Only one is CARRIED OVER, because it holds a measurement the rebuilt page
   does not have: the first two badges use var(--accent) and var(--blue),
   which both render citron-800 on this page — two of three paths with the
   same color, and that color is the olive green excluded by the palette at the
   top of the file. The flat colors therefore use the middle of the range, where the
   palette puts its maximum chroma, from the most direct path to the most
   conditioned. The third keeps the dark shade intended by the page. The glyph is
   dark: the block renders the same in both themes. */
body.page-financement .rd-ico.fin-a { background:var(--citron-700); color:var(--sable-900); }
body.page-financement .rd-ico.fin-b { background:var(--citron-600); color:var(--sable-900); }
/* The journey drawn on the page names the same three paths with the same two
   tokens, so it blends together in the same way. */
body.page-financement .fin-visuel .v-a { fill:var(--citron-700); }
body.page-financement .fin-visuel .v-b { fill:var(--citron-600); }

/* In dark mode, the section badge, callout and call-to-action banner reused a
   generic blue: the same block did not carry the same shade across themes. The
   veils are composed from the name, not from copied components. */
[data-theme="dark"] body.page-financement .section-tag {
  background:color-mix(in srgb,var(--citron-500) 14%,transparent); color:var(--citron-300);
}
[data-theme="dark"] body.comp.page-financement .compo-callout {
  background:color-mix(in srgb,var(--citron-500) 10%,transparent);
  border-color:color-mix(in srgb,var(--citron-500) 24%,transparent);
  border-left-color:var(--citron-300);
}
[data-theme="dark"] body.comp.page-financement .compo-cta {
  background:color-mix(in srgb,var(--citron-500) 9%,transparent);
  border-color:color-mix(in srgb,var(--citron-500) 20%,transparent);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) :root, html:not([data-theme]) body { --accent-on:var(--releve-0b0b0b); }
  html:not([data-theme]) body.page-accueil { --accent:var(--sable-200); --accent-ink:var(--sable-100); }
  html:not([data-theme]) body.page-sentinelle,
  html:not([data-theme]) body.page-glossaire { --accent:var(--turquoise-300); --accent-ink:var(--turquoise-300); }
  html:not([data-theme]) body.page-faq.page-formation { --accent:var(--lagon-300); --accent-ink:var(--lagon-300); }
  html:not([data-theme]) body.page-faq,
  html:not([data-theme]) body.page-a-propos { --accent:var(--orchidee-300); --accent-ink:var(--orchidee-300); }
  html:not([data-theme]) body.page-assistance { --accent:var(--violet-300); --accent-ink:var(--violet-300); }
  html:not([data-theme]) body.page-eco-conception { --accent:var(--menthe-300); --accent-ink:var(--menthe-300); }
  html:not([data-theme]) body.page-poids-des-pages { --accent:var(--prairie-300); --accent-ink:var(--prairie-300); }
  html:not([data-theme]) body.page-sitemap-page { --accent:var(--myrtille-300); --accent-ink:var(--myrtille-300); }
  html:not([data-theme]) body.page-recherche { --accent:var(--corail-300); --accent-ink:var(--corail-300); }
  html:not([data-theme]) body.page-financement { --accent:var(--citron-300); --accent-ink:var(--citron-300); }
  html:not([data-theme]) body.page-marche-public,
  html:not([data-theme]) body.page-blog { --accent:var(--mangue-300); --accent-ink:var(--mangue-300); }
  html:not([data-theme]) body.page-quelle-formation { --accent:var(--framboise-300); --accent-ink:var(--framboise-300); }
  html:not([data-theme]) body.page-glossaire-gestion { --accent:var(--soleil-300); --accent-ink:var(--soleil-300); }
  html:not([data-theme]) body.page-questions { --accent:var(--soleil-300); --accent-ink:var(--soleil-300); }
  html:not([data-theme]) body.page-faq.page-si-ca-s-arrete { --accent:var(--turquoise-300); --accent-ink:var(--turquoise-300);
                                                             --accent-soft:color-mix(in srgb, var(--turquoise-300) 14%, transparent); }
}
[data-theme="dark"] body { --accent-on:var(--releve-0b0b0b); }
[data-theme="dark"] body.page-accueil { --accent:var(--sable-200); --accent-ink:var(--sable-100); }
[data-theme="dark"] body.page-sentinelle,
[data-theme="dark"] body.page-glossaire { --accent:var(--turquoise-300); --accent-ink:var(--turquoise-300); }
[data-theme="dark"] body.page-faq.page-formation { --accent:var(--lagon-300); --accent-ink:var(--lagon-300); }
[data-theme="dark"] body.page-faq,
[data-theme="dark"] body.page-a-propos { --accent:var(--orchidee-300); --accent-ink:var(--orchidee-300); }
[data-theme="dark"] body.page-assistance { --accent:var(--violet-300); --accent-ink:var(--violet-300); }
[data-theme="dark"] body.page-eco-conception { --accent:var(--menthe-300); --accent-ink:var(--menthe-300); }
[data-theme="dark"] body.page-poids-des-pages { --accent:var(--prairie-300); --accent-ink:var(--prairie-300); }
[data-theme="dark"] body.page-sitemap-page { --accent:var(--myrtille-300); --accent-ink:var(--myrtille-300); }
[data-theme="dark"] body.page-recherche { --accent:var(--corail-300); --accent-ink:var(--corail-300); }
[data-theme="dark"] body.page-financement { --accent:var(--citron-300); --accent-ink:var(--citron-300); }
[data-theme="dark"] body.page-marche-public,
[data-theme="dark"] body.page-blog { --accent:var(--mangue-300); --accent-ink:var(--mangue-300); }
[data-theme="dark"] body.page-quelle-formation { --accent:var(--framboise-300); --accent-ink:var(--framboise-300); }
[data-theme="dark"] body.page-glossaire-gestion { --accent:var(--soleil-300); --accent-ink:var(--soleil-300); }
[data-theme="dark"] body.page-questions { --accent:var(--soleil-300); --accent-ink:var(--soleil-300); }
/* --accent-soft is redefined above as blue for ALL dark mode: override it here
   so the page keeps its shade in both themes instead of changing it. */
[data-theme="dark"] body.page-faq.page-si-ca-s-arrete { --accent:var(--turquoise-300); --accent-ink:var(--turquoise-300);
                                                        --accent-soft:color-mix(in srgb, var(--turquoise-300) 14%, transparent); }
body.page-accueil,
body.page-faq,
body.page-formation,
body.page-produit,
body.page-sentinelle {
  --blue:var(--accent-ink,var(--accent));
  --blue-l:var(--accent);
  --blue-ll:var(--accent-soft);
}
body.comp:not([class*="page-"]) {
  --accent:var(--orchidee-500);
  --accent-soft:var(--orchidee-50);
  --accent-ink:var(--orchidee-800);
  --blue:var(--orchidee-800);
  --blue-l:var(--orchidee-100);
  --blue-ll:var(--orchidee-50);
  --off:var(--orchidee-50);
}
[data-theme="dark"] body.comp:not([class*="page-"]) {
  --accent:var(--orchidee-300);
  --accent-soft:color-mix(in srgb, var(--orchidee-900) 34%, transparent);
  --accent-ink:var(--orchidee-300);
  --blue:var(--orchidee-300);
  --blue-l:color-mix(in srgb, var(--orchidee-900) 45%, var(--white));
  --blue-ll:color-mix(in srgb, var(--orchidee-900) 30%, var(--white));
  --off:var(--sable-800);
}

/* Breadcrumb (injected by chrome.js at the top of the content, not on the home page) */
/* Breadcrumb — pared-back « Apple » style: light, airy, discreet. */
.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 }
/* === Background for CONTENT pages (without a hero) ===
   The body is navy by default (it serves as the background behind the heroes/sections of
   the home and sector pages). Content pages — FAQ, resources, blog,
   glossary, courses, product, road safety… — have no full-frame hero:
   frame: without an explicit background, their content would appear on navy. Give them
   a light surface (which adapts to the theme through --white). */
body.page-faq,
body.page-produit,
body.page-formation { background: var(--white); }
html:not([data-theme="dark"]) body.page-entreprises  { --off:var(--corail-50); }
html:not([data-theme="dark"]) body.page-associations { --off:var(--releve-e9f7ef); }
html:not([data-theme="dark"]) body.page-collectivites{ --off:var(--releve-fdf1e7); }
html:not([data-theme="dark"]) body.page-particuliers { --off:var(--releve-fcebf3); }
html:not([data-theme="dark"]) body.page-ecoles       { --off:var(--prairie-50); }
html:not([data-theme="dark"]) body.page-formation    { --off:var(--releve-e7f6f4); }
html:not([data-theme="dark"]) body.page-accueil      { --off:var(--releve-f3f3f3); }
html:not([data-theme="dark"]) body.page-faq          { --off:var(--orchidee-50); }
html:not([data-theme="dark"]) body.page-produit        { --off:var(--releve-f3f3f3); }
html:not([data-theme="dark"]) body.page-metiers        { --off:var(--framboise-50); }
html:not([data-theme="dark"]) body.page-questions      { --off:var(--soleil-50); }
html:not([data-theme="dark"]) body.page-financement    { --off:var(--citron-50); }
html:not([data-theme="dark"]) body.page-marche-public  { --off:var(--mangue-50); }

/* === Premium colour layer: accent badges + hero tinted per 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:var(--releve-7eb1f5); }
/* hero: a very light accent veil behind the halos (light theme) */
html:not([data-theme="dark"]) .hero { background-color:var(--accent-soft); }

/* === Dark mode: icon badges aligned (uniform translucent background) ===
   Some badges used a hardcoded pastel hex value (did not adapt) →
   make all .cseil-ico badges consistent on a translucent background; the icon
   keeps its accent colour, readable on a dark background. */
[data-theme="dark"] .cseil-ico { background: rgba(255,255,255,0.07) !important; }

/* Dark mode: numbered journey badges (background:var(--navy), which
   turns light in dark mode → the number becomes unreadable). A readable deep blue is forced. */
[data-theme="dark"] .rd-card > div[style*="border-radius:50%"][style*="background:var(--navy)"] {
  background: var(--releve-6b6b6b) !important; color: var(--releve-ffffff) !important;
}
[data-theme="dark"] .c-icon { background: rgba(255,255,255,0.07) !important; }

/* === Map of areas from Serris (rings + pricing legend) === */
.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:var(--releve-252525); }
.zhome-ring { stroke:var(--releve-252525); }
.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:var(--releve-d4d4d4); }
[data-theme="dark"] .zt-home { fill:var(--releve-ffffff); }
[data-theme="dark"] .zr-km { fill:var(--releve-a2a2a2); }
[data-theme="dark"] .zhome { fill:var(--releve-d4d4d4); }
[data-theme="dark"] .zhome-ring { stroke:var(--releve-d4d4d4); }

/* === Zone map: interactivity === */
.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(37, 37, 37,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(212, 212, 212,0.45); }
@media (prefers-reduced-motion: reduce) { .zhome-pulse { display: none; } }

/* === Zone: full-width layout (wide map + legend and municipalities) === */
.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; }
.zone-info-col .zone-groups { margin-top:1.5rem; }

/* === PWA install button (injected into the footer by 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 rgba(255,255,255,0.28);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--releve-c1c1c1);
  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(--releve-7eb1f5); border-color:var(--releve-7eb1f5); }
.pwa-install-btn svg { flex:0 0 auto; }
[data-theme="dark"] .pwa-install-btn { color:var(--releve-a2a2a2); border-color:var(--releve-404040); }
[data-theme="dark"] .pwa-install-btn:hover { color:var(--releve-60a5fa); border-color:var(--releve-60a5fa); }

/* === Self-hosted customer reviews (rendered by script.js into [data-avis]) ===
   Styles remain inert until a page uses the container. */
.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:var(--releve-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:var(--releve-292929); border-color:var(--releve-404040); }

/* ============================================================================
   DESIGN OF THE CONTENT PAGES (body.page-faq) — colour + cards
   The .rd-grid / .rd-card classes were styled only in produit.html.
   Define them here for all content pages, using the page accent
   (var --accent, set by chrome.js) for color and variety.
   ============================================================================ */
/* Coloured intro: an accent veil behind the top of the 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; }

/* Page title: accent bar under the H1 */
body.page-faq .section-title { position: relative; }

/* Generic card grid */
body.page-faq .rd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
/* Card: light surface, accent rule at the top, lively hover */
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(37, 37, 37, 0.12);
  border-color: transparent;
}
body.page-faq .rd-card h2,
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: var(--releve-292929); border-color: var(--releve-404040); }
[data-theme="dark"] body.page-faq .rd-card h2,
[data-theme="dark"] body.page-faq .rd-card h3 { color: var(--releve-e7e7e7); }

/* « Si ça s'arrête » had three rules here that patched the intro veil and
   closing block. They are no longer needed: the page sets its own surfaces with
   at the end of the stylesheet, and the overlay's even won against them (0,3,4 versus
   0,2,1), which repainted the intro in dark mode. Removed instead of duplicated. */

.company-road-risk-section { background:var(--white); padding:var(--sp-section) var(--gx); border-bottom:1px solid var(--border); }
.company-road-risk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2rem; }
.company-road-risk-grid-two { grid-template-columns:repeat(2,1fr); margin-bottom:0; }
.company-road-risk-card { background:var(--off); border:1px solid var(--border); border-radius:var(--r-lg); padding:2rem; }
.company-road-risk-card-primary { background:var(--navy); color:var(--releve-ffffff); }
.company-road-risk-number { color:var(--blue); font-size:3rem; font-weight:800; letter-spacing:-0.04em; line-height:1; }
.company-road-risk-card-primary .company-road-risk-number { color:var(--accent-on-dark); }
.company-road-risk-title { color:var(--navy); font-size:1rem; font-weight:700; margin:0.75rem 0 0.5rem; }
.company-road-risk-card-primary .company-road-risk-title { color:inherit; }
.company-road-risk-detail { color:var(--slate); font-size:0.82rem; line-height:1.6; }
.company-road-risk-card-primary .company-road-risk-detail { color:var(--accent-muted-on-dark); }
.company-road-risk-note { align-items:flex-start; background:var(--off); border:1px solid var(--border); border-left:3px solid var(--border2); border-radius:var(--r); display:flex; gap:1rem; padding:1.5rem; }
.company-road-risk-note-accent { background:var(--blue-ll); border-color:var(--blue-l); border-left-color:var(--blue); }
.company-road-risk-icon { align-items:center; color:var(--slate); display:flex; flex-shrink:0; height:32px; justify-content:center; min-width:32px; width:32px; }
.company-road-risk-note-accent .company-road-risk-icon { color:var(--blue); }
.company-road-risk-note-title { color:var(--navy); font-size:0.9rem; font-weight:700; margin-bottom:0.375rem; }
.company-road-risk-note-detail { color:var(--slate); font-size:0.82rem; line-height:1.65; }
[data-theme="dark"] body.page-entreprises .company-road-risk-card-primary {
  background:var(--corail-900);
  border-color:var(--corail-800);
  color:var(--sable-50);
}
[data-theme="dark"] body.page-entreprises .company-road-risk-card-primary .company-road-risk-detail { color:var(--sable-200); }
[data-theme="dark"] body.page-entreprises {
  --blue-l:color-mix(in srgb, var(--corail-900) 55%, var(--white));
  --blue-ll:color-mix(in srgb, var(--corail-900) 35%, var(--white));
}
[data-theme="dark"] body.page-entreprises .company-road-risk-note-accent {
  background:color-mix(in srgb, var(--corail-900) 44%, var(--white));
  border-color:color-mix(in srgb, var(--corail-800) 60%, var(--border));
  border-left-color:var(--corail-400);
}
[data-theme="dark"] body.page-entreprises .company-road-risk-note-accent .company-road-risk-icon,
[data-theme="dark"] body.page-entreprises .company-road-risk-note-accent .company-road-risk-note-title { color:var(--corail-200); }
[data-theme="dark"] body.page-entreprises .company-road-risk-note-accent .company-road-risk-note-detail { color:var(--sable-200); }
@media (max-width:700px) {
  .company-road-risk-grid,
  .company-road-risk-grid-two { grid-template-columns:1fr; }
}

/* Colored card icon badge (was defined only in product.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: var(--releve-2563eb); color: var(--releve-ffffff); }
.rd-ico.c-green  { background: var(--ok); color: var(--releve-ffffff); }
.rd-ico.c-orange { background: var(--releve-e85d20); color: var(--releve-ffffff); }
.rd-ico.c-purple { background: var(--accent); color: var(--releve-ffffff); }
.rd-ico.c-teal   { background: var(--accent); color: var(--releve-ffffff); }
.rd-ico.c-indigo { background: var(--accent); color: var(--releve-ffffff); }
.rd-ico.c-pink   { background: var(--accent); color: var(--releve-ffffff); }
/* In dark theme, --ok and --navy become LIGHT shades: a white glyph
   on top is no longer visible (contrast ratio 1.2 to 1.4). Dark glyph. */
[data-theme="dark"] .rd-ico.c-green,
[data-theme="dark"] .rd-ico.c-navy { color: var(--releve-1b1b1b); }
/* Same case on pages that inherit the accent shade "page-faq": in dark mode
   it turns pale green (eco-conception) or orange (marche public). c-pink
   was missing from this list: on blog.html (accent page ['c2410c','fff4ec','fb923c']
   set by chrome.js), the white glyph on fb923c measures 2.26 in dark mode. */
[data-theme="dark"] body.page-faq .rd-ico.c-teal,
[data-theme="dark"] body.page-faq .rd-ico.c-purple,
[data-theme="dark"] body.page-faq .rd-ico.c-indigo,
[data-theme="dark"] body.page-faq .rd-ico.c-pink { color: var(--releve-1b1b1b); }
/* --accent is mangue-500 in BOTH themes on this page: a white stroke on it
   measures 2.04 against the required 3, and the dark-mode fix repairs nothing in light mode. Dark
   ink from the same family, 4.37, valid on both sides: one rule is enough. */
.collectivites-legal-icon { width:44px; height:44px; min-width:44px; background:var(--accent); color:var(--mangue-900); border-radius:var(--r); display:flex; align-items:center; justify-content:center; }

/* Glossary (<dl>): terms in the accent shade, definitions laid out as airy cards */
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: var(--releve-292929); border-color: var(--releve-404040); border-left-color: var(--accent); }

/* Native accordions (<details>): a card with an accent marker */
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(37, 37, 37,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: var(--releve-292929); border-color: var(--releve-404040); }
[data-theme="dark"] body.page-faq summary { color: var(--releve-e7e7e7); }

/* Tables (for example the training comparison): header tinted with the 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: var(--releve-e7e7e7); }

/* === Single blog page: table of contents + articles as anchored sections === */
.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.78rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; margin:0 0 0.4rem; }

/* ============================================================================
   THEMATIC COLOURS — dark-theme remap of the inline accents
   Labels/accents are hardcoded as DARK inline colors (readable on a light
   background). In dark theme, those same colors become unreadable on a dark background.
   Each shade is remapped to its LIGHT variant (single source). Attribute
   selectors [style*="color:#…"] → they apply to every inline use, with no rework
   from the markup. (Checked: none of these shades is used in background-color.)
   ============================================================================ */ /* green */
[data-theme="dark"] [style*="color:#0f7a39"] { color: var(--releve-4ade80) !important; } /* vert WhatsApp */ /* vert (badge produit) */ /* vert foncé (estimateur) */
[data-theme="dark"] [style*="color:#c2410c"] { color: var(--releve-fb923c) !important; } /* orange */ /* rouge (comparatifs) */
/* Symmetrically in light mode: dc2626 on pastel backgrounds (very light pink/purple/blue)
   falls below 4.5:1 → darkened to b91c1c (AA) without touching background:dc2626 bars. */ /* pink */
[data-theme="dark"] [style*="color:#2563eb"] { color: var(--releve-7eb1f5) !important; } /* bleu */
[data-theme="dark"] [style*="color:#0f766e"] { color: var(--releve-5eead4) !important; } /* teal */ /* indigo */
[data-theme="dark"] [style*="color:#455d7d"] { color: var(--releve-bbbbbb) !important; } /* slate doux (badges) */
[data-theme="dark"] [style*="color:#5a6b8c"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color:#94a3b8"] { color: var(--sable-300) !important; }
[data-theme="dark"] [style*="color:#882b73"] { color: var(--orchidee-300) !important; }
/* Exception: elements with a light pastel BACKGROUND written inline (sector pills). Their
   background stays light in dark mode → the text must stay DARK (these rules, placed after
   the remaps, win by source order). */
/* Newsletter button (light blue background in dark mode): dark, readable text */
[data-theme="dark"] button[onclick="subscribeNewsletter(this)"] { color: var(--releve-161616) !important; }
[data-theme="dark"] .blog-toc a { background:var(--releve-292929); border-color:var(--releve-404040); color:var(--releve-e7e7e7); }
[data-theme="dark"] .blog-article { border-top-color:var(--releve-404040); }
/* Article « Partager » button (added by script.js) */
.share-btn { display:inline-flex; align-items:center; gap:0.45rem; margin-top:1.25rem; padding:0.55rem 1rem; border:1px solid var(--border); border-radius:var(--r-pill); background:transparent; color:var(--slate); font-family:inherit; font-size:0.8125rem; 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:var(--releve-404040); color:var(--releve-a2a2a2); }

/* === Printing: clean page (articles, contact) without clutter === */
@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:var(--releve-ffffff) !important; color:var(--releve-000000) !important; padding:0 !important; }
  a { color:var(--releve-000000) !important; text-decoration:underline; }
  .rd-card, .blog-article { break-inside:avoid; border-color:var(--releve-cccccc) !important; box-shadow:none !important; }
  .section-title, .rd-card h2, .rd-card h3, h1, h2, h3 { color:var(--releve-000000) !important; }
}

/* === Internal linking « Pour aller plus loin » (injected by chrome.js) ===
   Explicit background: this block is inserted at the end of <main>, just before the footer.
   On pages with a navy body (home/sector), a light background prevents it from leaving
   navy visible between the last section and the 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:var(--releve-292929); border-color:var(--releve-404040); color:var(--releve-e7e7e7); }
[data-theme="dark"] .related-card:hover { border-color:var(--releve-60a5fa); color:var(--releve-60a5fa); }

/* === Road safety news (official resources + local news) === */
.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:var(--releve-292929); border-color:var(--releve-404040); }
[data-theme="dark"] .actus-officiel span, [data-theme="dark"] .actus-card-title { color:var(--releve-e7e7e7); }
[data-theme="dark"] .actus-officiel a:hover, [data-theme="dark"] .actus-card a:hover { border-color:var(--releve-60a5fa); }

/* === « Nouvelle version » banner (service worker, injected by 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:var(--releve-ffffff);
  padding:0.7rem 0.7rem 0.7rem 1.1rem;
  border-radius:var(--r-pill);
  box-shadow:0 8px 28px rgba(37, 37, 37,0.28);
  font-size:0.86rem;
}
.sw-update button {
  background:var(--releve-60a5fa); color:var(--releve-171717); 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:var(--releve-c1c1c1); }
/* Above the mobile action bar */
@media (max-width:760px) { .sw-update { bottom:5rem; } }

/* === Accessibility: global « mouvement réduit » safety net ===
   Completes the targeted rules above: disables ALL remaining animation/transition
   for people who request less motion (system setting). */
@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;
  }
}

/* === Accessibility: keyboard focus visibility (baseline) ===
   Low specificity → the dedicated focus styles above keep priority.
   Ensures a visible ring on every keyboard-interactive element (including
   injected blocks: mobile bar, related cards, PWA button, update banner). */
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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN POLISH (Phase 3) — cross-cutting refinements, without touching the HTML.
   Note: scroll reveals, counters, 3D tilt, progress bar, road pattern and the
   hero parallax is ALREADY handled by chrome.js — do not duplicate it here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) Tabular figures: prices, cost tables, estimator, reaction timer →
   number columns align to the pixel, no more number « danse ». */
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) Comfortable reading measure (~68 characters) for long text.
   Targets article bodies and FAQ answers; does not affect grids. */
.blog-article > p, .blog-article li,
.faq-item > p {
  max-width: 68ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS (the whole batch) — ALL of them off under prefers-reduced-motion.
   They complete the effects already handled by chrome.js (reveals, counters, tilt,
   parallax, road pattern). None changes the HTML or accessibility.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Note: View Transitions and the hero entrance cascade already exist above
   (search for @view-transition / @keyframes heroRise) — do not duplicate them here. */

/* 1) « presse » effect when cards are clicked (slight tactile depression). */
@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) Content-link underline: present at rest (1px → remains
   distinguishable, WCAG compliant), thickens and takes the accent colour on hover. */
.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);
}

/* — The rest is motion: switched off when the user prefers fewer animations. */
@media (prefers-reduced-motion: no-preference) {

  /* 2) Sector icons animated on hover of THEIR own card. */
  .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) CTA arrows that move forward on hover (extends the .f-link pattern). */
  .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) Gentle shake of an invalid form (class set by 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) Drawn « envoyé » check mark (success state for send buttons). */
  @keyframes rdDraw { to { stroke-dashoffset: 0; } }
  .rd-sent svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: rdDraw 0.5s var(--ease) forwards; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APPLE STYLE (global pass) — SF typeface (var --font), centred titles, scroll
   cue, soft cards. Accessibility preserved, motion switched off under
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Centred section intro (eyebrow + title + subtitle) — Apple pattern. */
.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; }

/* « Apple » cards: a slight elevation at rest (soft), on top of the hover one. */
.f-card, .offre-card { box-shadow: var(--shadow-sm); }

/* Scroll cue at the bottom of the hero (chevron, injected by 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(39, 39, 39,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; }
}

/* The hero « trajet » animation (injected by chrome.js, right-hand column). */
.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,var(--releve-222222),var(--releve-1a1a1a)); }
.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; } }

/* ═══════════════════════════════════════════════════════════════════════════
   IMMERSIVE HERO (the « whaou » effect) — cinematic dark background + light
   trails (injected by chrome.js). Gated on .hero-immersive (added by JS):
   without JS, the original light hero remains visible. White text → strong contrast.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-immersive {
  background:
    radial-gradient(62% 80% at 18% -10%, var(--hero-immersive-glow-a,rgba(73, 73, 73,0.55)), transparent 70%),
    radial-gradient(55% 75% at 92% 110%, var(--hero-immersive-glow-b,rgba(30,92,186,0.34)), transparent 70%),
    linear-gradient(158deg, var(--hero-immersive-bg-a,var(--releve-1d1d1d)) 0%, var(--hero-immersive-bg-b,var(--releve-252525)) 52%, var(--hero-immersive-bg-c,var(--releve-171717)) 100%) !important;
  color:var(--releve-ffffff); border-bottom:none;
  min-height:clamp(560px,84vh,800px); display:flex; align-items:center;
}
/* Tagline CENTERED on the immersive background. */
.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; }

/* Background layer: full surface, behind the content, slight parallax with the cursor. */
.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; }
}

/* Hero text & elements on a dark background. */
.hero-immersive h1 { color:var(--releve-ffffff); }
.hero.hero-immersive h1 em {
  background:linear-gradient(120deg,var(--releve-ffffff) 0%,var(--releve-ffe6b0) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 2px 14px rgba(0,0,0,0.18);
}
.hero-immersive .hero-sub { color:rgba(255,255,255,0.82); }
.hero-immersive .hero-sub strong { color:var(--releve-ffffff) !important; }
.hero-immersive .hero-tag {
  background:rgba(255,255,255,0.12); color:var(--releve-ffffff); border:1px solid rgba(255,255,255,0.22);
}
.hero-immersive .btn-primary { background:var(--releve-ffffff); color:var(--navy); }
.hero-immersive .btn-primary:hover { background:rgba(255,255,255,0.88); }
.hero-immersive .btn-outline {
  color:var(--releve-ffffff); 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:var(--releve-ffffff); background:rgba(255,255,255,0.16); }

/* Breadcrumb readable on a dark background. */
.hero-immersive .breadcrumb a { color:rgba(255,255,255,0.72); }
.hero-immersive .breadcrumb a:hover { color:var(--releve-ffffff); }
.hero-immersive .breadcrumb [aria-current="page"] { color:var(--releve-ffffff); }
.hero-immersive .breadcrumb .breadcrumb-sep { color:rgba(255,255,255,0.4); }

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMB — an elegant « glass » chip (home icon › page). It adapts to the light
   background of the pages as well as to the dark immersive hero. (Last block wins.)
   ═══════════════════════════════════════════════════════════════════════════ */
.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(37, 37, 37,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; }

/* On the immersive (dark) hero: translucent light glass, light text. */
.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:var(--releve-ffffff); }
.hero-immersive .breadcrumb .breadcrumb-sep { color:rgba(255,255,255,0.45); }
.hero-immersive .breadcrumb [aria-current="page"] { color:var(--releve-ffffff); }

/* Dark mode outside the hero (dark content pages). */
[data-theme="dark"]:not(.x) .breadcrumb { background:rgba(255,255,255,0.06); border-color:var(--border); }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN POLISH (the « Apple » batch) — dark CTA banners (light/dark rhythm),
   cinematic grain on the hero, depth in dark mode.
   ═══════════════════════════════════════════════════════════════════════════ */

/* CTA banners in premium DARK (creates the light → dark → light rhythm, Apple style).
   The background is set further down (« seasonal » block): same selector, same priority,
   later in the stylesheet — a second declaration here would never paint. */
.cta-band {
  border-top:none; border-bottom:none; color:var(--releve-ffffff);
}
.cta-band h2 { color:var(--releve-ffffff); }
.cta-band p { color:rgba(255,255,255,0.82); }
/* White button on the dark banner — FIXED text (var(--navy) turns light
   in dark theme → unreadable). Buttons with an inline background (sector accent) are excluded. */
.cta-band .btn-primary:not([style*="background"]) { background:var(--releve-ffffff); color:var(--releve-161616); }
.cta-band .btn-primary:not([style*="background"]):hover { background:rgba(255,255,255,0.88); }
.cta-band .btn-outline:not([style*="background"]) {
  color:var(--releve-ffffff); 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:var(--releve-ffffff); background:rgba(255,255,255,0.16); }

/* Very subtle cinematic grain on the immersive hero (premium texture). */
.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");
}

/* Dark-mode depth: thin light line at the top of cards (soft light). */
[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:var(--releve-404040); 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;
}
/* invisible bridge to keep hover active between the trigger and the panel */
.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(23, 23, 23,0.94); border-color:rgba(255,255,255,0.12); }
[data-theme="dark"] .nav-mega-trigger { color:var(--releve-d4d4d4); }
[data-theme="dark"] .nav-mega-trigger:hover, [data-theme="dark"] .nav-mega-trigger.nav-active { color:var(--releve-ffffff); }
@media (max-width:600px) { .nav-mega { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY STORYTELLING (the « Comment ça marche » section) — intro pinned on the left,
   steps scrolling on the right. Collapses to one column below 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; }
/* steps in a column, connected by a vertical rail (disable the horizontal rail) */
.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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEASONAL PALETTE (--s1..--s4) — colors of the hero trails/halos, which
   change with the season (body.season-* class set by seasonal.js).
   Default (out of season) = brand blues, to remain elegant.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --s1:var(--releve-7eb1f5); --s2:var(--releve-c3c3c3); --s3:var(--releve-dfdfdf); --s4:var(--releve-ffffff); }
body.season-spring { --s1:var(--releve-4ade80); --s2:var(--accent); --s3:var(--releve-fde68a); --s4:var(--accent-soft); }
body.season-summer { --s1:var(--releve-fbbf24); --s2:var(--releve-fb923c); --s3:var(--releve-7dd3fc); --s4:var(--releve-5eead4); }
body.season-autumn { --s1:var(--releve-fb923c); --s2:var(--releve-f87171); --s3:var(--releve-fcd34d); --s4:var(--releve-fdba74); }
body.season-winter { --s1:var(--releve-dfdfdf); --s2:var(--releve-99f6e4); --s3:var(--releve-b8b8b8); --s4:var(--accent-soft); }

/* On the immersive (dark) hero, make the seasonal halos VIVID (the dark background
   makes the colour stand out) → spectacular and colourful. */
.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; }

/* ═══════════════════════════════════════════════════════════════════════════
   SITE-WIDE SEASONAL ATMOSPHERE — colored halos (--s1..--s4) on the
   dark bands + progress bar. The colorful « whaou » is no longer limited
   to the hero. The dark base is kept → white text stays readable; soft glows in the corners.
   ═══════════════════════════════════════════════════════════════════════════ */
.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,var(--releve-1d1d1d) 0%,var(--releve-252525) 58%,var(--releve-171717) 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,var(--releve-1d1d1d),var(--releve-252525) 60%,var(--releve-171717)) !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(--releve-252525) !important;
}
.site-footer, [data-theme="dark"] .site-footer {
  background:
    radial-gradient(42% 130% at 10% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
    radial-gradient(42% 130% at 95% 100%, color-mix(in srgb, var(--accent-soft) 18%, transparent), transparent 72%),
    var(--releve-252525) !important;
}
/* Seasonal-color reading progress bar. */
.rd-progress { background: linear-gradient(90deg, var(--s1), var(--s2)) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   VISUAL POLISH 2 — seasonal rule, drop cap, hook shimmer, spotlight
   cards, grain on bands. Accessibility preserved; motion disabled under
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* SEASONAL accent line under section headings (decoration, follows the season). */
.section-title { position: relative; }
.section-title::after {
  content:""; display:block; width:46px; height:3px; margin:0.75rem auto 0;
  border-radius:3px; background:var(--s1);
}
.sticky-story .ss-aside .section-title::after { margin-left:0; margin-right:auto; }

/* Drop cap on the article's first paragraph. */
.blog-article > p:first-of-type::first-letter {
  float:left; font-weight:800; font-size:3.1rem; line-height:0.78;
  padding:0.12rem 0.55rem 0 0; color:var(--accent);
}

/* Soft shimmer on the hero keyword — GLOW (the text keeps its color
   full var(--s1) → AA contrast kept, no transparent text). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rdEmShimmer { 0%,100% { text-shadow:0 0 0 transparent; } 50% { text-shadow:0 0 18px rgba(255,226,165,0.5); } }
  .hero-immersive h1 em { animation: rdEmShimmer 4.5s ease-in-out infinite; }
}

/* Light cinematic grain on dark bands (like the hero). Direct content
   is raised above the grain. */
.cta-band, .ri-band, .site-footer { position: relative; }
.cta-band > *, .ri-band > *, .site-footer > * { position: relative; z-index: 1; }
.cta-band::after, .ri-band::after, .site-footer::after {
  content:""; position:absolute; inset:0; z-index: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");
}

/* Pointer spotlight on cards (soft halo following the mouse, --mx/--my
   set by chrome.js). Fine pointer only, and outside reduced motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .f-card, .offre-card { position: relative; }
  .f-card > *, .offre-card > * { position: relative; z-index: 1; }
  .f-card::before, .offre-card::before {
    content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
    opacity:0; transition:opacity 0.25s ease;
    background:radial-gradient(170px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%);
  }
  .f-card:hover::before, .offre-card:hover::before { opacity:1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOM WORK (1/2) — SVG « vague » separators at the start of bands
   dark bands + the seasonal accent of the footer. The waves are purely decorative,
   out of flow (no layout shift).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Entry wave (light → dark band transition), colour = the top of the band. */
.cta-band::before, .ri-band::before, .site-footer::before {
  content:""; position:absolute; left:0; right:0; top:0; height:46px;
  transform:translateY(-99%); pointer-events:none; z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,24 C 360,2 760,40 1440,10 L1440,46 Z' fill='%23252525'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;
}
/* The footer can also border a dark section above: disable
   the wave in that case (otherwise useless dark on dark). */
[data-theme="dark"] .site-footer::before { opacity:0.0; }

/* Seasonal accent at the top of the footer (thin line that follows the season). */
.site-footer { border-top:2px solid var(--s1); }

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOM WORK (2/2) — coverage areas: a stylised geographic map
   + a distance scale (replaces the old concentric radial map).
   ═══════════════════════════════════════════════════════════════════════════ */
.zmap-wrap { margin:1.75rem 0 0; }
.zmap { display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:16px; }
.zmap text { font-family:var(--font),sans-serif; }
.zm-land { fill:var(--releve-f2f2f2); }
.zm-river { stroke:var(--releve-bfbfbf); stroke-width:2.6; opacity:0.85; }
.zm-road { stroke:var(--releve-d4d4d4); stroke-width:1.6; stroke-dasharray:3 2.4; }
.zm-n { font-size:5px; font-weight:700; fill:var(--releve-a2a2a2); text-anchor:middle; }
.zm-n-l { stroke:var(--releve-a2a2a2); stroke-width:0.8; }
.zm-town text { font-size:4.6px; font-weight:600; fill:var(--navy); }
.zm-home { fill:var(--accent); }
.zm-home-pulse { fill:var(--accent); opacity:0.45; }
.zm-home-lbl { font-size:5.8px; font-weight:800; fill:var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes zmPulse { 0% { r:3.2; opacity:0.5; } 100% { r:12; opacity:0; } }
  .zm-home-pulse { animation:zmPulse 2.6s ease-out infinite; }
}
[data-theme="dark"] .zmap { background:var(--releve-171717); }
[data-theme="dark"] .zm-land { fill:var(--releve-171717); }
[data-theme="dark"] .zm-river { stroke:var(--releve-3b5a82); }
[data-theme="dark"] .zm-road { stroke:var(--releve-404040); }
[data-theme="dark"] .zm-town text, [data-theme="dark"] .zm-home-lbl { fill:var(--releve-e7e7e7); }

/* Distance scale */
.zscale { margin-top:1.2rem; }
.zscale-bar { display:flex; height:12px; border-radius:99px; overflow:hidden; box-shadow:var(--shadow-sm); }
.zseg { display:block; height:100%; }
.zscale-ticks { position:relative; height:1.1rem; margin-top:0.35rem; font-size:0.72rem; font-weight:600; color:var(--slate); }
.zscale-ticks span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.zscale-ticks span:first-child { transform:none; }
.zscale-ticks span:last-child { transform:translateX(-100%); }
.zscale-cap { margin:1.1rem 0 0; font-size:0.75rem; color:var(--slate); font-style:italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   SOUS-NAVIGATION D'ANCRES COLLANTE (signature Apple) — pages longues
   Set by chrome.js on pages declaring body[data-subnav]. Glass bar
   below the fixed header (66px), anchor pills with scroll-spy (.is-active).
   ═══════════════════════════════════════════════════════════════════════════ */
.rd-subnav {
  position: sticky; top: 66px; z-index: 90;
  display: flex; justify-content: center; align-items: center; gap: 0.35rem;
  padding: 0.5rem var(--gx);
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(14px) saturate(185%);
  backdrop-filter: blur(14px) saturate(185%);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rd-subnav::-webkit-scrollbar { display: none; }
.rd-subnav a {
  flex: 0 0 auto;
  font-size: 0.8125rem; font-weight: 600; color: var(--slate); text-decoration: none;
  padding: 0.62rem 0.95rem; border-radius: var(--r-pill);
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.rd-subnav a:hover { color: var(--navy); }
.rd-subnav a.is-active { color: var(--navy); background: var(--off); }
[data-theme="dark"] .rd-subnav { background: rgba(23, 23, 23,0.72); border-bottom-color: rgba(255,255,255,0.14); }
/* Targeted sections leave room for the fixed header + subnav during an anchor jump. */
body[data-subnav] [id] { scroll-margin-top: 124px; }
@media (prefers-reduced-motion: reduce) { .rd-subnav a { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE — content-visibility on blocks always below the fold
   and NEVER anchor targets (the « Pour aller plus loin » linking block +
   the footer, injected by chrome.js). The browser skips rendering them for as long as
   when they are far from the viewport. `contain-intrinsic-size: auto …` remembers the
   actual size after the first render → no scrollbar or anchor jump.
   Deliberately NOT applied to the anchor sections (sub-nav) or to the blog
   articles (targets of the table of contents). ═══════════════════════════════════════════ */
.related-links { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.site-footer { content-visibility: auto; contain-intrinsic-size: auto 480px; }

/* « finale » step number (product journey): green readable in both
   themes (the dark var(--ok) green brushes the contrast threshold on a dark card). */
.step-num.step-done { color: var(--ok); }
[data-theme="dark"] .step-num.step-done { color: var(--releve-4ade80); }

/* « Copier l'email » button (placed in JS beside the .email-copyable links). */
.email-copy-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-left: 0.5rem; vertical-align: baseline;
  padding: 0.15rem 0.5rem; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--off); color: var(--slate);
  font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.email-copy-btn:hover { color: var(--navy); border-color: var(--navy2); }
.email-copy-btn.is-copied { color: var(--ok); border-color: var(--ok); background: rgba(126,177,245,0.10); }
[data-theme="dark"] .email-copy-btn.is-copied { color: var(--releve-4ade80); border-color: var(--releve-4ade80); }
@media (prefers-reduced-motion: reduce) { .email-copy-btn { transition: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   SIGNATURE PREMIUM — an additive layer (brand consistency with the app)
   ----------------------------------------------------------------------------
   A PURELY ADDITIVE block, placed at the end of the sheet (cascade priority), so it is
   reversible: delete this block and you are exactly back to the previous state.
   Adds: (1) navy→blue brand gradient, (2) a COLOR accent that
   VARIES WITH THE SEASON (amplifying the seasonal ambience already in place),
   (3) « Liquid Glass » finishes: gradient CTA + glow, the hero's signature word
   in a gradient, and more present seasonal halos.
   The body.season-* classes are set by assets/js/seasonal.js (unchanged);
   the sector accent (body.page-*) keeps priority over its own identity.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  /* Brand gradient (navy → deep blue → light blue). Same as the app. */
  --brand-grad:linear-gradient(135deg,var(--releve-252525) 0%,var(--releve-494949) 48%,var(--releve-3f7cae) 100%);
  /* SEASONAL accent — default (out of season / JS off) = brand blue. */
  --season-accent:var(--releve-3f7cae);
  --season-accent-soft:rgba(63,124,174,0.12);
  --season-glow:rgba(63,124,174,0.34);
  /* « signature » gradient: navy → blue → seasonal shade (the color of the
     site therefore visibly changes over the year — a deliberate request). */
  --season-grad:linear-gradient(135deg,var(--releve-252525) 0%,var(--releve-494949) 45%,var(--season-accent) 100%);
}
/* ── Colour accent per season (light) ─────────────────────────────────────── */
body.season-spring{--season-accent:var(--releve-10a37f);--season-accent-soft:rgba(16,163,127,0.13);--season-glow:rgba(16,163,127,0.32);}
body.season-summer{--season-accent:var(--releve-f59e0b);--season-accent-soft:rgba(245,158,11,0.15);--season-glow:rgba(245,158,11,0.36);}
body.season-autumn{--season-accent:var(--releve-ea580c);--season-accent-soft:rgba(234,88,12,0.14);--season-glow:rgba(234,88,12,0.34);}
body.season-winter{--season-accent:var(--releve-2563eb);--season-accent-soft:rgba(37,99,235,0.13);--season-glow:rgba(37,99,235,0.34);}
/* Dark: lightened accent (contrast) + a more discreet glow. */
[data-theme="dark"] body.season-spring{--season-accent:var(--releve-34d399);--season-glow:rgba(52,211,153,0.28);}
[data-theme="dark"] body.season-summer{--season-accent:var(--releve-fbbf24);--season-glow:rgba(251,191,36,0.28);}
[data-theme="dark"] body.season-autumn{--season-accent:var(--releve-fb923c);--season-glow:rgba(251,146,60,0.28);}
[data-theme="dark"] body.season-winter{--season-accent:var(--releve-60a5fa);--season-glow:rgba(96,165,250,0.28);}

/* ── Primary CTAs: brand gradient (season tinted) + soft glow ─────────────────
   Buttons with a sector colour set inline (style="background:#…") remain
   unchanged (the inline rule wins): sector identity is preserved. */
.btn-primary,.btn-submit,.nav-cta{
  background:var(--season-grad);
  box-shadow:0 6px 18px var(--season-glow);
  transition:box-shadow .25s var(--ease),transform .15s var(--ease),background-color .15s;
}
.btn-primary:hover,.btn-submit:hover{box-shadow:0 12px 30px var(--season-glow);transform:translateY(-1px);background:var(--season-grad);}
.nav-cta{box-shadow:0 4px 12px var(--season-glow);}
.nav-cta:hover{box-shadow:0 7px 18px var(--season-glow);background:var(--season-grad);}
/* In dark mode, .btn-primary/.btn-submit switched to dark text: the gradient is kept
   (readable) along with white text. */
[data-theme="dark"] .btn-primary,[data-theme="dark"] .btn-submit,[data-theme="dark"] .nav-cta{background:var(--season-grad);color:var(--releve-ffffff);}
@media (prefers-reduced-motion: reduce){.btn-primary,.btn-submit,.nav-cta{transition:none;}.btn-primary:hover,.btn-submit:hover{transform:none;}}

/* ── The hero signature word (<em>): blue→season gradient ──────────────────── */
.hero h1 em{
  background:linear-gradient(120deg,var(--releve-494949) 0%,var(--season-accent) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.hero h1 em::after{background:var(--season-accent);}
[data-theme="dark"] .hero h1 em{background:linear-gradient(120deg,var(--releve-7aa7d8) 0%,var(--season-accent) 100%);-webkit-background-clip:text;background-clip:text;}

/* ── « eyebrow » pills tinted by season on the home page & neutral pages ─────
   (sector pages keep their own accent). */
body:not([class*="page-"]) .section-tag{color:var(--season-accent);}
body:not([class*="page-"]) .hero-tag{background:var(--season-accent-soft);color:var(--season-accent);}

/* ── AMPLIFIED seasonal background ambience (bigger, more present blobs) ────── */
/* NO MORE PIXEL SIZE HERE. It made the layer smaller than
   the screen and brought its edge into view; geometry now lives with
   the rest (inset:-45%), only once. */
body.season-spring::before{background:radial-gradient(58% 82% at 72% 62%, rgba(244,114,182,0.1100) 0%, rgba(244,114,182,0.0792) 24%, rgba(244,114,182,0.0462) 46%, rgba(244,114,182,0.0220) 66%, rgba(244,114,182,0.0077) 82%, rgba(244,114,182,0.0000) 100%);}
body.season-spring::after {background:radial-gradient(86% 54% at 40% 74%, rgba(134,239,172,0.1100) 0%, rgba(134,239,172,0.0792) 24%, rgba(134,239,172,0.0462) 46%, rgba(134,239,172,0.0220) 66%, rgba(134,239,172,0.0077) 82%, rgba(134,239,172,0.0000) 100%);}
body.season-summer::before{background:radial-gradient(64% 76% at 66% 26%, rgba(251,191,36,0.1200) 0%, rgba(251,191,36,0.0864) 24%, rgba(251,191,36,0.0504) 46%, rgba(251,191,36,0.0240) 66%, rgba(251,191,36,0.0084) 82%, rgba(251,191,36,0.0000) 100%);}
body.season-summer::after {background:radial-gradient(72% 48% at 28% 34%, rgba(251,146,60,0.1100) 0%, rgba(251,146,60,0.0792) 24%, rgba(251,146,60,0.0462) 46%, rgba(251,146,60,0.0220) 66%, rgba(251,146,60,0.0077) 82%, rgba(251,146,60,0.0000) 100%);}
body.season-autumn::before{background:radial-gradient(58% 82% at 72% 62%, rgba(234,88,12,0.1100) 0%, rgba(234,88,12,0.0792) 24%, rgba(234,88,12,0.0462) 46%, rgba(234,88,12,0.0220) 66%, rgba(234,88,12,0.0077) 82%, rgba(234,88,12,0.0000) 100%);}
body.season-autumn::after {background:radial-gradient(86% 54% at 40% 74%, rgba(180,83,9,0.1100) 0%, rgba(180,83,9,0.0792) 24%, rgba(180,83,9,0.0462) 46%, rgba(180,83,9,0.0220) 66%, rgba(180,83,9,0.0077) 82%, rgba(180,83,9,0.0000) 100%);}
body.season-winter::before{background:radial-gradient(64% 76% at 66% 26%, rgba(125,185,232,0.1300) 0%, rgba(125,185,232,0.0936) 24%, rgba(125,185,232,0.0546) 46%, rgba(125,185,232,0.0260) 66%, rgba(125,185,232,0.0091) 82%, rgba(125,185,232,0.0000) 100%);}
body.season-winter::after {background:radial-gradient(72% 48% at 28% 34%, rgba(162, 162, 162,0.1000) 0%, rgba(162, 162, 162,0.0720) 24%, rgba(162, 162, 162,0.0420) 46%, rgba(162, 162, 162,0.0200) 66%, rgba(162, 162, 162,0.0070) 82%, rgba(162, 162, 162,0.0000) 100%);}
[data-theme="dark"] body.season-spring::before{background:radial-gradient(58% 82% at 72% 62%, rgba(244,114,182,0.0700) 0%, rgba(244,114,182,0.0504) 24%, rgba(244,114,182,0.0294) 46%, rgba(244,114,182,0.0140) 66%, rgba(244,114,182,0.0049) 82%, rgba(244,114,182,0.0000) 100%);}
[data-theme="dark"] body.season-spring::after {background:radial-gradient(86% 54% at 40% 74%, rgba(134,239,172,0.0600) 0%, rgba(134,239,172,0.0432) 24%, rgba(134,239,172,0.0252) 46%, rgba(134,239,172,0.0120) 66%, rgba(134,239,172,0.0042) 82%, rgba(134,239,172,0.0000) 100%);}
[data-theme="dark"] body.season-summer::before{background:radial-gradient(64% 76% at 66% 26%, rgba(251,191,36,0.0700) 0%, rgba(251,191,36,0.0504) 24%, rgba(251,191,36,0.0294) 46%, rgba(251,191,36,0.0140) 66%, rgba(251,191,36,0.0049) 82%, rgba(251,191,36,0.0000) 100%);}
[data-theme="dark"] body.season-summer::after {background:radial-gradient(72% 48% at 28% 34%, rgba(251,146,60,0.0600) 0%, rgba(251,146,60,0.0432) 24%, rgba(251,146,60,0.0252) 46%, rgba(251,146,60,0.0120) 66%, rgba(251,146,60,0.0042) 82%, rgba(251,146,60,0.0000) 100%);}
[data-theme="dark"] body.season-autumn::before{background:radial-gradient(58% 82% at 72% 62%, rgba(234,88,12,0.0700) 0%, rgba(234,88,12,0.0504) 24%, rgba(234,88,12,0.0294) 46%, rgba(234,88,12,0.0140) 66%, rgba(234,88,12,0.0049) 82%, rgba(234,88,12,0.0000) 100%);}
[data-theme="dark"] body.season-autumn::after {background:radial-gradient(86% 54% at 40% 74%, rgba(180,83,9,0.0600) 0%, rgba(180,83,9,0.0432) 24%, rgba(180,83,9,0.0252) 46%, rgba(180,83,9,0.0120) 66%, rgba(180,83,9,0.0042) 82%, rgba(180,83,9,0.0000) 100%);}
[data-theme="dark"] body.season-winter::before{background:radial-gradient(64% 76% at 66% 26%, rgba(125,185,232,0.0700) 0%, rgba(125,185,232,0.0504) 24%, rgba(125,185,232,0.0294) 46%, rgba(125,185,232,0.0140) 66%, rgba(125,185,232,0.0049) 82%, rgba(125,185,232,0.0000) 100%);}
[data-theme="dark"] body.season-winter::after {background:radial-gradient(72% 48% at 28% 34%, rgba(162, 162, 162,0.0600) 0%, rgba(162, 162, 162,0.0432) 24%, rgba(162, 162, 162,0.0252) 46%, rgba(162, 162, 162,0.0120) 66%, rgba(162, 162, 162,0.0042) 82%, rgba(162, 162, 162,0.0000) 100%);}

/* ── Seasonal halo behind the hero (premium, more vivid) ───────────────────── */
.hero::before{opacity:.40;}
.hero::after{opacity:.34;}
[data-theme="dark"] .hero::before{opacity:.30;}
[data-theme="dark"] .hero::after{opacity:.24;}

/* ── Concentric « zone d'intervention » map (home page showpiece) ─────────────
   AN IN-HOUSE SVG, with no third-party library. Scale 1 unit = 1 km (centre = Serris).
   TO EDIT DISTANCES: see the comment in #zone in index.html. */
.zcontrole-wrap{margin:0;}
.zcontrole{display:block;width:100%;height:auto;max-width:560px;margin-inline:auto;border:1px solid var(--border);border-radius:20px;background:linear-gradient(160deg,var(--releve-f3f8f2) 0%,var(--releve-e9f2ea) 100%);box-shadow:var(--shadow-md);overflow:visible;}
[data-theme="dark"] .zcontrole{background:linear-gradient(160deg,var(--releve-1f1f1f) 0%,var(--releve-171717) 100%);border-color:rgba(255,255,255,0.10);}
/* Colors by distance (aligned with the legend badges). */
.zcontrole .zr-km{font-family:var(--font),sans-serif;font-size:5px;font-weight:700;fill:var(--slate);}
[data-theme="dark"] .zcontrole .zr-km{fill:var(--releve-a2a2a2);}
.zcontrole .zr-town{font-family:var(--font),sans-serif;font-size:5.2px;font-weight:600;fill:var(--navy);}
/* Coverage zones as soft washes (nested halos, blended edges, zero outline) */
.zcontrole .zr-soft{stroke:none;}
.zcontrole .zs1-a{stop-color:var(--releve-16a34a);stop-opacity:0.42;}
.zcontrole .zs1-b{stop-color:var(--releve-16a34a);stop-opacity:0.34;}
.zcontrole .zs1-c{stop-color:var(--releve-16a34a);stop-opacity:0;}
.zcontrole .zs2-a{stop-color:var(--releve-f0a020);stop-opacity:0.10;}
.zcontrole .zs2-b{stop-color:var(--releve-f0a020);stop-opacity:0.22;}
.zcontrole .zs2-c{stop-color:var(--releve-f0a020);stop-opacity:0;}
.zcontrole .zs3-a{stop-color:var(--releve-e88a1a);stop-opacity:0.05;}
.zcontrole .zs3-b{stop-color:var(--releve-e88a1a);stop-opacity:0.13;}
.zcontrole .zs3-c{stop-color:var(--releve-e88a1a);stop-opacity:0;}
[data-theme="dark"] .zcontrole .zs1-a{stop-color:var(--releve-34d399);stop-opacity:0.30;}
[data-theme="dark"] .zcontrole .zs1-b{stop-color:var(--releve-34d399);stop-opacity:0.24;}
[data-theme="dark"] .zcontrole .zs1-c{stop-color:var(--releve-34d399);stop-opacity:0;}
[data-theme="dark"] .zcontrole .zs2-a{stop-color:var(--releve-fbbf24);stop-opacity:0.12;}
[data-theme="dark"] .zcontrole .zs2-b{stop-color:var(--releve-fbbf24);stop-opacity:0.24;}
[data-theme="dark"] .zcontrole .zs2-c{stop-color:var(--releve-fbbf24);stop-opacity:0;}
[data-theme="dark"] .zcontrole .zs3-a{stop-color:var(--releve-f59e0b);stop-opacity:0.06;}
[data-theme="dark"] .zcontrole .zs3-b{stop-color:var(--releve-f59e0b);stop-opacity:0.15;}
[data-theme="dark"] .zcontrole .zs3-c{stop-color:var(--releve-f59e0b);stop-opacity:0;}

[data-theme="dark"] .zcontrole .zr-town{fill:var(--releve-d4d4d4);}
.zcontrole .zr-dot{fill:var(--slate-l);}
.zcontrole .zr-home{fill:var(--season-accent);}
.zcontrole .zr-home-ring{fill:none;stroke:var(--season-accent);stroke-width:1;}
.zcontrole .zr-home-pulse{fill:var(--season-accent);opacity:0.5;transform-origin:center;transform-box:fill-box;}
@media (prefers-reduced-motion:no-preference){.zcontrole .zr-home-pulse{animation:zcontrolePulse 2.8s ease-out infinite;}}
@keyframes zcontrolePulse{0%{transform:scale(1);opacity:0.5;}70%{transform:scale(3.4);opacity:0;}100%{opacity:0;}}
.zcontrole .zr-home-lbl{font-family:var(--font),sans-serif;font-size:6.2px;font-weight:800;fill:var(--navy);}
[data-theme="dark"] .zcontrole .zr-home-lbl{fill:var(--releve-ffffff);}
/* « Map » decoration of the zone SVG (Seine, Marne, forests, conurbation, trunk roads).
   Note: older unscoped .zm-river/.zm-road rules exist further up
   (the zmap2 map) — these, scoped to .zcontrole, win by specificity. */
.zcontrole .zm-forest{fill:var(--releve-9ccb93);opacity:0.45;}
[data-theme="dark"] .zcontrole .zm-forest{fill:var(--releve-2f5d43);opacity:0.55;}
.zcontrole .zm-urban{fill:var(--releve-d2d2d2);opacity:0.55;}
[data-theme="dark"] .zcontrole .zm-urban{fill:var(--releve-4a4a4a);opacity:0.5;}
.zcontrole .zm-road{fill:none;stroke:var(--releve-bdbdbd);stroke-width:0.7;stroke-dasharray:3 2.4;stroke-linecap:round;opacity:0.8;}
[data-theme="dark"] .zcontrole .zm-road{stroke:rgba(255,255,255,0.13);}
.zcontrole .zm-river{fill:none;stroke:var(--releve-69a8d8);stroke-linecap:round;stroke-linejoin:round;}
.zcontrole .zm-river-1{stroke-width:2.6;opacity:0.95;}
.zcontrole .zm-river-2{stroke-width:1.5;opacity:0.9;}
[data-theme="dark"] .zcontrole .zm-river{stroke:var(--releve-3e78a8);}
.zcontrole .zm-river-lbl{font-family:var(--font),sans-serif;font-size:4.6px;font-style:italic;font-weight:600;fill:var(--releve-2e6da4);text-anchor:middle;}
[data-theme="dark"] .zcontrole .zm-river-lbl{fill:var(--releve-bababa);}
.zcontrole .zm-north{fill:var(--slate);}
[data-theme="dark"] .zcontrole .zm-north{fill:var(--releve-a2a2a2);}
/* Map halo beneath labels (readability above waterways) */
.zcontrole .zr-town,.zcontrole .zr-home-lbl,.zcontrole .zm-river-lbl{paint-order:stroke;stroke:var(--releve-ffffff);stroke-opacity:0.85;stroke-width:1.1px;stroke-linejoin:round;}
[data-theme="dark"] .zcontrole .zr-town,[data-theme="dark"] .zcontrole .zr-home-lbl,[data-theme="dark"] .zcontrole .zm-river-lbl{stroke:var(--releve-171717);stroke-opacity:0.8;}
/* Whole-of-France note (info column of the coverage area) */
.zone-france{margin:1.1rem 0 0;padding:0.8rem 1rem;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:var(--r-sm);font-size:0.86rem;color:var(--navy);line-height:1.6;}
.zone-france b{color:var(--navy);}

.zcontrole-legend{display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem;justify-content:center;margin-top:1rem;font-size:0.82rem;color:var(--slate);}
.zcontrole-legend b{color:var(--navy);font-weight:700;}
[data-theme="dark"] .zcontrole-legend b{color:var(--releve-e7e7e7);}
.zcontrole-legend .zl-dot{display:inline-block;width:0.65rem;height:0.65rem;border-radius:50%;margin-right:0.4rem;vertical-align:-1px;}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 4 — COMPOSITION « ATELIER »
   ───────────────────────────────────────────────────────────────────────────
   Rethinks the LAYOUT (not the styling: glass, gradient and season are kept).
   Goal: premium « type Apple » breathing room — a centered scene, generous
   vertical rhythm, clear hierarchy (one strong message per section).

   OPT-IN per page: add the `comp` class to <body> (for example <body class="comp
   page-accueil">). Pages WITHOUT this class do not change by a pixel →
   rollout to the other pages happens page by page, without regression risk.

   Tokens introduced:
     --measure       width of the « scène » (single centre column)
     --measure-text  a comfortable reading measure (~70 characters)
     --sp-section    fluid vertical rhythm between sections (overrides the base)
   ═══════════════════════════════════════════════════════════════════════════ */
body.comp{
  --measure:1140px;
  --measure-text:680px;
  --sp-section:clamp(5rem,8.5vw,9rem);
}

/* 1 — CENTRED SCENE ──────────────────────────────────────────────────────────
   All content aligns on the same centered column. Sections with inline
   narrow (FAQ, forms) keep their reduced width: the inline attribute
   `style="max-width:…"` override this rule (no !important here). */
body.comp .section-inner,
body.comp .stats-inner,
body.comp .hero-inner{max-width:var(--measure);margin-inline:auto;}

/* 2 — VERTICAL RHYTHM & SECTION HEADINGS ─────────────────────────────────────
   More breathing room before/after each block, a bounded reading measure for
   subtitles → the eye takes in one message at a time. */
body.comp .section-header{margin-bottom:clamp(2.5rem,5vw,4rem);}
body.comp .section-title{margin-bottom:1.1rem;}
body.comp .section-sub{max-width:var(--measure-text);}
/* « Centred intro » variant: eyebrow + title + standfirst centred, unhurried. */
body.comp .compo-intro{max-width:760px;margin-inline:auto;text-align:center;margin-bottom:clamp(2.75rem,5.5vw,4.5rem);}
body.comp .compo-intro .section-sub{margin-inline:auto;}

/* 3 — MONUMENTAL CENTRED HERO ────────────────────────────────────────────────
   The near-empty 2nd column (medallion/tile) is dropped: a single centred column,
   imposing intro, centered buttons. The seasonal « aurore » background is retained
   (it is still controlled by body.season-* via seasonal.js). */ %>
body.comp .hero{padding:clamp(8.5rem,16vh,12.5rem) var(--gx) clamp(5rem,10vh,8rem);}
body.comp .hero-inner{display:block;text-align:center;max-width:900px;}
body.comp .hero-inner > div:first-child{max-width:none;}
body.comp .hero-tag{margin-inline:auto;}
body.comp h1{font-size:clamp(2.6rem,6vw,4.6rem);margin-bottom:1.6rem;}
body.comp .hero-sub{margin-inline:auto;max-width:620px;font-size:clamp(1.08rem,1.6vw,1.25rem);}
body.comp .hero-actions{justify-content:center;}
/* Seasonal medallion & tile: decorative, hidden in the centered composition
   (the season remains expressed by the background color — no effect removed). */
body.comp .hero-season{display:none;}

/* 4 — STATS: ALIGNED WITH THE SCENE, MORE PRESENCE ───────────────────────── */
body.comp .stats-band{padding-block:clamp(2.5rem,4vw,3.5rem);}
body.comp .stat-val{font-size:clamp(1.75rem,2.6vw,2.2rem);}

/* 5 — « CIBLES » CARDS: MORE AIR, GENTLE ELEVATION ──────────────────────────
   Card markup uses inline styles (padding 1.5rem); do not touch
   them; only the overall comfort of the grid (gutter + breathing room). */
body.comp .cibles-grid{gap:1.5rem;}

/* 6 — FOOTER CTA BANNER (reusable) ───────────────────────────────────────────
   Stable centered closing block, to end each page with a clear action. */
body.comp .compo-cta{max-width:var(--measure);margin-inline:auto;text-align:center;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:var(--r-lg);padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3.5rem);}
body.comp .compo-cta h2{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-0.025em;color:var(--navy);margin-bottom:0.75rem;}
body.comp .compo-cta p{color:var(--slate);font-size:1.02rem;line-height:1.7;max-width:560px;margin:0 auto 2rem;}
body.comp .compo-cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
[data-theme="dark"] body.comp .compo-cta{background:rgba(96,165,250,0.08);border-color:rgba(96,165,250,0.18);}
[data-theme="dark"] body.comp .compo-cta h2{color:var(--releve-ededed);}
[data-theme="dark"] body.comp .compo-cta p{color:var(--releve-a2a2a2);}

/* 7 — PREMIUM COMPARISON TABLE (catalogue pages) ─────────────────────────────
   Replaces the « brute » table with an airy table, with soft rows, easy to read. */
body.comp .compo-table{width:100%;border-collapse:separate;border-spacing:0;font-size:0.92rem;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);}
body.comp .compo-table thead th{background:var(--off);text-align:left;font-weight:700;color:var(--navy);
  font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;padding:1rem 1.15rem;border-bottom:1px solid var(--border);}
body.comp .compo-table tbody th,body.comp .compo-table tbody td{padding:1rem 1.15rem;border-bottom:1px solid var(--border);vertical-align:top;}
body.comp .compo-table tbody tr:last-child th,body.comp .compo-table tbody tr:last-child td{border-bottom:none;}
body.comp .compo-table tbody tr:hover td,body.comp .compo-table tbody tr:hover th{background:var(--accent-soft);}
body.comp .compo-table tbody th[scope="row"]{font-weight:700;color:var(--navy);}
body.comp .compo-table tbody td{color:var(--slate);}
[data-theme="dark"] body.comp .compo-table{background:var(--releve-292929);border-color:var(--releve-404040);}
[data-theme="dark"] body.comp .compo-table thead th{background:var(--releve-212121);color:var(--releve-e7e7e7);border-color:var(--releve-404040);}
[data-theme="dark"] body.comp .compo-table tbody th,[data-theme="dark"] body.comp .compo-table tbody td{border-color:var(--releve-404040);}
[data-theme="dark"] body.comp .compo-table tbody th[scope="row"]{color:var(--releve-ededed);}
[data-theme="dark"] body.comp .compo-table tbody td{color:var(--releve-a2a2a2);}
[data-theme="dark"] body.comp .compo-table tbody tr:hover td,[data-theme="dark"] body.comp .compo-table tbody tr:hover th{background:rgba(96,165,250,0.08);}

/* 8 — CATALOGUE GRID (more generous content cards) ───────────────────────────
   Applies to .rd-grid on composition pages: airier cards, equal height,
   action link in the footer. */
body.comp .rd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;}
body.comp .rd-card{padding:1.75rem;border-radius:var(--r-lg);}

/* 10 — READING COLUMN (long texts: about, road safety…) ───────────────────────
   A comfortable reading measure, airy paragraphs, unhurried intermediate headings. */
body.comp .compo-prose{max-width:var(--measure-text);margin-inline:auto;}
body.comp .compo-prose > p{font-size:1.05rem;line-height:1.8;color:var(--text);margin:0 0 1.35rem;}
body.comp .compo-prose > h2{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:800;letter-spacing:-0.02em;color:var(--navy);margin:2.75rem 0 1rem;}
body.comp .compo-prose > h3{font-size:1.1rem;font-weight:700;color:var(--navy);margin:2rem 0 0.6rem;}
[data-theme="dark"] body.comp .compo-prose > p{color:var(--releve-d4d4d4);}
[data-theme="dark"] body.comp .compo-prose > h2,[data-theme="dark"] body.comp .compo-prose > h3{color:var(--releve-ededed);}

/* 11 — CALLOUT (legal note, warning, key point) ──────────────────────────────── */
body.comp .compo-callout{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  border-left:3px solid var(--accent);border-radius:var(--r);padding:1.25rem 1.5rem;margin:1.5rem 0;
  font-size:0.95rem;line-height:1.7;color:var(--text);}
body.comp .compo-callout strong{color:var(--navy);font-weight:700;}
[data-theme="dark"] body.comp .compo-callout{background:rgba(96,165,250,0.08);border-color:rgba(96,165,250,0.22);color:var(--releve-d4d4d4);}
[data-theme="dark"] body.comp .compo-callout strong{color:var(--releve-ededed);}

/* 12 — « TICKED » BULLET LIST (benefits, included, steps) ────────────────────── */
body.comp .compo-list{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:0.75rem;}
body.comp .compo-list li{position:relative;padding-left:1.9rem;line-height:1.65;color:var(--text);}
body.comp .compo-list li::before{content:"";position:absolute;left:0;top:0.15rem;width:1.2rem;height:1.2rem;
  border-radius:50%;background:var(--accent-soft);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/0.8rem no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/0.8rem no-repeat;
  background-color:var(--accent);}
[data-theme="dark"] body.comp .compo-list li{color:var(--releve-d4d4d4);}

/* 13 — GENERIC CARD GRID (pages without the page-faq system) ───────────── */
body.comp .compo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;}
body.comp .compo-card{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.75rem;display:flex;flex-direction:column;
  transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease;}
body.comp .compo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent);}
body.comp .compo-card h3{font-size:1.05rem;font-weight:800;color:var(--navy);margin:0 0 0.5rem;letter-spacing:-0.01em;}
body.comp .compo-card p{color:var(--slate);font-size:0.92rem;line-height:1.65;margin:0;}
[data-theme="dark"] body.comp .compo-card{background:var(--releve-292929);border-color:var(--releve-404040);}
[data-theme="dark"] body.comp .compo-card h3{color:var(--releve-ededed);}
[data-theme="dark"] body.comp .compo-card p{color:var(--releve-a2a2a2);}

/* 14 — RESPONSIVE: the scene stays comfortable on mobile ─────────────────────── */
@media (max-width:600px){
  body.comp .hero{padding-top:clamp(6.5rem,22vh,8.5rem);}
  body.comp .compo-cta{padding:2rem 1.25rem;}
  body.comp .compo-prose > p{font-size:1rem;}
}

/* Comparison tables: horizontal scrolling with affordance shadows (mobile). */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative;
  background:
    linear-gradient(90deg, var(--white) 30%, rgba(0,0,0,0)) 0 0/34px 100% no-repeat,
    linear-gradient(90deg, rgba(0,0,0,0), var(--white) 70%) 100% 0/34px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(37, 37, 37,.16), rgba(0,0,0,0)) 0 0/15px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(37, 37, 37,.16), rgba(0,0,0,0)) 100% 0/15px 100% no-repeat;
  background-attachment: local, local, scroll, scroll; }
.table-scroll > table{ min-width:520px; }
[data-theme="dark"] .table-scroll{
  background:
    linear-gradient(90deg, var(--white) 30%, rgba(0,0,0,0)) 0 0/34px 100% no-repeat,
    linear-gradient(90deg, rgba(0,0,0,0), var(--white) 70%) 100% 0/34px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) 0 0/15px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) 100% 0/15px 100% no-repeat;
  background-attachment: local, local, scroll, scroll; }
/* Softer card borders in dark mode (rely on shadow, not a hard stroke). */
[data-theme="dark"] .card, [data-theme="dark"] .f-card { border-color: rgba(162, 162, 162,0.15); }


/* === Ruban d'environnement (staging/dev uniquement) ===
   Small diagonal ribbon in the top-left corner. It does not push the content: nothing
   to compensate for in the body or navigation.
   SINGLE DEFINITION. The full-width red banner that lived higher up was not
   replaced for weeks: it was overridden, property by property, with
   !important patches. If this ribbon must change, change it HERE. */
.dev-banner, .app-dev-banner, .sent-dev-banner {
  position: fixed;
  top: 15px; left: -46px; right: auto; bottom: auto;
  width: auto; height: auto;
  transform: rotate(-45deg); transform-origin: center;
  background: var(--releve-b45309); color: var(--releve-ffffff);
  padding: 4px 48px;
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  display: block; border-radius: 0;
  z-index: 9999; pointer-events: none;
}
@media print { .dev-banner, .app-dev-banner, .sent-dev-banner { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT CONTRASTE 2026-07 — patches cibles (clair + sombre).
   Same pattern as existing [style*=...] patches: fix the inline colors
   set for light mode when dark mode makes them unreadable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inline « light mode » colours on dark cards (security-road, index and so on) */
[data-theme="dark"] [style*="color:#545454"] { color: var(--releve-a7a7a7) !important; }
[data-theme="dark"] [style*="color:#6b6b6b"] { color: var(--releve-b1b1b1) !important; }
[data-theme="dark"] [style*="color:#737373"] { color: var(--releve-a2a2a2) !important; }

/* Round badges « navy background + white number » (funding steps):
   --navy turns light in dark mode -> opaque deep blue badge (the same solution
   as the offre-num/offre-icon bullets above). */
[data-theme="dark"] [style*="border-radius:50%"][style*="background:var(--navy)"] {
  background: var(--releve-6b6b6b) !important;
  color: var(--releve-ffffff) !important;
}

/* --ok (green) background + white text: --ok turns pastel in dark mode -> navy text */
[data-theme="dark"] [style*="background:var(--ok)"][style*="color:white"],
[data-theme="dark"] [style*="background:var(--ok)"][style*="color:#fff"] {
  color: var(--releve-252525) !important;
}
[data-theme="dark"] .page-associations .offre-badge { color: var(--releve-252525); }

/* « Volet N » bullets: the raw accent is too light under white text -> accent ink
   (a dark AA shade in light mode, pastel in dark mode with navy text). */
.offre-card .offre-num[style*="background:var(--accent)"] {
  background: var(--accent-ink, var(--accent)) !important;
}
[data-theme="dark"] .offre-card .offre-num { color: var(--releve-252525); }

/* Boutons offre-cta pleins (particuliers) : rose accent + blanc insuffisant */
.page-particuliers .offre-card .offre-cta { background: var(--accent-ink, var(--accent)) !important; }
[data-theme="dark"] .page-particuliers .offre-card .offre-cta { color: var(--releve-252525) !important; }

/* « Roddier APP » section (index, navy background in both themes): tag and strong */
section[style*="background:var(--navy)"] .section-tag[style*="color:#2563eb"] { color: var(--releve-c1c1c1) !important; }
[data-theme="dark"] section[style*="background:var(--navy)"] strong { color: var(--releve-f4f4f4) !important; }

/* “Track B” tag (finance-card): accent on amber background -> accent ink,
   with a matching dark variant. */
.finance-card.path-b .finance-tag { background: var(--releve-fef3c7); color: var(--accent-ink, var(--accent)); }
[data-theme="dark"] .finance-card.path-b .finance-tag { background: rgba(251,191,36,0.16); color: var(--releve-fcd34d); }

/* Numbers 01-04 (index, #profil): blue one step darker on a blue badge */
.q-num { color: var(--releve-1d4ed8); }
[data-theme="dark"] .q-num { color: var(--releve-7eb1f5); }

/* Status tick (--ok background, pastel in dark mode) */
[data-theme="dark"] .tick { color: var(--releve-252525); }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE AUDIT 2026-07-12 — touch targets >= 44px and type size floors.
   (pointer:coarse = touch screens; max-width:760px = phones)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer:coarse){
  .footer-links{ gap:0.25rem; }
  .footer-links a{ display:inline-block; padding:0.5rem 0; }
  .footer-legal-row{ gap:0 1.5rem; }
  .footer-identity-credit a{ display:inline-block; padding:0.45rem 0; margin:-0.45rem 0; }
  .breadcrumb .breadcrumb-home{ padding:0.7rem; margin:-0.7rem; }
  .breadcrumb-inner a{ padding:0.6rem 0.15rem; margin:-0.6rem -0.15rem; }
  #cookie-banner button{ min-height:44px; }
  .qz-opt{ min-height:44px; }
  .share-btn{ min-height:40px; }
  .offre-card .offre-cta{ min-height:44px; }
  .c-val a{ display:inline-block; padding:0.5rem 0; margin:-0.5rem 0; }
  .email-copy-btn{ min-height:34px; }
  .fuel-btn{ min-height:40px; }
  main summary{ min-height:44px; }
  main input[type="checkbox"],main input[type="radio"]{ width:18px; height:18px; accent-color:var(--accent); }
  .f-link,.rd-prod-link{ display:inline-flex; padding:0.5rem 0; margin:-0.5rem 0; }
  .da-opt,#recheck,#pwa-install{ min-height:40px; }
  main input[type="range"]{ height:32px; }
}
@media (max-width:760px){
  .footer-identity-text{ font-size:0.875rem; }
  .footer-identity-credit{ font-size:0.8125rem; }
  .footer-legal-row a{ font-size:0.85rem; }
  .footer-links a{ font-size:0.9rem; }
  .breadcrumb{ font-size:0.8125rem; }
  .blog-cat{ font-size:0.8rem; }
  .related-title{ font-size:0.8125rem; }
  .offre-baseline{ font-size:0.875rem; }
  .offre-card .offre-num{ font-size:0.75rem; }
  .offre-card .offre-list li{ font-size:0.875rem; }
  .finance-card ul li{ font-size:0.875rem; }
  .finance-card .finance-tag{ font-size:0.75rem; }
  .obligation-box{ font-size:0.875rem; }
  #cookie-banner p{ font-size:0.875rem !important; }
  main [style*="font-size:0.75rem"]{ font-size:0.8125rem !important; }
}

/* ── Liberty Rider partner tile (teal motorcycle-safety identity) ── */
.partner-lr{position:relative;background:linear-gradient(180deg,var(--releve-f0fbf7) 0%,var(--releve-e7f7f1) 100%);border:1px solid rgba(13,148,136,0.28);border-top:3px solid var(--releve-0d9488);border-radius:var(--r-lg);padding:2rem;display:flex;flex-direction:column;gap:1rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.partner-lr:hover{transform:translateY(-2px);border-color:rgba(13,148,136,0.55);box-shadow:0 10px 26px rgba(13,148,136,0.16);}
[data-theme="dark"] .partner-lr{background:linear-gradient(180deg,var(--releve-15332f) 0%,var(--releve-112a29) 100%);border-color:rgba(45,212,191,0.28);border-top-color:var(--releve-2dd4bf);}
[data-theme="dark"] .partner-lr:hover{border-color:rgba(45,212,191,0.55);box-shadow:0 10px 26px rgba(0,0,0,0.35);}
.plr-head{display:flex;align-items:center;gap:0.8rem;}
.plr-mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--releve-0d9488);color:var(--releve-ffffff);flex-shrink:0;}
[data-theme="dark"] .plr-mark{background:var(--releve-14b8a6);color:var(--releve-06231f);}
.plr-name{font-family:var(--font),sans-serif;font-weight:800;font-size:1.05rem;color:var(--navy);letter-spacing:-0.01em;}
.plr-sub{font-size:0.78rem;font-weight:600;color:var(--releve-0b6b60);margin-top:2px;}
[data-theme="dark"] .plr-sub{color:var(--releve-5eead4);}
.plr-offer{background:rgba(13,148,136,0.10);border-left:3px solid var(--releve-0d9488);padding:0.75rem 0.875rem;border-radius:var(--r-sm);font-size:0.82rem;color:var(--navy);line-height:1.5;}
.plr-offer strong{color:var(--releve-0b6b60);}
[data-theme="dark"] .plr-offer{background:rgba(45,212,191,0.12);border-left-color:var(--releve-2dd4bf);}
[data-theme="dark"] .plr-offer strong{color:var(--releve-5eead4);}
.plr-link{display:inline-flex;align-items:center;gap:0.45rem;min-height:40px;padding:0 1.1rem;align-self:flex-start;border:1.5px solid rgba(13,148,136,0.5);border-radius:var(--r-pill);color:var(--releve-0b6b60);font-size:0.84rem;font-weight:700;text-decoration:none;transition:background .15s ease,border-color .15s ease;}
.plr-link:hover{background:rgba(13,148,136,0.10);border-color:var(--releve-0d9488);}
[data-theme="dark"] .plr-link{color:var(--releve-5eead4);border-color:rgba(94,234,212,0.45);}
[data-theme="dark"] .plr-link:hover{background:rgba(94,234,212,0.10);border-color:var(--releve-5eead4);}

/* COMING SOON state (rodap/rodos not launched yet) */
.btn-soon{background:var(--releve-737373) !important;color:var(--releve-ffffff) !important;cursor:default;pointer-events:none;box-shadow:none !important;opacity:.92}
.txt-soon{color:var(--releve-a2a2a2) !important;cursor:default;pointer-events:none}
.soon-badge{display:inline-block;margin-left:.5rem;padding:.12rem .55rem;border-radius:999px;background:var(--releve-f59e0b);color:var(--releve-1a1205);font-size:.62em;font-weight:800;vertical-align:middle;letter-spacing:.02em}
/* The badge carries its own amber background: in dark mode it must not take the
   pale blue color of the title containing it, otherwise it becomes unreadable. */
[data-theme="dark"] .soon-badge{color:var(--releve-1a1205)}

/* Readable by screen readers, invisible to the eye. Names information conveyed
   only through color or shape (quiz result, table legend).
   `display:none` and `visibility:hidden` would ALSO remove the text from reading:
   zero clipping is what keeps the content accessible. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Simulator of the demonstration pages ───────────────────────────────────
   Used by assets/demo-seuil.js. These classes
   were used without being defined: the block appeared as raw HTML. A missing class
   raises no error — hence months before anyone noticed. */
.rd-simu {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 1.75rem;
  background: var(--white, var(--releve-ffffff));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(37, 37, 37,.06));
}
.rd-simu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
}
.rd-simu__champ {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--slate);
  line-height: 1.45;
}
.rd-simu__champ input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.rd-simu__champ input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-ll, rgba(37,99,235,.14));
}
/* The result is what users came to read: it stands apart from the form. */
.rd-simu__res {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.rd-simu__total {
  font-family: var(--font), sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.rd-simu__detail {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--slate);
}
.rd-simu__detail ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.rd-simu__detail li { margin-bottom: 0.3rem; }
.rd-simu__detail strong { color: var(--navy); }
.rd-simu__note {
  margin: 1.1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--slate);
  opacity: 0.85;
}
[data-theme="dark"] .rd-simu {
  background: var(--releve-1b1b1b);
  border-color: rgba(162, 162, 162,0.18);
}
[data-theme="dark"] .rd-simu__champ input {
  background: var(--releve-151515);
  border-color: rgba(162, 162, 162,0.22);
  color: var(--releve-e7e7e7);
}
[data-theme="dark"] .rd-simu__total { color: var(--releve-e7e7e7); }
[data-theme="dark"] .rd-simu__res { border-top-color: rgba(162, 162, 162,0.18); }
@media (max-width: 560px) {
  .rd-simu { padding: 1.25rem; margin-top: 1.75rem; }
  .rd-simu__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PILOT PAGE — « si ça s'arrête ». The colour carries the structure.
   ═══════════════════════════════════════════════════════════════════════════
   Before: a single <section> 860 px wide, six headings separated by
   margins, six cards with a rule. Measured at 9.13 % coloured pixels in light mode
   (qa/cas-une-page.js, WebKit, 1440) — the accent veil was turquoise-50,
   with a saturation of 0.104: it is visible but does not count, either to the eye or
   to the instrument, which only calls a pixel « coloré » above 0.18.

   Three surfaces, each doing work a margin could not do:
     · the TINTED BAND separates « vous partez » from « ça s'arrête de notre côté ».
       Remove it: the page's two halves blend together.
     · the DEEP FLAT COLOR carries the four numbers and the next step. The number sits
       ON IT; it is not decorated by it.
     · the CARD is a flat color, not a border: the four formats can be counted
       at a glance because they are four blocks of color.

   One family in both themes — only lightness adapts. Values
   are palette names, never copied components.
   Contrasts measured (qa/cas-une-page.js), not worked out in the head. */

body.page-si-ca-s-arrete {
  --rev-teinte:     var(--turquoise-100);   /* bande de séparation */
  --rev-voile:      var(--turquoise-100);   /* voile d'ouverture */
  --rev-voile-fond: transparent;            /* sol sous le voile */
  --rev-teinte-ink: var(--turquoise-900);   /* 7,90 sur la bande */
  --rev-carte:      var(--turquoise-200);   /* aplat de carte */
  --rev-carte-ink:  var(--turquoise-900);   /* 6,62 sur la carte */
  --rev-fond:       var(--white);
  --rev-fond-ink:   var(--text);
  --rev-profond:    var(--turquoise-800);   /* aplat des nombres et du pas suivant */
  --rev-profond-ink: var(--sable-50);       /* 6,93 sur l'aplat */
  --rev-panneau:    var(--turquoise-800);
  --rev-panneau-ink: var(--sable-50);
}
/* In dark mode, the page keeps ITS family: lightness drops, not
   the shade changing. The band moves to -900, the card to -800, the flat color to -700
   so it still stands apart from the band. */
[data-theme="dark"] body.page-si-ca-s-arrete {
  --rev-teinte:     var(--turquoise-900);
  --rev-voile:      var(--turquoise-800);
  --rev-voile-fond: var(--turquoise-900);
  --rev-teinte-ink: var(--sable-50);        /* 9,34 */
  --rev-carte:      var(--turquoise-800);
  --rev-carte-ink:  var(--sable-50);        /* 6,93 */
  --rev-profond:    var(--turquoise-700);
  --rev-profond-ink: var(--sable-50);       /* 5,05 */
  --rev-panneau:    var(--turquoise-300);
  --rev-panneau-ink: var(--turquoise-900);  /* 5,32 */
}
/* Same setup when the reader has chosen nothing and the system is in dark mode.
   Kept separate from the selector above: without data-theme, the theme follows the system, and
   grouping both would repaint the page dark for everyone. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.page-si-ca-s-arrete {
    --rev-teinte:     var(--turquoise-900);
    --rev-voile:      var(--turquoise-800);
    --rev-voile-fond: var(--turquoise-900);
    --rev-teinte-ink: var(--sable-50);
    --rev-carte:      var(--turquoise-800);
    --rev-carte-ink:  var(--sable-50);
    --rev-profond:    var(--turquoise-700);
    --rev-profond-ink: var(--sable-50);
    --rev-panneau:    var(--turquoise-300);
    --rev-panneau-ink: var(--turquoise-900);
  }
}

/* ── Les bandes ───────────────────────────────────────────────────────────── */
body.page-si-ca-s-arrete .rev-bande,
body.page-si-ca-s-arrete .rev-aplat { padding: var(--sp-section) var(--gx); }
body.page-si-ca-s-arrete .rev-bande .section-inner,
body.page-si-ca-s-arrete .rev-aplat .section-inner { max-width: 1040px; }
body.page-si-ca-s-arrete .rev-texte { max-width: 780px; }

/* Opening: the veil covers the entire band. It starts at -100 (0.232
   saturation), not -50, otherwise it does not count as color.
   The selector is deliberately heavy. Two generic rules compete with it:
   style.css:2758 « body.page-faq main#contenu > section:first-of-type » and
   style.css:2764, the same in dark mode, which restores « background: none ». They
   weigh (1,3,3) — :first-of-type is a pseudo-CLASS and counts as one,
   which caused the first attempt to be wrong: the opening rendered turquoise in
   light mode and brown in dark mode, measured with background-image: none. So
   four classes are needed here so the rule is not a dead declaration.
   The veil has its own token, separate from the band: a gradient that fades
   to transparent loses its shade, and dark mode's -900 disappeared
   into the page background — the opening rendered neutral in dark mode and turquoise in
   light mode, exactly the two outcomes we do not want. */
body.comp.page-faq.page-si-ca-s-arrete main#contenu > section.rev-bande-intro {
  background-color: var(--rev-voile-fond);
  background-image:
    radial-gradient(120% 150% at 100% 0%, var(--rev-voile) 0%, transparent 72%),
    radial-gradient(100% 120% at 0% 10%, var(--rev-voile) 0%, transparent 66%);
}
/* In dark mode, the gradient alone was not enough: it fades to transparent
   and fell back to a nearly black page background — the opening rendered brown in the
   screenshot. A solid base beneath the gradient restores its family. The
   subtitle ink follows this base: a7a7a7 gray reaches only 4.09 against the required 4.5. */
[data-theme="dark"] body.page-si-ca-s-arrete .rev-bande-intro .section-sub { color: var(--sable-50); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.page-si-ca-s-arrete .rev-bande-intro .section-sub { color: var(--sable-50); }
}
body.page-si-ca-s-arrete .rev-bande-clair { background: var(--rev-fond); }
/* The band separating the page's two halves. */
body.page-si-ca-s-arrete .rev-bande-teinte { background: var(--rev-teinte); }
/* The body-text ink is set further down on .rev-texte p, with equal
   specificity: raise this one by one step so the band keeps its ink
   instead of depending on the order of the rules. */
body.page-si-ca-s-arrete .rev-bande-teinte .rev-texte p,
body.page-si-ca-s-arrete .rev-bande-teinte .rev-texte strong { color: var(--rev-teinte-ink); }
body.page-si-ca-s-arrete .rev-aplat { background: var(--rev-profond); }

/* ── Titres et texte courant ──────────────────────────────────────────────── */
body.page-si-ca-s-arrete .rev-titre {
  display: flex; align-items: center; gap: 1rem;
  font-size: clamp(1.4rem, 2.8vw, 1.95rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--navy); margin: 0 0 1.1rem;
}
body.page-si-ca-s-arrete .rev-bande-teinte .rev-titre { color: var(--rev-teinte-ink); }
body.page-si-ca-s-arrete .rev-titre + p { margin-top: 0; }
body.page-si-ca-s-arrete .rev-bande-teinte .rev-titre:not(:first-child) { margin-top: 3rem; }
body.page-si-ca-s-arrete .rev-sous-titre {
  font-size: 1.08rem; font-weight: 700; color: var(--navy); margin: 2.25rem 0 0.6rem;
}
body.page-si-ca-s-arrete .rev-texte p {
  font-size: 1.03rem; line-height: 1.8; color: var(--rev-fond-ink); margin: 0 0 1.15rem;
}
body.page-si-ca-s-arrete .rev-chapo { color: var(--slate); }
body.page-si-ca-s-arrete .rev-apres-grille { margin-top: 1.5rem; }
/* The format grid leaves the reading column: four cards in
   780 px produced four 175 px columns, unreadable. It uses the section's
   1040 px; the text after it returns to the column. */
body.page-si-ca-s-arrete p.rev-apres-grille { max-width: 780px; }

/* ── The four numbers, placed on the flat color ────────────────────────────────── */
body.page-si-ca-s-arrete .rev-chiffres-titre {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rev-profond-ink);
  margin: 0 0 2rem; opacity: 0.85;
}
body.page-si-ca-s-arrete .rev-chiffres-grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem 1.75rem;
}
body.page-si-ca-s-arrete .rev-chiffre { text-align: left; }
body.page-si-ca-s-arrete .rev-chiffre-v {
  display: block; font-size: clamp(3rem, 7vw, 4.4rem); font-weight: 800;
  letter-spacing: -0.045em; line-height: 0.95; color: var(--rev-profond-ink);
  font-variant-numeric: tabular-nums;
}
body.page-si-ca-s-arrete .rev-chiffre-l {
  display: block; margin-top: 0.7rem; font-size: 0.9rem; line-height: 1.5;
  color: var(--rev-profond-ink);
}

/* ── The card is a flat colour, not a border ───────────────────────────────────
/* The page NO LONGER USES .rd-card. This is not naming fussiness:
   signature-premium.css:539 impose « background: var(--sr-glass-surface)
   !important » and « border: 1px solid var(--sr-glass-border) !important » on every one of
   the site's .rd-card. As long as the class remains, no card can carry a
   flat color from this stylesheet — the first measurement rendered four white cards
   with borders even though the flat-color rule was written. Two options: another !important,
   or stop using this class. The second costs nothing here,
   because the card already redefined background, border, radius, margin and inks.
   The 4 px border goes too: the card IS the color; a stroke from the same
   family on its own background would say nothing. */
body.page-si-ca-s-arrete .rev-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}
body.page-si-ca-s-arrete .rev-carte {
  background: var(--rev-carte);
  border: none;
  border-radius: var(--r-lg);
  padding: 1.7rem 1.6rem;
  display: flex;
  flex-direction: column;
}
body.page-si-ca-s-arrete .rev-carte h3 {
  color: var(--rev-carte-ink); font-size: 1.02rem; font-weight: 800;
  margin: 0 0 0.5rem; line-height: 1.35;
}
body.page-si-ca-s-arrete .rev-carte p {
  color: var(--rev-carte-ink); font-size: 0.92rem; line-height: 1.6; margin: 0;
}
/* What does not yet exist: deliberately paler than certainties. */
body.page-si-ca-s-arrete .rev-carte-attente { background: var(--rev-teinte); }
body.page-si-ca-s-arrete .rev-carte-attente h3,
body.page-si-ca-s-arrete .rev-carte-attente p { color: var(--rev-teinte-ink); }
/* A two-degree tilt on hover: some substance, three lines, and nothing
   that moves until hovered. */
@media (prefers-reduced-motion: no-preference) {
  body.page-si-ca-s-arrete .rev-carte { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  body.page-si-ca-s-arrete .rev-carte:hover {
    transform: perspective(700px) rotateX(2deg) translateY(-3px);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--turquoise-900) 22%, transparent);
  }
}

/* ── Panels: the shape conveys meaning before the title ───────────────────── */
/* Square = information, service. Triangle = warning, it is not guaranteed.
   56 px, not 18: an icon the size of the text does not get noticed. */
body.page-si-ca-s-arrete .rev-panneau {
  flex: 0 0 auto; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rev-panneau); color: var(--rev-panneau-ink);
}
body.page-si-ca-s-arrete .rev-panneau svg { width: 28px; height: 28px; }
body.page-si-ca-s-arrete .rev-panneau-carre { border-radius: 12px; }
body.page-si-ca-s-arrete .rev-panneau-triangle {
  clip-path: polygon(50% 4%, 100% 96%, 0 96%);
  border-radius: 0;
  align-items: flex-end;
  padding-bottom: 6px;
}
body.page-si-ca-s-arrete .rev-panneau-triangle svg { width: 24px; height: 24px; }

/* ── The single next step, on the flat color ──────────────────────────────────── */
body.page-si-ca-s-arrete .rev-suite .rev-cta {
  background: none; border: none; padding: 0; max-width: 700px;
}
/* Specificity deliberately increased: the closing block text is set elsewhere by
   « body.comp .compo-cta p » (0,3,3 in dark, 0,4,3 in light). Below that, my
   ink was a dead declaration and the a2a2a2 gray fell to 2.08 on
   the flat area — measured, not calculated. */
body.comp.page-si-ca-s-arrete .rev-suite .compo-cta.rev-cta h2,
body.comp.page-si-ca-s-arrete .rev-suite .compo-cta.rev-cta p { color: var(--rev-profond-ink); }
/* The button is NOT repainted here: signature-premium.css:484 enforces
   « background: var(--sr-navy-900) !important » on every .btn-primary of the site.
   A color written here would be another dead declaration, and another !important
   would be the wrong answer. The button therefore keeps the style guide's navy,
   and a BORDER separates it from the flat color: sable-50 measures 6.93 on
   turquoise-800 (light) and 5.05 on turquoise-700 (dark). Without it, navy
   on the flat color reaches only 2.12 and the page's only next step gets lost. */
body.page-si-ca-s-arrete .rev-btn { border: 2px solid var(--sable-50); }
html body.comp.page-si-ca-s-arrete .rev-suite .rev-cta p { color: var(--rev-profond-ink); }
html body.comp.page-si-ca-s-arrete .rev-suite .rev-btn { color: var(--sable-50); }

@media (max-width: 560px) {
  body.page-si-ca-s-arrete .rev-titre { gap: 0.8rem; font-size: 1.3rem; }
  body.page-si-ca-s-arrete .rev-panneau { width: 48px; height: 48px; }
  body.page-si-ca-s-arrete .rev-panneau svg { width: 24px; height: 24px; }
}