@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo-var.woff2) format("woff2")}

/* Layout : chaque rubrique = une suite de "scènes" épinglées. Dans une scène, la pièce 1 est posée, puis chaque palier de scroll
   fait venir la pièce suivante qui s'emboîte (tenon -> mortaise). Devis = les questions s'emboîtent au fil des réponses.
   Accent rouge vif (lecture / attention), neutres légèrement chauds. */
:root{
  /* base neutre blanche, texte noir ; rouge vif adouci en dégradé animé */
  --bg:#FFFFFF; --fg:#121110; --muted:#5F5A56; --line:rgba(18,17,16,.14);
  --s1:#F3F2F0; --s2:#E4E2DF; --s3:#121110; --s3-fg:#FFFFFF;
  --accent:#E23D35; --accent-fg:#FFFFFF;
  --r-hot:#EE5C38; --r-deep:#C92F45; --r-pink:#E84F6D;
  --grad:linear-gradient(100deg,var(--accent) 0%,var(--r-hot) 18%,var(--accent) 36%,var(--r-deep) 56%,var(--r-pink) 78%,var(--accent) 100%);
  --f:"Archivo",Arial,Helvetica,sans-serif;
  --g:10px; --nd:12px; --tw:64px; --r:24px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--fg);font-family:var(--f);font-size:16px;line-height:1.5;margin:0;padding-inline:16px;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1280px;margin-inline:auto}
p{margin:0}

/* ---------- Typo ---------- */
.t-label{font-size:.7rem;font-weight:700;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;color:var(--sub);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px}
.t-title{font-weight:820;text-transform:uppercase;letter-spacing:-.01em;line-height:1;font-variation-settings:"wdth" 92;margin:0;text-wrap:balance;overflow-wrap:break-word}
.t-xl{font-size:clamp(2.1rem,4.6vw,4.4rem)}
.t-l{font-size:clamp(1.8rem,3.3vw,3.1rem)}
.t-m{font-size:clamp(1.02rem,1.3vw,1.24rem);letter-spacing:.01em;line-height:1.12;font-variation-settings:"wdth" 100}
.t-sub{font-size:clamp(1.02rem,1.3vw,1.25rem);font-weight:500;line-height:1.32;letter-spacing:-.005em;color:var(--ink);max-width:34ch;text-wrap:pretty}
.t-body{font-size:.94rem;line-height:1.55;letter-spacing:.005em;color:var(--sub);max-width:52ch}
.t-num{font-weight:820;letter-spacing:-.035em;line-height:.9;font-variant-numeric:tabular-nums;font-size:clamp(3rem,6vw,5.6rem);color:var(--num,var(--ink))}
.t-label .ar{font-size:1.1rem;letter-spacing:0;line-height:1;color:var(--ink)}
.t-num small{font-size:.42em;letter-spacing:0;margin-left:.08em;font-weight:700}
.hl{color:var(--hl,var(--accent))}

/* ---------- Pièces ---------- */
.v1{--pc:var(--s1);--ink:var(--fg);--sub:var(--muted);--sw:var(--accent);--num:var(--accent)}
.v2{--pc:var(--s2);--ink:var(--fg);--sub:var(--muted);--sw:var(--accent)}
.v3{--pc:var(--s3);--ink:var(--s3-fg);--sub:color-mix(in srgb,var(--s3-fg) 62%,transparent);--sw:var(--accent)}
.v4{--pc:var(--accent);--ink:var(--accent-fg);--sub:color-mix(in srgb,var(--accent-fg) 88%,transparent);--sw:var(--s3);--hl:var(--s3)}
.pc{position:relative;background:var(--pc);color:var(--ink);border-radius:var(--r);padding:clamp(20px,2.2vw,30px);min-width:0;display:flex;flex-direction:column;gap:16px;text-decoration:none}
.push{margin-top:auto}
.tab{position:absolute;background:var(--pc)}
.tab.r{top:var(--y,48px);right:calc(-1 * (var(--g) + var(--nd)));width:calc(var(--g) + var(--nd) + 1px);height:var(--tw);border-radius:0 12px 12px 0}
.tab.b{left:var(--x,48px);bottom:calc(-1 * (var(--g) + var(--nd)));height:calc(var(--g) + var(--nd) + 1px);width:var(--tw);border-radius:0 0 12px 12px}
.notch{position:absolute;background:var(--bg)}
.notch.t{left:var(--x,48px);top:-1px;width:var(--tw);height:calc(var(--nd) + 1px);border-radius:0 0 12px 12px}
.notch.l{top:var(--y,48px);left:-1px;height:var(--tw);width:calc(var(--nd) + 1px);border-radius:0 12px 12px 0}
.only-m{display:none}
.snap{animation:snap .42s cubic-bezier(.2,.8,.2,1)}
@keyframes snap{0%{transform:scale(1.02)}100%{transform:none}}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g)}
.c4{grid-column:span 4}.c12{grid-column:span 12}
.block{margin-top:clamp(40px,6vw,80px)}

/* ---------- Survol ---------- */
.sw{background:linear-gradient(var(--sw),var(--sw)) 0 0/0% 100% no-repeat,linear-gradient(var(--ink),var(--ink));-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-size .7s cubic-bezier(.2,.8,.2,1)}
.pc:hover .sw,a:focus-visible .sw{background-size:100% 100%,auto}
.btns{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:999px;font:700 .74rem/1 var(--f);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--pc);border:0;cursor:pointer}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:var(--accent-fg)}
.btn:disabled{opacity:.35;cursor:not-allowed}.btn:disabled::before{display:none}
.lnk{font:700 .74rem/1 var(--f);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:6px 0;background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1.5px no-repeat;transition:color .3s}
.lnk:hover{color:var(--accent);background-image:linear-gradient(var(--accent),var(--accent))}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.v4 :focus-visible,.v4:focus-visible{outline-color:var(--s3)}

/* ---------- Menu ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;background:var(--bg);padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}

.nav .row{max-width:1280px;margin-inline:auto;display:grid;grid-template-columns:auto 1fr auto;gap:var(--g)}
.nav .pc{padding:0 22px;height:56px;flex-direction:row;align-items:center;--tw:24px;--nd:8px;--y:16px;border-radius:16px}
.logo{font:850 .95rem/1 var(--f);letter-spacing:.02em;font-variation-settings:"wdth" 118;white-space:nowrap;text-transform:uppercase}
.mid{justify-content:center}
.links{display:flex;gap:2px;position:relative}
.links a{position:relative;z-index:1;text-decoration:none;font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:12px 14px;border-radius:999px;display:flex;gap:8px;align-items:baseline;white-space:nowrap;transition:color .3s}
.links a small{font-size:.66rem;font-weight:600;letter-spacing:0;color:var(--sub);transition:color .3s}
.links a:hover{color:var(--accent)}
.links a.on,.links a.on:hover{color:var(--accent-fg)}
.links a.on small{color:color-mix(in srgb,var(--accent-fg) 70%,transparent)}
.pill{position:absolute;top:50%;height:36px;margin-top:-18px;left:0;width:0;background:var(--accent);border-radius:999px;transition:left .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1)}
.nav .cta{font:700 .74rem/1 var(--f);letter-spacing:.12em;text-transform:uppercase;gap:12px;white-space:nowrap}
.burger{display:none;background:none;border:0;color:inherit;font:700 .74rem var(--f);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:0;gap:12px;align-items:center;margin-left:auto}
.burger i{display:block;width:20px;height:2px;background:currentColor;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform .3s}
.burger i::before{top:-6px}.burger i::after{top:6px}
.menu-open .burger i{background:transparent}
.menu-open .burger i::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger i::after{transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:40;background:var(--bg);padding:calc(env(safe-area-inset-top,0px) + 82px) 16px 24px;display:flex;flex-direction:column;gap:var(--g);overflow:auto}
.drawer .pc{flex-direction:row;justify-content:space-between;align-items:flex-end;padding:22px}
.drawer .t-title{font-size:clamp(1.7rem,8vw,2.6rem)}

main{padding-top:calc(env(safe-area-inset-top,0px) + 86px);padding-bottom:40px}
.page{display:none}.page.on{display:block}
.leaving .pc{transition:transform .3s cubic-bezier(.5,0,.8,.4),opacity .3s!important;transform:translate3d(0,-24px,0)!important;opacity:0!important}

/* ---------- Titrage d'entrée ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(40px,6vw,80px)}
#heroCv{display:block;width:100%;border-radius:var(--r);cursor:pointer;touch-action:pan-y}
.hero-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding-inline:4px}
.hero-meta .lnk span{display:inline-block;animation:nudge 1.3s ease-in-out infinite}

/* ---------- Scènes d'assemblage ---------- */
.assemble+.assemble,.assemble+.grid,.grid+.assemble{margin-top:clamp(40px,6vw,80px)}
.stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g)}
.slot{position:relative;display:flex;min-width:0;grid-column:var(--a);grid-row:var(--b);text-decoration:none}
.slot>.pc{flex:1}
.stat{justify-content:space-between}
.segs{display:flex;gap:4px}
.segs i{width:22px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 18%,transparent);transition:background .3s}
.segs i.on{background:var(--accent)}
.v4 .segs i.on{background:var(--s3)}
.hud{display:none;align-items:center;gap:14px}
.assemble.pinned .hud{display:flex}
.assemble.pinned .stage-wrap{position:sticky;top:calc(env(safe-area-inset-top,0px) + 82px);height:min(calc(100vh - 96px - env(safe-area-inset-top,0px)),700px)}
.assemble.pinned .stage{height:100%;grid-template-rows:var(--rows)}
.assemble.pinned .pc{padding:clamp(16px,2.2vh + 6px,30px);gap:clamp(8px,1.6vh,16px);overflow:visible}
.assemble.pinned .t-xl{font-size:clamp(2rem,min(4.3vw,7.4vh),4.4rem)}
.assemble.pinned .t-l{font-size:clamp(1.6rem,min(3.2vw,5.6vh),3.1rem)}
.assemble.pinned .t-num{font-size:clamp(2.4rem,min(5.4vw,9.6vh),5.6rem)}
.assemble.pinned .t-sub{font-size:clamp(1rem,min(1.4vw,2.5vh),1.32rem)}
.assemble.pinned .t-body{font-size:clamp(.85rem,min(1vw,1.9vh),.95rem)}
/* Scènes sur ordi : contenu plus grand et regroupé, étiquette en haut, texte centré dans la hauteur restante */
.assemble.pinned .pc>.t-label,.assemble.pinned .pc>.top{margin-bottom:auto}
.assemble.pinned .pc::after{content:"";margin-top:auto}
.assemble.pinned .pc:not(:has(>.t-label,>.top))::before{content:"";margin-bottom:auto}
.assemble.pinned .pc .push{margin-top:0}
.assemble.pinned .pc{gap:clamp(10px,1.8vh,18px)}
.assemble.pinned .t-m{font-size:clamp(1.2rem,min(1.9vw,3.8vh),1.95rem);line-height:1.08}
.assemble.pinned .t-body{font-size:clamp(.98rem,min(1.2vw,2.3vh),1.2rem);line-height:1.45;color:color-mix(in srgb,var(--ink) 72%,var(--pc))}
.assemble.pinned .t-num{font-size:clamp(3rem,min(6.6vw,12vh),7rem)}
.assemble.pinned .t-sub{font-size:clamp(1.05rem,min(1.55vw,2.9vh),1.5rem);max-width:30ch}
.assemble.pinned .vs li{font-size:clamp(1rem,min(1.3vw,2.4vh),1.25rem);padding:clamp(9px,1.5vh,14px) 0}
.assemble.pinned .kv div{font-size:clamp(.95rem,min(1.2vw,2.2vh),1.15rem)}
.assemble.pinned .ex{font-size:clamp(.9rem,min(1.1vw,2vh),1.05rem)}
.assemble.pinned .t-label{font-size:clamp(.7rem,min(.8vw,1.5vh),.8rem)}
.idx{font:800 .8rem/1 var(--f);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-fg);flex:none}
.v4 .idx{background:var(--s3);color:var(--s3-fg)}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ex{padding-top:12px;line-height:1.4;border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);font-size:.85rem;color:var(--sub)}
.ex b{color:var(--ink);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;margin-right:8px}
.vs ul{list-style:none;margin:0;padding:0;display:grid}
.vs li{padding:11px 0;line-height:1.35;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);font-size:.95rem;display:grid;grid-template-columns:24px 1fr}
.vs li::before{font-weight:800}
.vs.no li{color:var(--sub)}.vs.no li::before{content:"–"}
.vs.yes li::before{content:"+"}
.kv{display:grid;gap:0}
.kv div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;line-height:1.35;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);font-size:.92rem}
.kv div b{font-weight:700}
.next{flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;min-height:160px}

/* ---------- Devis ---------- */
.dgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);margin-top:var(--g);align-items:start}
.q{grid-column:1/9;transition:transform .7s cubic-bezier(.2,.9,.25,1.08),opacity .45s}
.q.locked{transform:translate3d(0,34px,0);opacity:.28}
.brief{grid-column:9/13;grid-row:1/span 6;position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px)}
.qh{display:flex;justify-content:space-between;align-items:center;gap:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts label{cursor:pointer;font-size:.92rem;font-weight:600;line-height:1.2;padding:12px 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 24%,transparent);transition:background .25s,color .25s,box-shadow .25s;user-select:none}
.opts label:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.opts input:checked+label{background:var(--accent);color:var(--accent-fg);box-shadow:none}
.opts input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;margin:0 0 4px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.full{grid-column:1/-1}
.lab{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
input[type=text],input[type=email],textarea{font:500 1.05rem var(--f);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent);padding:10px 0;border-radius:0}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{min-height:70px;resize:vertical}
.legal{font-size:.8rem;color:var(--sub)}
.err{font-size:.9rem;font-weight:600;color:var(--accent)}
.brief .kv div span:last-child{text-align:right;font-weight:600}
.brief .kv .empty{opacity:.4;font-weight:400!important}

/* Incitation au défilement */
.cue{position:fixed;right:max(24px,calc((100vw - 1280px)/2 + 24px));bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:45;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--accent-fg);font:700 1.1rem/1 var(--f);cursor:pointer;box-shadow:0 10px 30px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.cue span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cue i{font-style:normal;display:inline-block;animation:nudge 1.3s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

/* Footer */
.foot{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.bigword{font:880 clamp(2.4rem,9.4vw,9rem)/.88 var(--f);letter-spacing:-.03em;text-transform:uppercase;font-variation-settings:"wdth" 110;width:100%}
.flinks{display:flex;flex-wrap:wrap;gap:8px 22px}
.flinks a,.flinks span{font:700 .7rem/1.4 var(--f);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;opacity:.75}
.flinks a:hover{opacity:1;color:var(--accent)}


/* ---------- Dégradé rouge en défilement ----------
   Un seul dégradé, fixé à l'écran : il glisse en continu et bouge avec le scroll,
   donc toutes les pièces rouges, tenons compris, restent raccord entre elles. */
.gf,.pc.v4,.v4 .tab,.pill,.cue,.segs i.on,.idx,.opts input:checked+label,.btn::before,.hl,.gt,.v1 .t-num{
  background-image:var(--grad);background-size:200vw 100vh;background-attachment:fixed;background-repeat:repeat;
  background-position:var(--gx,0px) 0}
.hl,.gt,.v1 .t-num{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.v4 .hl{background:none;color:var(--s3);-webkit-text-fill-color:currentColor}
.v4 .idx,.v4 .segs i.on{background:var(--s3)}
.sw{background-image:var(--grad),linear-gradient(var(--ink),var(--ink));background-size:0% 100%,auto;background-attachment:fixed,scroll;background-position:var(--gx,0px) 0,0 0}
.v4 .sw{background-image:linear-gradient(var(--sw),var(--sw)),linear-gradient(var(--ink),var(--ink))}
.pc:hover .sw,a:focus-visible .sw{background-size:200vw 100vh,auto}
.v4 .pc:hover .sw,.pc.v4:hover .sw,a.v4:focus-visible .sw{background-size:100% 100%,auto}
.links a:hover{color:var(--r-deep)}

/* bouton de langue FR / EN (dans la pièce centrale du menu) */
.mid .links{margin-left:auto}
.lang{display:flex;align-items:center;gap:2px;margin-left:auto;font:700 .66rem/1 var(--f);letter-spacing:.1em}
.lang b,.lang a{padding:7px 8px;border-radius:999px;text-decoration:none}
.lang b{background:var(--s3);color:var(--s3-fg)}
.lang a{color:var(--muted);transition:color .3s}
.lang a:hover,.lang a:focus-visible{color:var(--accent)}
@media (max-width:980px){ .links{display:none}.burger{display:flex;margin-left:14px} }
/* écran moyen : barre serrée, seule l'autre langue est affichée */
@media (min-width:981px) and (max-width:1180px){ .nav .lang b{display:none} .links a{padding-inline:10px} }
/* téléphone : pas la place dans la barre, le choix de langue passe dans le menu */
.dlang{display:none}
@media (max-width:720px){
  .nav .lang{display:none} .nav .burger{margin-left:auto}
  .dlang{display:flex;justify-content:space-between;align-items:center;padding:8px 6px 0}
  .dlang .lang{font-size:.8rem}
  .dlang .lang b,.dlang .lang a{padding:11px 16px}
}
@media (max-width:720px){
  :root{--r:20px}
  .c4{grid-column:span 12}
  .stage{grid-template-columns:1fr}
  .slot{grid-column:1/-1;grid-row:auto}
  main .tab.r{top:auto;right:auto;left:48px;bottom:calc(-1 * (var(--g) + var(--nd)));width:var(--tw);height:calc(var(--g) + var(--nd) + 1px);border-radius:0 0 12px 12px}
  main .notch.l{top:-1px;left:48px;width:var(--tw);height:calc(var(--nd) + 1px);border-radius:0 0 12px 12px}
  .only-m{display:block}.only-d{display:none}
  .nav .cta .lbl{display:none}
  .nav .pc{padding:0 16px}
  .q,.brief{grid-column:1/-1;grid-row:auto;position:relative;top:auto}
  .fields{grid-template-columns:1fr}
  .stat{min-height:190px}
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:0s!important} .pc{transform:none!important;opacity:1!important} .snap{animation:none} .q{transition:none} .cue i{animation:none} }

/* ---------- Optimisation grands écrans (ordinateur ≥ 1500 px) ----------
   Au-delà de ~1440 px la compo restait bloquée à 1280 px de large et 700 px de haut :
   on élargit, la scène remplit la hauteur de l'écran et typo / pièces / tenons grandissent
   en proportion. Rien ne change en dessous de 1500 px. */
@media (min-width:1500px){
  :root{--g:12px;--nd:14px;--tw:76px;--r:28px}
  body{padding-inline:24px}
  .wrap,.nav .row{max-width:min(88vw,2200px)}
  .cue{right:calc((100vw - min(88vw,2200px))/4 - 26px)}   /* dans la marge, hors des cartes */
  .t-label{font-size:.76rem}
  .t-xl{font-size:clamp(2.1rem,4.6vw,7rem)}
  .t-l{font-size:clamp(1.8rem,3.3vw,5rem)}
  .t-num{font-size:clamp(3rem,6vw,9rem)}
  .t-sub{font-size:clamp(1.02rem,1.3vw,1.9rem)}
  .t-body{font-size:clamp(.94rem,.8vw,1.2rem)}
  .pc{padding:clamp(20px,1.9vw,44px)}
  .assemble.pinned .stage-wrap{height:min(calc(100vh - 100px - env(safe-area-inset-top,0px)),55vw,1375px)}
  .assemble.pinned .pc{padding:clamp(16px,2.6vh,44px);gap:clamp(10px,1.8vh,24px)}
  .assemble.pinned .t-xl{font-size:clamp(2rem,min(4.3vw,7.4vh),7rem)}
  .assemble.pinned .t-l{font-size:clamp(1.6rem,min(3.2vw,5.6vh),5rem)}
  .assemble.pinned .t-m{font-size:clamp(1.2rem,min(1.9vw,3.8vh),2.5rem)}
  .assemble.pinned .t-num{font-size:clamp(3rem,min(6.6vw,12vh),9rem)}
  .assemble.pinned .t-sub{font-size:clamp(1.05rem,min(1.55vw,2.9vh),1.9rem)}
  .assemble.pinned .t-body{font-size:clamp(.98rem,min(1.2vw,2.3vh),1.45rem)}
  .assemble.pinned .vs li{font-size:clamp(1rem,min(1.3vw,2.4vh),1.5rem)}
  .assemble.pinned .kv div{font-size:clamp(.95rem,min(1.2vw,2.2vh),1.4rem)}
  .assemble.pinned .ex{font-size:clamp(.9rem,min(1.1vw,2vh),1.25rem)}
  .assemble.pinned .t-label{font-size:clamp(.7rem,min(.8vw,1.5vh),.95rem)}
}

/* ---------- Textes courants (variante A) ----------
   Dans l'esprit du bandeau sous l'intro, mais en minuscules : Archivo un peu élargi,
   demi-gras, légèrement espacé. Les étiquettes (.t-label) restent en capitales. */
.t-sub,.assemble.pinned .t-sub,.t-body,.assemble.pinned .t-body,.ex,.assemble.pinned .ex,.vs li,.assemble.pinned .vs li,.kv div,.assemble.pinned .kv div{
  text-transform:none;font-weight:620;letter-spacing:.02em;font-variation-settings:"wdth" 112;text-wrap:pretty}
.t-sub,.assemble.pinned .t-sub{font-size:clamp(.92rem,1.1vw,1.08rem);line-height:1.5;max-width:42ch}
.t-body,.assemble.pinned .t-body{font-size:clamp(.82rem,.92vw,.94rem);line-height:1.6;max-width:46ch}
.ex,.assemble.pinned .ex{font-size:clamp(.78rem,.85vw,.88rem);line-height:1.5}
.vs li,.assemble.pinned .vs li{font-size:clamp(.84rem,1vw,.98rem);line-height:1.45}
.kv div,.assemble.pinned .kv div{font-size:clamp(.82rem,.95vw,.94rem)}