/* j_aiR — portfolio 2026
   Layout : colonne centrée de 1120px bordée de deux filets verticaux, sections séparées par un filet
   avec des pixels aux intersections (rappel de la grille du logo). Sombre par défaut, thème clair en option. */
:root{
  --bg:#0b0c0e; --bg-2:#111216; --surface:#15161b; --surface-2:#1c1d24;
  --text:rgba(246,243,240,.92); --text-2:rgba(246,243,240,.66); --text-3:rgba(246,243,240,.52);
  --line:rgba(246,243,240,.09); --line-2:rgba(246,243,240,.16);
  --mag:#d90368; --mag-hi:#ff2a85; --mag-ink:#ff4f9a; --glow:rgba(217,3,104,.42);
  --nav-bg:rgba(21,22,27,.72); --marquee:rgba(246,243,240,.1); --logo-filter:none;
  --err:#ff7a8a; --ok:#2fd17a; --field-line:rgba(246,243,240,.38);
  --sans:'Josefin Sans','Futura','Century Gothic','Trebuchet MS',system-ui,sans-serif;
  --slab:'Josefin Slab','Rockwell','Georgia',serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --wrap:1120px; --pad:clamp(20px,4vw,48px); --r:14px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f2ee; --bg-2:#ebe8e2; --surface:#ffffff; --surface-2:#f1eee9;
  --text:rgba(20,20,24,.92); --text-2:rgba(20,20,24,.66); --text-3:rgba(20,20,24,.62);
  --line:rgba(20,20,24,.09); --line-2:rgba(20,20,24,.16);
  --mag:#d90368; --mag-hi:#c4005c; --mag-ink:#c4005c; --glow:rgba(217,3,104,.22);
  --nav-bg:rgba(255,255,255,.78); --marquee:rgba(20,20,24,.08); --logo-filter:invert(1);
  --err:#b3132b; --ok:#0f7a3f; --field-line:rgba(20,20,24,.45);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
em,.serif{font-family:var(--slab);font-style:italic;font-weight:300;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--mag-hi);outline-offset:3px;border-radius:6px}
::selection{background:var(--mag);color:#fff}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--mag);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:16px}

/* ---------- cadre ---------- */
.frame{max-width:calc(var(--wrap) + 2px);margin:0 auto;border-inline:1px solid var(--line);position:relative}
.sec{position:relative;border-top:1px solid var(--line);padding:clamp(72px,10vw,128px) var(--pad)}
.sec::before,.sec::after{content:"";position:absolute;top:-3px;width:5px;height:5px;background:var(--text-3)}
.sec::before{left:-3px}.sec::after{right:-3px}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(40px,6vw,64px);max-width:720px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.kicker{font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:6px;height:6px;background:var(--mag)}
h2{font-size:clamp(36px,5vw,52px)}
.lede{color:var(--text-2);font-size:18px;max-width:60ch}

/* ---------- boutons ---------- */
/* le JS ajoute : effet aimant (--tx/--ty), halo qui suit le curseur (--mx/--my) et texte qui roule */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 20px 10px;border-radius:12px;font:500 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;border:1px solid transparent;transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .45s cubic-bezier(.2,.9,.25,1.2),box-shadow .35s,background-color .3s,border-color .3s,color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),var(--halo,rgba(255,255,255,.38)),transparent 62%);opacity:0;transition:opacity .35s}
.btn:hover::before,.btn:focus-visible::before{opacity:1}
.btn:active{transition-duration:.12s;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.96)}
.btn-primary{background:var(--mag);color:#fff;border-color:#ff3d93;box-shadow:0 8px 28px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{box-shadow:0 14px 40px -8px var(--glow),0 0 0 4px color-mix(in srgb,var(--mag) 18%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.2,.8,.2,1)}
.btn-primary:hover::after{left:130%}
.btn-ghost{--halo:color-mix(in srgb,var(--mag) 45%,transparent);background:color-mix(in srgb,var(--text) 6%,transparent);border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--mag) 55%,var(--line-2))}
.roll{position:relative;display:inline-block;overflow:hidden;line-height:1.15;padding-block:.05em}
.roll>span{display:block;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.roll>.roll-dup{position:absolute;left:0;right:0;top:100%;text-align:center}
.btn:hover .roll>span,.btn:focus-visible .roll>span{transform:translateY(-100%)}
.arrow{display:inline-block;transition:transform .35s cubic-bezier(.2,.9,.25,1.2)}
a:hover .arrow,.btn:hover .arrow{transform:translateX(4px)}

/* ---------- nav pilule ---------- */
.nav{position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:50;width:min(calc(100% - 24px),720px)}
.nav-in{display:flex;align-items:center;gap:8px;padding:6px;border-radius:18px;background:var(--nav-bg);border:1px solid var(--line-2);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 16px 40px -18px rgba(0,0,0,.6)}
.who{display:flex;align-items:center;gap:10px;text-decoration:none;padding-right:6px;border-radius:12px;min-width:0}
.nav-home{display:block;width:42px;height:42px;border-radius:11px;overflow:hidden;flex:none;box-shadow:0 0 0 1px var(--line-2)}
.nav-home img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.who:hover .nav-home img{transform:scale(1.08)}
.status{display:grid;gap:5px;min-width:0}
.status b{display:flex;align-items:center;gap:7px;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.status b i{width:7px;height:7px;border-radius:50%;background:#2fd17a;box-shadow:0 0 0 0 rgba(47,209,122,.5);animation:beat 2.4s ease-out infinite;flex:none}
.status.off b i{background:#8b8b96;animation:none}
.status.meet b i{background:#ff9f2e;animation-name:beat-meet}
@keyframes beat-meet{0%{box-shadow:0 0 0 0 rgba(255,159,46,.55)}70%,100%{box-shadow:0 0 0 7px rgba(255,159,46,0)}}
.status small{display:flex;min-width:0;font:400 12px/1 var(--sans);color:var(--text-3);white-space:nowrap;letter-spacing:.04em}
.status small .city{overflow:hidden;text-overflow:ellipsis;min-width:0}
.status small .time{flex:none}
.head-who{display:flex;align-items:center;gap:10px;min-width:0;margin-right:auto}
.nav-main{margin-left:auto}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(47,209,122,.55)}70%,100%{box-shadow:0 0 0 7px rgba(47,209,122,0)}}
.nav-main{margin-inline:auto}
.nav-links{display:flex;gap:2px;list-style:none;padding:0;margin-block:0}
.nav-links a{position:relative;display:block;padding:11px 12px 9px;border-radius:10px;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--text-2);transition:color .25s,background-color .25s}
.nav-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1.5px;background:var(--mag);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-2);background:transparent;cursor:pointer;flex:none;transition:background-color .25s}
.icon-btn:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.icon-btn svg{width:17px;height:17px}
.nav .btn{min-height:40px;padding:11px 15px 9px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-radius:11px}
.menu-btn{display:none}
.sheet{display:none}

/* bouton de thème : simple icône (soleil en sombre, lune en clair) */
.theme-btn{color:var(--text-2)}
.theme-btn:hover{color:var(--text)}
.theme-btn svg{transition:transform .4s cubic-bezier(.2,.9,.25,1.2)}
.theme-btn:hover svg{transform:rotate(18deg)}
.theme-btn .i-moon,:root[data-theme="light"] .theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-moon{display:block}

@media (max-width:760px){
  .nav-main{display:none}
  .head-who{margin-right:auto}
  .menu-btn{display:grid}
  .sheet{position:fixed;inset:0;z-index:49;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:120px 28px 40px;flex-direction:column;gap:6px}
  .sheet.open{display:flex}
  .sheet a{font:500 34px/1.2 var(--sans);text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}
}
@media (max-width:440px){.nav .btn-primary{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,980px);display:grid;place-items:center;padding:120px 0 72px;overflow:hidden;border-top:0}
.hero::before,.hero::after{display:none}
.hero-glow{position:absolute;left:50%;top:46%;width:min(70vw,720px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(217,3,104,.26),rgba(217,3,104,.07) 45%,transparent 70%);filter:blur(10px);pointer-events:none}
.marquee{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:slide 60s linear infinite}
.marquee-track span{display:flex;align-items:center;gap:.36em;padding-right:.36em;font:500 clamp(64px,10.5vw,136px)/1 var(--sans);letter-spacing:-.02em;text-transform:uppercase;color:var(--marquee);white-space:nowrap}
.marquee-track span::after{content:"";width:.11em;height:.11em;background:currentColor;transform:translateY(-.06em)}
@keyframes slide{to{transform:translateX(-50%)}}
.hero-inner{position:relative;display:grid;justify-items:center;gap:26px;text-align:center;padding-inline:var(--pad)}
/* la statue en couches : 6 copies, de la plus brute (fond) à la finale (devant) */
.statue-stack{position:relative;width:min(56vw,320px);aspect-ratio:3/4}
.statue-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;will-change:transform;transform-origin:50% 60%}
.statue-stack img:not(:last-child){filter:grayscale(1) brightness(1.4);mix-blend-mode:screen}
:root[data-theme="light"] .statue-stack img:not(:last-child){filter:grayscale(1) brightness(.7);mix-blend-mode:multiply}
.statue-stack img:last-child{filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.hero h1{font-size:clamp(26px,3.2vw,34px);font-weight:500;letter-spacing:-.01em}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);text-decoration:none;display:grid;justify-items:center;gap:10px}
.scroll-cue i{width:1px;height:28px;background:linear-gradient(var(--text-3),transparent)}

/* ---------- clients ---------- */
.clients{padding-block:48px}
.logo-row{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-track{display:flex;align-items:center;width:max-content;animation:slide 38s linear infinite;margin:0;padding:0}
.logo-row:hover .logo-track{animation-play-state:paused}
.logo-track li{list-style:none;flex:none;padding-inline:clamp(26px,4vw,48px)}
.logo-track img{height:clamp(38px,4.6vw,54px);width:auto;opacity:.62;filter:var(--logo-filter);transition:opacity .25s,transform .35s}
.logo-track li:hover img{opacity:1;transform:scale(1.06)}
.logo-track img[src$="bloom.svg"]{height:clamp(52px,6.2vw,72px)}

/* ---------- projets : cartes ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:34px}
.search{position:relative;flex:1 1 320px;max-width:460px}
.search svg{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--text-3);pointer-events:none;transition:color .2s}
.search input{width:100%;height:52px;padding:2px 46px 0 46px;border-radius:14px;border:1px solid var(--field-line);background:var(--surface);color:var(--text);font:400 16px/1 var(--sans);outline:none;transition:border-color .25s,box-shadow .25s}
.search input::placeholder{color:var(--text-3)}
.search input:focus{border-color:color-mix(in srgb,var(--mag) 70%,var(--line-2));box-shadow:0 0 0 4px color-mix(in srgb,var(--mag) 18%,transparent)}
.search input:focus~svg{color:var(--mag-ink)}
.search input::-webkit-search-cancel-button{display:none}
.search .clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;border:0;background:none;color:var(--text-2);cursor:pointer;display:grid;place-items:center}
.search .clear:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.count{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:clamp(24px,3vw,32px);list-style:none;margin:0;padding:0}
.empty{padding:48px 0;text-align:center;color:var(--text-2);display:grid;gap:14px;justify-items:center}
.pc{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:18px;background:var(--surface);border:1px solid var(--line);transition:transform .5s cubic-bezier(.2,.9,.25,1.15),border-color .3s}
/* l'empilement des étapes : les couches se déploient derrière la carte au survol */
.pc-stack{position:absolute;inset:-1px;z-index:-1;pointer-events:none}
.pc-stack i{position:absolute;inset:0;border-radius:18px;border:1px solid color-mix(in srgb,var(--mag) calc(20% + var(--k)*12%),var(--line-2));background:var(--surface);opacity:0;transform:translate(0,0);transition:transform .55s cubic-bezier(.2,.9,.25,1.15),opacity .35s}
.pc:hover,.pc:focus-within{transform:translate(6px,-6px);border-color:color-mix(in srgb,var(--mag) 45%,var(--line-2))}
.pc:hover .pc-stack i,.pc:focus-within .pc-stack i{opacity:calc(1 - var(--k)*.22);transform:translate(calc(var(--k)*-7px),calc(var(--k)*7px))}
.pc-media{position:relative;display:grid;aspect-ratio:4/3;border-radius:17px 17px 0 0;overflow:hidden;background:var(--bg-2);container-type:inline-size}
.pc-media .tag{position:absolute;top:12px;right:12px;z-index:4}
.pc-stages{position:relative;z-index:3;display:flex;align-items:center;gap:2px;padding:8px 10px;border-block:1px solid var(--line)}
.st-ico{position:relative;width:38px;height:38px;flex:none;border-radius:10px;border:0;background:none;color:var(--text-3);cursor:pointer;display:grid;place-items:center;transition:color .2s,background-color .2s,transform .3s cubic-bezier(.2,.9,.25,1.3)}
.st-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.st-ico:hover{color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent);transform:translateY(-2px)}
.st-ico[aria-checked="true"]{background:var(--mag);color:#fff}
.st-ico[disabled]{opacity:.35;cursor:default;transform:none;background:none}
.st-ico::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);padding:7px 9px 5px;border-radius:7px;background:var(--text);color:var(--bg);font:500 11px/1 var(--sans);letter-spacing:.08em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s}
.st-ico:hover::after,.st-ico:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.pc-stages.tip-off .st-ico::after{opacity:0}
figure.panel{margin:0}
.pc-stage-name{margin-left:auto;padding-right:4px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
@media (max-width:380px){.st-ico{width:34px}.pc-stage-name{display:none}}
.pc-body{position:relative;display:grid;gap:8px;padding:18px 20px 22px;align-content:start}
.pc-meta{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pc h3{font-size:26px;letter-spacing:-.015em}
.pc h3 a{text-decoration:none}
.pc-card-link{position:absolute;inset:0;z-index:2;border-radius:18px}
.pc-body>p:not(.pc-meta){color:var(--text-2);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-go{position:absolute;right:18px;top:-22px;z-index:3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--mag);color:#fff;box-shadow:0 10px 24px -8px var(--glow);opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .3s,transform .45s cubic-bezier(.2,.9,.25,1.3);pointer-events:none}
.pc:hover .pc-go,.pc:focus-within .pc-go{opacity:1;transform:scale(1) rotate(0)}
.layer{grid-area:1/1;position:relative;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;overflow:hidden;min-height:0}
.layer.on{opacity:1;visibility:visible;transition:opacity .35s}
.layer>.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-3);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.tag{font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px 6px;border-radius:999px;background:rgba(11,12,14,.72);color:#f6f3f0;border:1px solid rgba(246,243,240,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* maquettes réduites à l'échelle d'une carte (cqw = largeur du visuel) */
.pc .stage{gap:3cqw;padding:5cqw}
.pc .phone,.pc .sk-wrap{width:24cqw}
.pc .sk-wrap .phone{width:100%}
.pc .phone{border-radius:3.6cqw;box-shadow:0 0 0 1.5px rgba(10,10,12,.85),0 14px 30px -14px rgba(0,0,0,.6)}
.pc .wf,.pc .sk{padding:2.6cqw 2cqw;gap:1.6cqw}
.pc .stage.notes,.pc .stage.split{flex-direction:row}
.pc .note{max-width:42cqw;padding:3.4cqw;border-radius:2.6cqw;font-size:3.5cqw}
.pc .note cite{font-size:2.3cqw;margin-top:2.2cqw}
.pc .note:nth-child(3){display:none}
.pc .hmw{max-width:86cqw;gap:3cqw}
.pc .hmw small{font-size:2.6cqw}
.pc .hmw p{font-size:6.2cqw}
.pc .result{max-width:46cqw;gap:2.2cqw}
.pc .result b{font-size:10cqw}
.pc .result span{font-size:3.4cqw}
.pc .result small{font-size:2.4cqw}
.pc .sk-note{font-size:3.2cqw}
.pc .tap{width:19cqw;font-size:9cqw}
.pc .phone:nth-child(n+4){display:none}

/* ---------- maquettes de téléphone (partagées avec les études de cas) ---------- */
.stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.4vw,28px);padding:6% 6%}
.phone{position:relative;flex:none;container-type:inline-size;width:clamp(96px,21%,230px);aspect-ratio:252/526;border-radius:clamp(14px,2.2vw,26px);overflow:hidden;background:#fff;box-shadow:0 0 0 2px rgba(10,10,12,.85),0 24px 50px -18px rgba(0,0,0,.6)}
.phone img{width:100%;height:100%;object-fit:cover;transform:scale(1.035)}
.phone.lift{transform:translateY(-5%)}
.phone.drop{transform:translateY(5%)}
@media (max-width:620px){.phone,.sk-wrap{width:30%}.sk-wrap .phone{width:100%}.stage .phone:nth-child(n+4){display:none}}
/* wireframe */
.wf{background:#f4f4f6;box-shadow:0 0 0 1.5px #8a8a97;display:flex;flex-direction:column;gap:clamp(6px,1vw,12px);padding:clamp(14px,2vw,24px) clamp(10px,1.4vw,16px)}
.wf i{display:block;background:#dcdce3;border:1px solid #a3a3ae;border-radius:3px}
.wf .bar{height:4%;width:60%;background:#c9c9d3;border:0}
.wf .img{flex:1.4;background:linear-gradient(to top right,transparent calc(50% - .6px),#a3a3ae calc(50% - .6px),#a3a3ae calc(50% + .6px),transparent calc(50% + .6px)),linear-gradient(to bottom right,transparent calc(50% - .6px),#a3a3ae calc(50% - .6px),#a3a3ae calc(50% + .6px),transparent calc(50% + .6px)),#e6e6ec}
.wf .row{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;flex:1;background:none;border:0}
.wf .row i{height:100%}
.wf .line{height:3%;background:#c9c9d3;border:0}
.wf .line.s{width:70%}
.wf .cta{height:7%;width:70%;align-self:center;border-radius:999px;background:#fff;border:1.5px solid #8a8a97}
/* croquis */
.sk{background:#fbfaf6;box-shadow:0 0 0 1.5px #2b2b33;filter:url(#rough);display:flex;flex-direction:column;gap:clamp(7px,1.1vw,13px);padding:clamp(14px,2vw,24px) clamp(10px,1.4vw,16px)}
.sk i{display:block;border:1.6px solid #2b2b33;border-radius:2px}
.sk .bar{height:4%;width:55%;border-width:0 0 1.6px}
.sk .img{flex:1.2}
.sk .row{display:grid;grid-template-columns:repeat(2,1fr);gap:8%;flex:1;border:0}
.sk .row i{height:100%}
.sk .line{height:0;border-width:0 0 1.6px;width:85%}
.sk .cta{height:7%;width:60%;align-self:center;border-radius:999px}
.sk-cross{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sk-cross line{stroke:#2b2b33;stroke-width:2}
.sk-ring{position:absolute;inset:-7% -10%;width:120%;height:114%;pointer-events:none;overflow:visible}
.sk-ring path{fill:none;stroke:var(--mag);stroke-width:2.6}
.sk-wrap{position:relative;flex:none;width:clamp(96px,21%,230px)}
.sk-wrap .phone{width:100%}
.sk-note{position:absolute;left:50%;bottom:-13%;transform:translateX(-50%) rotate(-2deg);white-space:nowrap;font:italic 300 clamp(12px,1.3vw,15px)/1 var(--slab);color:inherit}
/* test */
.tap{position:absolute;width:clamp(16px,2vw,22px);aspect-ratio:1;border-radius:50%;background:var(--mag);box-shadow:0 0 0 3px rgba(255,255,255,.9);transform:translate(-50%,-50%);display:grid;place-items:center;color:#fff;font:600 10px/1 var(--sans)}
.tap::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--mag);animation:ping 1.8s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(2.6);opacity:0}}
.result{display:grid;gap:12px;max-width:min(42%,300px)}
.result b{font:500 clamp(36px,5vw,60px)/1 var(--sans);letter-spacing:-.03em}
.result span{font-size:clamp(13px,1.4vw,16px);line-height:1.4;opacity:.8}
.result small{font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.75}
@media (max-width:620px){.stage.split{flex-direction:column}.result{max-width:90%;text-align:center}}
/* empathize */
.note{margin:0;position:relative;max-width:min(36%,280px);padding:clamp(14px,2vw,22px);border-radius:12px;font:300 clamp(14px,1.6vw,19px)/1.35 var(--sans);box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
.note cite{display:block;margin-top:12px;font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;opacity:.75}
@media (max-width:620px){.stage.notes{flex-direction:column;gap:12px}.note{max-width:86%}}
/* define */
.hmw{max-width:min(78%,640px);display:grid;gap:16px;text-align:left}
.hmw small{font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.hmw p{font:400 clamp(20px,3vw,38px)/1.15 var(--sans);letter-spacing:-.015em}
.hmw p em{color:var(--mag-hi)}

/* écrans Sillage (projet conceptuel), dessinés en CSS et mis à l'échelle du téléphone */
.sl{background:#f2ead9;color:#0e1d26;display:flex;flex-direction:column;font-family:var(--sans)}
/* le téléphone est le conteneur : les marges en cqw de ses enfants suivent sa largeur */
.sl>*{margin:0 7cqw 4.5cqw}
.sl>:first-child{margin-top:13cqw}
.sl>:last-child{margin-bottom:7cqw}
.sl>.tap{margin:0}
.sl.night{background:#0e1d26;color:#f2ead9}
.sl-k{font:500 5cqw/1.1 var(--sans);letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.sl-h{font:600 10cqw/1 var(--sans);letter-spacing:-.03em}
.sl-field{display:grid;border-radius:4cqw;background:#fff;box-shadow:0 0 0 .5cqw rgba(14,29,38,.12)}
.sl-field span{display:flex;align-items:center;gap:3cqw;padding:4.4cqw 4cqw 3.6cqw;font:500 6cqw/1 var(--sans)}
.sl-field span+span{border-top:.5cqw solid rgba(14,29,38,.1)}
.sl-field span::before{content:"";width:2.6cqw;height:2.6cqw;border-radius:50%;border:.8cqw solid #1f5f6b;flex:none}
.sl-field span+span::before{background:#1f5f6b}
.sl-chips{display:flex;flex-wrap:wrap;gap:2cqw}
.sl-chip{font:500 4.6cqw/1 var(--sans);padding:2.8cqw 3.4cqw 2.2cqw;border-radius:99px;box-shadow:0 0 0 .5cqw rgba(14,29,38,.2)}
.sl-chip.on{background:#0e1d26;color:#f2ead9;box-shadow:none}
.sl-map{flex:1;border-radius:4cqw;background:#dfe9e4;position:relative;overflow:hidden;min-height:0}
.sl-map svg{position:absolute;inset:0;width:100%;height:100%}
.sl-btn{background:#1f5f6b;color:#f2ead9;border-radius:99px;text-align:center;font:600 5.4cqw/1 var(--sans);padding:4.6cqw 0 3.8cqw}
.sl-trip{background:#fff;border-radius:4cqw;padding:4cqw;display:grid;gap:2.4cqw;box-shadow:0 0 0 .5cqw rgba(14,29,38,.08)}
.sl-trip.best{box-shadow:0 0 0 .8cqw #1f5f6b}
.sl-trip .r{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw}
.sl-trip b{font:600 6cqw/1 var(--sans)}
.sl-trip small{font:500 4.4cqw/1 var(--sans);opacity:.6}
.sl-co2{height:2cqw;border-radius:99px;background:rgba(14,29,38,.08);overflow:hidden}
.sl-co2 i{display:block;height:100%;border-radius:99px;background:#1f5f6b}
.sl-trip.bad .sl-co2 i{background:#c4553a}
.sl-badge{justify-self:start;font:600 4cqw/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:#6fe0b0;color:#0e1d26;padding:2cqw 2.6cqw 1.6cqw;border-radius:99px}
.sl-line{display:grid;gap:0;padding-left:5cqw;position:relative}
.sl-line::before{content:"";position:absolute;left:1.4cqw;top:2cqw;bottom:2cqw;width:.8cqw;background:#6fe0b0;border-radius:99px}
.sl-line p{position:relative;padding:3cqw 0;display:grid;gap:1cqw;font:500 5.2cqw/1.1 var(--sans)}
.sl-line p::before{content:"";position:absolute;left:-5.2cqw;top:3.6cqw;width:3.2cqw;height:3.2cqw;border-radius:50%;background:#0e1d26;box-shadow:0 0 0 .8cqw #6fe0b0}
.sl-line small{font:400 4.2cqw/1 var(--sans);opacity:.6}
.sl>.sl-total{margin-top:auto;gap:2cqw}
.sl-total{display:flex;justify-content:space-between;align-items:baseline;border-top:.5cqw solid rgba(242,234,217,.2);padding-top:4cqw}
.sl-total b{font:600 8cqw/1 var(--sans);color:#6fe0b0;white-space:nowrap}
.sl-total small{font:500 4.4cqw/1 var(--sans);opacity:.7}

/* ---------- réussites ---------- */
.awards{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.award{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:8px 32px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .4s cubic-bezier(.2,.8,.2,1)}
.award::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--mag);transition:width .6s cubic-bezier(.7,0,.2,1)}
.award:hover{padding-left:12px}
.award:hover::before{width:100%}
.award time{font:500 14px/1 var(--sans);letter-spacing:.08em;color:var(--text-3);font-variant-numeric:tabular-nums}
.award h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.01em;line-height:1.15}
.award p{color:var(--text-2);margin-top:6px}
.award .lvl{justify-self:end;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px 7px;border-radius:999px;border:1px solid var(--line-2);color:var(--text-2);white-space:nowrap}
@media (max-width:760px){.award{grid-template-columns:1fr}.award .lvl{justify-self:start}}

/* ---------- contact ---------- */
.contact-head{text-align:center;justify-items:center;margin-inline:auto}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.opt{position:relative;overflow:hidden;display:grid;gap:16px;align-content:start;padding:clamp(24px,3.4vw,36px);border-radius:20px;border:1px solid var(--line);background:var(--surface);transition:border-color .3s}
.opt::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--mag) 16%,transparent),transparent 60%);opacity:0;transition:opacity .4s}
.opt:hover{border-color:color-mix(in srgb,var(--mag) 40%,var(--line))}
.opt:hover::before{opacity:1}
.opt>*{position:relative}
.opt-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--mag) 14%,transparent);color:var(--mag-ink)}
.opt-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.opt h3{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.015em}
.opt p{color:var(--text-2)}
.opt .note-s{font-size:13px;color:var(--text-3)}
.slots{display:flex;flex-wrap:wrap;gap:6px}
.slots span{font:500 12px/1 var(--sans);letter-spacing:.06em;padding:9px 11px 7px;border-radius:999px;border:1px solid var(--line-2);color:var(--text-2)}
.form{display:grid;gap:12px}
.field{display:grid;gap:7px}
.field label{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.field input,.field textarea{width:100%;border-radius:12px;border:1px solid var(--field-line);background:var(--bg);color:var(--text);font:400 16px/1.4 var(--sans);padding:13px 14px 11px;outline:none;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:color-mix(in srgb,var(--mag) 70%,var(--line-2));box-shadow:0 0 0 4px color-mix(in srgb,var(--mag) 16%,transparent)}
.field [aria-invalid="true"]{border-color:var(--err)}
.err{font-size:13px;color:var(--err);min-height:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.form-row{grid-template-columns:1fr}}
.form-status{font-size:14px;color:var(--text-2);min-height:20px}
.form-status.ok{color:var(--ok)}
.form-status.ko{color:var(--err)}
.mail{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin-top:26px;font-size:15px;color:var(--text-2)}
.mail code{font-family:var(--mono);font-size:14px;color:var(--text);user-select:all}
.copy{border:0;background:none;color:var(--mag-ink);cursor:pointer;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:10px;border-radius:8px}
.copy:hover{background:color-mix(in srgb,var(--mag) 12%,transparent)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:56px var(--pad) 40px;display:grid;gap:40px}
.foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.foot-logo{width:150px;color:var(--mag)}
.foot-logo svg{width:100%;height:auto;display:block}
.foot p{color:var(--text-3);font-size:14px;max-width:40ch;margin-top:14px}
.foot nav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;text-align:right}
.foot nav a{text-decoration:none;color:var(--text-2);font-size:15px}
.foot nav a:hover{color:var(--text)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-3);border-top:1px solid var(--line);padding-top:22px}
.foot-glow{height:120px;background:radial-gradient(60% 100% at 50% 100%,var(--glow),transparent 70%);margin-top:-60px;pointer-events:none}
@media (max-width:620px){.foot nav ul{text-align:left}}

/* ---------- étude de cas ---------- */
.case-hero{padding:150px var(--pad) 64px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.back{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);text-decoration:none;display:inline-flex;gap:8px;width:max-content}
.back:hover{color:var(--text)}
.case-hero h1{font-size:clamp(48px,8vw,96px);letter-spacing:-.035em}
.case-hero .lede{font-size:clamp(18px,2vw,22px)}
.case-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:18px}
.case-meta div{padding:18px 18px 16px 0;display:grid;gap:6px}
.case-meta dt{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.case-meta dd{margin:0;font-size:15px}
@media (max-width:760px){.case-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
.case-cover{margin:0 var(--pad);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;position:relative}
@media (max-width:620px){.case-cover{aspect-ratio:4/5}}
.case-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,5vw,64px);padding:clamp(64px,9vw,112px) var(--pad);align-items:start}
.toc{position:sticky;top:110px;display:grid;gap:4px}
.toc a{display:flex;align-items:center;gap:12px;padding:8px 0;text-decoration:none;color:var(--text-3);font:500 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;transition:color .2s}
.toc a i{width:8px;height:8px;border:1.5px solid currentColor;flex:none;transition:background .2s,border-color .2s}
.toc a.done{color:var(--text-2)}
.toc a.done i{background:var(--text-3);border-color:var(--text-3)}
.toc a.active{color:var(--text)}
.toc a.active i{background:var(--mag);border-color:var(--mag)}
@media (max-width:620px){.panel>.stage{position:relative;inset:auto}}
@media (max-width:900px){html:has(.toc){scroll-padding-top:150px}.chapter{scroll-margin-top:150px}.toc{scrollbar-width:none}.toc::-webkit-scrollbar{display:none}.case-body{grid-template-columns:1fr}.toc{position:sticky;top:76px;z-index:10;display:flex;overflow-x:auto;gap:14px;padding:12px 14px;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:12px;margin-top:-30px}.toc a{white-space:nowrap;padding:4px 0}}
.panel>.stage{min-height:inherit}
.chapter{display:grid;gap:22px;padding-bottom:clamp(64px,8vw,104px);margin-bottom:clamp(64px,8vw,104px);border-bottom:1px solid var(--line);scroll-margin-top:110px}
.chapter:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.chapter h2{font-size:clamp(32px,4.4vw,48px)}
.chapter h3{font-size:22px;letter-spacing:-.01em;margin-top:10px}
.chapter>p,.chapter>div>p:not([class]){color:var(--text-2);max-width:64ch}
.chapter ul{color:var(--text-2);padding-left:1.1em;margin:0;display:grid;gap:8px;max-width:64ch}
.chapter strong{color:var(--text);font-weight:500}
.panel{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);overflow:hidden;min-height:clamp(260px,40vw,440px)}
.panel.tall{min-height:clamp(380px,56vw,620px)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.card{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--surface);display:grid;gap:10px;align-content:start}
.card h4{font-size:18px;letter-spacing:-.005em}
.card p{font-size:15px;line-height:1.5}
.stat{display:grid;gap:6px}
.stat b{font:500 clamp(36px,4.4vw,52px)/1 var(--sans);letter-spacing:-.03em;color:var(--text)}
.stat span{font-size:14px;color:var(--text-3)}
.quote{margin:0;border-left:2px solid var(--mag);padding:4px 0 4px 20px;font:300 clamp(20px,2.4vw,26px)/1.35 var(--sans);color:var(--text);max-width:52ch}
.quote cite{display:block;margin-top:10px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--text-3)}
.draft{font:500 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);border:1px dashed var(--line-2);border-radius:8px;padding:10px 12px;width:fit-content;max-width:100%}
.next{display:grid;gap:14px;justify-items:center;text-align:center;padding:clamp(64px,9vw,112px) var(--pad)}
.next a.big{font:500 clamp(40px,7vw,80px)/1 var(--sans);letter-spacing:-.03em;text-decoration:none}
.next a.big:hover{color:var(--mag-hi)}

/* ---------- projets sur mobile : les cartes s'empilent au défilement ---------- */
.skip-cards{display:none}
@media (max-width:760px){
  .cards{display:block}
  .cards>li{position:sticky;top:calc(84px + min(var(--i,0),4)*10px);margin-bottom:28px}
  .cards>li:last-child{margin-bottom:0}
  .cards .pc{box-shadow:0 -18px 40px -22px rgba(0,0,0,.7);transform:scale(calc(1 - var(--p,0)*.06));transform-origin:50% 0;transition:border-color .3s}
  .cards .pc::after{content:"";position:absolute;inset:-1px;z-index:6;border-radius:18px;background:var(--bg);opacity:calc(var(--p,0)*.55);pointer-events:none}
  .skip-cards{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:8px;padding:12px 18px 11px;border-radius:999px;background:var(--text);color:var(--bg);font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);transform:translate(-50%,0);transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.25,1.2)}
  .skip-cards svg{animation:nudge 1.6s ease-in-out infinite}
  .skip-cards.away{opacity:0;transform:translate(-50%,24px);pointer-events:none}
}
@keyframes nudge{50%{transform:translateY(3px)}}

/* ---------- apparition douce ---------- */
.reveal{transition:opacity .7s ease,transform .7s ease}
.js .reveal.pending{opacity:0;transform:translateY(18px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .marquee-track,.logo-track{transform:none}
  .js .reveal.pending{opacity:1;transform:none}
}

/* visuels importés depuis l'admin (images) */
.panel.has-img{min-height:0}
.panel.has-img img{width:100%;height:auto;display:block}
.case-cover.has-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- gabarits d'étape saisis dans l'admin (rendu partagé : renderStage dans site.js) ---------- */
/* Empathize : post-it */
.layer.tpl-postits,.panel.tpl-postits{background:radial-gradient(90% 80% at 30% 20%,#3a2a3e,#1a1620 70%);color:#f6f3f0}
.tpl-postits .note{color:#1f1a10;transform:rotate(var(--rot,0deg)) translateY(var(--dy,0%))}
.note.pi-jaune{background:#ffe27a}
.note.pi-rose{background:#ffd0dc}
.note.pi-blanc{background:#f6f3f0}
.note.pi-sable{background:#f2ead9}
.note.pi-vert{background:#6fe0b0}
.note.pi-bleu{background:#bfe0ff}
.note.pi-orange{background:#ffc48a}
.note-t{white-space:pre-line}
.panel.tpl-postits{min-height:clamp(260px,34vw,420px)}
.panel.tpl-postits>.stage{position:relative;inset:auto;flex-wrap:wrap;align-content:center;padding:clamp(28px,5vw,56px);gap:clamp(18px,2.6vw,30px)}
.panel.tpl-postits .note{flex:0 1 clamp(170px,27%,260px);max-width:none}
@media (max-width:620px){
  .panel.tpl-postits>.stage{flex-direction:row;padding:28px 22px}
  .panel.tpl-postits .note{flex:0 1 100%;max-width:340px}
}
.pc .tpl-postits .stage.notes{flex-direction:row;flex-wrap:nowrap;gap:2.6cqw;padding:5cqw 4cqw}
.pc .tpl-postits .note{flex:0 1 auto;min-width:0}
.pc .tpl-postits .note:nth-child(3){display:block}
.pc .tpl-postits .note:nth-child(n+4){display:none}
.pc .tpl-postits [data-n="1"] .note{max-width:62cqw;padding:4.4cqw;font-size:4.8cqw}
.pc .tpl-postits .note cite{font-size:max(8px,2.3cqw)}
.pc .tpl-postits [data-n="1"] .note cite{font-size:max(8px,2.6cqw)}
.pc .tpl-postits .stage[data-n="3"]{gap:1.6cqw}
.pc .tpl-postits [data-n="3"] .note{max-width:31cqw;padding:2.8cqw;border-radius:2cqw;font-size:3cqw}
.pc .tpl-postits [data-n="3"] .note cite{font-size:max(8px,2cqw);margin-top:1.8cqw}
.pc .tpl-postits .note-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}

/* Define : un ou plusieurs problèmes */
.layer.tpl-problems,.panel.tpl-problems{background:var(--bg-2);color:var(--text)}
.stage.problems{flex-direction:column;align-items:stretch;justify-content:center;gap:clamp(18px,3vw,32px)}
.stage.problems .hmw{width:100%;margin-inline:auto}
.stage.problems .hmw+.hmw{padding-top:clamp(18px,3vw,32px);border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.panel.tpl-problems>.stage{position:relative;inset:auto;padding:clamp(36px,6vw,72px) clamp(20px,5vw,56px)}
.panel .stage.problems:not([data-n="1"]) .hmw p{font-size:clamp(19px,2.3vw,28px)}
@media (max-width:620px){.panel .stage.problems .hmw{max-width:100%}}
.pc .stage.problems{gap:3cqw;padding:6cqw 7cqw}
.pc .stage.problems .hmw{max-width:none}
.pc .stage.problems .hmw small{font-size:max(8px,2.6cqw)}
.pc .stage.problems .hmw:nth-child(n+4){display:none}
.pc .stage.problems .hmw p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.pc .stage.problems .hmw+.hmw{padding-top:3cqw}
.pc .stage.problems[data-n="2"] .hmw{gap:1.8cqw}
.pc .stage.problems[data-n="2"] .hmw p{font-size:4.4cqw;-webkit-line-clamp:3}
.pc .stage.problems[data-n="3"]{gap:2cqw}
.pc .stage.problems[data-n="3"] .hmw{gap:1.3cqw}
.pc .stage.problems[data-n="3"] .hmw+.hmw{padding-top:2cqw}
.pc .stage.problems[data-n="3"] .hmw small{font-size:max(8px,2.1cqw)}
.pc .stage.problems[data-n="3"] .hmw p{font-size:3.5cqw;-webkit-line-clamp:2}

/* Test : écran testé + points de mesure */
.layer.tpl-test,.panel.tpl-test{background:var(--surface-2);color:var(--text);container-type:size}
.panel.tpl-test{aspect-ratio:16/10;min-height:0}
@media (max-width:620px){.panel.tpl-test{aspect-ratio:4/5}}
.hs-fit{position:absolute;inset:0;display:grid;place-items:center;--hs-pad:clamp(10px,6cqh,40px)}
/* le cadre a exactement le ratio de l'image (--hs-ratio posé en JS) : les x/y en % tombent juste */
.hs-box{--hs-ratio:.75;position:relative;aspect-ratio:var(--hs-ratio);width:min(calc(100cqw - 2 * var(--hs-pad)),calc((100cqh - 2 * var(--hs-pad)) * var(--hs-ratio)));border-radius:clamp(8px,2.2cqw,18px);box-shadow:0 0 0 1px var(--line-2),0 18px 40px -18px rgba(0,0,0,.6)}
.hs-box:not(.hs-ready)>.hs-dot,.hs-box:not(.hs-ready)>.hs-pop{visibility:hidden}
.hs-box>.hs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.hs-dot{position:absolute;z-index:3;width:clamp(18px,5.4cqw,26px);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:var(--mag);color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.92),0 6px 14px -4px rgba(0,0,0,.5);transform:translate(-50%,-50%);display:grid;place-items:center;font:600 clamp(9px,2.6cqw,12px)/1 var(--sans);cursor:pointer;transition:transform .25s cubic-bezier(.2,.9,.25,1.3)}
/* zone de survol élargie : elle touche la bulle, le pointeur peut y passer sans la fermer */
.hs-dot::before{content:"";position:absolute;inset:-14px;border-radius:50%}
.hs-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--mag);animation:ping 1.8s ease-out infinite;pointer-events:none}
.hs-dot span{padding-top:.12em}
.hs-dot:hover,.hs-dot.is-open{transform:translate(-50%,-50%) scale(1.15)}
/* anneau blanc + anneau sombre + contour magenta : visible sur n'importe quelle capture, dans les deux thèmes */
.hs-dot:focus-visible{outline:2px solid var(--mag-hi);outline-offset:6px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 6px #1f1a10,0 6px 14px -4px rgba(0,0,0,.5)}
.hs-pop{--dot:clamp(9px,2.7cqw,13px);--tx:calc(var(--dot) + 10px);--ty:-18px;position:absolute;z-index:5;width:clamp(150px,54cqw,270px);padding:clamp(10px,3.2cqw,16px);border-radius:clamp(10px,2.6cqw,14px);background:var(--surface);color:var(--text);border:1px solid var(--line-2);box-shadow:0 18px 40px -14px rgba(0,0,0,.55);font:400 clamp(11px,3.3cqw,14px)/1.4 var(--sans);text-align:left;max-height:calc(100cqh - 12px);overflow:auto;overscroll-behavior:contain;pointer-events:none;opacity:0;visibility:hidden;transform:translate(calc(var(--tx) + var(--dx,0px)),calc(var(--ty) + var(--dy,0px)));transition:opacity .2s,visibility 0s .2s}
.hs-pop.hs-left{--tx:calc(-100% - var(--dot) - 10px)}
.hs-pop.hs-up{--ty:calc(-100% + 18px)}
/* cadre étroit : bulle centrée au-dessus ou en dessous du point (classe posée par placePop) */
.hs-pop.hs-v{--tx:-50%;--ty:calc(var(--dot) + 10px)}
.hs-pop.hs-v.hs-up{--ty:calc(-100% - var(--dot) - 10px)}
/* visibility:inherit : une bulle ouverte reste cachée si sa couche de carte l'est */
/* la bulle reste ouverte tant qu'elle est survolée (lecture, sélection du texte) */
@media (hover:hover){.hs-dot:hover:not(.hs-quiet)+.hs-pop,.hs-dot:not(.hs-quiet)+.hs-pop:hover{opacity:1;visibility:inherit;pointer-events:auto;transition:opacity .2s}}
.hs-dot:focus-visible:not(.hs-quiet)+.hs-pop,.hs-dot.is-open+.hs-pop{opacity:1;visibility:inherit;transition:opacity .2s}
.hs-dot.is-open+.hs-pop{pointer-events:auto}
.hs-pop p{margin:0}
.hs-big{display:block;font:500 clamp(24px,9cqw,42px)/1 var(--sans);letter-spacing:-.03em;color:var(--mag-ink)}
.hs-big+.hs-cap{margin-top:.45em}
.hs-cap{color:var(--text-2)}
.hs-pie-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(8px,2.6cqw,14px)}
.hs-pie-row .hs-cap{flex:1 1 110px;min-width:0}
.hs-donut{position:relative;flex:none;width:clamp(50px,17cqw,78px)}
.hs-donut svg{display:block;width:100%;height:auto}
.hs-donut circle{fill:none;stroke-width:6}
.hs-pie-track{stroke:color-mix(in srgb,var(--text) 14%,transparent)}
.hs-pie-arc{stroke:var(--mag)}
.hs-donut b{position:absolute;inset:0;display:grid;place-items:center;padding-top:.12em;font:600 clamp(10px,3.1cqw,14px)/1 var(--sans);white-space:nowrap}
.hs-title{font-weight:500;margin-bottom:.6em}
.hs-bars{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
.hs-bars li{display:grid;gap:.3em}
.hs-bar-l{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.92em;color:var(--text-2)}
.hs-bar-l b{color:var(--text);font-weight:600;white-space:nowrap}
.hs-track{display:block;height:clamp(5px,1.6cqw,8px);border-radius:99px;background:color-mix(in srgb,var(--text) 12%,transparent);overflow:hidden}
.hs-track i{display:block;height:100%;border-radius:inherit;background:var(--mag)}
.hs-quote{border-left:2px solid var(--mag);padding-left:.8em;font-weight:300;font-size:1.05em;line-height:1.4}
.pc .hs-bars li:nth-child(n+5){display:none}
.pc .hs-cap,.pc .hs-quote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}