/* =========================================================
   Leads Studio — feuille de style partagée
   Charte : corail #fa606b, encre #161616, gris #6a788a,
            lavé #edf2f9, ligne #ededed, PT Sans
   ========================================================= */

:root{
  --coral:#fa606b; --coral-dark:#e04b56; --coral-wash:#fff1f2;
  --ink:#161616; --grey:#6a788a; --wash:#edf2f9; --line:#ededed;
  --sans:'PT Sans',system-ui,sans-serif;
  --narrow:'PT Sans Narrow','PT Sans',sans-serif;
  --s--1:clamp(.84rem,.82rem + .1vw,.92rem);
  --s-0:clamp(1rem,.97rem + .18vw,1.09rem);
  --s-1:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --s-3:clamp(1.95rem,1.55rem + 1.9vw,2.95rem);
  --s-4:clamp(2.3rem,1.7rem + 2.9vw,3.9rem);
  --gut:clamp(1.15rem,4vw,3rem); --band:clamp(3.75rem,7.5vw,6.75rem); --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:var(--s-0);line-height:1.68}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.018em;font-weight:700}
h1{font-size:var(--s-4);letter-spacing:-.03em}
h2{font-size:var(--s-3);letter-spacing:-.025em}
h3{font-size:var(--s-1);letter-spacing:-.01em}
p{margin:0 0 1.15rem;max-width:64ch}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gut)}
.band{padding-block:var(--band)}
.lede{font-size:var(--s-1);color:var(--grey);max-width:58ch}
.alt{background:var(--wash)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.7rem 1.1rem;border-radius:8px}

/* ---------- en-tête ---------- */
.head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:2rem;min-height:74px}
.logo{font-weight:700;font-size:1.15rem;letter-spacing:-.035em;text-decoration:none}
.logo i{font-style:normal;color:var(--coral)}
.nav{display:flex;gap:1.7rem;margin-left:auto;font-size:var(--s--1)}
.nav a{text-decoration:none;padding-block:.5rem}
.nav a:hover,.nav a[aria-current]{color:var(--coral)}
.head-cta{display:flex;gap:.6rem;align-items:center}
@media(max-width:1020px){.nav{display:none}.head-cta .btn-line{display:none}}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--s--1);
  text-decoration:none;padding:.85em 1.7em;border-radius:999px;border:0;cursor:pointer;background:var(--coral);
  color:#fff;transition:background .18s ease}
.btn:hover{background:var(--coral-dark)}
.btn-lg{font-size:var(--s-0);padding:1em 2.1em}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn-line:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--wash)}
.btn-hollow{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn-hollow:hover{background:#fff;color:var(--ink)}

/* ---------- hero de page intérieure ---------- */
.hero{background:var(--wash);padding-block:clamp(2.5rem,5.5vw,4.5rem) clamp(3rem,6vw,5rem)}
.crumb{font-size:var(--s--1);color:var(--grey);margin-bottom:1.6rem}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--coral)}
.hero h1{max-width:17ch}
.hero .sub{margin:1.5rem 0 2.2rem;font-size:var(--s-1);max-width:52ch}
.acts{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(max-width:940px){.hero-split{grid-template-columns:1fr}}
.tag{display:inline-block;background:var(--coral);color:#fff;font-weight:700;font-size:.74rem;
  padding:.4rem .85rem;border-radius:999px;margin-bottom:1.2rem}
.live{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border-radius:999px;
  padding:.4rem .95rem .4rem .7rem;font-size:.8rem;font-weight:700;margin-bottom:1.5rem;
  box-shadow:0 8px 22px -14px rgba(22,22,22,.4)}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- statistiques ---------- */
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.4rem);margin-top:3rem}
@media(max-width:820px){.stats-in{grid-template-columns:repeat(2,1fr)}}
.stat b{display:block;font-family:var(--narrow);font-size:clamp(2.4rem,4.5vw,3.5rem);line-height:.95;
  letter-spacing:-.02em;color:var(--coral)}
.stat span{display:block;margin-top:.5rem;color:var(--grey);font-size:var(--s--1);max-width:24ch}

/* ---------- moitié / moitié ---------- */
.ff{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:880px){.ff{grid-template-columns:1fr}}
.ff-media img{width:100%;border-radius:var(--r)}

/* ---------- listes cochées ---------- */
.checks{list-style:none;margin:1.8rem 0 2rem;padding:0}
.checks li{padding-left:2.1rem;position:relative;margin-bottom:.85rem;color:var(--grey);max-width:56ch}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:19px;height:19px;border-radius:50%;
  background:var(--coral-wash);box-shadow:inset 0 0 0 2px var(--coral)}
.checks li::after{content:"";position:absolute;left:5.5px;top:.78em;width:8px;height:4.5px;
  border-left:2px solid var(--coral);border-bottom:2px solid var(--coral);transform:rotate(-45deg)}

/* ---------- problématiques ---------- */
.pains{list-style:none;margin:2.8rem 0 0;padding:0;border-top:1px solid var(--line)}
.pains li{padding:1.7rem 0 1.7rem 3.4rem;border-bottom:1px solid var(--line);position:relative;max-width:80ch}
.pains li::before{content:"";position:absolute;left:.35rem;top:2.35rem;width:1.5rem;height:2px;background:var(--coral)}
.pains strong{display:block;font-size:var(--s-1);font-weight:700;letter-spacing:-.012em;margin-bottom:.4rem}
.pains p{margin:0;color:var(--grey)}

/* ---------- cartes en grille ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin-top:3rem}
.card-b{border:1px solid var(--line);border-radius:var(--r);padding:1.9rem 1.6rem}
.card-b i{display:grid;place-content:center;width:44px;height:44px;border-radius:12px;
  background:var(--coral-wash);color:var(--coral);margin-bottom:1.2rem}
.card-b h3{margin-bottom:.5rem}
.card-b p{margin:0;color:var(--grey);font-size:.95rem}

/* ---------- étapes numérotées ---------- */
.steps{list-style:none;counter-reset:m;margin:3rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.8rem}
.steps li{counter-increment:m;padding-top:2.9rem;border-top:2px solid var(--line);position:relative}
.steps li::before{content:counter(m);position:absolute;top:-21px;left:0;width:42px;height:42px;border-radius:50%;
  background:var(--coral);color:#fff;display:grid;place-content:center;font-weight:700}
.steps p{margin:0;color:var(--grey);font-size:.95rem}
.dark .steps li{border-top-color:#333}
.dark .steps p{color:#a9b3bf}

/* ---------- section sombre ---------- */
.dark{background:var(--ink);color:#fff}
.dark .lede{color:#a9b3bf}
.dark h2,.dark h3{color:#fff}

/* ---------- reçu de consentement ---------- */
.receipt{background:#fff;border:1px solid #dbe3ee;border-radius:var(--r);padding:1.7rem;font-size:.9rem}
.receipt h4{font-size:.8rem;color:var(--grey);margin-bottom:1.1rem}
.receipt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.1rem}
.receipt dt{color:var(--grey);font-size:.82rem}
.receipt dd{margin:0;font-weight:700;font-size:.88rem}
.receipt .consent{margin:1.2rem 0 0;padding-top:1.1rem;border-top:1px dashed #dbe3ee;
  font-size:.82rem;color:var(--grey);line-height:1.55;max-width:none}

/* ---------- encadré latéral ---------- */
.aside{border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:0 var(--r) var(--r) 0;
  padding:1.7rem 1.9rem;margin-top:3rem}
.aside h3{margin-bottom:.6rem}
.aside p:last-of-type{margin-bottom:0}
.dark .aside{border-color:#2d2d2d;border-left-color:var(--coral)}
.dark .aside p{color:#a9b3bf}

/* ---------- équipe ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
.mate img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;border-radius:12px;background:#dfe6ef}
.mate .noimg{width:100%;aspect-ratio:1/1;border-radius:12px;background:#dfe6ef;display:grid;place-content:center;
  font-family:var(--narrow);font-size:2.4rem;color:#9aa5b1}
.mate b{display:block;margin-top:.9rem;font-size:1.02rem}
.mate span{display:block;font-size:.78rem;color:var(--grey);line-height:1.45}

/* ---------- vidéo / chaînes ---------- */
.media-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:1.6rem;margin-top:3rem}
@media(max-width:880px){.media-grid{grid-template-columns:1fr}}
.video{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none;border:1px solid var(--line)}
.video img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--wash)}
.video .play{position:absolute;inset:0 0 auto;height:56.25%;display:grid;place-content:center}
.video .play span{width:68px;height:68px;border-radius:50%;background:var(--coral);display:grid;place-content:center;
  box-shadow:0 12px 30px -10px rgba(22,22,22,.5);transition:transform .18s ease}
.video:hover .play span{transform:scale(1.07)}
.video .cap{display:block;padding:1.3rem 1.5rem 1.5rem}
.video .cap b{display:block;font-size:1.06rem;line-height:1.3}
.video .cap em{font-style:normal;display:block;margin-top:.5rem;font-size:var(--s--1);color:var(--grey)}
.chans{display:grid;gap:1.6rem}
.chan{border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;text-decoration:none;display:block;
  transition:border-color .18s ease}
.chan:hover{border-color:var(--coral)}
.chan .yt{width:34px;height:24px;border-radius:6px;background:var(--coral);display:grid;place-content:center;margin-bottom:1rem}
.chan b{display:block;font-size:1.02rem}
.chan strong{display:block;font-family:var(--narrow);font-size:2rem;line-height:1.1;color:var(--coral);margin-top:.5rem}
.chan span{font-size:var(--s--1);color:var(--grey)}
.news{margin-top:2rem;padding:1.5rem 1.7rem;background:var(--wash);border-radius:var(--r);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.news p{margin:0;max-width:52ch}

/* ---------- formulaire ---------- */
.conv{background:var(--coral);color:#fff}
.conv-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:880px){.conv-in{grid-template-columns:1fr}}
.conv h2{max-width:16ch}
.conv p{color:#ffe4e6}
.conv .checks li{color:#ffe4e6}
.conv .checks li::before{background:rgba(255,255,255,.25);box-shadow:inset 0 0 0 2px #fff}
.conv .checks li::after{border-color:#fff}
.panel{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(1.5rem,3.5vw,2.4rem)}
.pstepbar{display:flex;align-items:center;gap:.7rem;font-size:var(--s--1);color:var(--grey);margin-bottom:1.6rem}
.pstepbar .track{flex:1;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.pstepbar .track i{display:block;width:50%;height:100%;background:var(--coral)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.field{margin-bottom:1rem}
.field label{display:block;font-size:var(--s--1);font-weight:700;margin-bottom:.35rem}
.field input,.field select{width:100%;padding:.8rem .95rem;font:inherit;font-size:.97rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:9px}
.field input:focus,.field select:focus{border-color:var(--coral);outline:none}
.panel .btn{width:100%;margin-top:.5rem}
.legal{font-size:.76rem;color:var(--grey);margin:.9rem 0 0;line-height:1.55}

/* ---------- appel final ---------- */
.final{background:var(--ink);color:#fff;text-align:center}
.final h2{max-width:24ch;margin-inline:auto}
.final p{color:#a9b3bf;margin-inline:auto;max-width:48ch}
.final-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

/* ---------- pied de page ---------- */
.foot{background:#0f0f0f;color:#9aa3ad;padding-block:4rem 2.2rem;font-size:var(--s--1)}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
@media(max-width:860px){.foot-in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-in{grid-template-columns:1fr}}
.foot h4{color:#fff;font-size:.9rem;margin-bottom:1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.55rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--coral)}
.foot-base{border-top:1px solid #262626;margin-top:3rem;padding-top:1.6rem;font-size:.76rem;color:#6e767f}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important}
  .live .dot{animation:none}
}

/* =========================================================
   Motion & compositions — ajout
   ========================================================= */

/* ---------- révélation au scroll ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.7,.3,1),transform .6s cubic-bezier(.22,.7,.3,1)}
.js [data-reveal].seen{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}

/* ---------- fiche prospect animée (hero marché) ---------- */
.fiche-wrap{position:relative;max-width:420px;margin-left:auto}
@media(max-width:940px){.fiche-wrap{margin-inline:auto;margin-top:2.5rem}}
.fiche{background:#fff;border-radius:16px;padding:1.5rem 1.6rem 1.4rem;
  box-shadow:0 26px 60px -34px rgba(22,22,22,.55);position:relative;overflow:hidden}
.fiche-top{display:flex;align-items:center;gap:.6rem;padding-bottom:1rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--line);font-size:.78rem;font-weight:700;color:var(--grey)}
.fiche-top .pip{width:8px;height:8px;border-radius:50%;background:var(--coral);
  animation:blink 2s ease-in-out infinite}
.fiche-top .src{margin-left:auto;font-weight:400;font-size:.72rem}
.fiche-row{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:baseline;
  padding:.52rem 0;border-bottom:1px dashed #e9edf3;opacity:0;animation:fillrow 9s ease-out infinite}
.fiche-row:nth-child(2){animation-delay:.5s}
.fiche-row:nth-child(3){animation-delay:1.1s}
.fiche-row:nth-child(4){animation-delay:1.7s}
.fiche-row:nth-child(5){animation-delay:2.3s}
.fiche-row dt{font-size:.76rem;color:var(--grey)}
.fiche-row dd{margin:0;font-size:.86rem;font-weight:700;text-align:right}
@keyframes fillrow{
  0%,4%{opacity:0;transform:translateX(-8px)}
  9%,66%{opacity:1;transform:none}
  74%,100%{opacity:.18;transform:none}
}
.fiche-consent{margin-top:1.1rem;padding:.75rem .9rem;border-radius:10px;background:var(--coral-wash);
  display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:var(--ink);
  opacity:0;animation:stamp 9s ease-out infinite;animation-delay:2.9s}
.fiche-consent svg{flex:none;color:var(--coral)}
.fiche-consent b{font-size:.75rem}
@keyframes stamp{
  0%,32%{opacity:0;transform:scale(1.25)}
  36%,66%{opacity:1;transform:scale(1)}
  74%,100%{opacity:.18;transform:scale(1)}
}
.fiche-sent{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:#fff;
  padding:.85rem 1.6rem;display:flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:700;
  transform:translateY(100%);animation:sent 9s cubic-bezier(.22,.7,.3,1) infinite;animation-delay:3.9s}
.fiche-sent .ms{margin-left:auto;font-weight:400;opacity:.62;font-size:.74rem}
@keyframes sent{
  0%,42%{transform:translateY(100%)}
  48%,74%{transform:translateY(0)}
  82%,100%{transform:translateY(100%)}
}
.fiche-halo{position:absolute;inset:-14px;border-radius:26px;border:2px solid var(--coral);
  opacity:0;pointer-events:none;animation:halo 9s ease-out infinite;animation-delay:3.9s}
@keyframes halo{0%,44%{opacity:0;transform:scale(.96)}50%{opacity:.45}62%,100%{opacity:0;transform:scale(1.03)}}
.fiche-note{margin:1rem 0 0;font-size:.76rem;color:var(--grey);text-align:right}

/* ---------- compteurs ---------- */
.stat b[data-count]{font-variant-numeric:tabular-nums}

/* ---------- hero marché : pastille secteur ---------- */
.sector{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border-radius:999px;
  padding:.35rem 1rem .35rem .4rem;font-size:.78rem;font-weight:700;margin-bottom:1.3rem;
  box-shadow:0 8px 22px -16px rgba(22,22,22,.4)}
.sector img{width:26px;height:26px;object-fit:contain}

/* ---------- cartes : relief au survol ---------- */
.card-b{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;background:#fff}
.card-b:hover{border-color:#dbe3ee;transform:translateY(-3px);box-shadow:0 18px 36px -26px rgba(22,22,22,.34)}
.dark .card-b{background:#1f1f1f;border-color:#2d2d2d}
.dark .card-b p{color:#a9b3bf}

/* ---------- problématiques : barre qui se déploie ---------- */
.pains li::before{width:0;transition:width .5s cubic-bezier(.22,.7,.3,1) .15s}
.pains li.seen::before{width:1.5rem}

/* ---------- équipe : survol ---------- */
.mate img,.mate .noimg{transition:transform .25s ease,filter .25s ease;filter:saturate(.92)}
.mate:hover img{transform:translateY(-4px) scale(1.015);filter:saturate(1)}

/* ---------- étapes : trait de progression ---------- */
.steps li{position:relative}
.steps li::after{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--coral);
  transition:width .7s cubic-bezier(.22,.7,.3,1)}
.steps li.seen::after{width:100%}
.steps li:nth-child(2)::after{transition-delay:.12s}
.steps li:nth-child(3)::after{transition-delay:.24s}
.steps li:nth-child(4)::after{transition-delay:.36s}
.steps li:nth-child(5)::after{transition-delay:.48s}

/* ---------- conformité : reçu qui se tamponne ---------- */
.receipt{position:relative}
.receipt .seal{position:absolute;top:1.2rem;right:1.3rem;width:74px;height:74px;border-radius:50%;
  border:2px dashed var(--coral);color:var(--coral);display:grid;place-content:center;text-align:center;
  font-size:.58rem;font-weight:700;line-height:1.25;transform:rotate(-12deg) scale(1.3);opacity:0}
.receipt.seen .seal{animation:seal .7s cubic-bezier(.3,1.4,.5,1) .55s forwards}
@keyframes seal{to{opacity:1;transform:rotate(-12deg) scale(1)}}

/* ---------- vague de séparation ---------- */
.wave{display:block;width:100%;height:42px}
.wave path{fill:var(--wash)}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .fiche-row,.fiche-consent,.fiche-sent,.fiche-halo,.fiche-top .pip{animation:none!important}
  .fiche-row,.fiche-consent{opacity:1!important;transform:none!important}
  .fiche-sent{transform:none!important}
  .fiche-halo{display:none}
  .pains li::before{width:1.5rem!important;transition:none}
  .steps li::after{width:100%!important;transition:none}
  .receipt .seal{opacity:1;transform:rotate(-12deg);animation:none!important}
  .mate img,.mate .noimg{transition:none}
}

/* ---------- ajouts page d'accueil ---------- */
.hero-pts{list-style:none;margin:1.6rem 0 2.2rem;padding:0;max-width:50ch}
.hero-pts li{padding-left:2.2rem;position:relative;margin-bottom:1rem;font-size:var(--s-1);line-height:1.5}
.hero-pts li::before{content:"";position:absolute;left:0;top:.3em;width:21px;height:21px;border-radius:50%;
  background:var(--coral);box-shadow:0 6px 16px -8px rgba(250,96,107,.9)}
.hero-pts li::after{content:"";position:absolute;left:6px;top:.62em;width:9px;height:5px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg)}

.hero-media{position:relative}
.viz{width:100%;height:auto;display:block}
.viz .rail{fill:none;stroke:#cfdae8;stroke-width:1.5;stroke-dasharray:4 5}
.viz .rail-out{stroke:#b9c9dc;stroke-dasharray:none;stroke-width:2}
.viz .node{fill:#fff;stroke:#d7e1ed;stroke-width:1.5}
.viz .node-core{fill:var(--ink);stroke:none}
.viz .lbl{font-family:var(--sans);font-size:11px;fill:var(--grey);font-weight:700}
.viz .lbl-w{fill:#fff}
.viz .num{font-family:var(--narrow);font-size:30px;fill:var(--coral)}
.bead{offset-rotate:0deg;animation:travel 3.4s linear infinite}
.bead circle,.out circle{fill:var(--coral)}
.b1{offset-path:path("M 78 78 C 160 78 180 140 248 200")}
.b2{offset-path:path("M 78 200 L 248 200")}
.b3{offset-path:path("M 78 322 C 160 322 180 260 248 200")}
.b1.d2{animation-delay:-1.1s}.b1.d3{animation-delay:-2.3s}
.b2.d2{animation-delay:-1.7s}.b2.d3{animation-delay:-2.8s}
.b3.d2{animation-delay:-.6s}.b3.d3{animation-delay:-2s}
.out{offset-path:path("M 316 200 L 452 200");animation:travel-out 1.5s linear infinite}
.out.o2{animation-delay:-.5s}.out.o3{animation-delay:-1s}
@keyframes travel{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes travel-out{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
.halo{fill:none;stroke:var(--coral);stroke-width:2;animation:ring 3.4s ease-out infinite}
@keyframes ring{0%{r:34;opacity:.55}70%,100%{r:56;opacity:0}}
.crm-row{animation:land 3.4s ease-out infinite}
.crm-row.r2{animation-delay:-1.13s}.crm-row.r3{animation-delay:-2.26s}
@keyframes land{0%{opacity:0;transform:translateY(7px)}10%{opacity:1;transform:translateY(0)}88%{opacity:1}100%{opacity:.25}}

.logos{border-bottom:1px solid var(--line);padding-block:2.6rem}
.logos p{text-align:center;color:var(--grey);font-size:var(--s--1);margin:0 auto 1.7rem;max-width:none}
.logos-row{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;justify-content:center;align-items:center}
.logos-row span{font-family:var(--narrow);font-size:1.25rem;color:#9aa5b1;text-transform:uppercase;white-space:nowrap}

.phase-no{display:inline-block;font-family:var(--narrow);font-size:1.05rem;color:var(--coral);
  letter-spacing:.04em;margin-bottom:.9rem}
.plats{font-size:.82rem;color:var(--grey);margin:0 0 1.6rem}

.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.4rem;margin-top:3rem}
.adv{background:#1f1f1f;border:1px solid #2d2d2d;border-radius:var(--r);padding:1.8rem 1.6rem;
  transition:border-color .2s ease,transform .2s ease}
.adv:hover{border-color:#3d3d3d;transform:translateY(-3px)}
.adv i{display:grid;place-content:center;width:42px;height:42px;border-radius:11px;
  background:rgba(250,96,107,.14);color:var(--coral);margin-bottom:1.1rem}
.adv h3{color:#fff;margin-bottom:.8rem}
.adv ul{list-style:none;margin:0;padding:0;font-size:.92rem;color:#a9b3bf}
.adv li{margin-bottom:.55rem;padding-left:1rem;position:relative;line-height:1.55}
.adv li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--coral)}

.sect{background:var(--wash)}
.sect .lede{color:var(--grey)}
.sect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
@media(max-width:900px){.sect-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sect-grid{grid-template-columns:1fr}}
.fam{background:#fff;border:1px solid #dbe3ee;border-radius:var(--r);padding:1.8rem 1.6rem;
  text-decoration:none;display:block;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.fam:hover{border-color:var(--coral);transform:translateY(-3px);box-shadow:0 18px 36px -26px rgba(22,22,22,.34)}
.fam img{width:46px;height:46px;object-fit:contain;margin-bottom:1.1rem}
.fam h3{margin-bottom:.5rem}
.fam p{margin:0;font-size:.92rem;color:var(--grey)}

.after{margin-top:3.5rem;background:var(--wash);border-radius:var(--r);padding:2rem 2.2rem}
.after h3{margin-bottom:1.6rem}
.after-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:820px){.after-line{grid-template-columns:repeat(2,1fr)}}
.after-line li{border-top:2px solid var(--coral);padding-top:.9rem}
.after-line b{display:block;font-family:var(--narrow);font-size:1.3rem;color:var(--coral);margin-bottom:.35rem}
.after-line span{font-size:.88rem;color:var(--grey);line-height:1.5}

@media(prefers-reduced-motion:reduce){
  .bead,.out,.halo,.crm-row{animation:none!important}
  .bead,.out{opacity:1}
  .b1{offset-distance:62%}.b2{offset-distance:48%}.b3{offset-distance:70%}
  .out{offset-distance:55%}
  .halo{display:none}
}

/* ---------- offre : 8 points ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:3rem}
@media(max-width:1000px){.offer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.offer-grid{grid-template-columns:1fr}}
.offer{background:#fff;padding:1.6rem 1.5rem;transition:background .2s ease}
.offer:hover{background:var(--wash)}
.offer b{display:block;font-size:1rem;margin-bottom:.45rem}
.offer span{font-size:.88rem;color:var(--grey);line-height:1.55}

/* ---------- trois dispositifs ---------- */
.disp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
@media(max-width:880px){.disp-grid{grid-template-columns:1fr}}
.disp{background:#1f1f1f;border:1px solid #2d2d2d;border-radius:var(--r);padding:1.9rem 1.7rem}
.disp.feat{background:var(--coral);border-color:var(--coral)}
.disp-tag{display:inline-block;font-family:var(--narrow);font-size:1.15rem;color:var(--coral);
  letter-spacing:.03em;text-transform:uppercase;margin-bottom:1rem}
.disp.feat .disp-tag{color:#fff}
.disp p{margin:0 0 .9rem;color:#a9b3bf;font-size:.95rem}
.disp.feat p{color:#ffe6e8}
.disp-kpi{margin-top:1.2rem!important;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.28);
  color:#fff!important;font-size:.88rem!important}
.disp-kpi b{font-family:var(--narrow);font-size:1.9rem;display:block;line-height:1;margin-bottom:.3rem}

/* ---------- conformité ---------- */
.conf{background:var(--wash)}
.conf h2{max-width:24ch}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:3rem}
@media(max-width:900px){.rules{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.rules{grid-template-columns:1fr}}
.rule{background:#fff;border:1px solid #dbe3ee;border-radius:var(--r);padding:1.5rem 1.4rem}
.rule b{display:block;font-size:.95rem;margin-bottom:.5rem}
.rule span{font-size:.86rem;color:var(--grey);line-height:1.55}

.proof-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,4vw,3.5rem);
  margin-top:3.5rem;align-items:start}
@media(max-width:940px){.proof-split{grid-template-columns:1fr}}

.record{background:#fff;border:1px solid #dbe3ee;border-radius:var(--r);overflow:hidden;
  box-shadow:0 24px 54px -34px rgba(22,22,22,.42)}
.rec-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.4rem;background:var(--ink);color:#fff;
  font-size:.88rem;font-weight:700}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}
.rec-badge{margin-left:auto;font-size:.68rem;font-weight:700;background:rgba(250,96,107,.2);
  color:#ffb3b9;padding:.25rem .6rem;border-radius:999px;letter-spacing:.03em}
.rec-body{margin:0;padding:1.3rem 1.4rem;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;
  font-size:.86rem;border-bottom:1px solid var(--line)}
.rec-body dt{color:var(--grey);font-size:.79rem;white-space:nowrap}
.rec-body dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.rec-body dd span{font-weight:400;color:var(--grey);font-size:.76rem}
.rec-body .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;font-weight:400;
  background:var(--wash);padding:.1rem .4rem;border-radius:4px;display:inline-block}
.rec-consent{padding:1.3rem 1.4rem;background:var(--coral-wash);border-bottom:1px solid var(--line)}
.rec-consent b{display:block;font-size:.74rem;color:var(--coral-dark);margin-bottom:.6rem;letter-spacing:.03em}
.rec-consent p{margin:0;font-size:.82rem;line-height:1.6;max-width:none}
.rec-chan{width:100%;border-collapse:collapse;font-size:.83rem}
.rec-chan caption{text-align:left;padding:1.1rem 1.4rem .5rem;font-size:.74rem;color:var(--grey);
  font-weight:700;letter-spacing:.03em}
.rec-chan th{text-align:left;font-weight:400;padding:.45rem 1.4rem;color:var(--ink)}
.rec-chan td{text-align:right;padding:.45rem 1.4rem;color:var(--grey)}
.rec-chan td.ok{color:var(--coral-dark);font-weight:700}
.rec-foot{margin:0;padding:1.1rem 1.4rem 1.3rem;font-size:.73rem;color:var(--grey);line-height:1.55;
  border-top:1px solid var(--line);max-width:none}

.never{margin-top:3.5rem;background:var(--ink);color:#fff;border-radius:var(--r);padding:2.2rem 2.3rem}
.never h3{color:#fff;margin-bottom:.9rem}
.never-int{color:#a9b3bf;font-size:.95rem;max-width:74ch}
.nevers{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem 2rem}
@media(max-width:760px){.nevers{grid-template-columns:1fr}}
.nevers li{padding-left:1.9rem;position:relative;font-size:.92rem;color:#c8cfd6;line-height:1.5}
.nevers li::before,.nevers li::after{content:"";position:absolute;left:3px;top:.62em;width:13px;height:2px;
  background:var(--coral);border-radius:1px}
.nevers li::before{transform:rotate(45deg)}
.nevers li::after{transform:rotate(-45deg)}

.regimes{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.5rem}
@media(max-width:820px){.regimes{grid-template-columns:1fr}}
.reg{background:#fff;border:1px solid #dbe3ee;border-radius:var(--r);padding:1.7rem 1.6rem;
  border-top:4px solid #b9c9dc}
.reg.warn{border-top-color:var(--coral)}
.reg b{display:block;font-size:1.02rem;margin-bottom:.45rem}
.reg-sec{display:block;font-size:.8rem;color:var(--coral-dark);font-weight:700;margin-bottom:.9rem}
.reg p{margin:0;font-size:.9rem;color:var(--grey)}

/* ---------- cas clients ---------- */
.case{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2.5rem}
.case-head{padding:1.9rem 2rem 1.6rem;background:var(--wash)}
.case-tag{display:inline-block;font-size:.72rem;font-weight:700;color:#fff;background:var(--coral);
  padding:.28rem .8rem;border-radius:999px;margin-bottom:.9rem}
.case-head h3{font-size:clamp(1.25rem,1.05rem + .7vw,1.65rem);margin-bottom:.6rem}
.case-head p{margin:0;color:var(--grey)}
.case-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
@media(max-width:700px){.case-kpis{grid-template-columns:1fr}}
.case-kpis div{background:#fff;padding:1.5rem 1.7rem}
.case-kpis b{display:block;font-family:var(--narrow);font-size:2.3rem;line-height:1;color:var(--coral);
  letter-spacing:-.02em}
.case-kpis span{display:block;margin-top:.45rem;font-size:.85rem;color:var(--grey);line-height:1.5}
.case-body{padding:1.9rem 2rem}
.case-body p{font-size:.95rem}
.case-body p:last-child{margin-bottom:0}
.case-body b{color:var(--ink)}

/* ---------- funnels (pages marché) ---------- */
.funnels{display:grid;gap:1.6rem;margin-top:3rem}
.funnel{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.funnel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  padding:1.1rem 1.6rem;background:var(--wash);border-bottom:1px solid var(--line)}
.funnel-disp{font-size:.72rem;font-weight:700;color:#fff;background:var(--coral);
  padding:.26rem .75rem;border-radius:999px}
.funnel-head b{font-size:1.05rem}
.funnel-body{padding:1.6rem}
.funnel-acc{font-size:var(--s-1);font-weight:700;margin-bottom:.7rem;max-width:56ch}
.funnel-sub{color:var(--grey);font-size:.93rem;max-width:70ch}
.funnel-lab{font-size:.72rem;font-weight:700;color:var(--coral-dark);letter-spacing:.04em;
  margin:1.5rem 0 .7rem}
.funnel-creas{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
.funnel-creas li{background:var(--wash);border-radius:10px;padding:.9rem 1.1rem;
  font-size:.88rem;line-height:1.5;color:var(--ink)}
.funnel-note{margin:1.4rem 0 0;font-size:.8rem;color:var(--grey);font-style:italic}

/* ---------- liste de preuve ---------- */
.preuve-list{list-style:none;margin:2rem 0 0;padding:0}
.preuve-list li{padding-left:1.9rem;position:relative;margin-bottom:.85rem;
  color:var(--grey);font-size:.94rem;max-width:62ch;line-height:1.55}
.preuve-list li b{color:var(--ink)}
.preuve-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  background:var(--coral);border-radius:2px}

/* ---------- encart 48 h ---------- */
.engage{margin-top:2.2rem;background:var(--ink);color:#fff;border-radius:var(--r);
  padding:1.6rem 1.8rem;display:flex;align-items:center;gap:1.4rem}
.engage b{font-family:var(--narrow);font-size:3rem;line-height:1;color:var(--coral);flex:none}
.engage span{font-size:.92rem;color:#a9b3bf;line-height:1.55}
.engage.big{margin-top:0}
.engage.big b{font-size:4.5rem}

/* ---------- alerte régime spécifique ---------- */
.aside.alert{border-left-color:var(--coral);background:var(--coral-wash);border-color:#f7c9cd}
.aside.alert h3{color:var(--coral-dark)}

/* ---------- piliers (page méthode) ---------- */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media(max-width:1000px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pillars{grid-template-columns:1fr}}
.pil{background:#fff;padding:1.5rem 1.4rem}
.pil b{display:block;font-size:.97rem;margin-bottom:.4rem}
.pil span{font-size:.86rem;color:var(--grey);line-height:1.55}

/* ---------- ajouts page d'accueil ---------- */
.hero-pts{list-style:none;margin:1.6rem 0 2.2rem;padding:0;max-width:50ch}
.hero-pts li{padding-left:2.2rem;position:relative;margin-bottom:1rem;font-size:var(--s-1);line-height:1.5}
.hero-pts li::before{content:"";position:absolute;left:0;top:.3em;width:21px;height:21px;border-radius:50%;
  background:var(--coral);box-shadow:0 6px 16px -8px rgba(250,96,107,.9)}
.hero-pts li::after{content:"";position:absolute;left:6px;top:.62em;width:9px;height:5px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg)}

.hero-media{position:relative}
.viz{width:100%;height:auto;display:block}
.viz .rail{fill:none;stroke:#cfdae8;stroke-width:1.5;stroke-dasharray:4 5}
.viz .rail-out{stroke:#b9c9dc;stroke-dasharray:none;stroke-width:2}
.viz .node{fill:#fff;stroke:#d7e1ed;stroke-width:1.5}
.viz .node-core{fill:var(--ink);stroke:none}
.viz .lbl{font-family:var(--sans);font-size:11px;fill:var(--grey);font-weight:700}
.viz .lbl-w{fill:#fff}
.viz .num{font-family:var(--narrow);font-size:30px;fill:var(--coral)}
.bead{offset-rotate:0deg;animation:travel 3.4s linear infinite}
.bead circle,.out circle{fill:var(--coral)}
.b1{offset-path:path("M 78 78 C 160 78 180 140 248 200")}
.b2{offset-path:path("M 78 200 L 248 200")}
.b3{offset-path:path("M 78 322 C 160 322 180 260 248 200")}
.b1.d2{animation-delay:-1.1s}.b1.d3{animation-delay:-2.3s}
.b2.d2{animation-delay:-1.7s}.b2.d3{animation-delay:-2.8s}
.b3.d2{animation-delay:-.6s}.b3.d3{animation-delay:-2s}
.out{offset-path:path("M 316 200 L 452 200");animation:travel-out 1.5s linear infinite}
.out.o2{animation-delay:-.5s}.out.o3{animation-delay:-1s}
@keyframes travel{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes travel-out{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
.halo{fill:none;stroke:var(--coral);stroke-width:2;animation:ring 3.4s ease-out infinite}
@keyframes ring{0%{r:34;opacity:.55}70%,100%{r:56;opacity:0}}
.crm-row{animation:land 3.4s ease-out infinite}
.crm-row.r2{animation-delay:-1.13s}.crm-row.r3{animation-delay:-2.26s}
@keyframes land{0%{opacity:0;transform:translateY(7px)}10%{opacity:1;transform:translateY(0)}88%{opacity:1}100%{opacity:.25}}

.logos{border-bottom:1px solid var(--line);padding-block:2.6rem}
.logos p{text-align:center;color:var(--grey);font-size:var(--s--1);margin:0 auto 1.7rem;max-width:none}
.logos-row{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;justify-content:center;align-items:center}
.logos-row span{font-family:var(--narrow);font-size:1.25rem;color:#9aa5b1;text-transform:uppercase;white-space:nowrap}

.phase-no{display:inline-block;font-family:var(--narrow);font-size:1.05rem;color:var(--coral);
  letter-spacing:.04em;margin-bottom:.9rem}
.plats{font-size:.82rem;color:var(--grey);margin:0 0 1.6rem}

.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.4rem;margin-top:3rem}
.adv{background:#1f1f1f;border:1px solid #2d2d2d;border-radius:var(--r);padding:1.8rem 1.6rem;
  transition:border-color .2s ease,transform .2s ease}
.adv:hover{border-color:#3d3d3d;transform:translateY(-3px)}
.adv i{display:grid;place-content:center;width:42px;height:42px;border-radius:11px;
  background:rgba(250,96,107,.14);color:var(--coral);margin-bottom:1.1rem}
.adv h3{color:#fff;margin-bottom:.8rem}
.adv ul{list-style:none;margin:0;padding:0;font-size:.92rem;color:#a9b3bf}
.adv li{margin-bottom:.55rem;padding-left:1rem;position:relative;line-height:1.55}
.adv li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--coral)}

.sect{background:var(--wash)}
.sect .lede{color:var(--grey)}
.sect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
@media(max-width:900px){.sect-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sect-grid{grid-template-columns:1fr}}
.fam{background:#fff;border:1px solid #dbe3ee;border-radius:var(--r);padding:1.8rem 1.6rem;
  text-decoration:none;display:block;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.fam:hover{border-color:var(--coral);transform:translateY(-3px);box-shadow:0 18px 36px -26px rgba(22,22,22,.34)}
.fam img{width:46px;height:46px;object-fit:contain;margin-bottom:1.1rem}
.fam h3{margin-bottom:.5rem}
.fam p{margin:0;font-size:.92rem;color:var(--grey)}

.after{margin-top:3.5rem;background:var(--wash);border-radius:var(--r);padding:2rem 2.2rem}
.after h3{margin-bottom:1.6rem}
.after-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:820px){.after-line{grid-template-columns:repeat(2,1fr)}}
.after-line li{border-top:2px solid var(--coral);padding-top:.9rem}
.after-line b{display:block;font-family:var(--narrow);font-size:1.3rem;color:var(--coral);margin-bottom:.35rem}
.after-line span{font-size:.88rem;color:var(--grey);line-height:1.5}

@media(prefers-reduced-motion:reduce){
  .bead,.out,.halo,.crm-row{animation:none!important}
  .bead,.out{opacity:1}
  .b1{offset-distance:62%}.b2{offset-distance:48%}.b3{offset-distance:70%}
  .out{offset-distance:55%}
  .halo{display:none}
}

/* ---------- offre : 8 points ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:3rem}
@media(max-width:1000px){.offer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.offer-grid{grid-template-columns:1fr}}
.offer{background:#fff;padding:1.6rem 1.5rem;transition:background .2s ease}
.offer:hover{background:var(--wash)}
.offer b{display:block;font-size:1rem;margin-bottom:.45rem}
.offer span{font-size:.88rem;color:var(--grey);line-height:1.55}

/* ---------- trois dispositifs ---------- */
.disp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
@media(max-width:880px){.disp-grid{grid-template-columns:1fr}}
.disp{background:#1f1f1f;border:1px solid #2d2d2d;border-radius:var(--r);padding:1.9rem 1.7rem}
.disp.feat{background:var(--coral);border-color:var(--coral)}
.disp-tag{display:inline-block;font-family:var(--narrow);font-size:1.15rem;color:var(--coral);
  letter-spacing:.03em;text-transform:uppercase;margin-bottom:1rem}
.disp.feat .disp-tag{color:#fff}
.disp p{margin:0 0 .9rem;color:#a9b3bf;font-size:.95rem}
.disp.feat p{color:#ffe6e8}
.disp-kpi{margin-top:1.2rem!important;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.28);
  color:#fff!important;font-size:.88rem!important}
.disp-kpi b{font-family:var(--narrow);font-size:1.9rem;display:block;line-height:1;margin-bottom:.3rem}

/* ---------- conformité ---------- */
.conf{background:var(--wash)}
.conf h2{max-width:24ch}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:3rem}
@media(max-width:900px){.rules{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.rules{grid-template-columns:1fr}}
.rule{background:#fff;border:1px solid #dbe3ee;border-radius:var(--r);padding:1.5rem 1.4rem}
.rule b{display:block;font-size:.95rem;margin-bottom:.5rem}
.rule span{font-size:.86rem;color:var(--grey);line-height:1.55}

.proof-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,4vw,3.5rem);
  margin-top:3.5rem;align-items:start}
@media(max-width:940px){.proof-split{grid-template-columns:1fr}}

.record{background:#fff;border:1px solid #dbe3ee;border-radius:var(--r);overflow:hidden;
  box-shadow:0 24px 54px -34px rgba(22,22,22,.42)}
.rec-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.4rem;background:var(--ink);color:#fff;
  font-size:.88rem;font-weight:700}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}
.rec-badge{margin-left:auto;font-size:.68rem;font-weight:700;background:rgba(250,96,107,.2);
  color:#ffb3b9;padding:.25rem .6rem;border-radius:999px;letter-spacing:.03em}
.rec-body{margin:0;padding:1.3rem 1.4rem;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;
  font-size:.86rem;border-bottom:1px solid var(--line)}
.rec-body dt{color:var(--grey);font-size:.79rem;white-space:nowrap}
.rec-body dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.rec-body dd span{font-weight:400;color:var(--grey);font-size:.76rem}
.rec-body .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;font-weight:400;
  background:var(--wash);padding:.1rem .4rem;border-radius:4px;display:inline-block}
.rec-consent{padding:1.3rem 1.4rem;background:var(--coral-wash);border-bottom:1px solid var(--line)}
.rec-consent b{display:block;font-size:.74rem;color:var(--coral-dark);margin-bottom:.6rem;letter-spacing:.03em}
.rec-consent p{margin:0;font-size:.82rem;line-height:1.6;max-width:none}
.rec-chan{width:100%;border-collapse:collapse;font-size:.83rem}
.rec-chan caption{text-align:left;padding:1.1rem 1.4rem .5rem;font-size:.74rem;color:var(--grey);
  font-weight:700;letter-spacing:.03em}
.rec-chan th{text-align:left;font-weight:400;padding:.45rem 1.4rem;color:var(--ink)}
.rec-chan td{text-align:right;padding:.45rem 1.4rem;color:var(--grey)}
.rec-chan td.ok{color:var(--coral-dark);font-weight:700}
.rec-foot{margin:0;padding:1.1rem 1.4rem 1.3rem;font-size:.73rem;color:var(--grey);line-height:1.55;
  border-top:1px solid var(--line);max-width:none}

.never{margin-top:3.5rem;background:var(--ink);color:#fff;border-radius:var(--r);padding:2.2rem 2.3rem}
.never h3{color:#fff;margin-bottom:.9rem}
.never-int{color:#a9b3bf;font-size:.95rem;max-width:74ch}
.nevers{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem 2rem}
@media(max-width:760px){.nevers{grid-template-columns:1fr}}
.nevers li{padding-left:1.9rem;position:relative;font-size:.92rem;color:#c8cfd6;line-height:1.5}
.nevers li::before,.nevers li::after{content:"";position:absolute;left:3px;top:.62em;width:13px;height:2px;
  background:var(--coral);border-radius:1px}
.nevers li::before{transform:rotate(45deg)}
.nevers li::after{transform:rotate(-45deg)}

.regimes{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.5rem}
@media(max-width:820px){.regimes{grid-template-columns:1fr}}
.reg{background:#fff;border:1px solid #dbe3ee;border-radius:var(--r);padding:1.7rem 1.6rem;
  border-top:4px solid #b9c9dc}
.reg.warn{border-top-color:var(--coral)}
.reg b{display:block;font-size:1.02rem;margin-bottom:.45rem}
.reg-sec{display:block;font-size:.8rem;color:var(--coral-dark);font-weight:700;margin-bottom:.9rem}
.reg p{margin:0;font-size:.9rem;color:var(--grey)}

/* ---------- cas clients ---------- */
.case{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2.5rem}
.case-head{padding:1.9rem 2rem 1.6rem;background:var(--wash)}
.case-tag{display:inline-block;font-size:.72rem;font-weight:700;color:#fff;background:var(--coral);
  padding:.28rem .8rem;border-radius:999px;margin-bottom:.9rem}
.case-head h3{font-size:clamp(1.25rem,1.05rem + .7vw,1.65rem);margin-bottom:.6rem}
.case-head p{margin:0;color:var(--grey)}
.case-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
@media(max-width:700px){.case-kpis{grid-template-columns:1fr}}
.case-kpis div{background:#fff;padding:1.5rem 1.7rem}
.case-kpis b{display:block;font-family:var(--narrow);font-size:2.3rem;line-height:1;color:var(--coral);
  letter-spacing:-.02em}
.case-kpis span{display:block;margin-top:.45rem;font-size:.85rem;color:var(--grey);line-height:1.5}
.case-body{padding:1.9rem 2rem}
.case-body p{font-size:.95rem}
.case-body p:last-child{margin-bottom:0}
.case-body b{color:var(--ink)}
/* =========================================================
   Leads Studio — compléments v2
   Menu mobile, formulaire, pages de contenu, lecteur vidéo.
   Même charte que leadstudio.css : corail, encre, gris, lavé.
   ========================================================= */

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------- menu mobile */

.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.burger-bars,.burger-bars::before,.burger-bars::after{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.burger-bars{position:relative}
.burger-bars::before,.burger-bars::after{content:"";position:absolute;left:0}
.burger-bars::before{top:-6px}
.burger-bars::after{top:6px}
.burger[aria-expanded="true"] .burger-bars{background:transparent}
.burger[aria-expanded="true"] .burger-bars::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-bars::after{transform:translateY(-6px) rotate(-45deg)}

/* Les attributs width et height posés sur chaque <img> réservent la place
   avant le chargement, mais ils imposent aussi une hauteur en dur. Dès que
   la CSS contraint la largeur, l'image se retrouve étirée. Cette règle rend
   la hauteur libre : le rapport est alors déduit des deux attributs, ce qui
   réserve la bonne place sans déformer. Toute règle de classe qui fixe
   height l'emporte sur celle-ci. */
img{height:auto}

@media(max-width:1020px){
  .burger{display:inline-flex}
  .nav.ouvert{
    display:flex;flex-direction:column;gap:0;position:fixed;left:0;right:0;
    top:var(--haut-entete,66px);bottom:0;z-index:60;margin:0;padding:.5rem var(--gut) 2rem;
    background:#fff;overflow-y:auto;font-size:var(--s-1);
    border-top:1px solid var(--line)}
  .nav.ouvert a{padding:1.05rem 0;border-bottom:1px solid var(--line);text-decoration:none}
  body.menu-ouvert{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  .burger-bars,.burger-bars::before,.burger-bars::after{transition:none}
}

/* ---------------------------------------------------- page de contenu */

.prose{max-width:72ch;margin-inline:auto}
.prose h2{font-size:var(--s-1);margin:2.6rem 0 .9rem;letter-spacing:-.012em}
.prose h3{font-size:var(--s-0);margin:2rem 0 .7rem;font-weight:700}
.prose p{margin:0 0 1.15rem;max-width:none}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.35rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--coral-dark);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--coral);
  color:var(--grey);font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:var(--s--1)}
.prose th,.prose td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left}
.prose img{margin:1.5rem 0;border-radius:var(--r)}

.art-meta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;
  color:var(--grey);font-size:var(--s--1);margin-top:1rem}
.art-meta .puce{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .7rem;
  border:1px solid var(--line);border-radius:999px;background:#fff}

/* ---------------------------------------------------- lecteur vidéo */

/* Rien n'est chargé depuis YouTube tant que le visiteur n'a pas cliqué :
   aucun traceur tiers ne se dépose à l'ouverture de la page. */
.video{position:relative;margin:2rem auto;max-width:860px;border-radius:var(--r);
  overflow:hidden;background:var(--ink);aspect-ratio:16/9}
.video img,.video iframe{width:100%;height:100%;display:block;border:0;object-fit:cover}
/* ceinture et bretelles : même si un jour le lecteur n'est pas seul dans le
   cadre, il reste au-dessus et à la bonne taille */
.video iframe{position:absolute;inset:0;object-fit:fill}
.video button{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
  background:rgba(0,0,0,.12);cursor:pointer;display:grid;place-items:center;
  transition:background .2s}
.video button:hover,.video button:focus-visible{background:rgba(0,0,0,.28)}
.video button::before{content:"";width:78px;height:54px;border-radius:15px;
  background:var(--coral);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.video button::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-40%,-50%);border-left:19px solid #fff;
  border-top:11px solid transparent;border-bottom:11px solid transparent}
.video button:hover::before{background:var(--coral-dark)}
.video-note{display:block;text-align:center;color:var(--grey);font-size:var(--s--1);
  margin-top:-1rem;margin-bottom:2rem}

/* ---------------------------------------------------- grille des marchés */

.hub{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin-top:2.6rem}
.hub a{display:block;padding:1.6rem;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;text-decoration:none;transition:border-color .2s,transform .2s}
.hub a:hover{border-color:var(--coral);transform:translateY(-2px)}
.hub img{width:46px;height:46px;object-fit:contain;margin-bottom:.9rem}
.hub h3{margin-bottom:.35rem}
.hub p{color:var(--grey);font-size:var(--s--1);margin:0}
.hub .sig{display:inline-block;margin-top:.9rem;color:var(--coral-dark);font-weight:700;
  font-size:var(--s--1)}

/* ---------------------------------------------------- formulaire */

.form{max-width:720px;margin-top:2.5rem}
.form-grid{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
.form-grid .plein{grid-column:1/-1}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.champ{display:flex;flex-direction:column;gap:.35rem}
.champ label{font-weight:700;font-size:var(--s--1)}
.champ .aide{color:var(--grey);font-size:var(--s--1);font-weight:400}
.champ input,.champ select,.champ textarea{
  font:inherit;font-size:var(--s-0);color:var(--ink);background:#fff;
  padding:.78rem .9rem;border:1px solid #d6dde7;border-radius:10px;width:100%}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:2px solid var(--coral);outline-offset:1px;border-color:var(--coral)}
.champ input:user-invalid,.champ select:user-invalid,.champ textarea:user-invalid{
  border-color:#DC2626}
.form .pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-legal{color:var(--grey);font-size:var(--s--1);margin:1.4rem 0 0;max-width:62ch}
.form-legal a{color:var(--coral-dark)}
.form-envoi{margin-top:1.6rem}
.form-erreur{margin:0 0 1.4rem;padding:.9rem 1.1rem;border-radius:10px;
  background:var(--coral-wash);border:1px solid var(--coral);font-size:var(--s--1)}

/* ---------------------------------------------------- 404 */

.err{text-align:center;padding-block:clamp(4rem,12vw,9rem)}
.err .code{font-family:var(--narrow);font-size:clamp(4.5rem,18vw,9rem);line-height:1;
  color:var(--coral);letter-spacing:-.04em}
.err .acts{justify-content:center}

/* ---------------------------------------------------- planche de logos */

.logos-img{width:100%;max-width:980px;margin:2.5rem auto 0;display:block;
  height:auto;opacity:.92}

/* ------------------------------------------------ logos de références */

/* Fond clair : les logos sont attendus dans leur version couleur ou noire.
   Tant qu'un fichier manque, la marque reste affichée en typographie. */
/* Les logos arrivent avec des contrastes très différents : on les ramène à
   un gris uniforme, sinon les marques claires disparaissent à côté des
   marques sombres. La couleur revient au survol. */
.logos-row .ref-logo{height:34px;width:auto;max-width:170px;object-fit:contain;
  filter:grayscale(1) brightness(.45);opacity:.8;
  transition:filter .25s,opacity .25s}
.logos-row .ref-logo:hover{filter:none;opacity:1}
@media(max-width:700px){.logos-row .ref-logo{height:27px;max-width:130px}}

/* ---------------------------------------------------------- logo */

/* Le logo officiel remplace la version typographique. Deux fichiers :
   la version couleur en en-tête, la version claire sur le pied sombre. */
.logo img{height:30px;width:auto;display:block}  /* hauteur imposée : width:auto est sûr */
.foot .logo img{height:34px}
@media(max-width:520px){.logo img{height:26px}}

/* =========================================================
   Reprise de finition — 23/09
   Boutons secondaires, en-tête mobile, rythme vertical.
   ========================================================= */

/* ---------------------------------------------- boutons secondaires */

/* L'ancien contour de 2 px en gris très pâle donnait un bouton flou,
   ni plein ni vraiment dessiné. Un filet de 1 px mieux contrasté et un
   fond légèrement teinté suffisent à poser un second niveau lisible. */
.btn-line{
  background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1px #c2cede, 0 1px 2px rgba(22,22,22,.05);
  transition:background .18s ease,box-shadow .18s ease,color .18s ease}
.btn-line:hover{
  background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink), 0 1px 2px rgba(22,22,22,.08)}

.btn-hollow{
  background:rgba(255,255,255,.07);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  transition:background .18s ease,box-shadow .18s ease}
.btn-hollow:hover{
  background:rgba(255,255,255,.16);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}

/* sur fond lavé, le bouton secondaire doit rester détaché du fond */
.hero .btn-line,.band.alt .btn-line{background:#fff}

/* ---------------------------------------------------- en-tête */

.head-in{min-height:74px;gap:1.4rem}

/* En dessous de 760 px, l'appel à l'action de l'en-tête serrait le logo
   contre le bouton de menu. Il est déplacé en tête du menu déroulant,
   où il est plus grand et plus visible. */
.nav-cta{display:none}

/* la navigation disparaît sous 1020 px : sans elle, plus rien ne pousse
   le bouton de menu vers la droite */
@media(max-width:1020px){.head-cta{margin-left:auto}}

@media(max-width:760px){
  .head-in{min-height:62px;gap:.75rem}
  .head-cta .btn:not(.burger){display:none}
  .logo img{height:24px}
  .burger{width:42px;height:42px;border-radius:12px}
  .nav.ouvert .nav-cta{
    display:inline-flex;width:100%;margin:1.4rem 0 .4rem;
    border-bottom:0;padding:1em 2.1em}
  .nav.ouvert a:last-of-type:not(.nav-cta){border-bottom:0}
}

/* ---------------------------------------------- rythme vertical */

@media(max-width:760px){
  :root{
    --band:clamp(3rem,9vw,4.25rem);
    --s-4:clamp(2.05rem,1.4rem + 3vw,2.6rem);
    --s-3:clamp(1.7rem,1.3rem + 2vw,2.1rem);
  }
  .hero{padding-block:2.25rem 2.75rem}
  .hero h1{max-width:none}
  .hero .sub,.lede{margin-top:1.1rem}
  /* les appels à l'action pleine largeur se lisent mieux au pouce */
  .acts,.final-actions{flex-direction:column;align-items:stretch}
  .acts .btn,.final-actions .btn{width:100%}
  .offer{padding:1.15rem 1.25rem}
  .offer-grid{margin-top:2rem}
  .prose{max-width:none}
  .video{margin:1.5rem auto}
}

/* deux bandes sombres qui se suivent : le rembourrage ne se cumule pas */
.dark + .final{padding-top:calc(var(--band) * .4);border-top:1px solid #272727}

/* ------------------------------------------- mot du fondateur */

/* Le portrait du fondateur remplace l'aplat décoratif qui figurait ici
   et que l'on prenait, à raison, pour une image manquante. */
.ff{align-items:center}
.ff-media{display:flex;justify-content:center}
.ff-media img{width:100%;max-width:320px;border-radius:var(--r)}
@media(max-width:880px){.ff-media img{max-width:240px}}

/* ------------------------------ relance après les cas clients */

.case-suite{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line);text-align:center}
.case-suite p{max-width:56ch;margin:0 auto 1.6rem;color:var(--grey)}
@media(max-width:760px){.case-suite .btn{width:100%}}

/* --------------------------------- alignement de la page conformité */

/* La carte de preuve et les deux cartes de régime appartenaient à deux
   grilles différentes : leurs bords intérieurs tombaient à 29 px l'un de
   l'autre, ce qui se voyait. Même trame pour les deux — mais uniquement
   là où la page est réellement sur deux colonnes. */
@media(min-width:941px){
  .proof-split{grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,2.6rem)}
  .regimes{gap:clamp(1.6rem,3vw,2.6rem)}
}

/* --------------------------------------- aperçu d'un parcours */

/* La capture de la landing page est présentée dans un cadre de navigateur,
   au-dessus du descriptif. Tant qu'aucune capture n'est déposée, le bloc
   garde sa mise en page d'origine. */
.funnel-vue{margin:0 0 1.8rem}
.fenetre{border:1px solid #d7dee7;border-radius:12px;overflow:hidden;
  box-shadow:0 8px 26px rgba(22,22,22,.10);background:#fff}
.fenetre-barre{display:flex;align-items:center;gap:.4rem;
  padding:.55rem .85rem;background:#f4f7fb;border-bottom:1px solid #e3e9f1}
.fenetre-barre span{width:9px;height:9px;border-radius:50%;background:#d3dae4}
.fenetre-barre span:first-child{background:#e8b0b4}
.fenetre-barre b{margin-left:.7rem;font-size:.72rem;font-weight:700;
  color:var(--grey);letter-spacing:.01em;
  background:#fff;border:1px solid #e3e9f1;border-radius:999px;
  padding:.2rem .7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fenetre img{display:block;width:100%;height:auto}
@media(max-width:560px){.fenetre-barre b{font-size:.66rem}}

/* =========================================================
   Reprise mobile — 23/09, d'après le retour de Thomas
   ========================================================= */

/* ---------------------------- l'enregistrement de preuve */

/* La liste de définitions était en deux colonnes avec des libellés
   insécables : sous 560 px, la colonne de droite sortait de l'écran et
   le contenu se retrouvait coupé. On empile. */
@media(max-width:560px){
  .rec-head{flex-wrap:wrap;padding:.9rem 1.1rem}
  .rec-badge{margin-left:0;order:3;width:100%}

  .rec-body{grid-template-columns:1fr;gap:0;padding:1.1rem 1.1rem .4rem}
  .rec-body dt{white-space:normal;margin-top:.85rem}
  .rec-body dt:first-child{margin-top:0}
  .rec-body dd{margin:.15rem 0 0}
  .rec-body .mono{max-width:100%;overflow-wrap:anywhere}

  .rec-consent{padding:1.1rem}
  .rec-chan{table-layout:fixed;width:100%}
  .rec-chan caption{padding:1rem 1.1rem .4rem}
  .rec-chan th{padding:.4rem 1.1rem;width:62%}
  .rec-chan td{padding:.4rem 1.1rem;width:38%}
  .rec-foot{padding:1rem 1.1rem 1.2rem}

  /* même correctif pour la fiche de preuve courte des pages marché */
  .receipt{padding:1.3rem 1.2rem}
  .receipt dl{grid-template-columns:1fr;gap:0}
  .receipt dt{margin-top:.8rem}
  .receipt dt:first-child{margin-top:0}
  .receipt dd{margin:.15rem 0 0}
}

/* ------------------------------------- composition mobile */

@media(max-width:760px){
  /* Le schéma animé reste sous les boutons. Placé au-dessus du titre, il
     occupait tout le premier écran d'un téléphone : on voyait le diagramme
     avant de savoir ce que fait l'entreprise. Le titre passe d'abord. */
  .hero-media{margin-top:1.8rem}
  .hero-split{gap:1.2rem}

  /* titres et accroches centrés, corps de texte aligné à gauche */
  .hero,.band > .wrap > h2,.band > .wrap > .lede,.band > .wrap > p.sub{
    text-align:center}
  .hero .live,.hero .tag{margin-inline:auto}
  .hero h1,.hero .sub,.hero .lede{margin-inline:auto}
  .hero .crumb{text-align:center}
  .band > .wrap > h2,.band > .wrap > .lede{margin-inline:auto}
  .lede{max-width:40ch}

  /* les listes et les cartes gardent leur alignement naturel */
  .hero-pts,.hero .acts,.hero form,.prose,.funnel,.case{text-align:left}
  .hero .acts{align-items:stretch}

  /* ...mais le libellé d'un bouton reste centré, sinon un intitulé qui passe
     sur deux lignes se retrouve collé au bord gauche de la pastille */
  .acts .btn,.btn{text-align:center}

  /* La pastille « Conforme au régime du 11 août 2026 » prend toute la largeur
     avant même que le titre n'apparaisse : elle est réservée au bureau. */
  .hero .live{display:none}
}

/* ------------------------------------------- chiffres clés */

/* En deux colonnes sur un téléphone, les libellés n'ont pas le même nombre
   de lignes et la grille part en escalier. Une ligne par chiffre, le nombre
   et son libellé alignés sur la même base. */
@media(max-width:560px){
  .stats-in{grid-template-columns:1fr;gap:0;margin-top:2rem}
  .stat{display:flex;align-items:baseline;gap:1.1rem;
    padding:.95rem 0;border-top:1px solid var(--line)}
  .stat:first-child{border-top:0;padding-top:0}
  /* largeur de colonne commune : les chiffres s'alignent d'une ligne
     à l'autre, et un libellé plus long ne décale rien */
  .stat b{flex:0 0 auto;min-width:5.2rem;font-size:2rem;white-space:nowrap}
  .stat span{margin-top:0;max-width:none}
}

/* ---------------------------------------- pied de page */

@media(max-width:520px){
  .foot-in{gap:2rem;text-align:center}
  .foot-in > div:first-child{display:flex;flex-direction:column;align-items:center}
  .foot-in p{max-width:32ch;margin-inline:auto}
  .foot h4{margin-bottom:.7rem}
  .foot-base{text-align:center}
}

/* ------------------------------ tableaux des pages légales */

/* Quatre colonnes ne tiennent pas sur un téléphone : chaque ligne devient
   une carte, et l'intitulé de colonne passe au-dessus de la valeur. */
@media(max-width:600px){
  .prose table,.prose thead,.prose tbody,.prose tr,.prose th,.prose td{
    display:block;width:auto;border:0}
  .prose thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .prose tr{border:1px solid var(--line);border-radius:10px;
    padding:.6rem .2rem;margin-bottom:1rem;background:#fff}
  .prose td{padding:.5rem .9rem}
  .prose td::before{content:attr(data-libelle);display:block;
    font-size:.7rem;font-weight:700;letter-spacing:.02em;
    color:var(--coral-dark);margin-bottom:.2rem}
  .prose td[data-libelle=""]::before{display:none}
}

/* ------------------------------------------- formulaire Typeform */

/* Le formulaire est hébergé par Typeform. On lui réserve une hauteur
   fixe pour éviter que la page ne saute au chargement. */
.tf-cadre{max-width:820px;margin:0 auto;min-height:560px}
.tf-cadre [data-tf-live]{min-height:560px}
@media(max-width:760px){.tf-cadre,.tf-cadre [data-tf-live]{min-height:620px}}

.carte-plate{padding:1.6rem;border:1px solid var(--line);
  border-radius:var(--r);background:#fff}

/* ------------------------------------------- panneau des marchés */

.nav-groupe{position:relative}
.nav-tete{display:flex;align-items:center;gap:.15rem}

.nav-bascule{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:0;border-radius:6px;
  background:none;color:inherit;cursor:pointer;opacity:.5;
  transition:opacity .16s ease,background .16s ease}
.nav-bascule svg{width:10px;height:7px;transition:transform .2s ease}
.nav-bascule:hover{opacity:1}
.nav-bascule:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.nav-groupe:hover .nav-bascule{opacity:1}
.nav-bascule[aria-expanded="true"] svg{transform:rotate(180deg)}
@media(min-width:1021px){
  .nav-groupe:hover .nav-bascule svg{transform:rotate(180deg)}
}

/* ---- panneau, sur ordinateur seulement ----

   Tout ce qui positionne le panneau est enfermé dans la media query : sans
   ça, la règle d'ouverture .sous-menu[data-ouvert="oui"] repassait devant
   la version téléphone — même spécificité, et une media query n'en ajoute
   pas — et le panneau partait 169 px à gauche de l'écran. */

@media(min-width:1021px){
  .sous-menu{
    position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(.4rem);
    width:min(760px,calc(100vw - 3rem));margin:0;padding:1.5rem 1.6rem 1.1rem;z-index:60;
    background:#fff;border:1px solid var(--line);border-radius:18px;
    box-shadow:0 26px 60px -30px rgba(22,22,22,.42), 0 2px 8px rgba(22,22,22,.05);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .17s ease,transform .17s ease,visibility .17s}
  .nav-groupe:hover .sous-menu,
  .nav-groupe:focus-within .sous-menu,
  .sous-menu[data-ouvert="oui"]{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0)}
  /* zone tampon, sinon le panneau se referme dans l'espace sous le lien */
  .sous-menu::before{content:"";position:absolute;top:-.7rem;left:0;right:0;height:.7rem}

  .mm-grille{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:1.35rem 1.6rem;align-items:start}
  .mm-col{min-width:0}
  .mm-tete{
    display:block;font-size:.93rem;font-weight:700;color:var(--ink);
    text-decoration:none;line-height:1.3;padding-bottom:.4rem;
    border-bottom:1px solid var(--line);transition:color .14s ease}
  .mm-tete:hover{color:var(--coral-dark)}
  .mm-fils{list-style:none;margin:.45rem 0 0;padding:0}
  .mm-fils li{margin:0}
  .mm-fils a{
    display:block;padding:.28rem 0;font-size:.85rem;line-height:1.35;
    color:var(--grey);text-decoration:none;
    transition:color .13s ease,transform .13s ease}
  .mm-fils a:hover{color:var(--coral-dark);transform:translateX(2px)}

  .mm-tous{
    display:block;margin-top:1.3rem;padding-top:.95rem;
    border-top:1px solid var(--line);
    font-size:.88rem;font-weight:700;color:var(--coral-dark);text-decoration:none}
  .mm-tous::after{content:" →";font-weight:400}
  .mm-tous:hover{text-decoration:underline}
}

/* ------------------------------------- le même menu sur téléphone */

/* Pas de survol au doigt : le bouton est le seul moyen de déplier, et la
   liste part repliée. Les pages produit sont masquées ici — vingt-neuf
   lignes dans un menu au doigt, ce n'est plus un menu. Elles restent
   accessibles depuis chaque page marché. */
@media(max-width:1020px){
  .nav-groupe{position:static;border-bottom:1px solid var(--line)}
  .nav-tete{justify-content:space-between;gap:0;align-items:center}
  .nav-tete > a{flex:1;border-bottom:0 !important}

  .nav-bascule{
    width:40px;height:40px;flex:0 0 40px;margin-right:-.5rem;
    border-radius:50%;opacity:1;color:var(--grey);
    transition:background .18s ease,color .18s ease}
  .nav-bascule svg{width:12px;height:8px;stroke-width:2}
  .nav-bascule[aria-expanded="true"]{background:var(--coral);color:#fff}

  .sous-menu{display:none}
  .sous-menu[data-ouvert="oui"]{display:block;padding:.1rem 0 1rem}

  .mm-fils{display:none}
  .mm-col{position:relative;padding-left:1.15rem}
  .mm-col::before{
    content:"";position:absolute;left:1px;top:0;bottom:0;width:2px;
    background:var(--line)}
  .mm-col:first-child::before{top:.5rem;border-radius:2px 2px 0 0}
  .mm-col:last-child::before{bottom:.5rem;border-radius:0 0 2px 2px}

  .mm-tete{
    padding:.62rem 0;border-bottom:0;font-size:.97rem;font-weight:400;
    color:var(--grey);transition:color .14s ease,transform .14s ease}
  .mm-tete:hover,.mm-tete:active{color:var(--coral-dark);transform:translateX(2px)}

  .mm-tous{
    display:inline-block;margin-top:.5rem;padding:.3rem 0 0;border-top:0;
    font-size:.97rem;font-weight:700;color:var(--coral-dark);text-decoration:none}
  .mm-tous::after{content:" →";font-weight:400}
}

/* ------------------------------------------- pages produit d'un marché */

.prod-grille{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,1.6vw,1.1rem);margin-top:2rem}
@media(max-width:900px){.prod-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.prod-grille{grid-template-columns:1fr}}
.prod-lien{
  display:block;padding:1.1rem 1.2rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.prod-lien:hover{border-color:var(--coral);transform:translateY(-2px);
  box-shadow:0 10px 24px -16px rgba(22,22,22,.3)}
.prod-lien b{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:.25rem}
.prod-lien span{display:block;color:var(--grey);font-size:.85rem;line-height:1.45}

/* ------------------------------------------------ bloc cobrand accueil */

.cobr{display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(1.8rem,3.5vw,3rem);align-items:center;margin-top:2.4rem}
@media(max-width:900px){.cobr{grid-template-columns:1fr;gap:1.8rem}}
.cobr .checks{margin-top:0}
.cobr .checks li{max-width:none}
.cobr .video{align-self:start}

/* une vidéo seule, centrée, hors de la grille média de l'accueil */
.video-seule{max-width:780px;margin:2.2rem auto 0}

.video-leg{margin:.85rem 0 0;font-size:.92rem;color:var(--grey);text-align:center}
.video-leg b{color:var(--ink);display:block;margin-bottom:.15rem}

/* ------------------------------------------------ questions fréquentes */

/* Une seule carte, des lignes séparées par un filet, et le chevron collé au
   texte plutôt qu'à l'autre bout de l'écran. */
.faq-wrap{max-width:760px}
.faq-wrap > h2,.faq-wrap > .lede{text-align:center;text-wrap:balance}
.faq-wrap > .lede{margin-inline:auto;margin-bottom:2rem}

.faq{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 1px 2px rgba(22,22,22,.04)}
.faq-item + .faq-item{border-top:1px solid var(--line)}
.faq-item summary{
  display:flex;align-items:center;gap:1rem;
  padding:1.15rem 1.4rem;cursor:pointer;list-style:none;
  font-weight:700;font-size:1rem;color:var(--ink);line-height:1.4;
  transition:background .14s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{flex:1}
.faq-item summary:hover{background:var(--wash)}
.faq-item summary:focus-visible{outline:2px solid var(--coral);outline-offset:-2px}
.faq-fl{
  flex:0 0 18px;width:18px;height:18px;color:var(--grey);
  transition:transform .22s ease,color .14s ease}
.faq-item summary:hover .faq-fl{color:var(--coral)}
.faq-item[open] .faq-fl{transform:rotate(180deg);color:var(--coral)}
.faq-item[open] summary{background:var(--wash)}
.faq-rep{padding:0 1.4rem}
.faq-rep p{
  margin:0;padding:.1rem 0 1.35rem;color:var(--grey);max-width:62ch;
  border-top:0;font-size:.97rem}

@media(max-width:560px){
  .faq-item summary{padding:1rem 1.05rem;font-size:.96rem;gap:.8rem}
  .faq-rep{padding:0 1.05rem}
}

/* ------------------------------------------- renvoi vers la chaîne */

/* Une invitation, pas une section de contenu : centrée, resserrée, sans
   carte. La grosse carte blanche alignée à gauche déséquilibrait la page. */
.chaine{max-width:540px;margin-inline:auto;text-align:center}
.chaine-pic{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:1rem;border-radius:14px;
  background:var(--coral-wash);color:var(--coral)}
.chaine-pic svg{width:26px;height:26px}
.chaine h2{
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.7rem);margin:0 0 .7rem;
  letter-spacing:-.018em;line-height:1.2;text-wrap:balance}
.chaine p{margin:0 auto 1.7rem;color:var(--grey);max-width:44ch;text-wrap:pretty}
.chaine .btn{white-space:nowrap}

/* une carte de « Ce que nous couvrons » qui mène à sa page produit */
.card-lien{display:block;text-decoration:none;position:relative;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.card-lien:hover{border-color:var(--coral);transform:translateY(-2px);
  box-shadow:0 10px 24px -16px rgba(22,22,22,.3)}
.card-lien h3{color:var(--ink)}
.card-sig{display:block;margin-top:.7rem;font-size:.82rem;font-weight:700;
  color:var(--coral-dark);opacity:.75;transition:opacity .16s ease}
.card-lien:hover .card-sig{opacity:1}