/* Homepage shell, moved out of the inline style blocks.
   Color aliases stay in tokens.css and are not reset here. */
:root{--cw:clamp(260px,calc((92vw - 36px)/3.7),340px)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--p2);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--p);padding:8px 14px;border-radius:6px}.skip:focus{left:8px;color:#f3efe6;-webkit-text-fill-color:#f3efe6}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:36px;padding:14px 4vw;background:linear-gradient(180deg,#07050cf2 0%,#07050c99 60%,transparent 100%);transition:background .3s,box-shadow .3s}
.nav.solid{background:#07050cf6;box-shadow:0 1px 0 rgba(243,239,230,.22);backdrop-filter:blur(10px)}
.logo{font-weight:700;font-size:1.65rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px;text-shadow:none}
.logo em{font-style:normal;background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.badge{font-size:.56rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:linear-gradient(90deg,var(--violet-deep),var(--pink-deep));padding:2px 7px;border-radius:999px;text-shadow:none}
.links{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.links a,.links .hp-nav{position:relative;text-decoration:none;color:var(--mu);font-size:.95rem;font-weight:500;transition:color .2s;padding:6px 0;background:transparent;border:0;font-family:inherit;cursor:pointer}
.links .hp-nav:hover,.links a:hover,.links a[aria-current="page"]{color:var(--ink)}
.links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--violet-deep),var(--pink-deep));box-shadow:none}
.right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-icon-btn{background:none;border:0;color:var(--ink);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;transition:background .2s}
.nav-icon-btn:hover{background:#ffffff14}
.nav-icon-btn svg{width:21px;height:21px}
.lang{background:#120c1dcc;color:var(--tx);border:1px solid rgba(109,40,217,.33);border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:700;cursor:pointer}
.avatar{width:40px;height:40px;border-radius:50%;border:2px solid var(--violet-deep);display:grid;place-items:center;font-weight:700;color:var(--ink);box-shadow:none;transition:transform .2s}
.avatar:hover{transform:scale(1.06)}

/* hero */
/* 700px, not a viewport-height unit. vh/svh/dvh/lvh follow Chrome Android's
   address bar, so object-fit:cover zooms the photo and its veil. */
.hero{position:relative;isolation:isolate;min-height:700px;display:flex;align-items:center;padding:100px 4vw 90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(70% 90% at 75% 40%,rgb(from var(--violet) r g b / 0.4),transparent 70%),#07050c}
/* Empty/spotlight-pending: dark gradient only (no legacy fallback image). */
.hero-bg--fallback{background:radial-gradient(70% 90% at 75% 40%,rgb(from var(--violet) r g b / 0.4),transparent 70%),#07050c}
.hero-bg .hero-media{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:100%;min-height:0;object-fit:cover;object-position:72% center;z-index:0;pointer-events:none}
.hero-bg .hero-media--art{object-position:58% 42%}
/* AA veil over featured art so hero copy stays readable on ultrawide */
.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#07050c 0%,#07050cf5 22%,#07050cc8 42%,#07050c66 62%,#07050c28 78%,transparent 92%),linear-gradient(0deg,#07050c 0%,#07050c00 34%),linear-gradient(180deg,#07050cc4 0%,transparent 24%)}
.hero-c{max-width:620px;position:relative;z-index:2}
.tag{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 14px;text-shadow:none;font-family:var(--font-ui)}
.hero .slogan{font-family:"Playfair Display","Didot","Bodoni MT",Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.01em;margin:0 0 18px;color:var(--ink);text-shadow:none}
.lead{font-size:1.08rem;color:var(--ink);margin:0 0 16px;line-height:1.45;max-width:520px}
.hero p.d{font-size:.98rem;color:var(--mu);margin:0 0 26px;line-height:1.55;max-width:520px}
.hero .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 16px;font-size:.88rem;color:var(--ink)}
.hero .meta span:not(.pub)+span:not(.pub)::before{content:"·";margin-right:8px;color:var(--mu)}
.hero .meta .pub{margin-left:8px;border:1px solid var(--p2);color:var(--ink);background:rgb(from var(--violet) r g b / 0.1216);padding:3px 12px;border-radius:7px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:none}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:13px 30px;font-weight:500;font-size:1rem;letter-spacing:.02em;transition:transform .2s,box-shadow .2s,background .2s;font-family:var(--font-ui)}
.btn:hover{transform:translateY(-2px)}
.btn.play{background:linear-gradient(90deg,var(--pink-deep),var(--violet-deep));color:var(--ink);box-shadow:0 6px 24px rgb(from var(--pink) r g b / 0.4),0 0 0 1px #ffffff22 inset}
.btn.play:hover{box-shadow:0 8px 26px rgb(from var(--pink-deep) r g b / 0.45)}
.btn.info{background:#07050c66;color:var(--ink);border:1.5px solid #ffffffaa;backdrop-filter:blur(8px)}
.btn.info:hover{background:#ffffff14;border-color:var(--ink)}
.btn svg{width:18px;height:18px}
.hero-dots{display:flex;gap:8px;justify-content:center;position:absolute;bottom:44px;left:50%;transform:translateX(-50%);z-index:3}
.hero-dots i{display:block;width:9px;height:9px;border-radius:50%;background:#ffffff40}
.hero-dots i.active{background:linear-gradient(90deg,var(--violet-deep),var(--pink-deep));width:24px;border-radius:5px;box-shadow:none}

/* rows */
main{position:relative;margin-top:-34px;padding-bottom:50px;z-index:2}
.row{margin:0 0 14px}
.row-header{display:flex;justify-content:space-between;align-items:baseline;margin:0 4vw 0}
.row h2{font-size:1.5rem;margin:0;font-weight:700;letter-spacing:-.01em;font-family:var(--font-heading)}
.row-all-link{font-size:.85rem;color:var(--mu);text-decoration:none;font-weight:500;transition:color .2s}
.row-all-link:hover{color:var(--ink)}
.rw{position:relative}
.track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 4vw 20px;scrollbar-width:none;scroll-padding:0 4vw}.track::-webkit-scrollbar{display:none}
.arrow{position:absolute;top:14px;bottom:20px;width:4vw;min-width:40px;border:0;background:#07050cd8;color:var(--ink);z-index:12;font-size:2rem;opacity:.85;transition:opacity .2s,background .2s;display:grid;place-items:center}@media(hover:hover){.arrow{opacity:0}.rw:hover .arrow,.rw:focus-within .arrow{opacity:1}}
.arrow:hover{background:#120c1d}
.rw:hover .arrow,.arrow:focus-visible{opacity:1}.arrow[hidden]{display:none}.arrow.l{left:0}.arrow.r{right:0}

.art{position:relative;overflow:hidden;display:flex;align-items:flex-end;aspect-ratio:16/9;padding:12px;background-size:cover;background-position:center;background-repeat:no-repeat}
.art::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,#07050ceb 0%,#07050ca6 20%,#07050c40 34%,transparent 44%)}
.art>*{position:relative;z-index:1}
.art b{font-weight:800;text-shadow:0 2px 10px #000,0 0 4px #000a}

.card,.soon-card{flex:0 0 var(--cw);scroll-snap-align:start;position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--card);border:1px solid #ffffff1a;padding:0;text-align:left;transform-origin:center}
.card{cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.card:first-child{transform-origin:left}
.card .art,.soon-card .art{display:flex;padding:12px 14px 11px}
.cap{display:flex;flex-direction:column;gap:2px;width:100%}
.cap b{text-transform:uppercase;font-size:1.12rem;letter-spacing:.03em;line-height:1.1;overflow-wrap:anywhere;hyphens:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--display)}
.cap small{font-size:.76rem;color:var(--ink);line-height:1.25;max-width:90%;text-shadow:0 1px 6px #000,0 0 3px #000}
.cbot{display:flex;align-items:center;gap:9px;margin-top:7px}
.mini{width:26px;height:26px;border-radius:50%;border:1.5px solid #ffffffd8;background:#07050c99;color:var(--ink);display:grid;place-items:center;flex:none}
.mini svg{width:10px;height:10px;margin-left:2px}
.pbar{flex:1;height:4px;border-radius:99px;background:#ffffff38;overflow:hidden;display:block}
.prog{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet-deep),var(--pink-deep));box-shadow:none}
.pct{font-style:normal;font-size:.74rem;font-weight:700;color:var(--ink);min-width:38px;text-align:right;text-shadow:0 1px 4px #000;white-space:nowrap}
.card:hover,.card:focus-visible{transform:scale(1.05);z-index:10;border-color:transparent;box-shadow:0 16px 36px #000d,0 0 0 2px var(--p2)}
.soon-card{cursor:default;opacity:1;filter:saturate(.55) brightness(.85)}
.soon-card .art>.soon{position:absolute;top:8px;right:8px;z-index:2;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:#07050cd0;border:1px solid rgba(109,40,217,.45);border-radius:999px;padding:3px 8px}
.empty{margin:20px 4vw;padding:40px;border:1px dashed #ffffff30;border-radius:12px;color:var(--mu);text-align:center}

footer{padding:36px 4vw calc(44px + 16px + 12px);color:var(--mu);font-size:.85rem;border-top:1px solid #ffffff12;background:#050308}

/* overlays */
.ov{position:fixed;inset:0;z-index:100;display:none;backdrop-filter:blur(8px)}.ov.open{display:flex}
#profiles{background:#07050cf6;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:20px}
#profiles h1{font-size:clamp(1.8rem,5vw,3rem);font-weight:700;margin:0;letter-spacing:-.02em;font-family:"Playfair Display",Georgia,serif;text-shadow:none}
.plist{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0}
.pf{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--mu);position:relative}
.pf .sq{width:min(26vw,120px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:3rem;font-weight:800;color:var(--ink);border:3px solid transparent;box-shadow:0 8px 24px #0008;transition:transform .2s,border-color .2s,box-shadow .2s}
.pf:hover .sq,.pf:focus-visible .sq{border-color:var(--ink);transform:scale(1.05);box-shadow:0 8px 24px #0008}.pf:hover,.pf:focus-visible{color:var(--ink)}
.pf.add .sq{background:transparent;border:2px dashed #ffffff40;color:var(--mu)}
.del{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;border:0;background:var(--pk);font-weight:800;color:var(--ink);box-shadow:0 2px 8px #0008}
.ghost{background:none;border:1px solid #ffffff40;color:var(--mu);padding:10px 24px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;font-weight:700;transition:background .2s,color .2s}
.ghost:hover{background:#ffffff10;color:var(--tx)}
.newp[hidden]{display:none}.newp{display:flex;gap:10px}.newp input{background:var(--bg2);border:1px solid #ffffff30;color:var(--tx);border-radius:999px;padding:12px 18px;font:inherit;width:260px}.newp input:focus{border-color:var(--ink)}

#modal{background:#000000d8;align-items:flex-start;justify-content:center;overflow:auto;padding:6vh 16px}
.mbox{background:var(--bg2);border-radius:16px;width:min(850px,100%);overflow:hidden;position:relative;box-shadow:0 24px 80px #000c;border:1px solid rgba(109,40,217,.2)}
.mbox .art{aspect-ratio:16/7;padding:32px}.mbox .art b{font-size:clamp(1.8rem,4vw,2.8rem);font-family:"Playfair Display",Georgia,serif;text-shadow:0 2px 12px #000}
.mbody{padding:24px 32px 36px;line-height:1.55}
.mbody .meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-size:.85rem;color:var(--mu)}.mbody .meta span{background:#ffffff10;border:1px solid #ffffff20;padding:4px 10px;border-radius:999px}.mbody .meta span.niveau-source{flex:1 1 100%;border-radius:12px;text-align:left;line-height:1.45}
.x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:#07050ccc;color:var(--ink);font-size:1.2rem;display:grid;place-items:center;transition:background .2s}
.x:hover{background:#2a1c40}

#player{background:#000;flex-direction:column}
#player iframe{flex:1;border:0;width:100%}
.pback{position:absolute;top:16px;left:16px;z-index:2;background:#07050cc4;border:1px solid #ffffff30;color:var(--ink);border-radius:999px;padding:10px 20px;font-weight:700;backdrop-filter:blur(8px);transition:background .2s}
.pback:hover{background:#2a1c40}

.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 20px}
.pathb{display:flex;flex-direction:column;gap:4px;text-align:left;background:#ffffff08;border:1px solid #ffffff18;border-radius:12px;padding:14px 16px;transition:background .2s,border-color .2s}
.pathb:hover{background:#ffffff14;border-color:var(--ink)}.pathb strong{font-size:1rem;display:flex;align-items:center;gap:8px}.pathb span{font-size:.82rem;color:var(--mu)}
.pathb.first{background:linear-gradient(135deg,var(--pink-deep),var(--violet-deep));color:var(--ink);border-color:transparent;box-shadow:0 4px 18px rgb(from var(--violet) r g b / 0.3333)}.pathb.first span{color:var(--ink)}.pathb .ok{color:#4ade80;font-weight:800;margin-left:auto;font-style:normal}
.bar{height:6px;background:#ffffff15;border-radius:99px;overflow:hidden;margin:8px 0 16px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet-deep),var(--pink-deep));border-radius:99px}
#end{background:#07050cf6;align-items:center;justify-content:center;padding:20px}
.ebox{background:var(--bg2);border-radius:18px;width:min(560px,100%);padding:36px;text-align:center;box-shadow:0 24px 80px #000c;border:1px solid rgba(109,40,217,.25)}
.ebox h2{font-size:2.3rem;margin:0 0 8px;font-family:"Playfair Display",Georgia,serif;color:var(--ink);text-shadow:none}
.ebox .btns{justify-content:center;margin-top:18px}
.next{display:flex;gap:14px;align-items:center;text-align:left;margin:20px 0 6px;background:#ffffff08;border-radius:12px;padding:12px;width:100%;border:1px solid #ffffff18;transition:background .2s,border-color .2s}
.next:hover{background:#ffffff14;border-color:var(--ink)}
.next .art{width:120px;flex:none;padding:8px;border-radius:8px}.next .art b{font-size:.8rem;text-transform:uppercase}
.note{font-size:.82rem;color:var(--mu);margin-top:14px}

@media (max-width:760px){
 :root{--cw:74vw}
 .links,.nav-icon-btn{display:none}
 .nav{gap:12px;padding:12px 4vw}
 .logo{font-size:1.35rem}
 .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:0}
 .hero-bg{position:relative;inset:auto;flex:none;height:clamp(280px,82vw,440px)}
 .hero-bg .hero-media{object-position:72% center}
 .hero-bg .hero-media--art{object-position:55% 40%}
 .hero-bg::after{background:linear-gradient(0deg,#07050ce8 0%,#07050c66 42%,#07050c00 62%),linear-gradient(180deg,#07050cd0 0%,transparent 30%)}
 .hero-c{padding:0 5vw 10px;margin-top:-90px;max-width:none}
 .hero .slogan{font-size:clamp(2.3rem,11vw,3.2rem)}
 .hero-dots{position:static;transform:none;margin:14px auto 20px}
 main{margin-top:0}
 .card:hover,.card:focus-visible{transform:none}
 .arrow{display:none}
 .btn{padding:11px 22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.card:hover,.card:focus-visible{transform:none}}
.logo{min-height:44px}.logo-img{display:block;width:200px;min-width:200px;height:auto}
.art>.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.art>.cap{position:relative;z-index:1}.shots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.shots img{width:100%;height:auto;border-radius:8px;border:1px solid #ffffff1a;display:block}
.card .art{position:relative}.agebadge{position:absolute;top:8px;left:8px;z-index:2;background:var(--violet-deep);color:var(--ink);font:700 14px/1.2 var(--font-ui);padding:4px 9px;border-radius:999px;letter-spacing:.02em;box-shadow:none;pointer-events:none;white-space:nowrap}/*audit-ux D-106*/.sbadge{display:inline-block;background:linear-gradient(135deg,var(--pink-deep),var(--violet-deep));color:var(--ink);font-size:14px;font-weight:700;letter-spacing:.05em;padding:2px 6px;border-radius:999px;margin-top:2px;align-self:flex-start}.obj{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.76rem;color:var(--ink);line-height:1.25;text-shadow:0 1px 6px #000,0 0 3px #000}.dur{font-size:.72rem;color:var(--muted);margin-top:2px}.esum{font-size:.9rem;color:var(--ink);margin:12px 0 16px;line-height:1.5}.erev{font-size:.88rem;color:var(--ink);margin:24px 0 16px;line-height:1.4}.qfilters{display:flex;flex-wrap:wrap;gap:8px;padding:0 4vw 16px}.qf{background:#07050c66;color:var(--ink);border:1.5px solid #ffffffaa;backdrop-filter:blur(8px);border-radius:999px;padding:6px 14px;font-size:.82rem;font-weight:500;transition:all .2s}.qf[aria-pressed='true']{background:linear-gradient(90deg,var(--pink-deep),var(--violet-deep));border-color:transparent;box-shadow:0 0 0 1px #ffffff22 inset}.qf:hover{background:#ffffff14;border-color:var(--ink)}.qf[aria-pressed='true']:hover{box-shadow:0 8px 26px rgb(from var(--pink-deep) r g b / 0.45)}.starthere .track{padding-left:4vw;padding-right:4vw}.esumt{font-size:.8rem;color:var(--mu);margin:14px 0 4px;text-transform:uppercase;letter-spacing:.06em}.esum{list-style:none;padding:0;margin:0 0 14px}.esum li{margin:2px 0}.ebox .btns.ecta .btn.play{flex:1 1 0;min-width:0;justify-content:center}@media (max-width:520px){.ebox .btns.ecta{flex-direction:column}.ebox .btns.ecta .btn.play{width:100%}}.starthere .shint{margin:4px 4vw 8px}.cap .sbadge{margin:3px 0}

/* Playfair Display is self-hosted from /css/tokens.css */

html{scroll-padding-top:88px}
[hidden]{display:none!important}

/* 1. crisp serif slogan + separate halo */
.hero .slogan{font-family:var(--serif);font-synthesis:none;line-height:1.04;letter-spacing:-.01em;text-wrap:balance;position:relative;isolation:isolate;text-shadow:none}
#profiles h1::before,.ebox h2::before,.mbox .art b::before,.logo::before{content:none;display:none}

/* 3. other headings */
#profiles h1,.ebox h2{font-family:var(--serif);font-synthesis:none;position:relative;isolation:isolate;text-shadow:0 1px 0 #07050c99}
.mbox .art b{font-family:var(--serif);font-synthesis:none;isolation:isolate;text-shadow:0 1px 2px #000a,0 2px 14px #0008}
.tag{text-shadow:none;color:var(--ink);font-size:13px}
.logo{position:relative;isolation:isolate;text-shadow:none}
.logo::before{content:none;display:none}

/* 4-6. action gradient, skip, badge */
.btn.play{background:linear-gradient(90deg,var(--act1),var(--act2));box-shadow:0 6px 20px rgb(from var(--pink-deep) r g b / 0.3333),0 0 0 1px #ffffff22 inset}
.btn.play:hover{box-shadow:0 8px 26px rgb(from var(--pink-deep) r g b / 0.5333)}
.pathb.first{background:linear-gradient(135deg,var(--act1),var(--act2))}
.pathb.first span,.pathb.first .ok{color:var(--ink)}
.skip{background:var(--act2);color:#f3efe6;-webkit-text-fill-color:#f3efe6;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.badge{font-size:14px;padding:2px 8px;background:linear-gradient(90deg,var(--act2),var(--act3))}

/* 7-8 */
.soon-card .art>.soon{font-size:12px;border-color:var(--ink)}
.row-header{align-items:center}
.row-all-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}
.row-all-link:hover{text-decoration:underline}

/* 9. micro text */
.cap small{font-size:14px}
.pct{font-size:13px}
.hero .meta .pub{font-size:13px}
.pathb span,.note,.mbody .meta,footer,.ghost,.lang,.next small{font-size:14px}

/* 10. progress */
.pbar,.bar{height:6px;background:#ffffff26}
.prog,.bar i{background:linear-gradient(90deg,var(--violet-deep),var(--pink-deep));box-shadow:none}

/* 11-13 */
.nav-icon-btn{width:44px;height:44px}
.hero-dots{display:none}
.soon-card{opacity:1}
.soon-card .cbot{display:none}
.soon-card .art::after{background:linear-gradient(0deg,#07050ceb 0%,#07050ca6 20%,#07050c40 34%,transparent 44%),#07050c59}

/* 16. targets */
.lang{min-height:44px;min-width:44px;border:1.5px solid var(--p2)}
.avatar{width:44px;height:44px;font-size:20px;font-weight:700}
.x{width:44px;height:44px}
.arrow{min-width:44px}
.pback,.ghost{min-height:44px}
.del{width:32px;height:32px;top:-8px;right:-8px;background:var(--act1)}
.del::before{content:'';position:absolute;inset:-6px;border-radius:50%}
.links a{padding:12px 0}

/* 17. extensible cards */
.card .art,.soon-card .art{aspect-ratio:auto;min-height:calc(var(--cw)*.5625)}

/* 19. meta separators */
.hero .meta span:not(.pub)+span:not(.pub)::before{content:none}
.hero .meta span:not(.pub):has(+span:not(.pub))::after{content:'\00B7';margin-left:8px;color:var(--mu)}

/* 21. line-height */
.lead,.hero p.d,.mbody{line-height:1.5}
footer{line-height:1.6}footer .legal{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}footer .legal a{color:var(--mu);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;display:inline-flex;align-items:center;min-height:24px;min-width:24px;padding:4px 2px;border-radius:4px}footer .legal a:hover{color:var(--ink);text-decoration-thickness:2px}footer .legal a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;color:var(--ink)}

@media (max-width:760px){.cap small{font-size:13px}}

/* 20. fallbacks */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.logo em{background:none;color:var(--ink)}}
@media (forced-colors:active){.logo em{background:none;color:LinkText;-webkit-text-fill-color:LinkText}#profiles h1::before,.ebox h2::before,.mbox .art b::before,.logo::before{display:none}.btn.play,.pathb.first,.badge,.skip,.del{border:2px solid ButtonText}}

/* 22. reduced motion */
@media (prefers-reduced-motion:reduce){.btn:hover,.avatar:hover,.pf:hover .sq,.pf:focus-visible .sq{transform:none}}
.rating{font-size:.85rem;color:var(--mastered);display:block}#rate{margin-top:20px}.stars{display:flex;gap:6px;justify-content:center}.star{min-width:44px;min-height:44px;font-size:28px;background:none;border:0;color:var(--faint);cursor:pointer;transition:color .2s}.star:hover,.star:focus-visible{color:var(--mastered)}.star:hover~.star{color:var(--faint)}@media(prefers-reduced-motion:reduce){.star{transition:none}}#fb{margin-top:8px}#fb .fbg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}#fb .fbc{min-width:44px;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border-radius:12px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:inherit;font:inherit;font-size:.9rem;cursor:pointer}#fb .fbc .fbe{font-size:1.6rem}#fb .fbc:hover,#fb .fbc:focus-visible{border-color:var(--mastered);outline:3px solid var(--mastered);outline-offset:2px}

/* CLS : réserve la place des rangées rendues en JS (le footer ne saute plus) */
#rows{min-height:100vh;min-height:100svh}
/* --- huggy.si CSS v6 : Head of Design Review 2026 --- */

:root{--r-bento: 22px;--glow-p: 0 0 20px -5px rgba(0,0,0,0);--border-thin: 1px solid rgba(255, 255, 255, 0.12);--ts: 200ms cubic-bezier(0.4, 0, 0.2, 1)}

/* Accessibilité & Fondamentaux */
:focus-visible {
  outline: 3px solid var(--p2) !important;
  outline-offset: 4px !important;
}

body { line-height: 1.5; } /* WCAG 2.2 */
p, .lead, .mbody, .hero p.d { text-wrap: pretty; text-align: left; }

/* Navigation : Cibles 44px & Bento-light */
.nav { padding: 12px 4vw; min-height: 72px; }
.links a { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; padding: 0 8px; box-sizing: border-box; }
.links .hp-nav { background: transparent; color: var(--mu); border: 0; min-height: 44px; min-width: 44px; padding: 0 8px; box-shadow: none; box-sizing: border-box; }
.nav-icon-btn, .lang, .avatar { min-width: 44px; min-height: 44px; }
.lang { border: var(--border-thin); background: rgba(18, 12, 29, 0.8); }
.avatar { border-width: 1.5px; box-shadow: var(--glow-p); }

/* Hero : Typographie expressive & Clamp */
.hero .slogan {
  font-size: clamp(2.5rem, 9vw, 4.8rem); /* Fluid typography */
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-shadow:none;
}
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.6; color: var(--tx); }
.hero p.d { line-height: 1.6; color: var(--mu); }

/* Boutons : Feedback tactile & Contrastes */
.btn { 
  min-height: 48px; 
  transition: transform var(--ts), box-shadow var(--ts), opacity var(--ts); 
  border: 1px solid rgba(255,255,255,0.1);
}
.btn.play { background: linear-gradient(135deg,var(--pink-deep),var(--violet-deep)); }
.btn.info { backdrop-filter: blur(12px); background: rgba(255,255,255,0.05); }
.btn:active { transform: scale(0.96); }

/* Bento Cards : L'esthétique 2026 */
.card, .soon-card {
  border-radius: var(--r-bento);
  border: var(--border-thin);
  background: var(--card);
  transition: transform var(--ts), border-color var(--ts), box-shadow var(--ts);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card:hover, .card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(192, 132, 252, 0.5);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), var(--glow-p);
}

.art { border-radius: calc(var(--r-bento) - 1px) calc(var(--r-bento) - 1px) 0 0; }
.card .art::after { background: linear-gradient(0deg, var(--card) 0%, transparent 50%); }

/* Progress & UI Elements */
.pbar, .bar { height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; }
.prog, .bar i { border-radius: 4px; }
.tag { font-weight: 800; color:var(--ink); }
.pub { font-weight: 700; border-color:var(--ink); }

/* Rows & Navigation horizontale */
.row-header { margin-bottom: 8px; }
.row h2 { font-size: 1.5rem; font-weight: 700; }
.row-all-link { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; border-radius: 8px; padding: 0 8px; }
.row-all-link:hover { background: rgba(255,255,255,0.05); }

/* Modales & Overlays : Bento structure */
.mbox, .ebox {
  border-radius: var(--r-bento);
  border: var(--border-thin);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}
.mbody { line-height: 1.6; }
.pathb { border-radius: var(--r-interactive); border: var(--border-thin); }
.pathb:hover { border-color:var(--ink); background: rgba(255,255,255,0.03); }

/* Profils */
.pf .sq { border-radius: 24%; border: 2px solid rgba(255,255,255,0.1); }
.pf:hover .sq { border-color:var(--ink); box-shadow: var(--glow-p); }
.del { width: 44px; height: 44px; display: grid; place-items: center; } /* Target size */

/* Footer & Legal */
footer { border-top: var(--border-thin); line-height: 1.6; }
footer .legal a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; }

/* Stars Rating */
.star { min-width: 44px; min-height: 44px; transition: transform var(--ts); }
.star:active { transform: scale(1.2); }

/* Core Web Vitals : Pas de changement de layout sur mobile */
@media (max-width: 760px) {
  :root{--r-bento: 18px}
  .hero-c { margin-top: -60px; padding-bottom: 40px; }
  .hero .slogan { font-size: clamp(2.2rem, 12vw, 3rem); }
  .card:hover { transform: none; } /* Évite les sauts sur touch */
  .track { padding-bottom: 30px; }
}

/* Motion Budget : Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .btn:hover { transform: none !important; }
}

/* High Contrast Fallback */
@media (forced-colors: active) {
  .card, .btn, .lang, .avatar { border: 2px solid CanvasText; }
}

.bento { background: #07050c; padding: 80px 0; overflow: hidden; }
.bento .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.bento h2 { font-family:var(--font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: 2.5rem; color: var(--ink); margin-bottom: 3rem; position: relative; display: inline-block; }
.bento h2::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 4px; background: linear-gradient(90deg,var(--violet-soft),var(--pink)); border-radius: 2px; transform-origin:left;animation: bGlow 900ms var(--ease) both; }
@keyframes bGlow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bento-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }@media (min-width: 900px) { .bento-grid { grid-template-rows: none; grid-auto-flow: dense; } .tile-hero { grid-column: 1/3; grid-row: 1/3; } .tile-mid { grid-column: 3/5; } .tile-pro { grid-column: 1/3; } .tile-wide { grid-column: 3/5; flex-direction: column; align-items: flex-start; } }
.tile { position: relative; background: var(--card); border-radius: 22px; padding: 2rem; border: 1px solid rgba(190, 24, 93, 0.45); transition: transform 200ms ease, border-color 200ms ease; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; }
.tile:hover { transform: translateY(-5px); border-color: #be185d; }
.tile svg { width: 32px; height: 32px; color:var(--ink); margin-bottom: 1.5rem; }
.tile h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--ink); margin-bottom: 0.75rem; letter-spacing: -0.03em; }
.tile p { font-family: var(--font-ui); color: var(--muted); line-height: 1.5; font-size: 0.95rem; }
.tile-hero { background: linear-gradient(145deg, #140d21, #120c1d); border: 1px solid #be185d; }
.tile-hero h3 { font-size: 1.75rem; }
@media (min-width: 600px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .bento-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, auto); }
  .tile-hero { grid-column: 1 / 3; grid-row: 1 / 3; padding: 3rem; }
  .tile-mid { grid-column: 3 / 5; }
  .tile-wide { grid-column: 1 / 5; flex-direction: row; align-items: center; gap: 2rem; }
  .tile-wide svg { margin-bottom: 0; }
}
#hero { position: relative; overflow: hidden; }
#hero-shader { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.16; mix-blend-mode: screen; }
.kw { display: inline-block; opacity: 0; transform: translateY(12px); transition: opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1), transform 0.6s cubic-bezier(0.2, 1, 0.3, 1); transition-delay: calc(var(--i) * 0.08s); }
.kw.v { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .kw { opacity: 1; transform: none; } #hero-shader { display: none; } .bento h2::after { animation: none; } }
.tile:focus-within{border-color:#be185d}
.hero-c{z-index:2}
@media (prefers-reduced-motion: reduce){.tile{transition:none}.tile:hover{transform:none}}
<style id="v61-fixes">
/* D2: Fix text contrast on images */
.card .art::after,
.soon-card .art::after {
  background: linear-gradient(0deg, #07050cf2 0%, #07050cc0 28%, #07050c66 46%, transparent 62%);
}

/* Ensure minimum font size for small text */
.cap small {
  font-size: 14px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.pct {
  font-size: 14px;
}

/* Remove mobile-specific font size reduction */
@media (max-width: 760px) {
  .cap small {
    font-size: 14px;
  }
}

/* D6: Consolidated .btn.play styles and removed conflicting rules */
.btn.play {
  background: linear-gradient(90deg, var(--act1), var(--act2));
  color: var(--ink);
  box-shadow: 0 6px 20px rgb(from var(--pink-deep) r g b / 0.3333), 0 0 0 1px #ffffff22 inset;
  min-height: 48px;
  transition: transform var(--ts), box-shadow var(--ts), opacity var(--ts);
  border: 1px solid rgba(255,255,255,0.1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 13px 30px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
}
.btn.play:hover {
  box-shadow: 0 8px 26px rgb(from var(--pink-deep) r g b / 0.5333);
  transform: translateY(-2px);
}
.btn.play:active {
  transform: scale(0.96);
}

/* D6: Removed !important from global :focus-visible */
:focus-visible {
  outline: 3px solid var(--p2);
  outline-offset: 3px;
}

/* D6: Updated card hover transform */
.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  z-index: 10;
  border-color: transparent;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 0 20px -5px rgba(0,0,0,0);
}

/* D6: Updated row h2 font-size */
.row h2 {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* D6: Updated del size */
.del {
  width: 44px;
  height: 44px;
  top: -8px;
  right: -8px;
  border-radius: 50%;
  border: 0;
  background: var(--act1);
  font-weight: 800;
  color: var(--ink);
  box-shadow: 0 2px 8px #0008;
  display: grid;
  place-items: center;
  position: absolute;
}

/* D6: Updated tokens */
:root{--r-bento: 22px;--r-interactive: 14px;--ts: 200ms cubic-bezier(0.4, 0, 0.2, 1);--target: 44px}

/* D6: Replaced hardcoded color */
.tile {
  background: var(--card);
}
/* Head of Design Fixes */
.soon-card .cap b{color:var(--ink)}
.soon-card .cap small {
  color: var(--ink) !important;
  font-size: 15px !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.soon-card .art::after {
  background: linear-gradient(0deg, #000000eb 0%, #000000d0 20%, #00000080 34%, transparent 44%) !important;
}

.bento h2 {
  font-family:var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

@media (max-width: 760px) {
  .cbot .mini,
  .card .mini {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
  }
}

.tile-link{color:inherit;text-decoration:none}.tile-link::after{content:"";position:absolute;inset:0;border-radius:22px}.tile-link:hover,.tile-link:focus-visible{text-decoration:underline;text-underline-offset:4px}.tile:has(.tile-link:focus-visible){outline:3px solid var(--p2);outline-offset:3px}.tile-link:focus-visible{outline:none}.plink{color:inherit;text-decoration:underline;text-underline-offset:3px}

.nav{padding-top:calc(12px + env(safe-area-inset-top,0px))}
#player{background:#07050c}
#player .pback{position:static;flex:none;align-self:flex-start;margin:6px 10px;padding:7px 16px;font-size:15px;line-height:1.2;min-height:44px}
#player iframe{min-height:0}
.agebadge{left:auto;right:8px}
@media (max-width:760px){:root{--cw:92vw}}

@media (max-width: 480px), (max-height: 700px) {
    #end, #profiles {
      padding: max(16px, env(safe-area-inset-top, 16px)) max(12px, env(safe-area-inset-right, 12px)) max(16px, env(safe-area-inset-bottom, 16px)) max(12px, env(safe-area-inset-left, 12px));
    }
    .ebox {
      padding: 24px 18px;
    }
    .ebox h2 {
      font-size: 1.8rem;
      margin-top: 0;
    }
    #profiles {
      gap: 20px;
    }
  }
  #end, #profiles {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    justify-content: flex-start;
  }
  #end {
    align-items: center;
  }
  .ebox {
    margin: auto;
    flex: none;
  }
  #profiles {
    align-items: center;
  }
  #profiles > :first-child {
    margin-top: auto;
  }
  #profiles > :last-child {
    margin-bottom: auto;
  }

#avpick{background:#07050cf6;align-items:center;justify-content:center;padding:16px}.avbox{max-width:560px;width:100%;max-height:92vh;display:flex;flex-direction:column;gap:14px;background:#120c1d;border-radius:18px;border:1px solid rgb(from var(--violet) r g b / 0.3333);padding:18px}#avtitle{font-family:var(--serif);font-size:1.6rem;margin:0}.avtabs{display:flex;gap:6px;flex-wrap:wrap}.avtab{min-height:44px;border:1px solid #ffffff30;background:transparent;color:var(--mu);border-radius:999px;padding:0 20px;font:inherit;cursor:pointer}.avtab[aria-selected=true]{background:linear-gradient(90deg,var(--violet-deep),var(--pink-deep));color:var(--ink)}.avtab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px;overflow-y:auto;flex:1 1 auto;min-height:0;padding:4px;role:tabpanel}.avbtn{aspect-ratio:1;border-radius:50%;padding:0;border:3px solid transparent;background:none;overflow:hidden;cursor:pointer}.avbtn img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.avbtn:hover,.avbtn:focus-visible{border-color:var(--ink)}.avbtn[aria-pressed=true]{border-color:var(--pink);box-shadow:0 0 0 3px rgb(from var(--pink) r g b / 0.4)}.avfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.avai{font-size:11px;color:var(--mu);opacity:.75}.avsq{background:#07050c!important;overflow:hidden;padding:0}.avsq .avimg,#avatar .avimg{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}#avatar{overflow:hidden;padding:0}.avchg{min-height:32px;border-radius:999px;font-size:.7rem;margin-top:6px}.card .art>.cap{position:relative;z-index:1;padding:44px 14px 11px;display:flex;flex-direction:column;justify-content:flex-end}.card .art>.cap::before{content:"";position:absolute;z-index:-1;left:-14px;right:-14px;bottom:-11px;top:-64px;pointer-events:none;background:linear-gradient(0deg,#07050c 0%,#07050cf2 58%,#07050c00 100%)}.card .art{display:flex;flex-direction:column;justify-content:flex-end}.card .art>.cap b{text-shadow:0 2px 8px #000}.plist>li{position:relative;display:flex;flex-direction:column;align-items:center}@media (max-height:520px){.avbox{max-height:96vh;padding:12px}}

#profiles button,#avpick button,#hg-lang button,.newp button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.pf.add{cursor:pointer}.pf .sq,.pf .avimg,.avbtn img{pointer-events:none}

/* Curated layer: wins over the shell for headings and deep buttons. */
/* Curated homepage, Billet d'Exploration, light player HUD.
   Headings: Playfair. UI: Inter. The in-game iframe is not restyled. */

.bento h2,
.curated-head h2,
#profiles h1,
.ebox h2,
.hero .slogan,
#avtitle{
  font-family:var(--font-heading) !important;
  font-weight:600;
  letter-spacing:-.02em;
}
.soon-card .cap small{color:var(--ink-soft) !important}
.soon-card .cap b{color:var(--ink)}

.btn.play{
  color:var(--ink);
  background:linear-gradient(90deg,var(--act1),var(--act2));
  box-shadow:0 6px 20px #6d28d955,0 0 0 1px rgba(243,239,230,.12) inset;
}
.sbadge{
  background:linear-gradient(135deg,var(--pink-deep),var(--violet-deep));
  color:var(--ink);
}
.avtab[aria-selected=true]{
  background:linear-gradient(90deg,var(--violet-deep),var(--pink-deep));
  color:var(--ink);
}
.qf[aria-pressed='true']{color:var(--ink)}

.sound-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--font-ui);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.2;
}
.sound-pill[aria-pressed="true"]{
  color:var(--ink);
  border-color:var(--muted);
}
.nav .sound-pill{margin-right:8px}
.sound-ico{display:none;flex:none}

.curated{margin:6px 0 8px}
.curated-head{padding:10px 4vw 2px}
.curated-head h2{
  font-size:clamp(1.8rem,3vw,2.5rem);
  margin:0;
  text-transform:none;
}
.curated-head .note{margin:6px 0 0;max-width:42rem;color:var(--muted)}

.play-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  padding:16px 4vw 28px;
}
.lab-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
  padding:14px 4vw 36px;
}
.lab-grid .soon-card{flex:none;width:auto;scroll-snap-align:unset}

.card.panel{
  flex:none;
  width:auto;
  display:flex;
  flex-direction:column;
  border-radius:22px;
  border:1px solid var(--line);
  background:var(--bg-panel);
  color:var(--ink);
  overflow:hidden;
  transform:none;
  transform-origin:center;
}
.card.panel:first-child{transform-origin:center}
.card.panel:hover,
.card.panel:focus-visible,
.card.panel:focus-within{
  transform:none;
  border-color:rgba(109,40,217,.55);
  box-shadow:0 14px 34px #0008;
}
.card.panel.is-launching,
.card.panel.is-launching:hover{
  transform:scale(1.045);
  z-index:3;
  border-color:var(--muted);
  box-shadow:0 18px 42px #000c,0 0 0 1px var(--violet-soft);
}
.card.panel .art{aspect-ratio:16/9;min-height:168px}
.card.panel .cap b{
  font-family:var(--font-heading);
  font-weight:600;
  text-transform:none;
  letter-spacing:-.015em;
  font-size:clamp(1.35rem,2vw,1.7rem);
  line-height:1.05;
  color:var(--ink);
}
.panel-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px 16px;
}
.panel-body .obj{
  display:block;
  -webkit-line-clamp:unset;
  overflow:visible;
  margin:0;
  color:var(--ink-soft);
  font-size:.95rem;
  line-height:1.45;
  text-shadow:none;
}
.panel-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  margin:0;
  align-items:center;
  color:var(--muted);
  font-size:.82rem;
}
.agechip{
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 8px;
  color:var(--ink-soft);
}
.panel-body .dur{color:var(--muted);font-size:.82rem;margin:0;text-shadow:none}
.states{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 6px;
  margin:0;
  font-size:.8rem;
  color:var(--faint);
}
.states .st.on.explorer{color:var(--ink)}
.states .st.on.open{color:var(--open-trail)}
.states .st.on.master{color:var(--mastered)}
.states .st.on{font-weight:650}
.stdot{opacity:.7}
.panel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.panel-actions .btn{min-height:44px}

.mbox .states{margin:8px 0 12px}
.ebox .states{margin:4px 0 14px}

/* Billet d'Exploration */
.billet-wrap{margin:8px auto 18px;max-width:440px;text-align:left}
.billet-kicker{
  font-family:var(--font-heading);
  font-size:1.35rem;
  margin:0 0 4px;
  color:var(--ink);
}
.billet-status{margin:0 0 10px;color:var(--muted);font-size:.85rem}
.billet{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  perspective:1000px;
  cursor:pointer;
}
.billet-inner{
  display:grid;
  min-height:250px;
  transform-style:preserve-3d;
  transition:transform .55s var(--ease);
}
.billet.is-back .billet-inner{transform:rotateY(180deg)}
.billet-face{
  grid-area:1/1;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    radial-gradient(80% 60% at 20% 0%,rgba(109,40,217,.18),transparent 60%),
    radial-gradient(70% 50% at 90% 100%,rgba(190,24,93,.22),transparent 55%),
    var(--bg-panel);
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  min-height:250px;
  box-shadow:0 16px 40px #0008;
}
.billet-face.back{transform:rotateY(180deg);justify-content:flex-start}
.billet-face strong{
  font-family:var(--font-heading);
  font-size:1.55rem;
  font-weight:600;
  line-height:1.1;
  color:var(--ink);
}
.billet-face em{font-style:normal;color:var(--muted);font-size:.85rem}
.billet-face p{margin:8px 0 0;color:var(--ink-soft);line-height:1.45;font-size:.98rem}
.billet-tag{
  align-self:flex-start;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
}
.billet-art,.billet-slot{
  width:100%;
  height:132px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:8px;
  background:#100a18;
}
.billet-slot{
  display:grid;
  place-items:center;
  color:var(--faint);
  border:1px dashed var(--line);
  font-size:.8rem;
}
.billet-hint{margin:8px 0 0}
.billet:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:18px}

/* Extremely light shell around the game iframe. In-game HUDs stay untouched. */
#player{background:var(--bg)}
#player .hud{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex:none;
  margin:0;
  padding:6px 10px;
  background:var(--bg-hud);
  border-bottom:1px solid rgba(243,239,230,.08);
}
#player .hud .pback{
  position:static;
  margin:0 auto 0 0;
  align-self:center;
  min-height:44px;
  padding:6px 12px;
  background:transparent;
  color:var(--ink-soft);
  border:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:none;
  font-weight:600;
}
#player .hud .pback:hover{background:rgba(243,239,230,.06);color:var(--ink)}
#player .hud .sound-pill{background:transparent;backdrop-filter:none}

.huggy-sound-float{
  position:fixed;
  z-index:40;
  right:12px;
  bottom:12px;
  background:rgba(7,5,12,.45);
  backdrop-filter:none;
}

@media (max-width:760px){
  .play-grid{grid-template-columns:1fr;gap:14px}
  .card.panel .art{min-height:0}

  /* One row: icon sound, full language code, avatar inside the viewport. */
  .nav{
    gap:8px;
    width:100%;
    box-sizing:border-box;
    padding:8px 12px;
    padding-top:calc(8px + env(safe-area-inset-top, 0px));
    min-height:56px;
  }
  .logo{flex:0 0 auto;min-width:200px;gap:6px}
  .logo-img{width:200px;min-width:200px;height:auto;max-width:none}
  .right{gap:8px;flex:0 0 auto;min-width:0}
  .nav .sound-pill{
    position:relative;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    margin:0;
    padding:0;
    flex:0 0 44px;
  }
  .nav .sound-ico{display:block;width:20px;height:20px}
  .nav .sound-pill[aria-pressed="false"] .sound-wave{display:none}
  .nav .sound-pill[aria-pressed="true"] .sound-mute{display:none}
  .nav .sound-pill [data-sound-label]{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }
  .nav .lang{
    flex:0 0 auto;
    width:4.75rem;
    min-width:4.75rem;
    max-width:none;
    padding:0 0.2rem 0 0.55rem;
    box-sizing:border-box;
    font-size:.8rem;
  }
  .nav .avatar{
    box-sizing:border-box;
    flex:0 0 44px;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }
}
@media (max-width:520px){
  .nav{
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
  }
  .nav > nav:has(#links:empty){display:none}
  .logo{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2px;
    min-width:200px;
    flex:0 0 auto;
  }
  .logo-img{width:200px;min-width:200px;height:auto;max-width:none}
  .nav .badge{
    font-size:14px;
    letter-spacing:.04em;
    line-height:1.1;
    padding:1px 5px;
  }
  .right{flex-wrap:nowrap;gap:8px}
  .nav .sound-pill,
  .nav .reading-toggle,
  .nav .avatar{
    box-sizing:border-box;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    flex:0 0 44px;
    padding:0;
  }
  .nav .lang{
    box-sizing:border-box;
    width:auto;
    min-width:44px;
    height:44px;
    min-height:44px;
    flex:0 0 auto;
    padding:0 6px;
    font-size:14px;
  }
  html[data-reading="comfort"] .nav,
  html[data-reading="comfort"] .right{
    flex-wrap:wrap!important;
    height:auto!important;
  }
  html[data-reading="comfort"] .nav .sound-pill,
  html[data-reading="comfort"] .nav .reading-toggle,
  html[data-reading="comfort"] .nav .reading-toggle *,
  html[data-reading="comfort"] .nav .lang,
  html[data-reading="comfort"] .nav .avatar{
    font-size:14px!important;
    line-height:1!important;
    letter-spacing:normal!important;
    word-spacing:normal!important;
  }
  html[data-reading="comfort"] .nav .badge{
    font-size:14px!important;
    line-height:1.1!important;
    letter-spacing:.04em!important;
    word-spacing:normal!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .billet-inner{transition:none}
  .card.panel.is-launching{transform:none}
}

/* cards-1112 */
/* cards-1112 */
html body .card .art::after{background:linear-gradient(0deg,#07050c66 0%,#07050c26 30%,transparent 50%) !important}
html body .card .art>.cap::before{top:-14px !important;background:linear-gradient(0deg,#07050ca8 0%,#07050c99 75%,#07050c00 100%) !important}
html body .card .art>.cap b{text-shadow:0 1px 2px #000,0 0 10px #000,0 0 18px #000c !important}
html body .card .art>.cap small,html body .card .art>.cap .pct{text-shadow:0 1px 2px #000,0 0 6px #000,0 0 12px #000 !important}

/* Slogan: ink, no neon glow. Deep violet/pink stay fills and buttons. */
.hero .slogan{color:var(--ink);text-shadow:none}
.hero .slogan::before{content:none;display:none;background:none;filter:none}
.tag{color:var(--muted);font-weight:500;text-shadow:none}
h1,h2,h3{font-family:var(--font-heading);font-weight:700}
/* Hero title: localized tagline in Playfair 700, left-aligned (lockup PNG removed). */
.hero .slogan{
  display:block;
  margin:0 0 24px;
  text-align:left;
  font-family:"Playfair Display","Didot","Bodoni MT",Georgia,"Times New Roman",serif;
  font-weight:700;
  font-size:clamp(40px,5vw,72px);
  line-height:1.08;
  letter-spacing:-.01em;
  color:#f3efe6;
  color:var(--ink);
  text-wrap:balance;
}
/* Featured label sits under the h1 (and under the PT note), above the pitch. */
.hero .tag{margin:0 0 8px;max-width:100%}
.hero-c{text-align:left}
.hero-lockup{display:none!important}
/* PT note: 4px under the h1 below 761px, 12px from the desktop layout, then 24px before the featured label. */
.hero .slogan:has(+ .pt-games-note){margin-bottom:4px}
.logo-wide{display:none}
@media (max-width:359px){
  .hero .slogan{font-size:36px}
}
@media (min-width:761px){
  .hero{align-items:center}
  .hero-c{margin-top:0}
  .hero .slogan:has(+ .pt-games-note){margin-bottom:12px}
}
@media (min-width:1100px){
  .logo-img{display:none}
  .logo-wide{display:block;width:240px;min-width:200px;height:auto;margin-block:calc(240 / 1160 * 0.5 * 240px)}
  .logo{gap:calc(240 / 1160 * 0.5 * 240px)}
  html[data-reading="comfort"] .hero{
    padding-top:calc(12px + 14px + 12px + (240px * 240 / 1160) * 2) !important;
  }
}
footer .wordmark{font-family:var(--font-ui);font-weight:700;color:var(--ink)}
.hero .meta .pub,.pathb.first{box-shadow:none}
.btn,.links a,.tag,.ghost,.qf,.row-all-link{font-weight:500}

.pt-games-note{margin:0 0 24px;max-width:36rem;text-align:left;color:var(--muted);font-size:0.9rem;font-weight:400;line-height:1.35}
/* School level note when data marks the mapping as indicative.
   Lives on solid panel/modal/hero surfaces — never over card artwork. */
.lvl-indicative{
  display:block;
  margin:0;
  max-width:100%;
  font-family:var(--font-ui),Inter,system-ui,sans-serif;
  font-size:11px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
  text-wrap:pretty;
}
.panel-body > .lvl-indicative{
  margin:0;
  max-width:100%;
  font-size:11px;
  color:var(--muted);
}
.hero-c > .lvl-indicative{
  margin:6px 0 0;
  max-width:36rem;
  font-size:11px;
}
/* Modal: only the level chip is a pill; note is plain secondary text. */
.mbody .meta .lvl-level{
  background:#ffffff10;
  border:1px solid #ffffff20;
  padding:4px 10px;
  border-radius:999px;
}
.mbody .meta span.lvl-indicative{
  flex:1 1 100%;
  margin:2px 0 0;
  max-width:36rem;
  font-size:11px;
  line-height:1.35;
  background:none;
  border:none;
  border-radius:0;
  padding:0;
  color:var(--muted);
}
@media (max-width:359px){
  .lvl-indicative,
  .panel-body > .lvl-indicative,
  .mbody .meta span.lvl-indicative,
  .hero-c > .lvl-indicative{
    font-size:11px;
    max-width:100%;
  }
}
.fr-badge{display:inline-flex;align-items:center;align-self:flex-start;margin:4px 0 0;padding:4px 8px;border-radius:999px;background:#140d21;color:#f3efe6;border:1px solid #be185d;font:600 14px/1.2 Inter,system-ui,sans-serif;letter-spacing:.01em}
html[data-reading="comfort"] .fr-badge{background:#1f1a2b!important;color:#f3efe6!important;-webkit-text-fill-color:#f3efe6!important;border-color:#be185d!important}
@media (max-width:760px){
  .logo{min-width:0!important;flex:0 0 auto}
  .logo-img{width:128px!important;min-width:128px!important;max-width:128px!important;height:auto}
  .nav{flex-wrap:wrap!important;row-gap:8px}
  .right{flex-wrap:wrap!important;justify-content:flex-end;min-width:0}
  html[data-reading="comfort"] .nav,
  html[data-reading="comfort"] .right{flex-wrap:wrap!important}
  .nav > nav{flex:1 1 100%;min-width:0}
  .links{display:flex!important;flex-wrap:wrap;gap:4px 12px;width:100%}
  .links a,.links .hp-nav{min-height:44px;display:inline-flex;align-items:center}
  .hero{padding-top:148px}
  html[data-reading="comfort"] .hero{padding-top:248px!important}
}

/* 761–1000: the wrapped nav is taller. The column scrim (below) covers the
   text, so the old 62% flat veil and the 46% column cap are not used.
   The column stays the production width (max 620px) and the scrim follows it. */
@media (min-width:761px) and (max-width:1000px){
  .hero{padding-top:176px}
}

/* Below 1000px the one-line bar (logo + links + sound label + controls) is ~990px.
   Icon sound keeps the existing per-language aria-label; the bar wraps so lang,
   profile and report stay on screen. Tap targets stay at least 44px. */
@media (max-width:1000px){
  .nav{
    flex-wrap:wrap;
    align-items:center;
    column-gap:12px;
    row-gap:8px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .logo{order:1}
  .right{order:2}
  .nav > nav{order:3;flex:1 1 100%;min-width:0}
  .links{display:flex;flex-wrap:wrap;gap:4px 12px;width:100%}
  .links a,.links .hp-nav{min-width:44px;min-height:44px}
  .right{flex-wrap:wrap;justify-content:flex-end;min-width:0;gap:8px}
  .nav .sound-pill{
    position:relative;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    margin:0;
    padding:0;
    flex:0 0 44px;
    box-sizing:border-box;
  }
  .nav .sound-ico{display:block;width:20px;height:20px}
  .nav .sound-pill[aria-pressed="false"] .sound-wave{display:none}
  .nav .sound-pill[aria-pressed="true"] .sound-mute{display:none}
  .nav .sound-pill [data-sound-label]{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }
  .nav .reading-toggle,
  .nav .lang,
  .nav .avatar{
    box-sizing:border-box;
    min-width:44px;
    min-height:44px;
    height:44px;
  }
  .nav .reading-toggle,
  .nav .avatar{
    width:44px;
    flex:0 0 44px;
    padding:0;
  }
}

/* Column scrim, from 761px only. Opaque #07050c under the text column
   (plus the gutter and 20px past the glyphs), then a fade whose length
   follows the column: at least 240px, at most 420px. Stops are percentages
   of that band, so the curve cannot collapse into a hard edge. The first
   third stays nearly opaque so Canyon's bright sand does not read as a
   line. A 140px fade lifts every hero image into #07050c at the bottom.
   Below 761px these variables are unused and the mobile rules are unchanged. */
:root{
  --voile-gouttiere:4vw;
  --voile-fondu:clamp(240px, 30vw, 420px);
  --voile-marge:20px;
  --voile-bas:140px;
}
@media (min-width:761px){
  .hero-bg::after{
    background:linear-gradient(
      to top,
      #07050c 0px,
      rgba(7,5,12,0.99) 11px,
      rgba(7,5,12,0.96) 25px,
      rgba(7,5,12,0.88) 42px,
      rgba(7,5,12,0.72) 59px,
      rgba(7,5,12,0.52) 76px,
      rgba(7,5,12,0.32) 92px,
      rgba(7,5,12,0.16) 109px,
      rgba(7,5,12,0.06) 123px,
      rgba(7,5,12,0.015) 134px,
      transparent var(--voile-bas)
    );
  }
  .hero-c::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-900px;
    bottom:-900px;
    left:calc(-1 * var(--voile-gouttiere));
    width:calc(100% + var(--voile-gouttiere) + var(--voile-marge));
    pointer-events:none;
    background:#07050c;
  }
  .hero-c::after{
    content:"";
    position:absolute;
    z-index:-1;
    top:-900px;
    bottom:-900px;
    left:calc(100% + var(--voile-marge) - 2px);
    width:calc(var(--voile-fondu) + 2px);
    pointer-events:none;
    background:linear-gradient(
      90deg,
      #07050c 0%,
      rgba(7,5,12,0.99) 8%,
      rgba(7,5,12,0.96) 18%,
      rgba(7,5,12,0.88) 30%,
      rgba(7,5,12,0.72) 42%,
      rgba(7,5,12,0.52) 54%,
      rgba(7,5,12,0.32) 66%,
      rgba(7,5,12,0.16) 78%,
      rgba(7,5,12,0.06) 88%,
      rgba(7,5,12,0.015) 96%,
      transparent 100%
    );
  }
  /* .hero-c stays empty until hero() fills it from the catalogue. Sized
     from that empty box, the veil painted 54–74px wide, then jumped 500px
     and more when the copy landed (CLS 0.29 at 1350px, 0.6 on a phone in
     landscape). Paint it with the copy instead. */
  .hero-c:empty::before,
  .hero-c:empty::after{content:none}
}
@media (max-width:760px){
  .hero-bg::after{
    background:linear-gradient(
      to top,
      #07050c 0%,
      rgba(7,5,12,0.97) 4%,
      rgba(7,5,12,0.88) 8%,
      rgba(7,5,12,0.76) 12%,
      rgba(7,5,12,0.58) 17%,
      rgba(7,5,12,0.38) 22%,
      rgba(7,5,12,0.22) 27%,
      rgba(7,5,12,0.10) 32%,
      rgba(7,5,12,0.03) 36%,
      transparent 38%
    );
  }
  /* The whole title sits on #07050c, under the faded image, so no word
     crosses the photo's bottom edge. */
  .hero-c{margin-top:0}
  /* Opaque header, same height at rest and while scrolling. A 32px fade
     hangs below the header so the photo dissolves instead of being cut. */
  .nav,
  .nav.solid{
    background:#07050c;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .nav::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:32px;
    pointer-events:none;
    background:linear-gradient(
      to bottom,
      #07050c 0%,
      rgba(7,5,12,0.86) 28%,
      rgba(7,5,12,0.52) 52%,
      rgba(7,5,12,0.22) 74%,
      rgba(7,5,12,0.05) 90%,
      transparent 100%
    );
  }
}
@media (prefers-reduced-transparency:reduce){
  .nav,
  .nav.solid{
    background:#07050c;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
/* 360–412: logo, links, then the control row. Every target stays 44px
   and the flag stays inside the viewport. */
@media (max-width:412px){
  .nav{
    flex-wrap:wrap;
    align-items:center;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    column-gap:8px;
    row-gap:8px;
    padding-left:10px;
    padding-right:10px;
  }
  .logo{
    order:1;
    flex:1 1 100%;
    min-width:0!important;
    max-width:100%;
  }
  .logo-img{
    width:128px!important;
    min-width:0!important;
    max-width:128px!important;
  }
  .nav > nav{
    order:2;
    flex:1 1 100%;
    min-width:0;
    max-width:100%;
  }
  /* #links is filled after the catalogue loads. Keep its 44px row so the
     control row does not drop 52px when the links arrive. */
  .nav > nav:has(#links:empty){
    display:block;
    min-height:44px;
  }
  .right{
    order:3;
    flex:1 1 100%;
    margin-left:0;
    min-width:0;
    max-width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
  }
  .nav .sound-pill,
  .nav .reading-toggle,
  .nav .avatar,
  .nav .right #hg-bug-open{
    box-sizing:border-box;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    flex:0 0 44px;
    padding:0;
  }
  .nav .lang{
    box-sizing:border-box;
    flex:0 1 auto;
    width:auto;
    min-width:44px;
    max-width:4.6rem;
    height:44px;
    min-height:44px;
    padding:0 4px;
  }
}

/* Mobile hero, under 761px. The photo scrolls with the page (no sticky,
   no scroll listener). It starts at the top of the document, behind the
   fixed header, so a black band cannot open under the controls. The header
   carries its own veil: #07050c at 0.9 fading to 0 across the bar plus 24px.
   The title stays under the image, on #07050c, past the 38% bottom veil.
   528px covers a 180px header, the 24px veil and 300px of scroll at ≤412.
   Wider mobile keeps at least the old image plus the 148px header clearance.
   Desktop (≥761) does not use these rules. Comfort mode hides the photo. */
@media (max-width:760px){
  html:not([data-reading="comfort"]) .hero{
    padding-top:0;
  }
  html:not([data-reading="comfort"]) .hero-bg{
    position:relative;
    inset:auto;
    top:auto;
    z-index:0;
    width:100%;
    flex:0 0 auto;
    align-self:flex-start;
    /* Width and px only. Min and max match so the box cannot grow when the
       address bar shows or hides. */
    height:max(528px, calc(clamp(280px, 82vw, 440px) + 148px));
    min-height:max(528px, calc(clamp(280px, 82vw, 440px) + 148px));
    max-height:max(528px, calc(clamp(280px, 82vw, 440px) + 148px));
  }
  html:not([data-reading="comfort"]) .hero-c{
    margin-top:0;
  }
  html:not([data-reading="comfort"]) .nav,
  html:not([data-reading="comfort"]) .nav.solid{
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  html:not([data-reading="comfort"]) .nav > *{
    position:relative;
    z-index:1;
  }
  html:not([data-reading="comfort"]) .nav::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    top:0;
    height:calc(100% + 24px);
    pointer-events:none;
    background:linear-gradient(to bottom, rgba(7,5,12,0.9) 0%, rgba(7,5,12,0) 100%);
  }
  html:not([data-reading="comfort"]) .nav::after{
    content:none;
  }
  html:not([data-reading="comfort"]) .nav .links a,
  html:not([data-reading="comfort"]) .nav .links .hp-nav{
    color:#f3efe6;
  }
  /* White ring plus a dark casing. One colour cannot clear 3:1 on both
     the lit road and the dark orange beside the same button. */
  html:not([data-reading="comfort"]) .nav .sound-pill,
  html:not([data-reading="comfort"]) .nav .reading-toggle,
  html:not([data-reading="comfort"]) .nav .avatar,
  html:not([data-reading="comfort"]) .nav .lang,
  html:not([data-reading="comfort"]) #nav .right #hg-bug-open.hg-bug-bar{
    background:rgba(7,5,12,.72);
    color:#f3efe6;
    -webkit-text-fill-color:#f3efe6;
    border:1.5px solid #fff;
    box-shadow:0 0 0 1.5px #07050c;
  }
}
/* Reduced transparency: a solid bar, same 32px fade as the rest of the site. */
@media (max-width:760px) and (prefers-reduced-transparency:reduce){
  html:not([data-reading="comfort"]) .nav,
  html:not([data-reading="comfort"]) .nav.solid{
    background:#07050c;
  }
  html:not([data-reading="comfort"]) .nav::before{content:none}
  html:not([data-reading="comfort"]) .nav::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    bottom:auto;
    height:32px;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to bottom,#07050c 0%,rgba(7,5,12,0.86) 28%,rgba(7,5,12,0.52) 52%,rgba(7,5,12,0.22) 74%,rgba(7,5,12,0.05) 90%,transparent 100%);
  }
}

/* catalogue-1 — subject pills, one sort, caption scrim 88–94 %.
   Scoped to the catalogue cards. Hero header and veils are untouched. */
.catalogue-tools{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  padding:12px 4vw 0;
  position:relative;
  z-index:4;
}
.catalogue-tools .chip-scroller{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  gap:8px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:6px 2px;
  margin:-6px 0;
}
.catalogue-tools .chip-scroller.can-scroll{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
}
.catalogue-tools .chip-scroller.can-scroll.scrolled{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 22px),transparent);
}
.catalogue-tools .chip-scroller::-webkit-scrollbar{display:none}
.catalogue-tools .chip{
  flex:0 0 auto;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1.5px solid rgba(243,239,230,.78);
  background:transparent;
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:500;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  cursor:pointer;
}
.catalogue-tools .chip .count{font-weight:500;color:#d5cec2}
.catalogue-tools .chip[aria-checked="true"]{
  border-color:transparent;
  background:linear-gradient(90deg,var(--violet-deep),var(--pink-deep));
  color:var(--ink);
  font-weight:700;
  box-shadow:0 0 0 1.5px rgba(243,239,230,.78);
}
.catalogue-tools .chip[aria-checked="true"] .count{color:var(--ink);font-weight:700}
.catalogue-tools .sort-control{position:relative;flex:0 0 auto;margin-left:auto}
.catalogue-tools .sort-btn{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1.5px solid rgba(243,239,230,.78);
  background:transparent;
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
}
.catalogue-tools .sort-ico{display:none;width:20px;height:20px;flex:none}
.catalogue-tools .sort-chev{width:12px;height:8px;flex:none}
.catalogue-tools .sort-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:5;
  min-width:max(100%,11rem);
  margin:0;
  padding:6px;
  border-radius:16px;
  border:1.5px solid rgba(243,239,230,.78);
  background:#161022;
  box-shadow:0 12px 32px #000c;
}
.catalogue-tools .sort-item{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.catalogue-tools .sort-item[aria-checked="true"]{background:rgba(243,239,230,.08)}
.catalogue-tools .chip:focus-visible,
.catalogue-tools .sort-btn:focus-visible,
.catalogue-tools .sort-item:focus-visible{
  outline:3px solid #e4ccff;
  outline-offset:3px;
}
@media (max-width:700px){
  .catalogue-tools .sort-control{flex:0 0 44px;width:44px}
  .catalogue-tools .sort-btn{
    width:44px;
    min-width:44px;
    padding:0;
    justify-content:center;
  }
  .catalogue-tools .sort-btn .sort-label,
  .catalogue-tools .sort-btn .sort-chev{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }
  .catalogue-tools .sort-ico{display:block}
}
/* Two-line curriculum sits on a darker field than the photo veil.
   94 % at the baseline, 88 % through the theme. Comfort mode keeps its solid panel. */
html:not([data-reading="comfort"]) body .card.panel .art>.cap::before{
  top:-24px !important;
  background:linear-gradient(0deg,rgba(7,5,12,.94) 0%,rgba(7,5,12,.88) 72%,rgba(7,5,12,0) 100%) !important;
}
html body .card.panel .cap b{
  font-family:var(--font-heading);
  font-weight:700;
  font-synthesis:none;
  text-transform:none;
  letter-spacing:-.015em;
}
html body .card.panel .cap small.curriculum{
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  max-height:none;
  max-width:100%;
  white-space:normal;
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:500;
  font-synthesis:none;
  line-height:1.35;
  color:var(--ink);
  hyphens:none;
}
.card.panel .curriculum .subject{
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}
.card.panel .curriculum .theme{
  font-weight:400;
  color:#d5cec2;
  white-space:normal;
  overflow-wrap:break-word;
}

/* nav-voile-1. At rest the existing veil is unchanged.
   Once the sentinel leaves the viewport (scrollY > 8), the bar is opaque
   across its full height, including the link row, and the 24px fade is gone. */
.nav-sentinel{
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:8.5px;
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
  opacity:0;
}
.nav{
  transition:background 200ms,box-shadow 200ms;
}
.nav.is-scrolled,
.nav.solid.is-scrolled,
html:not([data-reading="comfort"]) .nav.is-scrolled,
html:not([data-reading="comfort"]) .nav.solid.is-scrolled{
  background:rgba(7,5,12,.92);
  box-shadow:0 1px 0 rgba(243,239,230,.28);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
html[data-reading="comfort"] .nav.is-scrolled,
html[data-reading="comfort"] .nav.solid.is-scrolled{
  box-shadow:0 1px 0 rgba(31,26,43,.22) !important;
}
html:not([data-reading="comfort"]) .nav.is-scrolled::before,
.nav.is-scrolled::before{
  content:none;
  background:none;
  height:0;
}
/* Soft fade under the opaque bar. It hangs below the header (top:100%)
   so the bar's own height does not change. */
html:not([data-reading="comfort"]) .nav.is-scrolled::after,
.nav.is-scrolled::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:28px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(7,5,12,.92) 0%, rgba(7,5,12,0) 100%);
}
/* The brand gradient underline is below 4.5:1 on this bar. Ink clears it. */
.nav.is-scrolled .links a[aria-current="page"]::after{
  background:var(--ink);
}
@supports not (backdrop-filter: blur(12px)){
  .nav.is-scrolled,
  .nav.solid.is-scrolled,
  html:not([data-reading="comfort"]) .nav.is-scrolled,
  html:not([data-reading="comfort"]) .nav.solid.is-scrolled{
    background:rgba(7,5,12,.96);
  }
}
@media (prefers-reduced-transparency:reduce){
  .nav.is-scrolled,
  .nav.solid.is-scrolled,
  html:not([data-reading="comfort"]) .nav.is-scrolled,
  html:not([data-reading="comfort"]) .nav.solid.is-scrolled{
    background:#07050c;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .nav,
  .nav.is-scrolled{
    transition:none;
  }
}
/* header-app-1. Phones and tablets (<=1000px): the header is not sticky.
   It sits over the hero and scrolls away with the page. Scrolled looks the
   same as at rest: no opaque bar, no blur, no line, no fade.
   #nav beats the nav-voile-1 selectors without reordering them.
   will-change keeps the bar on its own layer, as it was when fixed, so the
   page at rest renders pixel for pixel the same. */
@media (max-width:1000px){
  html{scroll-padding-top:0}
  #nav{position:absolute;will-change:opacity}
  #nav.is-scrolled{
    background:linear-gradient(180deg,rgba(7,5,12,.95) 0%,rgba(7,5,12,.6) 60%,transparent 100%);
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  #nav.is-scrolled::after{content:none;background:none;height:0}
  #nav.is-scrolled .links a[aria-current="page"]::after{
    background:linear-gradient(90deg,var(--violet-deep),var(--pink-deep));
  }
  html[data-reading="comfort"] #nav.is-scrolled{box-shadow:none !important}
  html[data-reading="comfort"] #nav.is-scrolled::after{
    content:none !important;
    background:none !important;
    height:0 !important;
  }
}
@media (max-width:760px){
  html:not([data-reading="comfort"]) #nav.is-scrolled{background:transparent}
  html:not([data-reading="comfort"]) #nav.is-scrolled::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    top:0;
    height:calc(100% + 24px);
    pointer-events:none;
    background:linear-gradient(to bottom, rgba(7,5,12,0.9) 0%, rgba(7,5,12,0) 100%);
  }
}
@media (max-width:1000px) and (prefers-reduced-transparency:reduce){
  #nav.is-scrolled{background:#07050c}
}
@media (max-width:760px) and (prefers-reduced-transparency:reduce){
  html:not([data-reading="comfort"]) #nav.is-scrolled{background:#07050c}
  html:not([data-reading="comfort"]) #nav.is-scrolled::before{content:none}
  html:not([data-reading="comfort"]) #nav.is-scrolled::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    bottom:auto;
    height:32px;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to bottom,#07050c 0%,rgba(7,5,12,0.86) 28%,rgba(7,5,12,0.52) 52%,rgba(7,5,12,0.22) 74%,rgba(7,5,12,0.05) 90%,transparent 100%);
  }
}
.catalogue-tools .sort-item{gap:8px}
.catalogue-tools .sort-mark{
  flex:0 0 1.15em;
  width:1.15em;
  text-align:center;
  font-weight:700;
  line-height:1;
  color:var(--ink);
}
.catalogue-tools .sort-item:not([aria-checked="true"]) .sort-mark{visibility:hidden}

/* cartes-propres-1 — play-card visuals.
   Photo cards use a wide hero crop. Gradient cards are a CSS poster (one class per game)
   until real art replaces data-card-art="gradient". Title sits against the visual. */
html body .card.panel .art{
  aspect-ratio:auto !important;
  min-height:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  background-image:none !important;
  gap:0;
}
html body .card.panel .art::after{
  content:none !important;
  background:none !important;
}
html body .card.panel .card-media{
  position:relative;
  flex:none;
  width:100%;
  aspect-ratio:16/9;
  min-height:0;
  /* clip, not hidden: a zoomed hero must not become a scroll container
     (scrollIntoView would slide the badge and the age pill out of the frame). */
  overflow:clip;
  background:#07050c;
}
html body .card.panel .card-media > picture{
  position:absolute;
  inset:0;
  display:block;
  margin:0;
}
html body .card.panel .card-media .shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
/* Lumen hero is already text-free. The canyon card file is already framed on the road. */
html body .card.panel .card-visual--lumen .shot{
  object-position:62% 42%;
}
html body .card.panel .card-visual--photo .card-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top, rgba(7,5,12,.70) 0%, rgba(7,5,12,.42) 46%, rgba(7,5,12,.12) 72%, rgba(7,5,12,0) 100%);
}
html body .card.panel .card-media > .agebadge{
  z-index:3;
}
html body .card.panel .art > .cap{
  position:relative;
  z-index:1;
  margin:0;
  padding:8px 14px 12px !important;
  background:transparent;
}
html body .card.panel .art > .cap::before{
  content:none !important;
  display:none !important;
  background:none !important;
}
/* Gradient posters. Per-game class is the swap point for a future photo. */
html body .card.panel .card-visual--gradient .card-media,
html body .card.panel .card-visual--labo-vitesse .card-media,
html body .card.panel .card-visual--carte-blanche .card-media{
  background:linear-gradient(145deg, #07050c 0%, #6d28d9 58%, #be185d 100%);
}
html body .card.panel .card-poster{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px 48px;
  pointer-events:none;
}
html body .card.panel .card-visual--gradient .card-poster,
html body .card.panel .card-visual--labo-vitesse .card-poster,
html body .card.panel .card-visual--carte-blanche .card-poster{
  background:linear-gradient(145deg, #07050c 0%, #6d28d9 58%, #be185d 100%);
}
html body .card.panel .card-poster-title{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:700;
  font-synthesis:none;
  font-size:clamp(1.8rem, 4.6vw, 2.6rem);
  line-height:1.12;
  letter-spacing:-.02em;
  text-align:center;
  color:#f3efe6;
  -webkit-text-fill-color:#f3efe6;
  text-wrap:balance;
}
html[data-reading="comfort"] body .card.panel .card-poster-title{
  font-family:"Playfair Display", Georgia, serif !important;
  font-weight:700 !important;
  font-style:normal !important;
  font-size:clamp(2rem, 7vw, 2.8rem) !important;
  line-height:1.15 !important;
  letter-spacing:-.02em !important;
  word-spacing:normal !important;
  text-transform:none !important;
  text-align:center !important;
  color:#f3efe6 !important;
  -webkit-text-fill-color:#f3efe6 !important;
  text-shadow:none !important;
  background:none !important;
  background-image:none !important;
}
html[data-reading="comfort"] body .card.panel .card-visual--gradient .card-media,
html[data-reading="comfort"] body .card.panel .card-visual--gradient .card-poster,
html[data-reading="comfort"] body .card.panel .card-visual--labo-vitesse .card-poster,
html[data-reading="comfort"] body .card.panel .card-visual--carte-blanche .card-poster{
  background:linear-gradient(145deg, #07050c 0%, #6d28d9 58%, #be185d 100%) !important;
  background-image:linear-gradient(145deg, #07050c 0%, #6d28d9 58%, #be185d 100%) !important;
}
/* Locked cards share one treatment. The age pill sits inside .card-media,
   so the filter is on the picture and the poster only and leaves the pill at full color. */
html body .card.panel.hs-locked .card-media > picture,
html body .card.panel.hs-locked .card-media > .card-poster,
html[data-reading="comfort"] body .card.panel.hs-locked .card-media > picture,
html[data-reading="comfort"] body .card.panel.hs-locked .card-media > .card-poster{
  filter:saturate(.55) brightness(.8) !important;
}
/* While the art pill is shown, the body chip would repeat the age. */
html body .card.panel.hs-locked .agechip,
html[data-reading="comfort"] body .card.panel.hs-locked .agechip{
  display:none !important;
}
html[data-reading="comfort"] .nav::before,
html[data-reading="comfort"] .nav::after{
  content:none !important;
  background:none !important;
  height:0 !important;
}
html[data-reading="comfort"] .nav.is-scrolled::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:100% !important;
  height:28px !important;
  pointer-events:none !important;
  background:linear-gradient(to bottom, #f7f3e8 0%, rgba(247,243,232,0) 100%) !important;
}
/* Age pill: one stylesheet (body chip above, lock pill here). */
.hs-lockwrap{
  position:absolute;
  left:8px;
  bottom:8px;
  top:auto;
  right:auto;
  z-index:4;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  width:max-content;
  max-width:calc(100% - 16px);
  height:auto;
  gap:0;
  margin:0;
  padding:0;
  background:transparent;
  pointer-events:none;
  border-radius:0;
}
.hs-pegi{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  background:#f3efe6;
  color:#1f1a2b;
  -webkit-text-fill-color:#1f1a2b;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  border-radius:999px;
  padding:4px 10px 4px 8px;
}
.hs-lock-ico{
  flex:none;
  width:14px;
  height:14px;
  display:block;
}
.hs-pegi-label{min-width:0}
html[data-reading="comfort"] .hs-pegi{
  background:#f3efe6 !important;
  color:#1f1a2b !important;
  -webkit-text-fill-color:#1f1a2b !important;
}

/* The bug button (huggy-bugs.js, deferred) is appended last in the control
   row. Hold its 44px slot until then so the other controls do not slide
   left. Not while onboarding is pending: the button mounts hidden there. */
html:not(.hg-onb-pending) #nav .right:not(:has(#hg-bug-open))::after{
  content:"";
  flex:0 0 44px;
  width:44px;
  height:44px;
}