*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0f2544;
  --navy2:#1a3a6b;
  --blue:#3f5d82;
  --blue-l:#e8f0fb;
  --blue-ll:#f0f5fd;
  --slate:#64748b;
  --slate-l:#94a3b8;
  --text:#1a2332;
  --white:#ffffff;
  --off:#f8fafc;
  --border:#e2e8f0;
  --border2:#cbd5e1;
  --orange:#e85d20;
  --orange-l:#fff4ef;
  /* Gouttière latérale responsive : pleine largeur du navigateur, sans cap centré. */
  --gx:clamp(1.25rem,4vw,4rem);

  /* ── Tokens Phase 2 (harmonisation du corps des pages) ───────────────────── */
  /* Échelle de rayons unique : finis les 6/7/11/20px ad hoc. pill = pastilles/boutons. */
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-pill:100px;
  /* Rythme vertical des sections (la marge latérale, elle, passe par --gx). */
  --sp-section:5rem;
  /* Accent par défaut = bleu marque. Surchargé par secteur via body.sec-* (ci-dessous). */
  --accent:var(--blue);
  --accent-soft:var(--blue-ll);
}

/* Couleur de signature par secteur — alignée sur la palette du menu (chrome.js).
   Branchée sur les classes body.page-* DÉJÀ présentes → correcte dès le premier
   rendu (zéro flash), aucune modification du HTML nécessaire. Les pages utilisent
   var(--accent)/var(--accent-soft) au lieu de couleurs en dur (sauf couleurs
   sémantiques : vert = écologie/éco-conduite, rouge = danger, etc. — conservées). */
body.page-entreprises  { --accent:#3f5d82; --accent-soft:#eff6ff; }
body.page-associations { --accent:#16a34a; --accent-soft:#f0fdf4; }
body.page-collectivites{ --accent:#ea580c; --accent-soft:#fff7ed; }
body.page-particuliers { --accent:#db2777; --accent-soft:#fdf2f8; }
body.page-ecoles       { --accent:#7c3aed; --accent-soft:#faf5ff; }
html{scroll-behavior:smooth;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--navy);color:var(--text);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;margin:0;padding:0}

/* ── Page loader (splash) ─────────────────────────────────────────────────── */
/* Invisible par défaut, apparaît après 150ms — pas de flash sur les chargements rapides */
#page-loader{position:fixed;inset:0;background:var(--white);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem;visibility:hidden;opacity:0;animation:plShow 0s ease 0.15s forwards;transition:opacity 0.35s ease,visibility 0.35s ease}
#page-loader.loaded{animation:none;opacity:0;visibility:hidden;pointer-events:none}
@keyframes plShow{to{visibility:visible;opacity:1}}
#page-loader-icon{width:68px;height:68px}
/* plPulse retirée 2026-05-24 — préférence Julien : logo statique */
.page-loader-bar{width:140px;height:3px;background:var(--border);border-radius:var(--r-pill);overflow:hidden;position:relative}
.page-loader-bar::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:var(--blue);border-radius:var(--r-pill);animation:plBar 1.3s ease-in-out infinite}
@keyframes plBar{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
[data-theme="dark"] #page-loader{background:#0f172a}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:0 var(--gx)}
.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(--slate);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{background:var(--navy);color:var(--white);padding:0.5rem 1.25rem;border-radius:var(--r-sm);font-size:0.85rem;font-weight:600;text-decoration:none;transition:background 0.15s}
.nav-cta:hover{background:var(--navy2)}

/* HERO */
.hero{position:relative;overflow:hidden;padding:9rem var(--gx) 5rem;background:var(--white);border-bottom:1px solid var(--border)}
/* Fond saisonnier ANIMÉ du hero : deux nappes de couleurs (teinte de la saison)
   qui dérivent lentement façon « aurore », comme le fond de l'app. Couches
   ::before/::after derrière le contenu ; classe body.season-X posée par seasonal.js. */
.hero::before,.hero::after{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;will-change:transform}
.hero::before{opacity:.30;animation:heroDriftA 19s ease-in-out infinite alternate}
.hero::after{opacity:.26;animation:heroDriftB 24s ease-in-out infinite alternate}
@keyframes heroDriftA{from{transform:translate3d(-8%,-7%,0) scale(1.15)}to{transform:translate3d(8%,7%,0) scale(1.4)}}
@keyframes heroDriftB{from{transform:translate3d(8%,7%,0) scale(1.35) rotate(10deg)}to{transform:translate3d(-8%,-7%,0) scale(1.15) rotate(-10deg)}}
body.season-spring .hero::before{background:radial-gradient(46% 60% at 24% 30%,rgba(134,239,172,.42),transparent 72%),radial-gradient(44% 56% at 76% 72%,rgba(253,224,150,.36),transparent 72%)}
body.season-spring .hero::after{background:radial-gradient(42% 54% at 82% 24%,rgba(244,114,182,.40),transparent 72%),radial-gradient(42% 54% at 18% 82%,rgba(196,181,253,.38),transparent 72%)}
body.season-summer .hero::before{background:radial-gradient(46% 60% at 24% 30%,rgba(251,191,36,.40),transparent 72%),radial-gradient(44% 56% at 76% 72%,rgba(251,146,60,.36),transparent 72%)}
body.season-summer .hero::after{background:radial-gradient(42% 54% at 82% 24%,rgba(125,211,252,.36),transparent 72%),radial-gradient(42% 54% at 18% 82%,rgba(94,234,212,.34),transparent 72%)}
body.season-autumn .hero::before{background:radial-gradient(46% 60% at 24% 30%,rgba(234,88,12,.40),transparent 72%),radial-gradient(44% 56% at 76% 72%,rgba(245,158,11,.38),transparent 72%)}
body.season-autumn .hero::after{background:radial-gradient(42% 54% at 82% 24%,rgba(220,38,38,.32),transparent 72%),radial-gradient(42% 54% at 18% 82%,rgba(146,93,40,.34),transparent 72%)}
body.season-winter .hero::before{background:radial-gradient(46% 60% at 24% 30%,rgba(186,230,253,.42),transparent 72%),radial-gradient(44% 56% at 76% 72%,rgba(153,246,228,.34),transparent 72%)}
body.season-winter .hero::after{background:radial-gradient(42% 54% at 82% 24%,rgba(165,180,252,.36),transparent 72%),radial-gradient(42% 54% at 18% 82%,rgba(148,163,184,.34),transparent 72%)}
[data-theme="dark"] .hero::before{opacity:.24}
[data-theme="dark"] .hero::after{opacity:.20}
.hero-inner{position:relative;z-index:1;max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr) 420px;gap:2.5rem;align-items:center}
/* Dessin de saison (colonne du milieu, entre le texte et la tuile) — ABSTRAIT :
   la saison est rendue par la COULEUR (pas d'icône). Médaillon : sphère dégradée
   + anneau fin. Couleurs pilotées par la classe body.season-* (cf. seasonal.js). */
.hero-season{position:relative;align-self:center;justify-self:center;width:100%;max-width:150px;aspect-ratio:1/1;pointer-events:none;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M10 20c5.5-2.5.8-6.4 3-10'/%3E%3Cpath d='M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z'/%3E%3Cpath d='M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z'/%3E%3C/svg%3E");background-color:#0f2544;opacity:.01;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
body.season-spring .hero-season{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M10 20c5.5-2.5.8-6.4 3-10'/%3E%3Cpath d='M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z'/%3E%3Cpath d='M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z'/%3E%3C/svg%3E")}
body.season-summer .hero-season{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E")}
body.season-autumn .hero-season{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E")}
body.season-winter .hero-season{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' x2='22' y1='12' y2='12'/%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='m20 16-4-4 4-4'/%3E%3Cpath d='m4 8 4 4-4 4'/%3E%3Cpath d='m16 4-4 4-4-4'/%3E%3Cpath d='m8 20 4-4 4 4'/%3E%3C/svg%3E")}
[data-theme="dark"] .hero-season{background-color:#cbd5e1;opacity:.01}
@media(max-width:1100px){.hero-season{display:none}}
@media(min-width:901px) and (max-width:1100px){.hero-inner{grid-template-columns:minmax(0,1fr) 420px}}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:3rem}}
.hero-tag{display:inline-flex;align-items:center;gap:0.5rem;background:var(--blue-l);color:var(--blue);padding:0.375rem 0.875rem;border-radius:var(--r-pill);font-size:0.78rem;font-weight:600;margin-bottom:1.5rem;letter-spacing:0.01em;text-transform:uppercase}
h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-0.03em;color:var(--navy);margin-bottom:1.25rem}
h1 em{font-style:normal;color:var(--blue)}
.hero-sub{font-size:1.05rem;color:var(--slate);max-width:480px;line-height:1.75;font-weight:400;margin-bottom:2rem}
.hero-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.btn-primary{background:var(--navy);color:var(--white);padding:0.875rem 1.75rem;border-radius:var(--r-sm);font-size:0.9rem;font-weight:600;text-decoration:none;transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem}
.btn-primary:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(15,37,68,0.2)}
.btn-outline{color:var(--navy);padding:0.875rem 1.5rem;border-radius:var(--r-sm);font-size:0.9rem;font-weight:600;text-decoration:none;border:1.5px solid var(--border2);transition:all 0.15s}
.btn-outline:hover{border-color:var(--navy);background:var(--off)}

/* HERO CARD */
.hero-card{background:var(--off);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;display:flex;flex-direction:column;gap:1.25rem}
.hcard-header{display:flex;align-items:center;gap:1rem}
.hcard-avatar{width:52px;height:52px;background:var(--navy);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:var(--white);flex-shrink:0}
.hcard-name{font-weight:700;font-size:1rem;color:var(--navy)}
.hcard-role{font-size:0.8rem;color:var(--slate);margin-top:2px}
.hcard-divider{height:1px;background:var(--border)}
.hcard-badges{display:flex;flex-direction:column;gap:0.625rem}
.hcard-badge{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 0.875rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm)}
.badge-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.badge-dot.blue{background:var(--blue)}
.badge-dot.green{background:#16a34a}
.badge-dot.orange{background:var(--orange)}
.badge-dot.purple{background:#7c3aed}
.badge-text{font-size:0.82rem;color:var(--text);font-weight:500}
.badge-sub{font-size:0.75rem;color:var(--slate);margin-top:1px}

/* LOGOS / STATS BAND */
.stats-band{background:var(--navy);padding:2.5rem var(--gx)}
.stats-inner{max-width:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
@media(max-width:700px){.stats-inner{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center}
.stat-val{font-size:1.75rem;font-weight:800;color:var(--white);letter-spacing:-0.02em}
.stat-val span{color:#60a5fa}
.stat-label{font-size:0.78rem;color:#94a3b8;margin-top:0.25rem;font-weight:400}

/* SECTIONS */
section{padding:var(--sp-section) var(--gx)}
.section-inner{max-width:none;margin:0 auto}
.section-tag{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:0.875rem}
.section-title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;letter-spacing:-0.025em;line-height:1.15;color:var(--navy);margin-bottom:0.875rem}
.section-sub{color:var(--slate);font-size:0.975rem;font-weight:400;max-width:500px;line-height:1.75}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem;gap:2rem;flex-wrap:wrap}

/* FORMATIONS */
.formations{background:var(--off)}
.formations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:900px){.formations-grid{grid-template-columns:1fr}}
.f-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;transition:all 0.2s;display:flex;flex-direction:column}
.f-card:hover{border-color:var(--blue);box-shadow:0 4px 20px rgba(63,93,130,0.1);transform:translateY(-2px)}
.f-icon{width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1.25rem}
.f-icon.blue{background:var(--blue-l)}
.f-icon.navy{background:#e8edf5}
.f-icon.orange{background:var(--orange-l)}
.f-title{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:0.5rem;letter-spacing:-0.01em}
.f-desc{font-size:0.875rem;color:var(--slate);line-height:1.7;flex:1;margin-bottom:1.5rem}
.f-tags{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:1.25rem}
.f-tag{background:var(--off);border:1px solid var(--border);color:var(--slate);padding:0.2rem 0.6rem;border-radius:var(--r-sm);font-size:0.72rem;font-weight:500}
.f-link{color:var(--blue);font-size:0.85rem;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:0.375rem;margin-top:auto;transition:gap 0.15s}
.f-link:hover{gap:0.6rem}

/* QUALIF */
.qualif{background:var(--white)}
.qualif-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
@media(max-width:768px){.qualif-layout{grid-template-columns:1fr}}
.q-list{display:flex;flex-direction:column;gap:0.875rem}
.q-item{display:flex;gap:1rem;padding:1.25rem;border:1px solid var(--border);border-radius:var(--r);background:var(--off);transition:border-color 0.15s}
.q-item:hover{border-color:var(--blue)}
.q-num{width:34px;height:34px;min-width:34px;background:var(--blue-l);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:700;font-size:0.8rem}
.q-name{font-weight:700;font-size:0.9rem;color:var(--navy);margin-bottom:0.25rem}
.q-detail{font-size:0.8rem;color:var(--slate);line-height:1.5}
.q-right{display:flex;flex-direction:column;gap:1.25rem}
.about-card{background:var(--navy);border-radius:var(--r-lg);padding:2rem;color:var(--white)}
.about-card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.about-avatar{width:48px;height:48px;background:rgba(255,255,255,0.15);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem}
.about-name{font-weight:700;font-size:1.05rem}
.about-role{font-size:0.8rem;color:#93c5fd;margin-top:2px}
.about-text{font-size:0.875rem;color:#cbd5e1;line-height:1.75}
.zone-card{background:var(--off);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem}
.zone-title{font-weight:700;font-size:0.875rem;color:var(--navy);margin-bottom:0.875rem;display:flex;align-items:center;gap:0.5rem}
.zone-tags{display:flex;flex-wrap:wrap;gap:0.5rem}
.z-tag{background:var(--white);border:1px solid var(--border);color:var(--slate);padding:0.3rem 0.7rem;border-radius:var(--r-sm);font-size:0.78rem;font-weight:500}
.info-card{background:var(--blue-ll);border:1px solid var(--blue-l);border-radius:var(--r);padding:1.25rem;display:flex;gap:0.875rem;align-items:flex-start}
.info-icon{font-size:1.25rem;flex-shrink:0;margin-top:2px}
.info-text{font-size:0.83rem;color:var(--navy);line-height:1.6}

/* PROCESS */
.process{background:var(--off)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.steps{grid-template-columns:1fr}}
.step{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem;position:relative}
.step-num{font-size:2.5rem;font-weight:800;color:var(--blue-l);letter-spacing:-0.04em;line-height:1;margin-bottom:1rem}
.step-title{font-weight:700;font-size:0.9rem;color:var(--navy);margin-bottom:0.5rem}
.step-desc{font-size:0.82rem;color:var(--slate);line-height:1.65}

/* CONTACT */
.contact{background:var(--white)}
.contact-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;margin-top:3rem}
@media(max-width:768px){.contact-layout{grid-template-columns:1fr}}
.c-info{display:flex;flex-direction:column;gap:2rem}
.c-item{display:flex;gap:1rem;align-items:flex-start}
.c-icon{width:40px;height:40px;min-width:40px;background:var(--blue-l);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.c-label{font-size:0.72rem;color:var(--slate-l);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-bottom:0.25rem}
.c-val{font-size:0.9rem;color:var(--text);font-weight:500}
.c-val a{color:var(--blue);text-decoration:none}
.obligation-box{background:var(--off);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:var(--r-sm);padding:1.25rem;font-size:0.83rem;color:var(--slate);line-height:1.65}
.obligation-box strong{color:var(--navy);font-weight:600}

/* FORM */
.form{display:flex;flex-direction:column;gap:1rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.f-row{grid-template-columns:1fr}}
.fg{display:flex;flex-direction:column;gap:0.35rem}
.fg label{font-size:0.8rem;color:var(--slate);font-weight:500}
.fg input,.fg select,.fg textarea{background:var(--off);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:0.7rem 1rem;color:var(--text);font-family:'Plus Jakarta Sans',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)}
.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-sm);font-size:0.9rem;font-weight:600;border:none;cursor:pointer;transition:all 0.15s;font-family:'Plus Jakarta Sans',sans-serif;width:100%;margin-top:0.5rem}
.btn-submit:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(15,37,68,0.2)}

/* CTA BAND */
.cta-band{background:var(--blue-ll);border-top:1px solid var(--blue-l);border-bottom:1px solid var(--blue-l);padding:4rem var(--gx);text-align:center}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:var(--navy);letter-spacing:-0.02em;margin-bottom:0.875rem}
.cta-band p{color:var(--slate);font-size:0.975rem;margin-bottom:2rem}

/* FOOTER */
footer{background:var(--navy);padding:0;margin:0;display:block;width:100%}

@media(max-width:768px){
  .nav-links{display:none}
  .footer-inner{flex-direction:column;text-align:center}
}


/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════ */

/* Bouton toggle */
.theme-switch {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  cursor: pointer;
}
.theme-switch-track {
  width: 40px; height: 22px;
  background: var(--border2);
  border-radius: 100px;
  position: relative;
  transition: background 0.25s;
  flex-shrink: 0;
}
.theme-switch-thumb {
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 3px; left: 3px;
  transition: transform 0.25s, background 0.25s;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
[data-theme="dark"] .theme-switch-track { background: #475569; }
[data-theme="dark"] .theme-switch-thumb { transform: translateX(18px); }

/* ── Bandeau dev (roddier.dev = dev/staging) — repris du bandeau de l'app ── */
.dev-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: #ff3b30; color: #fff;
  font-size: 0.72rem; font-weight: 700;
  text-align: center; padding: 0.35rem 1rem;
  z-index: 9999; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,0.20);
  pointer-events: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.dev-banner::before { content: '\26A0  '; }
body.has-dev-banner { padding-top: 1.85rem; }
body.has-dev-banner nav { top: 1.85rem; }
@media print { .dev-banner { display: none !important; } body.has-dev-banner { padding-top: 0 !important; } }

/* ── Interrupteur thème 3 états (Clair / Système / Sombre) — repris de l'app ── */
.theme-switch3 { box-sizing: border-box; display: inline-flex; align-items: center; position: relative; background: var(--off); border: 1px solid var(--border); border-radius: 100px; padding: 4px; height: 34px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); flex-shrink: 0; }
.theme-switch3-thumb { position: absolute; top: 4px; left: 4px; width: 32px; height: 24px; background: #fff; border-radius: 100px; box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); z-index: 1; }
[data-theme="dark"] .theme-switch3-thumb { box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); }
[data-theme="dark"] .theme-switch3-opt[aria-pressed="true"] { color: #0f2544; }
.theme-switch3-opt { position: relative; z-index: 2; width: 32px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--slate); cursor: pointer; padding: 0; border-radius: 100px; transition: color 0.2s; font-family: inherit; }
.theme-switch3-opt svg { width: 14px; height: 14px; }
.theme-switch3-opt:hover { color: var(--navy); }
.theme-switch3-opt[aria-pressed="true"] { color: var(--blue); }
[data-theme-pref="light"] .theme-switch3-thumb { transform: translateX(0); }
[data-theme-pref="auto"]  .theme-switch3-thumb { transform: translateX(32px); }
[data-theme-pref="dark"]  .theme-switch3-thumb { transform: translateX(64px); }
:root:not([data-theme-pref]) .theme-switch3-thumb { transform: translateX(32px); }

/* Variables dark — palette « soft dark » avec hiérarchie body / cartes / sous-tuiles */
[data-theme="dark"] {
  --navy: #e8eef8;         /* texte principal — warm off-white */
  --navy2: #cbd5e1;
  --blue: #7eb1f5;          /* bleu pastel plus lumineux */
  --blue-l: rgba(126,177,245,0.16);
  --blue-ll: rgba(126,177,245,0.09);
  --slate: #9aa8bd;          /* gris-bleu chaleureux pour les paragraphes */
  --slate-l: #64748b;
  --text: #e8eef8;
  --white: #1c2640;          /* fond des cartes — slate-navy élevé */
  --off: #283454;            /* fond des sous-tuiles — encore + élevé */
  --border: #354263;         /* bordures subtiles mais visibles */
  --border2: #4b5a7a;
  --orange: #fbb074;
  --orange-l: rgba(251,176,116,0.12);
}

[data-theme="dark"] body { background: #0e1729; }
[data-theme="dark"] nav { background: rgba(15,23,42,0.95); border-color: #334155; }
[data-theme="dark"] .nav-logo { color: #e2e8f0; }
/* Logo en mode sombre : INVERSION (rond blanc + route bleu nuit) — harmonisé avec l'app.
   Le rond navy se fondrait dans le fond sombre, donc on l'éclaircit en blanc. */
[data-theme="dark"] .logo-bg,
[data-theme="dark"] #page-loader-icon circle { fill: #ffffff; }
[data-theme="dark"] .nav-mobile { background: rgba(15,23,42,0.98); border-color: #334155; }
[data-theme="dark"] .nav-mobile a { color: #e2e8f0; border-color: #334155; }
[data-theme="dark"] .nav-mobile-cta { background: #3f5d82 !important; color: white !important; }
[data-theme="dark"] .nav-cta { background: #60a5fa; color: #0f172a; }
[data-theme="dark"] .hero { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .hero-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .hcard-divider { background: #334155; }
[data-theme="dark"] .hcard-badge { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .hcard-name { color: #e2e8f0; }
[data-theme="dark"] .badge-sub { color: #64748b; }
[data-theme="dark"] .stats-band { background: #1e293b; }
[data-theme="dark"] .formations { background: #0f172a; }
[data-theme="dark"] .f-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .f-title { color: #e2e8f0; }
[data-theme="dark"] .f-tag { background: #0f172a; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .qualif { background: #0f172a; }
[data-theme="dark"] .q-item { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .q-name { color: #e2e8f0; }
[data-theme="dark"] .about-card { background: #1e293b; }
[data-theme="dark"] .zone-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .z-tag { background: #0f172a; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .info-card { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.2); }
[data-theme="dark"] .info-text { color: #e2e8f0; }
[data-theme="dark"] .process { background: #0f172a; }
[data-theme="dark"] .step { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .step-title { color: #e2e8f0; }
[data-theme="dark"] .contact { background: #0f172a; }
[data-theme="dark"] .fg input,
[data-theme="dark"] .fg select,
[data-theme="dark"] .fg textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .fg label { color: #94a3b8; }
[data-theme="dark"] .obligation-box { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .btn-submit { background: #60a5fa; color: #0f172a; }
[data-theme="dark"] .cta-band, [data-theme="dark"] #cta-band { background: linear-gradient(135deg,rgba(63,93,130,0.15),rgba(22,163,74,0.12)) !important; border-color: rgba(96,165,250,0.2) !important; }
[data-theme="dark"] .cta-band h2, [data-theme="dark"] #cta-band h2 { color: #e2e8f0 !important; }
[data-theme="dark"] .cta-band p, [data-theme="dark"] #cta-band p { color: #94a3b8 !important; }
[data-theme="dark"] .cta-band h2 { color: #e2e8f0; }
[data-theme="dark"] .divider { background: linear-gradient(to right, transparent, #334155, transparent); }
[data-theme="dark"] footer { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .section-title { color: #e2e8f0; }
[data-theme="dark"] .section-tag { color: #60a5fa; }
[data-theme="dark"] #legal-overlay > div { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] #rousseau-overlay > div { background: #1e293b; }
[data-theme="dark"] .login-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .chart-table th { background: #0f172a; color: #94a3b8; }
[data-theme="dark"] .chart-table td { border-color: #1e293b; }

/* ── Corrections dark mode complémentaires ── */


/* ── Logo : animation de la route — tracé arrondi qui avance (compatible iOS) ──
   On dessine/efface le TRACÉ lui-même (stroke-dashoffset) → le bout ARRONDI de la
   route avance le long de la courbe (pas une barre droite qui glisse).
   ⚠ iOS/WebKit écrase les dashoffset NÉGATIFS. On reste donc en valeurs >= 0 :
   la longueur du tracé ≈ 1195, dasharray 1200 (période 2400, donc 0 et 2400 = « plein »).
   - 0→15%  : 1200→0   = la route se dessine de gauche à droite (entrée).
   - 15→64% : maintien (plein).
   - 64→65% : saut INSTANTANÉ 0→2400 (step-end) — invisible car 0 et 2400 = même état plein.
   - 65→90% : 2400→1200 = la route s'efface de gauche à droite (sortie), bord arrondi.
   - 90→100%: maintien (caché). Boucle vers 0% (1200=caché) sans à-coup.
   Durée 13s à garder synchro avec DUR dans resumeLogoAnim() (chrome.js). */
@keyframes roadDraw{0%{stroke-dashoffset:1200}15%{stroke-dashoffset:0}64%{stroke-dashoffset:0;animation-timing-function:step-end}65%{stroke-dashoffset:2400}90%{stroke-dashoffset:1200}100%{stroke-dashoffset:1200}}
.logo-road{stroke-dasharray:1200;stroke-dashoffset:1200;animation:roadDraw 13s ease-in-out infinite;animation-delay:.2s}

/* ── Logo dark mode — inversé ── */
[data-theme="dark"] .logo-road { stroke: #0f2544 !important; }
/* Réduire les animations : logo figé dessiné (harmonisé avec l'app). */
@media (prefers-reduced-motion: reduce) { .logo-road { animation: none; stroke-dashoffset: 0; } }

/* ── Éléments à fond navy — restent sombres en dark mode ── */
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"],
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r)"] {
  background: #0f2544 !important;
  color: white !important;
}
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div,
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r)"] div {
  color: inherit;
}

/* Newsletter section */
[data-theme="dark"] section[style*="background:var(--navy)"] {
  background: #0f2544 !important;
}
[data-theme="dark"] section[style*="background:var(--navy)"] h2 {
  color: #f1f5f9 !important;
}
[data-theme="dark"] section[style*="background:var(--navy)"] p {
  color: #94a3b8 !important;
}

/* Input newsletter en dark */
[data-theme="dark"] input[style*="background:rgba(255,255,255,0.08)"] {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: white !important;
}

/* Stats band (déjà sombre, ne pas toucher) */
[data-theme="dark"] .stats-band {
  background: #1e293b !important;
}

/* N°1 stat + calc result — textes internes */
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div[style*="color:var(--blue)"] { color: #60a5fa !important; }
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div[style*="color:#60a5fa"] { color: #60a5fa !important; }
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div[style*="color:#94a3b8"] { color: #94a3b8 !important; }


/* Textes généraux */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span { color: inherit; }
[data-theme="dark"] .section-sub { color: #94a3b8; }
[data-theme="dark"] .hero-sub { color: #94a3b8; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #e2e8f0; }

/* Icônes SVG inline (stroke/fill héritent) */
[data-theme="dark"] svg { color: inherit; }

/* Hero */
[data-theme="dark"] .hero-stat-val { color: #60a5fa; }
[data-theme="dark"] .hero-stat-label { color: #94a3b8; }
[data-theme="dark"] .badge-text { color: #e2e8f0; }
[data-theme="dark"] .btn-primary { background: #60a5fa; color: #0f172a; }
[data-theme="dark"] .btn-outline { border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .btn-outline:hover { background: #1e293b; }

/* Stats band */
[data-theme="dark"] .stat-val { color: #e2e8f0; }
[data-theme="dark"] .stat-label { color: #94a3b8; }

/* Formations */
[data-theme="dark"] .f-desc { color: #94a3b8; }
[data-theme="dark"] .f-link { color: #60a5fa; }
[data-theme="dark"] .f-icon { background: #0f172a !important; }
[data-theme="dark"] .formations-header p { color: #94a3b8; }
[data-theme="dark"] p[style*="font-size:0.72rem;font-weight:700"][style*="color:var(--navy)"] { color: #60a5fa !important; border-color: #60a5fa !important; }
[data-theme="dark"] p[style*="color:#16a34a"] { color: #4ade80 !important; border-color: #4ade80 !important; }

/* Calculateur */
[data-theme="dark"] .calc-slider { background: #334155; }
[data-theme="dark"] .calc-result { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] div[style*="background:#f8fafc"] { background: #1e293b !important; }
[data-theme="dark"] div[style*="background:white"] { background: #1e293b !important; }
[data-theme="dark"] div[style*="background:#fff"] { background: #1e293b !important; }
[data-theme="dark"] div[style*="color:#0f2544"] { color: #e2e8f0 !important; }
[data-theme="dark"] div[style*="color:#1a2332"] { color: #e2e8f0 !important; }
[data-theme="dark"] div[style*="color:#3f5d82"] { color: #60a5fa !important; }
[data-theme="dark"] div[style*="color:#64748b"] { color: #94a3b8 !important; }
[data-theme="dark"] div[style*="color:#475569"] { color: #94a3b8 !important; }
[data-theme="dark"] div[style*="color:#334155"] { color: #94a3b8 !important; }

/* Qualifications */
[data-theme="dark"] .q-num { background: #0f172a; color: #60a5fa; border-color: #334155; }
[data-theme="dark"] .q-detail { color: #94a3b8; }
[data-theme="dark"] .about-title { color: #e2e8f0; }
[data-theme="dark"] .about-sub { color: #94a3b8; }
[data-theme="dark"] .about-stat-val { color: #60a5fa; }
[data-theme="dark"] .about-stat-label { color: #94a3b8; }

/* Steps */
[data-theme="dark"] .step-num { background: #1e293b; border-color: #334155; color: #60a5fa; }
[data-theme="dark"] .step-desc { color: #94a3b8; }
[data-theme="dark"] .step-connector { background: #334155; }

/* Stats sections (grandes stats) */
[data-theme="dark"] div[style*="color:#0f2544;font-size:3rem"] { color: #60a5fa !important; }
[data-theme="dark"] div[style*="color:var(--blue);font-size:3rem"] { color: #60a5fa !important; }
[data-theme="dark"] section[style*="background:var(--white)"] { background: #0f172a !important; }
[data-theme="dark"] section[style*="background:var(--off)"] { background: #1e293b !important; }

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

/* Horloge */

[data-theme="dark"] #eco-conduite { background: #0f172a !important; }
[data-theme="dark"] #eco-conduite .section-sub { color: #94a3b8; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] { background: rgba(22,163,74,0.08) !important; border-color: rgba(22,163,74,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] h3 { color: #4ade80 !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] p { color: #86efac !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] label { color: #4ade80 !important; }
[data-theme="dark"] #eco-saving { color: #4ade80 !important; }
[data-theme="dark"] #eco-liters, [data-theme="dark"] #eco-co2 { color: #4ade80 !important; }
[data-theme="dark"] div[style*="background:white;border-radius:var(--r-lg);padding:2rem;box-shadow"] { background: #1e293b !important; }


[data-theme="dark"] #faq-overlay > div { background: #1e293b !important; }
[data-theme="dark"] #faq-overlay h2 { color: #e2e8f0 !important; }
[data-theme="dark"] #faq-overlay p { color: #94a3b8 !important; }
[data-theme="dark"] .faq-item { border-color: #334155 !important; }
[data-theme="dark"] .faq-item button { background: #0f172a !important; color: #e2e8f0 !important; }
[data-theme="dark"] .faq-item div[id^="faq-answer"] { background: #1e293b !important; color: #94a3b8 !important; }

[data-theme="dark"] #clock-time { color: white; }
[data-theme="dark"] #clock-date { color: #93c5fd; }

/* Contact */
[data-theme="dark"] .contact-info-val { color: #e2e8f0; }
[data-theme="dark"] .contact-info-label { color: #94a3b8; }
[data-theme="dark"] select option { background: #1e293b; color: #e2e8f0; }

/* Sections encadrées inline */
/* (Anciennes règles génériques div[style*="background:#XXX"] retirées :
    elles captaient aussi les icon containers et créaient des incohérences.
    Remplacées par des règles ciblées plus bas — voir « FIXES round 8 ».) */
[data-theme="dark"] input[style*="background:#f8fafc"] { background: #1e293b !important; color: #e2e8f0 !important; }

/* Footer */
[data-theme="dark"] footer { background: #0a1628 !important; display:block; width:100%; margin:0; }

/* Bouton espace stagiaire nav */
[data-theme="dark"] button[onclick="openPassRousseau()"] { background: #1e293b !important; border-color: #475569 !important; color: #e2e8f0 !important; }

/* Modals */
[data-theme="dark"] #legal-overlay > div h2,
[data-theme="dark"] #legal-overlay > div h3,
[data-theme="dark"] #legal-overlay > div p,
[data-theme="dark"] #legal-overlay > div li { color: #e2e8f0; }
[data-theme="dark"] #rousseau-overlay > div h2 { color: #e2e8f0; }
[data-theme="dark"] #rousseau-overlay > div p { color: #94a3b8; }

/* Nav links */


[data-theme="dark"] section[style*="faf5ff"] { background: linear-gradient(180deg,#0f172a 0%,rgba(124,58,237,0.05) 50%,#0f172a 100%) !important; }
[data-theme="dark"] section[style*="fff7ed"] { background: linear-gradient(180deg,#1e293b 0%,rgba(234,88,12,0.05) 50%,#1e293b 100%) !important; }
[data-theme="dark"] section[style*="eff6ff"][style*="f0fdf4"] { background: linear-gradient(180deg,#0f172a 0%,rgba(63,93,130,0.06) 40%,rgba(22,163,74,0.06) 70%,#0f172a 100%) !important; }
[data-theme="dark"] section[style*="f0fdf4"][id="eco-conduite"] { background: linear-gradient(180deg,#0f172a 0%,rgba(22,163,74,0.05) 50%,#0f172a 100%) !important; }
[data-theme="dark"] div[style*="background:#eff6ff;border:1px solid #bfdbfe"] { background: rgba(63,93,130,0.15) !important; border-color: rgba(63,93,130,0.3) !important; }
[data-theme="dark"] div[style*="background:#f0fdf4;border:1px solid #86efac"] { background: rgba(22,163,74,0.15) !important; border-color: rgba(22,163,74,0.3) !important; }
[data-theme="dark"] div[style*="background:#fff7ed;border:1px solid #fed7aa"] { background: rgba(234,88,12,0.15) !important; border-color: rgba(234,88,12,0.3) !important; }


/* Steps dark mode */
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#eff6ff"] { background: rgba(63,93,130,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] { background: rgba(22,163,74,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#fff7ed"] { background: rgba(234,88,12,0.2) !important; }
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#faf5ff"] { background: rgba(124,58,237,0.2) !important; }

[data-theme="dark"] .nav-links a { color: #94a3b8; }
[data-theme="dark"] .nav-links a:hover { color: #e2e8f0; }
[data-theme="dark"] .nav-links a.nav-active { color: #e2e8f0; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ═══════════════════════════════════════════════════════════ */

/* Hamburger menu */



@media (max-width: 700px) {
  .eco-stats-grid { grid-template-columns: 1fr !important; }
  .roi-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}


/* Footer responsive */
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* Bas footer responsive */
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; }
}





/* Relief visuel */
.section-onisr::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(63,93,130,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.f-card { transition: all 0.2s; }
.f-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.step { transition: all 0.2s; }
.step:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.06); border-color: var(--blue); }

/* ── Protections ── */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* Graphiques ONISR */
.charts-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) {
  .charts-grid { grid-template-columns: 1fr !important; }
  .charts-grid canvas { max-width: 100% !important; }
}


/* ── Dropdown menu ── */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.5;
  transition: transform 0.2s;
}
.nav-dropdown:hover > a::after { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px;
  z-index: 200;
  min-width: 220px;
}
.nav-dropdown-menu::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 12px;
}
.nav-dropdown-inner {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--off); color: var(--navy); }
.nav-dropdown-menu .dropdown-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
[data-theme="dark"] .nav-dropdown-inner {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
[data-theme="dark"] .nav-dropdown-menu a { color: #e2e8f0; }
[data-theme="dark"] .nav-dropdown-menu a:hover { background: #0f172a; }

/* Nav groupe droit */
.nav-right { gap: 0.625rem; }
@media (max-width: 900px) {
  .nav-right .theme-switch { display: flex; }
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile overlay */
.nav-mobile {
  display: none;
  position: fixed;
  top: 66px;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 2rem;
  flex-direction: column;
  gap: 0;
  z-index: 99;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.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: 10px;
  font-weight: 600;
}

/* Bascule en menu hamburger plus tôt pour éviter le débordement : 8 liens de tête
   (5 secteurs + RODAP + 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 RODAP : sinon pousse le hamburger hors écran */
  button[onclick="openPassRousseau()"] { display: none; }
}

@media (max-width: 900px) {

  /* HERO */
  .hero { padding: 7rem 1.5rem 4rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-stat-val { font-size: 1.4rem; }
  .hero-stats { gap: 1.5rem; }

  /* STATS BAND */
  .stats-inner { grid-template-columns: repeat(2,1fr); gap: 1.5rem; }

  /* FORMATIONS */
  .formations-grid { grid-template-columns: 1fr; }
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

  /* QUALIFICATIONS */
  .qualif-layout { grid-template-columns: 1fr; }

  /* STEPS */
  .steps { grid-template-columns: repeat(2,1fr); }

  /* CONTACT */
  .contact-layout { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }

  /* FOOTER */
  .footer-inner { flex-direction: column; text-align: center; gap: 0.75rem; }
  .footer-links { flex-wrap: wrap; justify-content: center; }

  /* GRAPHIQUES */
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1fr 1fr;gap:2rem"] { grid-template-columns: 1fr !important; }

  /* CALCULATEUR */
  div[style*="grid-template-columns:1fr 1.3fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1fr 1.2fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {

  /* GLOBAL */
  section { padding: 4rem 1.25rem; }
  .section-inner { padding: 0; }

  /* NAV */
  nav { padding: 0 1rem; }

  /* HERO */
  h1 { font-size: 2rem; }
  .hero-sub { font-size: 0.95rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .btn-primary, .btn-outline { width: 100%; text-align: center; justify-content: center; }
  .hero-stats { grid-template-columns: repeat(2,1fr); display: grid; gap: 1rem; }

  /* HERO CARD */
  .hero-card { padding: 1.5rem; }

  /* STATS BAND */
  .stats-band { padding: 2rem 1.25rem; }
  .stats-inner { grid-template-columns: repeat(2,1fr); gap: 1rem; }
  .stat-val { font-size: 1.4rem; }

  /* STEPS */
  .steps { grid-template-columns: 1fr; }

  /* SECTIONS STATS */
  div[style*="grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns:repeat(2,1fr);gap:1.5rem"] {
    grid-template-columns: 1fr !important;
  }

  /* PARTENAIRES */
  div[style*="display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem"] {
    grid-template-columns: 1fr !important;
  }

  /* SECTIONS STATS GRANDE */
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* QUALIFICATIONS */
  .q-right { gap: 1rem; }
  .about-card { padding: 1.5rem; }

  /* CONTACT */
  .contact { padding: 4rem 1.25rem; }
  .btn-submit { font-size: 0.875rem; }

  /* NEWSLETTER */
  div[style*="display:flex;gap:0.75rem;flex-wrap:wrap"] input { min-width: 100% !important; }

  /* FOOTER */
  footer { padding: 2rem 1.25rem; width: 100%; box-sizing: border-box; }

  /* LEGAL MODAL */
  #legal-overlay { padding: 1rem 0.75rem; }
  #legal-overlay > div { padding: 2rem 1.25rem; }

  /* ROUSSEAU MODAL */
  #rousseau-overlay { padding: 1rem; }
  #rousseau-overlay > div { padding: 1.75rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════
   STYLES COMMUNS AUX PAGES CIBLES
   (entreprises, associations, collectivites, particuliers, ecoles)
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

.fg input,.fg select,.fg textarea{background:var(--off);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:0.7rem 1rem;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;font-size:0.875rem;transition:border-color 0.15s;width:100%}

.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--blue);background:var(--white)}

.fg input::placeholder,.fg textarea::placeholder{color:var(--slate-l)}

[data-theme="dark"] .fg input,
[data-theme="dark"] .fg select,
[data-theme="dark"] .fg textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }

[data-theme="dark"] .cta-band, [data-theme="dark"] #cta-band { background: linear-gradient(135deg,rgba(63,93,130,0.15),rgba(22,163,74,0.12)) !important; border-color: rgba(96,165,250,0.2) !important; }

[data-theme="dark"] .cta-band h2, [data-theme="dark"] #cta-band h2 { color: #e2e8f0 !important; }

[data-theme="dark"] .cta-band p, [data-theme="dark"] #cta-band p { color: #94a3b8 !important; }

[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"],
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r)"] {
  background: #0f2544 !important;
  color: white !important;
}

[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r-lg)"] div,
[data-theme="dark"] div[style*="background:var(--navy);border-radius:var(--r)"] div {
  color: inherit;
}

[data-theme="dark"] input[style*="background:rgba(255,255,255,0.08)"] {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: white !important;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span { color: inherit; }

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #e2e8f0; }

[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] { background: rgba(22,163,74,0.08) !important; border-color: rgba(22,163,74,0.2) !important; }

[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] h3 { color: #4ade80 !important; }

[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] p { color: #86efac !important; }

[data-theme="dark"] div[style*="background:linear-gradient(135deg,#f0fdf4"] label { color: #4ade80 !important; }

[data-theme="dark"] #eco-liters, [data-theme="dark"] #eco-co2 { color: #4ade80 !important; }

[data-theme="dark"] #legal-overlay > div h2,
[data-theme="dark"] #legal-overlay > div h3,
[data-theme="dark"] #legal-overlay > div p,
[data-theme="dark"] #legal-overlay > div li { color: #e2e8f0; }

[data-theme="dark"] div[style*="background:linear-gradient(135deg,#eff6ff"] { background: rgba(63,93,130,0.2) !important; }

[data-theme="dark"] div[style*="background:linear-gradient(135deg,#fff7ed"] { background: rgba(234,88,12,0.2) !important; }

[data-theme="dark"] div[style*="background:linear-gradient(135deg,#faf5ff"] { background: rgba(124,58,237,0.2) !important; }

input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

.nav-dropdown-menu a.active-target {
  background: var(--blue-ll);
  color: var(--blue);
  font-weight: 700;
}

[data-theme="dark"] .nav-dropdown-menu a.active-target {
  background: rgba(96,165,250,0.15);
  color: #60a5fa;
}

.offre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.offre-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s;
}

.offre-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  border-color: var(--blue);
}

.offre-card .offre-num {
  position: absolute;
  top: -16px; left: 2rem;
  background: var(--blue);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: 100px;
}

.offre-card .offre-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  margin-top: 0.5rem;
}

.offre-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.offre-card .offre-baseline {
  font-size: 0.82rem;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 1rem;
}

.offre-card .offre-desc {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.offre-card ul.offre-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.offre-card ul.offre-list li {
  font-size: 0.83rem;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  line-height: 1.5;
}

.offre-card ul.offre-list li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}

.offre-card .offre-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--blue);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.15s;
}

.offre-card .offre-cta:hover { gap: 0.65rem; }

.offre-note {
  margin-top: 2rem;
  background: var(--blue-ll);
  border: 1px solid var(--blue-l);
  border-left: 3px solid var(--blue);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  font-size: 0.85rem;
  color: var(--navy);
  line-height: 1.65;
}

.offre-note strong { color: var(--blue); font-weight: 700; }

[data-theme="dark"] .offre-card { background: #1e293b; border-color: #334155; }

[data-theme="dark"] .offre-card h3 { color: #e2e8f0; }

[data-theme="dark"] .offre-card ul.offre-list li { color: #e2e8f0; }

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

[data-theme="dark"] .offre-note strong { color: #60a5fa; }

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

.legal-article {
  background: var(--navy);
  color: white;
  border-radius: 18px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.legal-article::before {
  content: '§';
  position: absolute;
  top: -40px; right: -20px;
  font-size: 14rem;
  font-weight: 800;
  color: rgba(255,255,255,0.05);
  line-height: 1;
  font-family: serif;
  pointer-events: none;
}

.legal-article .legal-ref {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93c5fd;
  margin-bottom: 0.75rem;
  position: relative;
}

.legal-article .legal-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 1.25rem;
  position: relative;
}

.legal-article .legal-quote {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #cbd5e1;
  font-style: italic;
  border-left: 2px solid rgba(96,165,250,0.5);
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.legal-article .legal-source {
  font-size: 0.75rem;
  color: #94a3b8;
  position: relative;
}

.legal-article .legal-source a { color: #93c5fd; text-decoration: none; }

.legal-impacts { display: flex; flex-direction: column; gap: 1rem; }

.legal-impact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
}

.legal-impact-card .impact-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.625rem;
}

.legal-impact-card .impact-icon {
  width: 40px; height: 40px;
  background: var(--blue-l);
  color: var(--blue);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.legal-impact-card .impact-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}

.legal-impact-card p {
  font-size: 0.82rem;
  color: var(--slate);
  line-height: 1.65;
}

[data-theme="dark"] .legal-article { background: #1e293b; }

[data-theme="dark"] .legal-impact-card { background: #1e293b; border-color: #334155; }

[data-theme="dark"] .legal-impact-card .impact-title { color: #e2e8f0; }

.finance-section { background: linear-gradient(180deg, var(--white) 0%, #fff7ed 50%, var(--white) 100%); }

.finance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (max-width: 768px) { .finance-grid { grid-template-columns: 1fr; } }

.finance-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.finance-card .finance-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  width: fit-content;
}

.finance-card.path-a .finance-tag { background: #dcfce7; color: #15803d; }

.finance-card.path-b .finance-tag { background: #fef3c7; color: #b45309; }

.finance-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.finance-card p {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.65;
}

.finance-card ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.finance-card ul li {
  font-size: 0.82rem;
  color: var(--text);
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.55;
}

.finance-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: 700;
}

[data-theme="dark"] .finance-card { background: #1e293b; border-color: #334155; }

[data-theme="dark"] .finance-card h3 { color: #e2e8f0; }

[data-theme="dark"] .finance-card ul li { color: #e2e8f0; }

.nav-dropdown-menu .active-target{background:var(--blue-l);color:var(--blue)!important;font-weight:600}

.nav-dropdown-menu .active-target:hover{background:var(--blue-l)}

.breadcrumb{background:var(--off);border-bottom:1px solid var(--border);padding:0.625rem 2rem;margin-top:66px;position:relative;z-index:50}

.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:'Plus Jakarta Sans',sans-serif;font-size:1.55rem;font-weight:800;line-height:1;letter-spacing:-0.02em;min-width:54px;text-align:center;flex-shrink:0}

.page-associations .hstat-val sup{font-size:0.55em;font-weight:700;vertical-align:super}

.page-associations .hstat-text{font-size:0.78rem;line-height:1.4}

.page-associations .hstat-text strong{color:var(--navy);font-weight:700;font-size:0.83rem}

.page-associations .hstat-text span{color:var(--slate);font-weight:400;font-size:0.74rem}

.page-associations .offre-card.highlighted{background:linear-gradient(180deg,#f0fdf4 0%,var(--white) 60%);border-color:#86efac;box-shadow:0 4px 18px rgba(22,163,74,0.08)}

.page-associations .offre-card.highlighted:hover{box-shadow:0 8px 24px rgba(22,163,74,0.12)}

.page-associations .offre-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#16a34a;color:white;font-size:0.7rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:0.35rem 0.875rem;border-radius:var(--r-pill);white-space:nowrap;box-shadow:0 4px 10px rgba(22,163,74,0.25)}

.page-associations .offre-card .offre-num{position:absolute !important;top:1.25rem !important;right:1.5rem !important;left:auto !important;bottom:auto !important;background:transparent !important;color:var(--border2) !important;padding:0 !important;border-radius:0 !important;font-family:'Plus Jakarta Sans',sans-serif !important;font-size:1.5rem !important;font-weight:800 !important;letter-spacing:-0.02em !important;text-transform:none !important;line-height:1 !important;width:auto !important}

.page-associations .offre-card .offre-icon{width:46px !important;height:46px !important;border-radius:12px !important;display:flex !important;align-items:center !important;justify-content:center !important;margin-bottom:0.25rem !important;margin-top:0 !important;position:relative !important;top:auto !important;left:auto !important}

.page-associations .offre-card .offre-lead{font-size:0.92rem;color:var(--text);line-height:1.6;margin-bottom:0.25rem}

.page-associations .offre-card .offre-lead em{font-style:italic;color:var(--blue);font-weight:500}

.page-associations .offre-card .offre-ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.5rem;font-size:0.84rem;color:var(--slate);line-height:1.55}

.page-associations .offre-card .offre-ul li{position:relative;padding-left:1.1rem}

.page-associations .offre-card .offre-ul li::before{content:"";position:absolute;left:0;top:0.55rem;width:5px;height:5px;border-radius:50%;background:var(--blue)}

.page-associations .offre-card.highlighted .offre-ul li::before{background:#16a34a}

.page-associations .offre-card .offre-meta{display:flex;flex-direction:column;gap:0.25rem;margin-top:0.5rem;padding-top:0.75rem;border-top:1px dashed var(--border)}

.page-associations .offre-card .offre-meta span{font-size:0.73rem;color:var(--slate-l);font-weight:500}

.page-associations .offre-card .offre-meta span::before{content:"→ ";color:var(--border2)}





.page-associations .offre-foot{display:flex;align-items:flex-start;gap:0.875rem;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem;font-size:0.88rem;line-height:1.6;margin-top:0.5rem}

.page-associations .resp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2rem}

.page-associations .resp-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-lg);padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:0.75rem;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:'Plus Jakarta Sans',sans-serif;font-size:1rem;font-weight:700;color:white;letter-spacing:-0.005em}

.page-associations .resp-tag{display:inline-block;font-size:0.7rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:#fbbf24;padding:0.3rem 0.75rem;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);border-radius:var(--r-pill);align-self:flex-start;margin-bottom:0.25rem}

.page-associations .resp-card p{font-size:0.88rem;color:rgba(255,255,255,0.78);line-height:1.65;margin:0}

.page-associations .resp-card p strong{color:white;font-weight:700}

.page-associations .resp-foot{display:flex;align-items:flex-start;gap:0.875rem;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);border-radius:var(--r-lg);padding:1.25rem 1.5rem;font-size:0.88rem;line-height:1.65;color:rgba(255,255,255,0.78)}

.page-associations .resp-foot svg{margin-top:0.25rem}

@media(max-width:800px){.finance-grid{grid-template-columns:1fr}}

.page-associations .finance-card.path-a{border-left:4px solid #16a34a}

.page-associations .finance-card.path-b{border-left:4px solid #b45309}

.page-associations .finance-tag{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate);align-self:flex-start;margin-bottom:0.25rem}

.page-associations .finance-card.path-a ul li::before{color:#16a34a}

.page-associations .finance-card.path-b ul li::before{color:#b45309}

.page-associations .finance-extras{background:var(--white);border:1px dashed var(--border2);border-radius:var(--r-lg);padding:1.5rem 1.75rem;margin-bottom:0.5rem}

.page-associations .finance-extras-head{display:flex;align-items:center;gap:0.625rem;margin-bottom:1rem;font-size:0.92rem;color:var(--navy)}

.page-associations .finance-extras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

.page-associations .fex-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.92rem;font-weight:700;color:var(--navy);margin-bottom:0.4rem}

.page-associations .finance-extras p{font-size:0.82rem;color:var(--slate);line-height:1.6;margin:0}

[data-theme="dark"] .page-associations .breadcrumb{background:#1e293b;border-color:#334155}

[data-theme="dark"] .page-associations .breadcrumb-inner{color:#94a3b8}

[data-theme="dark"] .page-associations .breadcrumb-inner a{color:#94a3b8}

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

[data-theme="dark"] .page-associations .breadcrumb-inner span[aria-current]{color:#e2e8f0}

[data-theme="dark"] .page-associations .hcard-stat{background:#0f172a;border-color:#334155}

[data-theme="dark"] .page-associations .hstat-text strong{color:#e2e8f0}

[data-theme="dark"] .page-associations .hstat-text span{color:#94a3b8}

[data-theme="dark"] .page-associations .offre-section{background:#0f172a !important}

[data-theme="dark"] .page-associations .offre-card.highlighted{background:linear-gradient(180deg,rgba(22,163,74,0.12) 0%,#1e293b 60%) !important;border-color:rgba(134,239,172,0.3)}

[data-theme="dark"] .page-associations .offre-card .offre-lead{color:#cbd5e1}

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

[data-theme="dark"] .page-associations .offre-card .offre-ul{color:#94a3b8}

[data-theme="dark"] .page-associations .offre-card .offre-meta{border-top-color:#334155}

[data-theme="dark"] .page-associations .offre-foot{background:#1e293b;border-color:#334155;color:#cbd5e1}

[data-theme="dark"] .page-associations .offre-foot strong{color:#e2e8f0}

[data-theme="dark"] .page-associations .offre-foot span{color:#94a3b8}

[data-theme="dark"] .page-associations .offre-card .offre-num{color:#475569}

[data-theme="dark"] .cadre-resp{background:#0a1628 !important}

[data-theme="dark"] .resp-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1)}

[data-theme="dark"] .resp-title{color:white}

[data-theme="dark"] .finance-section{background:linear-gradient(180deg,#0f172a 0%,rgba(22,163,74,0.06) 50%,#0f172a 100%) !important}

[data-theme="dark"] .finance-card p{color:#cbd5e1}

[data-theme="dark"] .finance-tag{color:#94a3b8}

[data-theme="dark"] .finance-extras{background:#1e293b;border-color:#475569}

[data-theme="dark"] .finance-extras-head{color:#e2e8f0}

[data-theme="dark"] .fex-title{color:#e2e8f0}

[data-theme="dark"] .finance-extras p{color:#94a3b8}

[data-theme="dark"] .nav-dropdown-menu .active-target{background:rgba(96,165,250,0.15);color:#60a5fa !important}

.breadcrumb a {
  color: var(--slate);
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb a:hover { color: var(--blue); }

.breadcrumb-current { color: var(--navy); font-weight: 600; }

.breadcrumb-sep { color: var(--slate-l); }

[data-theme="dark"] .breadcrumb-current { color: #e2e8f0; }

.offre-price{font-size:0.82rem;color:var(--slate);margin:0.5rem 0 1rem;padding:0.5rem 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border)}

.offre-price strong{color:#be185d;font-weight:800;font-size:1rem}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 480px) {
  
  section { padding-left: 1rem; padding-right: 1rem; }
  .stats-band { padding-left: 1rem; padding-right: 1rem; }
  .hero { padding-left: 1rem; padding-right: 1rem; }
}

.calc-grid { grid-template-columns: 1fr 1fr; }

#calc-result {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  word-break: normal;
}

#result-level, #result-text, #result-cost {
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}

.advantage-grid { grid-template-columns: repeat(2, 1fr); }

[data-theme="dark"] .advantage-grid > div {
  background: #1e293b !important;
}

[data-theme="dark"] .advantage-grid > div > div:last-child > div:first-child {
  color: #c4b5fd !important;
}

[data-theme="dark"] .advantage-grid > div > div:last-child > div:last-child {
  color: #94a3b8 !important;
}


/* ── Offre 3 volets — Responsive ── */
@media (max-width: 900px) {
  .offre-grid { grid-template-columns: 1fr !important; }
  .offre-card { padding: 1.5rem !important; }
}

@media (max-width: 600px) {
  .offre-card { padding: 1.25rem !important; }
  .offre-card .offre-num { left: 1rem; font-size: 0.68rem; }
  .offre-card h3 { font-size: 1.05rem !important; }
  .offre-card .offre-desc { font-size: 0.85rem !important; }
}

/* ── Page Associations — Responsive ── */
@media (max-width: 900px) {
  .page-associations .resp-grid { grid-template-columns: 1fr !important; }
  .page-associations .offre-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .page-associations .resp-card { padding: 1.25rem !important; }
  .page-associations .offre-card .offre-num { font-size: 1.25rem !important; top: 1rem; right: 1rem; }
  .page-associations .offre-card .offre-icon { width: 40px !important; height: 40px !important; }
}
/* ── Page Associations — Override Mobile Final ── */
@media (max-width: 600px) {
  .page-associations .offre-card .offre-num {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    background: transparent !important;
    color: var(--border2) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    width: auto !important;
  }
  .page-associations .offre-card .offre-icon {
    width: 40px !important;
    height: 40px !important;
    
  }
}

/* ── Menu mobile — Items uniformes ── */
.nav-mobile a {
  display: block !important;
  padding: 0.875rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.nav-mobile a.nav-mobile-cta {
  margin-top: 1rem !important;
  background: var(--navy) !important;
  color: white !important;
  text-align: center !important;
  padding: 0.875rem !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  border: none !important;
}
[data-theme="dark"] .nav-mobile a { color: #e2e8f0 !important; border-color: #334155 !important; }
[data-theme="dark"] .nav-mobile a.nav-mobile-cta { background: #3f5d82 !important; color: white !important; }

/* ── Volet 3 highlighted — agencement avec badge centré ── */
.page-associations .offre-card.highlighted {
  padding-top: 2rem !important;
}
.page-associations .offre-badge {
  z-index: 2;
}

/* ── Volets associations — Espacement bouton CTA ── */
.page-associations .offre-card .offre-cta {
  margin-top: 1.5rem !important;
  padding-top: 0.75rem;
}

/* ── Page Particuliers — Boutons offre-cta (rose) ── */
.page-particuliers .offre-card .offre-cta {
  background: #db2777 !important;
  color: white !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 10px !important;
  justify-content: center !important;
  text-align: center !important;
  font-weight: 600 !important;
  margin-top: 1.5rem !important;
  width: 100%;
  transition: background 0.15s, transform 0.15s !important;
}
.page-particuliers .offre-card .offre-cta:hover {
  background: #be185d !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(219,39,119,0.25);
}

/* ── Lien page active dans les menus ── */
.nav-mobile a.active-target {
  background: var(--blue-l) !important;
  color: var(--blue) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding-left: 0.875rem !important;
  padding-right: 0.875rem !important;
  border-bottom: 1px solid var(--border) !important;
  position: relative;
}
.nav-mobile a.active-target::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--blue);
  border-radius: 0 2px 2px 0;
}
.nav-dropdown-menu a.active-target {
  background: var(--blue-l) !important;
  color: var(--blue) !important;
  font-weight: 700 !important;
}
[data-theme="dark"] .nav-mobile a.active-target {
  background: rgba(96,165,250,0.15) !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .nav-mobile a.active-target::before {
  background: #60a5fa;
}
[data-theme="dark"] .nav-dropdown-menu a.active-target {
  background: rgba(96,165,250,0.15) !important;
  color: #60a5fa !important;
}

/* ── Footer — Classes propres ── */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.25rem;
  margin-bottom: 3rem;
}
.footer-col-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  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.6);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover {
  color: white;
}
.footer-links a.active {
  color: #60a5fa;
  font-weight: 700;
}
.footer-links a.active:hover {
  color: #60a5fa;
}
.footer-identity-text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
}
.footer-identity-credit {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.25);
  margin-top: 1rem;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* ── Footer unifié (source unique : assets/chrome.js) ── */
.site-footer { background: var(--navy); padding: 3.5rem var(--gx) 2rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); width: 100%; margin: 0; }
.site-footer-inner { max-width: none; margin: 0 auto; }
.site-footer .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.footer-bottom-legal { font-size: 0.78rem; color: rgba(255,255,255,0.3); -webkit-user-select: text; user-select: text; }
.footer-admin-link { color: rgba(255,255,255,0.25); text-decoration: none; transition: color 0.15s; }
.footer-admin-link:hover { color: rgba(255,255,255,0.55); }
@media (max-width: 700px) { .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; } }

/* ── Section commerciale écoles ── */
.commercial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .commercial-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .commercial-grid { grid-template-columns: 1fr !important; }
}

/* ── Catégories enseignées (5 colonnes) ── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .categories-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .categories-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Comparatif coût Salarié vs Indépendant ── */
@media (max-width: 800px) {
  .cost-totals { grid-template-columns: 1fr !important; }
  .cost-details { grid-template-columns: 1fr !important; }
}

/* ── Grille cibles (index) — Responsive ── */
@media (max-width: 900px) {
  .cibles-grid > a { flex: 0 1 calc((100% - 1.25rem) / 2) !important; }
}
@media (max-width: 600px) {
  .cibles-grid > a { flex: 0 1 100% !important; }
}


/* ═══════════════════════════════════════════════════════════
   DARK MODE — Améliorations ciblées
   Corrige les conflits ' light-on-light ' liés aux backgrounds
   pastel hardcodés et donne plus de relief aux tuiles.
   ═══════════════════════════════════════════════════════════ */

/* Cartes sectorielles (À qui je m'adresse) : un peu plus claires que la section
   pour qu'elles ressortent visuellement en dark mode */
[data-theme="dark"] .cibles-grid > a[style*="background:var(--white)"] {
  background: #28324d !important;
  border-color: #3f4d70 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}

/* Liens "Découvrir l'offre →" sur ces cartes : couleurs plus lumineuses en dark */
[data-theme="dark"] .cibles-grid a span[style*="color:#3f5d82"] { color: #93c5fd !important; }
[data-theme="dark"] .cibles-grid a span[style*="color:#16a34a"] { color: #4ade80 !important; }
[data-theme="dark"] .cibles-grid a span[style*="color:#ea580c"] { color: #fbb074 !important; }
[data-theme="dark"] .cibles-grid a span[style*="color:#db2777"] { color: #f472b6 !important; }
[data-theme="dark"] .cibles-grid a span[style*="color:var(--navy)"] { color: #e8eef8 !important; }

/* Boîtes pastel à fond clair (Offre exclusive Liberty Rider, etc.) :
   on remplace par un fond sombre teinté + texte lumineux pour rester lisible */
[data-theme="dark"] [style*="background:#fff7ed"][style*="border-left:3px solid #e85d20"],
[data-theme="dark"] [style*="background:#fff7ed"][style*="color:var(--navy)"] {
  background: rgba(251,176,116,0.08) !important;
  color: #fbb074 !important;
}
[data-theme="dark"] [style*="background:#fff7ed"][style*="border-left:3px solid #e85d20"] strong {
  color: #fb923c !important;
}

/* Tags secteurs (chips) sur cartes partenaires : harmoniser avec dark
   en gardant un fond pastel adouci et un texte plus lumineux */
[data-theme="dark"] span[style*="background:#eff6ff"][style*="color:#3f5d82"] {
  background: rgba(126,177,245,0.14) !important; color: #93c5fd !important;
}
[data-theme="dark"] span[style*="background:#f0fdf4"][style*="color:#16a34a"] {
  background: rgba(74,222,128,0.14) !important; color: #4ade80 !important;
}
[data-theme="dark"] span[style*="background:#fff7ed"][style*="color:#ea580c"] {
  background: rgba(251,176,116,0.14) !important; color: #fbb074 !important;
}
[data-theme="dark"] span[style*="background:#fdf2f8"][style*="color:#db2777"] {
  background: rgba(244,114,182,0.14) !important; color: #f472b6 !important;
}
[data-theme="dark"] span[style*="background:#faf5ff"][style*="color:#7c3aed"] {
  background: rgba(192,132,252,0.14) !important; color: #c084fc !important;
}

/* Carte Coyote (bientôt) — gradient adaptatif */
[data-theme="dark"] div[style*="linear-gradient(180deg,var(--white)"][style*="border:1.5px dashed"] {
  background: linear-gradient(180deg,#1c2640 0%,#283454 100%) !important;
}

/* Process : numéros d'étape — on garde les fonds pastel mais on assombrit le texte
   pour préserver la lecture */
[data-theme="dark"] .step-num[style*="background:linear-gradient"] {
  background: rgba(126,177,245,0.18) !important;
  color: #93c5fd !important;
}

/* Newsletter dark : la section a déjà --navy bg, donc on s'assure que le formulaire
   reste lisible (déjà géré par les rules existantes) */


/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIXES additionnels (round 2)
   ═══════════════════════════════════════════════════════════ */

/* 1) Carte « Formateur indépendant - Val d'Europe » (.about-card)
   Bug : .about-card a `color:var(--white)` qui devient sombre en dark
   → nom Julien Roddier invisible sur fond sombre. On force un texte clair. */
[data-theme="dark"] .about-card { background: #1c2640 !important; color: #e8eef8 !important; }
[data-theme="dark"] .about-card .about-name { color: #e8eef8; }
[data-theme="dark"] .about-card .about-avatar { background: rgba(126,177,245,0.18); color: #e8eef8; }

/* 2) Icons des cartes secteurs (À qui je m'adresse) :
   En light, fond pastel clair + stroke coloré. En dark, on bascule sur fond
   translucide + stroke lumineux pour homogénéité avec les autres tuiles. */
[data-theme="dark"] .cibles-grid > a > div[style*="background:#eff6ff"][style*="color:#3f5d82"] {
  background: rgba(126,177,245,0.14) !important; color: #93c5fd !important;
}
[data-theme="dark"] .cibles-grid > a > div[style*="background:#f0fdf4"][style*="color:#16a34a"] {
  background: rgba(74,222,128,0.14) !important; color: #4ade80 !important;
}
[data-theme="dark"] .cibles-grid > a > div[style*="background:#fff7ed"][style*="color:#ea580c"] {
  background: rgba(251,176,116,0.14) !important; color: #fbb074 !important;
}
[data-theme="dark"] .cibles-grid > a > div[style*="background:#fdf2f8"][style*="color:#db2777"] {
  background: rgba(244,114,182,0.14) !important; color: #f472b6 !important;
}
/* Écoles de conduite — bg gris pastel + color:var(--navy) qui deviendrait
   clair en dark → SVG invisible. On bascule sur un slate translucide lisible. */
[data-theme="dark"] .cibles-grid > a > div[style*="background:#f1f5f9"][style*="color:var(--navy)"] {
  background: rgba(148,163,184,0.18) !important; color: #cbd5e1 !important;
}

/* 3) Icons du dropdown « Secteurs » dans la navbar :
   Même logique — fonds translucides cohérents en dark mode. */
[data-theme="dark"] .dropdown-icon[style*="background:#eff6ff"] {
  background: rgba(126,177,245,0.14) !important; color: #93c5fd !important;
}
[data-theme="dark"] .dropdown-icon[style*="background:#f0fdf4"] {
  background: rgba(74,222,128,0.14) !important; color: #4ade80 !important;
}
[data-theme="dark"] .dropdown-icon[style*="background:#fff7ed"] {
  background: rgba(251,176,116,0.14) !important; color: #fbb074 !important;
}
[data-theme="dark"] .dropdown-icon[style*="background:#fdf2f8"] {
  background: rgba(244,114,182,0.14) !important; color: #f472b6 !important;
}
[data-theme="dark"] .dropdown-icon[style*="background:#faf5ff"] {
  background: rgba(192,132,252,0.14) !important; color: #c084fc !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIXES round 3 : éléments .offre-* et bouton scroll-top
   ═══════════════════════════════════════════════════════════ */

/* Volet 3 mis en avant : .offre-num et .offre-icon ont background:var(--navy)
   inline (devient clair en dark) avec color:white (reste blanc) → blanc sur clair
   invisible. On force un bleu profond OPAQUE pour que les éléments ressortent
   comme des « puces » distinctes au-dessus de la carte (qui a un fond bleu très
   léger en dark mode). */
[data-theme="dark"] .offre-card .offre-num[style*="background:var(--navy)"],
[data-theme="dark"] .offre-card .offre-icon[style*="background:var(--navy)"] {
  background: #3f5d82 !important;
  color: #ffffff !important;
}

/* Bouton « Retour en haut » (scroll-top) : même bug — background:var(--navy)
   inline + color:white. On force du bleu profond pour rester visible sur fond
   sombre tout en gardant le texte blanc. */
[data-theme="dark"] #scroll-top {
  background: #3f5d82 !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(63,93,130,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIXES round 4 : Transition écologique (collectivités)
   ═══════════════════════════════════════════════════════════ */

/* Section transition-ecologique : la bande verte hardcodée #f0fdf4 au milieu
   du gradient ressort trop fort sur fond sombre. On passe en tint vert subtil. */
[data-theme="dark"] section#transition-ecologique {
  background: linear-gradient(180deg, var(--white) 0%, rgba(74,222,128,0.05) 50%, var(--white) 100%) !important;
}

/* Bloc « Vos obligations légales » : gradient vert clair → translucide */
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] {
  background: linear-gradient(135deg, rgba(74,222,128,0.08), rgba(74,222,128,0.12)) !important;
  border-color: rgba(74,222,128,0.25) !important;
}
/* Titre h3 et paragraphe d'intro du bloc */
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] h3 {
  color: #6ee7a7 !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] p {
  color: #9aa8bd !important;
}
/* Les 3 cards blanches imbriquées dans le bloc obligations */
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] div[style*="background:white"] {
  background: var(--off) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] div[style*="background:white"] div[style*="color:var(--navy)"] {
  color: #e8eef8 !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0fdf4,#dcfce7)"] div[style*="background:white"] div[style*="color:var(--slate)"] {
  color: #9aa8bd !important;
}
/* Mini icons 28x28 vert pâle dans les cards obligations */
[data-theme="dark"] div[style*="background:#dcfce7"][style*="color:#16a34a"] {
  background: rgba(74,222,128,0.20) !important;
  color: #6ee7a7 !important;
}

/* Tile « Pourquoi cette expertise est légitime » : gradient bleu clair + texte
   var(--navy) qui deviendrait invisible sur fond clair en dark.
   → translucide bleu + texte clair. */
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0f9ff,#eff6ff)"][style*="border:1.5px solid #bae6fd"] {
  background: linear-gradient(135deg, rgba(126,177,245,0.10), rgba(126,177,245,0.14)) !important;
  border-color: rgba(126,177,245,0.30) !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0f9ff,#eff6ff)"][style*="border:1.5px solid #bae6fd"] div[style*="color:var(--navy)"] {
  color: #e8eef8 !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0f9ff,#eff6ff)"][style*="border:1.5px solid #bae6fd"] div[style*="color:var(--slate)"] {
  color: #cbd5e1 !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#f0f9ff,#eff6ff)"][style*="border:1.5px solid #bae6fd"] strong[style*="color:var(--navy)"] {
  color: #93c5fd !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIX round 5 : tile CDG & CHSCT (collectivités)
   ═══════════════════════════════════════════════════════════ */
/* Bloc fond vert pastel avec bordure gauche verte → translucide en dark
   pour rester intégré au reste de la palette. */
[data-theme="dark"] div[style*="background:#f0fdf4"][style*="border-left:4px solid #16a34a"] {
  background: rgba(74,222,128,0.10) !important;
  border-left-color: #4ade80 !important;
}
[data-theme="dark"] div[style*="background:#f0fdf4"][style*="border-left:4px solid #16a34a"] div[style*="color:#16a34a"] {
  color: #6ee7a7 !important;
}
[data-theme="dark"] div[style*="background:#f0fdf4"][style*="border-left:4px solid #16a34a"] p[style*="color:#14532d"] {
  color: #d1fae5 !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIX round 6 : offre-card mises en avant avec fond pastel hardcodé
   ═══════════════════════════════════════════════════════════ */
/* particuliers.html : Volet 2 rose pastel #fdf2f8 + bordure #db2777
   ecoles-de-conduite.html : Volet 3 violet pastel #faf5ff + bordure #7c3aed
   Texte (h3, offre-desc, etc.) adapté en dark via les règles .offre-card
   existantes → mais le fond pastel reste clair = texte clair sur clair. */

[data-theme="dark"] .offre-card[style*="background:#fdf2f8"] {
  background: rgba(244,114,182,0.08) !important;
  border-color: rgba(244,114,182,0.30) !important;
}
[data-theme="dark"] .offre-card[style*="background:#faf5ff"] {
  background: rgba(192,132,252,0.08) !important;
  border-color: rgba(192,132,252,0.30) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIX round 7 : obligation-box override rose (particuliers)
   ═══════════════════════════════════════════════════════════ */
/* particuliers.html : .obligation-box surchargée avec fond rose pastel hardcodé
   → en dark, le fond reste rose clair et le texte var(--slate)/var(--navy)
   devient clair = invisible. On bascule en translucide rose. */
[data-theme="dark"] .obligation-box[style*="background:#fdf2f8"] {
  background: rgba(244,114,182,0.10) !important;
  border-color: rgba(244,114,182,0.25) !important;
  border-left-color: #f472b6 !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIXES round 8 : ecoles-de-conduite spécifique
   ═══════════════════════════════════════════════════════════ */

/* 1) Banner « Nouveau · Au-delà de la formation » :
   Gradient pastel amber→orange→rouge avec texte var(--navy)/var(--slate)
   qui devient clair en dark → invisible.
   NB : on cible via `section > div > a[href]` (et pas via le contenu de
   l'attribut style) car le hover JS modifie l'inline style et le navigateur
   sérialise les hex en rgb() — un sélecteur [style*="#fef3c7"] casserait
   au survol. La structure DOM est stable, elle. */
[data-theme="dark"] section > div > a[href="#commercial"] {
  background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(251,176,116,0.10), rgba(248,113,113,0.12)) !important;
  border-color: rgba(251,176,116,0.30) !important;
}
[data-theme="dark"] section > div > a[href="#commercial"] div[style*="color:var(--navy)"] { color: #e8eef8 !important; }
[data-theme="dark"] section > div > a[href="#commercial"] div[style*="color:var(--slate)"] { color: #cbd5e1 !important; }
/* Icon container blanc à gauche du banner */
[data-theme="dark"] section > div > a[href="#commercial"] > div:first-child {
  background: rgba(251,176,116,0.18) !important;
  color: #fbb074 !important;
}
/* Flèche → en bout de banner */
[data-theme="dark"] section > div > a[href="#commercial"] > div:last-child {
  color: #fbb074 !important;
}

/* 2) Tile « Ce qui n'apparaît jamais sur ma facture » :
   Gradient violet pastel + cards blanches imbriquées. */
[data-theme="dark"] div[style*="linear-gradient(135deg,#faf5ff,#ede9fe)"] {
  background: linear-gradient(135deg, rgba(192,132,252,0.08), rgba(192,132,252,0.14)) !important;
  border-color: rgba(192,132,252,0.30) !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#faf5ff,#ede9fe)"] h3[style*="color:#4c1d95"] {
  color: #e9d5ff !important;
}
[data-theme="dark"] div[style*="linear-gradient(135deg,#faf5ff,#ede9fe)"] div[style*="color:#6d28d9"] {
  color: #c4b5fd !important;
}
/* Les cards blanches dans .advantage-grid */
[data-theme="dark"] .advantage-grid > div[style*="background:white"] {
  background: var(--off) !important;
}
[data-theme="dark"] .advantage-grid > div[style*="background:white"] div[style*="color:#4c1d95"] {
  color: #e8eef8 !important;
}
[data-theme="dark"] .advantage-grid > div[style*="background:white"] div[style*="color:#64748b"] {
  color: #9aa8bd !important;
}

/* 3 & 4) Tiles « Salarié CDI » et « Formateur indépendant » dans .cost-totals :
   On utilise des sélecteurs positionnels (:nth-child) au lieu de matcher le
   contenu de l'attribut style (qui peut être sérialisé différemment par le
   navigateur). Plus robuste. */

/* Salarié CDI (1ʳᵉ tuile) — gradient rouge pastel */
[data-theme="dark"] .cost-totals > div:nth-child(1) {
  background: linear-gradient(135deg, rgba(248,113,113,0.10), rgba(248,113,113,0.04)) !important;
  border-color: rgba(248,113,113,0.30) !important;
}

/* Formateur indépendant (2ᵉ tuile) — gradient vert pastel */
[data-theme="dark"] .cost-totals > div:nth-child(2) {
  background: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(74,222,128,0.04)) !important;
  border-color: rgba(74,222,128,0.30) !important;
}

/* Texte des deux tuiles : montants (var(--navy)) et légendes (var(--slate))
   doivent être lumineux pour rester lisibles sur le fond translucide. */
[data-theme="dark"] .cost-totals > div div[style*="color:var(--navy)"],
[data-theme="dark"] .cost-totals #cout-salarie-total,
[data-theme="dark"] .cost-totals #cout-indep-total {
  color: #e8eef8 !important;
}
[data-theme="dark"] .cost-totals > div div[style*="color:var(--slate)"],
[data-theme="dark"] .cost-totals #cout-indep-jours {
  color: #cbd5e1 !important;
}

/* 5) Icons commerciales (.commercial-grid) — homogénéisation en dark mode.
   En light, chaque carte a une pastille de couleur. En dark, on bascule
   sur des fonds translucides cohérents pour toutes les 9 cartes. */
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#fef3c7"] {
  background: rgba(251,191,36,0.16) !important; color: #fcd34d !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#dbeafe"] {
  background: rgba(126,177,245,0.16) !important; color: #93c5fd !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#f0fdf4"] {
  background: rgba(74,222,128,0.16) !important; color: #4ade80 !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#faf5ff"] {
  background: rgba(192,132,252,0.16) !important; color: #c084fc !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#fee2e2"] {
  background: rgba(248,113,113,0.16) !important; color: #fca5a5 !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#fff7ed"] {
  background: rgba(251,176,116,0.16) !important; color: #fbb074 !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#ecfeff"] {
  background: rgba(34,211,238,0.16) !important; color: #67e8f9 !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#eef2ff"] {
  background: rgba(129,140,248,0.16) !important; color: #a5b4fc !important;
}
[data-theme="dark"] .commercial-grid > div > div[style*="width:44px"][style*="background:#f5f3ff"] {
  background: rgba(192,132,252,0.16) !important; color: #c084fc !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIX round 9 : tuile « Honnêteté intellectuelle »
   ═══════════════════════════════════════════════════════════ */
/* Fond violet très translucide + texte #4c1d95 (violet foncé) =
   illisible en dark. On éclaircit le texte pour qu'il soit lisible. */
[data-theme="dark"] div[style*="background:rgba(124,58,237,0.08)"][style*="border-left:3px solid #7c3aed"] {
  background: rgba(192,132,252,0.10) !important;
  color: #e9d5ff !important;
}
[data-theme="dark"] div[style*="background:rgba(124,58,237,0.08)"][style*="border-left:3px solid #7c3aed"] strong {
  color: #d8b4fe !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIX round 10 : tile détail Formateur indépendant
   ═══════════════════════════════════════════════════════════ */
/* La tuile détaillée (table avec les lignes Tarif journalier, Charges sociales,
   Mutuelle, Formation continue, Équipement, Total annuel) avait un gradient
   #f0fdf4 → var(--white) qui en dark donnait : haut vert clair (illisible),
   bas dark. + le row Total annuel a un fond hardcodé #f0fdf4 invisible. */
[data-theme="dark"] .cost-details > div:nth-child(2) {
  background: linear-gradient(180deg, rgba(74,222,128,0.10) 0%, var(--white) 60%) !important;
  border-color: rgba(74,222,128,0.40) !important;
}
/* Row "Total annuel" — fond hardcodé #f0fdf4 → translucide vert */
[data-theme="dark"] .cost-details > div:nth-child(2) tbody tr:last-child {
  background: rgba(74,222,128,0.14) !important;
}
/* Couleurs vert foncé (#16a34a) → vert clair lumineux pour rester lisibles
   sur le fond translucide */
[data-theme="dark"] .cost-details > div:nth-child(2) td[style*="color:#16a34a"],
[data-theme="dark"] .cost-details > div:nth-child(2) [id="cout-indep-total-detail"] {
  color: #4ade80 !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIX round 11 : row « Total annuel » côté Salarié
   ═══════════════════════════════════════════════════════════ */
/* Row "Total annuel" sur le tableau Salarié : fond #fef2f2 hardcodé
   (rouge pastel) qui reste clair en dark. */
[data-theme="dark"] .cost-details > div:nth-child(1) tbody tr:last-child {
  background: rgba(248,113,113,0.14) !important;
}
/* Le total en rouge foncé (#dc2626) doit aussi être éclairci pour rester
   lisible sur le fond translucide rouge */
[data-theme="dark"] .cost-details > div:nth-child(1) [id="cout-sal-total-detail"] {
  color: #f87171 !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — FIX round 12 : harmonisation des opacités du footer
   ═══════════════════════════════════════════════════════════ */
/* En light, le footer a un fort contraste avec la page (sombre vs blanc) →
   les textes faibles paraissent très discrets. En dark, le contraste est
   moindre → les mêmes opacités paraissent plus visibles. On baisse pour
   préserver la sensation de "discrétion". */
[data-theme="dark"] .footer-identity-credit {
  color: rgba(255,255,255,0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMBIANCE SAISONNIÈRE (year-round)
   Formes décoratives discrètes en fond, dont la teinte change selon la saison.
   Appliquées via `body.season-X` (classe posée par seasonal.js).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Conteneur des ambiances : 2 blobs fixes (haut-droite + bas-gauche), positionnés
   derrière le contenu et insensibles aux clics. */
body[class*="season-"]::before,
body[class*="season-"]::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  transition: background 1s ease;
  will-change: transform;
}
body[class*="season-"]::before {
  top: -180px; right: -180px;
  width: 540px; height: 540px;
}
body[class*="season-"]::after {
  bottom: -220px; left: -220px;
  width: 620px; height: 620px;
}

/* On désactive le pseudo dans l'admin pour ne pas interférer avec le dashboard */
body.season-spring:has(#admin-screen),
body.season-summer:has(#admin-screen),
body.season-autumn:has(#admin-screen),
body.season-winter:has(#admin-screen) {
  /* placeholder — :has() peu utile ici, mais évite tout effet sur l'admin */
}

/* ── PRINTEMPS : roses pastel + verts tendres (très diffus) ──────────────── */
body.season-spring::before { background: radial-gradient(circle, rgba(244,114,182,0.05) 0%, transparent 80%); }
body.season-spring::after  { background: radial-gradient(circle, rgba(134,239,172,0.05) 0%, transparent 80%); }

/* ── ÉTÉ : dorés chauds + ambres ─────────────────────────────────────────── */
body.season-summer::before { background: radial-gradient(circle, rgba(251,191,36,0.06) 0%, transparent 80%); }
body.season-summer::after  { background: radial-gradient(circle, rgba(251,146,60,0.05) 0%, transparent 80%); }

/* ── AUTOMNE : oranges rouille + ocres ───────────────────────────────────── */
body.season-autumn::before { background: radial-gradient(circle, rgba(234,88,12,0.05) 0%, transparent 80%); }
body.season-autumn::after  { background: radial-gradient(circle, rgba(180,83,9,0.05) 0%, transparent 80%); }

/* ── HIVER : bleus glacés + slate argenté ────────────────────────────────── */
body.season-winter::before { background: radial-gradient(circle, rgba(186,230,253,0.07) 0%, transparent 80%); }
body.season-winter::after  { background: radial-gradient(circle, rgba(148,163,184,0.05) 0%, transparent 80%); }

/* Dark mode : opacité encore réduite (contraste sombre amplifie la perception) */
[data-theme="dark"] body.season-spring::before { background: radial-gradient(circle, rgba(244,114,182,0.04) 0%, transparent 80%); }
[data-theme="dark"] body.season-spring::after  { background: radial-gradient(circle, rgba(134,239,172,0.03) 0%, transparent 80%); }
[data-theme="dark"] body.season-summer::before { background: radial-gradient(circle, rgba(251,191,36,0.04) 0%, transparent 80%); }
[data-theme="dark"] body.season-summer::after  { background: radial-gradient(circle, rgba(251,146,60,0.03) 0%, transparent 80%); }
[data-theme="dark"] body.season-autumn::before { background: radial-gradient(circle, rgba(234,88,12,0.04) 0%, transparent 80%); }
[data-theme="dark"] body.season-autumn::after  { background: radial-gradient(circle, rgba(180,83,9,0.04) 0%, transparent 80%); }
[data-theme="dark"] body.season-winter::before { background: radial-gradient(circle, rgba(186,230,253,0.04) 0%, transparent 80%); }
[data-theme="dark"] body.season-winter::after  { background: radial-gradient(circle, rgba(148,163,184,0.03) 0%, transparent 80%); }

/* ═══════════════════════════════════════════════════════════════════════════
   CERCLES DÉCORATIFS DANS LES SECTIONS — repeints en couleurs saisonnières
   On cible tout div absolu avec radial-gradient + pointer-events:none
   (le pattern des « Formes décoratives » qui parsèment les pages).
   Les couleurs originales (bleues, oranges, vertes…) sont remplacées par
   les teintes de la saison courante.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Couleur "primaire" — pour le premier cercle décoratif de chaque section */
body.season-spring section > div[style*="radial-gradient"][style*="pointer-events:none"]:first-of-type,
body.season-spring div[style*="radial-gradient"][style*="pointer-events:none"][style*="top:"] {
  background: radial-gradient(circle, rgba(244,114,182,0.05) 0%, transparent 80%) !important;
}
body.season-summer section > div[style*="radial-gradient"][style*="pointer-events:none"]:first-of-type,
body.season-summer div[style*="radial-gradient"][style*="pointer-events:none"][style*="top:"] {
  background: radial-gradient(circle, rgba(251,191,36,0.06) 0%, transparent 80%) !important;
}
body.season-autumn section > div[style*="radial-gradient"][style*="pointer-events:none"]:first-of-type,
body.season-autumn div[style*="radial-gradient"][style*="pointer-events:none"][style*="top:"] {
  background: radial-gradient(circle, rgba(234,88,12,0.05) 0%, transparent 80%) !important;
}
body.season-winter section > div[style*="radial-gradient"][style*="pointer-events:none"]:first-of-type,
body.season-winter div[style*="radial-gradient"][style*="pointer-events:none"][style*="top:"] {
  background: radial-gradient(circle, rgba(186,230,253,0.07) 0%, transparent 80%) !important;
}

/* Couleur "secondaire" — pour le second cercle (souvent en bas/gauche) */
body.season-spring div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
  background: radial-gradient(circle, rgba(134,239,172,0.05) 0%, transparent 80%) !important;
}
body.season-summer div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
  background: radial-gradient(circle, rgba(251,146,60,0.05) 0%, transparent 80%) !important;
}
body.season-autumn div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
  background: radial-gradient(circle, rgba(180,83,9,0.05) 0%, transparent 80%) !important;
}
body.season-winter div[style*="radial-gradient"][style*="pointer-events:none"][style*="bottom:"] {
  background: radial-gradient(circle, rgba(148,163,184,0.05) 0%, transparent 80%) !important;
}

/* Dark mode : opacité réduite sur les cercles décoratifs aussi */
[data-theme="dark"] body[class*="season-"] div[style*="radial-gradient"][style*="pointer-events:none"] {
  opacity: 0.7;
}

/* Sur mobile, on réduit la taille des blobs pour ne pas envahir */
@media (max-width: 700px) {
  body[class*="season-"]::before { width: 320px; height: 320px; top: -100px; right: -100px; }
  body[class*="season-"]::after  { width: 380px; height: 380px; bottom: -130px; left: -130px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PETIT ANNEAU DÉCORATIF DU HERO → icône saisonnière très discrète
   Cible le div 160x160 avec border-radius:50% positionné à top:40% des heros.
   Le bord est retiré, remplacé par un SVG d'icône saisonnière en filigrane.
   ═══════════════════════════════════════════════════════════════════════════ */
body[class*="season-"] div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
  border: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 0.04; /* fantôme — à peine perceptible */
}

/* ── PRINTEMPS : courbe ascendante (croissance) ──────────────────────────── */
body.season-spring div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M25 80 C 35 55, 65 55, 75 30' stroke='%2364748b' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") !important;
}

/* ── ÉTÉ : disque plein (plénitude, chaleur) ─────────────────────────────── */
body.season-summer div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='28' fill='%2364748b'/></svg>") !important;
}

/* ── AUTOMNE : ondulation descendante (vent, chute) ──────────────────────── */
body.season-autumn div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M20 30 Q 35 45, 50 55 T 80 75' stroke='%2364748b' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") !important;
}

/* ── HIVER : hexagone (cristal, géométrie froide) ────────────────────────── */
body.season-winter div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,18 78,34 78,66 50,82 22,66 22,34' stroke='%2364748b' stroke-width='3' fill='none' stroke-linejoin='round'/></svg>") !important;
}

/* Dark mode : on inverse le gris en blanc pour rester perceptible sur fond
   sombre, et opacité encore plus basse */
[data-theme="dark"] body[class*="season-"] div[style*="border:1.5px solid"][style*="border-radius:50%"][style*="top:40%"] {
  opacity: 0.05;
  filter: invert(1);
}