@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/archivo-latin-wght.woff2') format('woff2')}
/* ============================================================
   RÉSEAU ACEES · acees.ca
   Direction : « L'atelier et la lumière »
   SOMBRE = la capacité de production (ce que le membre gagne)
   CLAIR  = ce qu'il livre à ses clients (le résultat)
   ============================================================ */

:root{
  --noir:#0A0E0C;
  --charbon:#111714;
  --acier:#19211C;
  --acier-haut:#212B25;
  --ligne:rgba(240,255,246,.09);
  --ligne-forte:rgba(240,255,246,.16);

  --vert-profond:#123D29;
  --vert:#1D7A4C;
  --vert-vif:#3DBE7C;          /* ACTIONS uniquement : boutons, survols, états actifs */
  --vert-lueur:rgba(61,190,124,.28);
  --sauge:#7FA894;             /* décoratif sur fond sombre : intertitres, icônes, filets */
  --sauge-rgb:127,168,148;
  --sauge-fonce:#2F5A45;       /* décoratif sur fond clair */
  --sauge-fonce-rgb:47,90,69;

  --creme:#F3F0E8;
  --creme-2:#E8E3D8;
  --encre:#0E1411;
  --encre-doux:rgba(14,20,17,.66);

  --texte:#EDEBE5;
  --texte-doux:rgba(237,235,229,.60);

  --font:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;

  --nav-h:84px;
  --max:1240px;
}

*{margin:0;padding:0;box-sizing:border-box}
/* Anneau de focus : le contour natif d'1px est invisible sur fond sombre. */
:focus-visible{
  outline:2px solid var(--vert-vif);
  outline-offset:3px;
  border-radius:4px;
}
.clair :focus-visible,.papier :focus-visible,.formulaire :focus-visible{outline-color:var(--vert)}
.champ input:focus-visible,.champ textarea:focus-visible{outline:none}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--noir);
  color:var(--texte);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,5vw,44px)}

/* ---------- Type ---------- */
.h-xl{font-size:clamp(2.6rem,7.2vw,5.4rem);font-weight:900;line-height:.96;letter-spacing:-.03em;word-spacing:.05em}
.h-lg{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;line-height:1.04;letter-spacing:-.025em;word-spacing:.035em}
.h-md{font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:800;line-height:1.15;letter-spacing:-.015em}
.lede{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.62;color:var(--texte-doux);max-width:60ch}
.kicker{
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--sauge);
  display:flex;align-items:center;gap:11px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--sauge);opacity:.7}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1100;height:var(--nav-h);
  display:flex;align-items:center;
  background:linear-gradient(to bottom,rgba(10,14,12,.86),rgba(10,14,12,.62));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s;
}
.nav.scrolled{background:rgba(10,14,12,.96);border-bottom-color:var(--ligne);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;
  max-width:calc(var(--max) + 240px);gap:clamp(16px,2.4vw,40px)}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{
  width:38px;height:38px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(150deg,var(--vert) 0%,var(--vert-profond) 100%);
  border:1px solid rgba(61,190,124,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 12px rgba(0,0,0,.4);
  display:grid;place-items:center;color:#fff;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.brand:hover .brand-mark{transform:translateY(-2px)}
.brand-mark svg{width:26px;height:26px;display:block;overflow:visible}
.bm-marches path{opacity:0;transform:translateY(5px);animation:monte .44s cubic-bezier(.22,1,.36,1) forwards}
.bm-marches path:nth-child(8),.bm-marches path:nth-child(9){animation-delay:.06s}
.bm-marches path:nth-child(6),.bm-marches path:nth-child(7){animation-delay:.15s}
.bm-marches path:nth-child(4),.bm-marches path:nth-child(5){animation-delay:.24s}
.bm-marches path:nth-child(2),.bm-marches path:nth-child(3){animation-delay:.33s}
.bm-marches path:nth-child(1){animation-delay:.42s}
@keyframes monte{to{opacity:1;transform:none}}
.brand:hover .bm-marches{transition:transform .3s cubic-bezier(.22,1,.36,1);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
  .bm-marches path{animation:none;opacity:1;transform:none}
}
.brand-txt b{display:block;font-weight:800;font-size:1.02rem;letter-spacing:.01em;line-height:1.1;white-space:nowrap}
.brand-txt i{
  display:block;font-style:normal;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-doux);margin-top:2px;
}
/* La ligne du bas se justifie sur la largeur exacte du nom au-dessus. */
.nav .brand-txt{display:inline-flex;flex-direction:column;align-items:stretch}
.nav .brand-txt i{text-align:justify;text-align-last:justify}
.nav-links{display:flex;align-items:center;gap:clamp(11px,1.5vw,23px);flex-shrink:0}
.nav-links a{
  white-space:nowrap;
  font-size:.83rem;font-weight:600;letter-spacing:.01em;color:var(--texte-doux);
  transition:color .2s;position:relative;padding:6px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--vert-vif);transition:right .28s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover{color:var(--texte)}
.nav-links a:hover::after{right:0}
.nav-actions{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex-shrink:0}
.nav-ecrire{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;
  font-size:.83rem;font-weight:600;color:var(--texte-doux);padding:8px 4px;transition:color .22s;
}
.nav-ecrire svg{width:15px;height:15px;opacity:.75}
.nav-ecrire:hover{color:var(--vert-vif)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;
  font-size:.8rem;font-weight:800;letter-spacing:.01em;
  padding:11px 17px;border-radius:9px;color:#06170E;
  background:linear-gradient(180deg,var(--vert-vif),var(--vert));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 5px 14px rgba(29,122,76,.22);
  transition:box-shadow .22s,transform .22s;
}
.nav-cta svg{width:15px;height:15px}
.nav-cta:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 8px 20px rgba(29,122,76,.34)}
.btn-membre{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;
  font-size:.83rem;font-weight:600;color:var(--texte-doux);
  padding:9px 11px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--ligne-forte);
  transition:color .22s,border-color .22s,background .22s;
}
.btn-membre svg{width:15px;height:15px;opacity:.8;flex-shrink:0}
.btn-membre b{font-weight:600;display:none}

.btn-membre:hover{color:var(--vert-vif);border-color:rgba(61,190,124,.4);background:rgba(61,190,124,.08)}

@media(max-width:1290px){.nav-actions .nav-ecrire{display:none}}
@media(max-width:1120px){.nav-actions .btn-membre{display:none}}

/* Infobulle du cadenas : l'icône seule ne dit pas où elle mène. */
.btn-membre{position:relative}
.btn-membre::after{
  content:"Accès membre";
  position:absolute;top:calc(100% + 11px);right:0;white-space:nowrap;
  font-family:var(--font);font-size:.76rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--texte);padding:8px 13px;border-radius:9px;
  background:rgba(12,18,15,.97);border:1px solid var(--ligne-forte);
  box-shadow:0 10px 26px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-5px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.btn-membre:hover::after,.btn-membre:focus-visible::after{opacity:1;transform:none}
/* Au-delà de 2000px le libellé est déjà écrit : l'infobulle ferait doublon. */
@media(min-width:2000px){.btn-membre::after{content:none}}
@media(hover:none){.btn-membre::after{content:none}}

/* Au-delà de 1500px la nav paraissait maigre : on remonte l'échelle typographique. */
@media(min-width:1500px){
  .hero .wrap{padding-bottom:clamp(96px,11vh,150px)}
  .nav-links a{font-size:.92rem}
  .nav-ecrire,.btn-membre{font-size:.92rem}
  .nav-cta{font-size:.88rem;padding:12px 19px}
  .brand-txt b{font-size:1.12rem}
  .brand-txt i{font-size:.65rem}
  .brand-mark{width:44px;height:44px}
}
.btn-membre svg{width:14px;height:14px;color:var(--sauge)}

/* mobile group */
.nav-mobile{display:none;align-items:center;gap:9px}
.nav-tel{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--vert-vif),var(--vert));
  color:#08130D;box-shadow:0 4px 14px rgba(61,190,124,.32);
}
.nav-tel svg{width:17px;height:17px}
.burger{
  position:relative;z-index:1120;width:40px;height:40px;
  border:1px solid var(--ligne-forte);border-radius:9px;
  background:rgba(240,255,246,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
  cursor:pointer;padding:0;
}
.burger span{display:block;height:2.5px;border-radius:2px;background:var(--vert-vif);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .2s,width .35s}
.burger span:nth-child(1){width:18px}
.burger span:nth-child(2){width:12px;transform:translateX(-3px)}
.burger span:nth-child(3){width:16px;transform:translateX(2px)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);width:19px}
.burger.open span:nth-child(2){opacity:0;transform:translateX(-10px)}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:19px}

/* overlay mobile */
.mnav{
  position:fixed;inset:0;z-index:1110;
  background:rgba(8,13,10,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;flex-direction:column;justify-content:center;
  padding:104px 8vw 44px;
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s ease;
}
.mnav.open{opacity:1;pointer-events:auto;visibility:visible}
.mn-close{
  position:absolute;top:19px;right:5vw;width:40px;height:40px;border-radius:9px;
  background:rgba(240,255,246,.05);border:1px solid var(--ligne-forte);
  color:var(--texte);display:grid;place-items:center;cursor:pointer;
}
.mn-close svg{width:18px;height:18px}
.mn-link{
  font-weight:800;text-transform:uppercase;
  font-size:clamp(1.55rem,6.6vw,2.2rem);line-height:1.05;letter-spacing:.01em;
  color:var(--texte);
  padding:14px 0;display:flex;justify-content:space-between;align-items:center;
  border-bottom:2px dashed rgba(240,255,246,.13);
  transform:translateY(20px);opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;
}
.mn-link svg{width:22px;height:22px;color:var(--sauge);flex-shrink:0}
.mnav.open .mn-link{transform:none;opacity:1}
.mnav.open .mn-link:nth-of-type(1){transition-delay:.06s}
.mnav.open .mn-link:nth-of-type(2){transition-delay:.12s}
.mnav.open .mn-link:nth-of-type(3){transition-delay:.18s}
.mnav.open .mn-link:nth-of-type(4){transition-delay:.24s}
.mn-cta{
  margin-top:28px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,var(--vert-vif),var(--vert));color:#08130D;
  font-weight:800;font-size:.98rem;letter-spacing:.06em;text-transform:uppercase;
  padding:17px;border-radius:10px;
  transform:translateY(20px);opacity:0;
  transition:transform .5s .3s cubic-bezier(.22,1,.36,1),opacity .5s .3s;
  box-shadow:0 14px 32px rgba(61,190,124,.28);
}
.mn-cta svg{width:17px;height:17px}
.mn-membre{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
  font-size:.88rem;font-weight:600;color:var(--texte-doux);padding:11px 8px;
  opacity:0;transform:translateY(10px);transition:opacity .4s .34s,transform .4s .34s,color .2s;
}
.mn-membre svg{width:15px;height:15px;opacity:.75}
.mn-membre:hover{color:var(--vert-vif)}
.mn-msgr{margin-top:10px;transition-delay:.4s}
.mn-msgr svg{width:17px;height:17px;opacity:1;color:var(--vert-vif)}
.mnav.open .mn-membre{opacity:1;transform:none}
.mnav.open .mn-cta{transform:none;opacity:1}
.mn-tag{
  margin-top:20px;text-align:center;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(237,235,229,.42);opacity:0;transition:opacity .5s .38s;
}
.mnav.open .mn-tag{opacity:1}
body.menu-open{overflow:hidden}


/* ---- icônes sociales ---- */
.socials{display:flex;align-items:center;gap:6px;flex-shrink:0}
.socials a{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  color:var(--texte-doux);border:1px solid var(--ligne);
  background:rgba(255,255,255,.03);
  transition:color .2s,border-color .2s,transform .2s,background .2s;
}
.socials a:hover{color:var(--vert-vif);border-color:rgba(61,190,124,.4);transform:translateY(-2px);background:rgba(61,190,124,.07)}
.socials svg{width:15px;height:15px;display:block}
.mn-socials{display:flex;gap:11px;justify-content:center;margin-top:22px;opacity:0;transition:opacity .5s .34s}
.mnav.open .mn-socials{opacity:1}
.mn-socials a{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  color:var(--texte);border:1px solid var(--ligne-forte);background:rgba(255,255,255,.04);
}
.mn-socials svg{width:19px;height:19px}
.foot-socials{display:flex;gap:9px;margin-top:18px}
.foot-socials a{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:var(--texte-doux);border:1px solid var(--ligne);
  transition:color .2s,border-color .2s;
}
.foot-socials a:hover{color:var(--vert-vif);border-color:rgba(61,190,124,.4)}
.foot-socials svg{width:16px;height:16px}

/* ============ 1 · HERO (sombre · intense) ============ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg{display:block}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:44% 36%}
@media(max-width:820px){.hero-bg img{object-position:38% 45%}}
.hero-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(135% 96% at 6% 82%,rgba(10,14,12,.96) 0%,rgba(10,14,12,.72) 40%,rgba(10,14,12,.22) 70%,transparent 88%),
    linear-gradient(to top,var(--noir) 2%,rgba(10,14,12,.78) 36%,rgba(10,14,12,.34) 70%,rgba(10,14,12,.60) 100%);
}
/* Trame de plan : l'escalier existe en donnees avant d'exister en bois.
   Vit dans l'ombre a gauche, s'efface sur la photo. */
.hero-trame{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(var(--sauge-rgb),.26) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--sauge-rgb),.26) 1px,transparent 1px),
    linear-gradient(to right,rgba(var(--sauge-rgb),.11) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--sauge-rgb),.11) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(74% 70% at 2% 84%,#000 0%,rgba(0,0,0,.58) 28%,rgba(0,0,0,.18) 52%,transparent 72%);
          mask-image:radial-gradient(74% 70% at 2% 84%,#000 0%,rgba(0,0,0,.58) 28%,rgba(0,0,0,.18) 52%,transparent 72%);
}
@media(max-width:820px){
  .hero-trame{background-size:64px 64px,64px 64px,16px 16px,16px 16px}
}
.hero .wrap{width:100%;max-width:calc(var(--max) + 240px);
  padding-bottom:clamp(56px,8vh,104px);padding-top:calc(var(--nav-h) + 40px)}
/* Grand écran : le bloc remonte un peu, il collait au bas de la fenêtre. */
@media(min-width:1500px){
}
.hero h1{max-width:17ch;margin-bottom:22px}
.hero-sub{text-wrap:pretty;font-size:clamp(1.02rem,1.6vw,1.28rem);color:rgba(237,235,229,.82);max-width:52ch;margin-bottom:34px;line-height:1.55}
.cta{
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  font-weight:800;font-size:.94rem;letter-spacing:.02em;
  padding:17px 26px;border-radius:11px;
  background:linear-gradient(180deg,var(--vert-vif),var(--vert));
  color:#07120C;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 30px rgba(61,190,124,.26);
  transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s;
}
/* Le hero porte deux actions : la principale et l'accès membre en fantôme. */
.hero-actions{display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,22px);align-items:center}
@media(max-width:520px){
  .hero-actions{gap:12px}
  .hero-actions .cta-ghost{font-size:.86rem;padding:14px 18px}
}
.cta:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 18px 40px rgba(61,190,124,.34)}
.cta svg{width:17px;height:17px}
.cta-ghost svg{width:16px;height:16px;flex-shrink:0;opacity:.85}
.cta-ghost{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-weight:700;font-size:.9rem;padding:16px 24px;border-radius:11px;
  border:1px solid rgba(240,255,246,.26);color:var(--texte);
  background:linear-gradient(180deg,rgba(28,38,32,.82),rgba(16,22,19,.78));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 18px rgba(0,0,0,.4);
  transition:border-color .22s,transform .22s,background .22s;
}
.cta-ghost:hover{border-color:rgba(61,190,124,.5);background:linear-gradient(180deg,rgba(34,46,39,.9),rgba(20,28,24,.86));transform:translateY(-2px)}
.scroll-hint{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(237,235,229,.38);display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);
}
.scroll-hint.parti{opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none}
.scroll-hint.parti i{animation:none}
@media(prefers-reduced-motion:reduce){.scroll-hint{transition:opacity .2s}.scroll-hint.parti{transform:translateX(-50%)}}
.scroll-hint i{display:block;width:1px;height:30px;background:linear-gradient(to top,transparent,var(--sauge));animation:pulse 2.4s ease-in-out infinite}

/* L'indicateur de defilement, centre, entre en collision avec le bouton
   Acces membre de 320 a 1200 px. Sous 1280 px on l'ancre a droite. */
@media(max-width:1279px){
  .scroll-hint{left:auto;right:clamp(20px,5vw,40px);transform:none}
  .scroll-hint.parti{transform:translateY(14px)}
}
@media(max-width:1279px) and (prefers-reduced-motion:reduce){
  .scroll-hint.parti{transform:none}
}
/* Entre 565 et 635 px, les deux boutons passent cote a cote et le ghost
   occupe toute la droite : aucune place ne reste pour l'indicateur. */
@media(min-width:560px) and (max-width:645px){
  .scroll-hint{display:none}
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ============ 2 · LE CONSTAT (clair · calme) ============ */
.clair{background:var(--creme);color:var(--encre)}
.clair .lede{color:var(--encre-doux)}
.clair .kicker{color:var(--sauge-fonce)}
.clair .kicker::before{background:var(--sauge-fonce)}
.sec{padding:clamp(60px,8.8vh,116px) 0}
.constat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,84px);align-items:start}
.constat h2{margin:18px 0 22px}
.pains{list-style:none;margin-top:6px}
.pains li{
  display:flex;gap:14px;align-items:flex-start;
  padding:15px 0;border-bottom:1px solid rgba(14,20,17,.10);
  font-size:1rem;color:var(--encre);line-height:1.5;
}
.pains li:last-child{border-bottom:0}
.pains li b{font-weight:700}
.pains svg{width:19px;height:19px;flex-shrink:0;margin-top:3px;color:var(--sauge-fonce)}
.pull{
  margin-top:30px;padding:26px 28px;border-radius:14px;
  background:linear-gradient(180deg,#fff,var(--creme-2));
  border:1px solid rgba(14,20,17,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 46px -24px rgba(60,40,25,.55);
  font-size:1.08rem;font-weight:600;line-height:1.5;color:var(--encre);
}
.pull span{color:var(--vert);font-weight:800}

/* ============ 3 · CE QUE VOUS RECEVEZ (sombre · intense) ============ */
.sombre{background:var(--noir)}
.recoit-head{max-width:64ch;margin-bottom:clamp(26px,3.4vw,40px)}
.recoit-head h2{margin:14px 0 14px}
.piliers{display:grid;gap:clamp(14px,1.6vw,20px)}
.pilier{
  position:relative;border-radius:18px;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  background:linear-gradient(170deg,rgba(24,32,27,.96),rgba(15,21,18,.96));
  border:1px solid var(--ligne);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s;
}
/* La photo occupe une bande pleine largeur en haut : on la voit en entier
   au lieu d'en apercevoir une tranche sous le texte. */
.pilier-photo{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;flex:0 0 auto;
}
.pilier-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(15,21,18,.96) 0%,rgba(15,21,18,.42) 22%,transparent 46%);
}
.pilier:nth-child(1) .pilier-photo{aspect-ratio:5/2}
@media(max-width:900px){
  .pilier-photo,.pilier:nth-child(1) .pilier-photo{aspect-ratio:16/10}
}
/* Pas de soulèvement : la carte n'est pas cliquable. Seule la photo respire. */
.pilier:hover{border-color:rgba(var(--sauge-rgb),.26)}
.pilier-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.05) contrast(1.07) saturate(1.04);transition:transform .7s cubic-bezier(.22,1,.36,1)}
/* Chaque photo a son point d'ancrage : le sujet reste dans la bande. */
.pilier:nth-child(1) .pilier-img{object-position:52% 46%}
.pilier:nth-child(2) .pilier-img{object-position:50% 46%}
.pilier:nth-child(3) .pilier-img{object-position:60% 42%}
.pilier:nth-child(4) .pilier-img{object-position:50% 38%}
.pilier:hover .pilier-img{transform:scale(1.035)}

.pilier-in{
  position:relative;flex:1 1 auto;
  margin-top:calc(-1 * clamp(26px,3vw,40px));
  padding:0 clamp(22px,2.6vw,30px) clamp(24px,2.8vw,32px);
}
.pilier-num{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:#A8C4B5;
  display:block;margin-bottom:12px;text-shadow:0 1px 8px rgba(0,0,0,.9);
}
/* En colonne étroite, 29,6px donne 3 lignes de titre et il ne reste plus de photo.
   La carte large garde une échelle plus grande. */
.pilier h3{font-size:clamp(1.24rem,1.62vw,1.5rem);line-height:1.18;margin-bottom:9px}
.pilier:nth-child(1) h3{font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.1;margin-bottom:11px}
.pilier p{font-size:.91rem;line-height:1.5}
.pilier-num{margin-bottom:9px}
@media(max-width:900px){
  .pilier h3,.pilier:nth-child(1) h3{font-size:clamp(1.3rem,5.2vw,1.62rem);line-height:1.16}
  .pilier p{font-size:.92rem;line-height:1.5}
}
@media(max-width:760px){
  /* la photo doit occuper au moins le tiers haut de la carte, sinon elle ne se lit plus */
  .pilier::after{
    background:linear-gradient(to top,rgba(8,12,10,.80) 4%,rgba(8,12,10,.56) 40%,rgba(8,12,10,.26) 70%,transparent 100%);
  }
  .pilier-in{padding-top:clamp(40px,10vw,54px)}
  .pilier-in{padding:22px 20px 24px}
  .pilier p{font-size:.93rem;line-height:1.5}
  .pilier-num{margin-bottom:9px}
  /* chaque photo a son point d'ancrage : le sujet reste dans la bande visible */
}
.pilier p{font-size:.97rem;color:rgba(237,235,229,.74);line-height:1.55;max-width:46ch}
@media(min-width:900px){
  .piliers{grid-template-columns:repeat(2,1fr)}
  .pilier:nth-child(1){grid-column:1/-1;min-height:clamp(260px,26vw,340px)}
}
@media(min-width:1120px){
  .piliers{grid-template-columns:repeat(3,1fr)}
  .piliers .pilier:nth-child(1){grid-column:1/-1}
}

/* ============ 4 · TERRITOIRES (sombre · l'interaction) ============ */
.terr{background:linear-gradient(180deg,var(--charbon),var(--noir));border-top:1px solid var(--ligne)}
.terr-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(28px,4vw,44px)}
.terr-head h2{margin:16px 0 14px;max-width:20ch}
.terr-count{
  flex-shrink:0;padding:20px 26px;border-radius:14px;text-align:center;
  background:linear-gradient(180deg,var(--acier-haut),var(--acier));
  border:1px solid rgba(var(--sauge-rgb),.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.4);
}
.terr-count b{display:block;font-variant-numeric:tabular-nums;font-size:clamp(2.2rem,4vw,3rem);font-weight:900;line-height:1;color:var(--vert-vif);letter-spacing:-.03em}
.terr-count span{display:block;margin-top:7px;font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--texte-doux)}
.terr-tools{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;align-items:center}
.terr-search{
  flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--ligne-forte);
}
.terr-search svg{width:16px;height:16px;color:var(--texte-doux);flex-shrink:0}
.terr-search input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:var(--texte);
  font-family:var(--font);font-size:.92rem;
}
.terr-search input::placeholder{color:rgba(237,235,229,.36)}
.filtre{
  padding:12px 16px;border-radius:11px;cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.04);border:1px solid var(--ligne-forte);color:var(--texte-doux);
  transition:all .2s;
}
.filtre:hover{color:var(--texte);border-color:rgba(61,190,124,.35)}
.filtre.on{background:rgba(61,190,124,.14);border-color:rgba(61,190,124,.45);color:#9FE3BF}
.terr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:11px}
.zone{
  position:relative;padding:17px 18px;border-radius:12px;
  background:linear-gradient(180deg,var(--acier-haut),var(--acier));
  border:1px solid var(--ligne);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
/* Seules les zones libres réagissent : elles mènent au formulaire. */
.zone.libre{cursor:pointer}
.zone.libre:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px rgba(0,0,0,.45)}
.zone.libre:active{transform:translateY(-1px)}
.zone.libre:focus-visible{outline:2px solid var(--vert-vif);outline-offset:3px}
.zone.pris{cursor:default}

.zone.libre{border-color:rgba(61,190,124,.30)}
.zone.libre:hover{border-color:rgba(61,190,124,.55)}
.zone b{display:block;font-size:1rem;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}
.zone small{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-doux)}
.zone .etat{
  position:absolute;top:15px;right:15px;display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
}
.zone .dot{width:7px;height:7px;border-radius:50%}
.zone.libre .etat{color:#9FE3BF}
.zone.libre .dot{background:var(--vert-vif);box-shadow:0 0 0 3px rgba(61,190,124,.18)}
.zone.pris .etat{color:rgba(237,235,229,.36)}
.zone.pris .dot{background:rgba(237,235,229,.3)}
.zone.pris{opacity:.62}
/* La pastille flotte en haut à droite : on lui réserve sa place,
   sinon les noms longs passent dessous. */
.zone b{padding-right:78px}

/* Mobile : deux colonnes. La pastille d'état quitte le coin absolu,
   sinon elle recouvrirait le nom dans une colonne de 170px.
   Déclaré ici, après toutes les règles .zone, pour gagner la cascade. */
@media(max-width:760px){
  .terr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
  .zone{padding:12px 13px 14px;min-width:0}
  .zone .etat{position:static;top:auto;right:auto;margin-bottom:9px;font-size:.55rem;letter-spacing:.11em}
  .zone b{font-size:.92rem;line-height:1.22;margin-bottom:4px;overflow-wrap:break-word;padding-right:0}
  .zone small{font-size:.56rem;letter-spacing:.06em;line-height:1.35;overflow-wrap:break-word}
}
@media(max-width:339px){
  .terr-grid{grid-template-columns:1fr}
}
.terr-note{
  margin-top:22px;font-size:.88rem;color:var(--texte-doux);
  display:flex;gap:10px;align-items:flex-start;max-width:70ch;
}
@media(min-width:900px){.terr-note{max-width:none}}
.terr-note svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--sauge)}
.terr-vide{display:none;padding:34px;text-align:center;color:var(--texte-doux);font-size:.94rem}


/* ---- bascule des vues ---- */
.vues{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.vue{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--font);font-size:.86rem;font-weight:700;letter-spacing:.01em;
  padding:12px 18px;border-radius:11px;
  background:linear-gradient(180deg,var(--acier-haut),var(--acier));
  border:1px solid var(--ligne);color:var(--texte-doux);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:color .2s,border-color .2s,transform .2s,background .2s;
}
.vue:hover{color:var(--texte);transform:translateY(-2px)}
.vue svg{width:16px;height:16px;flex-shrink:0}
.vue.on{
  background:linear-gradient(180deg,rgba(61,190,124,.20),rgba(61,190,124,.08));
  border-color:rgba(61,190,124,.45);color:#9FE3BF;
}
.panneau[hidden]{display:none}

/* ---- carte + liste ---- */
.carte-bloc{
  display:grid;grid-template-columns:1fr;gap:0;
  border:1px solid var(--ligne);border-radius:16px;overflow:hidden;
  background:var(--charbon);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
@media(min-width:900px){.carte-bloc{grid-template-columns:340px 1fr}}
.pdv-liste{
  max-height:clamp(420px,64vh,720px);overflow-y:auto;
  border-bottom:1px solid var(--ligne);
}
@media(min-width:900px){.pdv-liste{border-bottom:0;border-right:1px solid var(--ligne)}}
/* Ascenseur visible : à 13 % d'opacité sur 7px, on ne voyait pas qu'il existait. */
/* macOS masque les ascenseurs par défaut. Déclarer ::-webkit-scrollbar
   force un ascenseur permanent qui occupe sa place dans la mise en page.
   scrollbar-color est réservé à Firefox : dans Chrome, il désactiverait
   les règles webkit ci-dessous. */
@supports not selector(::-webkit-scrollbar){
  .pdv-liste{scrollbar-width:auto;scrollbar-color:#7FA894 rgba(240,255,246,.07)}
}
.pdv-liste::-webkit-scrollbar{-webkit-appearance:none;width:11px}
.pdv-liste::-webkit-scrollbar-track{background:rgba(240,255,246,.05);border-radius:6px;margin:6px 0}
.pdv-liste::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--sauge),#5E8B76);
  border-radius:6px;border:3px solid transparent;background-clip:padding-box;
  min-height:44px;
}
.pdv-liste::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--vert-vif),var(--vert));background-clip:padding-box}

/* Le dégradé du bas dit qu'il reste des membres sous le pli. */
.carte-liste-wrap{position:relative;min-width:0;display:flex;flex-direction:column}
.pdv-liste-fondu{
  position:absolute;left:0;right:0;bottom:0;height:74px;pointer-events:none;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;
  background:linear-gradient(to top,var(--charbon) 16%,rgba(17,23,20,.82) 58%,transparent);
  opacity:1;transition:opacity .28s;
}
.pdv-liste-fondu.au-bout{opacity:0}
.pdv-liste-fondu b{
  display:inline-flex;align-items:center;gap:7px;font-weight:600;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte);padding:7px 13px;border-radius:20px;
  background:rgba(12,18,15,.92);border:1px solid rgba(var(--sauge-rgb),.34);
  box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.pdv-liste-fondu svg{width:12px;height:12px;color:var(--sauge)}
.pdv{
  padding:17px 20px;border-bottom:1px solid var(--ligne);cursor:pointer;
  transition:background .2s,border-color .2s;position:relative;
}
.pdv:last-child{border-bottom:0}
.pdv:hover{background:rgba(61,190,124,.06)}
.pdv.actif{background:rgba(61,190,124,.11)}
.pdv.actif::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--vert-vif)}
.pdv b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.95rem;font-weight:700;letter-spacing:-.01em;margin-bottom:5px;color:var(--texte)}
.pdv .role{
  font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;
  background:rgba(var(--sauge-rgb),.13);border:1px solid rgba(var(--sauge-rgb),.28);color:#9FE3BF;
}
.pdv .ville{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sauge);margin-bottom:6px;
}
.pdv .adr{font-size:.82rem;color:var(--texte-doux);line-height:1.45;margin-bottom:7px}
.pdv .meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pdv .meta a{padding:6px 0;
  font-size:.8rem;font-weight:600;color:var(--vert-vif);
  display:inline-flex;align-items:center;gap:5px;
}
.pdv .meta a:hover{text-decoration:underline}
.pdv .meta svg{width:12px;height:12px}

/* Telephone et site se placent cote a cote quand la largeur le permet et
   passent l'un sous l'autre sinon. Le gap servait aux deux axes : sur deux
   lignes il s'ajoutait aux 6 px de padding de chaque lien, ce qui creusait
   24 px entre les deux textes. On separe les deux axes. */
.pdv .meta{column-gap:14px;row-gap:0}
.pdv .meta a{overflow-wrap:anywhere}

/* Sous 520 px, la largeur disponible dependait de la longueur de l'adresse
   web : une fiche mettait tout sur une ligne, la suivante sur deux. On
   empile systematiquement pour que toutes les fiches soient identiques. */
@media(max-width:519px){
  /* Meme bloc de coordonnees que sur bureau : resserre a l'interieur,
     detache de l'adresse au-dessus. La zone de touche perd en hauteur
     mais garde toute la largeur de la colonne. */
  .pdv .meta{flex-direction:column;align-items:flex-start;row-gap:0;margin-top:12px}
  .pdv .meta a{padding:2px 0}
}
/* Au-dela de 920 px la liste passe en colonne fixe de 340 px, plus etroite
   qu'un telephone : meme irregularite, meme correctif. Entre les deux, la
   liste occupe toute la largeur et les deux liens tiennent cote a cote. */
@media(min-width:920px){
  /* Colonne fixe de 340 px : les deux liens s'empilent. On resserre le
     rembourrage vertical, inutile a la souris, et on ajoute de l'air
     au-dessus : les coordonnees se lisent alors comme un bloc plutot que
     comme deux lignes qui flottent. Le rembourrage genereux est conserve
     sur ecran tactile, ou il sert de zone de touche. */
  .pdv .meta{flex-direction:column;align-items:flex-start;row-gap:0;margin-top:12px}
  .pdv .meta a{padding:2px 0}
}
.carte-zone{position:relative;min-height:clamp(420px,64vh,720px)}
@media(max-width:760px){
  /* Un seul défilement sur mobile : celui de la page.
     La liste perd son ascenseur interne, la carte passe au-dessus et se verrouille. */
  .carte-bloc{display:flex;flex-direction:column}
  .carte-zone{order:-1;min-height:0;height:clamp(280px,46vw + 140px,340px)}
  .pdv-liste{max-height:none;overflow:visible;border-bottom:0;border-top:1px solid var(--ligne)}
  .pdv-liste-fondu{display:none}
  .pdv{padding:15px 18px}
}

/* Voile de verrouillage : la carte ne bouge qu'après un premier toucher. */
.carte-verrou{
  position:absolute;inset:0;z-index:500;display:none;
  align-items:flex-end;justify-content:center;padding-bottom:18px;
  background:linear-gradient(to top,rgba(8,12,10,.55),rgba(8,12,10,.10) 42%,transparent);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.carte-verrou span{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte);padding:10px 16px;border-radius:24px;
  background:rgba(12,18,15,.88);border:1px solid var(--ligne-forte);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.carte-verrou svg{width:14px;height:14px;color:var(--sauge)}
.carte-zone.verrouillee .carte-verrou{display:flex}
#carte{position:absolute;inset:0;background:#121815}
/* pastille de marqueur */
.pin{
  width:26px;height:26px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);
  background:linear-gradient(160deg,var(--vert-vif),var(--vert));
  border:2px solid rgba(255,255,255,.65);
  /* profondeur : arete lumineuse en haut, ombre portee dessous.
     Rien n'est plat, y compris a 26 px. */
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.42),
             inset 0 -1.5px 3px rgba(0,0,0,.22),
             0 5px 13px rgba(0,0,0,.55);
  display:grid;place-items:center;
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.pin i{transform:rotate(45deg);font-style:normal;font-weight:800;font-size:.6rem;
  letter-spacing:-.02em;line-height:1;color:#07120C;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(255,255,255,.28)}

/* Le fabricant reste vert comme les membres : c'est la marche du reseau,
   et non une couleur, qui le distingue des numeros. L'anneau exterieur le
   pose au-dessus du lot. Le blanc est ainsi rendu a son seul role :
   signaler la selection. */
.pin.siege{
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.46),
             inset 0 -1.5px 3px rgba(0,0,0,.22),
             0 0 0 3px rgba(61,190,124,.26),
             0 5px 15px rgba(0,0,0,.6);
  border-color:rgba(255,255,255,.9);
}
.pin.siege i{display:grid;place-items:center;color:#07120C}
.pin.siege .marque-pin{width:15px;height:auto;display:block}
.pdv-num.siege .marque-pin{width:16px;height:auto;display:block;color:var(--vert-profond)}

.pin.survol{transform:rotate(-45deg) scale(1.1);border-color:rgba(255,255,255,.95)}
.pin.on{
  background:linear-gradient(160deg,#fff,#9FE3BF);
  transform:rotate(-45deg) scale(1.18);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),
             inset 0 -1.5px 4px rgba(0,0,0,.16),
             0 0 0 3px rgba(255,255,255,.22),
             0 7px 18px rgba(0,0,0,.6);
}
.pin.siege.on{
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),
             inset 0 -1.5px 4px rgba(0,0,0,.16),
             0 0 0 3px rgba(255,255,255,.34),
             0 7px 18px rgba(0,0,0,.6);
}
@media(prefers-reduced-motion:reduce){ .pin{transition:none} }

/* numero de la fiche, accorde a la pastille de la carte */
.pdv{display:flex;gap:11px;align-items:flex-start}
/* ============================================================
   BANDEAU DE CONSENTEMENT (Loi 25)
   Refus aussi facile que l'acceptation : deux boutons de meme
   poids visuel. Reste au-dessus de la barre d'action mobile.
   ============================================================ */
.consent{
  /* Leaflet monte jusqu'a 1000 pour ses controles : le bandeau doit
     passer devant, sinon la carte le recouvre. */
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  transform:translateY(110%);transition:transform .34s cubic-bezier(.22,1,.36,1);
  background:rgba(10,14,12,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(61,190,124,.24);
  box-shadow:0 -14px 38px rgba(0,0,0,.5);
  padding:16px clamp(16px,4vw,32px) calc(16px + env(safe-area-inset-bottom));
}
.consent.on{transform:translateY(0)}
.consent-in{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);flex-wrap:wrap;
}
.consent p{
  flex:1 1 320px;margin:0;
  font-size:.84rem;line-height:1.55;color:rgba(237,235,229,.72);
}
.consent a{color:var(--texte);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--vert-vif)}
.consent-btns{display:flex;gap:10px;flex:0 0 auto}
.consent-btns button{
  font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;
  padding:12px 22px;border-radius:11px;transition:transform .2s,border-color .2s;
}
.consent-btns button:active{transform:translateY(1px)}
.c-refus{
  color:var(--texte);background:rgba(255,255,255,.05);
  border:1px solid rgba(237,235,229,.24);
}
.c-refus:hover{border-color:rgba(237,235,229,.45)}
.c-ok{
  color:var(--encre);border:1px solid rgba(61,190,124,.5);
  background:linear-gradient(180deg,#4ACD8B 0%,var(--vert-vif) 55%,#2FA968 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px rgba(29,122,76,.28);
}
.c-ok:hover{transform:translateY(-1px)}
@media(max-width:560px){
  .consent{bottom:64px;padding-top:14px}
  /* en colonne, le paragraphe ne doit plus s'etirer : sans ca il pousse
     les boutons au bas de l'ecran et le bandeau couvre la moitie du telephone */
  .consent-in{flex-direction:column;align-items:stretch;gap:12px}
  .consent p{flex:0 0 auto;font-size:.8rem}
  .consent-btns button{flex:1;padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){
  .consent{transition:none}
  .consent-btns button{transition:none}
  .c-ok:hover{transform:none}
}

/* Intertitre de region dans la liste des membres. Colle en haut pendant
   le defilement pour que le lecteur sache toujours dans quelle region
   il se trouve. */
.pdv-region{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px clamp(16px,2.4vw,22px);
  background:linear-gradient(180deg,#141B17 0%,#111714 100%);
  border-bottom:1px solid var(--ligne);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pdv-region span{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sauge);
}
.pdv-region i{
  font-style:normal;font-family:var(--mono);font-size:.62rem;font-weight:700;
  color:var(--vert-vif);background:rgba(61,190,124,.12);
  border:1px solid rgba(61,190,124,.26);border-radius:999px;
  padding:2px 8px;line-height:1.5;
}
.pdv-corps{min-width:0;flex:1}
.pdv-num{
  flex:0 0 auto;margin-top:2px;width:25px;height:25px;border-radius:7px;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:var(--vert-vif);background:rgba(61,190,124,.10);
  border:1px solid rgba(61,190,124,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.pdv-num.siege{color:var(--vert-vif);background:rgba(61,190,124,.13);
  border-color:rgba(61,190,124,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 2px rgba(61,190,124,.14)}
.pdv-num.siege .marque-pin{color:var(--vert-vif)}
.pdv.actif .pdv-num{color:var(--encre);background:var(--vert-vif);border-color:transparent}
/* popup Leaflet accordée au site */
.leaflet-popup-content-wrapper{
  background:var(--acier);color:var(--texte);border:1px solid var(--ligne-forte);
  border-radius:11px;box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.leaflet-popup-content{margin:12px 15px;font-family:var(--font);font-size:.85rem;line-height:1.5}
.leaflet-popup-content b{display:block;margin-bottom:4px;font-size:.92rem}
/* leaflet.css est charge apres ce bloc et impose #0078A8 aux liens
   a specificite egale. On remonte la specificite plutot que de
   deplacer la feuille. */
.leaflet-container .leaflet-popup-content a{color:var(--vert-vif);font-weight:600}
.leaflet-popup-tip{background:var(--acier);border:1px solid var(--ligne-forte)}
.leaflet-popup-close-button{color:var(--texte-doux)!important}
.leaflet-container{background:#121815;font-family:var(--font)}
@media(max-width:760px){
  /* La carte fait ~320px : la bulle doit rester compacte pour tenir au-dessus
     d'un marqueur centré. */
  .leaflet-popup-content{margin:9px 12px;font-size:.78rem;line-height:1.42}
  .leaflet-popup-content b{font-size:.85rem;margin-bottom:2px}
  .leaflet-popup-content-wrapper{border-radius:10px}
}
.leaflet-control-attribution{
  background:rgba(10,14,12,.72)!important;color:rgba(237,235,229,.4)!important;font-size:.62rem!important;
}
.leaflet-control-attribution a{color:rgba(237,235,229,.6)!important}
.leaflet-bar a{
  background:var(--acier)!important;color:var(--texte)!important;
  border-color:var(--ligne-forte)!important;
}
.leaflet-bar a:hover{background:var(--acier-haut)!important}
.tuiles{filter:grayscale(.92) brightness(.52) contrast(1.18) saturate(.6)}

/* ============ 5 · COMMENT ÇA MARCHE (clair · calme) ============ */
.etapes{display:grid;gap:0;margin-top:clamp(24px,2.6vw,34px);counter-reset:et}
.etape{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.2vw,30px);
  padding:clamp(20px,2.4vw,27px) 0;border-top:1px solid rgba(14,20,17,.12);
  align-items:start;
}
.etape:last-child{border-bottom:1px solid rgba(14,20,17,.12)}
.etape-n{
  width:52px;height:52px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  font-weight:900;font-size:1.1rem;color:#fff;
  background:linear-gradient(160deg,var(--vert),var(--vert-profond));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px rgba(18,61,41,.24);
}
.etape h3{margin-bottom:8px;color:var(--encre)}
.etape p{font-size:.99rem;color:var(--encre-doux);line-height:1.6;max-width:62ch}
.etape .duree{
  display:inline-block;margin-top:11px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;background:rgba(var(--sauge-fonce-rgb),.09);
  border:1px solid rgba(var(--sauge-fonce-rgb),.24);color:var(--sauge-fonce);
}

/* ============ 6 · RÉSULTATS (clair · mosaïque) ============ */
.result-head{max-width:58ch;margin-bottom:clamp(28px,4vw,46px)}
.result-head h2{margin:16px 0 16px;color:var(--encre)}
.mosaique{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.mtile{
  position:relative;overflow:hidden;border-radius:14px;margin:0;
  background:#DED8CB;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 16px 34px -18px rgba(60,40,25,.55);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s;
}
.mtile img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.10) contrast(1.04) saturate(.95);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.mtile:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 26px 52px -20px rgba(60,40,25,.6)}
.mtile:hover img{transform:scale(1.05)}

/* Mobile : deux colonnes, ratios explicites tuile par tuile */
.mosaique .m1{aspect-ratio:3/4}
.mosaique .m2{aspect-ratio:3/4}
.mosaique .m3{aspect-ratio:1/1}
.mosaique .m4{aspect-ratio:1/1}

/* Desktop : grille 4 colonnes, la hauteur vient des rangees, plus des ratios */
@media(min-width:760px){
  .mosaique{grid-template-columns:repeat(4,1fr);grid-auto-rows:150px}
  .mosaique .m1,.mosaique .m2,.mosaique .m3,.mosaique .m4{aspect-ratio:auto;height:100%}
  .mosaique .m1{grid-column:span 2;grid-row:span 4}
  .mosaique .m2{grid-column:span 1;grid-row:span 4}
  .mosaique .m3{grid-column:span 1;grid-row:span 2}
  .mosaique .m4{grid-column:span 1;grid-row:span 2}
}

/* ============ 7 · QUI EST DERRIÈRE (sombre) ============ */
.derriere{position:relative;overflow:hidden;isolation:isolate}
.derriere-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(min-width:900px){.derriere-grid{grid-template-columns:1fr 1fr}}
.derriere h2{margin:16px 0 20px}
.derriere-img{width:100%;height:clamp(340px,42vw,520px);object-fit:cover;border-radius:16px;display:block;
  border:1px solid var(--ligne);box-shadow:0 22px 50px rgba(0,0,0,.5);
  filter:grayscale(.12) contrast(1.05) saturate(.92)}
.faits{list-style:none;margin-top:26px;display:grid;gap:12px}
.faits li{
  display:flex;gap:13px;align-items:flex-start;font-size:.97rem;color:rgba(237,235,229,.76);line-height:1.5;
}
.faits svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;color:var(--sauge)}
.faits b{color:var(--texte);font-weight:700}
.fait-out{
  margin-top:24px;padding:16px 20px;border-radius:12px;
  font-size:.97rem;line-height:1.55;color:var(--texte);
  background:linear-gradient(150deg,rgba(var(--sauge-rgb),.13),rgba(var(--sauge-rgb),.05));
  border:1px solid rgba(var(--sauge-rgb),.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* --- Bloc fondateur (dans le CTA final) --- */
.fondateur{
  display:flex;align-items:stretch;gap:0;
  text-align:left;max-width:640px;margin:0 auto clamp(30px,4vw,40px);
  padding:0;border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg,rgba(25,33,28,.86),rgba(17,23,20,.78));
  border:1px solid var(--ligne-forte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 38px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.fondateur .fond-photo{
  flex:0 0 auto;width:clamp(78px,10vw,98px);height:clamp(78px,10vw,98px);
  min-height:0;border-radius:14px;padding:6px;
  align-items:center;justify-content:center;text-align:center;
}
.fondateur .fond-photo .ph-desc{font-size:.55rem;line-height:1.3;padding:4px 6px;max-width:100%}
.fondateur .fond-photo::before{display:none}
.fond-img{
  /* La boite etait plus etroite que les deux hommes : le navigateur
     rognait les cotes quelle que soit la photo fournie. L'image garde
     donc son propre rapport au lieu d'etre etiree sur la hauteur de la
     carte, et rien n'est coupe a gauche ni a droite. */
  flex:0 0 auto;align-self:stretch;
  width:clamp(260px,30vw,330px);height:auto;
  object-fit:cover;object-position:50% 26%;
  border:0;border-right:1px solid var(--ligne-forte);
  filter:grayscale(.10) contrast(1.04) saturate(.95);
}
.fond-txt{min-width:0;padding:clamp(20px,2.6vw,26px) clamp(22px,2.8vw,28px)}
.fond-nom{display:block;font-weight:800;font-size:1.06rem;color:var(--texte);line-height:1.25}
/* Deux personnes sur la photo, un seul nom en titre : la legende dit
   laquelle est laquelle, sans transformer le bloc en presentation de
   la direction. */
.fond-legende{
  display:block;margin:-4px 0 12px;
  font-size:.74rem;line-height:1.45;color:rgba(237,235,229,.46);
}
.fond-role{
  display:block;margin-top:3px;margin-bottom:9px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sauge);
}
.fond-role i{display:block;font-style:normal;color:var(--texte-doux);margin-top:2px;letter-spacing:.12em}
.fondateur p{margin:0;font-size:.9rem;line-height:1.55;color:rgba(237,235,229,.74);max-width:40ch}
/* Entre 560 et 900 px, la bande verticale devient trop etroite pour tenir
   les deux hommes : on empile, la photo passe en bandeau pleine largeur. */
@media(max-width:900px){
  .fondateur{flex-direction:column;text-align:center;padding:0}
  .fond-img{
    width:100%;min-height:0;height:clamp(210px,58vw,270px);
    object-position:50% 30%;border-right:0;border-bottom:1px solid var(--ligne-forte);
  }
  .fondateur p{margin-inline:auto}
  .fond-txt{text-align:center}
}

/* ============ 8 · FAQ ============ */
.faq-wrap{max-width:920px;margin:0 auto}
.faq-head{text-align:center;margin-bottom:clamp(28px,4vw,46px)}
.faq-head .kicker{justify-content:center}
.faq-head h2{margin:16px 0 0}
.faq-item{border-bottom:1px solid var(--ligne)}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:22px 44px 22px 0;position:relative;
  font-size:clamp(1rem,1.5vw,1.13rem);font-weight:700;color:var(--texte);line-height:1.4;
  transition:color .2s;
}
.faq-q:hover{color:var(--vert-vif)}
.faq-q::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--vert-vif);border-bottom:2px solid var(--vert-vif);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.faq-item.open .faq-q::after{transform:translateY(-30%) rotate(225deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.22,1,.36,1)}
.faq-a p{padding:0 44px 24px 0;font-size:.99rem;color:var(--texte-doux);line-height:1.65}

/* ============ 9 · CTA FINAL (sombre · intense) ============ */
.final{position:relative;overflow:hidden;isolation:isolate;text-align:center}
.final-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.3) brightness(.92) contrast(1.06) saturate(.72)}
.final::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 90% at 50% 50%,rgba(8,12,10,.82) 0%,rgba(8,12,10,.95) 68%);
}
.final .wrap{padding-block:clamp(76px,12vh,150px)}
.final .kicker{justify-content:center}
.final h2{margin:18px auto 20px;max-width:20ch}
.final p{margin:0 auto 34px;max-width:54ch;font-size:1.06rem;color:rgba(237,235,229,.76)}
.final-actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}

/* ============ FOOTER ============ */
.footer{background:var(--charbon);border-top:1px solid var(--ligne);padding:clamp(44px,6vw,64px) 0 28px}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr;margin-bottom:36px}
/* Mobile : le bloc de marque garde toute la largeur, les deux colonnes de liens
   se placent côte à côte plutôt que l'une sous l'autre. */
@media(min-width:350px){
  .foot-grid{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:34px}
  .foot-grid > :first-child{grid-column:1/-1}
}
@media(min-width:760px){
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;column-gap:32px}
  .foot-grid > :first-child{grid-column:auto}
}
.foot-brand p{margin-top:16px;font-size:.9rem;color:var(--texte-doux);max-width:36ch;line-height:1.6}
.foot h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vert-vif);margin-bottom:14px}
.insec{white-space:nowrap}
.br-etroit{display:none}
@media(max-width:880px){.br-etroit{display:inline}}
.foot ul{list-style:none;display:grid;gap:0}
.foot ul a,.foot ul li{display:block;padding:4px 0}
.foot ul a,.foot ul li{font-size:.9rem;color:var(--texte-doux);transition:color .2s;line-height:1.45}
/* Au doigt, on garde une cible confortable ; à la souris, on resserre. */
@media(max-width:760px){.foot ul a,.foot ul li{padding:9px 0;min-height:22px}}
@media(max-width:520px){.foot ul a,.foot ul li{font-size:.86rem}}
.foot ul a:hover{color:var(--texte)}
.foot-bas{
  border-top:1px solid var(--ligne);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:.8rem;color:rgba(237,235,229,.4);
}
.foot-bas a{color:rgba(237,235,229,.55);transition:color .2s}
.foot-bas a:hover{color:var(--vert-vif)}

/* Mention obligatoire sous le bouton d'envoi (Loi 25) : elle informe au
   moment de la collecte, pas seulement au pied de page. */
.form-note{
  /* basis a 100% pour forcer le retour a la ligne. Une max-width ici
     reduirait la taille hypothetique et la mention se replacerait a cote
     du bouton : la longueur de ligne est donc bornee par la colonne. */
  flex:1 0 100%;margin-top:14px;text-align:left;
  font-size:.78rem;line-height:1.55;color:rgba(237,235,229,.5);
}
.form-note a{color:rgba(237,235,229,.72);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;transition:color .2s}
.form-note a:hover{color:var(--vert-vif)}

/* ============ PLACEHOLDERS D'IMAGES ============ */
.img-ph{
  position:relative;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:flex-start;
  gap:7px;padding:14px;text-align:right;overflow:hidden;
  background:
    repeating-linear-gradient(45deg,rgba(61,190,124,.045) 0 12px,transparent 12px 24px),
    linear-gradient(160deg,#1D2721,#141A17);
  border:1px dashed rgba(61,190,124,.28);
  border-radius:12px;min-height:230px;
  color:rgba(237,235,229,.72);
}
.img-ph::before{
  content:attr(data-format);
  position:absolute;bottom:11px;left:13px;
  font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  opacity:.5;
}
.ph-desc{
  font-size:.76rem;font-weight:500;line-height:1.45;max-width:30ch;
  background:rgba(8,12,10,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:8px 11px;border-radius:8px;border:1px solid rgba(61,190,124,.16);
}
.ph-src{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;
  padding:4px 10px;border-radius:20px;
  background:rgba(61,190,124,.14);border:1px solid rgba(61,190,124,.28);color:#9FE3BF;
}
.clair .img-ph{
  background:
    repeating-linear-gradient(45deg,rgba(29,122,76,.05) 0 12px,transparent 12px 24px),
    linear-gradient(160deg,#E9E4D9,#DED8CB);
  border-color:rgba(29,122,76,.3);color:rgba(14,20,17,.72);
}
.clair .ph-desc{background:rgba(255,255,255,.72);border-color:rgba(29,122,76,.18)}
.clair .ph-src{background:rgba(29,122,76,.1);border-color:rgba(29,122,76,.26);color:var(--vert)}

/* ---- Barre d'action fixe mobile ---- */
.mcb{display:none}
@media(max-width:760px){
  .mcb{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:88;gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(10,14,12,.88);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--ligne);box-shadow:0 -8px 30px rgba(0,0,0,.45);
    transform:translateY(115%);transition:transform .4s cubic-bezier(.22,1,.36,1);
  }
  .apres-hero .mcb{transform:none}
  .mcb a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    font-weight:800;font-size:.84rem;padding:15px 8px;border-radius:11px;white-space:nowrap;
    transition:transform .12s;
  }
  .mcb a svg{width:17px;height:17px;flex-shrink:0}
  .mcb-primaire{
    color:#06170E;background:linear-gradient(180deg,var(--vert-vif),var(--vert));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(29,122,76,.28);
  }
  .mcb-ghost{color:var(--texte);border:1.5px solid var(--ligne-forte);background:rgba(255,255,255,.04)}
  .mcb a:active{transform:scale(.97)}
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  @media(prefers-reduced-motion:reduce){.mcb{transition:none}}
}

/* ============ FORMULAIRE (clair) ============ */
.ecrire-grid{display:grid;gap:clamp(30px,4vw,60px);align-items:start}
@media(min-width:900px){
  .ecrire-grid{grid-template-columns:.85fr 1.15fr;align-items:start}
  .ecrire-intro{grid-column:1;grid-row:1}
  .formulaire{grid-column:2;grid-row:1/3}
  .ecrire-coord{grid-column:1;grid-row:2;margin-top:0}
}
.ecrire-intro h2{margin:16px 0 18px;color:var(--encre)}
.ecrire-coord{list-style:none;margin-top:30px;display:grid;gap:13px}
.ecrire-coord li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--encre-doux);line-height:1.5}
.ecrire-coord{gap:6px}
.ecrire-coord svg{width:17px;height:17px;flex-shrink:0;margin-top:10px;color:var(--sauge-fonce)}
.ecrire-coord .ic-msgr{width:19px;height:19px;margin-top:8px}
.ecrire-coord a{color:var(--encre);font-weight:600;transition:color .2s;display:inline-block;padding:7px 0}
.ecrire-coord a:hover{color:var(--vert)}

.formulaire{
  background:linear-gradient(160deg,#FFFDF8,#F6F2E8);
  border:1px solid rgba(56,44,28,.12);border-radius:18px;
  padding:clamp(22px,3vw,34px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 50px -26px rgba(60,40,25,.55);
}
.champs{display:grid;gap:clamp(14px,1.8vw,18px)}
@media(min-width:620px){.champs{grid-template-columns:1fr 1fr}.champ-large{grid-column:1/-1}}
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-doux);font-weight:600;
}
.champ label span{color:var(--vert);margin-left:3px}
.champ input,.champ select,.champ textarea{
  width:100%;font-family:inherit;font-size:.97rem;color:var(--encre);
  background:#fff;border:1px solid rgba(56,44,28,.16);border-radius:10px;
  padding:13px 14px;transition:border-color .2s,box-shadow .2s;
  box-shadow:inset 0 1px 2px rgba(56,44,28,.05);
}
.champ textarea{min-height:130px;resize:vertical;line-height:1.55}
.champ select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1411' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px;padding-right:38px}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(29,122,76,.14);
}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(14,20,17,.34)}
.form-bas{display:flex;justify-content:flex-end;margin-top:clamp(20px,2.6vw,26px)}
/* La rangee est alignee a droite : sans retour a la ligne, la mention se
   placerait a cote du bouton et se ferait ecraser. Declaree ici, apres la
   regle de base, pour ne pas se faire ecraser a son tour. */
.form-bas{flex-wrap:wrap}
.form-envoi{
  display:inline-flex;align-items:center;gap:11px;flex-shrink:0;
  font-weight:800;font-size:.94rem;padding:16px 26px;border-radius:11px;border:0;cursor:pointer;
  font-family:inherit;color:#06170E;
  background:linear-gradient(180deg,var(--vert-vif),var(--vert));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px rgba(29,122,76,.22);
  transition:transform .22s,box-shadow .22s;
}
.form-envoi:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 12px 26px rgba(29,122,76,.3)}
.form-envoi svg{width:16px;height:16px}
.pot-a-miel{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ============ BOUTON MESSENGER (flottant, desktop) ============ */
.msgr{
  position:fixed;right:clamp(18px,2.2vw,30px);bottom:clamp(18px,2.2vw,30px);z-index:1090;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 18px;border-radius:40px;
  font-size:.86rem;font-weight:700;letter-spacing:.01em;color:var(--texte);
  background:linear-gradient(165deg,rgba(25,33,28,.94),rgba(14,19,16,.94));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--ligne-forte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px) scale(.94);
  animation:msgr-entre .5s cubic-bezier(.22,1,.36,1) .9s forwards;
  transition:border-color .22s,box-shadow .22s,transform .22s;
}
@keyframes msgr-entre{to{opacity:1;transform:none}}
.msgr svg{width:21px;height:21px;flex-shrink:0;color:var(--vert-vif)}
.msgr:hover{transform:translateY(-2px);border-color:rgba(61,190,124,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 38px rgba(0,0,0,.58)}
@media(max-width:1100px){.msgr b{display:none}.msgr{padding:14px;border-radius:50%}}
@media(max-width:760px){.msgr{display:none}}
@media(prefers-reduced-motion:reduce){.msgr{animation:none;opacity:1;transform:none}}

/* ============ PROFONDEUR DES SECTIONS CLAIRES ============ */
/* Le crème n'est plus un aplat numérique : grain de papier très léger. */
.clair{position:relative;isolation:isolate}
.clair::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;opacity:.055;mix-blend-mode:multiply;
}

/* Feuille de papier : une seule surface qui porte plusieurs rangées,
   plutôt que N cartes qui se ressemblent. (.panneau est déjà pris par les vues territoires) */
.papier{
  background:linear-gradient(178deg,#FDFAF3 0%,#F7F3EA 62%,#F2EDE2 100%);
  border:1px solid rgba(36,28,21,.09);border-radius:16px;
  padding:clamp(6px,1vw,14px) clamp(18px,2.4vw,30px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             0 1px 0 rgba(255,255,255,.5),
             0 20px 42px -26px rgba(60,40,25,.5);
}
.pains.papier{margin-top:6px}
.pains.papier li:first-child{padding-top:20px}
.pains.papier li:last-child{padding-bottom:20px}
.etapes.papier{padding-inline:clamp(20px,3vw,36px)}
.etape h3{margin-bottom:7px}
.etape .duree{margin-top:10px}
.etapes.papier .etape:first-child{border-top:0}
.etapes.papier .etape:last-child{border-bottom:0}

/* ============ SOUFFLE ============ */
/* Une seule section courte, dans le vert de marque. C'est le seul endroit du site
   où l'accent occupe une surface entière : ça lui redonne du poids. */
.souffle{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(58px,7vw,92px) 0;
  background:linear-gradient(150deg,#1A4A32 0%,var(--vert-profond) 42%,#0C2A1C 100%);
  border-block:1px solid rgba(var(--sauge-rgb),.22);
}
.souffle::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(var(--sauge-rgb),.13) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--sauge-rgb),.13) 1px,transparent 1px);
  background-size:104px 104px;
  -webkit-mask-image:radial-gradient(88% 120% at 88% 20%,#000 0%,transparent 72%);
          mask-image:radial-gradient(88% 120% at 88% 20%,#000 0%,transparent 72%);
}
.souffle p{
  font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:800;line-height:1.2;
  letter-spacing:-.022em;color:var(--texte);max-width:34ch;
}
.souffle p em{font-style:normal;color:#A8C4B5}
@media(max-width:760px){.souffle p{max-width:none}}

/* ============ VISIONNEUSE ============ */
.mtile{cursor:zoom-in}
.mtile:focus-visible{outline:2px solid var(--vert-vif);outline-offset:3px}

.lb{
  position:fixed;inset:0;z-index:1300;display:none;
  align-items:center;justify-content:center;
  padding:clamp(58px,9vh,84px) clamp(16px,4vw,56px) clamp(64px,10vh,92px);
}
.lb.ouverte{display:flex}
.lb-fond{
  position:absolute;inset:0;background:rgba(6,9,8,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .34s ease;
}
.lb.visible .lb-fond{opacity:1}

/* L'image part de la tuile et grandit jusqu'à sa place finale (technique FLIP). */
.lb-img{
  position:relative;max-width:100%;max-height:100%;
  object-fit:contain;border-radius:10px;
  box-shadow:0 40px 90px rgba(0,0,0,.7);
  transform-origin:top left;will-change:transform,opacity;
}
.lb-legende{
  position:absolute;left:0;right:0;bottom:clamp(16px,3vw,28px);
  text-align:center;padding:0 clamp(60px,8vw,96px);
  font-size:.85rem;color:rgba(237,235,229,.72);line-height:1.45;
  max-width:70ch;margin:0 auto;
  opacity:0;transition:opacity .3s .12s;
}
.lb.visible .lb-legende{opacity:1}

.lb-fermer,.lb-nav{
  position:absolute;z-index:2;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--ligne-forte);
  background:rgba(14,20,17,.86);color:var(--texte);cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s .1s,background .2s,border-color .2s,transform .2s;
}
.lb.visible .lb-fermer,.lb.visible .lb-nav{opacity:1}
.lb-fermer:hover,.lb-nav:hover{background:rgba(24,34,28,.94);border-color:rgba(61,190,124,.45)}
.lb-fermer:active,.lb-nav:active{transform:scale(.94)}
.lb-fermer{top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px)}
.lb-nav svg,.lb-fermer svg{width:20px;height:20px}
.lb-prec{left:clamp(10px,2vw,22px);top:50%;margin-top:-23px}
.lb-suiv{right:clamp(10px,2vw,22px);top:50%;margin-top:-23px}
.lb-compte{
  position:absolute;top:clamp(18px,3vw,30px);left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:rgba(237,235,229,.6);
  opacity:0;transition:opacity .3s .1s;
}
.lb.visible .lb-compte{opacity:1}
@media(max-width:640px){
  .lb-nav{width:42px;height:42px}
  .lb-prec{left:8px} .lb-suiv{right:8px}
  .lb-legende{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){
  .lb-fond,.lb-legende,.lb-fermer,.lb-nav,.lb-compte{transition:opacity .15s}
}
body.lb-active{overflow:hidden}

/* Lien d'évitement : dix arrêts de nav avant le contenu, au clavier. */
.saut{
  position:fixed;top:-100px;left:16px;z-index:1400;
  padding:12px 18px;border-radius:10px;font-weight:700;font-size:.9rem;
  color:#06170E;background:linear-gradient(180deg,var(--vert-vif),var(--vert));
  box-shadow:0 8px 22px rgba(0,0,0,.5);transition:top .2s ease;
}
.saut:focus{top:14px}

/* Barre de progression : sur une page de onze écrans, elle situe le lecteur. */
.progres{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:1105;
  background:linear-gradient(90deg,var(--vert),var(--vert-vif));
  box-shadow:0 0 12px rgba(61,190,124,.5);
  transition:width .1s linear;pointer-events:none;
}
@media(prefers-reduced-motion:reduce){.progres{transition:none}}

/* ============ RETOUR AU CLIC ============ */
/* Sur écran tactile, le survol n'existe pas : l'enfoncement est
   le seul signal que le geste a été reçu. */
.cta:active,.cta-ghost:active,.nav-cta:active,.form-envoi:active,
.mn-cta:active,.mcb a:active,.cal-confirmer:not(:disabled):active,
.msgr:active,.vue:active,.filtre:active{
  transform:translateY(1px) scale(.985);
}
.cal-jour.dispo:active,.cal-creneau:active{transform:scale(.94)}
.pdv:active{background:rgba(61,190,124,.10)}
.faq-q:active{background:rgba(255,255,255,.03)}
.mtile:active{transform:translateY(-2px) scale(.995)}
.nav-links a:active,.nav-ecrire:active,.btn-membre:active,
.foot ul a:active,.mn-link:active,.ecrire-coord a:active{opacity:.7}

/* ============ SURVOLS MANQUANTS ============ */
.mn-link{transition:color .2s,padding-left .25s cubic-bezier(.22,1,.36,1)}
.mn-link:hover{color:var(--vert-vif)}
.mn-link:hover svg{transform:translateX(4px)}
.mn-link svg{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.mn-cta{transition:transform .2s,box-shadow .2s}
.mn-cta:hover{transform:translateY(-2px)}
.mcb a{transition:transform .14s,filter .2s}
.mcb-ghost:hover{border-color:rgba(61,190,124,.45)}

/* Champs : le survol annonce qu'on peut écrire, avant même le focus. */
.champ input:hover,.champ textarea:hover,.champ select:hover{
  border-color:rgba(56,44,28,.30);
}
.terr-search{transition:border-color .2s,background .2s}
.terr-search:hover{border-color:rgba(var(--sauge-rgb),.32)}
.terr-search:focus-within{
  border-color:rgba(61,190,124,.5);background:rgba(61,190,124,.06);
}
.terr-search:focus-within svg{color:var(--vert-vif)}

/* Le pied de page réagit comme le reste. */
.foot-socials a,.mn-socials a{transition:color .2s,border-color .2s,transform .2s,background .2s}
.foot-socials a:hover,.mn-socials a:hover{transform:translateY(-2px)}

/* ============ SURFACES CLAIRES ============ */
/* Les rangées de la démarche n'ont ni relief ni réaction. Sur fond crème,
   un survol très léger suffit à montrer qu'on lit une liste vivante. */
.etape{transition:background .22s ease}
.etape:hover{background:rgba(29,122,76,.035)}
.etape:hover .et-num{
  transform:scale(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(29,122,76,.28);
}
.et-num{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}

/* La mosaïque : l'agrandissement doit s'annoncer avant le clic. */
.mtile{position:relative;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.mtile img{transition:transform .6s cubic-bezier(.22,1,.36,1),filter .35s}
.mtile:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 22px 46px rgba(60,44,26,.3)}
.mtile:hover img{transform:scale(1.05)}
.mtile::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(70% 70% at 50% 50%,transparent 40%,rgba(10,14,12,.28));
  opacity:0;transition:opacity .35s;
}
.mtile:hover::after{opacity:1}
.mtile .loupe{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;z-index:2;
  background:rgba(12,18,15,.82);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s cubic-bezier(.22,1,.36,1);
}
.mtile .loupe svg{width:15px;height:15px;color:#fff}
.mtile:hover .loupe,.mtile:focus-visible .loupe{opacity:1;transform:none}
@media(hover:none){.mtile .loupe{opacity:1;transform:none}}

/* Le bouton d'envoi : même langage que les autres actions du site. */
.form-envoi{transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s}
.form-envoi:hover{transform:translateY(-2px)}

/* ============ JONCTIONS DE SECTIONS ============ */
/* Un filet lumineux au passage sombre → clair marque la coupure
   sans ajouter de bloc. */
.clair{position:relative}
.clair::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 20%,rgba(255,255,255,.55) 80%,transparent);
  pointer-events:none;
}

/* ============ SECTION COURANTE DANS LA NAV ============ */
/* Sur onze écrans, le lecteur doit savoir où il est. */
.nav-links a.actif{color:var(--texte)}
.nav-links a.actif::after{right:0;background:var(--vert-vif);height:2px}
.mn-link.actif{color:var(--vert-vif)}

/* ============ CARTE DES MEMBRES ============ */
.pdv{transition:background .2s ease}
.pdv.actif{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* ============ FAQ ============ */
.faq-q{transition:color .2s,background .2s}
.faq-item.open .faq-q{color:var(--texte)}
.faq-item{transition:border-color .3s}
.faq-item.open{border-color:rgba(61,190,124,.3)}

/* ============ MOUVEMENT RÉDUIT ============ */
/* Les nouveaux gestes doivent se taire quand le système le demande. */
@media(prefers-reduced-motion:reduce){
  .mtile:hover,.mtile:hover img,.mtile:active,
  .zone.libre:hover,.zone.libre:active,
  .vue:hover,.mn-cta:hover,.form-envoi:hover,
  .foot-socials a:hover,.mn-socials a:hover,
  .etape:hover .et-num,.pilier:hover .pilier-img,
  .cta:active,.cta-ghost:active,.nav-cta:active,.form-envoi:active,
  .mn-cta:active,.mcb a:active,.msgr:active,.vue:active,.filtre:active,
  .cal-jour.dispo:active,.cal-creneau:active,.cal-jour.dispo:hover,
  .cal-confirmer:not(:disabled):active,.mn-link:hover svg{
    transform:none;
  }
  .mtile .loupe{opacity:1;transform:none;transition:none}
}

/* Le filtre reçoit le même relief que ses voisins. */
.filtre{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* ============ CALENDRIER ============ */
.cal-bloc{
  display:grid;gap:clamp(18px,2.4vw,28px);text-align:left;
  max-width:940px;margin:clamp(26px,3.4vw,38px) auto 0;
}
@media(min-width:900px){.cal-bloc{grid-template-columns:1fr 1.05fr;align-items:start}}

.cal{
  position:relative;isolation:isolate;
  background:
    radial-gradient(120% 90% at 8% 4%,rgba(61,190,124,.10),transparent 58%),
    linear-gradient(160deg,rgba(25,33,28,.93),rgba(17,23,20,.88));
  border:1px solid rgba(var(--sauge-rgb),.30);border-radius:16px;
  padding:clamp(18px,2.2vw,24px);
  box-shadow:inset 0 1px 0 rgba(var(--sauge-rgb),.16),
             0 0 0 1px rgba(61,190,124,.05),
             0 18px 42px rgba(0,0,0,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cal-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-mois{font-weight:800;font-size:1rem;color:var(--texte);text-transform:capitalize}
.cal-fleches{display:flex;gap:6px}
.cal-fleches button{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;cursor:pointer;
  background:rgba(61,190,124,.07);border:1px solid rgba(61,190,124,.22);color:var(--texte-doux);
  transition:color .2s,border-color .2s,background .2s;
}
.cal-fleches button:hover:not(:disabled){color:var(--texte);border-color:rgba(61,190,124,.4);background:rgba(61,190,124,.08)}
.cal-fleches button:disabled{opacity:.32;cursor:default}
.cal-fleches svg{width:15px;height:15px}

.cal-jours,.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-jours{margin-bottom:7px}
.cal-jours span{
  text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(237,235,229,.42);
}
.cal-jour{
  aspect-ratio:1;display:grid;place-items:center;border-radius:9px;
  font-size:.86rem;font-weight:600;color:var(--texte-doux);
  background:transparent;border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.cal-jour.dispo{
  color:#DCEBE3;
  background:linear-gradient(180deg,rgba(61,190,124,.26),rgba(61,190,124,.12));
  border-color:rgba(61,190,124,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.cal-jour.dispo:hover{
  color:#fff;
  background:linear-gradient(180deg,rgba(61,190,124,.36),rgba(61,190,124,.18));
  border-color:rgba(61,190,124,.7);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(29,122,76,.28);
}
.cal-jour.on{
  color:#06170E;background:linear-gradient(180deg,var(--vert-vif),var(--vert));border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 0 0 3px rgba(61,190,124,.22),0 6px 18px rgba(29,122,76,.4);
}
.cal-jour:disabled{color:rgba(237,235,229,.20);cursor:default;background:transparent;border-color:transparent}
.cal-jour.vide{visibility:hidden}

.cal-droite{
  display:flex;flex-direction:column;gap:14px;
  position:relative;isolation:isolate;
  background:
    radial-gradient(120% 90% at 92% 6%,rgba(61,190,124,.09),transparent 58%),
    linear-gradient(200deg,rgba(25,33,28,.93),rgba(17,23,20,.88));
  border:1px solid rgba(var(--sauge-rgb),.30);border-radius:16px;
  padding:clamp(18px,2.2vw,24px);
  box-shadow:inset 0 1px 0 rgba(var(--sauge-rgb),.16),
             0 0 0 1px rgba(61,190,124,.05),
             0 18px 42px rgba(0,0,0,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cal-titre{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:#A8C4B5;padding-bottom:12px;border-bottom:1px solid rgba(var(--sauge-rgb),.20);
}
.cal-titre::before{
  content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--vert-vif);box-shadow:0 0 0 3px rgba(61,190,124,.20);
}
.cal-creneaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.cal-creneau{
  padding:11px 8px;border-radius:10px;font-size:.86rem;font-weight:600;cursor:pointer;
  color:var(--texte);border:1px solid rgba(61,190,124,.30);font-family:inherit;
  background:linear-gradient(180deg,rgba(28,42,34,.94),rgba(18,27,22,.92));
  box-shadow:inset 0 1px 0 rgba(var(--sauge-rgb),.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .18s,border-color .18s,transform .18s;
}
.cal-creneau:hover{background:linear-gradient(180deg,rgba(38,58,47,.96),rgba(24,36,29,.94));border-color:rgba(61,190,124,.5);transform:translateY(-1px)}
.cal-creneau.on{
  color:#06170E;background:linear-gradient(180deg,var(--vert-vif),var(--vert));border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 5px 14px rgba(29,122,76,.3);
}
.cal-vide{font-size:.88rem;color:var(--texte-doux);line-height:1.5;padding:6px 0}
.cal-fuseau{font-size:.76rem;color:rgba(237,235,229,.5)}
.cal-confirmer{
  margin-top:2px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:.94rem;padding:16px 24px;border-radius:11px;border:0;cursor:pointer;
  font-family:inherit;color:#06170E;
  background:linear-gradient(180deg,var(--vert-vif),var(--vert));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(29,122,76,.24);
  transition:transform .22s,box-shadow .22s,opacity .22s;
  position:relative;isolation:isolate;
}
.cal-confirmer svg{width:16px;height:16px}
.cal-confirmer:hover:not(:disabled){transform:translateY(-2px)}
.cal-confirmer:disabled{
  opacity:1;cursor:default;
  color:rgba(237,235,229,.66);
  background:linear-gradient(180deg,rgba(30,44,36,.95),rgba(19,29,23,.94));
  border:1px solid rgba(61,190,124,.26);
  box-shadow:inset 0 1px 0 rgba(var(--sauge-rgb),.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.cal-confirmer:disabled svg{opacity:.5}
.cal-ecrire{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:.86rem;font-weight:600;color:var(--texte-doux);
  padding:12px 14px;border-radius:10px;transition:color .2s,background .2s;
}
.cal-ecrire svg{width:15px;height:15px;opacity:.8;flex-shrink:0}
.cal-ecrire:hover{color:var(--texte);background:rgba(255,255,255,.05)}
@media(max-width:420px){.cal-ecrire{font-size:.8rem;gap:7px}}


/* ============ BANDE ACCÈS ============ */
/* Même famille visuelle que .souffle : les deux bandes vertes se répondent
   et découpent la page. Celle-ci annonce, les piliers prouvent. */
.acces{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(46px,5.4vw,72px) 0;
  background:linear-gradient(150deg,#1A4A32 0%,var(--vert-profond) 46%,#0C2A1C 100%);
  border-block:1px solid rgba(var(--sauge-rgb),.22);
}
.acces::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(var(--sauge-rgb),.13) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--sauge-rgb),.13) 1px,transparent 1px);
  background-size:104px 104px;
  -webkit-mask-image:radial-gradient(84% 118% at 6% 92%,#000 0%,transparent 70%);
          mask-image:radial-gradient(84% 118% at 6% 92%,#000 0%,transparent 70%);
}
.acces .wrap{position:relative}
/* La marque remplit le vide à droite du titre et déborde du cadre :
   coupée par le bord, elle bouge au lieu de flotter. */
.acces-marque{
  position:absolute;top:clamp(-58px,-4vw,-24px);right:clamp(-56px,-3vw,-16px);
  width:clamp(180px,18vw,270px);height:auto;
  transform:rotate(-7deg);
  color:var(--sauge);opacity:.13;pointer-events:none;z-index:-1;
}
@media(max-width:900px){
  .acces-marque{
    right:-52px;top:-30px;bottom:auto;
    width:clamp(150px,38vw,210px);transform:rotate(-7deg);opacity:.09;
  }
}
.acces-tete{max-width:52ch;margin-bottom:clamp(30px,3.6vw,44px)}
.acces-sigle{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:#A8C4B5;margin-bottom:14px;
}
.acces-sigle b{font-weight:700;letter-spacing:.24em;color:var(--texte)}
.acces-sigle span{opacity:.55}
.acces-tete h2{
  font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;line-height:1.16;
  letter-spacing:-.022em;word-spacing:.03em;color:var(--texte);
}
/* Le sigle se prononce « accès » : on le rend visible plutôt que de l'expliquer. */
.acces-tete h2 em{font-style:normal;color:#A8C4B5}

.acces-liste{
  display:grid;gap:10px;grid-template-columns:1fr;
}
/* Les accès sont des surfaces, pas du texte entre des filets : la trame
   redevient de la texture et cesse de concurrencer la structure. */
.acces-item{
  position:relative;overflow:hidden;
  padding:20px 20px 22px;border-radius:13px;
  background:linear-gradient(165deg,rgba(46,84,64,.62),rgba(20,44,32,.52));
  border:1px solid rgba(var(--sauge-rgb),.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -14px rgba(0,0,0,.6);
  transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s,box-shadow .28s,background .28s;
}
/* Le repère vert en haut de carte : la seule couleur franche de la bande. */
.acces-item::before{
  content:"";position:absolute;top:0;left:0;width:46px;height:3px;
  background:linear-gradient(90deg,var(--vert-vif),rgba(61,190,124,.15));
  transition:width .32s cubic-bezier(.22,1,.36,1);
}
.acces-item:hover{
  transform:translateY(-3px);
  border-color:rgba(61,190,124,.42);
  background:linear-gradient(165deg,rgba(54,96,73,.7),rgba(24,50,36,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 34px -16px rgba(0,0,0,.66);
}
.acces-item:hover::before{width:100%}

.acces-item i{
  display:block;font-style:normal;margin-bottom:11px;
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.22em;color:#A8C4B5;
}
.acces-item b{
  display:block;margin-bottom:7px;
  font-size:1.02rem;font-weight:800;color:var(--texte);letter-spacing:-.01em;
}
.acces-item span{font-size:.9rem;line-height:1.5;color:rgba(237,235,229,.74)}

@media(min-width:760px){.acces-liste{grid-template-columns:repeat(2,1fr);gap:11px}}
@media(min-width:1120px){
  .acces-liste{grid-template-columns:repeat(5,1fr);gap:clamp(9px,.8vw,12px)}
  .acces-item{padding:22px 14px 24px}
  .acces-item b{font-size:.94rem;letter-spacing:-.014em}
  .acces-item span{font-size:.85rem;line-height:1.48}
}
@media(prefers-reduced-motion:reduce){
  .acces-item:hover{transform:none}
  .acces-item:hover::before{width:46px}
}

/* ============ REVEAL ============ */
.rev{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============ ANCRES ============ */
#reseau,#territoires,#membres,#demarche,#realisations,#production,#faq,#ecrire,#contact{scroll-margin-top:calc(var(--nav-h) + 16px)}
.ancre{display:block;height:0;overflow:hidden}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .constat-grid{grid-template-columns:1fr}
}
@media(max-width:1060px){
  .nav-links,.nav-ecrire,.nav-cta,.btn-membre{display:none}
  .nav-mobile{display:flex}
}
@media(max-width:760px){
  .hero{min-height:100vh;min-height:100svh}
  .cta{font-size:.9rem;padding:16px 20px;gap:9px}
  .terr-head{flex-direction:column;align-items:stretch}
  .terr-count{text-align:left}
  .etape{grid-template-columns:1fr;gap:14px}
  .etape-n{width:44px;height:44px}
}

/* ============ PALIER GRAND ÉCRAN (iMac 27" 5K) ============ */
@media(min-width:2000px){
  :root{--max:1560px;--nav-h:96px}
  .hero .wrap{padding-bottom:140px}
  .h-xl{font-size:5.4rem}
  .h-lg{font-size:4rem}
  .h-md{font-size:2.2rem}
  .lede{font-size:1.42rem}
  .hero-sub{font-size:1.28rem}
  .sec{padding:150px 0}
  .pilier{min-height:560px}
  .mosaique{grid-auto-rows:210px}
}

/* ============================================================
   HERO · POSITION VERTICALE DU BLOC
   Ancre en bas, la hauteur en trop d'un grand ecran s'accumulait
   au-dessus du titre : 746 px de vide en haut contre 140 en bas sur
   un 27 pouces. Des que l'ecran est assez haut pour que le contenu
   respire, le bloc se centre. Sous ce seuil, l'ancrage bas reste,
   puisque toute la hauteur disponible sert deja au contenu.
   Declare en dernier pour passer devant les surcharges de largeur.
   ============================================================ */
@media(min-height:780px){
  .hero{align-items:center}
  .hero .wrap{padding-bottom:0}
}
/* L'indicateur de defilement se bute aux boutons sur un ecran court.
   Il est decoratif : on le retire plutot que de le faire chevaucher. */
@media(max-height:820px){
  .scroll-hint{display:none}
}

/* ============================================================
   PAGES INTERIEURES · hero court, bandes de relance, cartes de suite
   ============================================================ */
.hero-page{
  position:relative;background:linear-gradient(180deg,var(--charbon) 0%,var(--noir) 100%);
  border-bottom:1px solid var(--ligne);
  padding:calc(var(--nav-h) + clamp(48px,7vw,86px)) 0 clamp(44px,6vw,72px);
}
.hero-page .lede{max-width:56ch;margin-top:14px}
.hero-page-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(24px,3vw,34px)}

.relance{background:var(--charbon);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.relance .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);padding-top:clamp(34px,4vw,52px);padding-bottom:clamp(34px,4vw,52px);
}
.relance-txt{flex:1 1 360px;min-width:0}
.relance-txt h2{margin-bottom:8px}
.relance-txt p{color:var(--texte-doux);max-width:58ch;font-size:.95rem;line-height:1.6}
.relance-btn{display:flex;flex-wrap:wrap;gap:12px;flex:0 1 auto;min-width:0}
.relance-btn .cta,.relance-btn .cta-ghost{flex:0 1 auto;min-width:0}
@media(max-width:620px){
  .relance .wrap{flex-direction:column;align-items:stretch}
  .relance-btn{width:100%}
  .relance-btn .cta,.relance-btn .cta-ghost{flex:1 1 100%;justify-content:center}
}

.def-grille{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:clamp(20px,2.6vw,30px)}
.def-grille p{color:var(--encre-doux);line-height:1.65}
.def-grille b{color:var(--encre)}

.suite-grille{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(auto-fit,minmax(262px,1fr));margin-top:clamp(24px,3vw,34px)}
.suite-carte{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;
  padding:clamp(20px,2.4vw,26px);border-radius:14px;
  background:linear-gradient(160deg,var(--acier),#141B17);
  border:1px solid var(--ligne);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.34);
  transition:transform .24s cubic-bezier(.22,1,.36,1),border-color .24s;
}
.suite-carte:hover{transform:translateY(-3px);border-color:rgba(61,190,124,.42)}
.suite-num{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--vert-vif)}
.suite-carte b{font-size:1.06rem;color:var(--texte);line-height:1.3}
.suite-carte span:not(.suite-num){color:var(--texte-doux);font-size:.9rem;line-height:1.55}
.suite-carte i{
  font-style:normal;margin-top:6px;font-weight:700;font-size:.86rem;color:var(--vert-vif);
  display:inline-flex;align-items:center;gap:7px;
}
.suite-carte i::after{content:"→";transition:transform .24s}
.suite-carte:hover i::after{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .suite-carte,.suite-carte i::after{transition:none}
  .suite-carte:hover{transform:none}
}

/* ============================================================
   REFONTE · 25 OCTOBRE 2026
   Posé en fin de feuille : chaque règle ici passe devant les
   précédentes à spécificité égale.
   ============================================================ */

/* ---------- 1 · Fonds clairs : blanc pur, objets définis par le noir et l'ombre ---------- */
:root{
  --creme:#FFFFFF;
  --creme-2:#F1F4F2;
  --panneau-clair:#F3F6F4;
  --ombre-clair:0 1px 2px rgba(14,20,17,.06),0 26px 50px -30px rgba(10,40,25,.38);
}
.clair{background:#FFFFFF}
.clair::before{opacity:.03}
.clair::after{display:none}
.papier{
  background:linear-gradient(178deg,#FFFFFF 0%,#FBFCFB 58%,#F4F7F5 100%);
  border-color:rgba(14,20,17,.10);
  box-shadow:inset 0 1px 0 #fff,var(--ombre-clair);
}
.pull{
  background:linear-gradient(170deg,#0F1A14 0%,#0A120E 100%);
  border:1px solid rgba(var(--sauge-rgb),.22);
  color:var(--texte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 28px 50px -26px rgba(10,30,20,.6);
  position:relative;overflow:hidden;
}
.pull::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--vert-vif),var(--vert));
}
.pull span{color:#fff;font-weight:800}
.formulaire{
  background:var(--panneau-clair);
  border:1px solid rgba(14,20,17,.09);
  box-shadow:inset 0 1px 0 #fff,var(--ombre-clair);
}
.champ input,.champ select,.champ textarea{border-color:rgba(14,20,17,.16);box-shadow:inset 0 1px 2px rgba(14,20,17,.05)}
.mtile{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 36px -20px rgba(10,30,20,.5)}
.mtile:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 30px 56px -22px rgba(10,30,20,.55)}

/* ---------- 2 · Marque secondaire : le filet du surtitre devient trois marches ---------- */
/* Elle marque le début de chaque section, rien d'autre : une seule marque, partout pareille. */
.kicker::before{
  width:22px;height:12px;opacity:1;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 9.6h7.2V12H0zM7.4 5.8h7.2v2.4H7.4zM14.8 2h7.2v2.4h-7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M0 9.6h7.2V12H0zM7.4 5.8h7.2v2.4H7.4zM14.8 2h7.2v2.4h-7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.kicker{color:var(--vert-vif)}
.clair .kicker{color:var(--vert)}
.clair .kicker::before{background:currentColor}

/* ---------- 3 · Hero : la photo respire, le titre reste fixe ---------- */
.hero-veil{
  background:
    linear-gradient(90deg,rgba(10,14,12,.94) 0%,rgba(10,14,12,.86) 30%,rgba(10,14,12,.58) 50%,rgba(10,14,12,.16) 72%,rgba(10,14,12,0) 88%),
    linear-gradient(to top,var(--noir) 0%,rgba(10,14,12,.55) 18%,rgba(10,14,12,0) 42%),
    linear-gradient(to bottom,rgba(10,14,12,.55) 0%,rgba(10,14,12,0) 22%);
}
.hero-bg img{object-position:62% 40%;transform-origin:72% 40%;animation:hero-souffle 22s ease-in-out infinite alternate}
@keyframes hero-souffle{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero h1{max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero-sub{color:rgba(237,235,229,.88)}
@media(prefers-reduced-motion:reduce){.hero-bg img{animation:none;transform:none}}

/* Téléphone : titre d'abord, bande d'image ensuite, puis le texte sur fond franc. */
@media(max-width:820px){
  .hero{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;background:var(--noir);padding-top:calc(var(--nav-h) + 22px)}
  .hero .wrap{display:contents}
  .hero h1{order:1;padding:0 clamp(20px,5vw,44px);margin-bottom:22px;max-width:none;text-shadow:none}
  .hero-bg{order:2;position:relative;inset:auto;z-index:0;height:clamp(220px,62vw,360px);overflow:hidden}
  .hero-bg img{object-position:50% 46%;animation:none;transform:none}
  .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,14,12,.25) 0%,rgba(10,14,12,0) 30%,rgba(10,14,12,0) 62%,var(--noir) 100%)}
  .hero-veil,.hero-trame{display:none}
  .hero-sub{order:3;padding:0 clamp(20px,5vw,44px);margin:18px 0 26px}
  .hero-actions{order:4;padding:0 clamp(20px,5vw,44px) 46px}
  .scroll-hint{display:none}
}

/* ---------- 4 · Les cinq accès montent comme un escalier ---------- */
@media(min-width:1120px){
  .acces-liste{align-items:start;padding-top:8px}
  .acces-item:nth-child(1){margin-top:96px}
  .acces-item:nth-child(2){margin-top:72px}
  .acces-item:nth-child(3){margin-top:48px}
  .acces-item:nth-child(4){margin-top:24px}
  .acces-item:nth-child(5){margin-top:0}
  .acces-item{
    border-top:3px solid rgba(var(--sauge-rgb),.55);
    border-radius:4px 4px 13px 13px;
    min-height:212px;
  }
  .acces-item::before{height:3px;top:-3px;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .acces-item:hover::before{transform:scaleX(1);width:100%}
  .acces-tete{margin-bottom:clamp(8px,1.4vw,18px)}
}
.acces-item i{color:var(--vert-vif)}

/* ---------- 5 · Le souffle porte maintenant l'appel aux régions ---------- */
.souffle-grille{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(26px,4vw,56px)}
.souffle-grille p{flex:1 1 520px}
.souffle-actions{display:flex;flex-wrap:wrap;gap:12px}
.cta-ghost-clair{border-color:rgba(237,235,229,.32)}
.souffle{padding:clamp(64px,8vw,112px) 0}
.souffle p{font-size:clamp(1.7rem,4vw,3.1rem);line-height:1.08;letter-spacing:-.03em;font-weight:900}
.souffle p em{color:var(--vert-vif)}
@media(max-width:620px){
  .souffle-actions{width:100%}
  .souffle-actions .cta,.souffle-actions .cta-ghost{flex:1 1 100%;justify-content:center}
}

/* ---------- 6 · Cartes de suite : une image qui montre ---------- */
.suite-carte{padding:0;overflow:hidden;gap:0}
.suite-photo{display:block;aspect-ratio:16/10;overflow:hidden;position:relative}
.suite-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1),filter .5s}
.suite-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,14,12,0) 50%,rgba(14,22,18,.85) 100%)}
.suite-carte:hover .suite-photo img{transform:scale(1.06)}
.suite-carte b,.suite-carte span:not(.suite-photo),.suite-carte i{padding-inline:clamp(20px,2.2vw,24px)}
.suite-carte b{padding-top:18px;font-size:1.12rem;margin-bottom:6px}
.suite-carte i{padding-bottom:22px;margin-top:12px}
@media(prefers-reduced-motion:reduce){.suite-carte:hover .suite-photo img{transform:none}}

/* ---------- 7 · Pages intérieures : un vrai premier écran ---------- */
.hero-page{overflow:hidden;isolation:isolate;padding-bottom:clamp(56px,7vw,96px)}
.hero-page .wrap{position:relative}
.hero-page h1{font-size:clamp(2.3rem,5.2vw,4.1rem);font-weight:900;line-height:1;letter-spacing:-.03em;max-width:16ch}
.hp-photo{
  position:absolute;top:0;right:0;bottom:0;width:min(52%,860px);z-index:-1;
  background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 32%,#000 70%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 32%,#000 70%);
  opacity:.62;
}
.hp-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--noir) 0%,rgba(10,14,12,0) 45%),linear-gradient(to bottom,rgba(10,14,12,.6) 0%,rgba(10,14,12,0) 30%)}
.hp-membre .hp-photo{background-image:url("../images/pilier-savoirfaire.jpg");background-position:50% 30%}
.hp-production .hp-photo{background-image:url("../images/pilier-production.jpg");background-position:50% 50%}
.hp-territoires .hp-photo{background-image:url("../images/pilier-territoire.jpg");background-position:50% 35%}
.hp-trame{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(var(--sauge-rgb),.16) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--sauge-rgb),.16) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(70% 90% at 0% 100%,#000 0%,transparent 70%);
          mask-image:radial-gradient(70% 90% at 0% 100%,#000 0%,transparent 70%);
}
@media(max-width:820px){
  .hp-photo{width:100%;opacity:.22;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%);mask-image:linear-gradient(180deg,#000 0%,transparent 75%)}
}

/* ---------- 8 · Rythme : deux sections de même fond ne doublent plus leurs marges ---------- */
.sec-colle{padding-top:clamp(44px,5vw,72px)}
.sec-filet{border-top:1px solid var(--ligne)}
.sombre + .sombre{padding-top:0}
.sombre + .sombre.sec-filet{padding-top:clamp(60px,8.8vh,116px)}

/* ---------- 9 · Piliers : l'étiquette en vert, sans numéro ---------- */
.pilier-num{color:var(--vert-vif);letter-spacing:.18em}

/* ---------- 10 · Survols : chaque surface cliquable réagit ---------- */
.cta-ghost{transition:transform .24s cubic-bezier(.22,1,.36,1),border-color .24s,background .24s,color .24s}
.cta-ghost:hover{transform:translateY(-2px);border-color:rgba(61,190,124,.6)}
.clair .cta-ghost:hover{border-color:var(--vert)}

/* ---------- 11 · Souffle : l'énoncé en pleine largeur, les actions dessous ---------- */
.souffle-grille{display:grid;grid-template-columns:1fr;align-items:end;gap:clamp(26px,3vw,40px)}
.souffle-grille p{max-width:22ch}
@media(min-width:1000px){
  .souffle-grille{grid-template-columns:minmax(0,1fr) auto}
  .souffle-grille p{max-width:none}
}

/* ---------- 12 · « En bref » : une phrase qui porte, deux colonnes qui précisent ---------- */
.def-grille{grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,64px);row-gap:clamp(18px,2vw,26px)}
.def-grille p{font-size:1.02rem;color:rgba(14,20,17,.74)}
.def-grille p:first-child{grid-column:1/-1;max-width:56ch;font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.45;color:var(--encre);padding-left:clamp(16px,1.6vw,22px);border-left:4px solid var(--vert-vif)}
.def-grille p:first-child b{font-weight:800}
@media(max-width:700px){.def-grille{grid-template-columns:1fr}}

/* ---------- 13 · Crédit DS Média : surligneur jaune au survol ---------- */
.dsm-link{position:relative;color:inherit;text-decoration:none;background:linear-gradient(#FED619,#FED619) no-repeat 0 100%/0 100%;transition:background-size .35s cubic-bezier(.22,1,.36,1),color .35s;padding:0 2px;border-bottom:1px solid currentColor}
.dsm-link:hover,.dsm-link:focus-visible{background-size:100% 100%;color:#111;border-bottom-color:transparent}

/* ---------- 14 · Production : le titre et sa précision côte à côte ---------- */
.result-head{max-width:none;display:grid;gap:clamp(12px,2vw,20px) clamp(28px,5vw,80px)}
.result-head .kicker{grid-column:1/-1}
.result-head h2{margin:0}
.result-head .lede{margin:0;color:rgba(14,20,17,.72)}
@media(min-width:980px){
  .result-head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end}
}

/* ---------- 15 · Relance au téléphone : la base flexible devenait une hauteur ---------- */
@media(max-width:620px){
  .relance-txt{flex:0 0 auto}
}

/* ---------- 16 · Palier grand écran : tout grandit au lieu de flotter (iMac 27" = 2560 px) ---------- */
@media(min-width:2000px){
  html{font-size:19px}
  :root{--max:1800px}
  .hero h1{font-size:6.6rem;max-width:14ch}
  .hero-sub{font-size:1.3rem;max-width:50ch}
  .acces-tete h2{font-size:2.9rem}
  .acces-item{min-height:250px}
  .acces-item b{font-size:1.05rem}
  .acces-item span{font-size:.92rem}
  .souffle p{font-size:3.4rem}
  .hp-photo{width:min(54%,1180px)}
}
@media(min-width:2400px){
  html{font-size:20px}
  :root{--max:1960px}
}

/* ---------- 17 · Titres équilibrés : aucune ligne finale orpheline ---------- */
h1,h2,h3,.souffle p{text-wrap:balance}
.souffle p em,.souffle p span{display:block;text-wrap:balance}
.acces-item i{color:#7BE3AC}
/* Les marches partagent le même plancher : le haut monte, le bas reste aligné. */
@media(min-width:1120px){
  .acces-liste{align-items:stretch}
  .acces-item{min-height:0;display:flex;flex-direction:column}
  .acces-item span{flex:1 1 auto}
}
@media(min-width:2000px){.acces-item{min-height:0}}

/* ---------- 18 · Recherche de territoire : la consigne visible, le champ défini par sa surface ---------- */
.terr-consigne{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#A8C4B5;margin:0 0 10px}
.terr-search:focus-within{border-color:var(--vert-vif);box-shadow:0 0 0 3px rgba(61,190,124,.22)}
/* Le souffle se lit en deux lignes : les actions passent dessous. */
.souffle-grille{grid-template-columns:1fr !important;justify-items:start}
.souffle-grille p{max-width:none}