/* ============================================================
   B-FREEZE THERMOFREEZE — V1026 · design "quiet luxury" 2026
   Minimalisme expressif : typographie forte, blanc généreux,
   identité B-Freeze Yura (turquoise), dualité ROUGE / FROID
   en touches nettes (jamais de dégradé dans les textes).
   ============================================================ */
:root{
  --bg:#FFFFFF; --soft:#F7F9FA; --ink:#0B1116; --sec:#5A646D;
  --brand:#2EB6DA; --brand-d:#157E9E; --brand-ink:#0D5064;
  --chaud:#C4122F; --chaud-d:#9C0E25; --froid:#2EB6DA;
  --line:#E8ECEF; --dark:#000000; --dark2:#111922;
  --duo:linear-gradient(90deg,var(--chaud) 0 50%,var(--froid) 50% 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lang-fr .en{display:none!important}
html.lang-en .fr{display:none!important}
body{margin:0;font-family:'Inter',system-ui,sans-serif;font-size:16.5px;line-height:1.72;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* ---------- typographie ---------- */
h1,h2,.serif{font-family:'Outfit','Inter',sans-serif;font-weight:600;line-height:1.06;letter-spacing:-.028em;margin:0 0 24px}
h1{font-size:clamp(38px,5.4vw,72px)}
h2{font-size:clamp(28px,3.6vw,48px)}
.ov{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--sec);margin-bottom:22px}
.lead{font-size:clamp(17px,1.4vw,19.5px);color:var(--sec);max-width:800px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.gold{color:var(--brand-d)}
.sec.dark .gold{color:var(--brand)}
.tchaud{color:var(--chaud)}
.tfroid{color:var(--brand-d)}
.sec.dark .tfroid{color:var(--brand)}

/* ---------- barre haute ---------- */
.regbar{background:var(--dark);color:#7E8993;font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-align:center;padding:9px 16px}
.regbar b{font-weight:600;color:#F3F6F8}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:24px;padding:14px 32px;max-width:1340px}
.logo{flex:none}
.logo img{height:58px;width:auto;display:block}
nav{display:flex;gap:30px;margin-left:auto;font-size:13.5px;font-weight:500;letter-spacing:.02em}
nav a{color:var(--ink);text-decoration:none;position:relative;padding:4px 0;white-space:nowrap}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--ink);transition:right .25s ease}
nav a:hover::after,nav a.on::after{right:0}
nav a.on{font-weight:600}

/* ---------- boutons · sobres, rectangulaires, lettrage espacé ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:2px;padding:17px 34px;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease}
.btn::after{content:"→";font-size:14px;letter-spacing:0;transition:transform .25s ease}
.btn:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.btn:hover::after{transform:translateX(5px)}
.btn.gold{background:var(--ink);border-color:var(--ink)}
.btn.gold:hover{background:var(--chaud-d);border-color:var(--chaud-d)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.sec.dark .btn,.sec.dark .btn.gold{background:#F3F6F8;border-color:#F3F6F8;color:var(--ink)}
.sec.dark .btn:hover{background:var(--brand);border-color:var(--brand);color:#06222C}
header .btn{padding:13px 24px;font-size:11px;flex:none}
.lang-sw{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;font-size:11.5px;font-weight:600;letter-spacing:.08em;flex:none}
.lang-sw button{border:0;background:transparent;padding:9px 13px;cursor:pointer;font:inherit;color:var(--sec)}
.lang-sw button.on{background:var(--ink);color:#fff}
.burger{display:none;flex:none;background:#fff;border:1px solid var(--line);border-radius:2px;width:42px;height:42px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;padding:0}
.burger svg{pointer-events:none}

/* ---------- sections ---------- */
.sec{padding:110px 0;position:relative;overflow:hidden}
.sec.alt{background:var(--soft)}
.sec.dark{background:var(--dark);color:#DCE3E9}
.sec.dark .lead,.sec.dark p{color:#8D99A3}
.sec.dark h1,.sec.dark h2{color:#F3F6F8}
/* halos de dualité, très discrets */
.sec::before,.sec::after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(110px);pointer-events:none}
.sec::before{background:radial-gradient(circle,rgba(196,18,47,.05),transparent 62%);top:0;left:0;transform:translate(-33%,-33%)}
.sec::after{background:radial-gradient(circle,rgba(46,182,218,.07),transparent 62%);bottom:0;right:0;transform:translate(33%,33%)}
.sec.dark::before{background:radial-gradient(circle,rgba(196,18,47,.12),transparent 62%)}
.sec.dark::after{background:radial-gradient(circle,rgba(46,182,218,.14),transparent 62%)}
.sec>.wrap{position:relative;z-index:1}
.snum{display:flex;align-items:center;gap:18px;margin-bottom:40px}
.snum .n{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--sec);white-space:nowrap;display:inline-flex;align-items:center;gap:12px}
.snum .n::before{content:"";width:22px;height:2px;background:var(--duo)}
.snum .l{flex:1;height:1px;background:var(--line)}
.sec.dark .snum .n{color:#7E8993}
.sec.dark .snum .l{background:#1E2831}
.center .snum{justify-content:center}
.center .snum .l{display:none}
.sec p{margin:0 0 16px}
.sec p:last-child{margin-bottom:0}

/* ---------- placeholders visuels ---------- */
.ph{position:relative;background:#F2F4F6;border:1px dashed #C6CED5;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:#69737C;padding:28px;min-height:340px}
.ph .tag{font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#8C96A0}
.ph .d{font-size:14.5px;max-width:430px;line-height:1.55}
.ph svg{opacity:.35}
.ph.tall{min-height:480px}
.sec.dark .ph{background:#121A22;border-color:#2C3843;color:#8C96A0}

/* ---------- blocs signature ---------- */
.claimbox{margin:52px auto 0;text-align:center}
.claim-lines{font-family:'Outfit',sans-serif;font-size:clamp(24px,3vw,38px);font-weight:600;letter-spacing:-.02em;line-height:1.35}
.plus{display:inline-block;margin:0 12px;color:var(--sec);font-weight:500}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.duo.trio{grid-template-columns:repeat(3,1fr)}
.duo .card{position:relative;background:#fff;border:1px solid var(--line);border-radius:4px;padding:40px 34px}
.duo .card::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;background:var(--ink)}
.duo .card.chaud::before{background:var(--chaud)}
.duo .card.froid::before{background:var(--froid)}
.card .ct{font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px;display:block}
.card.chaud .ct{color:var(--chaud)}
.card.froid .ct{color:var(--brand-d)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.cc{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px 30px;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.cc:hover{border-color:#C9D2D8;transform:translateY(-3px);box-shadow:0 22px 44px rgba(11,17,22,.06)}
.sec.dark .cc{background:var(--dark2);border-color:#1E2831}
.cc b{display:block;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.sec.dark .cc b{color:#E8EDF1}
.cc p{font-size:15.5px;color:var(--sec);margin:0}
.sec.dark .cc p{color:#8D99A3}
.bigline{font-family:'Outfit',sans-serif;font-size:clamp(24px,3vw,40px);font-weight:600;letter-spacing:-.022em;line-height:1.25;margin:42px 0 0}
.statement{font-family:'Outfit',sans-serif;font-size:clamp(15px,1.5vw,20px);font-weight:600;letter-spacing:.22em;text-transform:uppercase;line-height:2.3}
.goldline{width:84px;height:2px;background:var(--duo);margin:34px auto}
.left .goldline{margin:34px 0}

/* ---------- étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.step{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px 30px}
.step .sn{font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;letter-spacing:.22em;color:#B9C2C9;display:block;margin-bottom:14px}
.step b{display:block;font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.step b.tchaud{color:var(--chaud)}
.step b.tfroid{color:var(--brand-d)}
.step p{font-size:15.5px;color:var(--sec);margin:0}

/* ---------- listes zones / puces ---------- */
.zlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 36px;margin:40px 0 0;padding:0;list-style:none;text-align:left}
.zlist li{border-bottom:1px solid var(--line);padding:15px 2px;font-size:15.5px;display:flex;gap:14px;align-items:baseline}
.zlist li::before{content:"";flex:none;width:8px;height:2px;background:var(--duo);transform:translateY(-4px)}
.plist{margin:26px 0 0;padding:0;list-style:none}
.plist li{padding:14px 0 14px 26px;position:relative;border-bottom:1px solid var(--line);font-size:16px}
.plist li::before{content:"";position:absolute;left:0;top:26px;width:10px;height:2px;background:var(--duo)}
.sec.dark .plist li{border-color:#1E2831}

/* ---------- formulaire ---------- */
form{max-width:860px;margin:46px auto 0;text-align:left}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:22px 0 8px}
.req{color:var(--chaud);font-style:normal}
input,select,textarea{width:100%;padding:14px 2px;border:0;border-bottom:1.5px solid #CBD3D9;border-radius:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);transition:border-color .2s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
textarea{min-height:110px;resize:vertical}
.radio-row{display:flex;gap:30px;margin-top:12px}
.radio-row label{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;letter-spacing:.04em;cursor:pointer}
.radio-row input{width:18px;height:18px;accent-color:var(--ink)}

/* ---------- pied de page ---------- */
footer{background:var(--dark);color:#7E8993;text-align:center;padding:58px 24px 46px;font-size:13.5px;position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--duo)}
footer img{height:50px;width:auto;margin-bottom:18px;background:#fff;border-radius:2px;padding:6px 12px}
footer a{color:#C2CBD3;text-decoration:none}
footer .fx{margin-top:10px;letter-spacing:.04em}

/* ---------- divers ---------- */
.pagehead{background:var(--soft);border-bottom:1px solid var(--line);padding:92px 0 68px;text-align:center;position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(110px);background:radial-gradient(circle,rgba(196,18,47,.06),transparent 62%);top:-180px;left:-140px}
.pagehead::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(110px);background:radial-gradient(circle,rgba(46,182,218,.09),transparent 62%);top:-140px;right:-140px}
.pagehead .wrap{position:relative;z-index:1}
.rv{opacity:0;transition:opacity .9s linear}
.rv.in{opacity:1}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transition:none}}

/* ---------- responsive ---------- */
@media(max-width:1100px){
 header nav{display:none}
 .burger{display:inline-flex}
 header.mnav-open nav{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:12px 28px 18px;border-bottom:1px solid var(--line)}
 header.mnav-open nav a{padding:13px 0;border-bottom:1px solid var(--line)}
}
@media(max-width:900px){
 .sec{padding:74px 0}
 .split{grid-template-columns:1fr;gap:40px}
 .duo,.duo.trio{grid-template-columns:1fr}
 .cards,.steps{grid-template-columns:1fr}
 .zlist{grid-template-columns:1fr}
 .frow{grid-template-columns:1fr}
 header .btn{display:none}
 .lang-sw{margin-left:auto}
}
@media(max-width:700px){.snum .n{white-space:normal;text-align:left;line-height:1.6}}
@media(max-width:520px){
 header .wrap{padding:10px 14px;gap:10px}
 .logo img{height:44px}
 .wrap{padding:0 20px}
}
/* ---------- fil de progression des sections ---------- */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:48;display:flex;flex-direction:column;gap:11px;mix-blend-mode:difference}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none}
.rail .dot{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.38;transition:opacity .2s ease,transform .2s ease}
.rail .lb{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:0;transform:translateX(6px);transition:opacity .2s ease,transform .2s ease;white-space:nowrap}
.rail a:hover .dot{opacity:.85}
.rail a:hover .lb{opacity:.7;transform:none}
.rail a.on .dot{opacity:1;transform:scale(1.5)}
.rail a.on .lb{opacity:1;transform:none}
@media(max-width:1200px){.rail{display:none}}
/* titres de sections plus présents */
h2{font-size:clamp(34px,4.4vw,60px)}
.center h2{max-width:1000px;margin-left:auto;margin-right:auto}
/* ---------- mode présentation plein écran ---------- */
:root{--hh:124px}
body.deck{overflow:hidden;height:100vh}
body.deck section.sec[id]{position:fixed;left:0;right:0;top:var(--hh);bottom:0;margin:0;padding:0;opacity:0;visibility:hidden;transition:opacity .85s ease,visibility 0s linear .85s;overflow-y:auto;overflow-x:hidden;display:flex;align-items:center;z-index:1}
body.deck section.sec[id].curs{opacity:1;visibility:visible;transition:opacity .85s ease;z-index:2}
body.deck section.sec>.wrap{width:100%;margin:auto;padding-top:40px;padding-bottom:40px}
body.deck footer{position:fixed;left:0;right:0;bottom:0;z-index:5;transform:translateY(101%);transition:transform .6s ease;padding:26px 24px 22px}
body.deck footer img{display:none}
body.deck.fin-vue footer{transform:none}
body.deck #finale .wrap{padding-bottom:180px}
body.deck section.sec::-webkit-scrollbar{width:0;height:0}
/* mode présentation : contenu compacté pour tenir à l'écran */
body.deck h1{font-size:clamp(32px,4.2vw,54px);margin-bottom:18px}
body.deck h2{font-size:clamp(28px,3.4vw,46px);margin-bottom:18px}
body.deck .lead{font-size:clamp(15.5px,1.2vw,17.5px)}
body.deck .sec p{margin-bottom:12px}
body.deck .ph{min-height:170px;padding:20px}
body.deck .ph.tall{min-height:220px}
body.deck .ph .d{font-size:13px;max-width:520px}
body.deck .claimbox{margin-top:26px}
body.deck .claim-lines{font-size:clamp(20px,2.3vw,30px)}
body.deck .bigline{font-size:clamp(20px,2.4vw,32px);margin-top:24px}
body.deck .statement{font-size:clamp(13px,1.2vw,16px);line-height:2}
body.deck .goldline{margin:20px auto}
body.deck .left .goldline{margin:20px 0}
body.deck .cards,body.deck .steps,body.deck .duo{margin-top:28px;gap:16px}
body.deck .cc,body.deck .step,body.deck .duo .card{padding:22px 22px}
body.deck .cc p,body.deck .step p{font-size:14px;line-height:1.55}
body.deck .plist li{padding:9px 0 9px 24px;font-size:14.5px}
body.deck .plist li::before{top:18px}
body.deck .zlist li{padding:10px 2px;font-size:14px}
body.deck .zlist{margin-top:24px}
body.deck .split{gap:48px}
body.deck .ov{margin-bottom:14px}
/* compaction supplémentaire de la section d'accueil en présentation */
body.deck #s1 h1{font-size:clamp(30px,3.8vw,48px);margin-bottom:12px}
body.deck #s1 .bigline{margin:0 0 16px;font-size:clamp(18px,2.1vw,28px)}
body.deck #s1 .ph.tall{min-height:150px;margin-top:26px}
body.deck #s1 .statement{margin:14px 0 0}
body.deck #s1 .claimbox p{margin-top:14px}
/* halos fixés au viewport en présentation (n'étendent plus le défilement interne) */
body.deck section.sec[id]::before,body.deck section.sec[id]::after{position:fixed}
/* accueil : compaction renforcée */
body.deck section.sec>.wrap{padding-top:24px;padding-bottom:24px}
body.deck #s1 h1{font-size:clamp(28px,3.4vw,44px)}
body.deck #s1 .lead{font-size:15px}
body.deck #s1 .sec p,body.deck #s1 p{margin-bottom:9px}
body.deck #s1 .claimbox{margin-top:16px}
body.deck #s1 .claim-lines{font-size:clamp(17px,1.9vw,24px)}
body.deck #s1 .goldline{margin:14px auto}
body.deck #s1 .ph.tall{min-height:110px;margin-top:18px}
body.deck #s1 .ov{margin-bottom:10px}
/* présentation : le visuel héros devient plein écran plus tard — masqué en mode slides */
body.deck #s1 .ph{display:none}
/* adaptation aux écrans moins hauts */
@media (max-height:940px){
 body.deck h2{font-size:clamp(26px,3vw,40px);margin-bottom:14px}
 body.deck .ph{min-height:120px}
 body.deck .ph.tall{min-height:150px}
 body.deck .cards,body.deck .steps,body.deck .duo{margin-top:20px;gap:13px}
 body.deck .cc,body.deck .step,body.deck .duo .card{padding:17px 19px}
 body.deck .goldline{margin:16px auto}
 body.deck .left .goldline{margin:16px 0}
 body.deck .bigline{font-size:clamp(18px,2.1vw,27px);margin-top:18px}
 body.deck .statement{font-size:clamp(12.5px,1.1vw,14.5px);line-height:1.95}
 body.deck .claim-lines{font-size:clamp(18px,2vw,26px)}
 body.deck .claimbox{margin-top:20px}
}
@media (max-height:850px){
 body.deck .lead{font-size:14.5px}
 body.deck .sec p{margin-bottom:8px}
 body.deck h2{font-size:clamp(23px,2.7vw,34px)}
 body.deck .ph .d{max-width:640px;font-size:12px}
 body.deck .ph{min-height:96px;padding:14px}
 body.deck .ph.tall{min-height:116px}
 body.deck .cc p,body.deck .step p{font-size:13px}
 body.deck .cc b,body.deck .step b{font-size:12px;margin-bottom:6px}
 body.deck .plist li{padding:7px 0 7px 22px;font-size:13.5px}
 body.deck .plist li::before{top:15px}
 body.deck .zlist li{padding:8px 2px;font-size:13px}
 body.deck section.sec>.wrap{padding-top:16px;padding-bottom:16px}
}
/* ---------- voile-titre entre les sections ---------- */
.regbar{position:relative;z-index:60}
#veil{position:fixed;inset:0;z-index:45;--veilbg:#fff;--veilink:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;opacity:0;visibility:hidden;transition:opacity .45s linear,visibility 0s linear .5s;pointer-events:none}
#veil.on{opacity:1;visibility:visible;transition:opacity .45s linear}
#veil.alt{--veilbg:var(--soft)}
#veil.dark{--veilbg:var(--dark);--veilink:#F2F6F9}
#veil .vcover{position:absolute;inset:0;background:var(--veilbg)}
#veil .vlow{position:absolute;left:0;right:0;top:50%;bottom:0;background:var(--veilbg)}
#veil .vgroup{position:relative;display:flex;flex-direction:column;align-items:center}
#veil .vmask{overflow:hidden;padding:10px 0 26px;max-width:min(94vw,1500px)}
#veil .vt{font-family:'Outfit','Inter',sans-serif;font-weight:600;font-size:clamp(36px,5vw,72px);letter-spacing:-.025em;line-height:1.1;text-align:center;color:var(--veilink);padding:0 24px;transform:translateY(118%);opacity:0;transition:none}
#veil.on .vt{transform:translateY(0);transition:transform .8s cubic-bezier(.3,.6,.25,1) .3s}
#veil .vl{width:min(94vw,1500px);height:2.5px;background:var(--duo);opacity:0;transition:opacity .35s linear}
#veil.on .vl{opacity:1;transition:opacity .4s linear .1s}
/* étape 2 : la bannière titre+ligne se gare en haut de page et y reste */

#veil.dock .vlow{opacity:0;transition:opacity .5s linear}
#veil.dock .vgroup{position:absolute;left:0;right:0;top:calc(var(--hh) + 8px)}
#veil.dock .vt{font-size:clamp(19px,2.1vw,30px);transition:font-size 1s cubic-bezier(.45,.05,.25,1),transform .8s cubic-bezier(.3,.6,.25,1) .3s}
#veil.dock .vmask{padding:4px 0 10px;transition:padding 1s cubic-bezier(.45,.05,.25,1)}
#veil.reset .vgroup{opacity:0;transition:opacity .28s linear}
#veil .vgroup{opacity:1}
/* étape 3 : en mode présentation, le contenu descend depuis la ligne */
body.deck .rv{opacity:0;transform:translateY(-26px);transition:opacity .55s linear,transform .55s cubic-bezier(.3,.6,.25,1)}
body.deck .rv.in{opacity:1;transform:none}
/* les sections vivent sous la bannière garée */
body.deck section.sec[id]{top:calc(var(--hh) + 92px)}
/* fondu des sections lui aussi linéaire (le voile orchestre la transition) */
body.deck section.sec[id]{transition:opacity .45s linear,visibility 0s linear .45s}
body.deck section.sec[id].curs{transition:opacity .45s linear}
/* compaction accrue : les sections tiennent sous la bannière */
body.deck section.sec>.wrap{padding-top:12px;padding-bottom:20px}
body.deck h2{margin-bottom:12px}
body.deck .cards,body.deck .steps,body.deck .duo{margin-top:18px}
body.deck .zlist{margin-top:18px}
body.deck .plist{margin-top:16px}
body.deck .claimbox{margin-top:16px}
body.deck .statement{line-height:1.85}
body.deck .ph{min-height:100px}
body.deck .ph.tall{min-height:130px}
/* ajustements fins : zéro débordement sous la bannière */
body.deck #s1 [style*="margin-top"],body.deck #s2 [style*="margin-top"],body.deck #s6 [style*="margin-top"],body.deck #s7 [style*="margin-top"]{margin-top:10px!important}
body.deck #s2 .claim-lines{margin:10px 0!important}
body.deck #s1 .lead,body.deck #s2 .lead{font-size:14px}
body.deck #s1 .btn{padding:13px 24px}
body.deck #s2 .ph,body.deck #s6 .ph{min-height:78px}
body.deck #s6 h2{font-size:clamp(22px,2.5vw,32px)}
body.deck #s6 .duo .card{padding:14px 16px}
body.deck #s6 .card p{font-size:13px}
body.deck #s7 .plist li{padding:6px 0 6px 22px;font-size:13.5px}
body.deck #s7 .plist li::before{top:14px}
/* ---------- révision rythme luxe : lenteur, fluidité, mêmes dimensions ---------- */
#veil{transition:opacity .5s linear,visibility 0s linear .55s}
#veil.on{transition:opacity .5s linear}
#veil.on .vt{transform:translateY(0);opacity:1;transition:transform .9s cubic-bezier(.33,0,.15,1) .1s,opacity .7s linear .12s}
#veil.on .vl{transition:opacity .45s linear .05s}
#veil .vgroup{will-change:transform}
#veil.dock .vt{font-size:clamp(36px,5vw,72px);opacity:1;transition:none}
#veil.dock .vmask{padding:4px 0 14px;transition:padding 1.15s cubic-bezier(.33,0,.15,1)}
#veil.dock .vgroup{top:calc(var(--hh) + 6px)}
#veil.dock .vcover{opacity:1}
#veil.dock .vlow{transition:opacity .75s linear}
#veil.reset .vgroup{transition:opacity .26s linear}
/* étape 5 : fondu pur, linéaire, posé (pas de déplacement) */
body.deck .rv{opacity:0;transform:none;transition:opacity .95s linear}
body.deck .rv.in{opacity:1;transform:none}
/* la bannière pleine taille demande plus de place */
body.deck section.sec[id]{top:calc(var(--hh) + clamp(94px,7.2vw,128px))}
body.deck section.sec>.wrap{padding-top:10px;padding-bottom:14px}
body.deck .cards,body.deck .steps,body.deck .duo{gap:12px;margin-top:16px}
body.deck .cc,body.deck .step,body.deck .duo .card{padding:15px 17px}
body.deck .ph{min-height:84px}
body.deck .ph.tall{min-height:110px}
body.deck h2{margin-bottom:10px}
body.deck .goldline{margin:12px auto}
body.deck .left .goldline{margin:12px 0}
body.deck .plist li{padding:6px 0 6px 22px}
body.deck .plist li::before{top:14px}
body.deck .zlist li{padding:7px 2px}
body.deck .statement{line-height:1.8}
/* en présentation, le contenu est une feuille d'un seul bloc : pas de fondus individuels */
body.deck .rv{opacity:1;transform:none;transition:none}
body.deck section.sec>.wrap{will-change:transform}
/* découpe stricte : rien ne dépasse au-dessus de la fente */
body.deck section.sec[id]{clip-path:inset(0)}
/* bande persistante derrière le titre garé (couleur de la section) */
#veil .vband{position:absolute;left:0;top:0;right:0;height:0;display:none}
/* écrans moins hauts : compaction renforcée */
@media (max-height:880px){
 body.deck .ph{min-height:70px;padding:10px}
 body.deck .ph.tall{min-height:90px}
 body.deck .ph .d{display:none}
 body.deck h2{font-size:clamp(21px,2.4vw,30px);margin-bottom:8px}
 body.deck .lead{font-size:13.5px}
 body.deck .sec p{margin-bottom:7px}
 body.deck .cc,body.deck .step,body.deck .duo .card{padding:12px 14px}
 body.deck .cc p,body.deck .step p{font-size:12.5px}
 body.deck .cards,body.deck .steps,body.deck .duo{gap:10px;margin-top:12px}
 body.deck .plist li{padding:5px 0 5px 20px;font-size:13px}
 body.deck .plist li::before{top:12px}
 body.deck .zlist li{padding:6px 2px;font-size:12.5px}
 body.deck .statement{font-size:12px;line-height:1.7}
 body.deck .bigline{font-size:clamp(16px,1.9vw,24px);margin-top:12px}
 body.deck .claim-lines{font-size:clamp(16px,1.8vw,22px)}
 body.deck .goldline{margin:10px auto}
 body.deck .left .goldline{margin:10px 0}
 body.deck #s1 h1{font-size:clamp(24px,3vw,38px)}
 body.deck section.sec>.wrap{padding-top:8px;padding-bottom:10px}
}
/* accueil compact sur écrans peu hauts */
@media (max-height:880px){
 body.deck #s1 .ov{font-size:10px;margin-bottom:8px}
 body.deck #s1 h1{font-size:clamp(22px,2.7vw,33px);margin-bottom:8px}
 body.deck #s1 .bigline{font-size:clamp(14px,1.6vw,19px);margin:0 0 10px}
 body.deck #s1 .lead{font-size:13px}
 body.deck #s1 p{margin-bottom:6px}
 body.deck #s1 .claim-lines{font-size:clamp(14px,1.6vw,19px)}
 body.deck #s1 .claimbox{margin-top:10px}
 body.deck #s1 .statement{font-size:11px;line-height:1.6;margin-top:8px}
 body.deck #s1 .goldline{margin:8px auto}
 body.deck #s1 .btn{padding:11px 20px;font-size:11px}
}
/* bandeau haut opaque : pas de gris translucide sur sections sombres, logo intégré */
header{background:#fff}
/* le nom de section tient sur une ligne (taille auto-ajustée en JS si besoin) */
#veil .vt{white-space:nowrap}
#veil .vt{text-transform:uppercase}
/* ---------- rythme ×4 : mêmes étapes, quatre fois plus rapides ---------- */
#veil{transition:opacity .22s linear,visibility 0s linear .24s}
#veil.on{transition:opacity .22s linear}
#veil.on .vt{transition:transform .50s cubic-bezier(.33,0,.15,1) .06s,opacity .42s linear .06s}
#veil.on .vl{transition:opacity .26s linear .02s}
#veil.dock .vmask{transition:padding .62s cubic-bezier(.33,0,.15,1)}
#veil.dock .vlow{transition:opacity .42s linear}
#veil.reset .vgroup{transition:opacity .12s linear}
/* ---------- titre de section : corps fin, moins gras ---------- */
#veil .vt{font-weight:200;letter-spacing:.025em}
/* ---------- parcours molette : titres visibles sur le fil ---------- */
.rail.browse .dot{opacity:.5}
.rail.browse a.sel .lb{opacity:1;transform:none}
.rail.browse a.sel .dot{opacity:1;transform:scale(1.7)}
/* ---------- hero accueil : visuel ThermoFreeze avec titres superposés ---------- */
.hero1{position:relative;border-radius:14px;overflow:hidden;margin:0 0 28px;box-shadow:0 18px 50px rgba(10,16,22,.18)}
.hero1 img{display:block;width:100%;height:clamp(210px,34vh,360px);object-fit:cover}
.hero1-tx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.hero1-tx .ov{color:#fff;opacity:.92;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hero1-tx h1{color:#fff;margin:14px 0 0;text-shadow:0 2px 26px rgba(0,0,0,.55)}
@media (max-height:880px){body.deck .hero1 img{height:clamp(170px,26vh,260px)}body.deck .hero1{margin-bottom:18px}}
/* compaction accueil avec hero (mode présentation) */
body.deck .hero1{margin-bottom:16px}
body.deck .hero1 img{height:clamp(170px,23vh,250px)}
body.deck #s1 .bigline{margin:0 0 12px!important;font-size:clamp(15px,1.7vw,21px)}
body.deck #s1 .lead{margin-bottom:5px}
body.deck #s1 .claimbox{margin-top:10px;padding:16px 18px}
body.deck #s1 .claim-lines{font-size:clamp(14px,1.5vw,18px)}
body.deck #s1 .claimbox .goldline{margin:8px auto}
body.deck #s1 .claimbox .statement{margin:10px 0 0!important}
body.deck #s1 .claimbox p[style*="margin:30px"]{margin:12px 0 0!important}
body.deck #s1 .hero1-tx h1{margin:10px 0 0}
@media (max-height:880px){
 body.deck .hero1 img{height:clamp(140px,19vh,190px)}
 body.deck .hero1{margin-bottom:12px}
 body.deck #s1 .claimbox{padding:12px 14px}
}
/* ---------- visuel exclusivité s10 : image entière, largeur de la ligne rouge/bleu ---------- */
.hero10{margin:26px 0 0 calc(50% - min(47vw,750px));width:min(94vw,1500px)}
.hero10 img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
body.deck .hero10{margin-top:14px}
body.deck #s10 .lead{margin-bottom:4px}
body.deck #s10 .statement{line-height:1.55}
body.deck #s10 .goldline{margin:7px auto}
body.deck #s10 h2{margin-bottom:8px}
body.deck #s10 .bigline{margin-top:6px!important;font-size:clamp(16px,1.8vw,22px)}
body.deck #s10 .lead[style*="margin-top"]{margin-top:14px!important}
@media (max-height:880px){body.deck .hero10{margin-top:10px}}
/* s10 : compaction fine pour garder l'image pleine largeur sur un seul écran */
body.deck #s10 h2{font-size:clamp(20px,2.3vw,30px);margin-bottom:6px}
body.deck #s10 .lead{font-size:13.5px;margin-bottom:3px}
body.deck #s10 .statement{font-size:12px;line-height:1.5}
body.deck #s10 .goldline{margin:6px auto}
body.deck #s10 .hero10{margin-top:10px}
body.deck #s10 .lead[style*="margin-top"]{margin-top:10px!important}
body.deck #s10 .bigline{margin-top:4px!important;font-size:clamp(15px,1.6vw,20px)}
@media (max-height:880px){
 body.deck #s10 h2{font-size:clamp(18px,2vw,26px)}
 body.deck #s10 .lead{font-size:12.5px}
 body.deck #s10 .statement{font-size:11px}
}
@media (max-height:880px){
 body.deck #s10 .hero10{margin-top:7px}
 body.deck #s10 .statement{line-height:1.4}
 body.deck #s10 .bigline{font-size:clamp(14px,1.5vw,18px)}
 body.deck #s10>.wrap{padding-top:6px;padding-bottom:8px}
 body.deck #s10 .goldline{margin:5px auto}
}
@media (max-height:820px){
 body.deck #s10>.wrap{padding-top:4px;padding-bottom:4px}
 body.deck #s10 h2{margin-bottom:4px}
 body.deck #s10 .hero10{margin-top:6px}
 body.deck #s10 .lead{font-size:12px;margin-bottom:2px}
}
/* ---------- s10 : bandeau noir 30% transparent sur le quart bas du visuel ---------- */
.hero10{position:relative}
.hero10-cap{position:absolute;left:0;right:0;bottom:0;height:25%;background:rgba(0,0,0,.7);border-radius:0 0 12px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 28px;text-align:center}
.hero10-cap .cap-lead{margin:0;color:#DDE5EC;font-size:clamp(13px,1.1vw,16px);line-height:1.5}
.hero10-cap .cap-big{margin:0;color:#fff;font-family:'Outfit','Inter',sans-serif;font-weight:700;letter-spacing:.04em;font-size:clamp(15px,1.5vw,22px)}
@media (max-width:700px){.hero10-cap{position:static;height:auto;padding:12px 16px;gap:4px}.hero10 img{border-radius:12px 12px 0 0}}
/* rééquilibrage s10 : les textes du haut respirent à nouveau */
body.deck #s10 h2{font-size:clamp(24px,2.8vw,38px);margin-bottom:12px}
body.deck #s10 .lead{font-size:15px;margin-bottom:6px}
body.deck #s10 .statement{font-size:13px;line-height:1.7}
body.deck #s10 .goldline{margin:12px auto}
body.deck #s10 .hero10{margin-top:18px}
@media (max-height:880px){
 body.deck #s10 h2{font-size:clamp(21px,2.4vw,31px);margin-bottom:8px}
 body.deck #s10 .lead{font-size:13.5px;margin-bottom:4px}
 body.deck #s10 .statement{font-size:12px;line-height:1.55}
 body.deck #s10 .goldline{margin:8px auto}
 body.deck #s10 .hero10{margin-top:12px}
}
/* s10 : derniers réglages d'équilibre (tout visible sans défilement à 900px) */
body.deck #s10 h2{margin-bottom:9px}
body.deck #s10 .goldline{margin:9px auto}
body.deck #s10 .statement{line-height:1.6}
body.deck #s10 .hero10{margin-top:12px}
body.deck #s10>.wrap{padding-bottom:8px}
/* bandeau s10 : couleurs claires prioritaires sur .sec.dark p */
.sec.dark .hero10-cap .cap-lead{color:#DDE5EC}
.sec.dark .hero10-cap .cap-big{color:#fff}
/* ---------- version PC : titres de section juste sous la ligne rouge/bleu ---------- */
body.deck section.sec[id]{top:calc(var(--hh) + 110px)}
body.deck section.sec>.wrap{padding-top:6px}
body.deck h2{margin-top:0}
.ctitle{text-align:center;max-width:1100px;margin-left:auto;margin-right:auto}
/* texte secondaire : plus grand, lignes équilibrées (pas de mot orphelin) */
h2,.lead,.bigline,.cap-lead,.statement{text-wrap:balance}
body.deck .lead{font-size:16px;line-height:1.65}
body.deck .center .lead,body.deck .ctitle+* .lead{margin-left:auto;margin-right:auto}
@media (max-height:880px){body.deck .lead{font-size:14.5px}}
/* priorité finale : leads à 16px partout en PC (s1/s2/s10 inclus), cartes équilibrées */
body.deck #s1 .lead,body.deck #s2 .lead,body.deck #s10 .lead{font-size:16px}
.step p,.cc p,.duo .card p{text-wrap:balance}
@media (max-height:880px){body.deck #s1 .lead,body.deck #s2 .lead,body.deck #s10 .lead{font-size:14.5px}}
@media (max-height:820px){
 body.deck .hero1 img{height:clamp(125px,16.5vh,165px)}
 body.deck #s1 .claimbox{padding:10px 12px}
 body.deck #s1 .claimbox .statement{margin:8px 0 0!important}
}
/* ---------- PC : contenu accroché à la ligne (plus de centrage vertical flottant) ---------- */
body.deck section.sec[id]{align-items:flex-start}
body.deck section.sec>.wrap{margin:0 auto auto;padding-top:18px}
@media (max-height:820px){body.deck section.sec>.wrap{padding-top:10px}}
/* ---------- label « CHAUD + FROID · DOUBLE ACTION · EXCLUSIF AU CANADA » ---------- */
.sceau{display:inline-block;padding:20px 46px 18px;position:relative;border:1px solid rgba(127,138,150,.4);background:rgba(127,138,150,.06);border-radius:4px}
.sceau::before{content:"";position:absolute;top:-2px;left:28px;right:28px;height:3px;background:var(--duo)}
.sec.dark .sceau{border-color:rgba(242,246,249,.22);background:rgba(255,255,255,.045)}
p.sceau{margin-left:auto;margin-right:auto}
div.claim-lines.sceau{margin:0 auto}
/* ---------- PC : le contenu occupe toute la hauteur (plus d'empilement serré) ---------- */
body.deck section.sec[id]{align-items:stretch}
body.deck section.sec>.wrap{display:flex;flex-direction:column;justify-content:space-between;gap:12px;margin:0 auto;padding-bottom:28px}
body.deck .split{flex:1;align-items:center}
body.deck section.sec>.wrap>*{margin-top:0;margin-bottom:0}
body.deck h2{margin-bottom:0}
/* s10 : version compacte du label (grande image en dessous) */
body.deck #s10 .sceau{padding:11px 30px 9px}
body.deck #s10>.wrap{gap:8px}
@media (max-height:880px){body.deck #s10 .sceau{padding:8px 24px 7px}body.deck #s10>.wrap{gap:6px}}
@media (max-height:880px){
 body.deck #s10>.wrap{gap:4px;padding-top:8px;padding-bottom:14px}
 body.deck #s10 h2{font-size:clamp(17px,1.9vw,24px)}
 body.deck #s10 .lead{font-size:12.5px}
 body.deck #s10 .statement{font-size:10.5px;line-height:1.45}
 body.deck #s10 .sceau{padding:6px 20px 5px}
 body.deck #s10 .goldline{margin:3px auto}
}
/* ---------- s3 : vidéo à gauche, bloc texte à droite ---------- */
.s3media{gap:52px;text-align:left}
.s3media .vidbox video{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 16px 44px rgba(10,16,22,.16)}
.s3txt{text-align:left}
.s3txt .lead{text-align:left;margin:0 0 16px}
.s3txt .lead:last-child{margin-bottom:0}
body.deck #s3 .s3media{flex:1;align-items:center}
@media (max-height:880px){body.deck #s3 .s3media{gap:36px}}
/* ---------- harmonie : groupe de contenu équilibré, écarts internes constants ---------- */
body.deck section.sec>.wrap{justify-content:flex-start;gap:clamp(14px,2.4vh,30px)}
body.deck section.sec>.wrap>h2+*{margin-top:auto}
body.deck section.sec>.wrap>:last-child{margin-bottom:auto}
body.deck .split{flex:0 1 auto}
/* s3 : vidéo dominante, bloc texte posé et aéré */
@media(min-width:901px){.s3media{grid-template-columns:1.35fr 1fr;gap:48px;align-items:center}}
.s3txt .lead{font-size:17px;line-height:1.75;margin:0 0 20px}
.s3txt .lead:last-child{margin-bottom:0}
body.deck #s3 .s3media{flex:0 1 auto}
/* s10 reste compacte (grande image) */
body.deck #s10>.wrap{gap:8px}
@media (max-height:880px){body.deck #s10>.wrap{gap:6px}body.deck section.sec>.wrap{gap:clamp(10px,1.8vh,20px)}}
/* leads s3 : priorité deck */
body.deck .s3txt .lead{font-size:17px;line-height:1.75}
/* écrans hauts : l'espace sous le titre est plafonné, l'excédent va en bas */
@media (min-height:951px){
 body.deck section.sec:not(#s10)>.wrap>h2{order:-2}
 body.deck section.sec:not(#s10)>.wrap::before{content:"";order:-1;flex:1 1 0;max-height:80px}
 body.deck section.sec:not(#s10)>.wrap::after{content:"";flex:1.25 1 0}
 body.deck section.sec:not(#s10)>.wrap>h2+*{margin-top:0}
 body.deck section.sec:not(#s10)>.wrap>:last-child{margin-bottom:0}
}
/* s3 : vidéo encore plus grande (déborde du conteneur texte), paragraphe centré */
@media(min-width:901px){.s3media{grid-template-columns:1.6fr 1fr;gap:44px}}
body.deck #s3 .s3media{width:min(88vw,1340px);margin-left:calc(50% - min(44vw,670px))}
.s3txt,.s3txt .lead{text-align:center}
@media (max-height:880px){
 body.deck #s3 .s3media{width:min(78vw,1060px);margin-left:calc(50% - min(39vw,530px));gap:32px}
}
/* s3 : respiration égale au-dessus et en dessous du bloc statement */
@media (min-height:951px){
 body.deck #s3>.wrap::before,body.deck #s3>.wrap::after{display:none}
}
body.deck #s3>.wrap{padding-bottom:10px}
body.deck #s3 .s3media{margin-top:auto}
body.deck #s3 .goldline{margin-top:auto}
body.deck #s3 .statement{margin-bottom:auto}
body.deck section.sec#s3>.wrap>p.statement{margin-bottom:auto}
@media (max-height:950px){body.deck #s3>.wrap{padding-top:10px;gap:16px}}
/* ---------- s2 : bloc texte groupé + visuel duo chaud/froid ---------- */
.lead-bloc .lead{margin:0 0 10px}
.lead-bloc .lead:last-child{margin-bottom:0}
.s2visuel{margin:0 auto}
.s2visuel img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 18px 50px rgba(10,16,22,.25)}
body.deck #s2 .s2visuel{width:min(82vw,1330px,calc((100vh - 633px)*3.081));align-self:center;margin:0}
@media (min-height:951px) and (max-height:1020px){body.deck #s2 .s2visuel{width:min(82vw,1330px,calc((100vh - 642px)*3.081))}}
body.deck .goldline{flex-shrink:0}
/* ---------- s4/s5 : visuels de phase + paragraphe centré ---------- */
.lead-bloc.centre{text-align:center;max-width:900px;margin-left:auto;margin-right:auto}
.lead-bloc.centre p{margin:0 0 10px}
.lead-bloc.centre p:last-child{margin-bottom:0}
.phimg img,.phimg video{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 16px 44px rgba(10,16,22,.18)}
/* l'image des phases ne doit pas rendre la section plus haute que l'écran */
body.deck #s4 .phimg img,body.deck #s4 .phimg video,body.deck #s5 .phimg img,body.deck #s5 .phimg video{max-height:min(46vh,430px);width:auto;max-width:100%;margin:0 auto}
body.deck #s4 .split,body.deck #s5 .split{align-items:center}
/* ---------- s6 : visuels dans les cartes chaud / froid / double action ---------- */
.card .cimg{display:block;width:100%;height:auto;border-radius:8px;margin:0 0 14px}
.card .fr,.card .en{display:block}
html.lang-fr .card span.en,html.lang-en .card span.fr{display:none}
@media (max-height:880px){body.deck #s6 .card .cimg{margin-bottom:10px}}
@media (max-height:880px){
 body.deck #s6 .card .cimg{max-height:136px;width:auto;max-width:100%;margin:0 auto 8px}
 body.deck #s6 h2{font-size:clamp(18px,2.1vw,26px);margin-bottom:6px}
 body.deck #s6 .duo .card{padding:12px 13px}
 body.deck #s6 .card p{font-size:12px}
 body.deck #s6 .goldline{margin:6px auto}
 body.deck #s6 .statement{font-size:11px;line-height:1.5}
 body.deck #s6 .lead{font-size:13px}
 body.deck #s6 .bigline{font-size:clamp(14px,1.5vw,18px);margin-top:6px!important}
 body.deck #s6>.wrap{gap:8px;padding-top:8px;padding-bottom:10px}
}
/* s6 : bande 881-1020px — tout le contenu doit tenir (sinon la ligne finale devient inaccessible) */
@media (min-height:881px) and (max-height:1020px){
 body.deck #s6 .card .cimg{max-height:178px;width:auto;max-width:100%;margin:0 auto 10px}
 body.deck #s6 h2{font-size:clamp(20px,2.3vw,30px);margin-bottom:8px}
 body.deck #s6 .goldline{margin:8px auto}
 body.deck #s6>.wrap{gap:10px}
}
/* ---------- s6 : cartes à la largeur de la ligne, titres de carte doublés ---------- */
body.deck #s6 .duo.trio{width:min(94vw,1500px);align-self:center;margin-left:0;margin-right:0}
.card .ct{font-size:24px;letter-spacing:.22em}
@media (max-height:880px){.card .ct{font-size:20px}}
@media (min-height:1021px){body.deck #s6 .card .cimg{max-height:250px;width:auto;max-width:100%;margin:0 auto 12px}}
/* ---------- s6 : images de cartes pleine largeur (plus grandes) ---------- */
body.deck #s6 .card .cimg{max-height:none;width:100%;height:auto;margin:0 0 12px}
body.deck #s6 .duo .card{padding:20px 20px 18px}
body.deck #s6 .card .ct{margin-bottom:10px}
body.deck #s6 h2{margin-bottom:8px}
body.deck #s6 .goldline{margin:7px auto}
body.deck #s6>.wrap{gap:9px;padding-top:10px;padding-bottom:12px}
body.deck #s6 .statement{line-height:1.6}
/* s6 : images aussi grandes que la hauteur d'écran le permet, sans couper la fin de section */
@media (max-height:880px){body.deck #s6 .card .cimg{max-height:calc(100vh - 636px);width:auto;max-width:100%;margin:0 auto 10px}}
@media (min-height:881px) and (max-height:1020px){body.deck #s6 .card .cimg{max-height:calc(100vh - 706px);width:auto;max-width:100%;margin:0 auto 10px}}
/* ---------- cycle simplifié : bannière fixe en haut, pas de phase centrale ---------- */
#veil .vcover,#veil .vlow{display:none}
#veil.on .vt{transform:translateY(118%);opacity:0;transition:transform .3s cubic-bezier(.5,0,.85,.6),opacity .24s linear}
#veil.on .vt.sorti{transform:translateY(0);opacity:1;transition:transform .5s cubic-bezier(.33,0,.15,1) .04s,opacity .4s linear .07s}
/* bannière à hauteur constante : la ligne ne bouge jamais, quel que soit le titre */
#veil .vmask{height:calc(clamp(36px,5vw,72px)*1.1);display:flex;align-items:flex-end;justify-content:center}
/* ---------- fil de progression : tous les noms visibles, discrets ---------- */
.rail .lb{opacity:.2;transform:none;font-size:8px;letter-spacing:.1em;transition:opacity .2s ease,font-size .2s ease}
.rail a.on .lb{opacity:1;font-size:12px;letter-spacing:.18em}
.rail a:hover .lb{opacity:.85}
.rail{gap:9px}
.rail.browse .lb{opacity:.16}
.rail.browse a.sel .lb{opacity:1;font-size:12px}
/* ---------- composition bannière : 20px menu→titre, 20px titre→ligne, 30px ligne→contenu ---------- */
#veil.dock .vgroup{top:calc(var(--hh) + 11px)}
#veil.dock .vmask{padding:4px 0 7px}
body.deck section.sec[id]{top:calc(var(--hh) + 123px)}
/* s10 : compensation de la bannière plus haute */
body.deck #s10>.wrap{gap:5px}
@media (max-height:880px){body.deck #s10>.wrap{gap:3px}}
/* s10 : l'image s'adapte à la hauteur d'écran — la fin de section ne doit jamais être coupée */
body.deck #s10 .hero10{width:min(94vw,1500px,calc((100vh - 668px)*3.081));margin:0 0 0 calc(50% - min(47vw,750px,calc((100vh - 668px)*1.5405)));left:auto;transform:none;align-self:auto}
@media (max-height:880px){body.deck #s10 .hero10{width:min(94vw,1500px,calc((100vh - 604px)*3.081));margin-left:calc(50% - min(47vw,750px,calc((100vh - 604px)*1.5405)))}}
/* ---------- titres de contenu : taille unique, 50px sous la ligne rouge/bleu ---------- */
body.deck section.sec h2{font-size:clamp(28px,3.4vw,46px)!important}
body.deck section.sec>.wrap{padding-top:20px}
h2 .sep{color:var(--sec);opacity:.45;font-weight:200;margin:0 .15em}
h2.un-ligne,h2.deux-lignes{max-width:none!important}
h2 .lg{white-space:nowrap}
/* espacement identique pour tous les titres : ligne -> boîte h2 = 41px (≈50px aux lettres) */
body.deck section.sec>.wrap{padding-top:11px!important}
body.deck section.sec h2{margin-top:0!important}
/* ---------- accueil : titre deux lignes sous la ligne + vidéo sans son ---------- */
#s1 h1.deux-lignes{font-family:'Outfit','Inter',sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.07;margin:0;font-size:clamp(26px,5vw,46px);max-width:none}
#s1 h1.deux-lignes .gold{color:var(--brand-d)}
body.deck #s1 h1.deux-lignes{font-size:clamp(28px,3.4vw,46px)!important;margin-top:0!important}
.hero1v{margin:0 auto}
.hero1v video{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 18px 50px rgba(10,16,22,.18)}
body.deck #s1 .hero1v{width:min(82vw,1240px);align-self:center;margin:0}
/* ---------- accueil : vidéo largeur de ligne sans ombre, accroche plus grande et fine, paragraphes groupés, blocs aérés ---------- */
.hero1v video{box-shadow:none}
body.deck #s1 .hero1v{width:min(94vw,1500px)}
#s1 .bigline{font-family:'Outfit','Inter',sans-serif;font-weight:300;font-size:clamp(24px,2.6vw,36px);line-height:1.35;letter-spacing:.01em}
#s1 .lead-bloc .lead{margin:0 0 8px}
#s1 .lead-bloc .lead:last-child{margin-bottom:0}
body.deck #s1>.wrap{gap:30px}
body.deck #s1 .bigline{font-size:clamp(24px,2.6vw,36px);font-weight:300;line-height:1.35}
/* accueil : paragraphes centrés sous l'accroche */
#s1 .lead-bloc{text-align:center;align-self:center;max-width:920px}
/* ---------- boutons d'action en bleu (header + CTA) ---------- */
.btn,.btn.gold{background:var(--brand-d);border-color:var(--brand-d)}
.btn:hover,.btn.gold:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
/* ---------- s3 : plus d'air sous le titre, statement deux fois plus grand et fin ---------- */
body.deck section.sec#s3>.wrap>.s3media{margin-top:34px}
#s3 .statement{font-size:clamp(20px,2.2vw,32px);font-weight:300;letter-spacing:.12em;line-height:1.65}
@media (max-height:880px){
 body.deck section.sec#s3>.wrap>.s3media{margin-top:18px}
 body.deck #s3 .statement{font-size:clamp(16px,1.9vw,22px)}
}
/* ---------- titres multi-lignes : interligne aéré ---------- */
body.deck section.sec h2{line-height:1.25!important}
section.sec h2{line-height:1.25}
#s1 h1.deux-lignes{line-height:1.25}
body.deck section.sec>.wrap{padding-top:7px!important}
/* s4 : paragraphe à égale distance du titre et du bloc média, lignes serrées */
@media (min-height:951px){
 body.deck section.sec#s4>.wrap::before,body.deck section.sec#s4>.wrap::after{display:none}
}
body.deck section.sec#s4>.wrap>.lead-bloc{margin-top:auto;margin-bottom:auto}
#s4 .lead-bloc p{line-height:1.7}
@media (max-height:880px){body.deck #s4 .phimg img,body.deck #s4 .phimg video,body.deck #s5 .phimg img,body.deck #s5 .phimg video{max-height:min(41vh,430px)}}
/* s4/s5 : image agrandie, respiration du paragraphe réduite de moitié */
body.deck #s4 .split,body.deck #s5 .split{grid-template-columns:1.2fr 1fr;gap:56px}
@media (min-height:881px){body.deck #s4 .phimg img,body.deck #s4 .phimg video,body.deck #s5 .phimg img,body.deck #s5 .phimg video{max-height:min(48vh,520px)}}
@media (min-height:951px){
 body.deck #s4 .split,body.deck #s5 .split{width:min(88vw,1340px);align-self:center;grid-template-columns:1.45fr 1fr}
 body.deck #s4 .phimg img,body.deck #s4 .phimg video,body.deck #s5 .phimg img,body.deck #s5 .phimg video{max-height:min(47.8vh,540px)}
}
body.deck #s1 h1.deux-lignes{margin-top:4px!important}
/* s4 : colonne de droite centrée, ligne rouge pleine largeur du paragraphe */
#s4 .split .left{text-align:center}
#s4 .split .left .goldline{width:100%;max-width:none;background:var(--chaud);height:2px;margin:0 0 18px}
/* s4/s5 : respiration du paragraphe encore réduite (l'image absorbe) */
@media (min-height:951px) and (max-height:1020px){body.deck #s4 .phimg img,body.deck #s4 .phimg video,body.deck #s5 .phimg img,body.deck #s5 .phimg video{max-height:min(50.6vh,560px)}}
@media (min-height:1021px){body.deck #s4 .phimg img,body.deck #s4 .phimg video,body.deck #s5 .phimg img,body.deck #s5 .phimg video{max-height:min(53vh,580px)}}
/* ---------- s7 : visuel groupe + trio de phrases sur une ligne ---------- */
.s7img img{display:block;width:100%;height:auto;border-radius:12px}
body.deck #s7 .s7img{width:min(82vw,1240px);align-self:center}
.trio-ligne{font-size:clamp(17px,1.5vw,22px);font-weight:500;text-align:center;letter-spacing:.01em;color:var(--ink);margin:0}
.s7bloc{max-width:780px;margin:0 auto;align-self:center;text-align:left}
#s7 .goldline{margin-left:auto;margin-right:auto}
@media (min-height:1021px){body.deck #s3>.wrap{padding-bottom:2px}body.deck #s3 .statement{line-height:1.5}}
/* s7 : photo -10%, resserrée sous le titre */
body.deck #s7 .s7img{width:min(62.7vw,949px)}
body.deck section.sec#s7>.wrap>.s7img{margin-top:-34px}
body.deck section.sec#s7>.wrap>.trio-ligne{margin-top:-26px}
/* s7 : visuel des 4 éléments (FR/EN) */
.s7visuel img{display:block;width:100%;height:auto}
body.deck #s7 .s7visuel{width:min(70vw,1000px);align-self:center;margin-top:-6px}
.s7visuel{margin:0 auto}
/* s7 : statement +40%, titre EN sur une ligne */
#s7 .statement{font-size:clamp(18px,1.7vw,22.4px)}
body.deck #s7 .statement{font-size:clamp(18px,1.7vw,22.4px)}
#s7 h2{max-width:none!important}
#s7 h2 .en{white-space:nowrap}
/* s2 : paragraphe à espaces égaux haut/bas, phrase d'intro en grand au-dessus du visuel */
@media (min-height:951px){
 body.deck section.sec#s2>.wrap::before,body.deck section.sec#s2>.wrap::after{display:none}
}
body.deck section.sec#s2>.wrap>.lead-bloc{margin-top:0;margin-bottom:0}
body.deck #s2>.wrap{gap:16px}
body.deck section.sec#s2>.wrap>.trio-ligne{margin-bottom:2px}
/* s2 : paragraphe +15%, respiration réduite de moitié (le visuel absorbe) */
#s2 .lead-bloc .lead{font-size:18.4px}
body.deck #s2 .lead-bloc .lead{font-size:18.4px}

/* s2 : phrase d'intro +15%% */
#s2 .trio-ligne{font-size:clamp(19.5px,1.73vw,25.3px)}
body.deck #s2 .trio-ligne{font-size:clamp(19.5px,1.73vw,25.3px)}

/* ---------- s2 : statement + lead de clôture agrandis de 50% ---------- */
#s2 .statement{font-size:clamp(22.5px,2.25vw,30px)}
#s2 .goldline~.lead{font-size:clamp(25.5px,2.1vw,29.25px)}
body.deck section.sec#s2>.wrap>p.statement{font-size:clamp(19.5px,1.8vw,24px)!important}
body.deck section.sec#s2>.wrap>.goldline~p.lead{font-size:24px!important}
@media (max-height:880px){body.deck section.sec#s2>.wrap>.goldline~p.lead{font-size:21.75px!important}body.deck section.sec#s2>.wrap>p.statement{font-size:21.75px!important}}

/* ---------- s8 : 5 rectangles sur une ligne, visuel sous le texte ---------- */
.ccimg{display:block;width:100%;height:auto;border-radius:6px;margin-top:14px}
@media (max-width:900px){#s8 .cards{grid-template-columns:1fr}}
@media (min-width:901px){
#s8 .cards{grid-template-columns:repeat(5,1fr)}
#s8 .cc{display:flex;flex-direction:column;padding:18px 16px}
#s8 .cc .ccimg{margin-top:auto;padding-top:12px}
#s8 .cc b{font-size:12px;letter-spacing:.14em}
#s8 .cc p{font-size:13.5px}
}
body.deck section.sec#s8>.wrap>.cards{grid-template-columns:repeat(5,1fr);gap:14px}
body.deck section.sec#s8>.wrap>.cards>.cc{display:flex;flex-direction:column;padding:16px 15px}
body.deck section.sec#s8>.wrap>.cards>.cc>b{font-size:12px;letter-spacing:.12em;margin-bottom:8px}
body.deck section.sec#s8>.wrap>.cards>.cc>p{font-size:12.5px;line-height:1.5}
body.deck section.sec#s8>.wrap>.cards>.cc>.ccimg{margin-top:auto;padding-top:10px}
@media (max-height:880px){
 body.deck section.sec#s8>.wrap>.cards{gap:11px}
 body.deck section.sec#s8>.wrap>.cards>.cc{padding:12px 12px}
 body.deck section.sec#s8>.wrap>.cards>.cc>p{font-size:11.5px;line-height:1.45}
 body.deck section.sec#s8>.wrap>.cards>.cc>b{font-size:11px}
 body.deck section.sec#s8>.wrap>.cards>.cc>.ccimg{padding-top:5px}
}
@media (min-width:901px){#s8>.wrap{max-width:min(94vw,1760px)}}
body.deck section.sec#s8>.wrap{max-width:min(94vw,1760px)}

/* ---------- s8 : texte d'intro aux mêmes règles que le trio-ligne de s2 ---------- */
#s8 .trio-ligne{font-size:clamp(19.5px,1.73vw,25.3px)}
body.deck #s8 .trio-ligne{font-size:clamp(19.5px,1.73vw,25.3px)}

/* ---------- s8 : textes des cartes agrandis, cartes plus hautes et aérées ---------- */
body.deck section.sec#s8>.wrap>.cards>.cc{padding:24px 20px}
body.deck section.sec#s8>.wrap>.cards>.cc>b{font-size:13.5px;margin-bottom:10px}
body.deck section.sec#s8>.wrap>.cards>.cc>p{font-size:14px;line-height:1.55}
body.deck section.sec#s8>.wrap>.cards>.cc>.ccimg{padding-top:14px}
@media (max-height:880px){
 body.deck section.sec#s8>.wrap>.cards>.cc{padding:17px 15px}
 body.deck section.sec#s8>.wrap>.cards>.cc>b{font-size:12.5px;margin-bottom:7px}
 body.deck section.sec#s8>.wrap>.cards>.cc>p{font-size:13px;line-height:1.48}
 body.deck section.sec#s8>.wrap>.cards>.cc>.ccimg{width:84%;margin-left:auto;margin-right:auto;padding-top:7px}
}

/* ---------- s8 : les rectangles s'étirent pour occuper la hauteur ---------- */
body.deck section.sec#s8>.wrap>.cards{flex-grow:1;min-height:0;align-content:stretch}

/* ---------- s8 : visuels agrandis (recadrage doux) pour combler le vide ---------- */
body.deck section.sec#s8>.wrap>.cards>.cc>.ccimg{object-fit:cover;object-position:center;aspect-ratio:1/1}
@media (min-height:881px) and (max-height:1020px){body.deck section.sec#s8>.wrap>.cards>.cc>.ccimg{aspect-ratio:4/3.3}}
@media (max-height:880px){body.deck section.sec#s8>.wrap>.cards>.cc>.ccimg{aspect-ratio:auto}}
body.deck section.sec#s8>.wrap>.cards>.cc>.ccimg{flex:1 0 auto;min-height:0}

/* ---------- badges Chaud+Froid en images ---------- */
.sceau-img{text-align:center;line-height:0}
.sceau-img img{width:clamp(280px,26vw,430px);height:auto;display:inline-block}
.sceau-sous{margin:14px 0 0}
body.deck .sceau-img img{width:clamp(250px,21vw,360px)}
body.deck .sceau-sous{margin:10px 0 0}
body.deck #s10 .sceau-img img{width:clamp(200px,15vw,264px)}
@media (max-height:880px){
 body.deck .sceau-img img{width:clamp(210px,17vw,280px)}
 body.deck #s10 .sceau-img img{width:clamp(175px,12.5vw,215px)}
 body.deck .sceau-sous{margin:6px 0 0}
}

/* ---------- s10 : paragraphe à 20px du titre, centré sans espace, police plus grande ; badge étiré ---------- */
body.deck section.sec#s10>.wrap{gap:20px}
body.deck section.sec#s10>.wrap>h2{margin:0}
#s10 .s10lead{font-size:clamp(19.5px,1.73vw,25.3px);max-width:1100px;text-align:center;margin:0 auto}
body.deck section.sec#s10>.wrap>.s10lead{font-size:clamp(19.5px,1.73vw,25.3px);margin:0 auto}
body.deck section.sec#s10>.wrap>.sceau-img{flex:1 1 0;min-height:36px;position:relative;align-self:stretch}
body.deck section.sec#s10>.wrap>.sceau-img img{position:absolute;inset:0;margin:auto;max-height:100%;max-width:min(56vw,720px);width:auto;height:auto}
@media (max-height:880px){
 body.deck #s10 .hero10-cap{height:auto;min-height:25%;padding:7px 20px;gap:3px}
 body.deck #s10 .hero10-cap .cap-lead{font-size:11.5px;line-height:1.35}
 body.deck #s10 .hero10-cap .cap-big{font-size:13px;line-height:1.3}
}

/* ---------- s10 : titre recentré, paragraphe 18px, badge 75px, EXCLUSIF AU CANADA blanc 18px ---------- */
body.deck section.sec#s10>.wrap>h2{margin:0 auto}
#s10 .s10lead{font-size:18px}
body.deck section.sec#s10>.wrap>.s10lead{font-size:18px}
body.deck section.sec#s10>.wrap>.sceau-img img{max-height:75px}
#s10 .sceau-sous{font-size:18px}
body.deck section.sec#s10>.wrap>.sceau-sous{font-size:18px}
#s10 .sceau-sous .gold,body.deck section.sec#s10>.wrap>.sceau-sous .gold{color:#fff}

/* ---------- s10 : le badge occupe tout l'espace, 20px d'air en haut et en bas ---------- */
body.deck section.sec#s10>.wrap>.sceau-img img{max-height:100%}
body.deck section.sec#s10>.wrap>.goldline{margin-bottom:0}

/* ---------- s10 : goldline retirée, badge réduit de 15% ---------- */
body.deck section.sec#s10>.wrap>.goldline{display:none}
#s10 .goldline{display:none}
body.deck section.sec#s10>.wrap>.sceau-img img{max-height:145px}
@media (min-height:1150px){body.deck section.sec#s10>.wrap>.sceau-img img{max-height:190px}}
@media (max-height:880px){body.deck section.sec#s10>.wrap>.sceau-img img{max-height:86px}}

/* ---------- s10 : EXCLUSIF AU CANADA à 15px sous le badge ---------- */
body.deck section.sec#s10>.wrap>.sceau-img img{top:auto;bottom:0;margin:0 auto}
body.deck section.sec#s10>.wrap>.sceau-sous{margin-top:-5px}

/* ---------- s10 : correctif — le badge reste en place, EXCLUSIF monte à 15px sous lui ---------- */
body.deck section.sec#s10>.wrap>.sceau-img{flex:0 0 auto;min-height:0;position:static;align-self:center}
body.deck section.sec#s10>.wrap>.sceau-img img{position:static;margin:0 auto;display:block}
body.deck section.sec#s10>.wrap>.s10lead{margin-bottom:auto}
body.deck section.sec#s10>.wrap>.sceau-sous{margin-bottom:auto}

/* ---------- s12 : zones interactives (visuel à gauche, zones à droite) ---------- */
.zones-split{display:flex;gap:clamp(24px,3.4vw,64px);align-items:center;justify-content:center}
.zones-stage{position:relative;flex:0 0 auto;width:min(44vw,600px)}
.zones-stage .zimg{display:block;width:100%;height:auto;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.zones-stage .zimg:not(:first-child){position:absolute;inset:0}
.zones-stage .zimg.on{opacity:1;visibility:visible}
.zones-droite{flex:0 1 640px;text-align:left}
.zones-droite .lead{margin:0 0 18px}
.zgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zpill{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 14px;font-family:inherit;font-size:14.5px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .2s}
.zpill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.zpill:hover,.zpill.on{border-color:var(--brand);box-shadow:0 8px 20px rgba(46,182,218,.16)}
.znote{font-size:12.5px;color:var(--sec);margin:12px 0 0}
#s12 .zones-droite .goldline{margin:16px 0}
#s12 .zones-droite .statement{margin:0;line-height:1.7}
@media (max-width:900px){.zones-split{flex-direction:column}.zones-stage{width:min(92vw,520px)}.zones-droite{flex:1 1 auto}}
@media (min-width:901px){
 body.deck section.sec#s12>.wrap{display:flex;flex-direction:column}
 body.deck #s12 .zones-stage{width:min(40vw,600px,calc((100vh - 350px)*1.125))}
 body.deck #s12 .zpill{padding:9px 13px;font-size:13.5px}
 body.deck #s12 .zones-droite .lead{font-size:15px;margin-bottom:12px}
 body.deck #s12 .znote{font-size:11.5px;margin-top:10px}
 body.deck #s12 .zones-droite .goldline{margin:12px 0}
 body.deck #s12 .statement{font-size:13px;line-height:1.6}
}
@media (max-height:880px) and (min-width:901px){
 body.deck #s12 .zpill{padding:7px 11px;font-size:12px}
 body.deck #s12 .zones-droite .lead{font-size:13.5px;margin-bottom:8px}
 body.deck #s12 .zgrid{gap:7px}
 body.deck #s12 .zones-droite .goldline{margin:9px 0}
 body.deck #s12 .statement{font-size:11px;line-height:1.5}
 body.deck #s12 .znote{font-size:10.5px;margin-top:7px}
}
/* rail : seule la zone réelle des libellés et des points capte la souris (l'ancre large n'intercepte plus les pastilles s12) */
.rail{pointer-events:none}
.rail a{pointer-events:none}
.rail a .dot,.rail a .lb{pointer-events:auto}
@media (max-width:1460px){.rail a .lb{pointer-events:none}}

/* ---------- s12 : paragraphes centrés et agrandis ---------- */
.zones-droite .lead,.zones-droite .znote,.zones-droite .statement{text-align:center}
#s12 .zones-droite .goldline{margin-left:auto;margin-right:auto}
body.deck #s12 .zones-droite .goldline{margin-left:auto;margin-right:auto}
.znote{font-size:13.5px}
@media (min-width:901px){
 body.deck #s12 .zones-droite .lead{font-size:17px}
 body.deck #s12 .znote{font-size:13px}
 body.deck #s12 .statement{font-size:14px}
}
@media (max-height:880px) and (min-width:901px){
 body.deck #s12 .zones-droite .lead{font-size:15px}
 body.deck #s12 .znote{font-size:11.5px}
 body.deck #s12 .statement{font-size:12px}
}

/* ---------- s12 : ensemble agrandi légèrement ---------- */
body.deck #s12 .zones-stage{width:min(43vw,660px,calc((100vh - 340px)*1.125))}
@media (min-width:901px){
 body.deck #s12 .zpill{padding:11px 15px;font-size:14.5px}
}
@media (max-height:880px) and (min-width:901px){
 body.deck #s12 .zpill{padding:8px 12px;font-size:12.5px}
}
@media (min-height:881px) and (max-height:1020px) and (min-width:901px){
 body.deck #s12 .zpill{padding:10px 14px;font-size:14px}
 body.deck #s12 .zgrid{gap:9px}
}

/* ---------- s11 : visuel des professionnels (FR/EN) à la place des cartes ---------- */
.pro-visuel{text-align:center;line-height:0}
.pro-visuel img{width:min(92vw,1500px);height:auto;display:inline-block}
body.deck section.sec#s11>.wrap>.pro-visuel img{width:min(92vw,1500px,calc((100vh - 419px)*2.692))}
@media (min-width:901px){#s11>.wrap{max-width:min(94vw,1760px)}}
body.deck section.sec#s11>.wrap{max-width:min(94vw,1760px)}

/* ---------- s1 : titre B-FREEZE THERMOFREEZE rapproché de la ligne rouge/bleu ---------- */
body.deck section.sec#s1>.wrap::before{display:none}

/* ---------- trait rouge/bleu sous le badge retiré (s1 claimbox) ---------- */
.sceau-img + .goldline{display:none}

/* ---------- s4 : paragraphe et visuel remontés (espaces titre/paragraphe/image réduits) ---------- */
body.deck section.sec#s4>.wrap{gap:22px}
@media (max-height:880px){body.deck section.sec#s4>.wrap{gap:14px}}
body.deck section.sec#s4>.wrap>.lead-bloc{margin-top:0;margin-bottom:0}

/* ---------- s4 : POURQUOI LE CHAUD ? au-dessus de la ligne rouge ---------- */
#s4 .split .left .statement.tchaud{margin:0 0 12px}
#s4 .split .left .goldline{margin:0 0 18px}

/* ---------- s4 : bloc centré sur la hauteur (plus d'espace mort en bas) ---------- */
body.deck section.sec#s4>.wrap>.split{margin-top:auto;margin-bottom:auto}

/* ---------- s9 : cartes compactées + carrousel Avant/Après ---------- */
.avap{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.avap-stage{position:relative;width:min(58vw,720px);height:340px}
.avap-stage img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px}
.avap-compteur{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;background:rgba(11,17,22,.62);color:#fff;font-size:12px;letter-spacing:.08em;padding:3px 10px;border-radius:20px;z-index:2}
.avap-fl{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 0 3px;transition:border-color .2s,box-shadow .2s}
.avap-fl:hover{border-color:var(--brand);box-shadow:0 8px 20px rgba(46,182,218,.18)}
@media (max-width:900px){.avap-stage{width:min(80vw,620px);height:52vw;max-height:420px}}
@media (min-width:901px){
 body.deck section.sec#s9>.wrap>.cards{margin-top:10px;gap:10px}
 body.deck #s9 .cc{padding:10px 14px}
 body.deck #s9 .cc b{font-size:11.5px;margin-bottom:4px}
 body.deck #s9 .cc p{font-size:12px;line-height:1.45}
 body.deck section.sec#s9>.wrap>.avap{flex:1 1 0;min-height:140px;align-self:stretch;margin-top:8px}
 body.deck #s9 .avap-stage{height:100%;width:min(58vw,760px);flex:0 1 auto}
}
@media (max-height:880px) and (min-width:901px){
 body.deck #s9 .cc{padding:8px 11px}
 body.deck #s9 .cc p{font-size:11px;line-height:1.4}
 body.deck #s9 .cc b{font-size:10.5px}
 body.deck #s9 .avap-fl{width:36px;height:36px;font-size:22px}
}
body.deck section.sec#s9>.wrap::before,body.deck section.sec#s9>.wrap::after{display:none}

/* ---------- s9 : carrousel AV/AP au centre, 3 cartes à gauche et 3 à droite ---------- */
.s9grid{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-top:16px}
.s9col{display:flex;flex-direction:column;gap:14px}
#s9 .avap{margin-top:0}
@media (max-width:900px){.s9grid{display:block}.s9col{margin:14px 0}}
@media (min-width:901px){
 #s9>.wrap{max-width:min(94vw,1680px)}
 body.deck section.sec#s9>.wrap{max-width:min(94vw,1680px)}
 body.deck section.sec#s9>.wrap>.s9grid{flex:1 1 0;min-height:0;margin-top:10px}
 body.deck #s9 .avap{height:100%}
 body.deck #s9 .avap-stage{height:100%;width:min(33vw,560px)}
 body.deck #s9 .s9col .cc{padding:14px 16px}
 body.deck #s9 .s9col .cc b{font-size:12.5px;margin-bottom:6px}
 body.deck #s9 .s9col .cc p{font-size:13px;line-height:1.5}
}
@media (max-height:880px) and (min-width:901px){
 body.deck #s9 .s9col{gap:10px}
 body.deck #s9 .s9col .cc{padding:10px 12px}
 body.deck #s9 .s9col .cc b{font-size:11px;margin-bottom:4px}
 body.deck #s9 .s9col .cc p{font-size:11.5px;line-height:1.42}
}
/* bouton lecture/pause du carrousel */
.avap-ctrl{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;display:flex;gap:8px;align-items:center;z-index:2}
.avap-ctrl .avap-compteur{position:static;left:auto;transform:none;bottom:auto}
.avap-pp{width:28px;height:28px;border-radius:50%;border:none;background:rgba(11,17,22,.62);color:#fff;font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.avap-pp:hover{background:rgba(11,17,22,.8)}

/* ---------- s9 v2 : photo maximisée en hauteur, cartes verticales, fondu doux ---------- */
.avap-stage img{transition:opacity .38s ease}
@media (min-width:901px){
 body.deck #s9 .avap-stage{width:min(46vw,860px)}
 body.deck #s9 .s9col .cc{min-height:172px;display:flex;flex-direction:column;justify-content:center}
}
@media (max-height:880px) and (min-width:901px){
 body.deck #s9 .s9col .cc{min-height:118px}
}
/* contrôles sous la photo + paliers des cartes */
.avap-centre{display:flex;flex-direction:column;align-items:center;gap:10px}
.avap-ctrl{position:static;left:auto;transform:none}
.avap-ctrl .avap-pp{background:rgba(11,17,22,.78)}
.avap-ctrl .avap-compteur{background:rgba(11,17,22,.78)}
@media (min-width:901px){
 body.deck #s9 .avap-centre{height:100%;flex:0 1 auto;min-width:0}
 body.deck #s9 .avap-stage{height:auto;flex:1 1 0;min-height:0}
}
@media (min-height:881px) and (max-height:1020px) and (min-width:901px){
 body.deck #s9 .s9col .cc{min-height:128px}
}
@media (max-height:880px) and (min-width:901px){
 body.deck #s9 .s9col .cc{min-height:94px}
}

/* ---------- s1 : paragraphe d'accueil à la largeur de « RÉUNIS POUR REPENSER LE REMODELAGE CORPOREL » ---------- */
#s1 .lead-bloc{max-width:none;width:min(66.7vw,918px)}
body.deck #s1 .lead-bloc{max-width:none;width:min(66.7vw,918px)}
#s1 .lead-bloc .lead{max-width:min(66.7vw,918px)}
body.deck #s1 .lead-bloc .lead{max-width:min(66.7vw,918px)}
#s1 .lead-bloc .lead{text-wrap:pretty}
#s1 .lead-bloc .lead{font-size:min(1.05vw,14.45px);line-height:1.78}
body.deck #s1 .lead-bloc .lead{font-size:min(1.05vw,14.45px);line-height:1.78}

/* ---------- s1 : espaces entre éléments réduits de 15% (sauf sous le badge) ---------- */
body.deck section.sec#s1>.wrap{gap:25.5px}
body.deck section.sec#s1>.wrap>h1{margin-bottom:10px!important}
body.deck section.sec#s1>.wrap>.bigline{margin-bottom:10px!important}
body.deck section.sec#s1>.wrap>.claimbox{margin-top:8.5px}

/* bande de l'ancienne couleur, fondue en GPU lors des transitions */
#veil .vband2{pointer-events:none;will-change:opacity}

/* voile de contenu : une seule couche fondue au lieu d'un fondu par élément */
#veil .vfondu{position:absolute;left:0;right:0;bottom:0;display:none;will-change:opacity}

/* ---------- option 5 : les sections cachées sortent du pipeline de rendu ---------- */
body.deck section.sec[id]:not(.curs){content-visibility:hidden}
/* bascule de section instantanée : plus aucun crossfade de fonds entre pages (le voile/bande/titre portent l'animation) */
body.deck section.sec[id]{transition:none!important}

/* ---------- page formulaire : titre bannière + ligne rouge/bleu (même principe que le deck) ---------- */
.pagehead .titre-banniere{font-family:'Outfit','Inter',sans-serif;font-weight:200;font-size:clamp(20px,3.35vw,50px);letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;line-height:1.15;margin:0 0 20px;color:var(--ink)}
.pagehead .ligne-duo{position:relative;left:50%;transform:translateX(-50%);width:min(94vw,1500px);height:2.5px;background:var(--duo);margin-bottom:30px}

/* ---------- formulaire : formulaires externes LeadConnector FR/EN ---------- */
.form-externe{max-width:900px;margin:0 auto;min-height:1130px}
.form-externe iframe{display:block;width:100%;min-height:1130px}
html.lang-en .form-externe.fr{display:none!important}
html.lang-fr .form-externe.en{display:none!important}
.form-externe.en{display:none}
html.lang-en .form-externe.en{display:block!important}

/* formulaire : intro agrandie et un peu plus grasse */
.pagehead .intro-form{font-size:clamp(18px,1.62vw,22px);font-weight:500;max-width:1150px}

/* ===== Formulaire : vidéo à droite du formulaire ===== */
.form-wrap{max-width:1400px}
.form-duo{display:flex;gap:44px;align-items:flex-start;justify-content:space-between}
.form-duo .form-colonne{flex:1 1 auto;min-width:0;max-width:730px}
.form-duo .form-externe{max-width:none;margin:0}
.form-duo .video-colonne{flex:0 0 auto;width:min(40vw,560px,calc((100vh - 150px)*0.778));position:sticky;top:90px}
.video-formulaire{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 16px 44px rgba(10,14,20,.18);background:#000}
@media (max-width:980px){
 .form-duo{flex-direction:column;align-items:center;gap:30px}
 .form-duo .video-colonne{position:static;width:min(88vw,420px)}
 .form-duo .form-colonne{width:100%}
}

/* ===== Formulaire : bandeau titre resserré + formulaire à gauche, vidéo élargie ===== */
.pagehead.ph-serre{padding:34px 0 44px}
.pagehead.ph-serre .titre-banniere{margin:0 0 12px}
.pagehead.ph-serre .ligne-duo{margin-bottom:14px}
.form-wrap{max-width:1564px}
.form-duo .video-colonne{width:min(42vw,640px,calc((100vh - 120px)*0.778));top:80px}
.sec-form{overflow:clip}
@media (max-width:980px){.form-duo .video-colonne{width:min(88vw,420px)}}

/* ===== Formulaire : bandeau promotions au-dessus du formulaire et de la vidéo ===== */
.promo-bandeau{position:relative;display:flex;align-items:stretch;margin:0 0 36px;padding:30px 10px 26px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(10,14,20,.07);overflow:hidden}
.promo-bandeau::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--duo)}
.pb-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:4px 18px}
.pb-lab{margin-top:3px}
.pb-item+.pb-item{border-left:1px solid var(--line)}
.pb-chiffre{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:clamp(38px,3vw,52px);line-height:1;color:var(--ink)}
.pb-mois{font-family:'Outfit','Inter',sans-serif;font-weight:600;font-size:clamp(19px,1.5vw,25px);line-height:1.1;color:var(--ink)}
.pb-lab{font-size:clamp(11.5px,.95vw,14px);font-weight:600;letter-spacing:.14em;color:#5c6670}
@media (max-width:980px){
 .promo-bandeau{flex-direction:column;gap:14px;padding:18px 16px}
 .pb-item+.pb-item{border-left:none;border-top:1px solid var(--line);padding-top:14px}
}
.sec-form{padding-top:24px}

/* ===== s15 : visuel Formation remplace les rectangles ===== */
.formation-visuel{text-align:center;line-height:0}
.formation-visuel img{width:min(92vw,1500px);height:auto;display:inline-block}
@media (min-width:901px){#s15>.wrap{max-width:min(94vw,1640px)}}
body.deck section.sec#s15>.wrap{max-width:min(94vw,1640px)}
body.deck section.sec#s15>.wrap{padding-bottom:10px}
body.deck section.sec#s15>.wrap>.formation-visuel img{width:min(92vw,1570px,calc(256.2vh - 992px))}
body.deck section.sec#s15>.wrap::before,body.deck section.sec#s15>.wrap::after{display:none}

/* ===== s14 : 6 cartes programmes sur une ligne ===== */
.prog-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.pc{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px 16px 28px;font-family:'Outfit','Inter',sans-serif;font-weight:600;font-size:22px;line-height:1.4;color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;min-height:200px;box-shadow:0 8px 24px rgba(10,14,20,.05)}
.pc::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--duo)}
@media (min-width:901px){.prog-cards{grid-template-columns:repeat(6,1fr)}#s14>.wrap{max-width:min(94vw,1760px)}}
body.deck section.sec#s14>.wrap{max-width:min(94vw,1760px)}
body.deck .prog-cards{gap:14px;margin-top:6px}
body.deck .pc{font-size:clamp(17px,1.35vw,26px);padding:26px 15px 24px;min-height:clamp(150px,20vh,270px)}
#s14 .lead{font-size:clamp(25.5px,2.1vw,29.25px)}
body.deck #s14 .lead{font-size:24px;line-height:1.55}
@media (max-height:880px){body.deck #s14 .lead{font-size:21.75px}body.deck .pc{min-height:118px;padding:18px 12px 16px}body.deck .prog-cards{margin-top:2px;gap:12px}}
@media (max-height:800px){body.deck #s14 .lead{font-size:20px}body.deck .pc{font-size:16px;min-height:108px}}

/* ===== s17 : comparatif Cryolipolyse vs ThermoFreeze ===== */
.vs-duo{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;max-width:1150px;margin:30px auto 0;text-align:left}
.vs-carte{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px 20px;overflow:hidden;box-shadow:0 10px 30px rgba(10,14,20,.06);display:flex;flex-direction:column;align-items:center;text-align:center}
.vs-carte::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.vs-cryo::before{background:var(--froid)}
.vs-tf::before{background:var(--duo)}
.vs-ico{height:48px;margin-bottom:10px}
.vs-ico svg{height:48px;width:auto;display:block}
.vs-nom{display:block;font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:16.5px;letter-spacing:.08em;color:var(--ink)}
.vs-mode{display:block;font-family:'Outfit','Inter',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.12em;margin-top:5px;color:var(--ink)}
.vs-txt{font-size:15px;color:var(--sec);line-height:1.6;margin:12px 0 14px}
.vs-checks{list-style:none;margin:auto 0 0;padding:12px 0 0;border-top:1px solid var(--line);width:100%}
.vs-checks li{display:flex;align-items:center;justify-content:center;gap:9px;padding:4px 0;font-size:14.5px;font-weight:600;color:var(--ink)}
.vs-checks li .co{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.vs-checks li.oui .co{background:rgba(46,182,218,.14);color:#1793B5}
.vs-tf .vs-checks li.oui .co{background:linear-gradient(90deg,rgba(196,18,47,.12),rgba(46,182,218,.16));color:var(--ink)}
.vs-checks li.non{color:#9AA4AD}
.vs-checks li.non .co{background:#EEF1F3;color:#9AA4AD}
.vs-sep{align-self:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em}
@media (max-width:900px){.vs-duo{grid-template-columns:1fr}.vs-sep{margin:0 auto}}
body.deck .vs-duo{margin-top:8px;gap:16px;max-width:min(88vw,1150px)}
body.deck .vs-carte{padding:18px 22px 16px}
body.deck .vs-ico,body.deck .vs-ico svg{height:40px}
body.deck .vs-txt{font-size:13.5px;margin:9px 0 10px}
body.deck .vs-checks li{font-size:13px;padding:3px 0}
@media (max-height:920px){
 body.deck .vs-ico,body.deck .vs-ico svg{height:32px}
 body.deck .vs-carte{padding:14px 18px 12px}
 body.deck .vs-txt{font-size:12.5px;line-height:1.5;margin:7px 0 8px}
 body.deck .vs-checks li{font-size:12px;padding:2px 0}
 body.deck .vs-nom{font-size:14.5px}
 body.deck .vs-mode{font-size:12px}
 body.deck .vs-sep{width:38px;height:38px;font-size:13px}
}
body.deck section.sec#s17>.wrap{gap:10px}
body.deck #s17 .lead[style]{margin-top:4px!important}
body.deck #s17 p[style*="margin-top:44px"]{margin-top:8px!important}
body.deck #s17 .bigline[style]{margin-top:2px!important}
body.deck #s17 .statement{font-size:clamp(20px,2vw,30px)}
body.deck #s17 .lead{font-size:15px}
@media (max-height:920px){
 body.deck section.sec#s17>.wrap{gap:7px}
 body.deck #s17 .statement{font-size:18px}
 body.deck #s17 .lead{font-size:13.5px}
 body.deck .vs-checks{padding-top:8px}
 body.deck .vs-checks li .co{width:16px;height:16px;font-size:10px}
 body.deck .vs-duo{margin-top:2px}
}
@media (max-height:800px){
 body.deck section.sec#s17>.wrap{gap:5px}
 body.deck .vs-carte{padding:10px 14px 9px}
 body.deck .vs-ico,body.deck .vs-ico svg{height:24px}
 body.deck .vs-ico{margin-bottom:5px}
 body.deck .vs-txt{font-size:11.5px;line-height:1.45;margin:5px 0 6px}
 body.deck .vs-nom{font-size:13px}
 body.deck .vs-mode{font-size:11px;margin-top:3px}
 body.deck .vs-checks{padding-top:6px}
 body.deck .vs-checks li{font-size:11px;padding:1px 0}
 body.deck #s17 .statement{font-size:16px}
 body.deck #s17 .lead{font-size:12.5px}
 body.deck #s17 .bigline{font-size:15px}
 body.deck .vs-sep{width:32px;height:32px;font-size:11.5px}
}

/* ===== s17 : paragraphe fusionné ===== */
.fusion17{max-width:900px;line-height:1.8}
body.deck #s17 .fusion17{font-size:16.5px}
@media (max-height:920px){body.deck #s17 .fusion17{font-size:15px}}
@media (max-height:800px){body.deck #s17 .fusion17{font-size:14px;line-height:1.7}}

/* ===== s17 v2 : ajustements client (cartes sans icônes, titres colorés, points x2, paragraphe 30px) ===== */
.vs-ico{display:none!important}
.vs-duo{max-width:1250px}
.vs-carte,body.deck .vs-carte{min-height:540px;padding:30px 26px 24px;justify-content:flex-start}
.vs-cryo .vs-nom,body.deck .vs-cryo .vs-nom{color:var(--froid);font-size:clamp(26px,2.2vw,38px);line-height:1.2;letter-spacing:.04em}
.vs-tfnom,body.deck .vs-tf .vs-tfnom{font-size:clamp(36px,3.3vw,60px);line-height:1.05;letter-spacing:.015em}
.vs-mode,body.deck .vs-mode{font-size:clamp(17px,1.35vw,24px);letter-spacing:.14em;margin-top:10px}
.vs-mode2,body.deck .vs-mode2{margin-top:4px}
.vs-txt,body.deck .vs-txt{font-size:16px;line-height:1.6;margin:14px 0 16px}
.vs-checks li,body.deck .vs-checks li{font-size:27px;font-weight:600;padding:7px 0;gap:14px}
.vs-checks li .co,body.deck .vs-checks li .co{width:40px;height:40px;font-size:22px}
.vs-checks,body.deck .vs-checks{padding-top:16px;margin-top:auto}
.fusion17{font-size:30px!important;line-height:1.55;max-width:1250px;margin:34px auto!important}
.fusion17 b{font-weight:700}
@media (min-height:1150px) and (max-height:1270px){
 body.deck .vs-carte{min-height:470px}
 body.deck #s17 .fusion17{margin:24px auto!important}
}

/* ===== s17 v3 : pastilles alignées, croix rouges, coches vertes ===== */
.vs-checks li,body.deck .vs-checks li{display:grid;grid-template-columns:40px 250px;column-gap:14px;justify-content:center;justify-items:start;align-items:center;text-align:left}
.vs-checks li.non .co,body.deck .vs-checks li.non .co{background:rgba(196,18,47,.12);color:var(--chaud);font-size:20px}
.vs-checks li.non,body.deck .vs-checks li.non{color:#6b747c}
.vs-tf .vs-checks li.oui .co,body.deck .vs-tf .vs-checks li.oui .co{background:rgba(46,158,79,.16);color:#2E9E4F}

/* ===== s16 : paragraphe fusionné 30px ===== */
.fusion16{font-size:30px!important;line-height:1.55;max-width:1250px;margin:26px auto!important}

/* ===== s16 : badge agrandi de 2/3 ===== */
body.deck #s16 .sceau-img img{width:clamp(417px,35vw,600px)}
@media (max-height:880px){body.deck #s16 .sceau-img img{width:clamp(350px,28.3vw,467px)}}
#s16 .sceau-img img{width:clamp(417px,35vw,600px)}
body.deck section.sec#s16>.wrap{gap:8px}
body.deck #s16 .fusion16{margin:14px auto!important}
@media (max-height:800px){
 body.deck section.sec#s16>.wrap{gap:4px}
 body.deck #s16 .fusion16{margin:8px auto!important;line-height:1.45}
 body.deck #s16 .sceau-sous{font-size:15px}
}

/* ===== s16 : respiration régulière + EXCLUSIF AU CANADA agrandi ===== */
body.deck section.sec#s16>.wrap{justify-content:space-between;gap:12px}
body.deck section.sec#s16>.wrap>h2+*{margin-top:0!important}
body.deck section.sec#s16>.wrap::before,body.deck section.sec#s16>.wrap::after{display:none}
body.deck #s16 .fusion16{margin:0 auto!important}
#s16 .sceau-sous,body.deck #s16 .sceau-sous{font-size:clamp(20px,1.7vw,29px);letter-spacing:.14em}
@media (max-height:800px){body.deck #s16 .sceau-sous{font-size:18px}body.deck #s16 .fusion16{line-height:1.45}}
@media (max-height:800px){body.deck #s16 .sceau-img img{width:clamp(300px,24.5vw,430px)}}

/* ===== sections sombres : noir pur et uni (halos décoratifs retirés) ===== */
.sec.dark::before,.sec.dark::after{display:none}

/* ===== s1 : badge chaud+froid à gauche de la vidéo ===== */
.hero1v-duo{display:flex;align-items:center;justify-content:center;gap:clamp(22px,2.6vw,50px);width:min(96vw,1670px);margin:0 auto}
.hero1v-duo .sceau-img{flex:0 0 auto}
.hero1v-duo .sceau-img img,body.deck #s1 .hero1v-duo .sceau-img img{width:clamp(200px,17vw,330px)}
.hero1v-duo .hero1v,body.deck #s1 .hero1v-duo .hero1v{flex:0 0 auto;min-width:0;width:auto}
.hero1v-duo video,body.deck #s1 .hero1v-duo video{width:auto;height:clamp(300px,42vh,500px);max-width:60vw}
@media (max-width:900px){.hero1v-duo{flex-direction:column}.hero1v-duo .sceau-img img{width:min(70vw,300px)}}
@media (min-height:1150px){body.deck section.sec#s1>.wrap{gap:18px}}

/* ===== s1 v2 : correction débordement + vidéo/badge agrandis ===== */
@media (min-width:901px){#s1>.wrap{max-width:min(98.5vw,1800px)}}
body.deck section.sec#s1>.wrap{max-width:min(98.5vw,1800px)}
.hero1v-duo{width:100%;gap:clamp(10px,1vw,20px)}

.hero1v-duo .sceau-img img,body.deck #s1 .hero1v-duo .sceau-img img{width:clamp(205px,18vw,360px)}

/* ===== s1 : annotations client — espacements EXCLUSIF AU CANADA + bouton ===== */
body.deck #s1 .claimbox .statement{margin:20px 0 0!important}
body.deck #s1 .claimbox p[style*="margin:30px"]{margin-top:20px!important}
body.deck #s1 .claimbox{padding-bottom:46px}

/* ===== page Démonstration : vidéo + Découvrez + 9 points + bouton ===== */
.demo-wrap{max-width:min(94vw,1760px)}
.sec-demo{padding-top:34px}
.demo-video video{display:block;width:min(88vw,1240px);height:auto;margin:0 auto;border-radius:12px;box-shadow:none}
html.lang-fr .demo-video .en,html.lang-en .demo-video .fr{display:none!important}
.demo-titre{margin:34px 0 0;font-size:clamp(26px,2.4vw,38px)}
.demo-points{display:grid;grid-template-columns:repeat(9,1fr);gap:14px;margin-top:26px}
.dp{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 10px 20px;font-family:'Outfit','Inter',sans-serif;font-weight:600;font-size:clamp(13px,0.95vw,17px);line-height:1.45;color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;min-height:120px;box-shadow:0 8px 24px rgba(10,14,20,.05)}
.dp::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--duo)}
@media (max-width:1100px){.demo-points{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.demo-points{grid-template-columns:1fr}}

/* ===== page Démonstration : zone grise réduite de moitié ===== */
.pagehead.ph-compact{padding:38px 0 42px}
.pagehead.ph-compact h1{font-size:clamp(26px,3.1vw,44px);margin:10px 0 0}
.pagehead.ph-compact .ov{margin-bottom:0}
.pagehead.ph-compact .lead{margin-top:10px}
.sec .demo-cta{margin:0 0 30px}
.demo-video{position:relative}
.demo-machine{position:absolute;top:50%;left:calc(50% + min(47vw,880px) - 32px);transform:translate(-100%,-50%);height:112%;width:auto;z-index:2;pointer-events:none}

/* ===== rail : menu masqué — points seuls, libellés au survol ===== */
.rail .lb,.rail a.on .lb{opacity:0;transform:translateX(10px);font-size:10.5px;letter-spacing:.14em}
.rail:hover .lb{opacity:.72;transform:none}
.rail:hover a.on .lb,.rail a:hover .lb{opacity:1;transform:none}
.rail.browse .lb{opacity:0}
.rail.browse a.sel .lb{opacity:1;transform:none}
@media (min-width:1201px){.rail a .lb{pointer-events:auto}}

/* ===== s16 : ensemble réduit (~13%) pour plus d'élégance ===== */
#s16 h2,body.deck section.sec#s16 h2{font-size:clamp(26px,2.08vw,40px)!important}
#s16 .sceau-img img,body.deck #s16 .sceau-img img{width:clamp(363px,30.5vw,520px)}
#s16 .sceau-sous,body.deck #s16 .sceau-sous{font-size:clamp(17px,1.48vw,25px)}
.fusion16{font-size:26px!important}
@media (max-height:880px){body.deck #s16 .sceau-img img{width:clamp(305px,24.6vw,406px)}}
@media (max-height:800px){body.deck #s16 .sceau-img img{width:clamp(260px,21.3vw,375px)}body.deck #s16 .sceau-sous{font-size:16px}body.deck #s16 .fusion16{font-size:24px!important}}

/* ===== s16 : groupe central compact (écarts fixes, plus d'étirement) ===== */
body.deck section.sec#s16>.wrap{justify-content:flex-start;gap:0}
body.deck section.sec#s16>.wrap>h2+.sceau-img{margin-top:auto!important}
body.deck #s16 .sceau-sous{margin-top:24px!important}
body.deck #s16 .goldline{margin-top:20px!important}
body.deck #s16 .fusion16{margin:22px auto auto!important}
@media (max-height:800px){
 body.deck #s16 .sceau-sous{margin-top:12px!important}
 body.deck #s16 .goldline{margin-top:10px!important}
 body.deck #s16 .fusion16{margin:12px auto auto!important}
}

/* ===== s16 : badge remonté — ressorts 1:1.7 (moins d'espace en haut) ===== */
.s16sp1,.s16sp2{display:none}
body.deck #s16 .s16sp1{display:block;flex:1 1 0}
body.deck #s16 .s16sp2{display:block;flex:1.7 1 0}
body.deck #s16 .fusion16{margin:22px auto 0!important}
@media (max-height:800px){body.deck #s16 .fusion16{margin:12px auto 0!important}}

/* ===== rail : zone de survol élargie autour des points + suppression ligne/focus hérités du nav ===== */
.rail a::after{content:none!important}
.rail a:focus:not(:focus-visible){outline:none}
.rail .dot{position:relative}
.rail .dot::after{content:"";position:absolute;inset:-9px -16px}

/* ===== rail v3 : icônes par section + panneau coulissant à la demande ===== */
.rail{mix-blend-mode:normal;gap:5px;right:14px}
.rail .dot,.rail .dot::after{display:none}
.rail a{gap:12px;position:relative;z-index:2}
.rail .ric{width:auto;height:34px;display:block;pointer-events:auto;transition:filter .25s ease}
.rail a:hover .ric{filter:brightness(1.25) drop-shadow(0 0 8px rgba(46,182,218,.85)) drop-shadow(0 0 2px rgba(255,255,255,.55))}
.rail a.on .ric{filter:brightness(1.18) drop-shadow(0 0 6px rgba(46,182,218,.5))}
.rail .lb,.rail a.on .lb{font-size:10.5px;letter-spacing:.12em;color:#26313A;opacity:0;transform:translateX(16px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.rail-pane{position:absolute;z-index:1;top:-16px;bottom:-16px;right:53px;width:445px;border-radius:14px;background:rgba(252,253,254,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(20,30,40,.1);box-shadow:0 18px 50px rgba(10,16,22,.2);opacity:0;transform:translateX(44px);transition:opacity .28s ease,transform .28s ease;pointer-events:none}
.rail-pane .rfl{position:absolute;left:-25px;top:8px;width:25px;height:34px;background:rgba(252,253,254,.86);border:1px solid rgba(20,30,40,.1);border-right:none;border-radius:8px 0 0 8px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#26313A;font-family:'Outfit',sans-serif}
.rail:hover .rail-pane,.rail.browse .rail-pane{opacity:1;transform:none}
.rail:hover .lb,.rail.browse .lb{opacity:.4;transform:none;pointer-events:auto}
.rail:hover a:hover .lb,.rail:hover a.on .lb,.rail.browse a.sel .lb{opacity:1}
.rail:hover a{pointer-events:auto}
.rail.browse a.sel .ric{filter:brightness(1.3) drop-shadow(0 0 9px rgba(46,182,218,.9))}
@media (max-height:860px){
 .rail{gap:4px}
 .rail .ric{height:28px}
 .rail-pane{right:46px}
 .rail-pane .rfl{height:28px}
}
.rail a .lb{pointer-events:none}
.rail:hover a .lb,.rail.browse a .lb{pointer-events:auto}
.rail.browse a.sel .lb{font-size:10.5px}

/* ===== rail v4 : bandeau vitré permanent (maquette client) — s'élargit au survol ===== */
.rail-pane{opacity:1;transform:none;right:-9px;width:64px;transition:width .32s ease}
.rail:hover .rail-pane,.rail.browse .rail-pane{opacity:1;transform:none;width:512px}
.rail-pane .rfl{pointer-events:auto}
@media (max-height:860px){
 .rail-pane{width:56px;right:-8px}
 .rail:hover .rail-pane,.rail.browse .rail-pane{width:470px}
 .rail-pane .rfl{height:28px;left:-23px;width:23px}
}
.rail{z-index:61}
@media (max-width:1430px){header .wrap{padding-right:96px}}

/* ===== rail v5 : look fidèle à la maquette + panneau persistant + titre courant visible ===== */
.rail-pane{background:linear-gradient(180deg,#ffffff 0%,#fdfdfd 42%,#ebebec 100%);-webkit-backdrop-filter:none;backdrop-filter:none;border:1.5px solid #D9DCDF;border-radius:20px;box-shadow:0 12px 38px rgba(10,16,22,.14)}
.rail-pane .rfl{left:-35px;top:-1.5px;width:37px;height:54px;background:linear-gradient(180deg,#ffffff,#f3f4f5);border:1.5px solid #D9DCDF;border-right:none;border-radius:15px 0 0 15px;font-size:26px;font-weight:600;color:#2A333C;padding-bottom:4px}
.rail-pane .rfl::after{content:"";position:absolute;right:-3px;top:1px;bottom:1px;width:4px;background:#fff}
/* 2. le panneau garde la souris : toute la surface est active quand il est ouvert */
.rail:hover .rail-pane,.rail.browse .rail-pane{pointer-events:auto}
/* 3. titre de la section courante visible quand le panneau est fermé (pastille) */
.rail a.on .lb{opacity:1;transform:none;pointer-events:auto;background:linear-gradient(180deg,#ffffff,#f3f4f5);border:1px solid #D9DCDF;border-radius:9px;padding:6px 11px;box-shadow:0 6px 18px rgba(10,16,22,.1)}
.rail:hover a.on .lb,.rail.browse a.on .lb{background:none;border:none;border-radius:0;padding:0;box-shadow:none}
@media (max-height:860px){.rail-pane .rfl{left:-31px;width:33px;height:46px;font-size:22px}}

/* ===== rail v6 : panneau = PNG client (transparence d'origine, zéro ombre ajoutée) ===== */
.rail-pane{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-style:solid;border-color:transparent;border-width:42px;border-image:url(/icones/rail-card.png) 150 fill / 42px stretch;border-radius:0;box-shadow:none}
.rail-pane .rfl{left:-44px;top:-4px;width:52px;height:60px;background:url(/icones/rail-tab.png) center/100% 100% no-repeat;border:none;border-radius:0;box-shadow:none;font-size:0;color:transparent;padding:0}
.rail-pane .rfl::after{content:none}
.rail a.on .lb{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);box-shadow:none}
.rail:hover a.on .lb,.rail.browse a.on .lb{background:none;border:none}
.rail a.on .ric{filter:brightness(1.2)}
@media (max-height:860px){.rail-pane .rfl{left:-40px;width:47px;height:54px}}
/* rail sur section sombre : textes clairs (le panneau garde la transparence du PNG) */
.rail.sombre .lb,.rail.sombre a.on .lb{color:#Eef2f5}
.rail.sombre a.on .lb{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.rail.sombre:hover a.on .lb,.rail.sombre.browse a.on .lb{background:none;border:none}

/* ===== rail v7 : onglet soudé au panneau + icônes inversées sur fond noir ===== */
.rail-pane .rfl{left:-34px;top:0;width:53px;height:60px}
.rail.sombre .ric{filter:invert(1) brightness(1.15)}
.rail.sombre a:hover .ric{filter:invert(1) brightness(1.4) drop-shadow(0 0 8px rgba(255,255,255,.75))}
.rail.sombre a.on .ric{filter:invert(1) brightness(1.3)}
.rail.sombre.browse a.sel .ric{filter:invert(1) brightness(1.45) drop-shadow(0 0 9px rgba(255,255,255,.85))}
@media (max-height:860px){.rail-pane .rfl{left:-30px;top:0;width:48px;height:54px}}
@media (max-height:860px){.rail{top:calc(50% + 46px)}}
.rail a{padding:0}
@media (max-height:980px){.rail{top:calc(50% + 58px)}}

/* ===== rail v8 : zone de texte invisible — textes seuls, aucun fond ===== */
.rail-pane{border-image:none;background:none;border:none;box-shadow:none}
.rail-pane .rfl{display:none}
.rail a.on .lb,.rail.sombre a.on .lb{background:none;border:none;padding:0;box-shadow:none;border-radius:0}

/* ===== rail v9 : titre permanent retiré — icône courante en néon rouge ===== */
.rail a.on .lb{opacity:0;transform:translateX(16px);pointer-events:none}
.rail:hover a.on .lb,.rail.browse a.on .lb{opacity:1;transform:none;pointer-events:auto}
.rail a.on .ric,.rail.sombre a.on .ric{filter:none}
.rail a:nth-of-type(1).on .ric{content:url(/icones/neon-01.png)}
.rail a:nth-of-type(2).on .ric{content:url(/icones/neon-02.png)}
.rail a:nth-of-type(3).on .ric{content:url(/icones/neon-03.png)}
.rail a:nth-of-type(4).on .ric{content:url(/icones/neon-04.png)}
.rail a:nth-of-type(5).on .ric{content:url(/icones/neon-05.png)}
.rail a:nth-of-type(6).on .ric{content:url(/icones/neon-06.png)}
.rail a:nth-of-type(7).on .ric{content:url(/icones/neon-07.png)}
.rail a:nth-of-type(8).on .ric{content:url(/icones/neon-08.png)}
.rail a:nth-of-type(9).on .ric{content:url(/icones/neon-09.png)}
.rail a:nth-of-type(10).on .ric{content:url(/icones/neon-10.png)}
.rail a:nth-of-type(11).on .ric{content:url(/icones/neon-11.png)}
.rail a:nth-of-type(12).on .ric{content:url(/icones/neon-12.png)}
.rail a:nth-of-type(13).on .ric{content:url(/icones/neon-13.png)}
.rail a:nth-of-type(14).on .ric{content:url(/icones/neon-14.png)}
.rail a:nth-of-type(15).on .ric{content:url(/icones/neon-15.png)}
.rail a:nth-of-type(16).on .ric{content:url(/icones/neon-16.png)}
.rail a:nth-of-type(17).on .ric{content:url(/icones/neon-17.png)}
.rail a:nth-of-type(18).on .ric{content:url(/icones/neon-18.png)}
.rail.browse a.on.sel .ric,.rail.sombre.browse a.on.sel .ric{filter:none}

/* ===== finale : visuel feu/glace sous EXCLUSIF AU CANADA ===== */
.finale-visuel{text-align:center;line-height:0}
.finale-visuel img{width:min(88vw,1240px);height:auto;display:inline-block;border-radius:12px}
body.deck section.sec#finale{padding-bottom:0!important}
body.deck #finale .wrap{padding-bottom:0}
body.deck section.sec#finale>.wrap{gap:14px}
body.deck #finale .finale-visuel img{width:min(88vw,1240px,calc(66vh + 560px))}
@media (min-height:981px){body.deck #finale .finale-visuel img{width:min(88vw,850px)}}
@media (min-height:1150px){body.deck #finale .finale-visuel img{width:min(88vw,1160px)}}
body.deck section.sec#finale>.wrap::before{display:none}
body.deck section.sec#finale>.wrap::after{display:block;content:"";flex:0 0 112px;min-height:112px;max-height:none}
body.deck #finale .wrap>p[style*="margin-top:36px"]{margin-top:12px!important}
/* ============================================================
   BETACELL-291026 — HARMONISATION TYPOGRAPHIQUE MOBILE (<900px)
   Echelle unique pour tous les formats cellulaires et tablette portrait :
   titre hero / bannieres  clamp(26px,7vw,33px)
   titres de section h2    clamp(23px,6.4vw,28px)
   sous-titres h3          clamp(18px,5vw,21px)
   grands textes d'appui   clamp(18px,5vw,22px)   (bigline, claim-lines)
   leads                   clamp(16px,4.4vw,18px)
   corps p/li              clamp(14.5px,4vw,16px)
   petits textes/labels    minimum 12px
   (le mode presentation PC, actif a partir de 900px, n'est pas touche)
   ============================================================ */
@media (max-width:899px){
 .regbar{font-size:12px;letter-spacing:.14em}
 header .wrap .btn{font-size:12.5px!important;padding:12px 16px;letter-spacing:.14em}
 .lang-sw button{font-size:12.5px}
 .btn{font-size:13.5px!important;letter-spacing:.16em;padding:15px 24px}
 h1,.pagehead .titre-banniere,#s1 h1.deux-lignes{font-size:clamp(26px,7vw,33px)!important;white-space:normal!important;line-height:1.18}
 section.sec h2{font-size:clamp(23px,6.4vw,28px)!important;line-height:1.25}
 section.sec h2 .lg,#s7 h2 .en{white-space:normal!important}
 h3{font-size:clamp(18px,5vw,21px)!important}
 .bigline,.claim-lines{font-size:clamp(18px,5vw,22px)!important;line-height:1.4}
 .statement{font-size:clamp(13.5px,3.8vw,16px)!important;line-height:1.9;letter-spacing:.18em}
 .trio-ligne,#s10 .s10lead{font-size:clamp(16px,4.4vw,18px)!important}
 .lead{font-size:clamp(16px,4.4vw,18px)!important;line-height:1.7}
 section.sec p,section.sec li,.demo-points .dp{font-size:clamp(14.5px,4vw,16px)}
 .hero10-cap .cap-lead{font-size:clamp(13px,3.6vw,14.5px)}
 .hero10-cap .cap-big{font-size:clamp(15px,4.2vw,17px)}
 .pc{font-size:clamp(16px,4.5vw,18px)!important;min-height:130px;padding:22px 14px}
 .vs-checks li{font-size:clamp(15px,4.2vw,17px)!important}
 .vs-checks li .co{width:22px;height:22px;font-size:12.5px}
 .vs-cryo .vs-nom{font-size:clamp(20px,5.6vw,24px)!important}
 .vs-tfnom{font-size:clamp(24px,6.6vw,28px)!important}
 .vs-mode{font-size:clamp(14px,3.9vw,16px)!important}
 .avap-pp{font-size:12.5px;width:30px;height:30px}
 .avap-compteur{font-size:12.5px!important}
 .pagehead .intro-form{font-size:clamp(15.5px,4.3vw,17.5px)!important}
 section.sec,.sep-sec{scroll-margin-top:80px}
 /* paragraphes toujours centres sur mobile (demande client) */
 section.sec p,section.sec li,.pagehead p{text-align:center!important}
 /* titres et labels des cartes centres aussi, pour une harmonie complete */
 section.sec .cc,section.sec .step,section.sec .card,section.sec .ct{text-align:center!important}
 /* blocs de texte a largeur PC (vw) : pleine largeur et centres sur mobile */
 #s1 .lead-bloc,#s1 .lead-bloc .lead{width:auto!important;max-width:none!important}
 section.sec .lead-bloc,section.sec .lead,section.sec .claimbox{margin-left:auto!important;margin-right:auto!important}
 /* ---- ESPACEMENTS : rythme vertical unique ----
    sections 56px . titre->contenu 20px . blocs 28px . elements proches 12-18px */
 section.sec{padding-top:56px!important;padding-bottom:56px!important}
 section.sec#finale{padding-bottom:76px!important}
 section.sec h2{margin-bottom:20px}
 .claimbox{margin:28px auto 0!important}
 .cards,.steps,.prog-cards{margin-top:28px!important}
 /* hero : la video reprend le format paysage pleine largeur (regles PC 42vh/60vw neutralisees) */
 .hero1v-duo{gap:20px}
 .hero1v-duo video,#s1 .hero1v video{width:min(92vw,560px)!important;height:auto!important;max-width:none!important}
 /* cartes comparatives s17 : hauteur au contenu, liste rapprochee du texte */
 .vs-carte{min-height:0!important;padding:24px 20px 20px!important}
 .vs-checks{margin-top:18px!important}
}
/* ---- BETACELL-291026 : liste des sections dans le menu burger ---- */
.mnav-secs{display:none}
@media (max-width:1100px){
 header.mnav-open nav{max-height:calc(100dvh - 64px);overflow-y:auto}
 .mnav-secs{display:block;padding:2px 0 10px}
 .mnav-secs .mnav-titre{display:block;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#8a97a2;margin:16px 0 2px}
 header.mnav-open nav .mnav-secs a{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:500}
 .mnav-secs a .num{font-family:'Outfit','Inter',sans-serif;font-size:12px;color:#9aa6b0;min-width:20px;font-weight:600}
}
/* ---- BETACELL-291026 : icones du menu + separateurs de sections (mobile) ---- */
@media (max-width:1100px){
 .mnav-secs a .mic{height:30px;width:auto;flex:0 0 auto}
 header.mnav-open nav .mnav-secs a{align-items:center}
}
@media (max-width:899px){
 .sep-sec{display:block;padding:0 24px 10px;--sh:#fff;--sb:#fff;background:linear-gradient(to bottom,var(--sh) 0 52px,var(--sb) 52px 100%)}
 .sep-sec.h-alt{--sh:var(--soft)} .sep-sec.h-dark{--sh:var(--dark)}
 .sep-sec.b-alt{--sb:var(--soft)} .sep-sec.b-dark{--sb:var(--dark)}
 .sep-sec .sic{background:var(--sb);border-radius:50%}
 .sep-sec.b-dark .sic img{filter:invert(1)}
 .sep-sec.b-dark .sep-titre{color:#Eef2f5}
 .sep-sec .sep-row{display:flex;align-items:center}
 .sep-sec .sep-titre{text-align:center;font-family:'Outfit','Inter',sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(22px,6vw,26px);line-height:1.25;color:var(--ink);margin:0 0 6px}
 .sep-sec .sl{flex:1;height:2px}
 .sep-sec .sl.g{background:linear-gradient(90deg,rgba(196,18,47,0),var(--chaud))}
 .sep-sec .sl.d{background:linear-gradient(90deg,var(--froid),rgba(46,182,218,0))}
 .sep-sec .sic{display:flex;align-items:center;justify-content:center;margin:16px 14px;flex:0 0 auto}
 .sep-sec .sic img{height:72px;width:auto}
}
body.deck .sep-sec{display:none}
/* ---- BETACELL-291026 : visuel s7 version cellulaire (le PC garde le visuel d'origine) ---- */
.s7visuel .vcell{display:none}
@media (max-width:899px){
 .s7visuel .vdesk{display:none}
 .s7visuel .vcell{display:block;width:min(100%,560px);height:auto;margin:0 auto;border-radius:10px}
}
/* ---- BETACELL-291026 : visuel s2 version cellulaire (le PC garde le visuel d'origine) ---- */
.s2visuel .vcell{display:none}
@media (max-width:899px){
 .s2visuel .vdesk{display:none}
 .s2visuel .vcell{display:block;width:min(100%,560px);height:auto;margin:0 auto;border-radius:10px}
}
/* ---- BETACELL-291026 : carrousel avant/apres s9 pleine largeur, fleches avec pause+compteur ---- */
@media (max-width:899px){
 #s9 .avap{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
 #s9 .avap-centre{width:100%;gap:12px}
 #s9 .avap-stage{width:100vw;max-width:none;height:auto;max-height:none;aspect-ratio:960/742}
 #s9 .avap-stage img{border-radius:0}
 #s9 .avap-ctrl{gap:14px}
 #s9 .avap-ctrl .avap-fl{width:40px;height:40px;font-size:24px}
}
/* ---- BETACELL-291026 : visuel machine s10 + finale version cellulaire (PC inchange) ---- */
#s10 .vcell,.finale-visuel .vcell{display:none}
@media (max-width:899px){
 #s10 .vdesk,.finale-visuel .vdesk{display:none!important}
 #s10 .vcell,.finale-visuel .vcell{display:block;width:min(100%,560px);height:auto;margin:0 auto;border-radius:10px}
}
/* ---- BETACELL-291026 : carrousels s11 (professions) et s15 (formation) sur mobile ---- */
@media (max-width:899px){
 .carcel-fen{overflow:hidden;width:min(100%,560px);margin:0 auto;border-radius:10px}
 .carcel-fen span{display:block}
 .carcel-fen img{width:500%!important;max-width:none!important;height:auto;display:block;transition:opacity .28s ease}
 .pro-visuel,.formation-visuel{line-height:normal}
 .carcel-ctrl{position:static;display:flex;justify-content:center;align-items:center;gap:14px;margin-top:12px;transform:none}
 .carcel-ctrl .avap-fl{width:40px;height:40px;font-size:24px}
 .carcel-ctrl .avap-pp{background:rgba(11,17,22,.78)}
 .carcel-ctrl .avap-compteur{position:static;transform:none;background:rgba(11,17,22,.78)}
}
/* ---- BETACELL-291026 : s17 comparaison cote a cote avec defilement lateral, VS centre a l'arrivee ---- */
@media (max-width:899px){
 #s17 .vs-duo{display:flex!important;flex-direction:row;align-items:stretch;gap:16px;overflow-x:auto;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:none;
  padding:4px 20px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 #s17 .vs-duo::-webkit-scrollbar{height:6px}
 #s17 .vs-duo::-webkit-scrollbar-thumb{background:rgba(11,17,22,.35);border-radius:3px}
 #s17 .vs-duo .vs-carte{flex:0 0 calc(100vw - 40px);min-width:0}
 #s17 .vs-duo .vs-sep{flex:0 0 auto;align-self:center;margin:0}
}
/* ---- BETACELL-291026 : s12 Les Zones — paragraphe en haut, roue de zones sous le visuel ---- */
@media (max-width:899px){
 #s12 .zgrid{display:none}
 #s12 .zones-split>.lead{margin:0 auto 4px;text-align:center}
 .zroue{height:156px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;margin:2px auto 0;width:min(100%,420px);-webkit-overflow-scrolling:touch}
 .zroue::-webkit-scrollbar{display:none}
 .zroue::before,.zroue::after{content:"";display:block;height:52px}
 .zroue{perspective:600px}
 .zroue .zitem{height:52px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:23px;color:var(--ink);cursor:pointer;text-align:center;will-change:transform,opacity}
 /* scene mobile : + blancs permanents, halo rouge sur la zone en avant */
 #s12 .zones-stage .zimg{display:none}
 #s12 .zbase{display:block;width:100%;height:auto}
 #s12 .zmark{position:absolute;inset:0;width:100%;height:auto;opacity:0;transition:opacity .25s ease}
 #s12 .zmark.on{opacity:1}
}
/* ---- BETACELL-291026 : + cliquables sur le visuel des zones ---- */
@media (max-width:899px){
 #s12 .zhot{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:transparent;border:none;cursor:pointer;padding:0;z-index:3;pointer-events:none}
}
/* ---- BETACELL-291026 : video FR cellulaire sur la page Demonstration Privee ---- */
.demo-video .vcell{display:none}
@media (max-width:899px){
 .demo-video video.vdesk{display:none!important}
 html.lang-fr .demo-video video.fr.vcell{display:block;width:min(100%,520px);margin:0 auto;border-radius:12px}
 html.lang-en .demo-video video.en.vcell{display:block;width:min(100%,520px);margin:0 auto;border-radius:12px}
 .demo-video .demo-machine{display:none}
}
/* ---- BETACELL-291026 : cartes de la demo cliquables vers leurs sections ---- */
a.dp{color:inherit;text-decoration:none;cursor:pointer}
/* ---- BETACELL-291026 : barre du haut mobile — logo | CTA bleu | menu | FR/EN ---- */
@media (max-width:899px){
 header .wrap{justify-content:space-between;gap:8px;padding-right:14px}
 .logo{order:1;flex:0 0 auto;line-height:0}
 header .wrap .btn{display:inline-flex!important;order:2;margin:0;padding:8px 10px;font-size:10px!important;letter-spacing:.05em;gap:5px;line-height:1.35;text-align:center;white-space:normal;max-width:150px}
 header .wrap .btn::after{display:none}
 .burger{order:3;flex:0 0 auto}
 header .wrap .lang-sw{order:4;margin-left:0;flex:0 0 auto}
 .lang-sw button{padding:7px 9px}
}
@media (max-width:460px){
 .logo img{height:34px}
 header .wrap{gap:6px;padding-left:10px;padding-right:10px}
 header .wrap .btn{max-width:122px;font-size:9.5px!important;padding:7px 8px;letter-spacing:.04em}
 .lang-sw button{padding:6px 7px;font-size:11.5px}
 .burger{width:38px;height:38px}
}
@media (max-width:374px){
 .logo img{height:30px}
 header .wrap{gap:4px}
 header .wrap .btn{max-width:112px;font-size:9px!important}
}