/* start.qloa.fr · onboarding · feuille de style unique
   1. Polices et variables   2. Base   3. La page (sections, défilement)   4. Typographie
   5. Champs et actions   6. Lecture   7. Enrichir   8. Installer   9. Vérification, liaison, activation
   10. Pages hors parcours   11. Barre de progression   12. Bandeaux et revue   13. Accessibilité et mouvement réduit */

/* ---------- 1. Polices et variables ---------- */
@font-face{font-family:Sentient;src:url(../fonts/sentient-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Sentient;src:url(../fonts/sentient-300i.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Sentient;src:url(../fonts/sentient-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"BDO Grotesk";src:url(../fonts/bdo-grotesk.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono-400-latin.woff2) format("woff2");font-display:swap}

:root{
  --ink:#080808;--black:#030303;--paper:#f9f9f9;--muted:#636363;--grey:#a8a6a4;--or:#ff6201;
  --line:rgba(8,8,8,.14);--faint:rgba(8,8,8,.07);
  --serif:Sentient,Georgia,serif;--sans:"BDO Grotesk",-apple-system,Arial,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.7,0,.2,1);
  --pad:clamp(40px,5.5vh,56px);--rail:clamp(178px,16vw,220px);--left:clamp(40px,7vw,110px);--top:clamp(62px,9.5vh,88px);--bot:clamp(46px,7.5vh,64px);
  --grad:url(../img/gradient-07.jpg)
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--paper)}
body{font-family:var(--sans);font-size:16px;line-height:1.4;letter-spacing:-.01em;color:var(--ink);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
h1,h2{font-family:var(--serif);font-weight:300;letter-spacing:-.05em;text-wrap:balance}
img{display:block}
::selection{background:rgba(255,98,1,.25)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.hdr{position:fixed;z-index:26;top:0;left:0;right:0;display:flex;align-items:center;height:clamp(56px,9vh,72px);padding:0 40px;pointer-events:none}
.hdr img{height:18px}

/* ---------- 3. La page ---------- */
.track{position:fixed;inset:0;transition:transform 1.15s var(--ease);will-change:transform}
.track.snap,.track.snap .sec *{transition:none!important}
.sec{position:relative;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:var(--top) var(--rail) var(--bot) var(--left)}
.view{display:flex;flex-direction:column;justify-content:center}
.view.g{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4.4vw,72px);align-items:center;align-content:center}
.view.g2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(32px,4vw,72px);align-items:center;align-content:center}
.view>*{opacity:0;transform:translateY(16px);transition:opacity 1.2s,transform 1.3s var(--ease)}
.sec.on .view>*{opacity:1;transform:none}
.sec.on .view>*:nth-child(2){transition-delay:.1s}.sec.on .view>*:nth-child(3){transition-delay:.18s}.sec.on .view>*:nth-child(4){transition-delay:.26s}
.sec.on .view>*:nth-child(5){transition-delay:.34s}.sec.on .view>*:nth-child(6){transition-delay:.42s}.sec.on .view>*:nth-child(7){transition-delay:.5s}.sec.on .view>*:nth-child(8){transition-delay:.58s}
.sec.sw .view>*{transition:opacity .4s,transform .4s var(--ease);transition-delay:0s!important}
.sec.past{opacity:.55}
.fin{opacity:0!important;transform:translateY(10px)!important;pointer-events:none;transition:opacity .9s,transform .9s!important}
.sec.on .fin.ok{opacity:1!important;transform:none!important;pointer-events:auto}

/* ---------- 4. Typographie ---------- */
h1{font-size:clamp(44px,min(5.6vw,10vh),84px);line-height:1.02;letter-spacing:-.05em;max-width:1000px}
h1 span{color:var(--grey)}
h2{font-size:clamp(32px,min(3.9vw,7vh),58px);line-height:1.08;letter-spacing:-.045em;max-width:980px}
h2>span{display:block;color:var(--grey)}
h2 span span{display:inline}
h2.inl>span{display:inline}
.kick{font-size:14px;color:var(--muted);margin-bottom:clamp(12px,2.2vh,20px)}
.kick em{font-style:normal;color:var(--or)}
.lead{margin-top:clamp(10px,2vh,18px);font-size:clamp(15px,min(1.2vw,2.3vh),18px);line-height:1.45;color:var(--muted);max-width:560px}
.lead b{font-weight:500;color:var(--ink)}
.causes{list-style:none;margin-top:clamp(14px,2.4vh,22px);max-width:520px}
.causes li{position:relative;padding:clamp(8px,1.4vh,12px) 0 clamp(8px,1.4vh,12px) 22px;border-top:1px solid var(--faint);font-size:15px;color:var(--muted)}
.causes li::before{content:"";position:absolute;left:0;top:calc(50% - 2px);width:5px;height:5px;border-radius:50%;background:var(--grey)}
.num{font-family:var(--serif);font-weight:300;letter-spacing:-.065em;font-size:clamp(72px,min(10vw,15vh),160px);line-height:.82;margin:0 0 clamp(14px,2.4vh,24px);font-variant-numeric:tabular-nums}
.num small{font-size:.26em;letter-spacing:-.02em;color:var(--grey);margin-left:.14em}
.dots i{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:currentColor;margin-left:.08em;animation:dt 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dt{50%{opacity:.2}}

/* ---------- 5. Champs et actions ---------- */
.fields{margin-top:clamp(24px,4.4vh,42px);max-width:760px}
.fld{display:flex;align-items:baseline;gap:12px;border-bottom:1.5px solid var(--ink);padding-bottom:clamp(8px,1.3vh,12px);font-family:var(--serif);font-weight:300;font-size:clamp(26px,min(2.6vw,4.6vh),38px);letter-spacing:-.04em;line-height:1.1;transition:font-size 1.1s var(--ease),opacity 1.1s,border-color 1.1s,padding 1.1s}
.fld .pre{opacity:.3}
.fld input{min-width:0;flex:1;border:0;background:none;outline:0;font:inherit;letter-spacing:inherit;color:inherit;caret-color:var(--or)}
.fld input::placeholder{color:var(--ink);opacity:.3}
.fld:focus-within{border-color:transparent;background:var(--grad) 0 100%/100% 1.5px no-repeat}
.fld .co{font-family:var(--sans);font-size:14px;letter-spacing:-.01em;color:var(--or);white-space:nowrap;opacity:0;transition:opacity 1s}
.fld .co.on{opacity:1}
.fld .co.soft{color:var(--muted)}
.fld.ok{font-size:clamp(18px,1.5vw,22px);opacity:.45;border-color:transparent;padding-bottom:0;background:none}
.fld.ok input{pointer-events:none}
.row{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .9s var(--ease),opacity 1s .3s}
.row.on{grid-template-rows:1fr;opacity:1}
#r3.on{transition-delay:.18s}
.row>div{overflow:hidden;min-height:0}
.row>div>.fld{margin-top:clamp(14px,2.4vh,22px);font-size:clamp(19px,min(1.55vw,2.9vh),24px);border-bottom-width:1px;max-width:520px;padding-bottom:8px}
.row>div>.fld .co{font-size:13px}
.note{margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--muted);max-width:520px}
.note a{border-bottom:1px solid var(--line)}
.err{display:flex;gap:10px;margin-top:clamp(10px,1.6vh,14px);font-size:13.5px;line-height:1.45;color:var(--ink);max-width:560px}
.err::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--or);margin-top:7px}
.err a,.err button{border-bottom:1px solid var(--line);padding-bottom:1px}
.row .err{margin-bottom:2px}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(20px,3.6vh,34px)}
.hint{font-size:13px;color:var(--muted)}
.hint kbd{font:inherit;color:var(--ink)}
.lk{font-size:14px;padding-bottom:2px;border-bottom:1px solid var(--line);transition:border-color .5s,color .5s}
.lk:hover{color:var(--or);border-color:var(--or)}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:45px;background:var(--black);color:#fff;font-size:15px;white-space:nowrap;transition:opacity .3s}
.btn:hover{opacity:.88}
.btn .pl{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#ff9a5e}
.btn .arw{transition:transform .3s}.btn:hover .arw{transform:translateX(3px)}
.btn.quiet{background:rgba(8,8,8,.06);color:var(--muted);cursor:default}
.btn[aria-busy=true]{opacity:.55;pointer-events:none}
.legal{margin-top:clamp(14px,2.4vh,22px);font-size:13px;line-height:1.5;color:var(--muted);max-width:560px}
.legal a,.legal button{border-bottom:1px solid var(--line)}
.legal button{font-size:inherit;color:inherit}
.links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:clamp(18px,3.2vh,32px)}

/* ---------- 6. Lecture ---------- */
.lduo{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(8px,1.6vh,18px)}
.big{font-family:var(--serif);font-weight:300;letter-spacing:-.07em;line-height:.8;font-size:clamp(110px,min(15vw,24vh),260px);margin-left:-.05em;font-variant-numeric:tabular-nums}
.big small{font-size:.3em;letter-spacing:-.03em;color:var(--grey);margin-left:.06em}
.stream{position:relative;height:clamp(160px,28vh,300px);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 66%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 66%,transparent)}
.roll{position:absolute;left:0;right:0;top:0;transition:transform 1.1s cubic-bezier(.6,0,.2,1)}
.ln{font-family:var(--serif);font-weight:300;letter-spacing:-.04em;font-size:clamp(22px,min(2.3vw,4.2vh),36px);line-height:1.15;padding:9px 0;color:rgba(8,8,8,.16);transition:color .8s}
.ln u{text-decoration:none;background:var(--grad) 0 100%/0 3px no-repeat;transition:background-size 1.1s .25s cubic-bezier(.6,0,.2,1);padding-bottom:2px}
.ln.on{color:var(--ink)}.ln.on u,.ln.seen u{background-size:100% 3px}.ln.seen{color:rgba(8,8,8,.4)}
.ln.miss u{background-image:repeating-linear-gradient(90deg,var(--or) 0 6px,transparent 6px 11px)}
.known{margin-top:clamp(10px,2vh,18px);font-size:14px;color:var(--muted)}
.known b{font-weight:400;color:var(--ink)}.known i{font-style:normal;margin:0 10px;color:var(--grey)}
.lfin .act{margin-top:clamp(16px,2.8vh,26px)}
.lnote{margin-top:clamp(10px,2vh,18px);font-size:14px;line-height:1.5;color:var(--muted);max-width:560px;transition:opacity .9s}
.lnote b{font-weight:400;color:var(--ink)}

/* ---------- 7. Enrichir · triptyque ---------- */
.ehd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;width:min(100%,1180px)}
.ehd h2{font-size:clamp(30px,min(3vw,5.4vh),48px)}
.score{position:relative;flex:none;text-align:right;line-height:1}
.score b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(34px,min(3.2vw,5.6vh),52px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.score b small{font-size:.5em;letter-spacing:0;color:var(--grey);margin-left:.06em}
.score>span{display:block;margin-top:7px;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap}
.score .lk{display:inline-block;margin-top:8px;font-size:13px;color:var(--muted)}
.score .gn{position:absolute;right:0;top:-20px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--or);opacity:0}
.score .gn.go{animation:gn 1.8s cubic-bezier(.2,.7,.2,1)}
@keyframes gn{0%{opacity:0;transform:translateY(10px)}20%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);width:min(100%,1180px);height:clamp(280px,52vh,480px);margin-top:clamp(18px,3.4vh,34px)}
.col{position:relative;display:flex;flex-direction:column;min-height:0;padding:clamp(18px,2.8vh,28px) clamp(18px,1.8vw,28px) clamp(14px,2.2vh,20px);border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(8,8,8,.06),0 18px 50px -30px rgba(8,8,8,.25)}
.ch{margin-bottom:clamp(14px,2.6vh,24px)}
.ct{display:flex;justify-content:space-between;align-items:center;font:300 clamp(26px,min(2.3vw,4.2vh),36px)/1 var(--serif);letter-spacing:-.045em}
.cs{margin-top:8px;font-size:13px;line-height:1.4;color:var(--muted)}.cs em{font-style:normal;color:var(--or);white-space:nowrap}
.lib{flex:1;min-height:0;width:100%;resize:none;border:0;outline:0;background:none;font:300 clamp(17px,min(1.35vw,2.5vh),20px)/1.45 var(--serif);letter-spacing:-.02em;color:var(--ink);caret-color:var(--or);scrollbar-width:none}
.lib::placeholder{color:var(--ink);opacity:.28}
.cf{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-top:12px}
.cf .err{flex-basis:100%;margin:-6px 0 0;font-size:12.5px;max-width:none}
.eb{height:36px;padding:0 16px;font-size:13.5px;border-radius:30px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:opacity .3s,background .4s,color .4s}
.eb .pl{font-family:var(--mono);font-size:10.5px;color:#ff9a5e}
.eb.quiet{background:rgba(8,8,8,.06);color:var(--muted);cursor:default}
.eb[aria-busy=true]{opacity:.55;pointer-events:none}
.qd{display:flex;gap:4px;align-self:center}.qd i{width:14px;height:2px;border-radius:1px;background:rgba(8,8,8,.14);transition:background .5s}.qd i.ok{background:var(--ink)}.qd i.now{background:var(--or)}
.qb{flex:1;min-height:0;display:flex;flex-direction:column;transition:opacity .45s,transform .45s}
.qb.sw{opacity:0;transform:translateY(8px)}
.qq{font:300 clamp(21px,min(1.75vw,3.3vh),27px)/1.15 var(--serif);letter-spacing:-.035em}
.qq span{color:var(--grey)}
.qw{margin-top:8px;font-size:13px;line-height:1.45;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(12px,2.2vh,18px)}
.pill{height:36px;padding:0 15px;border-radius:40px;box-shadow:inset 0 0 0 1px rgba(8,8,8,.22);font-size:14px;display:inline-flex;align-items:center;transition:box-shadow .3s,background .4s,color .4s}
.pill:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.pill[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.qi{width:100%;margin-top:clamp(10px,2vh,16px);border:0;border-bottom:1px solid var(--line);outline:0;background:none;padding:6px 0 8px;font:300 clamp(16px,min(1.25vw,2.3vh),19px)/1.35 var(--serif);letter-spacing:-.02em;color:var(--ink);resize:none;caret-color:var(--or);transition:border-color .3s}
.qi:focus{border-color:var(--ink)}.qi::placeholder{color:var(--ink);opacity:.28}
textarea.qi{flex:1;min-height:60px;scrollbar-width:none}
.qend{flex:1;display:flex;flex-direction:column;justify-content:center}
.qend p{font:300 clamp(22px,min(1.8vw,3.4vh),28px)/1.15 var(--serif);letter-spacing:-.035em}
.qend span{margin-top:8px;font-size:13px;color:var(--muted)}
.mic{display:inline-flex;align-items:center;gap:9px}
.mic i{width:7px;height:7px;border-radius:50%;background:rgba(8,8,8,.3);transition:background .3s}
.mic.rec i{background:var(--or);animation:pu 1s infinite}
@keyframes pu{50%{opacity:.25}}
.dz{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;border-radius:14px;background:rgba(8,8,8,.035);box-shadow:inset 0 0 0 1px rgba(8,8,8,.08);text-align:center;padding:0 18px;transition:background .5s,flex .6s}
.dz:hover,.dz.lit{background:rgba(8,8,8,.06)}
.dz svg{width:22px;height:auto;margin-bottom:6px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.dz:hover svg,.dz.lit svg{transform:translateY(-5px)}
.dz strong{font:300 clamp(18px,min(1.4vw,2.7vh),22px)/1.1 var(--serif);letter-spacing:-.035em}
.dz span{font-size:12.5px;line-height:1.45;color:var(--muted)}
.dz.has{flex:0 0 clamp(64px,11vh,96px)}
.dz.has svg,.dz.has span{display:none}.dz.has strong{font-size:clamp(16px,1.3vw,19px)}
.fl{list-style:none;margin-top:6px;overflow:hidden}
.fl li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:clamp(7px,1.3vh,10px) 0;border-bottom:1px solid var(--line);font-size:13.5px;animation:fin .5s both}
.fl li.still{animation:none}
.fl li>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl li em{font-style:normal;color:var(--grey);margin-left:8px;font-size:12px}
.fl b{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.fl b.rd{animation:pu 1.1s infinite}.fl li.done b{color:var(--or)}
.fl li.ko{color:var(--muted)}.fl li.ko b{color:var(--ink)}
.fl li.ko button{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--or);white-space:nowrap}
.fl li.ko button:hover{text-decoration:underline}
@keyframes fin{from{opacity:0;transform:translateY(6px)}}
.efoot{display:flex;justify-content:space-between;align-items:center;gap:24px;width:min(100%,1180px);margin-top:clamp(14px,2.6vh,24px)}
.priv{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:13px;line-height:1.5;color:var(--muted);max-width:620px}
.priv svg{flex:none;width:13px;height:15px;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.priv a{border-bottom:1px solid var(--line)}
@media (max-width:1100px),(max-height:700px){
  .ehd h2{font-size:clamp(26px,min(2.6vw,4.6vh),40px)}
  .tri{height:clamp(270px,54vh,420px);margin-top:clamp(12px,2.2vh,22px)}
  .qw,.dz span,.fl li em,.ct .qd{display:none}
  .qq{font-size:clamp(19px,min(1.7vw,3vh),24px)}
  .pills{margin-top:10px;gap:6px}.pill{height:32px;padding:0 12px;font-size:13px}
  .lib{font-size:16px}.fl li{font-size:12.5px}
  .col{padding-left:clamp(14px,1.6vw,22px);padding-right:clamp(14px,1.6vw,22px)}
  .priv{font-size:12px;max-width:460px}
}

/* ---------- 8. Installer ---------- */
.pf{display:flex;align-items:center;gap:.22em;font-family:var(--serif);font-weight:300;letter-spacing:-.06em;font-size:clamp(56px,min(8vw,12vh),120px);line-height:1;margin:clamp(6px,1.2vh,12px) 0 0}
.pf img{width:.58em;height:.58em}
.pf.sw{animation:sw .7s cubic-bezier(.2,.7,.2,1)}
@keyframes sw{from{opacity:0;transform:translateY(.12em)}}
.olw{justify-self:end;width:min(100%,250px);margin-right:clamp(40px,7vw,130px)}
@media (max-width:1100px),(max-height:700px){.olw{margin-right:clamp(24px,4vw,60px)}}
.olt{font-size:13px;color:var(--muted)}
.wheel{position:relative;height:clamp(220px,42vh,380px);margin-top:10px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent)}
.wheel ul{list-style:none;position:absolute;left:0;right:0;top:0;will-change:transform}
.wheel li button{display:block;width:100%;padding:clamp(4px,.8vh,8px) 0;font:300 clamp(20px,min(1.8vw,3.4vh),28px)/1.15 var(--serif);letter-spacing:-.04em;color:var(--ink);opacity:var(--o,.3);transition:opacity .4s,padding .3s}
.wheel li button:hover,.wheel li button:focus-visible{opacity:1!important;padding-left:8px}
.pfs{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:clamp(18px,3.2vh,30px);max-width:760px}
.pfs button{font-family:var(--serif);font-weight:300;letter-spacing:-.04em;font-size:clamp(22px,min(2vw,3.6vh),32px);color:var(--muted);padding-bottom:2px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.pfs button:hover{color:var(--ink);border-color:var(--ink)}
#s3 .gl h2{font-size:clamp(26px,min(2.6vw,4.8vh),42px);max-width:none}
.gp{font-size:15px;color:var(--muted);margin-top:clamp(10px,1.6vh,14px);max-width:420px;line-height:1.45}
.ga{margin-top:clamp(18px,3vh,28px);gap:12px 20px}
.shot{position:relative;aspect-ratio:2/1;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(8,8,8,.14),0 0 0 1px rgba(8,8,8,.08);background:#1d2327}
.shot .cv{position:relative;width:100%;height:100%;transform-origin:0 0;transition:transform 1.3s cubic-bezier(.65,0,.2,1)}
.shot img{width:100%;height:100%;object-fit:cover}
.hl{position:absolute;border-radius:5px;box-shadow:0 0 0 2px var(--or),0 0 0 9999px rgba(8,8,8,.3)}
.hl::after{content:"";position:absolute;inset:-2px;border-radius:7px;border:2px solid var(--or);animation:pl 1.8s 3}
@keyframes pl{to{inset:-14px;opacity:0;border-radius:14px}}
.txt{display:flex;flex-direction:column;justify-content:center;min-height:clamp(200px,36vh,340px);padding:clamp(24px,3.6vh,40px) clamp(24px,3vw,44px);border-radius:16px;background:rgba(8,8,8,.035)}
.txt .t{font-size:13px;color:var(--muted);margin-bottom:clamp(14px,2.4vh,22px)}
.code{font-family:var(--mono);font-size:clamp(13px,min(1.15vw,2.1vh),16px);line-height:1.7;letter-spacing:0;white-space:pre}
.code em{font-style:normal;color:var(--or)}
.path{font-family:var(--serif);font-weight:300;letter-spacing:-.04em;font-size:clamp(26px,min(2.8vw,5vh),48px);line-height:1.15}
.path span{color:var(--grey)}
.path b{font-weight:300}.path b:last-child{background:var(--grad) 0 100%/100% 3px no-repeat;padding-bottom:3px}
.txt .note{margin-top:clamp(14px,2.4vh,22px);font-size:14px;color:var(--muted);max-width:none}

/* ---------- 9. Vérification, liaison, activation ---------- */
.seq{list-style:none;margin-top:clamp(18px,3.2vh,32px);max-width:640px}
.seq li{display:flex;justify-content:space-between;align-items:baseline;padding:clamp(10px,1.8vh,16px) 0;border-top:1px solid var(--faint);font-family:var(--serif);font-weight:300;font-size:clamp(22px,min(2.2vw,4vh),32px);letter-spacing:-.04em;color:rgba(8,8,8,.28);transition:color .6s}
.seq li.on{color:var(--ink)}
.seq li b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--or);opacity:0;transition:opacity .4s}
.seq li.on b{opacity:1}
.prev{position:relative;aspect-ratio:16/10.4;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(8,8,8,.12),0 0 0 1px rgba(8,8,8,.08);font-size:clamp(9px,.8vw,12px)}
.prev .bar{display:flex;align-items:center;gap:6px;height:2.6em;padding:0 1em;background:#f1f1f0;border-bottom:1px solid rgba(8,8,8,.06)}
.prev .bar i{width:.7em;height:.7em;border-radius:50%;background:rgba(8,8,8,.12)}
.prev .bar span{margin-left:1em;flex:1;height:1.5em;border-radius:1em;background:#fff;font-size:.9em;line-height:1.5em;padding:0 1em;color:#777}
.prev .site{padding:1.4em 2em}
.prev nav{display:flex;justify-content:space-between;font-family:var(--serif);font-size:1.25em;letter-spacing:-.03em}
.prev nav span{font-family:var(--sans);font-size:.85em;color:#777;letter-spacing:0;display:flex;gap:1.4em}
.prev h3{margin-top:2.4em;font-family:var(--serif);font-weight:300;font-size:2.4em;letter-spacing:-.04em;line-height:1.05;max-width:15ch}
.prev p{margin-top:.9em;font-size:1em;color:#777;max-width:30em}
.prev .cards{display:flex;gap:1em;margin-top:2em}
.prev .cards i{flex:1;aspect-ratio:1/1.05;border-radius:.6em;background:linear-gradient(160deg,#efe9e2,#e3dbd1)}
.wg{position:absolute;right:1.4em;bottom:1.4em;width:min(56%,22em);border-radius:1.2em;background:#fff;box-shadow:0 1.2em 3em rgba(8,8,8,.16),0 0 0 1px rgba(8,8,8,.06);padding:1.2em 1.2em 1em;opacity:0;transform:translateY(1em);transition:opacity .8s .9s,transform .9s .9s cubic-bezier(.2,.7,.2,1)}
.sec.on .wg{opacity:1;transform:none}
.wg .h{display:flex;align-items:center;gap:.6em;font-size:.95em}
.wg .h i{width:.55em;height:.55em;border-radius:50%;background:var(--or)}
.wg .h span{color:#777;margin-left:auto;font-size:.85em}
.wg .m{margin-top:.9em;font-size:1.05em;line-height:1.4;padding:.8em 1em;border-radius:1em .9em .9em .2em;background:#f3f3f2}
.wg .i{margin-top:.9em;height:2.6em;border-radius:2em;border:1px solid rgba(8,8,8,.14);font-size:.95em;line-height:2.6em;padding:0 1.1em;color:#999}
.live{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:clamp(12px,2.2vh,20px)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--or);box-shadow:0 0 0 0 rgba(255,98,1,.5);animation:lv 2.4s 4}
@keyframes lv{70%{box-shadow:0 0 0 10px rgba(255,98,1,0)}}
.chan{display:flex;gap:10px;margin-top:clamp(12px,2.2vh,18px);flex-wrap:wrap}
.chan span{display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:40px;box-shadow:inset 0 0 0 1px rgba(8,8,8,.18);font-size:14px}
.chan img{width:17px;height:17px}

/* ---------- 10. Pages hors parcours (reprise, lien expiré, erreur, 404) ---------- */
.solo{position:fixed;inset:0;z-index:25;background:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:var(--top) var(--left) var(--bot)}
.solo .view>*{opacity:1;transform:none}
.recap{list-style:none;margin-top:clamp(18px,3.2vh,30px);max-width:560px}
.recap li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:clamp(9px,1.6vh,14px) 0;border-top:1px solid var(--faint);font-family:var(--serif);font-weight:300;font-size:clamp(20px,min(1.9vw,3.4vh),28px);letter-spacing:-.035em}
.recap li b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.recap li.on b{color:var(--or)}

/* ---------- 11. Barre de progression ---------- */
.sb{position:fixed;z-index:20;top:0;bottom:0;right:clamp(32px,3.4vw,52px);width:2px}
.sb .trk{position:absolute;left:0;top:var(--pad);bottom:var(--pad);width:2px;background:var(--line)}
.sb .fill{position:absolute;left:0;top:0;width:2px;height:0;overflow:hidden;transition:height 1.15s var(--ease)}
.sb .fill::before{content:"";position:absolute;left:0;top:0;width:100vh;height:2px;transform-origin:0 0;transform:rotate(90deg) translateY(-2px);background:var(--grad) 0 50%/100% 100% no-repeat}
.sb .tick{position:absolute;left:-3px;width:8px;height:1px;background:var(--line);top:calc(var(--pad) + (100vh - 2*var(--pad))*var(--i)/5)}
.sb .lab{position:absolute;right:16px;top:calc(var(--pad) + (100vh - 2*var(--pad))*(var(--i) + .5)/5);transform:translateY(-50%);text-align:right;white-space:nowrap;font-size:14px;line-height:1.3;color:var(--grey);transition:color .8s;cursor:default}
.sb .lab small{display:block;font-size:12px;color:var(--muted);opacity:0;transform:translateY(-3px);transition:opacity .9s,transform .9s}
.sb .lab.done,.sb .lab.cur{color:var(--ink)}
.sb .lab.done{cursor:pointer}
.sb .lab.done small,.sb .lab.cur.info small{opacity:1;transform:none}
.sb .lab.done:hover{color:var(--or)}
.sb .eta{position:absolute;right:0;bottom:calc(100vh - var(--pad) + 12px);white-space:nowrap;font-size:12px;color:var(--muted);opacity:0;transition:opacity 1s}
.sb .eta.on{opacity:1}
body.solo-on .sb,body.solo-on .track{visibility:hidden}
.mb,.seg{display:none} /* fil compact et segments Enrichir : mobile uniquement (§ 14) */

/* ---------- 12. Bandeaux et revue ---------- */
.net{position:fixed;z-index:40;left:20px;bottom:16px;display:flex;align-items:center;gap:10px;height:36px;padding:0 16px 0 14px;border-radius:30px;background:#fff;box-shadow:0 10px 30px rgba(8,8,8,.12),0 0 0 1px rgba(8,8,8,.06);font-size:13px;color:var(--ink);transition:opacity .6s,transform .6s var(--ease)}
.net i{width:7px;height:7px;border-radius:50%;background:var(--or)}
.net.ok i{background:#2a9d5c}
.net.off{opacity:0;transform:translateY(8px);pointer-events:none}
.screens{position:fixed;z-index:30;right:14px;bottom:9px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);opacity:.3;height:24px;padding:0 10px;border-radius:30px;box-shadow:inset 0 0 0 1px rgba(8,8,8,.3)}
.screens:hover,.screens:focus-visible{opacity:.9}
.plan{position:fixed;z-index:31;right:14px;bottom:42px;width:300px;max-height:80vh;overflow:auto;padding:12px;border-radius:14px;background:#fff;box-shadow:0 20px 60px rgba(8,8,8,.18),0 0 0 1px rgba(8,8,8,.06);scrollbar-width:none}
.plan p{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);margin:10px 6px 4px}
.plan button{display:block;width:100%;padding:6px 8px;border-radius:8px;font-size:13px}
.plan button:hover,.plan button:focus-visible{background:rgba(8,8,8,.05)}

/* ---------- 13. Accessibilité et mouvement réduit ---------- */
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px;border-radius:2px}
.btn:focus-visible,.eb:focus-visible,.pill:focus-visible{outline-offset:4px;border-radius:45px}
.fld input:focus-visible,.lib:focus-visible,.qi:focus-visible{outline:none}
.dz:focus-visible{outline-offset:-2px;border-radius:14px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .hl::after{display:none}
}
/* ---------- 14. Mobile ----------
   Téléphones et tablettes en portrait (≤ 900 px), téléphones en paysage (≤ 520 px de haut).
   Principes : chaque section tient dans la hauteur visible (100svh, ou la hauteur du viewport visuel quand le clavier
   est ouvert, via --vvh posée par le script) ; titre en haut, action principale en bas, toujours au même endroit ;
   fil compact en haut (étape · n / 5 · trait gradient-07) qui déplie la liste des étapes ; une seule colonne partout ;
   cibles tactiles ≥ 44 px ; champs ≥ 16 px ; zones sûres iOS (env(safe-area-inset-*)). */
@media (max-width:900px),((max-height:520px) and (max-width:1000px)){
  :root{--gx:20px;--mbh:52px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
    --left:var(--gx);--rail:var(--gx);--top:calc(var(--mbh) + var(--sat) + 22px);--bot:calc(18px + var(--sab))}
  body{-webkit-tap-highlight-color:transparent}
  button{touch-action:manipulation}

  /* Fil compact : logo à gauche (.hdr), étape et n / 5 à droite (#mb), trait de progression en bas */
  .hdr{z-index:28;height:calc(var(--mbh) + var(--sat));padding:var(--sat) var(--gx) 0}
  .hdr img{height:15px}
  .mb{display:flex;position:fixed;z-index:27;top:0;left:0;right:0;height:calc(var(--mbh) + var(--sat));padding:var(--sat) var(--gx) 0;align-items:center;justify-content:flex-end;gap:9px;background:var(--paper);font-size:14px;letter-spacing:-.01em}
  .mb .mbt{display:flex;align-items:baseline;gap:8px}
  .mb b{font-weight:500}
  .mb small{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
  .mb::after{content:"";width:6px;height:6px;border-right:1.2px solid var(--muted);border-bottom:1.2px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .4s var(--ease)}
  .mb[aria-expanded=true]::after{transform:translateY(1px) rotate(-135deg)}
  .mbf{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--line)}
  .mbf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(100% * var(--p,0));background:var(--grad) 0 50%/100vw 100% no-repeat;transition:width 1.15s var(--ease)}
  body.solo-on .mb{visibility:hidden}

  /* Liste des étapes dépliée sous le fil (même balisage que la barre desktop) */
  .sb{top:calc(var(--mbh) + var(--sat));bottom:auto;left:0;right:0;width:auto;z-index:26;display:none;padding:0;box-shadow:0 24px 60px rgba(8,8,8,.16)}
  .sb.open{display:block}
  .sb.open::before{content:"";position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(8,8,8,.22);z-index:-1}
  .sb .trk,.sb .tick{display:none}
  .sb .eta{position:relative;right:auto;bottom:auto;display:block;padding:14px var(--gx) 10px;background:#fff;opacity:1;font-size:12.5px;color:var(--muted)}
  .sb .eta:empty{display:none}
  .sb .lab{position:relative;top:auto;right:auto;transform:none;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 var(--gx);background:#fff;border-top:1px solid var(--faint);font-size:16px;line-height:1.3;white-space:normal;text-align:left;color:var(--grey)}
  .sb .lab small{display:inline;margin-left:auto;opacity:1;transform:none;font-size:13px;text-align:right;color:var(--muted)}
  .sb .lab.cur::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--or)}
  .sb .lab.done:hover{color:var(--ink)}
  .sb .lab:last-of-type{padding-bottom:var(--sab)}

  /* La page : une section = la hauteur visible, défilement interne si le clavier la réduit */
  .track.snap{transition:none}
  .sec{height:var(--vvh,100svh);padding:var(--top) var(--gx) var(--bot);justify-content:flex-start;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none}
  .sec::-webkit-scrollbar{display:none}
  .view,.view.g,.view.g2{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex:1 0 auto;gap:0}
  .view>.gl{display:contents}
  .view>.gl>*{opacity:0;transform:translateY(16px);transition:opacity 1.2s,transform 1.3s var(--ease)}
  .sec.on .view>.gl>*{opacity:1;transform:none}
  .sec.sw .view>.gl>*{transition:opacity .4s,transform .4s var(--ease)}
  .view>.pfl{display:contents}

  /* Typographie */
  h1{font-size:clamp(36px,11vw,46px);line-height:1.04;max-width:none;text-wrap:pretty}
  h1 span{display:block}
  h2{font-size:clamp(27px,8.2vw,34px);line-height:1.1;max-width:none;text-wrap:pretty}
  /* Accueil : titre, champs et bouton groupés au centre, mention en bas */
  #s0 .view>:first-child{margin-top:auto}
  #s0 .fields{flex:0 0 auto}
  #s0 .act{margin-top:26px;padding-top:0}
  #s0 .legal{margin-top:auto;padding-top:22px}
  .kick{font-size:13px;margin-bottom:12px}
  .lead{font-size:16px;line-height:1.45;margin-top:12px;max-width:none}
  .causes{margin-top:14px;max-width:none}
  .causes li{padding:10px 0 10px 20px;font-size:14.5px}
  .num{font-size:64px;margin-bottom:12px}

  /* Champs et actions : bouton principal en bas, pleine largeur ; liens centrés dessous, cibles de 44 px */
  .fields{margin-top:26px;max-width:none}
  .view>.fields{display:flex;flex-direction:column;flex:1 0 auto}
  .fld{font-size:24px;gap:8px;padding-bottom:4px}
  .fld input{padding:8px 0;min-height:44px}
  .fld.ok input{padding:0;min-height:0}
  .fld.ok{font-size:17px}
  .fld .co{font-size:12.5px;max-width:45%;white-space:normal;text-align:right;line-height:1.25}
  .row>div>.fld{font-size:20px;margin-top:18px;max-width:none}
  .note{font-size:12.5px;max-width:none}
  .err{font-size:13.5px;max-width:none}
  #hint{display:none}
  .legal{font-size:12.5px;margin-top:14px;max-width:none}
  .act{margin-top:auto;padding-top:22px;flex-direction:column;align-items:stretch;gap:2px}
  .act.fin{margin-top:auto}
  .btn{position:relative;width:100%;height:52px;justify-content:center;padding:0 44px;font-size:16px}
  .btn .arw{position:absolute;right:20px}
  .btn:hover .arw{transform:none}
  .act .lk,.links .lk,.legal .lk,.cf .lk{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0;border-bottom:0;text-align:center;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;text-decoration-thickness:1px;font-size:15px}
  .act .lk{display:flex;width:100%}
  .act .hint{text-align:center;padding:10px 0 0;font-size:13px}
  .act .err{margin:6px 0 4px}
  .links{flex-direction:column;align-items:stretch;gap:0;margin-top:2px}
  .links .lk{font-size:14px;color:var(--muted)}
  .legal .lk{width:100%;font-size:inherit}

  /* Lecture */
  .lduo{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:4px}
  .big{font-size:clamp(88px,26vw,116px);margin-left:-.04em}
  .stream{height:clamp(112px,25svh,230px);margin-top:8px}
  .ln{font-size:21px;padding:6px 0}
  .known{font-size:15px;line-height:1.8}
  .known b{font-size:17px}
  .known i{display:block;height:0;overflow:hidden;margin:0}
  .lfin{margin-top:auto}
  .lfin .act{margin-top:0;padding-top:16px}
  .lnote{font-size:13.5px;max-width:none}

  /* Enrichir : un panneau à la fois, trois segments avec leur gain, défilement latéral possible */
  .ehd{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .ehd h2{font-size:clamp(25px,7.2vw,30px)}
  .score{display:flex;align-items:baseline;gap:8px;margin-top:10px;text-align:left;line-height:1}
  .score b{display:inline;font-size:30px}
  .score>span{display:inline;margin:0;font-size:12.5px;line-height:1.3;white-space:normal}
  .score .lk{display:none}
  .score .gn{position:static;display:inline-block;margin-left:2px}
  .seg{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;padding:3px;border-radius:40px;background:rgba(8,8,8,.06)}
  .seg button{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:40px;font-size:14px;letter-spacing:-.01em;color:var(--muted);white-space:nowrap;transition:background .4s,color .4s}
  .seg button small{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--or)}
  .seg button small.ok{color:var(--muted)}
  .seg button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:0 2px 10px rgba(8,8,8,.18)}
  .seg button[aria-pressed=true] small{color:#ff9a5e}
  .seg button[aria-pressed=true] small.ok{color:rgba(255,255,255,.55)}
  .tri{display:flex;flex-direction:column;flex:1 1 0;height:auto;min-height:250px;width:100%;margin-top:12px}
  .col{display:none;flex:1;min-height:0;padding:18px 18px 14px;border-radius:18px;overflow:auto;scrollbar-width:none}
  .col::-webkit-scrollbar{display:none}
  .col.cur{display:flex}
  .ch{margin-bottom:12px}
  .ct{font-size:26px}
  .cs{font-size:12.5px}
  .lib{font-size:17px;min-height:110px}
  .qq{font-size:22px}
  .qw{font-size:13px}
  .pills{gap:8px;margin-top:12px}
  .pill{height:40px;padding:0 16px;font-size:14.5px}
  .qi{font-size:17px;padding:8px 0 10px}
  textarea.qi{min-height:88px}
  .qend p{font-size:23px}
  .cf{padding-top:12px;gap:6px 18px}
  .cf .lk{min-height:44px;font-size:14px}
  .eb{height:44px;padding:0 18px;font-size:14px}
  .mic{min-height:44px}
  .dz{flex:0 0 auto;min-height:108px;padding:14px 16px;gap:4px}
  .dz:hover{background:rgba(8,8,8,.035)}
  .dz:hover svg{transform:none}
  .dz strong{font-size:19px}
  .dz span{display:block;font-size:12.5px}
  .dz.has{flex-basis:auto;min-height:56px}
  .fl{overflow:visible}
  .fl li{padding:10px 0;font-size:14px;align-items:center}
  .fl li>span{white-space:normal}
  .fl li em{display:block;margin:2px 0 0;font-size:12.5px}
  .fl li.ko button{min-height:28px}
  .efoot{flex-direction:column;align-items:stretch;gap:12px;width:100%;margin-top:14px}
  .efoot .btn{order:-1}
  .priv{font-size:12px;max-width:none}
  .priv svg{margin-top:1px}

  /* Installer : plateforme, puces, guide par e-mail en premier */
  .view.g2>.olw{order:4}
  .pfl>.act{order:5}
  .pfl>.legal{order:6}
  .pf{font-size:clamp(44px,13vw,56px);margin-top:4px}
  .olw{justify-self:auto;width:auto;margin:20px 0 0}
  .olt{font-size:13px}
  .wheel{height:auto;margin:10px calc(-1 * var(--gx)) 0;padding:0 var(--gx);overflow:auto hidden;-webkit-mask-image:none;mask-image:none;scrollbar-width:none;overscroll-behavior-x:contain}
  .wheel::-webkit-scrollbar{display:none}
  .wheel ul{position:static;display:flex;gap:8px;width:max-content;transform:none!important}
  .wheel li button,.pfs button{display:inline-flex;align-items:center;height:44px;width:auto;padding:0 16px;border:0;border-radius:40px;box-shadow:inset 0 0 0 1px rgba(8,8,8,.2);font:300 19px/1 var(--serif);letter-spacing:-.03em;color:var(--ink);opacity:1!important;white-space:nowrap;transition:box-shadow .3s}
  .wheel li button:hover,.wheel li button:focus-visible,.pfs button:hover{padding-left:16px;box-shadow:inset 0 0 0 1px var(--ink);border-color:transparent}
  .pfs{gap:8px;margin-top:20px;max-width:none}
  .gl>.shot,.gl>.txt{order:1;margin-top:18px}
  .gl>.act{order:2}
  .gl>.links{order:3}
  #s3 .gl h2{font-size:clamp(24px,7vw,28px)}
  #s3 .num{font-size:56px;margin-bottom:8px}
  .gp{font-size:14.5px;margin-top:8px;max-width:none}
  .shot{aspect-ratio:16/9;border-radius:10px;box-shadow:0 18px 50px rgba(8,8,8,.14),0 0 0 1px rgba(8,8,8,.08)}
  .shot.z0 .cv{transform:none!important}
  .txt{min-height:0;padding:20px 18px}
  .txt .t{margin-bottom:12px}
  .code{font-size:12.5px;line-height:1.65}
  .path{font-size:24px}
  .txt .note{margin-top:12px;font-size:13.5px}

  /* Vérification, liaison, activation, en ligne */
  .seq{margin-top:18px;max-width:none}
  .seq li{font-size:22px;padding:12px 0}
  #s6 .prev{order:1;margin-top:18px;aspect-ratio:5/4;font-size:10px}
  #s6 .gl>.act{order:2}
  .prev .site{padding:1.2em 1.6em}
  .prev h3{font-size:2em;max-width:11ch}
  .prev p{max-width:22em}
  .wg{width:min(62%,21em);right:1.2em;bottom:1.2em}
  .live{margin-bottom:12px}
  .chan{gap:8px;margin-top:12px}
  .chan span{height:44px;padding:0 16px;font-size:14px}

  /* Pages hors parcours */
  .solo{padding:var(--top) var(--gx) var(--bot);overflow:auto}
  .solo .view{flex:0 0 auto;margin:auto 0}
  .solo .act{margin-top:0}
  .recap{margin-top:18px;max-width:none}
  .recap li{font-size:19px;padding:12px 0}
  .fld.sm{font-size:22px}

  /* Bandeau réseau (en haut, sous le fil) et revue */
  .net{left:var(--gx);right:var(--gx);top:calc(var(--mbh) + var(--sat) + 10px);bottom:auto;height:auto;padding:10px 14px;align-items:flex-start;font-size:13px;line-height:1.4}
  .net i{flex:none;margin-top:6px}
  .net.off{transform:translateY(-8px)}
  .screens{right:12px;bottom:calc(10px + var(--sab))}
  .plan{left:12px;right:12px;width:auto;bottom:calc(42px + var(--sab));max-height:70svh}
  .plan button{min-height:40px}
}
@media (max-width:900px) and (max-height:700px){
  /* Petits téléphones (375×667) : on resserre la lecture et le guide pour tenir sans défilement */
  :root{--top:calc(var(--mbh) + var(--sat) + 14px)}
  .kick{margin-bottom:8px}
  .big{font-size:clamp(76px,21vw,96px)}
  .stream{height:clamp(96px,17svh,160px)}
  .ln{font-size:19px;padding:5px 0}
  .lnote{margin-top:8px;font-size:13px}
  #s3 .num{font-size:48px;margin-bottom:6px}
  .gp{font-size:14px}
  .shot{aspect-ratio:2/1}
  .gl>.shot,.gl>.txt{margin-top:12px}
  .act{padding-top:16px}
  .ehd h2{font-size:24px}
  .score{margin-top:6px}
  .seg{margin-top:12px}
  .tri{min-height:216px;margin-top:10px}
  .col{padding:14px 16px 12px}
  .ch{margin-bottom:8px}
  .ct{font-size:22px}
  .cs{display:none}
  .qq{font-size:20px}
  .pills{margin-top:10px}
  .pill{height:36px;padding:0 14px}
  .qi{margin-top:8px;padding:6px 0 8px}
  .cf{padding-top:8px}
  .dz{min-height:88px}
  .fl li{padding:8px 0}
  .efoot{margin-top:12px;gap:10px}
  .priv{font-size:11.5px}
}
@media (max-height:520px) and (max-width:1000px){
  :root{--mbh:44px;--top:calc(var(--mbh) + var(--sat) + 12px)}
  h1{font-size:30px}
  h2{font-size:24px}
  .big{font-size:68px}
  .stream{height:100px}
  .num{font-size:44px}
  .tri{min-height:200px}
  .fields{margin-top:14px}
  .act{padding-top:14px}
}

/* Petits téléphones (iPhone SE, 375×667) : l'accueil tient sans défiler, même avec un message d'erreur */
@media (max-width:900px) and (max-height:700px){#s0 h1{font-size:32px;line-height:1.04}}