/* ============================================================
   Carbone.eco v2 — feuille de style
   Héritée du socle Agriculteurs de Vendée : polices variables auto-hébergées,
   vert d'action distinct du vert décoratif (contraste AA), animations en
   keyframes « from » uniquement, tout coupé sous prefers-reduced-motion.
   ============================================================ */
/* UNE SEULE police auto-hébergée, aucune requête vers Google : Manrope, variable
   de 400 à 800, sous-ensemble latin, 24 Ko pour toute la typographie du site.
   `--serif` pointe sur elle : le commentaire annonçait une Fraunces pour les
   titres, qui n'est ni chargée ni déclarée depuis longtemps. */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/fonts/manrope-normal-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --creme:#F4F3EE; --blanc:#FFFFFF; --encre:#0F1A14; --gris:#556356;
  /* Verts profonds : la marque (#149B0D, logo) reste réservée au logo et aux épingles.
     Action : #14532D (7,8:1 sur blanc). Fond signature : #0B2A1A. */
  --vert:#1F7A3F; --vert-cta:#14532D; --vert-fonce:#0F3D24; --vert-pale:#E4EFE7; --vert-nuit:#0B2A1A; --vert-abysse:#06170E;
  /* Deux ors, et c'est nécessaire. --or (#C9A45C) est lumineux : il ne tient
     que sur les fonds verts profonds (6,6:1 sur --vert-nuit). Sur un fond clair
     il tombe à 2,1:1, très en dessous du minimum lisible : c'est --or-texte
     (#7A5A1E, 5,4 à 6,4:1) qu'il faut y employer. Ne jamais intervertir. */
  --or:#C9A45C; --or-texte:#7A5A1E; --or-pale:#F5EEDC; --jaune:#C9A45C; --jaune-pale:#F5EEDC; --ble:#7A5A1E;
  --terre:#8C5228; --terre-pale:#F6ECE2;
  --ligne:#E1E5DC; --ombre:0 8px 24px rgba(15,26,20,.06); --ombre-lg:0 20px 50px rgba(15,26,20,.12);
  --r:18px; --wrap:1400px; --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  /* Serif d'affichage : polices système de qualité (aucun téléchargement), pour un ton éditorial. */
  --sans:'Manrope',system-ui,sans-serif; --serif:var(--sans); /* plus de serif : une seule famille */
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--sans); font-size:16.5px; line-height:1.65; background:var(--creme); color:var(--encre); min-height:100vh; display:flex; flex-direction:column; overflow-x:clip; overflow-wrap:break-word; }
main { flex:1; }
h3,h4,.num-etape,.achat-chiffres strong,.calc-total strong { font-family:var(--sans); font-weight:700; letter-spacing:-.3px; line-height:1.15; }
h1,h2,.manif-titre { font-family:var(--sans); font-weight:600; letter-spacing:-1.6px; line-height:1.06; }
h1 em, h2 em, .manif-titre em, mark { font-style:normal; font-weight:600; color:var(--or-texte); }
h1 em, h2 em, .manif-titre em { font-style:normal; color:var(--or-texte); }
.hero h1 em { color:#E6C77E; }
h1 { font-size:clamp(38px,5vw,66px); margin:0 0 20px; }
h2 { font-size:clamp(30px,3.5vw,48px); margin:0 0 18px; }
h3 { font-size:21px; font-weight:700; margin:0 0 8px; }
p { margin:0 0 14px; }
a { color:var(--vert-cta); }
img, picture { max-width:100%; display:block; }
picture img { width:100%; height:100%; object-fit:cover; }
button { cursor:pointer; font-family:inherit; font-size:inherit; }
input,select { font-family:inherit; font-size:16px; }
mark { background:none; font-style:normal; color:var(--or-texte); padding:0; }
.hero mark { color:#E6C77E; font-style:normal; }
.hero mark .mot { padding:0 .02em; }
svg.ic { width:1em; height:1em; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.14em; flex-shrink:0; }
/* Anneau de focus à deux couleurs : un cercle blanc doublé d'un cercle vert
   profond. Sur fond clair le vert est visible, sur le vert nuit du hero et du
   pied de page c'est le blanc. L'ancien anneau vert seul disparaissait
   purement et simplement sur les fonds sombres (2,3:1). */
:focus-visible { outline:3px solid #FFFFFF; outline-offset:2px; box-shadow:0 0 0 6px var(--vert-cta); border-radius:6px; }
/* …mais l'anneau tenait à une seule classe près. `.carte` et `.certif-mini`
   redéclarent `box-shadow` (leur ombre portée) avec la même spécificité (0,1,0)
   et plus bas dans la feuille : elles gagnaient, et il ne restait sur les
   vignettes de projet — les liens les plus utilisés du site, cinq par page —
   qu'un trait blanc à 1,11:1 sur le crème. On répète donc la règle avec un
   sélecteur d'élément en plus (0,1,1), qu'aucune classe ne peut écraser.
   Même dessin, même couleurs : seule la spécificité change. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline:3px solid #FFFFFF; outline-offset:2px; box-shadow:0 0 0 6px var(--vert-cta); border-radius:6px;
}
.skip { position:absolute; left:-999px; top:8px; background:var(--encre); color:#fff; padding:10px 16px; border-radius:999px; z-index:1000; }
.skip:focus { left:12px; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 32px; }
.centre { text-align:center; }
.grand { font-size:19px; }
.note, small { font-size:14px; color:var(--gris); }
.muted { color:var(--gris); }
.section { padding:104px 0; }
.section-blanc { background:var(--blanc); border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne); }
.section-head { max-width:860px; margin:0 auto 52px; text-align:center; }
.section-head h2::after { content:""; display:block; width:56px; height:2px; background:var(--or); margin:22px auto 0; border-radius:2px; }
.section-sub { font-size:18.5px; color:var(--gris); max-width:720px; margin:0 auto; }
.kicker { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:2.6px; text-transform:uppercase; color:var(--vert-fonce); margin:0 0 16px; }
.kicker .ic { color:var(--or-texte); }
.kicker-clair { color:rgba(255,255,255,.85); }
.kicker-clair .ic { color:var(--or); }
.grille-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:1000px){ .grille-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grille-3 { grid-template-columns:1fr; } }
.duo { display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.duo-figure { background:var(--vert-pale); border-radius:var(--r); padding:34px; }
.duo-figure img { width:100%; height:auto; }
.liste-check { list-style:none; padding:0; margin:18px 0 26px; display:grid; gap:10px; }
.liste-check li { display:flex; gap:12px; align-items:flex-start; }
.liste-check .ic { color:var(--vert); margin-top:5px; }

/* reveal au défilement */
.rev { opacity:0; transform:translateY(26px); filter:blur(6px); transition:opacity .8s var(--ease-out) var(--d,0s), transform .8s var(--ease-out) var(--d,0s), filter .8s var(--ease-out) var(--d,0s); }
.rev.vu { opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){ .rev { opacity:1; transform:none; filter:none; transition:none; } }

/* ---------- boutons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:999px; font-family:var(--sans); font-weight:700; letter-spacing:.1px; font-size:15.5px; padding:15px 30px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,26,20,.18); }
.btn .ic { transition:transform .25s var(--ease); }
.btn:hover .ic { transform:translateX(4px); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-vert { background:var(--vert-cta); color:#fff; }
.btn-encre { background:var(--encre); color:#fff; }
.btn-clair { background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.55); backdrop-filter:blur(6px); }
.btn-clair:hover { background:#fff; color:var(--encre); }
.btn-ligne { background:transparent; color:var(--encre); border:2px solid var(--encre); }
.btn-lg { padding:17px 34px; font-size:17px; }
.btn-bloc { width:100%; }
.btn-nav { padding:11px 22px; font-size:15px; }

/* ---------- header ---------- */
.site-header { position:sticky; top:0; z-index:500; background:rgba(246,248,243,.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(226,232,224,.8); transition:background .25s ease, border-color .25s ease; }
/* La hauteur de l'en-tête collant est nommée : le sommaire de fiche s'y
   accroche, et il s'en décalait de 17 px — ses premiers pixels passaient sous
   l'en-tête, sur le support où il est le plus utile. */
:root { --h-header:80px; }
html.defile { --h-header:64px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--h-header); }
.logo { display:flex; align-items:center; }
.logo img { height:40px; width:auto; }
.logo-clair { display:none; }
.nav { display:flex; align-items:center; gap:28px; }
.nav-link { text-decoration:none; color:var(--gris); font-weight:600; font-size:14px; letter-spacing:.6px; text-transform:uppercase; padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; }
.nav-link:hover, .nav-link.actif { color:var(--encre); border-color:var(--vert); }
.burger { display:none; background:transparent; border:1.5px solid var(--ligne); border-radius:14px; width:46px; height:46px; place-items:center; color:var(--encre); font-size:22px; }
/* Le panneau fait ~545 px de haut, il est en position absolue dans un en-tête
   collant, et il ne défilait pas : en paysage (740×360) comme sur un iPhone SE
   (320×568), « Contribuer », « Mon espace » et « Entreprises » tombaient hors
   écran, définitivement inatteignables. Il défile maintenant dans ce qui reste
   de fenêtre — svh, parce que la barre d'URL mobile mange le vh. */
.menu-panel { position:absolute; top:calc(100% + 8px); right:16px; width:min(320px,90vw); background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); box-shadow:var(--ombre-lg); padding:12px; z-index:600;
  /* `--h-bandeau` est posée par pages.js : le panneau ne commence à
     `--h-header` que s'il n'y a pas de bandeau saisonnier au-dessus. Sans
     elle, en paysage (740×360) 106 px du panneau sortaient de l'écran et
     156 px sur un iPhone SE (320×568) — « Contribuer » redevenait
     inatteignable dès qu'un bandeau s'affichait. */
  max-height:calc(100svh - var(--h-header) - var(--h-bandeau, 0px) - 24px); overflow-y:auto; overscroll-behavior:contain; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.menu-panel .mlink { display:flex; align-items:center; padding:15px 17px; border-radius:15px; font-weight:600; text-decoration:none; color:var(--encre); background:var(--creme); margin-bottom:8px; }
.menu-panel .mlink-cta { background:var(--vert-cta); color:#fff; margin-bottom:0; justify-content:center; }
/* Sur l'accueil, le header flotte sur le Hero (logo blanc) puis devient opaque au défilement */
.header-hero { position:sticky; margin-bottom:-80px; background:transparent; border-color:transparent; }
.header-hero:not(.solide) .logo-clair { display:block; }
.header-hero:not(.solide) .logo-sombre { display:none; }
.header-hero:not(.solide) .nav-link { color:rgba(255,255,255,.82); }
.header-hero:not(.solide) .nav-link:hover, .header-hero:not(.solide) .nav-link.actif { color:#fff; border-color:var(--or); }
.header-hero:not(.solide) .burger { color:#fff; border-color:rgba(255,255,255,.5); }
.header-hero.solide { background:rgba(246,248,243,.94); border-color:rgba(226,232,224,.8); }
@media (max-width:900px){ .nav { display:none; } .burger { display:grid; } }

/* ---------- Hero ---------- */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--vert-nuit); padding:120px 0 64px; isolation:isolate; }
.hero-fond { position:absolute; inset:0; z-index:-1; }
.hero-fond picture, .hero-fond img { width:100%; height:100%; object-fit:cover; }
.hero-fond::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(6,23,14,.94) 0%, rgba(8,34,20,.78) 45%, rgba(8,34,20,.5) 100%); }
.hero-fond img { transform:scale(1.06); animation:heroZoom 26s ease-out both; }
@keyframes heroZoom { from { transform:scale(1.14); } to { transform:scale(1.04); } }
.hero-grille { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero-titre { color:#fff; margin-bottom:26px; max-width:19ch; font-size:clamp(36px,4.1vw,58px); }
.hero-sub { font-size:19px; color:rgba(255,255,255,.86); max-width:560px; margin-bottom:30px; }
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:26px; }
.hero-badges { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero-chiffre { font-size:15px; color:rgba(255,255,255,.8); }
.hero-chiffre strong { color:#fff; font-size:18px; font-family:var(--sans); }
.hero-carte { position:relative; }
.hero-carte-legende { display:flex; align-items:center; gap:10px; justify-content:center; font-size:13.5px; color:rgba(255,255,255,.8); margin:10px 0 0; flex-wrap:wrap; }
.legende-sombre { color:var(--gris); justify-content:flex-start; }
.leg { width:12px; height:12px; border-radius:50%; background:var(--or); display:inline-block; box-shadow:0 0 0 3px rgba(201,164,92,.25); }
.leg-agri { background:#8FD9A0; box-shadow:0 0 0 3px rgba(143,217,160,.25); margin-left:14px; }
.legende-sombre .leg-foret { background:var(--terre); box-shadow:0 0 0 3px rgba(180,101,46,.2); }
.legende-sombre .leg-agri { background:var(--vert); box-shadow:0 0 0 3px rgba(20,155,13,.2); }

/* entrée en cascade du texte (une seule fois : classe posée par JS) */
@keyframes heroMonte { from { opacity:0; transform:translateY(22px); } }
@keyframes heroBouton { from { opacity:0; transform:translateY(16px) scale(.97); } }
@keyframes heroMot { from { opacity:0; transform:translateY(110%) rotate(2deg); } }
.hero-titre .mot { display:inline-block; }
.hero-titre .mot-cache { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.anim-hero .kicker-clair { animation:heroMonte .7s var(--ease-out) .1s both; }
.anim-hero .hero-titre .mot { animation:heroMot .9s var(--ease-out) calc(.25s + var(--i) * .055s) both; }
.anim-hero .hero-sub { animation:heroMonte .8s var(--ease-out) 1s both; }
.anim-hero .hero-ctas .btn:nth-child(1) { animation:heroBouton .6s var(--ease-out) 1.2s both; }
.anim-hero .hero-ctas .btn:nth-child(2) { animation:heroBouton .6s var(--ease-out) 1.3s both; }
.anim-hero .hero-badges { animation:heroMonte .7s var(--ease-out) 1.45s both; }
.anim-hero .hero-carte-legende { animation:heroMonte .7s var(--ease-out) 3.4s both; }

/* ---------- Carte de France (SVG inline) ----------
   1. le contour se trace (stroke-dashoffset 1 → 0, pathLength="1"),
   2. les régions apparaissent en filigrane,
   3. les projets surgissent un à un, puis pulsent. */
.fr-map { width:100%; height:auto; overflow:visible; }
.fr-regions { fill:none; stroke:rgba(255,255,255,.35); stroke-width:1.2; stroke-linejoin:round; }
.fr-fill { fill:rgba(255,255,255,.07); }
.fr-outline { fill:none; stroke:rgba(255,255,255,.92); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.fr-pin { cursor:pointer; text-decoration:none; }
.fr-halo { fill:var(--or); opacity:.28; }
.fr-dot { fill:var(--or); stroke:#fff; stroke-width:3; }
.fr-pin-agri .fr-halo { fill:#8FD9A0; }
.fr-pin-agri .fr-dot { fill:#8FD9A0; }
.fr-label { fill:#fff; font-family:var(--sans); font-weight:700; font-size:21px; paint-order:stroke; stroke:rgba(8,34,16,.55); stroke-width:6px; stroke-linejoin:round; letter-spacing:.3px; }
/* Sous 640 px, la carte est rendue autour de 340 px de large : les étiquettes
   tombent vers 7 px et plus rien n'est lisible. Les épingles et la légende
   suffisent — et la grille des projets, juste en dessous, nomme chaque commune. */
@media (max-width:640px){ .fr-label { display:none; } }
.fr-pin:hover .fr-dot, .fr-pin:focus-visible .fr-dot { stroke-width:5; }
.fr-pin:hover .fr-label { text-decoration:underline; }
.fr-anime .fr-outline { stroke-dasharray:1; stroke-dashoffset:1; animation:frTrace 2.8s cubic-bezier(.6,0,.2,1) .6s forwards; }
.fr-anime .fr-fill { opacity:0; animation:frFondu 1.6s ease 2.4s forwards; }
.fr-anime .fr-regions { opacity:0; animation:frFondu 1.6s ease 2.7s forwards; }
.fr-anime .fr-pin { opacity:0; transform-box:fill-box; transform-origin:center; animation:frPin .7s cubic-bezier(.34,1.4,.64,1) calc(3.2s + var(--i) * .2s) both; }
.fr-anime .fr-halo { animation:frPulse 3.2s ease-in-out calc(4s + var(--i) * .2s) infinite; transform-box:fill-box; transform-origin:center; }
@keyframes frTrace { to { stroke-dashoffset:0; } }
@keyframes frFondu { to { opacity:1; } }
@keyframes frPin { from { opacity:0; transform:scale(.2); } to { opacity:1; transform:none; } }
@keyframes frPulse { 0%,100% { transform:scale(.55); opacity:.35; } 50% { transform:scale(1); opacity:.12; } }
@media (prefers-reduced-motion:reduce){
  .fr-anime .fr-outline, .fr-anime .fr-fill, .fr-anime .fr-regions, .fr-anime .fr-pin, .fr-anime .fr-halo { animation:none; opacity:1; stroke-dashoffset:0; }
  .anim-hero .kicker-clair, .anim-hero .hero-titre .mot, .anim-hero .hero-sub, .anim-hero .hero-ctas .btn, .anim-hero .hero-badges, .anim-hero .hero-carte-legende, .hero-fond img { animation:none; transform:none; }
}
/* variante sur fond clair (page projets, fiche) */
.carte-cadre, .mini-carte { background:linear-gradient(160deg,#EAF3E6,#D9E9D6); border-radius:var(--r); padding:28px; }
.carte-cadre .fr-regions, .mini-carte .fr-regions { stroke:rgba(20,77,8,.25); }
.carte-cadre .fr-fill, .mini-carte .fr-fill { fill:rgba(255,255,255,.55); }
.carte-cadre .fr-outline, .mini-carte .fr-outline { stroke:var(--vert-fonce); stroke-width:2.2; }
.carte-cadre .fr-halo { fill:var(--terre); } .carte-cadre .fr-dot { fill:var(--terre); }
.carte-cadre .fr-pin-agri .fr-halo { fill:var(--vert); } .carte-cadre .fr-pin-agri .fr-dot { fill:var(--vert); }
.carte-cadre .fr-label { fill:var(--encre); stroke:rgba(255,255,255,.85); }
.mini-carte { padding:14px; }
.mini-carte .fr-label { display:none; }
.mini-carte .fr-dot { fill:var(--vert-cta); } .mini-carte .fr-halo { fill:var(--vert); animation:frPulse 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }

/* ---------- Label Bas-Carbone ---------- */
.lbc { display:inline-flex; align-items:center; gap:11px; background:var(--blanc); border:2px solid var(--vert); border-radius:14px; padding:8px 15px; text-align:left; color:var(--encre); }
.lbc-tric { width:4px; height:34px; border-radius:2px; background:linear-gradient(180deg,#000091 0 33%,#FFFFFF 33% 66%,#E1000F 66% 100%); box-shadow:0 0 0 1px var(--ligne); flex-shrink:0; }
.lbc strong { display:block; font-size:12px; letter-spacing:.5px; color:var(--vert-cta); text-transform:uppercase; line-height:1.3; }
.lbc span span { font-size:11px; color:var(--gris); display:block; line-height:1.3; }
.lbc-sm { padding:6px 12px; border-radius:12px; gap:9px; }
.lbc-sm .lbc-tric { height:28px; }
.lbc-inverse { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
.lbc-inverse strong { color:#fff; } .lbc-inverse span span { color:rgba(255,255,255,.7); }

/* ---------- piliers ---------- */
.piliers { padding:0; margin-top:-48px; position:relative; z-index:2; }
.pilier { background:var(--blanc); border-radius:var(--r); overflow:hidden; box-shadow:var(--ombre-lg); border:1px solid rgba(255,255,255,.6); display:flex; flex-direction:column; }
.pilier h2 { font-size:30px; margin-bottom:8px; }
.pilier p { color:var(--gris); margin:0; }

/* La bande de quatre chiffres et le bandeau de mots défilants vivaient ici. Ils
   n'étaient posés que sur l'accueil, et l'accueil ne les affiche plus (voir
   src/templates/home.mjs) : leurs styles partent avec eux plutôt que de rester
   dans une feuille chargée par les cinquante-deux pages du site. */

/* ---------- équivalents ---------- */
.equiv { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.equiv-card { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:22px 24px; display:flex; gap:17px; align-items:center; }
.coben-ic { width:54px; height:54px; border-radius:18px; font-size:25px; background:var(--or-pale); color:var(--ble); display:grid; place-items:center; flex-shrink:0; }
.coben-ic .ic { width:26px; height:26px; stroke-width:1.7; }
.equiv-card strong { font-family:var(--serif); font-size:27px; font-weight:400; display:block; }
.equiv-card span { font-size:13.5px; color:var(--gris); line-height:1.55; display:block; margin-top:3px; }
.galerie-note { font-size:13px; color:var(--gris); margin-top:18px; max-width:900px; }

/* ---------- cartes projets ---------- */
.carte { display:flex; flex-direction:column; background:var(--blanc); border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; border:1px solid var(--ligne); box-shadow:0 2px 10px rgba(20,35,26,.04); transition:transform .2s var(--ease), box-shadow .2s var(--ease); height:100%; }
.carte:hover { transform:translateY(-6px); box-shadow:var(--ombre-lg); border-color:transparent; }
.carte-media { position:relative; aspect-ratio:3/2; overflow:hidden; }
.carte-media .photo { height:100%; }
.carte-media img { transition:transform .6s var(--ease); }
.carte:hover .carte-media img { transform:scale(1.04); }
.tag { position:absolute; top:14px; left:14px; background:rgba(255,255,255,.94); color:var(--encre); font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; padding:6px 12px; border-radius:999px; }
.tag-agri { color:var(--vert-fonce); } .tag-foret { color:var(--terre); }
.carte-corps { padding:20px 22px 22px; display:flex; flex-direction:column; gap:4px; flex:1; }
/* Dans une rangée, le prix, la jauge et le pourcentage — les trois chiffres qui
   font la décision — flottaient à des hauteurs différentes : mesuré sur
   /projets, la jauge à 461 px du haut d'une carte, 490 px de la voisine, dont
   le titre passait sur deux lignes. L'espace libre se loge désormais au-dessus
   du prix, et tout le bas des cartes d'une rangée s'aligne. */
.carte-corps > .carte-meta { margin-top:auto; }
.carte-commune { font-size:12.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--vert-cta); }
.carte-nom { font-family:var(--serif); font-weight:600; font-size:25px; margin:0; }
.carte-region { color:var(--gris); font-size:14.5px; margin:2px 0 8px; display:flex; gap:6px; align-items:center; }
.carte-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:14px; font-weight:600; margin:0 0 14px; }
.carte-meta span:nth-child(2) { color:var(--vert-cta); }
/* ---------- jauge de financement ----------
   Même vocabulaire graphique que les autres barres du site (.jauge de la fiche,
   .route-avancement de la feuille de route) : un rail pâle, un remplissage vert
   plein, des extrémités arrondies. La barre est décorative — la phrase en
   dessous porte l'information, et la barre elle-même est annoncée aux lecteurs
   d'écran par son aria-label. */
.carte-fin { margin:0 0 14px; }
.carte-fin-barre { height:7px; border-radius:999px; background:var(--vert-pale); overflow:hidden; }
.carte-fin-barre i { display:block; height:100%; min-width:6px; border-radius:999px; background:linear-gradient(90deg,var(--vert-cta),var(--vert)); width:var(--v); }
/* Projet sans aucune contribution : le rail reste visible, mais vide et sans
   filet vert — on ne fait pas semblant qu'une première tonne est vendue. */
.carte-fin-vide i { min-width:0; background:none; }
.carte-fin p, .carte-fin-nue { margin:7px 0 0; font-size:13.5px; color:var(--gris); line-height:1.4; }
/* Deux lignes : l'état en clair, puis le détail chiffré. Même hauteur pour
   toutes les cartes de la grille, et aucun retour à la ligne accidentel. */
.carte-fin b { display:block; color:var(--encre); font-weight:700; }
.carte-fin span { display:block; font-size:12.5px; }
.carte-fin-nue { margin:0 0 14px; }

.carte-lien { margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--encre); font-family:var(--sans); }
.carte-lien .ic { color:var(--vert); transition:transform .2s; }
.carte:hover .carte-lien .ic { transform:translateX(4px); }

/* ---------- étapes ---------- */
.etapes { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,1fr); gap:18px; counter-reset:etape; }
.etape { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:26px 22px; position:relative; }
.etape-picto { width:84px; height:84px; margin-bottom:14px; }
.num-etape { position:absolute; top:18px; right:18px; font-size:15px; font-weight:800; color:var(--vert); }
.etape h3 { font-size:18.5px; margin-bottom:8px; }
.etape p { font-size:14.5px; color:var(--gris); margin:0; }

/* ---------- transparence prix ---------- */
.repart { display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:center; margin-top:34px; }
.repart svg { width:100%; height:auto; }
.repart svg circle { transition:stroke-dasharray 1.4s var(--ease-out); }
.repart:not(.vu) svg circle { stroke-dasharray:0 1000 !important; }

/* ---------- publics / manifeste / contact / confiance ---------- */
.publics { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.public-card { background:var(--creme); border:1px solid var(--ligne); border-radius:var(--r); padding:32px; }
.public-card .coben-ic { margin-bottom:16px; background:var(--vert-pale); color:var(--vert-fonce); }
.public-card p { color:var(--gris); }
.manif { background:radial-gradient(120% 120% at 100% 0%, #123B26 0%, var(--vert-nuit) 55%, var(--vert-abysse) 100%); color:#fff; border-radius:var(--r); padding:72px; position:relative; overflow:hidden; }
.manif .kicker, .manif .manif-titre em, .manif mark { color:var(--or); }
.manif .kicker .ic { color:var(--or); }
.manif-titre { font-size:clamp(30px,3.4vw,44px); margin-bottom:22px; max-width:900px; }
.manif p { color:rgba(255,255,255,.86); max-width:820px; }
.manif-preuves { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.manif-preuves span { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:9px 15px; font-size:14px; }
.manif-preuves .ic { color:var(--or); }
.manif-deco { position:absolute; right:-40px; bottom:-60px; color:rgba(255,255,255,.06); pointer-events:none; }
.contact-band { display:flex; align-items:center; gap:24px; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:26px 30px; box-shadow:var(--ombre); }
.contact-avatar { width:56px; height:56px; border-radius:50%; background:var(--vert-fonce); color:#fff; display:grid; place-items:center; font-family:var(--sans); font-weight:800; flex-shrink:0; }
.contact-band p { margin:0; flex:1; color:var(--gris); }
.contact-band p strong { display:block; color:var(--encre); font-size:18px; margin-bottom:2px; }
.bandeau-confiance { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 34px; padding:26px 32px; background:var(--blanc); border-top:1px solid var(--ligne); font-size:14.5px; color:var(--gris); }
.bandeau-confiance span:not(.lbc):not(.lbc *) { display:inline-flex; align-items:center; gap:8px; }
.bandeau-confiance .ic { color:var(--vert); }

/* ---------- bande CTA ---------- */
.bande-cta { position:relative; color:#fff; overflow:hidden; background:var(--vert-nuit); padding:110px 0; text-align:center; isolation:isolate; }
.bande-fond { position:absolute; inset:0; z-index:-1; }
.bande-fond .photo, .bande-fond img { width:100%; height:100%; object-fit:cover; }
.bande-fond::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,23,14,.82), rgba(6,23,14,.7)); }
.bande-inner h2 { color:#fff; }
.bande-inner p { max-width:700px; margin:0 auto 28px; font-size:18px; color:rgba(255,255,255,.86); }
.bande-inner .hero-ctas { justify-content:center; margin:0; }
.bande-cta-verte { background:var(--vert-cta); padding:80px 0; }

/* ---------- calculateur ---------- */
.calc-section .section-head { text-align:left; margin:0 0 30px; }
.calc-section .section-sub { margin:0; }
.calc { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:start; }
.calc-panneau { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:30px; }
.calc-onglets { display:flex; gap:8px; background:var(--creme); padding:6px; border-radius:999px; margin-bottom:24px; }
.calc-onglet { flex:1; border:0; background:transparent; border-radius:999px; padding:11px 14px; font-weight:700; font-family:var(--sans); color:var(--gris); }
.calc-onglet[aria-selected="true"] { background:var(--encre); color:#fff; }
.champ { display:grid; gap:6px; margin-bottom:18px; }
.champ label, .champ > span { font-weight:600; font-size:15px; }
.champ input, .champ select { border:1.5px solid var(--ligne); border-radius:14px; padding:13px 15px; background:var(--creme); width:100%; }
/* Le halo vert à 12 % d'opacité vaut ~1,15:1 sur blanc : c'est un accent, pas
   un marqueur de focus. Il restait pourtant seul, `outline:none` ayant supprimé
   l'anneau de :focus-visible — et un anneau blanc sur un champ blanc n'aurait
   de toute façon rien montré. Le champ prend donc un anneau vert profond
   (var(--vert-cta)), et garde son halo. Au clavier seulement : au clic à la
   souris, le halo suffisait. */
.champ input:focus, .champ select:focus { border-color:var(--vert); outline:none; box-shadow:0 0 0 4px rgba(20,155,13,.12); }
.champ input:focus-visible, .champ select:focus-visible, .contrib-form textarea:focus-visible {
  border-color:var(--vert); outline:3px solid var(--vert-cta); outline-offset:2px; box-shadow:0 0 0 4px rgba(20,155,13,.12);
}
.champ-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.choix { display:flex; flex-wrap:wrap; gap:8px; }
.choix label { display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--ligne); background:var(--creme); border-radius:999px; padding:9px 15px; cursor:pointer; font-size:14.5px; font-weight:600; }
.choix input { position:absolute; opacity:0; width:0; height:0; }
.choix input:checked + span { color:var(--vert-fonce); }
.choix label:has(input:checked) { border-color:var(--vert); background:var(--vert-pale); }
.choix label:has(input:focus-visible) { outline:3px solid var(--vert); outline-offset:2px; }
.calc-resultat { background:linear-gradient(160deg, #123B26, var(--vert-nuit)); color:#fff; border-radius:var(--r); padding:30px; position:sticky; top:100px; }
.calc-total { font-size:15px; color:rgba(255,255,255,.75); }
.calc-total strong { display:block; font-family:var(--serif); font-weight:600; font-size:clamp(44px,4.4vw,62px); color:#fff; letter-spacing:-1px; line-height:1; margin:6px 0 4px; }
.calc-total em { font-style:normal; color:var(--or); font-weight:700; }
.calc-detail { list-style:none; padding:0; margin:22px 0; display:grid; gap:8px; font-size:14.5px; }
.calc-detail li { display:flex; justify-content:space-between; gap:14px; border-bottom:1px dashed rgba(255,255,255,.2); padding-bottom:8px; }
.calc-detail li span:last-child { font-weight:700; white-space:nowrap; }
.calc-vers { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:16px; padding:16px 18px; margin-top:8px; font-size:15px; }
.calc-vers strong { color:var(--or); }
.calc-resultat .btn { margin-top:18px; }
.calc-methode { margin-top:34px; }
.calc-methode details { background:var(--blanc); border:1px solid var(--ligne); border-radius:16px; padding:14px 20px; margin-bottom:10px; }
.calc-methode summary { font-weight:700; cursor:pointer; font-family:var(--sans); }
.calc-methode p { font-size:14.5px; color:var(--gris); margin:10px 0 4px; }
.volume-choisi { background:var(--jaune-pale); border:1px solid #F0D48A; border-radius:16px; padding:14px 16px; margin:0 0 14px; font-size:14.5px; }
.volume-choisi strong { font-family:var(--sans); font-size:18px; }

/* ---------- page en-tête, fiche projet ---------- */
.page-head { padding:64px 0 20px; }
.page-head .section-head { margin-bottom:0; }
.duo-carte { align-items:center; }
.fil { font-size:14px; color:rgba(255,255,255,.8); margin-bottom:16px; }
.fil a { color:#fff; text-decoration:none; }
.fiche-hero { position:relative; overflow:hidden; min-height:min(62svh, 560px); display:flex; align-items:flex-end; color:#fff; background:var(--vert-nuit); padding:130px 0 48px; isolation:isolate; }
.fiche-fond { position:absolute; inset:0; z-index:-1; }
.fiche-fond picture, .fiche-fond .photo, .fiche-fond img { width:100%; height:100%; object-fit:cover; }
.fiche-fond::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,34,16,.35) 0%, rgba(8,34,16,.85) 100%); }
.fiche-hero .tag { position:static; display:inline-block; margin-bottom:14px; }
.fiche-hero h1 { color:#fff; margin-bottom:8px; }
.fiche-lieu { font-size:19px; color:rgba(255,255,255,.88); display:flex; gap:8px; align-items:center; margin-bottom:22px; }
.operateur { display:inline-flex; align-items:center; gap:14px; font-size:14px; color:rgba(255,255,255,.8); }
.operateur img { height:34px; width:auto; }
/* `min-width:0` sur les deux colonnes, et ce n'est pas une précaution de
   style. Un élément de grille a par défaut une largeur minimale automatique
   égale à son contenu minimal : le tableau du peuplement (700 px) et la frise
   (600 px), pourtant enfermés dans un cadre à défilement, la poussaient à 700 px
   dans un écran de 375. Rien ne se voyait, parce que `overflow-x:clip` sur
   <html> et <body> coupe le débordement au lieu de le montrer : la colonne
   entière était simplement rognée à droite sur mobile. */
.fiche-grille { display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:start; }
.fiche-grille > * { min-width:0; }
.fiche-principal h2 { font-size:32px; margin-top:44px; }
.fiche-principal h2:first-child { margin-top:0; }
.mot-operateur { margin:34px 0; background:var(--vert-pale); border-left:5px solid var(--vert); border-radius:0 var(--r) var(--r) 0; padding:24px 28px; }
.mot-operateur p { font-size:19px; margin-bottom:12px; }
.mot-operateur footer { display:flex; flex-direction:column; font-size:14px; color:var(--gris); }
.pastilles { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.pastilles li { display:inline-flex; align-items:center; gap:8px; background:var(--blanc); border:1px solid var(--ligne); border-radius:999px; padding:10px 16px; font-weight:600; font-size:15px; }
.pastilles .ic { color:var(--vert); }
.cobenefs { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.cobenef { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:22px; }
.cobenef .coben-ic { background:var(--vert-pale); color:var(--vert-fonce); margin-bottom:12px; }
.cobenef strong { display:block; text-transform:uppercase; letter-spacing:1px; font-size:13px; color:var(--vert-fonce); margin-bottom:6px; }
.cobenef p { font-size:14.5px; color:var(--gris); margin:0; }
.fiche-aside { position:sticky; top:96px; align-self:start; }
.achat-carte { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:26px; box-shadow:var(--ombre); }
.achat-label { display:block; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gris); margin-bottom:12px; }
.achat-chiffres { margin:20px 0; display:grid; gap:10px; }
.achat-chiffres div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-bottom:1px dashed var(--ligne); padding-bottom:8px; }
.achat-chiffres dt { color:var(--gris); font-size:14px; }
.achat-chiffres dd { margin:0; text-align:right; }
.achat-chiffres strong { font-size:24px; }
.fiche-loc { display:flex; gap:8px; align-items:center; font-weight:600; }
.fiche-loc .ic { color:var(--vert); }

/* ---------- à propos ---------- */
.apropos-grille { display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:start; }
.sommaire { position:sticky; top:100px; display:grid; gap:22px; }
.som-groupe { display:grid; gap:4px; }
.som-groupe strong { font-family:var(--sans); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--vert-fonce); margin-bottom:6px; }
.som-groupe a { text-decoration:none; color:var(--gris); padding:7px 12px; border-left:3px solid var(--ligne); font-size:15px; }
.som-groupe a:hover, .som-groupe a.actif { color:var(--encre); border-color:var(--vert); }
.apropos-contenu { max-width:820px; }
.apropos-groupe + .apropos-groupe { margin-top:56px; }
.apropos-section { scroll-margin-top:110px; margin-bottom:44px; }
.apropos-section h2 { font-size:34px; }
.apropos-section p { font-size:17px; }
.formule { font-family:var(--sans); font-weight:700; background:var(--vert-pale); border-radius:16px; padding:18px 22px; }

/* ---------- pages légales ---------- */
.legal { max-width:860px; }
.legal h2 { font-size:22px; margin-top:38px; }
.legal p { font-size:16px; }

/* ---------- footer ---------- */
.site-footer { background:var(--vert-abysse); color:rgba(255,255,255,.78); margin-top:auto; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding:64px 32px 40px; }
.footer-marque img { height:38px; width:auto; margin-bottom:18px; }
.footer-marque p { font-size:15px; max-width:420px; }
.footer-nav { display:grid; gap:2px; align-content:start; font-size:15px; }
.footer-nav strong { color:#fff; font-family:var(--sans); margin-bottom:4px; }
/* 26 px de haut et 9 px d'écart : au pouce, en marchant, on visait « Conditions
   générales » et on touchait « Cookies ». On vise 44 px de zone tactile sans
   écarter visuellement les liens — le remplissage fait le travail. */
.footer-nav a { color:rgba(255,255,255,.82); text-decoration:none; display:inline-flex; gap:8px; align-items:center; min-height:44px; }
.footer-nav a:hover { color:#fff; text-decoration:underline; }
.footer-bas { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.15); padding:20px 32px 28px; font-size:13.5px; color:rgba(255,255,255,.6); }

/* ---------- cookies (n'apparaît que si un identifiant d'audience est configuré) ---------- */
.cookies { position:fixed; left:16px; right:16px; bottom:16px; z-index:900; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); box-shadow:var(--ombre-lg); padding:20px 22px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; max-width:820px; margin:0 auto; }
.cookies p { margin:0; flex:1; font-size:14.5px; min-width:260px; }
.cookies .btn { padding:11px 20px; font-size:14.5px; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .etapes { grid-template-columns:repeat(3,1fr); }
  .fiche-grille { grid-template-columns:1fr 340px; gap:36px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .wrap { padding:0 22px; }
  .section { padding:64px 0; }
  .hero { padding:110px 0 56px; min-height:0; }
  .hero-grille, .duo, .calc, .repart, .publics, .apropos-grille { grid-template-columns:1fr; }
  .hero-carte { max-width:520px; margin:0 auto; }
  .hero-titre { max-width:none; }
  .piliers { margin-top:-24px; }
  .equiv { grid-template-columns:1fr 1fr; }
  .fiche-grille { grid-template-columns:1fr; }
  .fiche-aside { position:static; }
  .sommaire { position:static; display:flex; flex-wrap:wrap; gap:10px 18px; }
  .som-groupe { display:contents; }
  .som-groupe strong { display:none; }
  .som-groupe a { border:1px solid var(--ligne); border-radius:999px; background:var(--blanc); }
  .manif { padding:40px 28px; }
  .contact-band { flex-direction:column; text-align:center; }
  .calc-resultat { position:static; }
}
@media (max-width:600px){
  body { font-size:16px; }
  .wrap { padding:0 16px; }
  .hero-ctas .btn { width:100%; }
  .equiv, .etapes { grid-template-columns:1fr; }
  .champ-2 { grid-template-columns:1fr; }
  .fr-label { font-size:26px; }
  .footer-grid { grid-template-columns:1fr; gap:28px; padding:44px 16px 28px; }
  .footer-bas { padding:16px; }
  .cookies { left:8px; right:8px; bottom:8px; }
}


/* ---------- promesses (trois engagements : en France, certifié, traçable) ----------
   Elles étaient cinq, en colonnes étroites où rien ne hiérarchisait rien. Trois
   tiennent la ligne, et `auto-fit` les range en trois, deux puis une sans qu'une
   requête média ait à deviner le point de bascule. La section est sur fond blanc
   pour couper la suite de crème : les cartes prennent le crème en retour, sinon
   blanc sur blanc ne dessinerait plus de carte. */
.promesses { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:18px; margin-top:34px; }
.promesse { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:26px 22px; }
.section-blanc .promesse { background:var(--creme); border-color:transparent; }
.promesse .coben-ic { background:var(--vert-pale); color:var(--vert-fonce); margin-bottom:14px; }
.promesse h3 { font-size:20px; margin-bottom:6px; }
.promesse p { font-size:14.5px; color:var(--gris); margin:0; }

/* ---------- aperçu de certificat ---------- */
.certif-apercu { display:flex; justify-content:center; }
.certif-carte { width:min(100%,440px); background:#fff; border:1px solid var(--ligne); border-radius:14px; box-shadow:var(--ombre-lg); padding:26px 28px; transform:rotate(-1.5deg); position:relative; }
.certif-carte::before { content:""; position:absolute; inset:10px; border:1px solid var(--vert-pale); border-radius:10px; pointer-events:none; }
.certif-tete { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:2px solid var(--vert); padding-bottom:12px; margin-bottom:18px; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--vert-fonce); }
.certif-tete img { height:26px; width:auto; }
.certif-corps { display:grid; gap:2px; }
.certif-label { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gris); margin-top:10px; }
.certif-corps strong { font-family:var(--sans); font-size:19px; }
.certif-pied { display:flex; align-items:center; gap:14px; margin-top:22px; padding-top:14px; border-top:1px dashed var(--ligne); font-size:12px; color:var(--gris); }
.certif-qr { width:64px; height:64px; flex-shrink:0; border-radius:6px; background:
  linear-gradient(90deg,var(--encre) 0 25%,transparent 25% 37%,var(--encre) 37% 50%,transparent 50% 62%,var(--encre) 62% 75%,transparent 75%) 0 0/100% 12%,
  linear-gradient(90deg,transparent 0 12%,var(--encre) 12% 25%,transparent 25% 50%,var(--encre) 50% 62%,transparent 62% 87%,var(--encre) 87%) 0 24%/100% 12%,
  linear-gradient(90deg,var(--encre) 0 37%,transparent 37% 50%,var(--encre) 50% 75%,transparent 75%) 0 48%/100% 12%,
  linear-gradient(90deg,transparent 0 25%,var(--encre) 25% 37%,transparent 37% 62%,var(--encre) 62% 87%,transparent 87%) 0 72%/100% 12%,
  linear-gradient(90deg,var(--encre) 0 25%,transparent 25% 37%,var(--encre) 37% 62%,transparent 62% 75%,var(--encre) 75%) 0 100%/100% 12%; background-repeat:no-repeat; }
.certif-pied b { color:var(--encre); }

/* ---------- formulaire de contribution ---------- */
.fil-sombre { color:var(--gris); }
.fil-sombre a { color:var(--vert-cta); }
.contrib-grille { display:grid; grid-template-columns:1fr 400px; gap:40px; align-items:start; }
.contrib-form { display:grid; gap:22px; }
.bloc { border:1px solid var(--ligne); background:var(--blanc); border-radius:var(--r); padding:26px 28px 22px; margin:0; min-width:0; }
.bloc legend { font-family:var(--sans); font-weight:800; font-size:20px; display:flex; align-items:center; gap:10px; padding:0 8px; margin-left:-8px; }
.bloc legend .num-etape { position:static; background:var(--vert-pale); color:var(--vert-fonce); border-radius:999px; width:30px; height:30px; display:grid; place-items:center; font-size:14px; }
.choix-paliers label { flex-direction:column; align-items:flex-start; gap:2px; padding:12px 16px; border-radius:16px; min-width:150px; }
.choix-paliers small { font-weight:400; color:var(--gris); font-size:12.5px; }
.choix-colonne { flex-direction:column; align-items:stretch; }
.choix-colonne label { border-radius:16px; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 16px; }
.choix-colonne small { font-weight:400; color:var(--gris); font-size:12.5px; }
.champ-libre { margin-top:14px; max-width:320px; }
/* Les deux derniers gestes avant le paiement : la cible doit être confortable.
   24 px est le minimum WCAG 2.2, et le libellé entier est cliquable. */
.case { display:flex; gap:12px; align-items:flex-start; font-size:15px; margin-bottom:12px; cursor:pointer; padding:4px 0; }
.case input { width:24px; height:24px; margin-top:1px; accent-color:var(--vert-cta); flex-shrink:0; }
.case input:focus-visible { outline-offset:1px; }
/* Un champ signalé en erreur se voit, il ne se devine pas. */
.champ [aria-invalid="true"], .case input[aria-invalid="true"] { border-color:var(--terre); box-shadow:0 0 0 3px rgba(140,82,40,.14); }
.champ-erreur { display:block; margin-top:5px; font-size:13.5px; font-weight:600; color:var(--terre); }
/* Même dessin que .champ-erreur, mais posé par le formulaire lui-même au fil de
   la saisie (volume libre du tunnel) : il survit donc à nettoyerErreurs(), qui
   n'efface que les messages nés d'une soumission. */
.champ-alerte { display:block; margin-top:5px; font-size:13.5px; font-weight:600; color:var(--terre); }
.champ .a-aide { display:block; margin-top:5px; font-size:13px; color:var(--gris); }
.erreur { background:#FBE9E5; color:#8A2A1A; border:1px solid #F0C4BA; border-radius:14px; padding:12px 16px; font-weight:600; }
.demo-bandeau { background:var(--jaune-pale); color:#6E5417; border:1px solid #EFDCA6; border-radius:14px; padding:10px 16px; font-size:14px; font-weight:600; text-align:center; }
.contrib-aside { position:sticky; top:100px; }
.recap-projet { position:relative; display:grid; gap:4px; margin-bottom:8px; }
.recap-photo { height:150px; border-radius:14px; overflow:hidden; margin-bottom:10px; }
.recap-projet .tag { top:12px; left:12px; }
.recap-projet strong { font-family:var(--sans); font-size:20px; }
.recap-projet span { color:var(--gris); font-size:14px; display:flex; gap:6px; align-items:center; }

/* ---------- vérification / registre ---------- */
.verif-grille { display:grid; grid-template-columns:420px 1fr; gap:40px; align-items:start; }
.verif-form { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:26px 28px; display:grid; gap:8px; }
.verif-form input { font-family:var(--sans); font-size:22px; letter-spacing:2px; text-transform:uppercase; }
.verif-carte { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:28px; position:relative; }
.verif-ok { border-color:var(--vert); box-shadow:0 0 0 4px var(--vert-pale); }
.verif-ok > strong { display:block; font-family:var(--sans); font-size:24px; margin:0 0 10px 54px; }
.verif-sceau { position:absolute; left:26px; top:26px; width:40px; height:40px; border-radius:50%; background:var(--vert-cta); color:#fff; display:grid; place-items:center; font-weight:800; font-size:20px; }
.verif-ko { border-color:#F0C4BA; background:#FBF3F1; }
.verif-ko strong { display:block; margin-bottom:8px; }
.registre-outils { display:grid; grid-template-columns:1fr 1fr auto; gap:18px; align-items:end; margin-bottom:22px; }
/* Le total du registre dit désormais DEUX choses : le total, et la part
   collectée sur Carbone.eco. `nowrap` convenait à « 127 contributions » ; il
   ferait déborder la phrase de répartition dès 375 px. Deux lignes, donc. */
.registre-total { font-family:var(--sans); font-weight:700; margin:0 0 14px; display:grid; gap:3px; }
.registre-total-part { font-weight:400; font-size:13.5px; line-height:1.45; color:var(--gris); }

/* ---------- Contributions extérieures au registre ----------
   Un contrat conclu hors de ce site, sur le même projet. Il figure au registre
   parce qu'il finance réellement la parcelle, et il est signalé parce qu'il ne
   porte ni certificat ni code Carbone.eco. Le filet doré le distingue sans le
   reléguer : la ligne reste à sa place dans l'ordre chronologique. */
.tableau tbody tr.reg-ext, .tableau tbody tr.reg-ext:nth-child(even) { background:var(--or-pale); }
.tableau tbody tr.reg-ext td:first-child { box-shadow:inset 3px 0 0 var(--or); }
.reg-sans-code { display:block; font-weight:700; color:var(--or-texte); }
.tableau tr.reg-ext .note { display:block; font-size:12.5px; margin-top:2px; }
/* Note explicative sous le tableau : c'est elle qui dit ce qu'est une
   contribution extérieure, une fois pour toutes. */
.registre-note-ext { display:flex; gap:10px; align-items:flex-start; margin:18px 0 0; padding:14px 16px;
  background:var(--or-pale); border-radius:var(--r); font-size:14px; line-height:1.5; color:var(--or-texte); }
.registre-note-ext .ic { flex-shrink:0; margin-top:2px; }
/* `contain` et non `auto` : arrivé au bout du tableau, le geste horizontal
   déclenchait le « page précédente » du navigateur — on quittait le registre
   sans l'avoir voulu. `.tableau-large` avait le réflexe, pas celui-ci. */
.tableau-cadre { overflow-x:auto; overscroll-behavior-x:contain; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); }
.tableau { width:100%; border-collapse:collapse; font-size:15px; min-width:760px; }
.tableau th, .tableau td { padding:13px 16px; text-align:left; border-bottom:1px solid var(--ligne); }
.tableau th { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gris); background:var(--creme); }
/* Le tableau du registre fait 760 px dans un cadre de 337 sur un téléphone : on
   n'en voit jamais que 44 %, et la seule colonne « Projet » est plus large que
   l'écran d'un iPhone SE. Le code du certificat — l'identité de la ligne —
   reste donc visible pendant qu'on fait défiler le reste. */
.tableau tbody td:first-child, .tableau thead th:first-child { position:sticky; left:0; z-index:1; box-shadow:6px 0 8px -6px rgba(15,26,20,.14); }
.tableau tbody td:first-child { background:var(--blanc); }
.tableau tbody tr:nth-child(even) { background:#FAFBF8; }
.tableau .num { text-align:right; font-variant-numeric:tabular-nums; }
.tableau-vide { text-align:center; color:var(--gris); padding:34px 16px !important; }
.badge { display:inline-block; font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; background:var(--creme); border:1px solid var(--ligne); color:var(--gris); }
.badge-ok { background:var(--vert-pale); color:var(--vert-fonce); border-color:transparent; }
.pagination { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; }
.pagination .btn { padding:10px 18px; font-size:14px; }
.etapes-3 { grid-template-columns:repeat(3,1fr); }
.pres { display:flex; gap:12px; align-items:end; flex-wrap:wrap; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:18px 22px; margin:0 0 26px; }
.pres .champ { margin:0; flex:1; min-width:220px; }
.pres-note { width:100%; font-size:13px; color:var(--gris); margin:4px 0 0; }
.pres-statut:empty { display:none; }
.pres-statut { color:var(--vert-fonce); font-weight:600; }
.carte-distance { position:absolute; top:14px; right:14px; background:var(--encre); color:#fff; font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:999px; }

@media (max-width:900px){
  .contrib-grille, .verif-grille { grid-template-columns:1fr; }
  .contrib-aside { position:static; }
  .registre-outils { grid-template-columns:1fr; }
  .etapes-3 { grid-template-columns:1fr; }
}
@media (max-width:600px){ .bloc { padding:20px 18px; } }


/* ---------- Hero : mentions et certificat en superposition ---------- */
.hero-mentions { list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:14.5px; color:rgba(255,255,255,.85); }
.hero-mentions li { display:flex; align-items:center; gap:10px; }
.hero-mentions .ic { color:var(--or); flex-shrink:0; }
.anim-hero .hero-mentions { animation:heroMonte .7s var(--ease-out) 1.45s both; }
.certif-mini { position:absolute; right:-8px; bottom:40px; width:200px; background:#fff; color:var(--encre); border-radius:10px; padding:12px 14px; text-decoration:none; box-shadow:var(--ombre-lg); transform:rotate(3deg); display:grid; gap:4px; border:1px solid var(--ligne); }
.certif-mini::before { content:""; position:absolute; inset:5px; border:1px solid var(--vert-pale); border-radius:7px; pointer-events:none; }
.certif-mini-tete { display:flex; justify-content:space-between; align-items:center; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--vert-fonce); font-weight:700; border-bottom:1.5px solid var(--vert); padding-bottom:6px; }
.certif-mini-tete img { height:18px; width:auto; }
.certif-mini strong { font-family:var(--serif); font-size:24px; line-height:1.1; margin-top:4px; }
.certif-mini-projet { font-size:12px; color:var(--gris); }
.certif-mini-pied { display:flex; align-items:center; gap:8px; font-size:10px; color:var(--gris); margin-top:4px; border-top:1px dashed var(--ligne); padding-top:8px; line-height:1.3; }
.certif-mini-pied .certif-qr { width:34px; height:34px; border-radius:4px; }
.certif-mini:hover { transform:rotate(1deg) translateY(-3px); }
@keyframes certifPose { from { opacity:0; transform:rotate(8deg) translateY(24px) scale(.92); } to { opacity:1; transform:rotate(3deg); } }
.anim-hero .certif-mini { animation:certifPose .9s var(--ease-out) 4.6s both; }
@media (prefers-reduced-motion:reduce){ .anim-hero .certif-mini, .anim-hero .hero-mentions { animation:none; } }
@media (max-width:900px){ .certif-mini { position:static; margin:18px auto 0; transform:none; width:220px; } }

/* ---------- Trois portes ---------- */
.portes-section { padding-top:72px; }
.portes { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.porte { position:relative; display:flex; flex-direction:column; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.porte:hover { transform:translateY(-6px); box-shadow:var(--ombre-lg); }
.porte-photo { height:210px; }
.porte-photo img { transition:transform .8s var(--ease); }
.porte:hover .porte-photo img { transform:scale(1.04); }
.porte-corps { padding:24px 26px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.porte-num { font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:2px; color:var(--or-texte); }
.porte h3 { font-family:var(--serif); font-weight:600; font-size:30px; margin:0; }
.porte p { color:var(--gris); font-size:15.5px; margin:0 0 8px; }
.porte-lien { margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--vert-cta); font-family:var(--sans); }
.porte-lien .ic { transition:transform .25s var(--ease); }
.porte:hover .porte-lien .ic { transform:translateX(4px); }
@media (max-width:900px){ .portes { grid-template-columns:1fr; } }


/* ---------- fiche projet v2 ---------- */
.fiche-hero-v2 { min-height:min(72svh, 680px); padding-bottom:120px; }
.fiche-hero-v2 .fiche-fond::after { background:linear-gradient(180deg, rgba(6,23,14,.25) 0%, rgba(6,23,14,.55) 55%, rgba(6,23,14,.92) 100%); }
/* Les chiffres clés. C'était une bande grise d'un seul tenant, quatre cases
   séparées par un filet : rien n'y hiérarchisait quoi que ce soit, alors que ce
   sont les nombres sur lesquels se décide une contribution. Ce sont maintenant
   des tuiles distinctes, chacune avec sa valeur, son unité et une phrase qui
   dit ce qu'elle mesure — c'est cette phrase qui règle la confusion entre le
   CO₂ séquestré et le volume en vente. Le liseré du haut porte la hiérarchie :
   or sur les deux nombres de carbone, vert sur le prix, neutre sur le reste.
   `auto-fit` évite d'avoir à décrire chaque nombre de colonnes : il y a quatre
   ou cinq tuiles selon les données du projet. */
/* Fiche d'un projet retiré du catalogue. Le bandeau se glisse AVANT la bande de
   chiffres, qui remonte de 78 px sur le hero : il reprend donc la même marge
   négative, et c'est alors la bande de chiffres qui se recolle sous lui. */
.retire-bandeau { margin:-78px 0 0; position:relative; z-index:2; background:var(--jaune-pale); border:1px solid #EFDCA6; border-radius:14px; padding:16px 22px; box-shadow:var(--ombre-lg); }
.retire-bandeau strong { display:block; color:#6E5417; font-size:16px; margin-bottom:4px; }
.retire-bandeau p { margin:0; font-size:14.5px; color:var(--gris); }
.retire-bandeau + .fiche-faits { margin-top:12px; }
.achat-clos { margin:0 26px 14px; padding:14px 16px; background:var(--jaune-pale); border:1px solid #EFDCA6; border-radius:16px; font-size:14.5px; color:#6E5417; }

.fiche-faits { list-style:none; margin:-78px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; position:relative; z-index:2; }
.fiche-faits li { background:var(--blanc); border:1px solid var(--ligne); border-top:3px solid var(--ligne); border-radius:14px; box-shadow:var(--ombre-lg); padding:19px 22px 17px; display:grid; align-content:start; gap:5px; }
.fiche-faits .fait-carbone, .fiche-faits .fait-volume { border-top-color:var(--or); }
.fiche-faits .fait-prix { border-top-color:var(--vert-cta); }
.fiche-faits span { font-size:12px; font-weight:700; letter-spacing:1.7px; text-transform:uppercase; color:var(--gris); }
.fiche-faits strong { font-weight:600; font-size:28px; line-height:1.08; letter-spacing:-.9px; color:var(--encre); font-variant-numeric:tabular-nums; }
.fiche-faits strong small { font-size:13px; color:var(--gris); font-weight:600; letter-spacing:0; }
.fiche-faits .fait-methode strong, .fiche-faits .fait-label strong { font-size:19px; letter-spacing:-.3px; line-height:1.2; }
/* Une donnée pas encore arrêtée : dite en toutes lettres, à la taille du texte
   et non à celle d'un nombre — elle n'en est pas un. */
.fiche-faits .fait-attente { font-size:16.5px; letter-spacing:-.2px; line-height:1.25; color:var(--vert-fonce); }
.fiche-faits em { font-style:normal; font-size:12.5px; line-height:1.45; color:var(--gris); }
.fiche-corps { padding-top:64px; }
.fiche-h2 { font-size:30px; margin-top:44px; }
.fiche-principal .kicker + .fiche-h2, .fiche-h2:first-of-type { margin-top:0; }
.fiche-lead { font-size:20px; line-height:1.6; color:var(--encre); }
.achat-carte-fixe { padding:0; overflow:hidden; }
.achat-tete { background:var(--vert-nuit); color:#fff; padding:22px 26px 18px; }
.achat-tete .achat-label { color:var(--or); margin-bottom:6px; }
.achat-prix { margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.achat-prix strong { font-family:var(--serif); font-weight:600; font-size:38px; letter-spacing:-.5px; }
.achat-prix span { color:rgba(255,255,255,.75); font-size:14px; }
.achat-carte-fixe .achat-chiffres { margin:18px 26px 14px; }
/* La même jauge dans la carte d'achat de la fiche, en plus grand : c'est là
   qu'on décide, elle doit se lire d'un coup d'œil sans écraser le prix. */
.achat-fin { margin:18px 26px 0; padding-bottom:16px; border-bottom:1px dashed var(--ligne); }
.achat-fin-titre { display:block; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gris); margin-bottom:8px; }
.achat-fin-chiffre { margin:0 0 10px; font-size:15px; color:var(--gris); }
.achat-fin-chiffre strong { font-family:var(--sans); font-size:26px; font-weight:700; letter-spacing:-.3px; color:var(--encre); margin-right:5px; }
.achat-fin-mot strong { font-size:19px; }
.achat-fin-barre { height:12px; border-radius:999px; background:var(--vert-pale); overflow:hidden; }
.achat-fin-barre i { display:block; height:100%; min-width:8px; width:var(--v); border-radius:999px; background:linear-gradient(90deg,var(--vert-cta),var(--vert)); animation:finRemplit 1.2s var(--ease-out) both; }
@keyframes finRemplit { from { width:0; } }
.achat-fin-vide i { min-width:0; background:none; }
.achat-fin-note { margin:9px 0 0; font-size:13.5px; color:var(--gris); line-height:1.5; }
@media (prefers-reduced-motion:reduce){ .achat-fin-barre i { animation:none; } }

.achat-carte-fixe .volume-choisi, .achat-carte-fixe .btn { margin-left:26px; margin-right:26px; width:calc(100% - 52px); }
.achat-carte-fixe .btn-ligne { margin-top:10px; }
/* /confirmation : les deux téléchargements que l'API tend et que le front
   jetait. Ils passent à la ligne sur mobile plutôt que de déborder. */
.confirm-docs { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 6px; }
.confirm-docs .btn { margin:0; }
.achat-chiffres small { color:var(--gris); font-weight:400; }
.achat-garanties { list-style:none; margin:18px 26px 0; padding:0; display:grid; gap:8px; font-size:14px; color:var(--gris); }
.achat-garanties li { display:flex; gap:10px; align-items:center; }
.achat-garanties .ic { color:var(--vert); flex-shrink:0; }
.achat-carte-fixe .mini-carte { margin:18px 0 0; border-radius:0; padding:10px 26px 16px; background:linear-gradient(160deg,#EAF3E6,#D9E9D6); }
.achat-carte-fixe .mini-carte .fr-map { max-height:170px; }
.abo-bande { display:grid; grid-template-columns:1fr 1.2fr; gap:28px; align-items:center; background:var(--vert-pale); border-radius:var(--r); padding:26px 30px; margin:36px 0 10px; }
.abo-bande strong { font-family:var(--serif); font-weight:600; font-size:24px; display:block; margin-bottom:4px; }
.abo-bande p { margin:0; font-size:15px; color:var(--gris); }
.abo-ligne { display:flex; gap:10px; }
.abo-ligne input { flex:1; border:1.5px solid var(--ligne); border-radius:999px; padding:13px 18px; background:#fff; min-width:0; }
.abo-ligne .btn { white-space:nowrap; }
@media (max-width:900px){ .abo-bande { grid-template-columns:1fr; } .fiche-hero-v2 { min-height:min(56svh, 520px); padding-bottom:100px; } }
@media (max-width:600px){ .fiche-faits { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:-56px; gap:10px; } .fiche-faits li { padding:15px 16px 13px; } .fiche-faits strong { font-size:23px; } .abo-ligne { flex-direction:column; } .fiche-lead { font-size:18px; } }


/* ---------- fiche projet : sections détaillées ---------- */
.chiffres-grille { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin:0 0 10px; }
.chiffres-grille div { background:var(--blanc); border:1px solid var(--ligne); border-radius:14px; padding:16px 18px; }
.chiffres-grille dt { font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--gris); font-weight:700; }
.chiffres-grille dd { margin:4px 0 0; font-family:var(--serif); font-size:24px; }
.chiffres-grille dd small { font-family:var(--sans); font-size:13px; color:var(--gris); }
.methode { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:26px 28px; }
.methode-tete { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.methode-tete strong { font-family:var(--serif); font-weight:600; font-size:24px; display:block; }
.methode-tete span { font-size:14px; color:var(--gris); }
.methode-principe { font-size:17px; }
.methode-lignes { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin:18px 0; }
.methode-lignes div { border-top:1px dashed var(--ligne); padding-top:8px; }
.methode-lignes dt { font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gris); font-weight:700; }
.methode-lignes dd { margin:2px 0 0; font-size:15px; }
.chrono { list-style:none; margin:0; padding:0 0 0 22px; border-left:2px solid var(--ligne); display:grid; gap:22px; }
.chrono-etape { position:relative; }
.chrono-etape::before { content:""; position:absolute; left:-30px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--vert-cta); border:3px solid var(--creme); box-shadow:0 0 0 2px var(--vert-cta); }
.chrono-avenir::before { background:var(--creme); box-shadow:0 0 0 2px var(--ligne); }
.chrono-date { font-size:12.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--vert-fonce); }
.chrono-avenir .chrono-date { color:var(--gris); }
.chrono-etape strong { display:block; font-family:var(--serif); font-weight:600; font-size:21px; margin:2px 0 4px; }
.chrono-etape p { margin:0; font-size:15px; color:var(--gris); }
/* ---------- vignettes d'essences ----------
   L'ancienne carte `.essence` faisait 300 px de photo + 1 fr de texte, pleine
   largeur, avec `min-height:280px` sur l'image. Deux essences sur dix ont une
   photo : les huit autres perdaient une colonne entière et se retrouvaient
   étranglées dans un tiers de la page. Dix cartes de la sorte, c'était 13 000 px
   de fiche. La vignette repliée fait environ 70 px ; ouverte, elle affiche
   exactement le même contenu, sur toute la largeur de la colonne. */
/* min(320px,100%) et non 320px : à 320 px de large (iPhone SE, ou un écran plus
   large dès qu'on zoome), une colonne de 320 px plus les marges du conteneur
   sortait de 18 px — coupés sans barre de défilement, `overflow-x:clip` étant
   posé sur html et body. La ligne « Résineux · Pinacées » et la fin du nom
   latin disparaissaient, sur dix vignettes par fiche. */
.vignettes { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:14px; margin-top:14px; }
/* `display:grid` sur le <details> : le résumé devient une case qui occupe toute
   la hauteur de la vignette, et deux vignettes côte à côte s'alignent même quand
   l'une porte un nom sur deux lignes. Ouverte, la vignette prend toute la
   largeur (grid-column) et se lit comme la carte d'avant. */
.vignette { display:grid; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); overflow:hidden; }
.vignette[open] { grid-column:1/-1; box-shadow:var(--ombre); }
.vignette > summary { list-style:none; cursor:pointer; padding:16px 20px 16px 46px; position:relative; display:flex; flex-direction:column; justify-content:center; }
.vignette > summary::-webkit-details-marker { display:none; }
/* Le chevron : un carré tourné à 45°, pas d'icône à télécharger. */
.vignette > summary::before { content:""; position:absolute; left:20px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--vert-cta); border-bottom:2px solid var(--vert-cta); transform:rotate(-45deg); transition:transform .2s var(--ease); }
.vignette[open] > summary::before { transform:rotate(45deg); margin-top:-3px; }
.vignette > summary:hover { background:var(--vert-pale); }
.vignette > summary h3 { font-family:var(--serif); font-weight:600; font-size:20px; margin:0; line-height:1.25; }
.vignette > summary h3 em { font-style:italic; font-weight:400; color:var(--gris); font-size:15px; margin-left:7px; }
.vignette > summary h3 .essence-type { display:block; margin-top:3px; }
.vignette-corps { padding:4px 20px 22px 46px; }
.vignette-corps > p:first-child, .vignette-corps > .essence-photo + p { margin-top:0; }
/* Bouton « tout déplier », posé par le navigateur (src/js/pages.js) : sans
   JavaScript la page se lit pareil, vignette par vignette. */
.btn-deplier { display:inline-flex; align-items:center; gap:8px; margin:14px 0 0; padding:8px 16px; border:1px solid var(--ligne); border-radius:999px; background:var(--blanc); color:var(--vert-cta); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.btn-deplier:hover { background:var(--vert-pale); border-color:var(--vert); }
/* L'attribution était posée SUR la photo, en blanc à 85 %, sur un dégradé qui
   partait du transparent : sur un tronc clair ou un ciel, elle se lisait blanc
   sur blanc. C'est une mention OBLIGATOIRE — la licence CC BY l'exige — et elle
   devenait invisible. Elle passe sous l'image, en gris, comme la légende des
   photos de terrain du reste du site. */
.essence-photo { margin:0 0 16px; }
.essence-photo img { width:100%; height:auto; max-height:340px; object-fit:cover; display:block; border-radius:14px; }
.essence-photo figcaption { margin-top:7px; font-size:12px; line-height:1.45; color:var(--gris); }
.essence-photo figcaption a { color:var(--gris); text-decoration:underline; text-underline-offset:2px; }
.essence-photo .essence-precision { display:block; margin-bottom:3px; font-style:italic; }
.essence-type { font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--or-texte); font-weight:700; }
.levier h3 { font-family:var(--serif); font-weight:600; font-size:26px; margin:4px 0 10px; }
.essence-faits { display:flex; gap:22px; flex-wrap:wrap; margin:12px 0; }
.essence-faits div { display:grid; }
.essence-faits dt { font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gris); font-weight:700; }
.essence-faits dd { margin:0; font-weight:700; }
.essence-carbone { display:flex; gap:10px; background:var(--vert-pale); border-radius:12px; padding:10px 14px; font-size:14.5px; }
.essence-carbone .ic { color:var(--vert-cta); flex-shrink:0; margin-top:4px; }
.essence-detail { font-size:14.5px; color:var(--gris); margin:8px 0; }
.essence-fun { display:flex; gap:8px; font-size:14px; color:var(--ble); background:var(--or-pale); border-radius:12px; padding:10px 14px; margin:10px 0 0; }
.essence-fun .ic { flex-shrink:0; margin-top:4px; }
/* LES LEVIERS RESTENT DÉPLIÉS, ET EN UNE COLONNE. Le même raisonnement que
   pour les essences a été conduit ici et il ne donne pas le même résultat :
   deux à cinq fiches ne s'étalent pas comme dix, la synthèse existe déjà
   au-dessus (le profil des impacts), et sur une ferme ces fiches sont TOUT le
   projet — les replier viderait la page. Mesuré : à 740 px de colonne, deux
   colonnes ne font rien gagner en hauteur (les cartes se rallongent d'autant)
   et laissent une case vide à côté du dernier levier. */
.leviers { display:grid; gap:18px; }
.levier { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:24px 26px; }
.levier-cob { list-style:none; padding:0; margin:14px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; font-size:14px; color:var(--gris); }
.levier-cob li { display:flex; gap:8px; }
.levier-cob .ic { color:var(--vert); flex-shrink:0; margin-top:4px; }
.scores { margin-top:22px; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:22px 26px; }
.scores-titre { font-size:14px; color:var(--gris); margin-bottom:12px; }
.score { display:grid; grid-template-columns:140px 1fr 40px; align-items:center; gap:14px; font-size:14.5px; margin-bottom:8px; }
.score-barre { height:8px; background:var(--creme); border-radius:999px; overflow:hidden; }
.score-barre i { display:block; height:100%; width:var(--v); background:linear-gradient(90deg, var(--vert-cta), var(--vert)); border-radius:999px; }
.score b { text-align:right; font-family:var(--sans); }
.cob-defs { margin-top:14px; font-size:14.5px; color:var(--gris); }
.cob-defs summary { cursor:pointer; font-weight:700; color:var(--encre); }
.cob-defs ul { margin:10px 0 0; padding-left:18px; display:grid; gap:6px; }
.odd { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.odd-item { display:flex; gap:14px; background:var(--blanc); border:1px solid var(--ligne); border-radius:14px; padding:16px 18px; }
.odd-num { width:46px; height:46px; border-radius:10px; display:grid; place-items:center; color:#fff; font-family:var(--sans); font-weight:800; font-size:18px; flex-shrink:0; background:var(--vert-fonce); }
.odd-2 .odd-num { background:#DDA63A; } .odd-6 .odd-num { background:#26BDE2; } .odd-8 .odd-num { background:#A21942; } .odd-12 .odd-num { background:#BF8B2E; } .odd-13 .odd-num { background:#3F7E44; } .odd-15 .odd-num { background:#56C02B; }
.odd-item strong { display:block; font-size:15px; margin-bottom:2px; }
.odd-item p { margin:0; font-size:14px; color:var(--gris); }
@media (max-width:800px){ .essence-photo img { max-height:260px; } .vignette > summary { padding-left:38px; } .vignette > summary::before { left:16px; } .vignette-corps { padding-left:20px; } .odd, .methode-lignes, .levier-cob { grid-template-columns:1fr; } .score { grid-template-columns:100px 1fr 34px; } }

/* ============================================================
   Respiration — passe d'aération globale (8 sept. 2026) : plus de marge
   verticale, contenu un peu moins large, cartes plus espacées, interlignage
   plus généreux. Ces règles surchargent volontairement celles du dessus.
   ============================================================ */
:root { --wrap:1280px; }
body { line-height:1.72; }
p { margin:0 0 18px; }
.wrap { padding:0 40px; }
.section { padding:140px 0; }
.section-head { margin:0 auto 76px; }
.section-head h2::after { margin-top:28px; }
.section-sub { font-size:18.5px; line-height:1.75; }
.kicker { margin-bottom:22px; }
h1 { margin-bottom:26px; }
h2 { margin-bottom:24px; line-height:1.12; }
h3 { margin-bottom:10px; }
.grille-3 { gap:34px; }
.duo { gap:88px; }
.liste-check { gap:14px; margin:24px 0 34px; }

/* Hero */
.hero { padding:150px 0 110px; }
.hero-grille { gap:88px; }
.hero-titre { margin-bottom:32px; line-height:1.08; }
.hero-sub { margin-bottom:42px; line-height:1.75; }
.hero-ctas { gap:16px; margin-bottom:38px; }
.hero-mentions { gap:12px; }

/* Portes, engagements, chiffres */
.portes-section { padding-top:120px; }
.portes { gap:34px; }
.porte-corps { padding:30px 32px 34px; gap:10px; }
.porte p { margin-bottom:16px; }
.promesses { gap:24px; margin-top:52px; }
.promesse { padding:34px 28px; }
.promesse .coben-ic { margin-bottom:20px; }
.promesse p { line-height:1.65; }

/* Cartes projets */
.carte-corps { padding:26px 28px 30px; gap:6px; }
.carte-region { margin:4px 0 12px; }
.carte-meta { margin:0 0 20px; }
.section-projets .centre { margin-top:56px !important; }

/* Transparence, contact, bandes */
.repart { gap:64px; margin-top:48px; }
.contact-band { padding:34px 38px; gap:30px; }
.bande-cta { padding:150px 0; }
.bande-inner p { margin-bottom:40px; }
.bandeau-confiance { padding:36px 40px; gap:18px 44px; }
.footer-grid { padding:96px 40px 56px; gap:48px; }

/* Fiche projet */
.fiche-hero-v2 { padding-bottom:140px; }
.fiche-faits { gap:14px; }
.fiche-faits li { padding:24px 26px 22px; gap:7px; }
.fiche-faits strong { font-size:31px; }
.fiche-corps { padding-top:96px; }
.fiche-grille { gap:80px; }
.fiche-h2 { margin-top:72px; margin-bottom:22px; }
.fiche-lead { line-height:1.7; margin-bottom:24px; }
.fiche-principal p { line-height:1.78; }
.mot-operateur { margin:44px 0; padding:30px 34px; }
.chiffres-grille { gap:18px; }
.chiffres-grille div { padding:22px 24px; }
.methode { padding:34px 38px; }
.chrono { gap:34px; padding-left:28px; }
.vignettes { gap:16px; }
.vignette > summary { padding:18px 24px 18px 50px; }
.vignette-corps { padding:4px 24px 26px 50px; }
.leviers { gap:26px; }
.levier { padding:32px 34px; }
.cobenefs { gap:22px; }
.cobenef { padding:28px; }
.odd { gap:18px; }
.odd-item { padding:22px 24px; gap:18px; }
.abo-bande { padding:34px 38px; margin:52px 0 20px; gap:36px; }
.achat-carte-fixe .achat-chiffres { margin:24px 28px 20px; }
.achat-tete { padding:26px 28px 22px; }
.achat-garanties { margin-top:22px; gap:10px; }

/* Pages secondaires */
.page-head { padding:96px 0 32px; }
.bloc { padding:32px 34px 28px; }
.contrib-form { gap:28px; }
.contrib-grille { gap:56px; }
.apropos-grille { gap:88px; }
.apropos-section { margin-bottom:64px; }
.apropos-section p { line-height:1.78; }

@media (max-width:900px){
  .wrap { padding:0 24px; }
  .section { padding:88px 0; }
  .section-head { margin-bottom:52px; }
  .hero { padding:120px 0 72px; }
  .hero-grille { gap:56px; }
  .portes-section { padding-top:80px; }
  .fiche-corps { padding-top:64px; }
  .fiche-h2 { margin-top:52px; }
  .footer-grid { padding:64px 24px 40px; }
  .bande-cta { padding:100px 0; }
}
@media (max-width:600px){
  .wrap { padding:0 18px; }
  .section { padding:72px 0; }
  .bloc { padding:24px 20px; }
}
/* Trois engagements de rang égal, plus d'air entre eux depuis la passe
   d'aération : la répartition, elle, reste celle de `auto-fit` ci-dessus. */
.promesses { gap:26px; }


/* ---------- Profil particulier / entreprise ---------- */
/* Un élément .si-part n'existe que pour le particulier, .si-pro que pour l'entreprise.
   Priorité forcée : les composants définissent parfois leur propre display. */
html:not([data-profil="entreprise"]) .si-pro { display:none !important; }
html[data-profil="entreprise"] .si-part { display:none !important; }
p.hero-titre { font-family:var(--sans); font-weight:600; letter-spacing:-1.6px; line-height:1.06; }
p.hero-titre em { font-style:normal; color:#E6C77E; }
.fiche-faits strong [data-prix] { font:inherit; color:inherit; }

/* Bascule de profil dans le Hero et sous le prix (plus de sélecteur dans la barre) */
.achat-profil { font-size:13px; color:rgba(255,255,255,.7); margin:8px 0 0; }
.achat-profil button { background:none; border:0; padding:0; color:#E6C77E; font:inherit; text-decoration:underline; cursor:pointer; }


/* ---------- Animations supplémentaires (8 sept.) ---------- */
.hero-fond img { will-change:transform; }
.site-header .logo img { transition:height .3s var(--ease); }
html.defile .site-header .logo img { height:32px; }
html.defile .header-inner { min-height:var(--h-header); }
.chrono-etape { opacity:0; transform:translateX(-14px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.chrono.anim-vu .chrono-etape { opacity:1; transform:none; }
.chrono.anim-vu .chrono-etape:nth-child(1) { transition-delay:.05s } .chrono.anim-vu .chrono-etape:nth-child(2) { transition-delay:.15s } .chrono.anim-vu .chrono-etape:nth-child(3) { transition-delay:.25s } .chrono.anim-vu .chrono-etape:nth-child(4) { transition-delay:.35s } .chrono.anim-vu .chrono-etape:nth-child(5) { transition-delay:.45s } .chrono.anim-vu .chrono-etape:nth-child(6) { transition-delay:.55s }
.chrono { position:relative; }
.chrono::before { content:""; position:absolute; left:-2px; top:0; width:2px; height:0; background:var(--vert-cta); transition:height 1.6s var(--ease-out); }
.chrono.anim-vu::before { height:100%; }
.score-barre i { width:0; transition:width 1.2s var(--ease-out); }
.scores.anim-vu .score-barre i { width:var(--v); }
.scores.anim-vu .score:nth-child(3) i { transition-delay:.1s } .scores.anim-vu .score:nth-child(4) i { transition-delay:.2s } .scores.anim-vu .score:nth-child(5) i { transition-delay:.3s } .scores.anim-vu .score:nth-child(6) i { transition-delay:.4s }
.fiche-faits li { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.fiche-faits.anim-vu li { opacity:1; transform:none; }
.fiche-faits.anim-vu li:nth-child(2) { transition-delay:.08s } .fiche-faits.anim-vu li:nth-child(3) { transition-delay:.16s } .fiche-faits.anim-vu li:nth-child(4) { transition-delay:.24s } .fiche-faits.anim-vu li:nth-child(5) { transition-delay:.32s }
.levier, .odd-item { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.levier.anim-vu, .odd-item.anim-vu { opacity:1; transform:none; }
.porte-photo img { transition:transform 1.2s var(--ease); }
.porte:hover .porte-photo img { transform:scale(1.06) translateY(-2%); }
.certif-carte { transition:transform .5s var(--ease); }
.certif-apercu:hover .certif-carte { transform:rotate(0deg) translateY(-4px); }
.carte-media img { transition:transform 1s var(--ease); }
.lbc { transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.lbc:hover { transform:translateY(-2px); box-shadow:var(--ombre); }
@media (prefers-reduced-motion:reduce){ .chrono-etape, .fiche-faits li, .levier, .odd-item { opacity:1; transform:none; transition:none; } .score-barre i { width:var(--v); transition:none; } .chrono::before { height:100%; transition:none; } .hero-fond img { transform:none !important; } }


/* ---------- Crédibilité : opérateur ---------- */
.preuve { display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:inherit; border:1px solid var(--ligne); border-radius:16px; padding:18px 20px; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.preuve:hover { transform:translateY(-3px); box-shadow:var(--ombre); }
.preuve .ic { color:var(--vert); flex-shrink:0; margin-top:3px; font-size:20px; }
.preuve strong { display:block; font-size:15px; }
.preuve small { display:block; color:var(--gris); font-size:13px; line-height:1.45; }
/* Blog */


/* ---------- Témoignages, galerie, équipe, filtres ---------- */
.galerie { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:190px; gap:12px; margin-bottom:10px; }
.galerie-photo { margin:0; border-radius:14px; overflow:hidden; background:var(--vert-pale); }
.galerie-grande { grid-column:span 2; grid-row:span 2; }
.galerie-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s var(--ease); }
.galerie-photo:hover img { transform:scale(1.04); }
.membre { background:var(--creme); border-radius:var(--r); padding:32px 30px; }
.membre h3 { font-size:22px; margin-bottom:2px; }
.membre p { font-size:15px; color:var(--gris); margin:0; }
.filtres { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.filtre { border:1.5px solid var(--ligne); background:var(--blanc); border-radius:999px; padding:9px 16px; font-size:14px; font-weight:600; color:var(--gris); cursor:pointer; transition:all .2s var(--ease); }
.filtre:hover { border-color:var(--vert); color:var(--encre); }
.filtre.actif { background:var(--vert-cta); border-color:var(--vert-cta); color:#fff; }
.filtre-region { font-weight:500; }
@media (max-width:900px){ .temoignages, .equipe { grid-template-columns:1fr; } .galerie { grid-template-columns:1fr 1fr; grid-auto-rows:150px; } .galerie-grande { grid-column:span 2; grid-row:span 1; } }


/* ---------- Consentement aux cookies ---------- */
.cookies-bandeau { position:fixed; left:16px; right:16px; bottom:16px; z-index:900; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); box-shadow:var(--ombre-lg); max-width:640px; margin:0 auto; animation:cookiesEntree .5s var(--ease-out) both; }
@keyframes cookiesEntree { from { opacity:0; transform:translateY(20px); } }
.cookies-corps { padding:28px 30px 26px; }
.cookies-bandeau h2 { font-size:22px; margin:0 0 10px; }
.cookies-bandeau p { font-size:14.5px; color:var(--gris); margin:0 0 18px; line-height:1.65; }
.cookies-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cookies-actions .btn { padding:12px 22px; font-size:14.5px; }
.btn-lien { background:none; border:0; color:var(--gris); text-decoration:underline; padding:12px 8px; font-family:var(--sans); font-weight:600; font-size:14.5px; cursor:pointer; }
.btn-lien:hover { color:var(--encre); }
.cookies-reglages { position:fixed; inset:0; max-width:none; margin:0; border-radius:0; background:rgba(10,25,16,.55); backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; border:0; box-shadow:none; }
.cookies-reglages .cookies-corps { background:var(--blanc); border-radius:var(--r); max-width:620px; width:100%; max-height:86vh; overflow:auto; box-shadow:var(--ombre-lg); }
body.cookies-ouvert { overflow:hidden; }
.cookies-lignes { display:grid; gap:12px; margin:0 0 22px; }
.cookies-ligne { display:flex; gap:18px; align-items:center; justify-content:space-between; border:1px solid var(--ligne); border-radius:14px; padding:16px 18px; }
.cookies-ligne strong { display:block; font-size:15.5px; }
.cookies-ligne span { display:block; font-size:13.5px; color:var(--gris); line-height:1.55; margin-top:2px; }
.cookies-fixe { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--vert-cta); white-space:nowrap; }
.cookies-bascule { position:relative; flex-shrink:0; width:52px; height:30px; cursor:pointer; }
.cookies-bascule input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.cookies-bascule span { position:absolute; inset:0; background:var(--ligne); border-radius:999px; transition:background .2s var(--ease); }
.cookies-bascule span::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform .2s var(--ease); }
.cookies-bascule input:checked + span { background:var(--vert-cta); }
.cookies-bascule input:checked + span::after { transform:translateX(22px); }
.cookies-bascule input:focus-visible + span { outline:3px solid var(--vert); outline-offset:3px; }
.cookies-choix { display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--vert-pale); border-radius:var(--r); padding:24px 28px; margin-bottom:36px; }
.cookies-choix strong { font-size:17px; }
.legal code { background:var(--creme); border:1px solid var(--ligne); border-radius:6px; padding:1px 6px; font-size:13px; }
.footer-bouton { background:none; border:0; padding:0; color:rgba(255,255,255,.82); font:inherit; text-align:left; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; min-height:44px; }
.footer-bouton:hover { color:#fff; text-decoration:underline; }
.nav-espace { display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--gris); font-weight:600; font-size:14px; letter-spacing:.4px; }
.nav-espace:hover { color:var(--encre); }
.nav-espace .ic { color:var(--vert); }
.header-hero:not(.solide) .nav-espace { color:rgba(255,255,255,.78); }
.header-hero:not(.solide) .nav-espace:hover { color:#fff; }
.header-hero:not(.solide) .nav-espace .ic { color:var(--or); }
@media (max-width:1150px){ .nav-espace { display:none; } }
@media (max-width:600px){ .cookies-corps { padding:22px 20px; } .cookies-actions .btn, .cookies-actions .btn-lien { width:100%; } .cookies-choix { flex-direction:column; align-items:flex-start; } }


/* ---------- Fiche projet : organisation en blocs et sommaire ---------- */
.fiche-sommaire { position:sticky; top:calc(var(--h-header) + 1px); z-index:400; background:rgba(246,248,243,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--ligne); margin-top:44px; }
/* Six onglets pour 735 px dans une fenêtre de 375 : on n'en voyait que 2,4, et
   rien — ni dégradé, ni flèche — ne disait qu'il y avait une suite. Le masque
   le dit. `overscroll-behavior-x` évite qu'arrivé au bout, le geste déclenche
   le retour du navigateur et fasse quitter la page. */
.fiche-sommaire-inner { display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding-top:0; padding-bottom:0; scrollbar-width:none; }
.fiche-sommaire a { scroll-snap-align:start; }
@media (max-width:900px){
  .fiche-sommaire-inner { -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
}
.fiche-sommaire-inner::-webkit-scrollbar { display:none; }
.fiche-sommaire a { padding:16px 14px; font-size:14px; font-weight:600; color:var(--gris); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; }
.fiche-sommaire a:hover, .fiche-sommaire a.actif { color:var(--encre); border-color:var(--or); }
/* Numérotation des blocs. Tous se ressemblaient — même carte, même filet, du
   haut en bas de la page : rien ne disait où l'on en était dans le récit. Un
   compteur CSS numérote les sections dans l'ordre du DOM (aucun numéro à tenir
   à jour dans les gabarits) et la pastille flotte à gauche du kicker qui ouvre
   chaque bloc. Elle disparaît sous 700 px, où la place manque. */
.fiche-principal { counter-reset:bloc; }
.fiche-bloc { scroll-margin-top:150px; padding-bottom:56px; margin-bottom:56px; border-bottom:1px solid var(--ligne); }
.fiche-bloc::before { counter-increment:bloc; content:counter(bloc,decimal-leading-zero); float:left; margin:-2px 14px 0 0; width:34px; height:34px; border:1px solid var(--or); border-radius:50%; color:var(--or-texte); font-size:12px; font-weight:800; letter-spacing:.5px; display:grid; place-items:center; }
.fiche-bloc:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
.fiche-bloc .fiche-h2:first-of-type, .fiche-bloc .kicker + .fiche-h2 { margin-top:0; }
.fiche-h3 { font-size:21px; font-weight:700; margin:36px 0 14px; }
.fiche .fiche-aside { top:150px; }

/* ---------- Graphiques ---------- */
.graphe { margin:0 0 30px; }
.graphe svg { width:100%; height:auto; display:block; }
.graphe figcaption { font-size:13.5px; color:var(--gris); line-height:1.6; margin-top:12px; }
.graphe-courbe { stroke-dasharray:2000; stroke-dashoffset:2000; }
.anim-vu .graphe-courbe, .graphe.anim-vu .graphe-courbe { animation:trace 2s var(--ease-out) forwards; }
@keyframes trace { to { stroke-dashoffset:0; } }
.graphe-aire, .graphe-jalon { opacity:0; }
.graphe.anim-vu .graphe-aire { animation:apparait .8s ease 1.1s forwards; }
.graphe.anim-vu .graphe-jalon { animation:apparait .5s ease forwards; }
.graphe.anim-vu .graphe-jalon:nth-of-type(2) { animation-delay:1.3s } .graphe.anim-vu .graphe-jalon:nth-of-type(3) { animation-delay:1.5s } .graphe.anim-vu .graphe-jalon:nth-of-type(4) { animation-delay:1.7s }
@keyframes apparait { to { opacity:1; } }
.jauge { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:24px 26px; }
.jauge-barre { height:16px; border-radius:999px; background:var(--vert-pale); overflow:hidden; }
.jauge-barre i { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--vert-cta),var(--vert)); transition:width 1.4s var(--ease-out); }
.graphe.anim-vu .jauge-barre i { width:var(--v); }
.jauge-legende { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:14px; color:var(--gris); }
.jauge-legende b { color:var(--encre); font-size:16px; }
.graphe-radar svg { max-width:360px; margin:0 auto; }
.radar-forme { transform-origin:center; transform:scale(.2); opacity:0; transition:transform .9s var(--ease-out), opacity .6s ease; }
.graphe.anim-vu .radar-forme { transform:scale(1); opacity:1; }
.radar-point { opacity:0; transition:opacity .4s ease .6s; }
.graphe.anim-vu .radar-point { opacity:1; }
.impact-duo { display:grid; grid-template-columns:400px 1fr; gap:48px; align-items:center; margin:34px 0 10px; }
.impact-texte h3 { font-size:19px; margin-bottom:10px; }
.impact-texte p { font-size:15px; color:var(--gris); }
.densite { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:24px 26px; display:grid; gap:16px; }
.densite-ligne { display:grid; grid-template-columns:190px 1fr 90px; align-items:center; gap:16px; font-size:14.5px; }
.densite-barre { height:14px; background:var(--creme); border-radius:999px; overflow:hidden; }
.densite-barre i { display:block; height:100%; width:0; border-radius:999px; background:var(--c); transition:width 1.1s var(--ease-out); transition-delay:calc(var(--i) * .15s); }
.graphe.anim-vu .densite-barre i { width:var(--v); }
.densite-ligne b { text-align:right; font-variant-numeric:tabular-nums; }
.equiv-mini { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:10px; }
.equiv-mini div { background:var(--vert-pale); border-radius:14px; padding:18px 20px; }
.equiv-mini strong { display:block; font-size:22px; font-weight:600; letter-spacing:-.5px; }
.equiv-mini span { display:block; font-size:13.5px; color:var(--gris); margin-top:4px; line-height:1.45; }
@media (prefers-reduced-motion:reduce){ .graphe-courbe { stroke-dashoffset:0; animation:none; } .graphe-aire, .graphe-jalon, .radar-point { opacity:1; animation:none; } .radar-forme { transform:none; opacity:1; } .jauge-barre i, .densite-barre i { width:var(--v); transition:none; } }
@media (max-width:1000px){ .impact-duo { grid-template-columns:1fr; gap:24px; } .equiv-mini { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .densite-ligne { grid-template-columns:1fr; gap:6px; } .densite-ligne b { text-align:left; } }

/* ---------- FAQ ---------- */
.faq { max-width:860px; margin:0 auto; display:grid; gap:12px; }
.faq-item { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:0 26px; transition:border-color .2s var(--ease); }
.faq-item[open] { border-color:var(--vert); }
.faq-item summary { cursor:pointer; font-weight:700; font-size:17px; padding:22px 0; list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:24px; font-weight:400; color:var(--vert); line-height:1; transition:transform .25s var(--ease); }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { margin:0 0 22px; color:var(--gris); font-size:15.5px; line-height:1.7; }

/* ---------- Deux parcours (particuliers / entreprises) ---------- */
.parcours { display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.parcours-bloc { display:flex; flex-direction:column; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); overflow:hidden; }
.parcours-photo { height:230px; }
.parcours-photo img { transition:transform 1.2s var(--ease); }
.parcours-bloc:hover .parcours-photo img { transform:scale(1.04); }
.parcours-corps { padding:34px 36px 36px; display:flex; flex-direction:column; flex:1; }
/* `--or` sur blanc tombe à 2,35:1 : c'est la seule entorse à la règle écrite en
   tête de cette feuille, et elle portait les deux étiquettes qui nomment les
   deux publics du site. `--or-texte` tient 6,35:1. */
.parcours-num { font-size:12px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; color:var(--or-texte); margin-bottom:10px; }
.parcours-bloc h3 { font-size:28px; font-weight:600; letter-spacing:-.8px; margin-bottom:10px; }
.parcours-bloc > .parcours-corps > p { color:var(--gris); }
.parcours-bloc .liste-check { margin:6px 0 26px; font-size:15px; }
.parcours-liens { margin-top:auto; display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.lien-souligne { color:var(--encre); font-weight:600; font-size:15px; text-decoration:none; border-bottom:2px solid var(--or); padding-bottom:2px; }
.lien-souligne:hover { border-color:var(--vert); }
@media (max-width:900px){ .parcours { grid-template-columns:1fr; } .parcours-corps { padding:28px 24px 30px; } }

/* ---------- Bascule particulier / entreprise ----------
   Posée près des prix, jamais dans la barre de menu (qui doit rester légère).
   Elle est réversible partout : c'est ce qui manquait, un visiteur passé en
   prix hors taxes ne pouvait plus revenir sans repasser par une fiche projet. */
.bascule-prix { margin:0 0 18px; font-size:13.5px; color:var(--gris); }
.bascule-prix button {
  background:none; border:0; padding:0 0 1px; margin:0; font:inherit; font-weight:600;
  color:var(--vert-cta); border-bottom:1px solid currentColor; cursor:pointer;
}
.bascule-prix button:hover { color:var(--encre); }
.bascule-prix.sur-sombre { color:rgba(255,255,255,.75); }
.bascule-prix.sur-sombre button { color:#E6C77E; }
.bascule-prix.sur-sombre button:hover { color:#fff; }

/* ---------- Fiche projet : chemin d'achat sur mobile ----------
   Sous 900 px la colonne d'achat cesse d'être collante et tombe en bas d'une
   page de seize écrans : il n'y avait plus aucun moyen d'acheter sans dérouler
   toute la fiche. Cette barre rétablit le chemin, comme sur le tunnel. */
.fiche-achat-mobile { display:none; }
@media (max-width:900px){
  .fiche-achat-mobile {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:480;
    align-items:center; gap:14px; background:var(--blanc);
    border-top:1px solid var(--ligne); box-shadow:0 -10px 30px rgba(15,26,20,.12);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .fiche-achat-mobile .fam-texte { flex:1; display:grid; line-height:1.25; min-width:0; }
  .fiche-achat-mobile .fam-texte span { font-size:12.5px; color:var(--gris); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fiche-achat-mobile .fam-texte strong { font-size:17px; white-space:nowrap; }
  .fiche-achat-mobile .btn { padding:13px 20px; font-size:15px; white-space:nowrap; }
  /* Le remplissage était posé sur <main>, mais la barre est fixée à la fenêtre :
     arrivé en bas, elle recouvrait « © Carbone.eco » et « Site hébergé en
     Europe ». Il le faut sur le corps entier. */
  body.page-projet { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------- Phrase de définition, sous le hero ----------
   Elle porte l'identité de l'entité, l'offre et le prix en une phrase citable.
   Sobre par construction : c'est du texte, pas une bannière.
   EN DEUX COLONNES, ET C'EST TOUT LE SUJET. Centrées et empilées, ces trois
   phrases faisaient cinq lignes pleine largeur — un mur, juste sous le hero,
   avant le premier projet. La phrase d'identité tient seule à gauche, en grand :
   c'est celle qu'un moteur de réponse cite. Les faits suivent à droite, en
   mesure courte. Le texte est le même, l'œil ne bute plus dessus. */
.definition { padding-top:56px; padding-bottom:0; }
.definition-grille {
  display:grid; grid-template-columns:1fr 1fr; gap:24px 56px; align-items:start;
}
.definition-lead { margin:0; font-size:26px; line-height:1.3; letter-spacing:-.6px; }
.definition-lead strong { font-weight:600; color:var(--encre); }
.definition-suite { margin:0; font-size:17.5px; line-height:1.72; color:var(--gris); max-width:56ch; }
/* Un filet fin sépare les deux colonnes sans dessiner de bloc : la définition
   reste du texte courant, elle ne devient pas une bannière. */
@media (min-width:901px){ .definition-suite { border-left:1px solid var(--ligne); padding-left:28px; margin-left:-28px; } }
@media (max-width:900px){ .definition-grille { grid-template-columns:1fr; gap:18px; } .definition-lead { font-size:22px; } .definition-suite { font-size:16.5px; max-width:none; } }

/* Date de mise à jour du contenu, en fin de page. Saisie à la main dans le
   gabarit, jamais dérivée de la date de build. */
.maj-page {
  max-width:var(--wrap); margin:0 auto; padding:0 32px 40px;
  font-size:13px; color:var(--gris);
}
@media (max-width:700px){ .maj-page { padding:0 20px 32px; } }

/* ---------- Pages méthodes ----------
   Cinq méthodes du Label Bas-Carbone, décrites depuis data/methodes.json. */
.methodes-grille { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.methode-carte {
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r);
  padding:26px 28px; display:grid; gap:10px; align-content:start;
}
.methode-etiquette {
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:1.8px; text-transform:uppercase; color:var(--or-texte);
}
.methode-carte h3 { font-size:21px; margin:0; }
.methode-carte h3 a { color:var(--encre); text-decoration:none; }
.methode-carte h3 a:hover { color:var(--vert-cta); }
.methode-porteur { margin:0; font-size:14px; color:var(--vert-cta); font-weight:600; }
.methode-carte p { margin:0; font-size:15px; line-height:1.6; color:var(--gris); }
.methode-lien { margin-top:4px; font-weight:600; font-size:14.5px; color:var(--vert-cta); text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.methode-lien:hover { text-decoration:underline; }
.methode-faits { display:grid; gap:0; margin:0 0 34px; border-top:1px solid var(--ligne); }
.methode-faits > div { display:grid; grid-template-columns:230px 1fr; gap:18px; padding:13px 0; border-bottom:1px solid var(--ligne); }
.methode-faits dt { font-size:14px; color:var(--gris); margin:0; }
.methode-faits dd { margin:0; font-size:15.5px; }
.methode-engagements { margin:0 0 34px; }
@media (max-width:900px){
  .methodes-grille { grid-template-columns:1fr; }
  .methode-faits > div { grid-template-columns:1fr; gap:3px; }
}

/* Avis de lecture en tête d'un document contractuel. Sert à lever une ambiguïté
   sans toucher au texte signé lui-même. */
.legal-avis {
  background:var(--or-pale); border-left:3px solid var(--or-texte); border-radius:0 12px 12px 0;
  padding:18px 22px; margin:0 0 32px;
}
.legal-avis strong { display:block; margin-bottom:6px; color:var(--encre); }
.legal-avis p { margin:0; font-size:15px; line-height:1.62; color:var(--gris); }
.legal-avis a { color:var(--vert-cta); }

/* ---------- /mon-espace : connexion e-mail + mot de passe ----------
   La carte de connexion porte désormais DEUX formulaires : celui de tous les
   jours (adresse + mot de passe) et, replié dessous, celui du lien par e-mail
   — première visite et mot de passe oublié. Le repli est un <details> natif :
   il s'ouvre sans JavaScript, donc le seul chemin d'entrée d'un contributeur
   qui n'a pas encore de mot de passe ne dépend d'aucun script. */
#espace-connexion .espace-bloc { display:grid; gap:8px; }
#espace-connexion .espace-bloc > p { margin:0 0 6px; }
#espace-connexion .espace-bloc .champ { margin-bottom:6px; }

.espace-oubli { border-top:1px solid var(--ligne); margin-top:20px; padding-top:14px; }
.espace-oubli > summary {
  cursor:pointer; list-style:none; padding:4px 0;
  font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--gris);
  text-decoration:underline; text-underline-offset:3px;
}
.espace-oubli > summary::-webkit-details-marker { display:none; }
.espace-oubli > summary:hover, .espace-oubli[open] > summary { color:var(--encre); }
.espace-oubli > summary:focus-visible { outline:2px solid var(--vert); outline-offset:3px; border-radius:8px; }
.espace-oubli > form { margin-top:16px; }

/* Proposition de mot de passe au retour d'un lien magique. Volontairement une
   carte étroite posée au-dessus de l'espace, et non une fenêtre modale : la
   session est déjà ouverte, rien n'est bloqué, « Plus tard » ne coûte rien. */
.espace-definir {
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r);
  padding:26px 28px; margin-bottom:26px; max-width:620px;
}
.espace-definir h2 { font-size:26px; margin:0 0 8px; }
.espace-definir > form > p { margin:0 0 18px; color:var(--gris); }
.espace-definir-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.espace-definir .erreur { margin:16px 0 0; }
.espace-definir .espace-etat { margin:0; }
@media (max-width:600px){
  .espace-definir { padding:20px 18px; }
  .espace-definir-actions { display:grid; }
  .espace-definir-actions .btn { width:100%; }
}

/* ---------- Logos des entreprises contributrices ----------
   Alignement en ligne, hauteur commune, teinte neutralisée au repos pour que
   sept identités graphiques différentes ne se disputent pas la page. La couleur
   revient au survol et au focus clavier. */
.references-logos {
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:26px 46px;
}
.references-logos li { display:flex; align-items:center; }
.references-logos img {
  height:34px; width:auto; max-width:170px; object-fit:contain;
  /* Deux logos sont clairs (Adopale, Union des marques) : une simple opacité les
     effaçait. Un peu de contraste les tient lisibles sans casser l'harmonie. */
  filter:grayscale(1) contrast(1.2); opacity:.78;
  transition:filter .25s, opacity .25s;
}
.references-logos li:hover img, .references-logos li:focus-within img { filter:none; opacity:1; }
@media (max-width:700px){
  .references-logos { gap:22px 30px; }
  .references-logos img { height:27px; max-width:130px; }
}
@media (prefers-reduced-motion:reduce){ .references-logos img { transition:none; } }

/* ---------------------------------------------------------------------------
   MENTION DE L'ARTICLE 30 DE L'ARRÊTÉ DU 5 SEPTEMBRE 2025.

   Deux phrases que le référentiel du Label bas carbone impose mot pour mot dès
   qu'une page annonce un volume de crédits carbone non encore vérifiés (fiche
   projet, catalogue, accueil, tunnel). Elle est écrite en petit parce que c'est
   une mention légale et non un argument — mais lisible : 13,5 px sur fond pâle
   et un filet vert à gauche, pas du gris clair sur blanc. Une mention illisible
   est une mention absente, et c'est précisément ce qu'un contrôleur regarde.

   Elle est composée en `mesure` limitée : trois phrases sur toute la largeur
   d'un écran de bureau ne se lisent pas. */
.mention-lbc {
  max-width:760px; margin:22px auto 0; padding:12px 16px;
  background:var(--vert-pale); border-left:3px solid var(--vert);
  border-radius:0 10px 10px 0;
  font-size:13.5px; line-height:1.6; color:var(--vert-fonce);
}
.mention-lbc-source { display:block; margin-top:4px; color:var(--gris); font-size:12.5px; }
/* Dans le tunnel, à l'étape de paiement, sous les cases : petit texte gris,
   sans cadre ni fond (le cadre vert chargeait trop l'étape 1, 10/09/2026). */
.mention-lbc.mention-lbc-sobre { max-width:none; margin:14px 0 0; padding:0; background:none; border:0; border-radius:0; font-size:11.5px; line-height:1.45; color:var(--gris); }
.mention-lbc-sobre * { color:inherit; }
.mention-lbc-sobre .mention-lbc-source { font-size:inherit; margin-top:2px; }
@media (max-width:720px) { .mention-lbc { margin-left:0; margin-right:0; } }

/* ============================================================
   GRANDS ÉCRANS (10 septembre 2026). Tout le site est dessiné en pixels
   pour un conteneur de 1 280 px : sur un écran de 2 560 ou 3 440 px, la
   page n'occupait plus qu'un tiers de la largeur, en petits caractères. Au
   lieu de réécrire chaque taille, la page entière s'agrandit par paliers
   (propriété zoom, reconnue par Chrome, Safari, Edge et Firefox 126+), pour
   que le contenu garde environ les trois quarts de la largeur. Réservé au
   site public (classe posée par layout.mjs) : l'administration n'est pas
   concernée. Les hauteurs exprimées en unités d'écran (vh, svh) sont
   multipliées par le zoom : elles sont divisées d'autant, sinon le hero
   déborderait de l'écran.
   ============================================================ */
:root { --zoom:1; }
/* Chaque palier exige aussi une hauteur : un écran très large mais peu haut
   (3 440 × 1 440) garderait sinon un zoom qui fait déborder le hero. */
@media (min-width:1700px) and (min-height:880px) { html.site-public { --zoom:1.1; } }
@media (min-width:1920px) and (min-height:1000px) { html.site-public { --zoom:1.2; } }
@media (min-width:2200px) and (min-height:1150px) { html.site-public { --zoom:1.35; } }
@media (min-width:2560px) and (min-height:1350px) { html.site-public { --zoom:1.55; } }
@media (min-width:3000px) and (min-height:1600px) { html.site-public { --zoom:1.8; } }
@media (min-width:3400px) and (min-height:1800px) { html.site-public { --zoom:2; } }
@media (min-width:1700px) {
  html.site-public { zoom:var(--zoom); }
  html.site-public body { min-height:calc(100vh / var(--zoom)); }
  html.site-public .hero { min-height:calc(100svh / var(--zoom)); }
  html.site-public .fiche-hero { min-height:min(calc(62svh / var(--zoom)), 560px); }
  html.site-public .fiche-hero-v2 { min-height:min(calc(72svh / var(--zoom)), 680px); }
  html.site-public .menu-panel { max-height:calc(100svh / var(--zoom) - var(--h-header) - var(--h-bandeau, 0px) - 24px); }
  html.site-public .cookies-reglages .cookies-corps { max-height:calc(86vh / var(--zoom)); }
  html.site-public .art-cote .art-sommaire { max-height:calc(100vh / var(--zoom) - 140px); }
}
/* Écrans panoramiques (21:9) : le zoom est plafonné par la hauteur, c'est la
   largeur du conteneur qui s'ouvre, pour ne pas laisser deux bandes vides. */
@media (min-width:2200px) and (min-aspect-ratio:21/9) { html.site-public { --wrap:1600px; } }

/* ============================================================
   RETOUR INTERNE DU 10 SEPTEMBRE 2026
   ============================================================ */
/* L'or des titres : --or-texte (#7A5A1E) virait au brun à côté du noir. Les
   titres sont de grands caractères (≥ 24 px), pour lesquels 3:1 suffit
   (WCAG 1.4.3) : #A67C1F tient 3,4:1 sur le crème et 3,8:1 sur le blanc, et
   reste doré. --or-texte demeure pour le texte courant. */
:root { --or-titre:#A67C1F; }
h1 em, h2 em, .manif-titre em { color:var(--or-titre); }
/* « Contribuer », en tête de la carte d'achat, se lisait mal sur le vert nuit. */
.achat-carte .achat-tete .achat-label { color:#E6C77E; }
/* Les tuiles de chiffres de la fiche : une étiquette sur une ou deux lignes
   décalait le chiffre d'une tuile à l'autre. L'étiquette réserve deux lignes,
   les chiffres s'alignent. */
.fiche-faits li > span { line-height:1.5; min-height:3em; display:flex; align-items:flex-end; }
.fiche-faits .fait-logos { min-height:34px; }

/* Calculateur : lieux de départ et d'arrivée, total de plusieurs éléments. */
.calc-lieux-note { margin:-6px 0 12px; font-size:13px; color:var(--vert-fonce); min-height:1.2em; }
.calc-ajouter { margin:6px 0 12px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.35); }
.calc-ajouter:hover { background:rgba(255,255,255,.18); }
.calc-ajouter .ic { width:16px; height:16px; }
.calc-cumul { margin:0 0 16px; padding:14px 16px; border:1px solid rgba(255,255,255,.2); border-radius:14px; }
.calc-cumul-titre { margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--or); }
.calc-cumul-liste { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; }
.calc-cumul-liste li { display:flex; justify-content:space-between; gap:10px; }
.calc-retirer { background:none; border:0; color:rgba(255,255,255,.7); font-size:18px; line-height:1; cursor:pointer; padding:0 0 0 6px; }
.calc-cumul-somme { margin:10px 0 0; font-size:15px; }

/* Sceau Carbone.eco (11/09/2026) : pied de page, bandeau de confiance, carte d'achat. */
.sceau { display:block; height:auto; }
.sceau-pied { width:150px; margin-top:18px; }
.sceau-bandeau { width:96px; }
.sceau-achat { width:130px; margin:16px 0 4px; }

/* Fiche projet : sceau dans le Hero, en haut à droite, sur la photo du projet
   (demande du client, 11/09/2026) — il ne charge plus la carte d'achat. */
.fiche-sceau { position:absolute; top:22px; left:0; right:0; z-index:2; display:flex; justify-content:flex-end; pointer-events:none; }
.sceau-hero { width:100px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
@media (max-width:700px){ .fiche-sceau { top:14px; } .sceau-hero { width:72px; } }
/* Carte d'achat collante : jamais plus haute que la fenêtre. Sur un portable,
   elle défile d'elle-même au lieu de cacher son bas (et son bouton). */
.fiche .fiche-aside { max-height:calc(100svh / var(--zoom, 1) - 170px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; border-radius:var(--r); }
.achat-carte-fixe .jauge-achat + [data-volume-choisi], .achat-carte-fixe [data-contrib-lien] { margin-top:16px; }
.achat-carte-fixe .achat-clos { margin:16px 26px 0; }
@media (max-width:900px){ .fiche .fiche-aside { max-height:none; overflow:visible; } }

/* Bandeau saisonnier : version courte sur mobile (audit du 11/09/2026). */
.bandeau-saison .bandeau-court { display:none; }
@media (max-width:700px){
  .bandeau-a-court .bandeau-long { display:none; }
  .bandeau-a-court .bandeau-court { display:inline; }
}
/* Fiche projet sur mobile : les libellés des chiffres clés tiennent sur deux lignes. */
@media (max-width:600px){ .fiche-faits li > span { letter-spacing:.06em; min-height:0; } }