/* ============================================================
   ADRCP · Démarche citoyenne — Genève
   Structure & copy = maquette du comité. Exécution élevée.
   Identité définitive : VERT officiel (direction « forêt vive »).
   ============================================================ */

:root{
  --maxw:1180px;
  --gutter:clamp(20px, 5vw, 64px);
  --r:4px;
  --shadow:0 1px 2px rgba(20,24,28,.05), 0 18px 48px -26px rgba(20,24,28,.34);
  --shadow-sm:0 1px 2px rgba(20,24,28,.05), 0 8px 22px -16px rgba(20,24,28,.3);
  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --switch-h:0px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- PALETTE OFFICIELLE · VERT (forêt vive) ---------- */
body{
  --paper:#F1F2EC; --paper-soft:#E8EEE2; --surface:#F8FBF5; --surface-2:#FFFFFF;
  --ink:#15211B; --ink-soft:#44514A; --brun:#717A6F; --line:#DCE0D2; --line-soft:#E9EDDF;
  --accent:#1E9035; --accent-deep:#1B7A30; --accent-tint:#D8EAD9; --accent-rgb:27,122,48;
  --terre:#B5462F;
  --deep:#10313C; --deep-soft:#1A4A57; --deep-eye:#7FCF92; --deep-line:rgba(236,243,232,.16);
  --c1:#1B6C7E; --c2:#1E9035; --c3:#E0A12F; --c4:#B5462F;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--switch-h) + 84px)}
body{
  margin:0; padding-top:var(--switch-h);
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;   /* footer toujours collé en bas */
}
main{flex:1 0 auto}
.foot{flex-shrink:0}
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
img,svg{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:500; line-height:1.12; letter-spacing:-.014em}
p{margin:0}
:focus-visible{outline:2px solid var(--accent-deep); outline-offset:3px; border-radius:2px}
::selection{background:var(--accent-tint); color:var(--ink)}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.tnum{font-variant-numeric:tabular-nums lining-nums}

.eyebrow{font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.7em}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent); opacity:.6}

.btn{
  --bg:var(--accent-deep); --fg:#fff; --bd:var(--accent-deep);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.05em; text-transform:uppercase;
  padding:.92em 1.7em; border-radius:var(--r); cursor:pointer;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd); text-decoration:none;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s ease;
}
.btn:hover{background-color:var(--accent); border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); text-transform:none; letter-spacing:.01em; font-weight:500; font-size:15px}
.btn--ghost:hover{background:transparent; border-color:var(--accent-deep); color:var(--accent-deep)}
.btn--block{width:100%}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* — boutons d'action : relief (dégradé + ombre nette + liseré clair) — */
.nav__cta, .btn--sign{
  color:#fff;
  background-image:linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-color:var(--accent-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 3px rgba(20,24,28,.16), 0 7px 16px -8px rgba(var(--accent-rgb),.55);
  transition:filter .22s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
}
.nav__cta:hover, .btn--sign:hover{
  filter:brightness(1.08) saturate(1.03); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 3px 6px rgba(20,24,28,.18), 0 13px 26px -9px rgba(var(--accent-rgb),.62);
}
.nav__cta:active, .btn--sign:active{ transform:translateY(0); filter:brightness(.97);
  box-shadow:inset 0 2px 4px rgba(20,24,28,.3), 0 1px 2px rgba(20,24,28,.2); }
@media (prefers-reduced-motion:reduce){ .nav__cta,.btn--sign{transition:none} .nav__cta:hover,.btn--sign:hover{transform:none} }

.btn--sign{width:100%; margin-top:4px; padding:1.18em 2em; font-size:15px; letter-spacing:.05em; border-radius:9px}

.tlink{font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.04em; color:var(--terre); text-decoration:none; display:inline-flex; align-items:center; gap:.5em; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .25s ease, gap .25s ease}
.tlink:hover{border-color:var(--terre); gap:.78em}

.skip{position:absolute; left:-9999px; top:0; z-index:100}
.skip:focus{left:12px; top:calc(var(--switch-h) + 12px); background:var(--surface-2); padding:10px 16px; border-radius:var(--r); box-shadow:var(--shadow)}

/* ============================ HEADER ============================ */
.head{position:sticky; top:var(--switch-h); z-index:40; background:transparent; border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease}
.head.is-stuck{background:color-mix(in srgb, var(--paper) 86%, transparent); border-bottom:1px solid var(--line); backdrop-filter:saturate(140%) blur(10px)}
.head__in{display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.brand__mark{flex:0 0 auto}
.brand__logo{display:block; height:68px; width:auto}
.foot .brand__logo{height:76px}
@media (max-width:680px){ .brand__logo{height:54px} }

/* ============================ PRELOADER (écran de chargement) ============================ */
.preloader{display:none}
.js .preloader{position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:var(--paper)}
.preloader__box{display:flex; flex-direction:column; align-items:center; gap:28px}
.preloader__logo{width:min(250px,64vw); height:auto; opacity:0; transform:translateY(8px) scale(.985); animation:plLogo .7s var(--ease) .04s forwards}
@keyframes plLogo{to{opacity:1; transform:none}}
.preloader__bar{width:120px; height:2px; border-radius:100px; background:rgba(20,24,28,.1); overflow:hidden; position:relative}
.preloader__bar i{position:absolute; top:0; bottom:0; left:-42%; width:42%; border-radius:100px; background:var(--accent-deep); animation:plBar 1.1s var(--ease) infinite}
@keyframes plBar{0%{left:-42%}100%{left:100%}}
.preloader.is-done{opacity:0; visibility:hidden; transition:opacity .55s ease, visibility .55s ease}
@media (prefers-reduced-motion:reduce){ .preloader__logo{animation:none; opacity:1; transform:none} .preloader__bar i{animation:none; left:0; width:100%} }
.brand__txt{display:flex; flex-direction:column; line-height:1}
.brand__name{font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:.04em}
.brand__sub{font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--brun); margin-top:4px}
.nav{display:flex; align-items:center; gap:30px; min-width:0}
.nav a{font-family:var(--sans); font-weight:500; font-size:15px; color:var(--ink-soft); text-decoration:none; position:relative; padding:6px 0; white-space:nowrap}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--terre); transition:right .3s ease}
.nav a:hover{color:var(--ink)} .nav a:hover::after{right:0}
.nav__cta{margin-left:8px; font-size:13px; font-weight:600; letter-spacing:.05em; padding:.85em 1.7em; border-radius:9px}
.nav a.nav__cta, .nav a.nav__cta:hover{color:#fff}        /* gana a .nav a (texto blanco sobre el botón) */
.nav a.nav__cta::after{display:none}                       /* sin subrayado de los enlaces de nav */
.burger{display:none; background:none; border:1px solid var(--line); border-radius:var(--r); width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; color:var(--ink); flex:0 0 auto}

/* ============================ HERO ============================ */
.hero{padding-block:clamp(26px,3.4vw,46px) clamp(44px,6vw,80px)}
.hero__grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,4.5vw,64px); align-items:start}
.hero__grid>*{min-width:0}
.hero h1{font-size:clamp(32px,4.5vw,52px); line-height:1.06; letter-spacing:-.022em; color:var(--ink)}
.hero h1 em{font-style:italic; font-weight:500; color:var(--accent-deep)}
.hero__lead{margin-top:18px; max-width:54ch; color:var(--ink-soft); font-size:16.5px; line-height:1.58}
.hero__lead p + p{margin-top:11px}

.gauge{margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
.hero__media .gauge{margin-top:22px; padding-top:20px}
.gauge__count{display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap}
.gauge__num{font-family:var(--serif); font-weight:600; font-size:38px; line-height:1; color:var(--terre); letter-spacing:-.01em}
.gauge__txt{font-size:15.5px; color:var(--ink-soft)}
.gauge__track{margin-top:16px; height:8px; border-radius:100px; background:var(--paper-soft); border:1px solid var(--line-soft); overflow:hidden}
.gauge__fill{height:100%; width:0; border-radius:100px; background:linear-gradient(90deg, var(--accent), var(--accent-deep)); transition:width 1.2s var(--ease)}
.gauge__goal{margin-top:11px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--brun); display:flex; align-items:center; gap:.6em}
.gauge__goal::before{content:""; width:8px; height:8px; border-radius:50%; border:2px solid var(--accent); flex:0 0 auto}

/* ---- AVANT / APRÈS · comparateur interactif (photos à venir) ---- */
.cmp{position:relative; --pos:50%; aspect-ratio:3/2; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface-2); user-select:none; -webkit-user-select:none; min-width:0; isolation:isolate}
.cmp__layer{position:absolute; inset:0; overflow:hidden}
.cmp__layer--after{z-index:1}
.cmp__layer--before{z-index:2; clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp:not(.is-drag) .cmp__layer--before{transition:clip-path .09s linear}
.cmp__plate{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px}
.cmp__plate img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cmp__plate--before{background:linear-gradient(157deg,#E4EBD9 0%, #CEDCBE 64%, #BFD0AB 100%)}
.cmp__plate--after{background:linear-gradient(157deg,#E1E1DD 0%, #CFCFCA 64%, #C1C1BB 100%)}
.cmp__plate::before,.cmp__plate::after{content:""; position:absolute; width:14px; height:14px; border:1px solid rgba(22,26,30,.32)}
.cmp__plate--before::before{top:13px; left:13px; border-right:0; border-bottom:0}
.cmp__plate--before::after{bottom:13px; left:13px; border-right:0; border-top:0}
.cmp__plate--after::before{top:13px; right:13px; border-left:0; border-bottom:0}
.cmp__plate--after::after{bottom:13px; right:13px; border-left:0; border-top:0}
.cmp__ico{color:rgba(22,26,30,.4)}
.cmp__hint{font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:rgba(22,26,30,.52)}
.cmp__tag{position:absolute; top:14px; z-index:4; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:#F8F3E8; padding:5px 11px; border-radius:2px; background:rgba(18,22,26,.6); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); pointer-events:none}
.cmp__tag--before{left:14px}
.cmp__tag--after{right:14px; background:var(--terre)}
.cmp__handle{position:absolute; top:0; bottom:0; left:var(--pos); z-index:5; width:46px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; cursor:ew-resize; background:transparent; border:0; padding:0; touch-action:none}
.cmp__handle:active{cursor:grabbing}
.cmp__line{position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:rgba(248,243,232,.92); box-shadow:0 0 0 1px rgba(18,22,26,.16)}
.cmp__grip{position:relative; width:42px; height:42px; border-radius:50%; background:var(--surface-2); border:1.5px solid var(--accent-deep); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(18,22,26,.3); transition:transform .15s ease}
.cmp__handle:hover .cmp__grip{transform:scale(1.06)}
.cmp__handle:focus-visible{outline:none}
.cmp__handle:focus-visible .cmp__grip{outline:2px solid var(--accent-deep); outline-offset:3px}
.cmp__cap{margin-top:14px; display:flex; align-items:center; gap:14px; font-family:var(--sans)}
.cmp__cap b{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap}
.cmp__cap .sep{flex:1; height:1px; background:var(--line)}

/* — synthèse graphique posée sur la photo : terres → béton — */
.cmp__fact{
  position:absolute; left:0; right:0; bottom:0; z-index:4; pointer-events:none;
  display:flex; align-items:center; justify-content:center; gap:10px 14px; flex-wrap:wrap;
  padding:26px 16px 13px; text-align:center; font-family:var(--sans); color:#F5F2E9;
  background:linear-gradient(180deg, rgba(14,20,16,0) 0%, rgba(14,20,16,.58) 38%, rgba(14,20,16,.74) 100%);
}
.cmp__fact b{font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap}
.cmp__fact .fact__from{color:#CFE8C6}
.cmp__fact .fact__to{color:#F2D3C6}
.cmp__fact .fact__arr{display:inline-flex; color:rgba(245,242,233,.85); flex:0 0 auto}

/* ============================ SECTIONS ============================ */
section{position:relative; z-index:2}
.sec{padding-block:clamp(62px,8.5vw,116px)}
.sec--tint{background:var(--paper-soft); border-block:1px solid var(--line-soft)}
.sec__head{max-width:54ch}
.sec__title{font-size:clamp(27px,3.7vw,42px); color:var(--ink); line-height:1.1}
.sec__title .soft{color:var(--accent-deep)}
.sec__lead{margin-top:20px; max-width:60ch; color:var(--ink-soft); font-size:18px; line-height:1.6}
.reveal{opacity:1; transform:none}
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}

/* — 02 · stats — */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:48px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.stat{background:var(--surface-2); padding:clamp(28px,3.4vw,40px); transition:background .25s ease}
.stat:hover{background:var(--surface)}
.stat__num{font-family:var(--serif); font-weight:600; font-size:clamp(30px,3.8vw,42px); line-height:1; color:var(--terre); letter-spacing:-.015em}
.stat__label{margin-top:14px; color:var(--ink-soft); font-size:15.5px; max-width:24ch}

/* — 03 · tram / routier — */
.dual{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px}
.icard{display:flex; align-items:center; gap:20px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.icard:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.icard__ico{flex:0 0 auto; width:54px; height:54px; border-radius:var(--r); background:var(--accent-tint); color:var(--accent-deep); display:flex; align-items:center; justify-content:center}
.icard>span:last-child{min-width:0}
.icard__kicker{display:block; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--terre)}
.icard__title{display:block; font-family:var(--serif); font-size:21px; color:var(--ink); margin-top:5px; line-height:1.2}
.dual__foot{margin-top:30px; display:grid; grid-template-columns:1fr auto; gap:24px 40px; align-items:end}
.dual__foot p{color:var(--ink-soft); max-width:60ch; font-size:17px}
.icard:nth-of-type(1) .icard__ico{color:var(--c1)}
.icard:nth-of-type(2) .icard__ico{color:var(--c4)}

/* — 04 · timeline — */
.tl{margin-top:52px; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative}
.tl::before{content:""; position:absolute; top:21px; left:21px; right:21px; height:1.5px; background:var(--line); z-index:0}
.tl__node{position:relative; z-index:1}
.tl__dot{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--accent); background:var(--surface-2); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600; font-size:16px}
.tl__node:last-child .tl__dot{border-color:var(--terre); color:var(--terre); background:var(--surface-2)}
.tl__year{font-family:var(--serif); font-weight:600; font-size:26px; color:var(--ink); margin-top:18px; letter-spacing:-.01em}
.tl__label{margin-top:6px; color:var(--ink-soft); font-size:15px; max-width:22ch}

/* — 05 · bénéfices — */
.benef{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px}
.bcard{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:30px clamp(24px,2.6vw,32px); display:flex; flex-direction:column; gap:18px; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.bcard:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.bcard__no{font-family:var(--serif); font-weight:600; font-size:34px; line-height:1; color:var(--line); letter-spacing:.02em}
.bcard:hover .bcard__no{color:var(--accent-tint)}
.bcard__q{font-family:var(--serif); font-size:20px; line-height:1.3; color:var(--ink); letter-spacing:-.01em}

/* — 06 · concret — */
.concret{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:48px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.ccard{background:var(--surface-2); padding:clamp(24px,2.8vw,32px); display:flex; flex-direction:column; gap:14px; transition:background .25s ease}
.ccard:hover{background:var(--surface)}
.ccard__ico{color:var(--accent-deep)}
.ccard__num{font-family:var(--serif); font-weight:600; font-size:clamp(26px,3vw,34px); line-height:1; color:var(--terre); letter-spacing:-.01em}
.ccard__unit{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brun); margin-top:-4px}
.ccard__label{font-size:15.5px; color:var(--ink-soft)}
.ccard:last-child .ccard__num{color:var(--accent-deep)}
.concret .ccard:nth-of-type(1) .ccard__ico{color:var(--c1)}
.concret .ccard:nth-of-type(2) .ccard__ico{color:var(--c2)}
.concret .ccard:nth-of-type(3) .ccard__ico{color:var(--c3)}
.concret .ccard:nth-of-type(4) .ccard__ico{color:var(--c4)}

/* — 07 · témoignage — */
.faces{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(34px,5vw,68px); align-items:center}
.portrait{position:relative; border:1px solid var(--line); background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); padding:18px}
.portrait__frame{position:relative; aspect-ratio:4/5; border:1px dashed var(--line); border-radius:2px; background:var(--surface-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; overflow:hidden}
.portrait__frame::before,.portrait__frame::after{content:""; position:absolute; width:13px; height:13px; border:1px solid var(--brun); opacity:.5}
.portrait__frame::before{top:9px; left:9px; border-right:0; border-bottom:0}
.portrait__frame::after{bottom:9px; right:9px; border-left:0; border-top:0}
.portrait__play{width:58px; height:58px; border-radius:50%; border:1.5px solid var(--accent-deep); color:var(--accent-deep); background:var(--surface-2); display:flex; align-items:center; justify-content:center}
.portrait__hint{font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--brun); text-align:center; max-width:24ch; line-height:1.5}
.quote{}
.quote__mark{font-family:var(--serif); font-size:60px; line-height:.5; color:var(--accent-tint); display:block; height:34px}
.quote blockquote{margin:0; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(21px,2.7vw,29px); line-height:1.4; color:var(--ink); max-width:24ch}
.quote__by{margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft)}
.quote__by b{font-weight:600; color:var(--ink)}

/* ============================ CTA + FORMULAIRE ============================ */
.cta{background:var(--deep); color:#EDE6D8; position:relative; overflow:hidden}
.cta::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}
.cta__in{position:relative; z-index:2; text-align:center; max-width:680px; margin-inline:auto}
.cta .eyebrow{color:var(--deep-eye)} .cta .eyebrow::before{background:var(--deep-eye)}
.cta h2{font-size:clamp(26px,3.6vw,40px); color:#FBF8F1; margin-top:18px; line-height:1.16}
.form{background:var(--surface-2); border:1px solid var(--line); border-radius:calc(var(--r) + 4px); box-shadow:0 30px 70px -40px rgba(0,0,0,.6); padding:clamp(26px,3.4vw,40px); margin-top:34px; text-align:left}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.form__fields > .field{margin-top:16px}
.field label{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.field input{font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--paper-soft); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; width:100%}
.field input::placeholder{color:#B3A78F}
.field input:focus{outline:none; background:var(--surface-2); border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.form .btn{width:100%; margin-top:22px; padding-block:1.05em}
.form__note{text-align:center; margin-top:16px; font-size:13px; color:var(--brun)}
.form__ok{display:none; text-align:center; padding:10px 0; color:var(--accent-deep); font-size:16px; font-family:var(--serif); font-style:italic}
.form.is-sent .form__fields{display:none}
.form.is-sent .form__ok{display:block}
.form__err{display:none; margin-top:14px; text-align:center; font-size:14px; color:var(--terre)}
.form.has-error .form__err{display:block}

/* ============================ FOOTER ============================ */
.foot{background:var(--paper-soft); border-top:1px solid var(--line); padding-block:48px 30px}
.foot__top{display:flex; flex-wrap:wrap; gap:28px 48px; align-items:center; justify-content:space-between}
.foot__links{display:flex; flex-wrap:wrap; gap:8px 26px}
.foot__links a{color:var(--ink-soft); text-decoration:none; font-size:15px; transition:color .2s ease}
.foot__links a:hover{color:var(--accent-deep)}
.social{display:flex; gap:10px}
.social a{width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .2s ease}
.social a:hover{border-color:var(--accent-deep); color:var(--accent-deep)}
.foot__bar{margin-top:34px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--brun)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1280px){
  .nav{gap:19px}
  .nav a{font-size:14.5px}
}
@media (max-width:920px){
  .hero__grid{grid-template-columns:1fr; gap:38px}
  .cmp{max-width:560px}
  .faces{grid-template-columns:1fr; gap:34px}
  .faces__body{order:2}
  .stats,.concret{grid-template-columns:repeat(2,1fr)}
  .dual{grid-template-columns:1fr}
  .benef{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr 1fr; gap:30px 24px}
  .tl::before{display:none}
  .dual__foot{grid-template-columns:1fr; gap:20px}
}
/* — barre de nav : bascule en menu déroulant tôt (7 liens ne tiennent plus en ligne) — */
@media (max-width:1080px){
  .nav{position:fixed; inset:calc(var(--switch-h) + 74px) 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--surface-2); border-bottom:1px solid var(--line); padding:8px var(--gutter) 20px; transform:translateY(-160%); transition:transform .32s var(--ease); box-shadow:var(--shadow); z-index:39}
  .nav.is-open{transform:translateY(0)}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:16px}
  .nav a::after{display:none}
  .nav__cta{margin:16px 0 0; width:100%; justify-content:center; padding:.95em 1.25em}
  .burger{display:inline-flex}
}
@media (max-width:680px){
  body{font-size:16px}
  .cmp{max-width:none; aspect-ratio:4/3}
  .cmp__cap{flex-wrap:wrap; gap:4px 14px}
  .cmp__cap b{white-space:normal}
  .cmp__cap .sep{display:none}
  .cmp__fact{gap:6px 10px; padding:22px 12px 11px}
  .cmp__fact b{white-space:normal; font-size:10.5px}
  .stats,.concret{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
}
/* — écrans peu hauts (portables 768–840 px) : hero compacté pour rester au-dessus du pli —
   NB : les règles des composants V3 (form--hero, btn-expand…) vivent en FIN de feuille,
   après leurs règles de base, sinon la cascade les annule. */
@media (min-width:921px) and (max-height:840px){
  .hero{padding-block:16px 40px}
  .hero h1{font-size:clamp(28px,3.4vw,38px)}
  .hero__lead{margin-top:13px; font-size:15px; line-height:1.5}
  .hero__lead p + p{margin-top:7px}
  .hero__sign{margin-top:16px}
  .hero__media .gauge{margin-top:14px; padding-top:12px}
  .gauge__num{font-size:29px}
  .gauge__track{margin-top:10px}
  .gauge__goal{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; animation:none !important; transition:none !important}
  .js .reveal{opacity:1; transform:none}
}

/* ============================================================
   V2/V3 — ajouts (form hero, bandeau animé, contact, pages)
   Même identité graphique, palette verte officielle.
   ============================================================ */

/* ---- Hero · formulaire de soutien V3 (visible d'emblée) ---- */
.hero__sign{margin-top:24px}
.form--hero{margin-top:0; padding:clamp(20px,2.3vw,26px) clamp(20px,2.3vw,28px); box-shadow:var(--shadow)}
.form__row--trio{display:grid; grid-template-columns:1.06fr 1fr .68fr; gap:12px}
.form--hero .btn--sign{margin-top:18px}

/* case de confidentialité */
.check{display:flex; align-items:flex-start; gap:10px; margin-top:15px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; cursor:pointer}
.check input{width:17px; height:17px; margin:2px 0 0; accent-color:var(--accent-deep); flex:0 0 auto; cursor:pointer}
.check a{color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px}
.check a:hover{color:var(--accent)}

/* bouton d'envoi : libellé qui se complète au survol (desktop) */
.btn-expand{flex-direction:column; font-size:13.5px; letter-spacing:.045em; padding:1.05em 1.3em; line-height:1.35}
.btn-expand__base{display:block}
.btn-expand__more{
  display:grid; grid-template-rows:0fr; width:100%; opacity:0; margin-top:0;
  transition:grid-template-rows .38s var(--ease), opacity .3s var(--ease), margin-top .38s var(--ease);
  font-weight:500; font-size:12px; letter-spacing:.02em; text-transform:none; color:rgba(255,255,255,.94);
}
.btn-expand__more>span{display:block; overflow:hidden; min-height:0}
.btn-expand:hover .btn-expand__more,
.btn-expand:focus-visible .btn-expand__more{grid-template-rows:1fr; opacity:1; margin-top:5px}
@media (hover:none){ .btn-expand__more{grid-template-rows:1fr; opacity:1; margin-top:5px} }  /* tactile : libellé complet affiché */
@media (prefers-reduced-motion:reduce){ .btn-expand__more{transition:none} }

/* ---- état post-validation « Merci pour votre soutien. » ---- */
.done{display:none; text-align:center}
.form.is-sent .done{display:block}
.done__check{width:52px; height:52px; margin-inline:auto; border-radius:50%; background:var(--accent-tint); color:var(--accent-deep); display:flex; align-items:center; justify-content:center}
.done__title{margin-top:16px; font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,27px); line-height:1.25; color:var(--ink)}
.done__more{margin-top:18px; width:100%}
.done__more[aria-expanded="true"]{border-color:var(--accent-deep); color:var(--accent-deep)}
.done__follow{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .42s var(--ease), opacity .34s var(--ease)}
.done__follow>div{overflow:hidden; min-height:0}
.done__follow.is-open{grid-template-rows:1fr; opacity:1}
.done__follow .form__row{margin-top:16px; text-align:left}
.done__save{margin-top:14px; width:100%}
.done__saved{display:none; margin-top:14px; font-family:var(--serif); font-style:italic; font-size:15.5px; color:var(--accent-deep)}
.done__follow.is-saved .done__saved{display:block}
.done__follow.is-saved .form__row,
.done__follow.is-saved .done__save{display:none}
@media (prefers-reduced-motion:reduce){ .done__follow{transition:none} }

.done__social{margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sbtn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.01em; padding:.82em .9em; border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:var(--ink-soft); background:var(--surface); transition:border-color .2s ease, color .2s ease, background .2s ease}
.sbtn svg{flex:0 0 auto}
.sbtn:hover{border-color:var(--accent-deep); color:var(--accent-deep); background:var(--surface-2)}
.sbtn--support{grid-column:1/-1; background:var(--accent-tint); border-color:var(--accent-tint); color:var(--accent-deep)}
.sbtn--support:hover{border-color:var(--accent-deep)}

/* ---- section INTRO (sous le hero) : constat + double appel ---- */
.intro__in{max-width:780px; margin-inline:auto; text-align:center}
.intro__text{font-family:var(--serif); font-size:clamp(19px,2.4vw,25px); line-height:1.5; color:var(--ink)}
.intro__text p + p{margin-top:14px}
.intro__text strong{font-weight:600; color:var(--accent-deep)}
.intro__ctas{margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.intro__ctas .btn--sign{width:auto; margin-top:0; font-size:13.5px; padding:1.05em 1.8em}
.intro__ctas .btn--ghost{--bg:var(--surface-2); padding:.98em 1.6em}

/* ---- Bandeau de messages animés (rotation douce) ---- */
.ticker{
  position:relative; background:var(--deep); color:#F4EEE2; overflow:hidden;
  border-block:1px solid var(--deep-soft);
}
.ticker::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}
.ticker__viewport{position:relative; height:64px; display:flex; align-items:center; justify-content:center; text-align:center}
.ticker__item{
  position:absolute; left:0; right:0; padding-inline:var(--gutter);
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(17px,2.2vw,23px); line-height:1.3;
  color:#FBF8F1; opacity:0; transform:translateY(8px); transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
.ticker__item.is-on{opacity:1; transform:none}
.ticker__item .dot{color:var(--deep-eye); font-style:normal}
/* sans JS : on empile lisiblement le premier message, les autres restent accessibles en flux */
.no-js .ticker__viewport{height:auto; flex-direction:column; gap:6px; padding-block:18px}
.no-js .ticker__item{position:static; opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .ticker__item{transition:opacity .25s linear} .ticker__item.is-on{transform:none} }
@media (max-width:680px){ .ticker__viewport{height:auto; min-height:64px; padding-block:16px} }

/* ---- Formulaire de contact : menu déroulant Sujet + message ---- */
.field select{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--paper-soft);
  border:1px solid var(--line); border-radius:var(--r); padding:13px 40px 13px 15px; width:100%; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%238A7E6C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.field select:focus{outline:none; background-color:var(--surface-2); border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--paper-soft);
  border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; width:100%; min-height:118px; resize:vertical; line-height:1.55;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea::placeholder{color:#B3A78F}
.field textarea:focus{outline:none; background:var(--surface-2); border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.cta .field label{color:#CFC7B6}
.cta .form{margin-top:0}

/* ============================ PAGE · À PROPOS ============================ */
.page-hero{padding-block:clamp(40px,6vw,72px) clamp(28px,4vw,44px)}
.page-hero__name{font-family:var(--serif); font-weight:600; font-size:clamp(15px,1.8vw,18px); color:var(--accent-deep); letter-spacing:.01em; margin-top:14px}
.page-hero h1{font-size:clamp(32px,5vw,54px); line-height:1.06; letter-spacing:-.02em; color:var(--ink); max-width:16ch; margin-top:10px}
.page-hero__lead{margin-top:24px; max-width:60ch; color:var(--ink-soft); font-size:19px; line-height:1.6}

.about{padding-block:clamp(40px,5vw,72px)}
.about__grid{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(34px,5vw,68px); align-items:start}
.about__grid>*{min-width:0}
.prose p{color:var(--ink); font-size:18px; line-height:1.72; max-width:64ch}
.prose p + p{margin-top:18px}
.prose .lead{font-family:var(--serif); font-size:clamp(20px,2.4vw,25px); font-style:italic; line-height:1.45; color:var(--ink); max-width:30ch}
.prose .conviction{font-family:var(--serif); font-size:clamp(19px,2.2vw,23px); line-height:1.4; color:var(--accent-deep); border-left:2px solid var(--accent); padding-left:22px; margin-block:30px}

.about__aside{position:sticky; top:calc(var(--switch-h) + 96px); display:flex; flex-direction:column; gap:18px}
.aside__card{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; box-shadow:var(--shadow-sm)}
.aside__card h3{font-family:var(--serif); font-size:19px; color:var(--ink); margin-bottom:12px}
.aside__card ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px}
.aside__card li{position:relative; padding-left:22px; color:var(--ink-soft); font-size:15.5px; line-height:1.5}
.aside__card li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; border:2px solid var(--accent)}

/* placards photo dignes (jamais de faux visuel) */
.plates{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:46px}
.plate{position:relative; margin:0; aspect-ratio:4/3; border:1px solid var(--line); background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:16px}
.plate__inner{position:relative; height:100%; border:1px dashed var(--line); border-radius:2px; background:var(--surface-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center}
.plate__inner::before,.plate__inner::after{content:""; position:absolute; width:13px; height:13px; border:1px solid var(--brun); opacity:.5}
.plate__inner::before{top:9px; left:9px; border-right:0; border-bottom:0}
.plate__inner::after{bottom:9px; right:9px; border-left:0; border-top:0}
.plate__ico{color:var(--brun); opacity:.7}
.plate__hint{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--brun)}
.plate__ref{font-family:var(--sans); font-size:11px; letter-spacing:.04em; color:var(--brun); opacity:.8}

@media (max-width:920px){
  .about__grid{grid-template-columns:1fr; gap:40px}
  .about__aside{position:static}
}
@media (max-width:680px){
  .plates{grid-template-columns:1fr}
}

/* ============================ PAGE · LES ALTERNATIVES ============================ */
.alts{padding-block:clamp(26px,3.6vw,52px) clamp(56px,7vw,96px)}
.alt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.alt-card{display:flex; flex-direction:column; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:20px; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.alt-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.alt-card .plate{aspect-ratio:3/2; margin:0; padding:12px; box-shadow:none; background:var(--surface)}
.alt-card__kicker{margin-top:20px; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-deep)}
.alt-card h2{font-size:21px; line-height:1.28; margin-top:9px; letter-spacing:-.01em}
.alt-card>p{margin-top:12px; margin-bottom:22px; color:var(--ink-soft); font-size:15.5px; line-height:1.62}
.alt-card .btn--ghost{margin-top:auto; width:100%; --bg:var(--surface-2); --fg:var(--accent-deep); --bd:var(--accent-tint); font-weight:600; font-size:14px}
.alt-card .btn--ghost:hover{border-color:var(--accent-deep); color:var(--accent-deep); background:var(--surface)}
@media (max-width:980px){ .alt-grid{grid-template-columns:1fr; max-width:560px; margin-inline:auto} }

/* ============================ PAGE · POLITIQUE DE CONFIDENTIALITÉ ============================ */
.prose h2{font-size:clamp(20px,2.4vw,25px); line-height:1.25; margin-top:36px}
.prose h2 + p{margin-top:12px}
.prose ul{margin:14px 0 0; padding-left:22px; color:var(--ink); font-size:17px; line-height:1.7}
.prose ul li + li{margin-top:7px}
.prose .note{font-size:14.5px; color:var(--brun)}

/* ============================================================
   RESPONSIVE · composants V3 — impérativement APRÈS leurs
   règles de base (la cascade prime sur les media queries).
   ============================================================ */
/* colonnes étroites : Nom + Prénom côte à côte, Code postal en pleine largeur */
@media (max-width:1080px){
  .form__row--trio{grid-template-columns:1fr 1fr}
  .form__row--trio .field--npa{grid-column:1/-1}
}
@media (max-width:680px){
  .done__social{grid-template-columns:1fr}
  .intro__ctas{flex-direction:column; align-items:stretch}
  .intro__ctas .btn--sign{width:100%}
  /* titres plus généreux sur téléphone */
  .hero h1{font-size:clamp(38px,10.5vw,46px)}
  .page-hero h1{font-size:clamp(34px,9.5vw,42px)}
  .sec__title{font-size:clamp(28px,7.6vw,34px)}
}
@media (max-width:400px){
  .form__row--trio{grid-template-columns:1fr}
}
/* écrans peu hauts : partie formulaire compactée (complément du bloc hero) */
@media (min-width:921px) and (max-height:840px){
  .form--hero{padding:15px 18px}
  .form--hero .field input{padding:10px 12px}
  .form--hero .check{margin-top:12px}
  .form--hero .btn--sign{margin-top:13px}
  .btn-expand{padding:.85em 1.2em}
}
/* zone 921–1080 px : colonne du hero étroite → libellés sur une ligne */
@media (min-width:921px) and (max-width:1180px){
  .form__row--trio{gap:10px}
  .form__row--trio .field label{white-space:nowrap; letter-spacing:.06em}
}