@font-face{font-family:'Space Grotesk';src:url('/fonts/SpaceGrotesk-VariableFont_wght.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Lexend Deca';src:url('/fonts/LexendDeca-VariableFont_wght.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --bg:#FAFBFC; --white:#FFFFFF; --ink:#1A1A1A; --ink2:#4A5568; --mute:#64748B;
  --canard:#31656F; --canard2:#3D7A86; --tang:#EE9673; --tang-t:#A94F2B;
  --sky:#B7D4D7; --rose:#F3E5E3; --black:#242424;
  --line:#DDE4E8; --line2:#C5D0D6;
  --f1:#4A8E9A; --f2:#24525B; --f3:#1A1A1A;
  --grad:linear-gradient(95deg,#31656F 0%,#3D7A86 38%,#D56C43 100%);
  --ease:cubic-bezier(.22,1,.36,1);
  --sg:'Space Grotesk',system-ui,sans-serif; --lx:'Lexend Deca',system-ui,sans-serif;
  --pad:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:104px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sg);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
strong,b{font-weight:600}
:focus-visible{outline:3px solid var(--tang-t);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(1200px + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ───────── En-tête ─────────
   Même geste que l'en-tête du site actuel (resources/views/components/header.blade.php + resources/css/theme.css) :
   logo en masque avec dégradé qui glisse en 25 s, liens qui montent de 2 px avec trait dégradé et point,
   panneau plein écran sur mobile. Les courbes et durées sont celles de l'ancien en-tête. */
.top{--eq:cubic-bezier(.25,1,.5,1);--ex:cubic-bezier(.16,1,.3,1);position:fixed;inset:0 0 auto 0;z-index:50;height:72px;display:flex;align-items:center}
.top::before{content:"";position:absolute;inset:0;background:rgba(250,251,252,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);opacity:0;transition:opacity .3s ease-out}
.top.is-stuck::before{opacity:1}
.top .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* logo : /images/logo-white.svg sert de masque, un dégradé canard → tangerine → canard glisse dessous */
.top-logo{flex:none;display:flex;align-items:center;min-height:44px}
.top-logo-mark{display:block;width:154px;height:40px;background:linear-gradient(135deg,var(--canard),var(--tang),var(--canard));background-size:300% 300%;-webkit-mask-image:url('/images/logo-white.svg');mask-image:url('/images/logo-white.svg');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:logoGradientShift 25s ease-in-out infinite alternate}
@keyframes logoGradientShift{0%{background-position:0% 0%}100%{background-position:100% 100%}}
/* liens : au survol ils montent de 2 px et passent au canard, un trait dégradé se trace de gauche à droite
   et un point descend sous le trait ; la page courante garde le trait et le point */
.top-nav ul{display:flex;gap:32px}
.top-nav a{position:relative;display:inline-block;padding:8px 0;font-family:var(--lx);font-weight:400;font-size:.85rem;line-height:1.7;color:var(--ink2);transition:color .4s var(--eq),transform .3s var(--eq)}
.top-nav a::before{content:"";position:absolute;left:50%;bottom:-2px;width:6px;height:6px;border-radius:50%;background:var(--canard);opacity:0;transform:translateX(-50%) scale(0);transition:transform .4s var(--eq),opacity .4s var(--eq),bottom .4s var(--eq)}
.top-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--canard),var(--tang));transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ex)}
.top-nav a:is(:hover,:focus-visible){color:var(--canard);transform:translateY(-2px)}
.top-nav a[aria-current="page"]{color:var(--canard)}
.top-nav a:is(:hover,:focus-visible,[aria-current="page"])::before{opacity:1;bottom:-8px;transform:translateX(-50%) scale(1)}
.top-nav a:is(:hover,:focus-visible,[aria-current="page"])::after{transform:scaleX(1);transform-origin:left}
/* D ← C : boutons du header, variante contour (fond blanc, filet et ombre décalée bleu canard) */
.top-act{display:flex;align-items:center;gap:12px}
.btn.btn-rdv{min-height:46px;height:46px;padding:0 20px;font-size:12.5px;color:var(--canard)}
.btn.btn-rdv::before{background:var(--white);border-color:var(--canard)}
.btn.btn-rdv::after{background:var(--canard)}
/* bouton téléphone : une touche carrée, icône seule ; le combiné sonne au survol */
.btn.btn-tel{gap:0;padding:0 13px;min-width:46px}
.btn.btn-tel svg{width:18px;height:18px}
.btn.btn-tel:hover svg{transform:none}
@media (hover:hover){
  .btn-tel:hover svg,.btn-tel:focus-visible svg{animation:telring .7s var(--ease)}
}
/* menu mobile : burger à droite (affiché par le script), panneau plein écran sous la barre */
.top-burger{display:none;place-items:center;flex:none;width:44px;height:44px;margin-right:-10px;color:var(--ink)}
.top-burger[hidden]{display:none!important}
.top-burger svg{width:24px;height:24px}
.top-burger[aria-expanded="true"] .i-open,.top-burger:not([aria-expanded="true"]) .i-close{display:none}
.m-menu{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;padding:5.5rem 1.75rem 2rem;background-color:var(--bg);background-image:radial-gradient(ellipse at top right,rgba(238,150,115,.06) 0%,transparent 55%),radial-gradient(ellipse at bottom left,rgba(49,101,111,.05) 0%,transparent 60%);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;opacity:0;transform:translateY(-12px)}
.m-menu[hidden]{display:none}
.m-menu::-webkit-scrollbar{display:none}
.m-menu[data-state="open"]{opacity:1;transform:none;transition:opacity .28s ease-out,transform .32s var(--eq)}
.m-menu[data-state="closing"]{opacity:0;transform:translateY(-8px);transition:opacity .18s ease-in,transform .18s ease-in}
body.menu-open{overflow:hidden}
.m-menu-nav{display:flex;flex-direction:column;gap:.25rem;padding-top:.5rem}
.m-menu-link{display:flex;align-items:center;gap:1rem;padding:1.05rem .25rem;border-bottom:1px solid rgba(49,101,111,.08);font-family:var(--sg);font-weight:400;font-size:1.65rem;line-height:1.1;letter-spacing:-.02em;color:var(--ink);transition:color .25s ease,padding .25s ease}
.m-menu-num{min-width:1.6rem;font-family:var(--lx);font-size:.7rem;font-weight:500;letter-spacing:.1em;color:var(--canard);opacity:.7}
.m-menu-label{flex:1}
.m-menu-arrow{flex:none;width:22px;height:22px;color:rgba(49,101,111,.3);transition:transform .3s var(--eq),color .3s ease}
.m-menu-link:active,.m-menu-link[aria-current="page"],.m-menu-link[aria-current="page"] .m-menu-arrow{color:var(--canard)}
.m-menu-ctas{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:.65rem}
.m-menu .m-menu-ctas .btn{width:100%;height:auto;min-height:56px;padding:0 24px;font-size:13px}
@media (min-width:901px){.m-menu{display:none!important}}
@media (max-width:900px){
  .top-nav{display:none}
  .top-burger{display:grid}
}
@media (min-width:600px) and (max-width:900px){
  .m-menu{padding:6rem 3rem 2.5rem}
  .m-menu-link{font-size:2rem;padding:1.2rem .25rem}
  .m-menu-ctas{flex-direction:row}
  .m-menu .m-menu-ctas .btn{flex:1;width:auto}
}
@media (max-width:560px){
  .top{height:60px}
  .top-act{gap:8px}
  .top-logo-mark{width:100px;height:26px}
}
@media (max-width:385px){
  .top-act{gap:6px}
  .top-logo-mark{width:85px;height:22px}
}
/* très petits écrans : la touche téléphone quitte la barre (elle reste dans le panneau) pour laisser la place au burger */
@media (max-width:340px){.top-act .btn-tel{display:none}}
@media (max-width:380px){
  .m-menu{padding:5rem 1.25rem 1.5rem}
  .m-menu-link{font-size:1.45rem;padding:.95rem .25rem}
}

/* ───────── Grammaire plaquette ───────── */
.eyebrow{font-family:var(--lx);font-weight:400;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--canard);display:flex;align-items:center;gap:.9em}
.eyebrow i{font-style:normal;color:var(--tang-t)}
h2{font-weight:300;font-size:clamp(30px,4.1vw,54px);line-height:1.08;letter-spacing:-.035em;margin-top:22px;max-width:18em;text-wrap:balance}
h2 strong{display:block;width:fit-content;font-weight:600;padding-bottom:.08em}
.bar{display:block;width:64px;height:5px;border-radius:3px;background:var(--grad);margin-top:30px;transform-origin:left center}
section{position:relative;padding:150px 0}
.s-white{background:var(--white);border-block:1px solid var(--line)}
.head{margin-bottom:72px}

/* Dépliants */
.folds{margin-top:72px;border-top:1px solid var(--line2)}
details.fold{border-bottom:1px solid var(--line2)}
details.fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;min-height:64px;padding:10px 4px;font-family:var(--lx);font-weight:300;font-size:15px;letter-spacing:.01em;color:var(--ink2);transition:color .15s ease-out}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary:hover,details.fold[open]>summary{color:var(--ink)}
.plus{flex:none;position:relative;width:28px;height:28px;border:1.5px solid var(--line2);border-radius:8px;transition:background-color .2s ease-out,border-color .2s ease-out}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--canard);transition:background-color .2s ease-out}
.plus::after{transform:rotate(90deg);transition:transform .4s var(--ease),background-color .2s ease-out}
details.fold summary:hover .plus{border-color:var(--canard)}
details[open]>summary .plus{background:var(--canard);border-color:var(--canard)}
details[open]>summary .plus::after{transform:rotate(0deg)}
details[open]>summary .plus::before,details[open]>summary .plus::after{background:#fff}
/* la hauteur s'anime vraiment à l'ouverture et à la fermeture (navigateurs récents ; ailleurs, ouverture nette) */
:root{interpolate-size:allow-keywords}
details.fold::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
details.fold[open]::details-content{block-size:auto}
.fold .tagd{margin-left:auto;font-family:var(--lx);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.d-body{padding:4px 4px 34px 52px;max-width:860px;color:var(--ink2);font-size:16.5px}
.d-body p+p{margin-top:14px}
details[open]>.d-body{animation:foldIn .55s var(--ease) both}
@keyframes foldIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.ph{font-family:var(--lx);font-size:12px;letter-spacing:.06em;color:var(--mute);margin-top:14px}
.mini{width:100%;border-collapse:collapse;font-size:15px}
.mini th{font-family:var(--lx);font-weight:400;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);padding:10px 8px;border-bottom:1.5px solid var(--ink);text-align:center}
.mini th:first-child,.mini td:first-child{text-align:left;padding-left:0}
.mini td{padding:11px 8px;border-bottom:1px solid var(--line);text-align:center;color:var(--ink)}
.ck{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--canard);color:#fff;font-size:12px;line-height:1}
.no{color:var(--line2)}
.tableish{overflow-x:auto}

/* ───────── S1 — HERO ───────── */
.hero{padding:72px 0 0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;grid-template-areas:"intro formulas" "cta formulas";column-gap:88px;align-items:center;padding:56px 0 72px}
.hero-intro{grid-area:intro;align-self:end}
.hero-cta{grid-area:cta;align-self:start}
.formulas{grid-area:formulas}
.pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--lx);font-weight:400;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--canard);border:1.5px solid var(--canard);border-radius:999px;padding:9px 18px 9px 14px;background:rgba(255,255,255,.7)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tang)}
h1{margin-top:34px;font-weight:300;letter-spacing:-.035em}
.h1-a{display:block;font-size:clamp(21px,2.5vw,36px);line-height:1.18;color:var(--ink)}
.h1-b{display:block;margin-top:.14em;font-weight:600;font-size:clamp(43px,5.7vw,82px);line-height:1;letter-spacing:-.045em}
.ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ln>span{display:block}
.ln>span.grad{display:inline-block;vertical-align:top}
.hero .bar{margin-top:36px}
.points{margin-top:36px;display:grid;gap:13px}
.points li{display:flex;align-items:center;gap:16px;font-size:clamp(17px,1.5vw,20px);font-weight:400;line-height:1.3}
.points li::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;background:var(--canard)}
.points li:nth-child(2)::before{background:var(--canard2)}
.points li:nth-child(3)::before{background:var(--tang)}
.hero-cta{margin-top:44px;display:flex;align-items:center;flex-wrap:wrap;gap:14px 30px}
/* D ← C : bouton tangerine à filet sombre ; au survol il se soulève et découvre une ombre dure */
.btn{color:var(--ink);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border-radius:12px;font-family:var(--lx);font-size:13.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;isolation:isolate;transition:transform .3s var(--ease)}
.btn::before,.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;transition:transform .3s var(--ease)}
.btn::before{z-index:-1;background:var(--tang);border:1.5px solid var(--ink)}
.btn::after{z-index:-2;background:var(--ink)}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translate(-2px,-2px)}
.btn:hover::after{transform:translate(6px,6px)}
.btn:active{transform:translate(1px,1px)}
.btn:active::after{transform:translate(1px,1px)}
.tel{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--lx);font-size:16px;font-weight:400;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .2s}
.tel svg{display:none}
.tel span{background:linear-gradient(var(--tang),var(--tang)) 0 100%/100% 1.5px no-repeat;padding-bottom:5px}
.tel:hover{color:var(--tang-t)}

/* D : la touche téléphone — même langage que le bouton (filet, ombre dure au survol), en bleu canard */
.telkey{display:inline-flex;align-items:center;gap:16px;min-height:56px;color:var(--ink)}
.telkey-ic{position:relative;flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:12px;color:var(--canard);isolation:isolate;transition:transform .3s var(--ease)}
.telkey-ic::before,.telkey-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;transition:transform .3s var(--ease)}
.telkey-ic::before{z-index:-1;background:var(--white);border:1.5px solid var(--canard)}
.telkey-ic::after{z-index:-2;background:var(--canard)}
.telkey-ic svg{width:21px;height:21px}
.telkey-tx{display:grid;gap:3px}
.telkey-tx small{font-family:var(--lx);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.telkey-tx b{font-weight:600;font-size:23px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .25s}
.telkey:hover .telkey-ic{transform:translate(-2px,-2px)}
.telkey:hover .telkey-ic::after{transform:translate(6px,6px)}
.telkey:hover .telkey-ic svg{animation:telring .7s var(--ease)}
.telkey:hover .telkey-tx b{color:var(--canard)}
.telkey:active .telkey-ic{transform:translate(1px,1px)}
.telkey:active .telkey-ic::after{transform:translate(1px,1px)}
@keyframes telring{0%,100%{transform:rotate(0)}18%{transform:rotate(-14deg)}36%{transform:rotate(12deg)}54%{transform:rotate(-8deg)}72%{transform:rotate(5deg)}}

/* les trois boutons-formules */
.formulas{display:grid;gap:16px}
.fbtn{--fc:var(--f1);position:relative;display:block;height:146px;border:1.5px solid var(--fc);border-radius:16px;background:var(--white);overflow:hidden;transition:opacity .35s ease-out,transform .45s var(--ease)}
.fbtn{--ft:#EDF4F5}
.fbtn.f2{--fc:var(--f2);--ft:#FDF2ED} .fbtn.f3{--fc:var(--f3);--ft:#F1F2F3}
/* D ← C : plus de barre verticale ; au survol un voile de couleur balaie le bouton depuis la gauche */
.fbtn::before{content:"";position:absolute;inset:0;background:var(--ft);transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease)}
.fbtn-top{position:absolute;left:30px;right:26px;top:20px;display:flex;justify-content:space-between;align-items:center;font-family:var(--lx);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.crans3{display:flex;gap:4px}
/* D : carrés de A, couleurs de C — 1er cran bleu canard, 2e tangerine, 3e noir */
.crans3 i{width:9px;height:9px;border-radius:2px;border:1.5px solid var(--line2)}
.crans3 i.on:nth-child(1){background:var(--canard);border-color:var(--canard)}
.crans3 i.on:nth-child(2){background:var(--tang);border-color:var(--tang)}
.crans3 i.on:nth-child(3){background:var(--black);border-color:var(--black)}
.fbtn-main{position:absolute;left:30px;right:26px;top:50%;margin-top:-20px;height:48px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;transition:transform .5s var(--ease)}
.fbtn .name{font-weight:500;font-size:28px;letter-spacing:-.025em;line-height:48px}
.fbtn .price,.r-price,.fprice{word-spacing:-.09em}
.eu{word-spacing:-.02em}
.fbtn .price{font-weight:600;font-size:42px;letter-spacing:-.04em;line-height:48px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fc)}
.fbtn .price small{font-family:var(--lx);font-weight:400;font-size:11px;letter-spacing:.16em;color:var(--mute);margin-left:8px}
.fbtn-more{position:absolute;left:30px;right:26px;bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15.5px;font-weight:400;color:var(--ink2);opacity:0;transform:translateY(10px);transition:opacity .35s ease-out,transform .5s var(--ease)}
.fbtn-more .arw{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--fc);color:#fff;transform:translateX(-10px);transition:transform .5s var(--ease)}
.fbtn-more .arw svg{width:15px;height:15px}
@media (hover:hover){
  .fbtn:hover::before,.fbtn:focus-visible::before{transform:scaleX(1)}
  .fbtn:hover .fbtn-main,.fbtn:focus-visible .fbtn-main{transform:translateY(-13px)}
  .fbtn:hover .fbtn-more,.fbtn:focus-visible .fbtn-more{opacity:1;transform:none}
  .fbtn:hover .arw,.fbtn:focus-visible .arw{transform:none}
  .fbtn:hover{transform:translateX(-8px)}
  .fbtn>span{transition:opacity .35s ease-out,transform .5s var(--ease)}
  .formulas:hover .fbtn:not(:hover)>.fbtn-top,.formulas:hover .fbtn:not(:hover)>.fbtn-main{opacity:.4}
}
@media (hover:none){
  .fbtn-main{transform:translateY(-13px)}
  .fbtn-more{opacity:1;transform:none}
  .fbtn-more .arw{transform:none}
}

/* D ← C : trame technique, plus dense côté formules, qui s'efface vers le texte */
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(49,101,111,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(49,101,111,.12) 1px,transparent 1px);background-size:56px 56px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 62% 78% at 78% 48%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);mask-image:radial-gradient(ellipse 62% 78% at 78% 48%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%)}
/* motif du logo (section finale uniquement) */
.motif{position:absolute;z-index:1;pointer-events:none;overflow:visible}
.hero-grid{position:relative;--cw:460px;--mh:min(900px,62.5vw);--mw:calc(var(--mh) * .6667)}
.hero-grid>*{position:relative;z-index:1}
.hero .motif{position:absolute;z-index:0;top:50%;right:calc(var(--cw) - var(--mw) * .5167);height:var(--mh);width:var(--mw);margin-top:calc(var(--mh) / -2)}
.motif .nd,.motif .lk{fill:#ECF2F4}
.motif .hot{fill:var(--sky);opacity:0;transition:opacity .5s ease-out}
.motif .lk{transform-box:fill-box}
.motif .lk.v{transform-origin:center top}
.motif .lk.h{transform-origin:left center}
.motif .nd{transform-box:fill-box;transform-origin:center}
.motif .sig{fill:var(--tang);opacity:0}
.hero[data-hot="1"] .hot.l1,.hero[data-hot="2"] .hot.l1,.hero[data-hot="2"] .hot.l2,.hero[data-hot="3"] .hot{opacity:.5}

/* ───────── D ← B : la feuille ───────── */
.sheet{position:relative;z-index:2;background:var(--bg);border-radius:44px 44px 0 0;box-shadow:0 -28px 70px rgba(26,50,56,.16),0 -1px 0 var(--line)}
.sheet::before{content:"";position:absolute;z-index:3;top:16px;left:50%;width:54px;height:5px;margin-left:-27px;border-radius:3px;background:var(--line2)}
.sheet>section:first-child{border-radius:44px 44px 0 0;border-top:0}
@media (min-width:901px) and (min-height:660px){
  .hero{position:sticky;top:0;z-index:1;height:100vh;height:100svh;min-height:0}
  .sheet{margin-top:-34px}
}
@media (max-width:640px){.sheet,.sheet>section:first-child{border-radius:28px 28px 0 0}}

/* ───────── S2 — SÉLECTEUR ───────── */
.sel{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:80px;align-items:start}
.needs{display:grid;gap:44px}
.needs legend{width:100%;display:flex;align-items:center;gap:18px;font-family:var(--lx);font-weight:400;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);margin-bottom:18px;padding:0}
.needs legend::after{content:"";flex:1;height:1px;background:var(--line2)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{--cc:var(--canard);position:relative;display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 18px 0 14px;border:1.5px solid var(--line2);border-radius:12px;background:var(--white);font-size:16px;font-weight:400;color:var(--ink);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease),border-color .2s,background-color .25s,color .25s}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip .bx{flex:none;display:grid;place-items:center;width:22px;height:22px;border:1.5px solid #A9B7C0;border-radius:7px;background:var(--white);transition:background-color .2s,border-color .2s}
.chip .bx svg{width:13px;height:13px;color:#fff;transform:scale(0);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover){.chip:hover{border-color:var(--canard);transform:translateY(-2px)}}
.chip:active{transform:scale(.97)}
.chip:has(input:focus-visible){outline:3px solid var(--tang-t);outline-offset:3px}
.chip:has(input:checked){border-color:var(--canard);background:#EEF5F6}
.chip:has(input:checked) .bx{background:var(--canard);border-color:var(--canard)}
.chip:has(input:checked) .bx svg{transform:scale(1)}
/* D ← B : la puce qui fixe la formule prend la couleur de B. --ct = texte lisible sur ce fond, --ck = coche */
.sel .chip.is-key:has(input:checked){background:var(--cc);border-color:var(--cc);color:var(--ct)}
.sel .chip.is-key:has(input:checked) .bx{background:#fff;border-color:#fff}
.sel .chip.is-key .bx svg{color:var(--ck)}
.sel[data-level="1"] .chip{--cc:#7FB4BC;--ct:var(--ink);--ck:#2F6B77}
.sel[data-level="2"] .chip{--cc:#31656F;--ct:#fff;--ck:#31656F}
.sel[data-level="3"] .chip{--cc:#EE9673;--ct:var(--ink);--ck:#A94F2B}

.result{--fc:var(--line2);position:sticky;top:104px;border:2px solid var(--fc);border-radius:18px;background:var(--white);transition:border-color .45s ease-out}
.sel[data-level="1"] .result{--fc:var(--f1)} .sel[data-level="2"] .result{--fc:var(--f2)} .sel[data-level="3"] .result{--fc:var(--f3)}
.result::after{content:"";position:absolute;inset:-9px;border:2px solid var(--fc);border-radius:26px;opacity:0;pointer-events:none}
.result.bump::after{animation:ring 1s ease-out}
.r-core{position:relative;padding:22px 30px 26px}
.r-extra{padding:0 30px 28px}
.r-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-family:var(--lx);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.r-head button{font-family:var(--lx);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tang-t);min-height:36px;padding:0 12px;border:1.5px solid var(--line2);border-radius:9px;background:var(--white);transition:border-color .2s,background-color .2s,transform .25s var(--ease)}
.r-head button:hover{border-color:var(--tang-t);background:#FDF2ED}
.r-head button:active{transform:scale(.96)}
.r-head button[hidden]{display:none}
.r-stage{display:grid;min-height:206px;align-items:center}
.r-stage>*{grid-area:1/1;transition:opacity .4s ease-out,transform .55s var(--ease),visibility 0s linear 0s}
.r-empty{font-size:30px;line-height:1.15;letter-spacing:-.03em;font-weight:300;color:var(--ink);max-width:9em}
.r-empty::before{content:"";display:block;width:34px;height:34px;margin-bottom:22px;border:1.5px dashed #A9B7C0;border-radius:10px}
.js .r-empty::before{animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:scale(.86)}}
.r-need{display:block;font-family:var(--lx);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.r-name{display:block;margin-top:6px;font-weight:600;font-size:44px;line-height:1.05;letter-spacing:-.04em;color:var(--fc);transition:color .45s ease-out}
.r-money{margin-top:18px}
.r-price{display:block;font-weight:600;font-size:74px;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.r-price small{font-family:var(--lx);font-weight:400;font-size:12px;letter-spacing:.16em;color:var(--mute);margin-left:10px}
.r-abo{display:block;margin-top:12px;font-size:17px;color:var(--ink2)}
.r-abo b{color:var(--ink)}
.sel[data-level="0"] .r-full{opacity:0;visibility:hidden;transform:translateY(14px);transition-delay:0s,0s,.4s}
.sel:not([data-level="0"]) .r-empty{opacity:0;visibility:hidden;transform:translateY(-14px);transition-delay:0s,0s,.4s}
.gauge{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.gauge span{font-family:var(--lx);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:color .3s}
.gauge span::before{content:"";display:block;height:8px;border-radius:3px;background:#E6ECEF;margin-bottom:9px}
.gauge span{position:relative}
.gauge span i{position:absolute;left:0;right:0;top:0;height:8px;border-radius:3px;background:#7FB4BC;transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease)}
.gauge span:nth-child(2) i{background:#31656F}
.gauge span:nth-child(3) i{background:#EE9673}
.sel[data-level="1"] .gauge span:nth-child(-n+1) i,.sel[data-level="2"] .gauge span:nth-child(-n+2) i,.sel[data-level="3"] .gauge span:nth-child(-n+3) i{transform:scaleX(1)}
.gauge span:nth-child(2) i{transition-delay:.09s}.gauge span:nth-child(3) i{transition-delay:.18s}
.sel[data-level="1"] .gauge span:nth-child(1),.sel[data-level="2"] .gauge span:nth-child(2),.sel[data-level="3"] .gauge span:nth-child(3){color:var(--ink)}
.r-by{min-height:24px;margin-top:16px;font-size:14.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-by b{font-weight:500;color:var(--ink)}
.r-see{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;font-size:16px;color:var(--canard);transition:opacity .3s}
.r-see span{position:relative}
.r-see span::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.r-see:hover span::after{transform:scaleX(1)}
.r-extra .btn{width:100%;justify-content:center;margin-top:6px}
.r-more{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45;color:var(--mute)}
.btn.btn-rdv.r-custom{width:100%;margin-top:12px;height:50px;min-height:50px;font-size:12.5px}
/* D ← B : un petit carré s'envole de la case cochée jusqu'au prix */
.fly{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:4px;pointer-events:none;z-index:99}
.r-more a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;color:var(--tang-t);font-weight:500;white-space:nowrap}
.r-more a:hover{text-decoration:underline}

/* ───────── S3 — FORMULES ───────── */
/* D ← C : dessin des cartes de C. Couleurs = celles du sélecteur (B), pour que « Votre sélection » soit cohérent.
   AUCUN effet au survol : ce ne sont pas des boutons. */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
.fcard{--fc:#7FB4BC;--ft:#2F6B77;--fy:var(--ink);position:relative;display:flex;flex-direction:column;border:2px solid var(--fc);border-radius:20px;background:var(--white);padding:32px 30px 26px}
.fcard.f2{--fc:#31656F;--ft:#31656F;--fy:#fff} .fcard.f3{--fc:#EE9673;--ft:#A94F2B;--fy:var(--ink)}
.fcard::before{content:"";position:absolute;inset:-10px;border:2px solid var(--fc);border-radius:28px;opacity:0;pointer-events:none}
.fcard:target::before{animation:ring 1.5s ease-out .45s 2}
@keyframes ring{0%{opacity:.8;transform:scale(.975)}100%{opacity:0;transform:scale(1.035)}}
.fcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.fcard h3{font-weight:600;font-size:24px;letter-spacing:-.02em;line-height:1.1}
.hat{font-family:var(--lx);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ft);border:1.5px solid var(--fc);border-radius:6px;padding:5px 9px;white-space:nowrap}
.fprice{margin-top:14px;display:flex;align-items:baseline;font-weight:600;font-size:clamp(43px,1.9rem + 2vw,58px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fprice small{font-family:var(--lx);font-weight:400;font-size:12px;letter-spacing:.2em;color:var(--mute);margin-left:8px}
.ftag{margin-top:20px;min-height:3.4em;font-family:var(--lx);font-weight:400;font-size:11.5px;line-height:1.7;letter-spacing:.24em;text-transform:uppercase;color:var(--ft)}
.flist{margin-top:18px;border-top:1px solid var(--line)}
.flist li{position:relative;padding:13px 0 13px 24px;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:400;line-height:1.4;color:var(--ink2);text-wrap:pretty}
.flist li::before{content:"";position:absolute;left:1px;top:19px;width:8px;height:8px;background:var(--fc)}
.ffoot{margin-top:auto;padding-top:22px;font-size:15px;color:var(--ink2);font-variant-numeric:tabular-nums}
.ffoot b{color:var(--ink);font-weight:600}
/* l'étiquette se pose sur la carte que le sélecteur a désignée */
.yours{visibility:hidden;position:absolute;left:24px;top:-13px;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:6px;background:var(--fc);color:var(--fy);font-family:var(--lx);font-weight:400;font-size:10.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(6px) scale(.9);transition:opacity .3s,transform .4s var(--ease),visibility 0s .3s;pointer-events:none}
.yours svg{width:12px;height:12px}
.fcard.is-yours .yours{visibility:visible;opacity:1;transform:none;transition-delay:0s}

/* ───────── S4 — TOUT COMPRIS ───────── */
.incl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.incl li{display:flex}
/* D ← C : le pavé est un vrai bouton, qui ouvre sa pop-up */
.inc{position:relative;display:flex;align-items:center;gap:20px;width:100%;min-height:112px;padding:24px 56px 24px 24px;border:1.5px solid var(--line2);border-radius:18px;background:var(--white);text-align:left;transition:transform .35s var(--ease),border-color .25s}
@media (hover:hover){.inc:hover{transform:translateY(-4px);border-color:var(--canard)}}
.inc:active{transform:translateY(-1px) scale(.99)}
.inc__ico{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:15px;background:#EDF4F5;color:var(--canard);border:1.5px solid var(--sky)}
.inc__ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.inc__t{font-size:clamp(1.05rem,1rem + .3vw,1.22rem);font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
/* le « + » dit qu'il y a un détail derrière, comme sur les dépliants */
.inc__more{position:absolute;right:20px;top:50%;margin-top:-13px;width:26px;height:26px;border:1.5px solid var(--line2);border-radius:7px;transition:background-color .2s,border-color .2s}
.inc__more::before,.inc__more::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--canard);transition:background-color .2s}
.inc__more::after{transform:rotate(90deg)}
.inc:is(:hover,:focus-visible) .inc__more{background:var(--canard);border-color:var(--canard)}
.inc:is(:hover,:focus-visible) .inc__more::before,.inc:is(:hover,:focus-visible) .inc__more::after{background:#fff}

/* la pop-up : sur ordinateur elle naît du pavé cliqué (--dx, --dy, --s posés par le script) et y retourne */
.incp{position:fixed;inset:0;margin:auto;width:min(680px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 48px);overflow:auto;padding:0;border:2px solid var(--canard);border-radius:24px;background:var(--white);color:var(--ink);box-shadow:0 40px 90px -30px rgba(26,50,56,.45);
  opacity:0;transform:translate(var(--dx,0px),var(--dy,24px)) scale(var(--s,.96));
  transition:opacity .3s ease-out,transform .55s var(--ease),overlay .55s allow-discrete,display .55s allow-discrete}
.incp:popover-open{opacity:1;transform:none}
@starting-style{.incp:popover-open{opacity:0;transform:translate(var(--dx,0px),var(--dy,24px)) scale(var(--s,.96))}}
.incp::backdrop{background:rgba(20,32,36,0);transition:background-color .4s,overlay .55s allow-discrete,display .55s allow-discrete}
.incp:popover-open::backdrop{background:rgba(20,32,36,.38)}
@starting-style{.incp:popover-open::backdrop{background:rgba(20,32,36,0)}}
html:has(.incp:popover-open){overflow:hidden}
.incp-in{position:relative;padding:34px 36px 30px}
.incp-head{display:flex;align-items:center;gap:18px;padding-right:48px}
.incp-head .inc__ico{width:56px;height:56px}
.incp-k{font-family:var(--lx);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--canard)}
.incp h3{margin-top:5px;font-weight:600;font-size:clamp(22px,2.3vw,28px);letter-spacing:-.03em;line-height:1.1}
.incp-x{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--line2);border-radius:10px;color:var(--ink);transition:border-color .2s,background-color .2s,transform .35s var(--ease)}
.incp-x:hover{border-color:var(--canard);background:#EEF5F6;transform:rotate(90deg)}
.incp-x svg{width:16px;height:16px}
.incp-lead{margin-top:22px;font-size:17px;line-height:1.6;color:var(--ink2)}
.incp-tw{margin-top:24px;overflow-x:auto}
.incp-t{width:100%;border-collapse:collapse;font-size:15px}
.incp-t th,.incp-t td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.incp-t thead th{padding-top:0;font-family:var(--lx);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);border-bottom:1.5px solid var(--ink)}
.incp-t thead th small{display:block;margin-top:6px;font-family:var(--sg);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap}
.incp-t thead th:first-child,.incp-t th[scope="row"]{text-align:left;padding-left:0}
.incp-t th[scope="row"]{font-weight:400;color:var(--ink);line-height:1.4}
.incp-t .v{display:inline-block;padding:2px 9px;border:1.5px solid var(--line2);border-radius:7px;font-weight:500;font-size:13.5px;white-space:nowrap}
.incp-foot{margin-top:22px;font-size:14px;color:var(--mute)}
.one-line{margin-top:64px;font-size:clamp(22px,2.6vw,34px);line-height:1.2;letter-spacing:-.03em;font-weight:300}
.one-line b{font-weight:600}

/* ───────── S5 — MÉTHODE ───────── */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.track{position:absolute;left:26px;right:calc(25% - 50px);top:26px;height:2px;background:var(--line2);margin-top:-1px}
.track i{position:absolute;inset:0;background:var(--grad);transform-origin:left center}
.step{position:relative}
.num{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line2);background:var(--bg);font-family:var(--lx);font-weight:500;font-size:17px;color:var(--ink);transition:background-color .4s,color .4s,border-color .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.step.on .num{background:var(--ink);border-color:var(--ink);color:#fff;transform:scale(1.08)}
.step h3{margin-top:30px;font-weight:500;font-size:clamp(20px,1.9vw,25px);line-height:1.15;letter-spacing:-.025em}
.step p{margin-top:10px;font-size:16.5px;color:var(--ink2);max-width:15em;line-height:1.45}

/* ───────── S6 — SUR MESURE ───────── */
.duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:88px;align-items:center}
.duo .head{margin-bottom:0}
.callout{border-left:5px solid var(--tang);background:var(--bg);border-radius:0 16px 16px 0;padding:40px 44px}
.callout ul{display:grid;gap:18px}
.callout li{display:flex;align-items:center;gap:18px;font-size:clamp(20px,2vw,26px);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.callout li::before{content:"";flex:none;width:10px;height:10px;border-radius:2px;background:var(--tang)}
.tlink{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:30px;font-weight:500;font-size:18px;color:var(--tang-t)}
.tlink svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.tlink:hover svg{transform:translateX(6px)}
.tlink span{position:relative}
.tlink span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tlink:hover span::after{transform:scaleX(1)}

/* ───────── S7 — PARTENAIRE ───────── */
.face{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);align-items:stretch}
.side{--fc:var(--canard);border:2px solid var(--fc);border-radius:18px;background:var(--white);padding:38px 38px 34px}
.side.d2{--fc:var(--tang)}
.side .who{font-family:var(--lx);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--canard)}
.side.d2 .who{color:var(--tang-t)}
.side h3{margin-top:10px;font-weight:600;font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;line-height:1.05}
.side ul{margin-top:28px;border-top:1px solid var(--line)}
.side li{position:relative;padding:13px 0 13px 24px;border-bottom:1px solid var(--line);font-size:17.5px;font-weight:400}
.side li:last-child{border-bottom:0;padding-bottom:0}
.side li::before{content:"";position:absolute;left:0;top:23px;width:8px;height:8px;border-radius:2px;background:var(--fc)}
.joint{position:relative;z-index:2}
.joint .jl{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:var(--line2);transform-origin:left center}
.joint b{position:absolute;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;border:4px solid var(--bg)}
.joint .jn1{left:-14px;background:var(--canard)}
.joint .jn2{right:-14px;background:var(--tang)}
.quote{margin-top:64px;font-size:clamp(24px,3vw,40px);line-height:1.15;letter-spacing:-.03em;font-weight:300}
.quote b{font-weight:600}

/* ───────── S8 — PERPIGNAN ───────── */
.marks{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.15fr;border:1.5px solid var(--line2);border-radius:16px;background:var(--bg);overflow:hidden}
.marks li{padding:26px 28px;border-left:1.5px solid var(--line2);font-size:18px;font-weight:400;line-height:1.35;display:flex;flex-direction:column;gap:12px;min-width:0}
.marks li:first-child{border-left:0}
.marks small{font-family:var(--lx);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--canard)}
.marks a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;font-weight:500}
.marks a:hover{color:var(--canard);text-decoration:underline;text-underline-offset:4px}
.logos{margin-top:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.logos li{display:grid;place-items:center;height:120px;border:1.5px solid var(--line2);border-radius:16px;background:#fff;padding:22px}
.logos img{max-height:64px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:opacity .3s}
.logos li:hover img{filter:none;opacity:1}

/* ───────── S9 — FAQ ───────── */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:88px;align-items:start}
.faq .folds{margin-top:0}
.faq details.fold summary{font-size:19px;min-height:76px}

/* ───────── S10 — FINAL ───────── */
.final{background:var(--black);color:#fff;overflow:hidden;padding:160px 0;border:0}
.final .motif{right:-90px;bottom:-190px;height:760px;width:auto}
.final .motif .nd,.final .motif .lk{fill:#2E3A3D}
.final .wrap{position:relative;z-index:2}
.final h2{color:#fff;font-size:clamp(34px,5.4vw,76px);max-width:13em;margin-top:0}
.final .grad{background:linear-gradient(95deg,#B7D4D7 0%,#EE9673 85%);-webkit-background-clip:text;background-clip:text}
.final-cta{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px}
.final .tel{color:#fff}.final .tel:hover{color:var(--tang)}
.final .btn::before{border-color:#fff}.final .btn::after{background:#fff}
.proofs{margin-top:64px;display:flex;flex-wrap:wrap;gap:14px 40px;font-family:var(--lx);font-weight:300;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#D5DEE0}
.proofs li{display:flex;align-items:center;gap:12px}
.proofs li::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--tang)}
.final :focus-visible{outline-color:var(--tang)}

/* ───────── états d'entrée (uniquement avec JS) ───────── */
.js [data-reveal]:not(.is-in){opacity:0;transform:translateY(30px)}
.js .bar{transform:scaleX(0)}
.js .hero [data-in]{opacity:0}
.js .hero .ln>span{transform:translateY(108%)}
.js .hero:not(.is-in) .fbtn{opacity:0}
.js .motif.draw .nd{opacity:0;transform:scale(.55)}
.js .motif.draw .lk.v{transform:scaleY(0)}
.js .motif.draw .lk.h{transform:scaleX(0)}
.js .motif.draw.go .nd{opacity:1;transform:none;transition:opacity .5s ease-out,transform .9s cubic-bezier(.34,1.56,.64,1)}
.js .motif.draw.go .lk{transform:none;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.js .motif.draw.go .nd:nth-of-type(1){transition-delay:.30s}.js .motif.draw.go .nd:nth-of-type(2){transition-delay:.40s}
.js .motif.draw.go .nd:nth-of-type(3){transition-delay:.50s}.js .motif.draw.go .nd:nth-of-type(4){transition-delay:.60s}
.js .motif.draw.go .nd:nth-of-type(5){transition-delay:.70s}.js .motif.draw.go .nd:nth-of-type(6){transition-delay:.80s}
.js .motif.draw.go .lk:nth-of-type(1){transition-delay:1.1s}.js .motif.draw.go .lk:nth-of-type(2){transition-delay:1.6s}.js .motif.draw.go .lk:nth-of-type(3){transition-delay:2.1s}
.js .track i{transform:scaleX(0)}
.js .joint .jl{transform:scaleX(0)}
.js .joint .jn2{opacity:0;transform:scale(.4)}
.js .joint.go .jl{transform:none;transition:transform .9s cubic-bezier(.65,0,.35,1) .3s}
.js .joint.go .jn2{opacity:1;transform:none;transition:opacity .3s ease-out 1.05s,transform .6s cubic-bezier(.34,1.56,.64,1) 1.05s}

/* ───────── Responsive ───────── */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 400px;column-gap:56px;--cw:400px}
  .sel{grid-template-columns:minmax(0,1fr) 360px;gap:48px}
  .r-price{font-size:64px}
  .duo,.faq{gap:56px}
  .face{grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr)}
}
@media (max-width:900px){
  :root{--pad:24px}
  section{padding:104px 0}
  .head{margin-bottom:52px}
  .hero{min-height:0;display:block}
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "formulas" "cta";padding:32px 0 64px}
  .formulas{margin-top:34px}
  .hero-cta{margin-top:32px}
  .hero-grid{--mh:560px}
  .hero .motif{right:-150px;top:-30px;margin-top:0}
  .fbtn:hover{transform:none}
  .sel{display:block}
  .result{display:contents}
  .result::after{content:none}
  .r-core::after{content:"";position:absolute;inset:-7px;border:2px solid var(--fc);border-radius:22px;opacity:0;pointer-events:none}
  .result.bump .r-core::after{animation:ring 1s ease-out}
  .r-core{position:sticky;bottom:12px;z-index:20;margin-top:40px;border:2px solid var(--fc);border-radius:16px;background:var(--white);padding:4px 18px 14px;box-shadow:0 18px 40px -18px rgba(26,40,45,.45);transition:border-color .45s ease-out}
  .r-extra{padding:22px 0 0}
  .r-head{min-height:40px}
  .sel[data-level="0"] .r-head,.sel[data-level="0"] .r-see{display:none}
  .sel[data-level="0"] .r-core{padding-top:12px}
  .r-stage{min-height:58px}
  .r-empty{font-size:16.5px;letter-spacing:-.015em;max-width:none;display:flex;align-items:center;gap:12px}
  .r-empty::before{width:24px;height:24px;border-radius:7px;margin:0;flex:none}
  .r-full{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
  .r-need{font-size:10px}
  .r-name{font-size:27px;margin-top:2px}
  .r-money{margin:0;text-align:right}
  .r-price{font-size:34px}
  .r-price small{font-size:10px;margin-left:5px}
  .r-abo{margin-top:3px;font-size:13.5px}
  .r-by{display:none}
  .r-foot{display:flex;align-items:center;gap:16px;margin-top:10px}
  .gauge{flex:1;margin-top:0}
  .gauge span{font-size:0}
  .gauge span::before{margin-bottom:0}
  .r-see{font-size:14.5px;min-height:44px;margin:-10px 0}
  .cards{grid-template-columns:minmax(0,1fr);gap:20px}
  .ftag{min-height:0}
  .incl{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .inc{min-height:100px;padding:20px 50px 20px 20px;gap:16px}
  .inc__ico{width:52px;height:52px;border-radius:13px}
  .inc__more{right:16px;width:24px;height:24px;margin-top:-12px}
  .steps{grid-template-columns:minmax(0,1fr);gap:0}
  .track{left:25px;right:auto;top:26px;bottom:60px;width:2px;height:auto;margin:0 0 0 0}
  .track i{transform-origin:center top}
  .js .track i{transform:scaleY(0)}
  .step{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:22px;padding-bottom:40px}
  .step:last-child{padding-bottom:0}
  .step .num{grid-row:1/3}
  .step h3{margin-top:4px}
  .step p{max-width:none;margin-top:4px}
  .duo,.faq{grid-template-columns:minmax(0,1fr);gap:44px}
  .callout{padding:30px 26px}
  .face{grid-template-columns:minmax(0,1fr)}
  .joint{height:72px}
  .joint .jl{left:50%;right:auto;top:0;bottom:0;width:6px;height:auto;margin:0 0 0 -3px;transform-origin:center top}
  .js .joint .jl{transform:scaleY(0)}
  .joint b{left:50%;margin:0 0 0 -14px}
  .joint .jn1{top:-14px;left:50%}
  .joint .jn2{top:auto;bottom:-14px;right:auto}
  .side{padding:28px 24px}
  .marks{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .marks li{border-left:0;border-top:1.5px solid var(--line2);padding:20px;font-size:16px}
  .marks li:nth-child(-n+2){border-top:0}
  .marks li:nth-child(even){border-left:1.5px solid var(--line2)}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .logos li{height:96px}
  .final{padding:110px 0}
  .final .motif{height:460px;right:-170px;bottom:-230px}
  .d-body{padding-left:4px}
  .fold .tagd{display:none}
}
@media (max-width:560px){
  :root{--pad:20px}
  body{font-size:16px}
  .btn.btn-rdv{min-height:44px;height:44px;padding:0 14px;font-size:11.5px}
  .btn.btn-tel{padding:0 12px;min-width:44px}
  .telkey-tx b{font-size:21px}
  .hero{padding-top:60px}
  .hero-grid{padding:20px 0 56px}
  .pill{font-size:9.5px;letter-spacing:.2em;padding:7px 12px 7px 10px;gap:8px}
  h1{margin-top:18px}
  .h1-b{margin-top:.1em}
  .hero .bar{display:none}
  .points{margin-top:18px;gap:7px}
  .points li{font-size:16px;gap:12px}
  .points li::before{width:8px;height:8px}
  .formulas{margin-top:22px;gap:10px}
  .fbtn{height:88px;border-radius:14px}
  .fbtn-top{display:none}
  .fbtn-main{left:22px;right:16px;top:14px;margin-top:0;height:34px;transform:none!important}
  .fbtn .name{font-size:21px;line-height:34px}
  .fbtn .price{font-size:28px;line-height:34px}
  .fbtn .price small{font-size:9.5px;margin-left:5px}
  .fbtn-more{left:22px;right:16px;bottom:13px;font-size:12.5px;letter-spacing:-.01em;line-height:1.2;gap:8px}
  .fbtn-more>span:first-child{white-space:nowrap}
  .hero-grid{--mh:520px}
  .hero .motif{right:-225px;top:-24px}
  .fbtn-more .arw{width:22px;height:22px;border-radius:6px}
  .fbtn-more .arw svg{width:12px;height:12px}
  .hero-cta{margin-top:24px;gap:6px 22px}
  .btn{min-height:54px;padding:0 24px;font-size:13px}
  .hero-cta .btn{width:100%;justify-content:center}
  .tel{font-size:18px}
  .chips{gap:8px}
  .chip{font-size:15px;min-height:48px;padding:0 14px 0 11px;gap:10px}
  .needs{gap:36px}
  .fcard{padding:28px 24px 24px}
  .marks{grid-template-columns:minmax(0,1fr)}
  .marks li,.marks li:nth-child(even){border-left:0;border-top:1.5px solid var(--line2)}
  .marks li:first-child{border-top:0}
  .marks li:nth-child(2){border-top:1.5px solid var(--line2)}
  details.fold summary{font-size:16px;gap:14px}
  .mini{font-size:14px}
  .mini th{font-size:9px;letter-spacing:.08em;padding:10px 3px}
  .mini td{padding:11px 3px}
  .faq details.fold summary{font-size:17px}
  .final-cta .btn{width:100%;justify-content:center}
}
@media (max-width:560px){
  .incl{grid-template-columns:minmax(0,1fr);gap:12px}
  .inc{min-height:88px}
  /* sur téléphone, la pop-up monte du bas de l'écran comme une feuille */
  .incp{inset:auto 0 0 0;margin:0;width:100%;max-height:88dvh;border-width:2px 0 0;border-radius:24px 24px 0 0;--dx:0px;--dy:100%;--s:1}
  .incp-in{padding:30px 20px 26px}
  .incp-in::before{content:"";position:absolute;top:10px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:var(--line2)}
  .incp-x{top:18px;right:16px}
  .incp-lead{font-size:16px}
  .incp-t{font-size:14px}
  .incp-t thead th{letter-spacing:.1em;font-size:9.5px}
  .incp-t th,.incp-t td{padding:11px 4px}
}
@media (max-width:385px){
  .fbtn-more .arw{display:none}
  .fbtn-more{font-size:12px}
  .r-empty{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ═══════ D : dépliants remplis par le site (grilles, FAQ) ═══════ */
.fold summary h3{font:inherit;letter-spacing:inherit;line-height:inherit;margin:0}
.mini{min-width:560px}
.mini caption{text-align:left;padding-bottom:12px;font-family:var(--lx);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mini th[scope="row"]{font-family:var(--sg);font-weight:400;font-size:inherit;letter-spacing:0;text-transform:none;color:var(--ink);text-align:left;padding:11px 8px 11px 0;border-bottom:1px solid var(--line)}
.mini .grp th{font-family:var(--lx);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--canard);text-align:left;padding:26px 0 10px;border-bottom:1.5px solid var(--line2)}
.mini .val{display:inline-block;padding:2px 9px;border:1.5px solid var(--line2);border-radius:7px;font-weight:500;font-size:13.5px;white-space:nowrap}
.tableish{position:relative}
.lex{display:grid;margin:0}
.lex>div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.lex>div:last-child{border-bottom:0}
.lex dt{font-weight:500;color:var(--ink)}
.lex dd{margin:0}
.d-body a{color:var(--canard);font-weight:500;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.2em}

/* ═══════ S4 — D2Prod : le cadre central ═══════ */
.d2{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);border:2px solid var(--line2);border-radius:28px;background:var(--white);overflow:hidden}
.d2-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding:56px 52px;border-right:1.5px solid var(--line)}
.d2-logo{display:block;width:min(340px,100%);transition:transform .4s var(--ease)}
.d2-logo:hover{transform:scale(1.03)}
.d2-logo img{display:block;width:100%;height:auto}
.d2-base{font-size:18px;line-height:1.5;color:var(--ink2);max-width:24em}
.d2-actions{display:flex;flex-wrap:wrap;gap:12px}
.d2-tel{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--lx);font-size:15px;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.d2-tel svg{width:17px;height:17px;color:var(--tang-t)}
.d2-tel:hover{color:var(--tang-t)}
.d2-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.d2-svc li{display:flex}
.d2-svc a{display:flex;flex-direction:column;width:100%;padding:36px 36px 34px;border-bottom:1.5px solid var(--line);transition:background-color .25s}
.d2-svc li:nth-child(odd) a{border-right:1.5px solid var(--line)}
.d2-svc li:nth-last-child(-n+2) a{border-bottom:0}
.d2-svc a:hover{background:#FDF6F2}
.d2-k{font-family:var(--lx);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--tang-t)}
.d2-t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.d2-t svg{flex:none;width:18px;height:18px;color:var(--mute);transition:transform .35s var(--ease),color .2s}
.d2-svc a:hover .d2-t svg{transform:translate(3px,-3px);color:var(--tang-t)}
.d2-d{margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink2)}

/* ═══════ S5 — agence locale ═══════ */
.loc{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:72px;align-items:start}
.loc-txt p{font-size:clamp(17px,1.3vw,19px);line-height:1.8;color:var(--ink2);max-width:40em}
.loc-txt p+p{margin-top:22px}
.loc-txt strong{color:var(--canard);font-weight:600}
.loc-more a{display:inline-flex;min-height:44px;align-items:center;font-weight:500;color:var(--canard);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.25em}
.loc-more a:hover{text-decoration-color:var(--canard)}
.loc-id{border:2px solid var(--line2);border-radius:22px;background:var(--bg);padding:30px 30px 26px}
.loc-id-k{font-family:var(--lx);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--canard)}
.loc-id ul{margin-top:14px}
.loc-id li{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.45;color:var(--ink)}
.loc-id li svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--canard)}
.loc-id li a:hover{color:var(--canard)}
.loc-id-s{margin-top:14px;font-size:13.5px;color:var(--mute)}
#perpignan .logos{margin-top:56px}
.loc-real{margin-top:32px;display:flex;justify-content:center}
@media (max-width:560px){.loc-real .btn{width:100%}}

/* ═══════ S7 — contact ═══════ */
.ct{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:start}
.ct .head{margin-bottom:0}
.ct h2{font-size:clamp(30px,3.3vw,46px)}
.ct-proofs{margin-top:44px;display:grid;gap:12px}
.ct-proofs li{display:flex;align-items:center;gap:14px;font-size:19px;font-weight:400}
.ct-proofs li::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;background:var(--tang)}
.ct-direct{margin-top:44px;display:grid;gap:18px;justify-items:start}
.ct-mail{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:17px;color:var(--ink)}
.ct-mail svg{width:20px;height:20px;color:var(--canard)}
.ct-mail span{background:linear-gradient(var(--tang),var(--tang)) 0 100%/100% 1.5px no-repeat;padding-bottom:4px}
.ct-mail:hover{color:var(--canard)}
.ct-form{display:grid;gap:18px;padding:40px 40px 36px;border:2px solid var(--canard);border-radius:26px;background:var(--white);box-shadow:0 30px 70px -40px rgba(26,50,56,.35)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:grid;gap:8px}
.fld>span{font-family:var(--lx);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.fld input,.fld select,.fld textarea{width:100%;min-height:52px;padding:12px 16px;border:1.5px solid var(--line2);border-radius:12px;background:var(--white);font:inherit;font-size:16px;font-weight:400;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.fld textarea{min-height:130px;resize:vertical;line-height:1.5}
.fld select{appearance:none;-webkit-appearance:none;padding-right:44px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2331656F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center/18px no-repeat;cursor:pointer}
.fld input::placeholder,.fld textarea::placeholder{color:#9AA7B0}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:#A9B7C0}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--canard);box-shadow:0 0 0 4px rgba(49,101,111,.12)}
.ct-recap{padding:12px 16px;border-radius:12px;background:#EEF5F6;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.ct-recap b{font-weight:500;color:var(--ink)}
.ct-note{font-size:13.5px;line-height:1.5;color:var(--mute)}
.ct-note a{text-decoration:underline;text-underline-offset:.2em}
.ct-form .btn{justify-self:start}
.ct-ok{padding:18px 20px;border-radius:14px;border:1.5px solid var(--canard);background:#EEF5F6;font-size:16px;line-height:1.5;color:var(--ink)}
.ct-ok b{font-weight:600}
.ct-ok a{color:var(--canard);font-weight:500;text-decoration:underline;text-underline-offset:.2em}
.ct-form.is-sent .fld,.ct-form.is-sent .ct-row,.ct-form.is-sent .ct-note,.ct-form.is-sent .btn,.ct-form.is-sent .ct-recap{display:none}

/* ═══════ Footer ═══════ */
.foot{position:relative;overflow:hidden;background:var(--black);color:#C9D3D6;padding:110px 0 0}
.foot .motif{right:-90px;bottom:-190px;height:760px;width:auto}
.foot .motif .nd,.foot .motif .lk{fill:#2E3A3D}
.foot .wrap{position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr));gap:48px}
.foot-brand{display:grid;gap:26px;justify-items:start;align-content:start}
.foot-brand img{height:36px;width:auto}
.foot-tag{font-size:17px;line-height:1.5;color:#C9D3D6}
.foot-tag b{color:#fff;font-weight:600}
.foot .btn::before{border-color:#fff}.foot .btn::after{background:#fff}
.foot-presta{display:inline-flex;align-items:center;gap:12px;font-size:13px;color:#9FB0B5}
.foot-presta img{box-sizing:content-box;height:28px;width:auto;padding:8px 12px;border-radius:10px;background:#fff}  /* cadre blanc : le logo reste lisible sur le fond sombre */
.foot-presta:hover{color:#fff}
.foot-t{font-family:var(--lx);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#8FA1A6;margin-bottom:18px}
.foot-t2{margin-top:30px}
.foot-col li+li{margin-top:12px}
.foot-col a{font-size:15px;line-height:1.4;color:#E6ECEE;transition:color .2s}
.foot-col a:hover{color:var(--tang)}
.foot-contact li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;color:#E6ECEE}
.foot-contact svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--tang)}
.foot-bottom{margin-top:80px;padding:26px 0 34px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;font-size:13.5px;color:#9FB0B5}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-bottom a:hover{color:#fff}
.foot :focus-visible{outline-color:var(--tang)}

@media (max-width:1100px){
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .ct{gap:48px}
  .loc{gap:48px}
}
@media (max-width:900px){
  .d2{grid-template-columns:minmax(0,1fr)}
  .d2-brand{border-right:0;border-bottom:1.5px solid var(--line);padding:40px 28px}
  .loc,.ct{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
  .foot .motif{height:460px;right:-170px;bottom:-230px}
}
@media (max-width:560px){
  .d2-svc{grid-template-columns:minmax(0,1fr)}
  .d2-svc li:nth-child(odd) a{border-right:0}
  .d2-svc li:nth-last-child(2) a{border-bottom:1.5px solid var(--line)}
  .d2-svc a{padding:26px 24px}
  .ct-row{grid-template-columns:minmax(0,1fr)}
  .ct-form{padding:28px 20px 24px;border-radius:22px}
  .ct-form .btn{justify-self:stretch}
  .lex>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}

/* ═══════ Multi-pages (21/09) ═══════ */
/* les paragraphes sont justifiés, avec césure française pour éviter les « rivières » */
.loc-txt p,.d-body p,.incp-lead,.d2-base,.d2-d,.lex dd,.pg-lead,.pg-txt p,.ct-intro,.zn-txt p,.rl-txt p,.rl-card p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* « Ils nous font confiance » : logos + lien vers les réalisations */
.trust{margin-top:64px;padding-top:48px;border-top:1px solid var(--line)}
.trust-k{font-family:var(--lx);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--canard);text-align:center}
.trust .logos{margin-top:22px}
/* bandeau d'appel final, qui renvoie vers la page contact */
.cta-final .cta-in{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:32px 64px;align-items:center;padding:56px;border:2px solid var(--canard);border-radius:28px;background:var(--white)}
.cta-final h2{margin-top:14px;font-size:clamp(28px,3.4vw,46px)}
.cta-final .cta-act{display:grid;gap:18px;justify-items:start}
.cta-final .proofs-l{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--lx);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.cta-final .proofs-l li{display:flex;align-items:center;gap:10px}
.cta-final .proofs-l li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--tang)}
@media (max-width:900px){.cta-final .cta-in{grid-template-columns:minmax(0,1fr);padding:36px 24px}}

/* ═══════ Sous-pages : hero à colonne droite libre ═══════ */
.js .hero:not(.is-in) .hero-side>*{opacity:0}
/* tuiles de contact / liens de zone : même langage que les boutons-formules (voile au survol) */
.ctiles{gap:14px}
.ctile{position:relative;display:flex;align-items:center;gap:18px;min-height:96px;padding:18px 22px;border:1.5px solid var(--line2);border-radius:16px;background:var(--white);overflow:hidden;color:var(--ink);transition:border-color .25s,transform .35s var(--ease)}
.ctile::before{content:"";position:absolute;inset:0;background:#EDF4F5;transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease)}
.ctile>*{position:relative}
@media (hover:hover){.ctile:hover{border-color:var(--canard)}.ctile:hover::before{transform:scaleX(1)}}
.ctile:focus-visible::before{transform:scaleX(1)}
.ctile .inc__ico{width:52px;height:52px;border-radius:13px}
.ctile-k{display:block;font-family:var(--lx);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.ctile-v{display:block;margin-top:4px;font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ctile-go{margin-left:auto;flex:none;display:grid;place-items:center;width:32px;height:32px;border:1.5px solid var(--line2);border-radius:9px;color:var(--canard);transition:transform .35s var(--ease),background-color .2s,border-color .2s}
.ctile-go svg{width:15px;height:15px}
.ctile:hover .ctile-go{transform:translateX(3px);background:var(--white);border-color:var(--canard)}
.inc.inc-static{cursor:default}
@media (hover:hover){.inc.inc-static:hover{transform:none;border-color:var(--line2)}}

/* ═══════ Contact : formulaire + créneau visio ═══════ */
.ctf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:start}
.ctf .ct-form{box-shadow:none}
.ctf-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.ctf-foot .ct-note{max-width:40em}
.ctf .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.ctf .btn:disabled::after{transform:none}
.ctf.is-sent .ctf-main,.ctf.is-sent .book,.ctf.is-sent .ctf-foot{display:none}
.ctf .ct-ok{grid-column:1/-1}
/* erreurs du formulaire (contact.js) : message général et champ signalé */
.ct-err{grid-column:1/-1;padding:18px 20px;border-radius:14px;border:1.5px solid #D64545;background:#FDF2F2;font-size:16px;line-height:1.5;color:var(--ink)}
.ct-err b{font-weight:600}
.ct-err:focus{outline:none}
.fld-err,.fld>.fld-err{display:block;margin-top:2px;font-family:inherit;font-size:13.5px;letter-spacing:0;text-transform:none;line-height:1.4;color:#B42318}
.slots-w .fld-err{margin-top:12px}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"],.fld select[aria-invalid="true"]{border-color:#D64545}
.fld input[aria-invalid="true"]:focus,.fld textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(214,69,69,.14)}
.ctf[aria-busy="true"] .btn{cursor:progress}
.book{padding:30px 30px 28px;border:2px solid var(--line2);border-radius:26px;background:var(--white);transition:border-color .3s}
.book:not(.is-off){border-color:var(--canard)}
.book-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 20px}
.book-k{font-family:var(--lx);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--tang-t)}
.book h3{margin-top:5px;font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.book-body{margin-top:24px;transition:opacity .3s}
.book.is-off .book-body{opacity:.4}
/* interrupteur */
.sw{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-family:var(--lx);font-size:13px;letter-spacing:.04em;color:var(--ink)}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw-ui{position:relative;flex:none;width:48px;height:28px;border-radius:99px;background:#D5DEE3;transition:background-color .25s}
.sw-ui::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .35s var(--ease)}
.sw input:checked+.sw-ui{background:var(--canard)}
.sw input:checked+.sw-ui::after{transform:translateX(20px)}
.sw input:focus-visible+.sw-ui{outline:3px solid var(--tang-t);outline-offset:3px}
/* calendrier */
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cal-nav button{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--line2);border-radius:10px;color:var(--ink);transition:border-color .2s}
.cal-nav button:hover:not(:disabled){border-color:var(--canard)}
.cal-nav button:disabled{opacity:.35;cursor:default}
.cal-nav svg{width:16px;height:16px}
.cal-m{font-weight:600;font-size:17px;text-transform:capitalize}
.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:14px}
.cal-dn{padding:4px 0;text-align:center;font-family:var(--lx);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cal-d{aspect-ratio:1;display:grid;place-items:center;min-height:36px;border:1.5px solid transparent;border-radius:10px;font-size:15px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--ink);transition:border-color .2s,background-color .2s}
.cal-d:not(:disabled):hover{border-color:var(--canard)}
.cal-d:disabled{color:#B8C3C9;cursor:default}
.cal-d.is-today{border-color:var(--line2)}
.cal-d[aria-pressed="true"]{background:var(--canard);border-color:var(--canard);color:#fff}
.slots-w{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.slots-k{font-size:14.5px;color:var(--ink2)}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.slot{min-height:44px;padding:0 16px;border:1.5px solid var(--line2);border-radius:10px;font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink);transition:border-color .2s,background-color .2s,transform .25s var(--ease)}
.slot:hover{border-color:var(--canard)}
.slot:active{transform:scale(.96)}
.slot[aria-pressed="true"]{background:var(--canard);border-color:var(--canard);color:#fff}
.book-sum{margin-top:18px;padding:12px 16px;border-radius:12px;background:#EEF5F6;font-size:15px;color:var(--ink2)}
.book-sum b{color:var(--ink);font-weight:600}
/* implantations */
.zlinks{display:grid;gap:12px;margin-top:28px}
.zn-tarn{margin-top:18px;font-size:15px;color:var(--ink2)}
.zn-tarn a{color:var(--canard);font-weight:500;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.2em}
#pourquoi .incl{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .ctf{grid-template-columns:minmax(0,1fr)}
  #pourquoi .incl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .book{padding:24px 18px 22px;border-radius:22px}
  .ctile{min-height:84px;padding:14px 16px;gap:14px}
  .ctile .inc__ico{width:44px;height:44px;border-radius:11px}
  .ctile-v{font-size:16px}
}

/* ═══════ Composants communs à toutes les pages (générées par _src/build.py) ═══════ */
/* « Ils nous font confiance » : chaque logo est une carte cliquable vers la fiche du projet,
   avec le même geste que les boutons-formules du hero (remplissage, détail qui monte, flèche). */
.tgrid{margin-top:22px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.tcard{position:relative;display:block;height:170px;border:1.5px solid var(--line2);border-radius:16px;background:var(--white);overflow:hidden;transition:border-color .3s ease-out,transform .45s var(--ease)}
.tcard::before{content:"";position:absolute;inset:0;background:#EDF4F5;transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease)}
.tcard-logo{position:absolute;inset:0;display:grid;place-items:center;padding:22px 24px;transition:transform .5s var(--ease)}
.tcard-logo img{max-height:64px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.tcard-logo img.wm{width:150px;height:auto;max-height:none}
.tcard-more{position:absolute;left:20px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .35s ease-out,transform .5s var(--ease)}
.tcard-more b{display:block;font-weight:500;font-size:15px;line-height:1.25;color:var(--ink)}
.tcard-more small{display:block;margin-top:3px;font-family:var(--lx);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.tcard-more .arw{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--canard);color:#fff;transform:translateX(-8px);transition:transform .5s var(--ease)}
.tcard-more .arw svg{width:15px;height:15px}
@media (hover:hover){
  .tcard:hover,.tcard:focus-visible{border-color:var(--canard);transform:translateY(-4px)}
  .tcard:hover::before,.tcard:focus-visible::before{transform:scaleX(1)}
  .tcard:hover .tcard-logo,.tcard:focus-visible .tcard-logo{transform:translateY(-22px)}
  .tcard:hover img,.tcard:focus-visible img{filter:none;opacity:1}
  .tcard:hover .tcard-more,.tcard:focus-visible .tcard-more{opacity:1;transform:none}
  .tcard:hover .arw,.tcard:focus-visible .arw{transform:none}
}
@media (hover:none){
  .tcard-logo{transform:translateY(-22px)}
  .tcard img{filter:none;opacity:1}
  .tcard-more{opacity:1;transform:none}
  .tcard-more .arw{transform:none}
}
/* étiquettes de formule, aux couleurs du sélecteur de l'accueil */
.lv{flex:none;display:inline-block;font-family:var(--lx);font-weight:400;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1;padding:6px 9px;border:1.5px solid;border-radius:6px;white-space:nowrap}
.lv1{color:#2F6B77;border-color:#7FB4BC;background:var(--white)}
.lv2{color:#fff;border-color:#31656F;background:#31656F}
.lv3{color:var(--ink);border-color:#EE9673;background:#EE9673}
.lv-map{margin-top:22px;border-top:1.5px solid var(--ink)}
.lv-map li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:400;line-height:1.4;color:var(--ink)}
.lv-res{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:17px;color:var(--ink2)}
.lv-res b{font-weight:600;font-size:clamp(20px,2vw,24px);letter-spacing:-.02em;color:var(--ink)}
/* communes : de simples repères, rien de cliquable */
.around{margin-top:64px;padding-top:44px;border-top:1px solid var(--line)}
.around-k{font-family:var(--lx);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--canard)}
.communes{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.communes li{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 16px;border:1.5px solid var(--line2);border-radius:12px;background:var(--white);font-size:16px;font-weight:400;color:var(--ink)}
.communes li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--canard)}
.communes li.base{border-color:var(--canard)}
.communes li.base::before{background:var(--tang)}
.communes li small{font-family:var(--lx);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tang-t)}
.around-more{margin-top:18px;font-size:15.5px;color:var(--ink2)}
.around-more a,.txt-lnk{color:var(--canard);font-weight:500;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.2em}
.around-more a{display:inline-flex;align-items:center;min-height:44px}
.around-more a:hover,.txt-lnk:hover{text-decoration-color:var(--canard)}
/* deux formules au lieu de trois (sites internet) */
@media (min-width:901px){.cards.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cards-2 .fprice small,.site-hero .fbtn .price small{word-spacing:normal}
/* zones : quatre tuiles de même rang */
.zlinks.zlinks-4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tcard{height:156px}
}
@media (max-width:560px){
  .tcard{height:150px}
  .tcard-more{left:14px;right:12px;bottom:12px}
  .tcard-more b{font-size:14px}
  .tcard-more small{font-size:9px;letter-spacing:.12em}
  .tcard-logo img{max-width:110px;max-height:52px}
  .tcard-logo img.wm{width:120px}
  .around{margin-top:48px;padding-top:36px}
  .communes{gap:8px}
  .communes li{min-height:42px;padding:0 14px 0 12px;font-size:15px}
  .lv-map li{font-size:14.5px}
  .zlinks.zlinks-4{grid-template-columns:minmax(0,1fr)}
}
/* texte court du hero, à la place des trois points (réalisations, blog) */
.hero-lead{margin-top:32px;max-width:34em;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--ink2);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* chiffres du hero (réalisations) : même cadre que les boutons-formules, sans clic */
.stats{display:grid;gap:18px}
.stat{--fc:var(--f1);position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;height:146px;padding:0 30px;border:1.5px solid var(--fc);border-radius:16px;background:var(--white)}
.stat.f2{--fc:var(--f2)} .stat.f3{--fc:var(--tang-t)}
.stat-k{font-family:var(--lx);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.stat-v{display:block;margin-top:6px;font-weight:500;font-size:26px;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.stat-n{flex:none;font-weight:600;font-size:clamp(46px,4.4vw,64px);letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--fc)}
/* cartes-projets (réalisations, fiches) : toute la carte mène à la fiche */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.pgrid>li{display:flex}
.pcard{position:relative;display:flex;flex-direction:column;width:100%;border:1.5px solid var(--line2);border-radius:20px;background:var(--white);overflow:hidden;transition:transform .35s var(--ease),border-color .25s}
@media (hover:hover){.pcard:hover{transform:translateY(-4px);border-color:var(--canard)}}
.pcard:active{transform:translateY(-1px) scale(.99)}
.pcard-shot{display:block;aspect-ratio:16/9;background:#EEF3F5;border-bottom:1.5px solid var(--line);overflow:hidden}
.pcard-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s var(--ease)}
@media (hover:hover){.pcard:hover .pcard-shot img{transform:scale(1.03)}}
.pcard-body{flex:1;display:flex;flex-direction:column;padding:22px 24px 20px}
.pcard-k{font-family:var(--lx);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--canard)}
.pcard h3{margin-top:8px;font-weight:600;font-size:23px;line-height:1.12;letter-spacing:-.02em}
.pcard-type{align-self:flex-start;margin-top:12px;font-family:var(--lx);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border:1.5px solid var(--line2);border-radius:6px;padding:4px 9px;white-space:nowrap}
.pcard-p{display:block;margin-top:14px;font-size:15.5px;line-height:1.5;color:var(--ink2);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.pcard-go{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:12px;min-height:44px;font-family:var(--lx);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tang-t)}
.pcard-go .arw{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1.5px solid var(--line2);color:var(--canard);transition:background .25s,border-color .25s,color .25s,transform .45s var(--ease)}
.pcard-go .arw svg{width:14px;height:14px}
@media (hover:hover){.pcard:hover .pcard-go .arw{background:var(--canard);border-color:var(--canard);color:#fff;transform:translateX(4px)}}
.pgrid+.head{margin-top:0}
/* fiche projet */
.shot{margin:0;border:1.5px solid var(--line2);border-radius:18px;background:var(--white);overflow:hidden;box-shadow:0 30px 60px -30px rgba(26,26,26,.25)}
.shot-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-bottom:1.5px solid var(--line);background:#F4F7F8}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.shot-bar i:first-child{background:var(--tang)}
.shot-bar span{flex:1;margin-left:10px;height:24px;display:flex;align-items:center;padding:0 12px;border-radius:7px;background:var(--white);font-family:var(--lx);font-size:11.5px;letter-spacing:.04em;color:var(--mute);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center}
.pj-facts{border:1.5px solid var(--line2);border-radius:20px;background:var(--white);padding:26px 28px}
.pj-facts dl{margin:14px 0 0;display:grid}
.pj-facts dl>div{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.pj-facts dt{font-family:var(--lx);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pj-facts dd{margin:0;font-size:16px;font-weight:400;color:var(--ink);overflow-wrap:anywhere}
.pj-facts dd a{color:var(--canard);font-weight:500;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.2em}
.pj-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;counter-reset:f}
.pj-feat li{counter-increment:f;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:400;line-height:1.45;color:var(--ink)}
.pj-feat li::before{content:counter(f,decimal-leading-zero);font-family:var(--lx);font-size:12px;letter-spacing:.14em;color:var(--tang-t)}
.pj-tech{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.pj-tech li{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1.5px solid var(--line2);border-radius:12px;background:var(--white);font-size:15px;font-weight:500;color:var(--ink)}
/* blog */
.bfilter{margin-bottom:36px;display:flex;flex-wrap:wrap;gap:10px}
.bfilter button{min-height:44px;padding:0 18px;border:1.5px solid var(--line2);border-radius:12px;background:var(--white);font-family:var(--lx);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);transition:border-color .2s,background .2s,color .2s}
.bfilter button:hover{border-color:var(--canard)}
.bfilter button[aria-pressed="true"]{background:var(--canard);border-color:var(--canard);color:#fff}
.bfilter button small{margin-left:8px;opacity:.7}
.pcard-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:14px;font-family:var(--lx);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pgrid>li[hidden]{display:none}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.pj-feat{grid-template-columns:minmax(0,1fr);gap:0}}
@media (max-width:640px){.pgrid{grid-template-columns:minmax(0,1fr);gap:20px}}
@media (max-width:560px){
  .stat{height:112px;padding:0 20px}
  .stat-v{font-size:20px}
  .pcard-body{padding:20px 20px 16px}
  .pcard h3{font-size:21px}
  .pj-facts{padding:22px 20px}
  .pj-feat li{font-size:16px;padding:16px 0}
}
.hero-side{grid-area:formulas}
@media (min-width:1101px){.hero-wide .hero-grid{grid-template-columns:minmax(0,1fr) 520px;column-gap:64px}}
.hero-wide .h1-b{font-size:clamp(40px,4.6vw,66px)}
.hero-cta .telkey-ext .telkey-tx b{font-size:15px;overflow-wrap:anywhere}
@media (min-width:1101px){.pgrid.pgrid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 22px}.pgrid-4 .pcard h3{font-size:21px}.pgrid-4 .pcard-body{padding:20px 20px 18px}}
@media (max-width:900px){.shot.hero-side,.stats.hero-side,.pcard.hero-side{margin-top:36px}}
/* ═══════ Article de blog ═══════ */
.hero-article .h1-b{font-size:clamp(34px,4vw,58px);line-height:1.06;letter-spacing:-.035em}
.art-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--lx);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.art-meta span{display:inline-flex;align-items:center;gap:18px}
.art-meta span+span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tang)}
.art-fig{margin:0;border-radius:18px;overflow:hidden;border:1.5px solid var(--line2);background:var(--white);box-shadow:0 30px 60px -30px rgba(26,26,26,.25)}
.art-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:80px;align-items:start}
.prose{max-width:760px;font-size:18px;line-height:1.75;color:var(--ink2)}
.prose>:first-child{margin-top:0}
.prose h2{margin-top:72px;font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.15;letter-spacing:-.03em;color:var(--ink);scroll-margin-top:110px}
.prose h2::before{content:"";display:block;width:48px;height:3px;margin-bottom:20px;border-radius:2px;background:var(--grad)}
.prose h3{margin-top:40px;font-weight:500;font-size:21px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.prose h4{margin-top:28px;font-weight:600;font-size:17px;color:var(--ink)}
.prose p{margin-top:18px;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.prose strong,.prose b{font-weight:600;color:var(--ink)}
.prose a{color:var(--canard);font-weight:500;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.2em}
.prose a:hover{text-decoration-color:var(--canard)}
.prose ul,.prose ol{margin-top:18px;display:grid;gap:10px}
.prose ul>li{position:relative;padding-left:26px}
.prose ul>li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:2px;background:var(--canard)}
.prose ol{counter-reset:o}
.prose ol>li{counter-increment:o;position:relative;padding-left:38px}
.prose ol>li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;top:.2em;font-family:var(--lx);font-size:12px;letter-spacing:.12em;color:var(--tang-t)}
.prose blockquote{margin:28px 0 0;padding:20px 24px;border-left:3px solid var(--tang);border-radius:0 14px 14px 0;background:var(--white);color:var(--ink)}
.prose .ptable{margin-top:24px;overflow-x:auto;border:1.5px solid var(--line2);border-radius:16px;background:var(--white)}
.prose table{width:100%;min-width:520px;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.prose th{padding:14px 16px;border-bottom:1.5px solid var(--ink);font-family:var(--lx);font-weight:400;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);text-align:left}
.prose td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.prose tr:last-child td{border-bottom:0}
.art-aside{position:sticky;top:110px;display:grid;gap:18px}
.toc{border:1.5px solid var(--line2);border-radius:20px;background:var(--white);padding:24px 24px 18px}
.toc-k{font-family:var(--lx);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--canard)}
.toc ol{margin-top:12px;display:grid;counter-reset:t}
.toc li{counter-increment:t;border-top:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:10px 0;font-size:14.5px;line-height:1.4;color:var(--ink2);transition:color .2s}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--lx);font-size:10.5px;letter-spacing:.1em;color:var(--tang-t);padding-top:.25em}
.toc a:hover,.toc a[aria-current="true"]{color:var(--canard)}
.art-cta{border:2px solid var(--canard);border-radius:20px;background:var(--white);padding:24px}
.art-cta p{font-weight:500;font-size:19px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.art-cta small{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.art-cta .btn{margin-top:18px;width:100%}
.toc-m{display:none;margin-bottom:36px}
@media (max-width:1000px){
  .art-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .art-aside{display:none}
  .toc-m{display:block}
}
@media (max-width:560px){
  .prose{font-size:16.5px}
  .prose h2{margin-top:56px}
  .prose h3{font-size:19px}
  .prose th,.prose td{padding:11px 12px}
}
.toc-ml{display:grid;gap:4px;counter-reset:t}
.toc-ml li{counter-increment:t;border-top:1px solid var(--line)}
.toc-ml a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:10px 0;font-size:15px;line-height:1.4;color:var(--ink2)}
.toc-ml a::before{content:counter(t,decimal-leading-zero);font-family:var(--lx);font-size:10.5px;letter-spacing:.1em;color:var(--tang-t);padding-top:.25em}
/* blog : sur mobile, les catégories deviennent une liste déroulante */
.bselect{display:none;margin-bottom:28px}
.bselect span{display:block;margin-bottom:8px;font-family:var(--lx);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--canard)}
.bselect select{width:100%;min-height:52px;padding:0 48px 0 16px;border:1.5px solid var(--line2);border-radius:12px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2331656F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/18px;-webkit-appearance:none;appearance:none;font-family:var(--sg);font-size:16px;font-weight:400;color:var(--ink)}
.bselect select:focus-visible{outline:3px solid var(--tang-t);outline-offset:3px}
@media (max-width:640px){.bfilter{display:none}.bselect{display:block}}

/* ═══════ Hero mobile (≤ 900 px) — proposition A « Épuré », retenue par Pierre le 21/09/2026 ═══════
   (« html:root » garde la spécificité des règles d'origine, écrites sous html[data-mh="a"])
   Idée : un seul fil de lecture, moins d'objets à l'écran.
   Surtitre sans pastille → titre plus petit et plus aéré → une seule ligne discrète (points / chapô)
   → bouton pleine largeur + touche téléphone ronde → bloc latéral ramassé dans UNE carte fine.
   Le bouton passe AVANT le bloc latéral : titre et appel à l'action tiennent dans le premier écran.
   Rien n'est retiré du HTML : les textes secondaires sont masqués visuellement (lecteurs d'écran et
   moteurs les lisent toujours), jamais par opacity (GSAP pose et efface opacity/transform en ligne). */

@media (max-width:900px){

  /* ── En-tête allégé : en haut de page, « Prendre RDV » s'efface (le bouton du hero est juste dessous) ;
     il revient dès qu'on défile (classe is-stuck posée par header.js). Sans JS (burger encore [hidden]),
     rien ne change. La touche téléphone devient une simple icône, le burger reste. */
  html:root .top:has(.top-burger:not([hidden])):not(.is-stuck) .top-act .btn-rdv:not(.btn-tel){display:none}
  html:root .top .top-act .btn.btn-tel{min-width:44px;width:44px;padding:0}
  html:root .top .top-act .btn.btn-tel::before{background:transparent;border-color:transparent}
  html:root .top .top-act .btn.btn-tel::after{background:transparent}
  html:root .top .top-act .btn.btn-tel svg{width:20px;height:20px}

  /* ── Fond : la trame ne quadrille plus que le coin haut-droit, le texte respire sur fond clair */
  html:root .hero-bg::before{-webkit-mask-image:radial-gradient(ellipse 85% 60% at 100% 0%,#000 0%,rgba(0,0,0,.45) 45%,transparent 80%);mask-image:radial-gradient(ellipse 85% 60% at 100% 0%,#000 0%,rgba(0,0,0,.45) 45%,transparent 80%)}

  /* ── Grille : intro → action → bloc latéral */
  html:root .hero-grid{grid-template-areas:"intro" "cta" "formulas";max-width:600px;padding:44px 0 52px}

  /* surtitre : plus de pastille, juste le point tangerine et les petites capitales */
  html:root .hero .pill{display:flex;align-items:baseline;gap:10px;padding:0;border:0;border-radius:0;background:none;font-size:10.5px;line-height:1.5;letter-spacing:.16em;color:var(--canard)}
  html:root .hero .pill::before{flex:none;width:6px;height:6px;border-radius:2px;transform:translateY(-1px)}

  /* titre : un cran plus petit, plus d'interligne */
  html:root .hero h1{margin-top:18px}
  html:root .hero .h1-a{font-size:19px;line-height:1.4;color:var(--ink2)}
  html:root .hero .h1-b{margin-top:.22em;font-size:40px;line-height:1.1;letter-spacing:-.04em}
  html:root .hero-wide .h1-b{font-size:33px;line-height:1.12}
  html:root .hero-article .h1-b{margin-top:0;font-size:30px;line-height:1.16;letter-spacing:-.03em}
  html:root .hero .bar{display:none}

  /* les trois points : une seule ligne discrète (qui passe sur deux au besoin), petits carrés de la charte */
  html:root .hero .points{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px 18px}
  html:root .hero .points li{gap:8px;font-size:14.5px;font-weight:400;line-height:1.4;color:var(--ink2)}
  html:root .hero .points li::before{width:6px;height:6px;border-radius:1.5px}

  /* chapô (réalisations, blog, articles) : plus petit, aligné à gauche (le justifié fait des trous en colonne étroite) */
  html:root .hero .hero-lead{margin-top:20px;max-width:none;font-size:15.5px;line-height:1.6;color:var(--ink2);text-align:left}
  /* réalisations et blog : ce chapô est une présentation générale → il passe sous la carte, en légende,
     pour que le haut de l'écran reste « surtitre, titre, bouton ». (Les articles gardent leur chapô sous le titre.) */
  html:root .hero:not(.hero-article):has(.hero-lead) .hero-intro{display:contents}
  html:root .hero:not(.hero-article):has(.hero-lead) .hero-grid{grid-template-areas:"pill" "h1" "cta" "formulas" "lead"}
  html:root .hero:not(.hero-article):has(.hero-lead) .pill{grid-area:pill}
  html:root .hero:not(.hero-article):has(.hero-lead) h1{grid-area:h1}
  html:root .hero:not(.hero-article):has(.hero-lead) .hero-lead{grid-area:lead;margin-top:26px;font-size:14.5px;line-height:1.65}
  html:root .hero .art-meta{margin-top:16px;gap:4px 12px;font-size:10px;letter-spacing:.14em}
  html:root .hero .art-meta span{gap:12px}

  /* ── Appel à l'action : bouton pleine largeur + téléphone réduit à une touche ronde sur la même ligne */
  html:root .hero-cta{margin-top:32px;display:flex;flex-wrap:nowrap;align-items:center;gap:12px}
  html:root .hero-cta .btn{flex:1 1 auto;width:auto;min-width:0;min-height:56px;padding:0 20px}
  html:root .hero-cta .telkey{flex:none;gap:0;min-height:56px}
  html:root .hero-cta .telkey-ic{width:56px;height:56px;border-radius:50%}
  /* le numéro reste dans la page (et dans l'aria-label du lien), seul son affichage est retiré */
  html:root .hero-cta .telkey:not(.telkey-ext) .telkey-tx,
  html:root .hero-cta .telkey-ext .telkey-tx b,
  html:root .hero .fbtn-more>span:first-child{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* fiches projet : le lien « voir en ligne » devient une ligne fine sous le bouton (l'adresse est déjà dans la barre de la capture) */
  html:root .hero-cta:has(.telkey-ext){flex-wrap:wrap;row-gap:4px}
  html:root .hero-cta .telkey-ext{flex:1 0 100%;gap:12px;min-height:48px}
  html:root .hero-cta .telkey-ext .telkey-ic{width:36px;height:36px}
  html:root .hero-cta .telkey-ext .telkey-ic svg{width:16px;height:16px}
  html:root .hero-cta .telkey-ext .telkey-tx small{font-size:10.5px;letter-spacing:.18em;color:var(--canard)}

  /* ── Bloc latéral : toujours une seule carte fine, sous l'action */
  html:root .hero .formulas,
  html:root .hero-grid>.hero-side{margin-top:36px}

  /* 1-3 · formules (accueil, zones, sites) : liste fine, une ligne par formule = nom + prix + flèche */
  html:root .hero .formulas:not(.ctiles){gap:0;border:1.5px solid var(--line2);border-radius:16px;background:var(--white);overflow:hidden}
  html:root .hero .fbtn{display:flex;align-items:center;gap:12px;height:auto;min-height:60px;padding:8px 14px 8px 18px;border:0;border-radius:0;background:transparent}
  html:root .hero .fbtn+.fbtn{border-top:1px solid var(--line)}
  html:root .hero .fbtn-top{display:none}
  html:root .hero .fbtn-main{position:relative;left:auto;right:auto;top:auto;flex:1 1 auto;min-width:0;height:auto;margin:0;display:flex;align-items:center;justify-content:space-between;gap:10px;transform:none!important}
  html:root .hero .fbtn .name{display:inline-flex;align-items:center;gap:11px;font-size:18px;font-weight:500;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
  html:root .hero .fbtn .name::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--fc)}
  html:root .hero .fbtn .price{font-size:21px;line-height:1.2;letter-spacing:-.035em}
  html:root .hero .fbtn .price small{font-size:9.5px;letter-spacing:.12em;margin-left:5px}
  html:root .hero .fbtn-more{position:relative;left:auto;right:auto;bottom:auto;flex:none;display:flex;opacity:1;transform:none}
  html:root .hero .fbtn-more .arw{display:grid;width:28px;height:28px;border-radius:8px;border:1.5px solid var(--line2);background:transparent;color:var(--fc);transform:none}
  html:root .hero .fbtn-more .arw svg{width:13px;height:13px}

  /* 4 · réalisations : les trois chiffres côte à côte dans une carte */
  html:root .hero .stats.hero-side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1.5px solid var(--line2);border-radius:16px;background:var(--white);overflow:hidden}
  html:root .hero .stat{display:flex;flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:8px;height:auto;padding:16px 10px 16px 14px;border:0;border-radius:0;background:none}
  html:root .hero .stat+.stat{border-left:1px solid var(--line)}
  html:root .hero .stat-n{font-size:32px}
  html:root .hero .stat-k{font-size:9.5px;letter-spacing:.16em}
  html:root .hero .stat-v{margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.3;letter-spacing:0;color:var(--ink2);-webkit-hyphens:auto;hyphens:auto}

  /* 5 · fiches projet : capture plus petite (bandeau recadré sur le haut du site), barre de navigateur affinée */
  html:root .hero .shot.hero-side{border-radius:14px;box-shadow:0 22px 44px -30px rgba(26,26,26,.3)}
  html:root .hero .shot-bar{height:30px;padding:0 12px;gap:5px}
  html:root .hero .shot-bar i{width:7px;height:7px}
  html:root .hero .shot-bar span{height:18px;margin-left:8px;padding:0 8px;border-radius:5px;font-size:10px}
  html:root .hero .shot img{aspect-ratio:16/7.5}

  /* 6 · blog : le dernier article en carte horizontale (vignette + titre) */
  html:root .hero .pcard.hero-side{display:grid;grid-template-columns:108px minmax(0,1fr);border-radius:16px}
  html:root .hero .pcard.hero-side .pcard-shot{aspect-ratio:auto;height:100%;border-bottom:0;border-right:1.5px solid var(--line)}
  html:root .hero .pcard.hero-side .pcard-body{padding:14px 14px 10px 16px}
  html:root .hero .pcard.hero-side .pcard-k{font-size:9.5px;letter-spacing:.14em;line-height:1.5}
  html:root .hero .pcard.hero-side .stat-v{margin-top:6px;font-size:15.5px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
  html:root .hero .pcard.hero-side .pcard-meta{margin-top:8px;gap:2px 10px;font-size:9.5px;letter-spacing:.12em}
  html:root .hero .pcard.hero-side .pcard-go{padding-top:6px;min-height:36px;gap:10px;font-size:10px;letter-spacing:.18em}
  html:root .hero .pcard.hero-side .pcard-go .arw{width:24px;height:24px;border-radius:7px}
  html:root .hero .pcard.hero-side .pcard-go .arw svg{width:12px;height:12px}

  /* 7 · articles : image de couverture en bandeau */
  html:root .hero .art-fig.hero-side{border-radius:14px;box-shadow:0 22px 44px -30px rgba(26,26,26,.3)}
  html:root .hero .art-fig img{aspect-ratio:16/7.5;object-position:50% 30%}

  /* 8 · contact : les quatre moyens de joindre en liste fine dans une carte */
  html:root .hero .ctiles{gap:0;padding:0 14px;border:1.5px solid var(--line2);border-radius:16px;background:var(--white)}
  html:root .hero .ctile{min-height:62px;gap:14px;padding:10px 0;border:0;border-radius:0;background:none}
  html:root .hero .ctile+.ctile{border-top:1px solid var(--line)}
  html:root .hero .ctile .inc__ico{width:36px;height:36px;border-radius:10px;border-width:1.5px}
  html:root .hero .ctile .inc__ico svg{width:18px;height:18px}
  html:root .hero .ctile-k{font-size:9.5px;letter-spacing:.18em}
  html:root .hero .ctile-v{margin-top:2px;font-size:15.5px;line-height:1.3}
  html:root .hero .ctile-go{width:28px;height:28px;border-radius:8px}
  html:root .hero .ctile-go svg{width:13px;height:13px}

  /* ── Corrections après comparaison (21/09) ── */
  html:root .hero .h1-b .grad{text-wrap:balance}
  html:root .hero .hero-lead{-webkit-hyphens:manual;hyphens:manual}
  html:root .hero .stats.hero-side{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr)}
  html:root .hero .stat-v{-webkit-hyphens:manual;hyphens:manual}
  html:root .hero .art-meta span+span::before{display:none}
  html:root .hero:has(.hero-lead) .hero-grid>.hero-side{margin-top:48px}

}

/* téléphones */
@media (max-width:560px){
  html:root .hero-grid{padding:40px 0 48px}
  html:root .hero .h1-a{font-size:18px}
  html:root .hero .h1-b{font-size:37px}
  html:root .hero-wide .h1-b{font-size:30px}
  html:root .hero-article .h1-b{font-size:28px}
  html:root .hero .points li{font-size:14px}
  html:root .hero .hero-lead{font-size:15px}
  html:root .hero-cta .btn{font-size:12.5px;padding:0 16px}
}

/* petits téléphones (360 px) */
@media (max-width:385px){
  html:root .hero-grid{padding-top:34px}
  html:root .hero .pill{font-size:10px;letter-spacing:.13em}
  html:root .hero .h1-a{font-size:17px}
  html:root .hero .h1-b{font-size:34px}
  html:root .hero-wide .h1-b{font-size:28px}
  html:root .hero-article .h1-b{font-size:26px}
  html:root .hero-cta{gap:10px}
  html:root .hero-cta .btn{font-size:12px;letter-spacing:.07em;padding:0 12px}
  html:root .hero .fbtn{padding:8px 12px 8px 14px;gap:10px}
  html:root .hero .fbtn .name{font-size:17px;gap:9px}
  html:root .hero .fbtn .price{font-size:19px}
  html:root .hero .stat{padding:14px 8px 14px 11px}
  html:root .hero .stat-n{font-size:28px}
  html:root .hero .stat-v{font-size:12px}
  html:root .hero .pcard.hero-side{grid-template-columns:92px minmax(0,1fr)}
  html:root .hero .ctiles{padding:0 12px}
  html:root .hero .ctile{gap:12px}
}
/* réalisations : projet en cours */
.pcard-shot{position:relative}
.pcard-status{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:var(--white);border:1.5px solid var(--tang);font-family:var(--lx);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tang-t)}
.pcard-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tang);animation:pulse-dot 1.8s ease-in-out infinite}
@keyframes pulse-dot{50%{opacity:.35;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.pcard-status::before{animation:none}}
/* réalisations : quatre chiffres (dont les projets en cours) */
.stat.f4{--fc:var(--ink)}
.stats-4{gap:14px}
.stats-4 .stat{height:114px}
.stats-4 .stat-n{font-size:clamp(40px,3.8vw,56px)}
.stat-live .stat-k{display:inline-flex;align-items:center;gap:8px}
.stat-live .stat-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tang);animation:pulse-dot 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.stat-live .stat-k::before{animation:none}}
@media (max-width:900px){
  html:root .hero .stats.stats-4.hero-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  html:root .hero .stats-4 .stat+.stat{border-left:0}
  html:root .hero .stats-4 .stat:nth-child(2n){border-left:1px solid var(--line)}
  html:root .hero .stats-4 .stat:nth-child(n+3){border-top:1px solid var(--line)}
  html:root .hero .stats-4 .stat{height:auto}
}
/* À propos : qui conçoit votre application */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px}
.team-card{padding:28px 28px 26px;border:1.5px solid var(--line2);border-radius:20px;background:var(--white)}
.team-r{font-family:var(--lx);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--canard)}
.team-card h3{margin-top:8px;font-weight:600;font-size:24px;letter-spacing:-.02em}
.team-card p:last-child{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink2);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* boutons secondaires à long libellé (ex. « Création d'application à Perpignan : la grille complète ») : sur deux lignes en mobile */
@media (max-width:560px){.loc-real .btn.btn-rdv{height:auto;min-height:46px;padding:12px 18px;white-space:normal;line-height:1.35;text-align:center}}