/* Hero à deux pièces : extrait de index.html par scripts/extract-hero-scene.py, partagé home + pages SEO */
/* ====================================
       INTIIMIX LANDING — FRAMER EDITION
       ==================================== */

    :root{
        --bg: #0a0a0f;
        --bg-deep: #06060a;
        --cream: #f5f0e8;
        --cream-dim: rgba(245, 240, 232, 0.65);
        --cream-muted: rgba(245, 240, 232, 0.35);
        --gold: #d4a574;
        --gold-light: #e8c9a0;
        --secondary: #89013b;
        --accent: #ffd700;
        --level-1: #f472b6;
        --level-2: #60a5fa;
        --level-3: #fb923c;
        --level-4: #ef4444;
        --glass-border: rgba(212, 165, 116, 0.08);
        --font-display: 'Playfair Display', Georgia, serif;
        --font-body: 'Inter', -apple-system, sans-serif;
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --container: 1100px;
    }
/* ===== HERO IMMERSIF : salon plateau (desktop) + téléphone (mobile) ===== */
:root{--noir:#0c0509;--or:#c9a24a;--or-clair:#e8c878;--creme:#f5f0e8;
  --creme-dim:rgba(245,240,232,.62);--creme-faint:rgba(245,240,232,.34);
  --disp:'Playfair Display',Georgia,serif;--sans:'Inter',-apple-system,sans-serif}
/* Stats immersives (dans le hero, pas de barre plate) */
.h-stats{display:flex;align-items:stretch;gap:0;margin-top:2.4rem}
.h-stat{display:flex;flex-direction:column;gap:.15rem;padding:0 1.4rem;position:relative}
.h-stat:first-child{padding-left:0}
.h-stat + .h-stat::before{content:'';position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(201,162,74,.35),transparent)}
.h-stat b{font-family:var(--disp);font-size:1.7rem;font-weight:500;line-height:1;color:var(--or-clair);white-space:nowrap}
.h-stat span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--creme-faint)}
/* ===== Scène : géométrie EXACTE du jeu (image 16:9, overlays en % / cqw) ===== */
.stage{position:relative;width:100%;height:56.25vw;container-type:size;overflow:hidden;background:#0a0608}
.stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
/* Voile sombre sur le feu peint (le vrai feu animé prend le dessus) */
.stage-firemask{position:absolute;left:50%;top:83%;width:14cqw;height:13cqh;transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 50% 42% at 50% 42%, rgba(16,9,5,.9) 0%, rgba(16,9,5,.55) 46%, transparent 72%)}
/* Poussière d'or */
.stage-dust{position:absolute;inset:0;z-index:2;pointer-events:none}
.stage-dust span{position:absolute;left:var(--l);top:var(--t);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,rgba(255,228,155,.95),rgba(212,165,116,.35) 55%,transparent 72%);
  opacity:0;animation:dust var(--dur) ease-in-out var(--dl) infinite}
/* Feu de cheminée (canvas particules + lueur qui pulse) */
.stage-fire{position:absolute;left:50%;top:84%;width:13cqw;height:19cqh;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
.stage-fire__glow{position:absolute;inset:-25% -10%;border-radius:50%;
  background:radial-gradient(ellipse 50% 60% at 50% 60%, rgba(255,150,55,.4) 0%, rgba(255,100,35,.18) 45%, transparent 70%);
  animation:fireglow 2.3s ease-in-out infinite}
.stage-fire__canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
.stage.is-spinning .stage-fire__glow{animation-duration:1.4s}
/* Flammes de bougies (overlay screen, keyframes du jeu) */
.stage-flames{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen}
/* Gradation pour lisibilité du texte à gauche */
.stage-grade{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg, rgba(8,3,6,.92) 0%, rgba(8,3,6,.66) 24%, rgba(8,3,6,.12) 44%, transparent 58%)}
/* ===== Roue dans le miroir : 24.8vw @ (50.5% ; 39.9%) — exact jeu ===== */
.plateau-wheel{position:absolute;left:50.5%;top:39.9%;width:24.8%;aspect-ratio:1;
  transform:translate(-50%,-50%);z-index:5;container-type:size;display:flex;align-items:center;justify-content:center}
.plateau-wheel .plw-wheelbox{position:relative;width:100%;aspect-ratio:1;filter:drop-shadow(0 8px 25px rgba(0,0,0,.5))}
.plateau-wheel .plw-wheelglow{position:absolute;inset:-8%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,180,90,.10) 0%,rgba(137,1,59,.10) 45%,transparent 66%);
  animation:halo 4s ease-in-out infinite;pointer-events:none}
.plw-rotor>svg,.plw-wheelbox>svg.plw-overlay{position:absolute;inset:0;width:100%;height:100%}
.plw-rotor{position:absolute;inset:0;will-change:transform}
.plw-rotor.is-spinning{transition:transform 4.2s cubic-bezier(.12,.72,.06,1)}
.plw-iconlayer{position:absolute;inset:0;pointer-events:none}
.plw-iconlayer img{position:absolute;top:50%;left:50%;width:13.2cqw;height:13.2cqw;margin:-6.6cqw 0 0 -6.6cqw;
  transform:rotate(var(--a)) translateY(-36.6cqw);filter:drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.55))}
.plw-shade{position:absolute;inset:4.5%;border-radius:50%;opacity:0;transition:opacity .45s ease;pointer-events:none;
  background:conic-gradient(from -14deg,rgba(255,226,138,.10) 0deg 28deg,rgba(6,3,4,.62) 32deg 356deg,rgba(255,226,138,.10) 360deg)}
.plw-shade.is-on{opacity:1}
.plw-pointer{position:absolute;top:-3.5cqw;left:50%;transform:translateX(-50%);width:8.5cqw;height:auto;z-index:3;transform-origin:50% 12%;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(216,50,62,.4));animation:ptr 2.4s ease-in-out infinite}
.plw-pointer.is-ticking{animation:tick .14s ease-in-out infinite alternate}
/* ===== Texte éditorial ===== */
.hero-text{position:absolute;left:clamp(1.5rem,6vw,5.5rem);top:50%;transform:translateY(-50%);z-index:10;max-width:470px}
.h-over{display:flex;align-items:center;gap:.9rem;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--or);margin-bottom:1.7rem}
.h-over::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,var(--or),transparent)}
.h-title{font-family:var(--disp);font-weight:400;font-size:clamp(2.6rem,4.2vw,4rem);line-height:1.07;letter-spacing:-.01em;margin-bottom:1.6rem}
.h-title em{font-style:italic;color:var(--or-clair);font-weight:500}
.h-sub{font-size:1rem;line-height:1.8;color:var(--creme-dim);max-width:390px;margin-bottom:2.2rem}
.h-sub b{color:var(--creme);font-weight:400}
.h-cta{display:inline-flex;align-items:center;gap:.85rem;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--noir);font-weight:500;padding:1.05rem 2rem;border-radius:2px;
  background:linear-gradient(155deg,#f0d28a,#c9a24a 55%,#9c7320);
  box-shadow:0 14px 40px rgba(120,20,55,.3),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.h-cta:hover{transform:translateY(-2px);box-shadow:0 20px 54px rgba(120,20,55,.42),0 0 30px rgba(255,185,106,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.h-cta svg{width:20px;height:10px}
/* CTA flottant : action « jouer » persistante après le héro (finding audit UX conversion) */
.h-cta--float{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 1.4rem);
  transform:translateX(-50%) translateY(160%);z-index:35;white-space:nowrap;
  box-shadow:0 14px 40px rgba(120,20,55,.42),0 0 30px rgba(255,185,106,.22),inset 0 1px 0 rgba(255,255,255,.4);
  opacity:0;pointer-events:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.h-cta--float.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.h-cta--float:hover{transform:translateX(-50%) translateY(-2px)}
@media (max-width:480px){.h-cta--float{padding:.95rem 1.6rem;font-size:.72rem;letter-spacing:.18em}}
@media (prefers-reduced-motion:reduce){.h-cta--float{transition:opacity .2s linear}}
.h-note{margin-top:1.3rem;font-size:.72rem;color:var(--creme-faint)}
/* ===== GageModal : s'ouvre quand la roue tombe sur Gage (comme en jeu) ===== */
.gage-overlay{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:2rem;
  background:rgba(6,3,4,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);pointer-events:none;
  transition:background .55s ease,backdrop-filter .55s ease,-webkit-backdrop-filter .55s ease}
.gage-overlay.is-open{background:rgba(6,3,4,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.gage-modal{position:relative;width:min(440px,88vw);height:min(500px,80vh);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.75),0 0 0 1px rgba(202,162,74,.18),inset 0 0 40px rgba(255,150,90,.08);
  opacity:0;transform:translateY(18px) scale(.955);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.34,1.56,.64,1)}
.gage-overlay.is-open .gage-modal{opacity:1;transform:none}
.gm-decor{position:absolute;inset:0;background:url('/images/classic/salon-cheminee-hd.jpg') center 30%/cover no-repeat}
.gm-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,9,.42) 0%,rgba(9,7,8,.6) 34%,rgba(7,5,6,.88) 64%,rgba(5,4,4,.96) 100%)}
.gm-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 58% 44% at 50% 30%,rgba(210,59,70,.16) 0%,transparent 64%);animation:gmglow 8s ease-in-out infinite}
.gm-filet{position:absolute;inset:8px;border:1px solid rgba(202,162,74,.3);border-radius:13px;pointer-events:none}
.gm-fl{position:absolute;font-size:1rem;color:rgba(232,200,120,.6);text-shadow:0 1px 4px rgba(0,0,0,.8)}
.gm-fl.tl{top:12px;left:18px}
.gm-fl.br{bottom:12px;right:18px;transform:rotate(180deg)}
.gm-wrap{position:absolute;inset:0;display:flex;flex-direction:column;padding:26px 26px 22px;text-align:center}
.gm-head{display:flex;align-items:center;gap:12px;padding-bottom:13px;position:relative}
.gm-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(202,162,74,.55) 22%,rgba(202,162,74,.55) 78%,transparent)}
.gm-medal{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,rgba(74,32,18,.96),rgba(15,7,5,.98));border:2px solid rgba(202,162,74,.85);
  box-shadow:0 0 22px rgba(210,59,70,.28),inset 0 0 12px rgba(255,190,120,.22)}
.gm-medal svg{width:21px;height:21px}
.gm-htxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:left}
.gm-seg{font-size:.62rem;letter-spacing:2.2px;text-transform:uppercase;color:rgba(232,200,120,.92)}
.gm-player{font-family:var(--disp);font-size:1.08rem;line-height:1.2;color:#fff3e0}
.gm-player b{color:#e8c878;font-weight:700}
.gm-pts{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:3px;padding:6px 12px;border-radius:12px;
  background:linear-gradient(135deg,#f0d28a,#caa24a);color:#2a1305;box-shadow:0 2px 10px rgba(202,162,74,.28),inset 0 1px 0 rgba(255,250,230,.5)}
.gm-pts b{font-size:1.02rem;font-weight:800}
.gm-pts span{font-size:.62rem;font-weight:700}
.gm-mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:13px}
.gm-scene{font-size:.6rem;letter-spacing:2.6px;text-transform:uppercase;color:rgba(232,200,120,.78)}
.gm-gage{font-family:var(--disp);font-size:1.42rem;line-height:1.38;color:#fff3e0;text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.5)}
.gm-acts{display:flex;gap:10px;padding-top:12px;position:relative}
.gm-acts::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(202,162,74,.4) 22%,rgba(202,162,74,.4) 78%,transparent)}
.gm-refuse{flex:0 0 auto;padding:12px 18px;border-radius:50px;border:1px solid rgba(202,162,74,.38);background:rgba(16,7,5,.55);color:rgba(255,232,196,.78);font-family:var(--sans);font-size:.8rem;cursor:pointer;transition:border-color .2s,color .2s}
.gm-refuse:hover{border-color:rgba(202,162,74,.6);color:rgba(255,232,196,.95)}
.gm-go{flex:1;padding:12px;border:0;border-radius:50px;font-family:var(--sans);font-size:.9rem;font-weight:800;color:#2a1305;cursor:pointer;
  background:linear-gradient(160deg,#f0d28a,#caa24a 50%,#9c7320);box-shadow:0 5px 18px rgba(0,0,0,.4),0 0 22px rgba(202,162,74,.3),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .12s}
.gm-go:hover{transform:translateY(-1px)}
.gm-go.is-pressed,.gm-refuse.is-pressed{transform:scale(.96);filter:brightness(1.1)}
@media (max-width:900px){
  .stage,.gage-overlay{display:none!important}
  .mh{position:absolute}
  .phone-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
    min-height:100dvh;padding:5rem 1.5rem 3.5rem;text-align:center;
    background:radial-gradient(ellipse 90% 55% at 50% 26%, rgba(137,1,59,.34) 0%, rgba(212,165,116,.05) 55%, transparent 74%), #0a0608}
  .ph-visual{display:flex;justify-content:center;position:relative}
  .phone-hero .hero-phone-wrap{width:min(72vw,230px)}
  .phone-text{max-width:none;padding-top:.4rem}
  .phone-text .h-names{justify-content:center}
  .phone-text .h-names__lab{flex-basis:100%;text-align:center;margin:0 0 .1rem}
  .phone-text .h-cta{margin-bottom:.2rem}
  .phone-text--stats{padding-top:0}
  .phone-hero .sage--phone{margin:0 auto .4rem}
  .phone-text .h-over{justify-content:center}.phone-text .h-over::before{display:none}
  .phone-text .h-sub{margin-left:auto;margin-right:auto}
  .phone-text .h-stats{justify-content:center}
  .phone-text .h-stat{padding:0 .85rem}
  .phone-text .h-stat b{font-size:1.35rem}
}
@media (max-width:900px){
  .mh-nav a:not(.mh-enter){display:none}
  .stage{height:auto;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:7vh}
  .stage-bg{position:fixed;object-fit:cover;object-position:52% 38%}
  .stage-firemask,.stage-fire,.stage-flames,.stage-dust{position:fixed}
  .stage-grade{background:linear-gradient(180deg,transparent 0%,rgba(8,3,6,.42) 44%,rgba(8,3,6,.92) 78%)}
  .plateau-wheel{position:fixed;left:50%;top:31%;width:62vw}
  .hero-text{position:static;transform:none;max-width:none;text-align:center;padding:0 1.5rem}
  .h-over{justify-content:center}.h-over::before{display:none}
  .h-sub{margin-left:auto;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
  .stage-fire__glow,.stage-dust span,.plw-pointer,.plateau-wheel .plw-wheelglow,.af-glow,.af-core{animation:none}
  .plw-rotor.is-spinning{transition-duration:.6s}
}
:root{
  --noir:#0a0608; --or-pale:#f0d9a8; --line:rgba(232,200,120,.14);
  --l1:#e8b96a; --l2:#e0895f; --l3:#d1477e; --l4:#e0324f;
  --seg-gage:#1A3C34; --seg-caprice:#8E4452; --seg-mini:#1E2A44; --seg-truth:#4B2C5E; --seg-bar:#6B4423; --seg-massage:#3D5A4A;
  --tendre:#e8b96a; --mid:#e0895f; --chaud:#d1477e; --torride:#e0324f; --steel:#5a86ad; --rose:#c1808c;
}
/* ===== Le hero à deux pièces (28/08/2026) : interrupteur Boudoir / Donjon ===== */
.stage-bg{transition:opacity .8s ease}
.stage-bg--donjon{opacity:0}
.stage[data-room=donjon] .stage-bg--donjon{opacity:1}
.stage[data-room=donjon] .stage-bg--boudoir{opacity:0}
.stage[data-room=donjon] .stage-firemask,.stage[data-room=donjon] .stage-fire,.stage[data-room=donjon] .stage-flames,.stage[data-room=donjon] .stage-dust{display:none}
.plateau-wheel{transition:top .8s ease}
.stage[data-room=donjon] .plateau-wheel{top:52.5%}
.stage[data-room=donjon] path[fill="url(#ixseg0P)"]{fill:url(#ixsegD0P)}
.stage[data-room=donjon] path[fill="url(#ixseg1P)"]{fill:url(#ixsegD1P)}
.stage[data-room=donjon] path[fill="url(#ixseg2P)"]{fill:url(#ixsegD2P)}
.stage[data-room=donjon] path[fill="url(#ixseg3P)"]{fill:url(#ixsegD3P)}
.stage[data-room=donjon] path[fill="url(#ixseg4P)"]{fill:url(#ixsegD4P)}
.stage[data-room=donjon] path[fill="url(#ixseg5P)"]{fill:url(#ixsegD5P)}
.stage[data-room=donjon] path[fill="url(#ixseg6P)"]{fill:url(#ixsegD6P)}
.stage[data-room=donjon] path[fill="url(#ixseg7P)"]{fill:url(#ixsegD7P)}
.stage[data-room=donjon] path[fill="url(#ixseg8P)"]{fill:url(#ixsegD8P)}
.stage[data-room=donjon] path[fill="url(#ixseg9P)"]{fill:url(#ixsegD9P)}
.stage[data-room=donjon] path[fill="url(#ixseg10P)"]{fill:url(#ixsegD10P)}
.stage[data-room=donjon] path[fill="url(#ixseg11P)"]{fill:url(#ixsegD11P)}
.stage[data-room=donjon] .plateau-wheel path[stroke="#caa24a"]{stroke:#a06cff}
.stage .only-d{display:none!important}
.stage[data-room=donjon] .only-d{display:revert!important}
.stage[data-room=donjon] .h-over.only-d{display:flex!important}
.stage[data-room=donjon] .h-cta.only-d{display:inline-flex!important}
.stage[data-room=donjon] .only-b{display:none!important}
.stage[data-room=donjon] .h-over{color:#d9bdff}
.stage[data-room=donjon] .h-over::before{background:#a06cff}
.stage[data-room=donjon] .h-title em,.stage[data-room=donjon] .h-stat b{color:#d9bdff}
.stage[data-room=donjon] .h-cta{background:linear-gradient(135deg,#d9bdff,#a06cff);color:#1a0a2a}
.stage[data-room=donjon] .gm-decor{background-image:url('/images/classic/donjon-plateau-hd.jpg')}
.stage[data-room=donjon] .gage-modal{border-color:rgba(160,108,255,.55)}
.stage[data-room=donjon] .gm-go{background:linear-gradient(135deg,#d9bdff,#a06cff);color:#1a0a2a}
.stage[data-room=donjon] .gm-scene,.stage[data-room=donjon] .gm-player b{color:#d9bdff}
/* Le hero mobile (téléphone) à deux pièces */
.phone-hero .only-d{display:none!important}
.phone-hero[data-room=donjon] .only-d{display:revert!important}
.phone-hero[data-room=donjon] .h-over.only-d{display:flex!important}
.phone-hero[data-room=donjon] .h-cta.only-d{display:inline-flex!important}
.phone-hero[data-room=donjon] .only-b{display:none!important}
.phone-hero[data-room=donjon] .h-over,.phone-hero[data-room=donjon] .h-title em,.phone-hero[data-room=donjon] .h-stat b{color:#d9bdff}
.phone-hero[data-room=donjon] .h-over::before{background:#a06cff}
.phone-hero[data-room=donjon] .h-cta{background:linear-gradient(135deg,#d9bdff,#a06cff);color:#1a0a2a}
.phone-hero[data-room=donjon] path[fill="url(#ixseg0)"]{fill:url(#ixsegD0)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg1)"]{fill:url(#ixsegD1)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg2)"]{fill:url(#ixsegD2)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg3)"]{fill:url(#ixsegD3)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg4)"]{fill:url(#ixsegD4)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg5)"]{fill:url(#ixsegD5)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg6)"]{fill:url(#ixsegD6)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg7)"]{fill:url(#ixsegD7)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg8)"]{fill:url(#ixsegD8)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg9)"]{fill:url(#ixsegD9)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg10)"]{fill:url(#ixsegD10)}
.phone-hero[data-room=donjon] path[fill="url(#ixseg11)"]{fill:url(#ixsegD11)}
/* La roue du Donjon (celle du jeu) : segments violet/noir, jante d'acier à pointes, moyeu X */
.plw-skin-donjon{display:none}
.plw-donjon-rim{display:none}
.stage[data-room=donjon] .plw-rotor>svg:not(.plw-skin-donjon){display:none}
.stage[data-room=donjon] .plw-skin-donjon{display:block}
.stage[data-room=donjon] .plw-donjon-rim{display:block}
.stage[data-room=donjon] .plw-overlay>circle:not(.plw-keep),.stage[data-room=donjon] .plw-overlay>g:not(.plw-donjon-rim){display:none}
.stage[data-room=donjon] .plw-wheelglow{filter:hue-rotate(250deg) saturate(.9)}
/* Vos prénoms : deux champs discrets, le gage s'écrit pour vous */
.h-names{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .6rem;margin:0 0 1.4rem;font-size:.78rem;color:var(--creme-faint,rgba(245,240,232,.5))}
.h-names__lab{letter-spacing:.18em;text-transform:uppercase;font-size:.69rem;color:var(--or);margin-right:.2rem}
.h-name{width:6.2rem;padding:.42rem .6rem;border-radius:.3rem;border:1px solid rgba(212,165,116,.35);background:rgba(10,6,8,.45);color:#f5ead2;font:inherit;font-size:.92rem;font-family:var(--disp,'Playfair Display',serif);letter-spacing:.01em;transition:border-color .2s}
.h-name:focus{outline:none;border-color:rgba(240,217,173,.9);background:rgba(10,6,8,.7)}
.h-names__amp{font-family:var(--disp,'Playfair Display',serif);color:var(--or-clair,#f0d9ad);font-size:1rem}
.h-names__note{font-style:italic;margin-left:.2rem}
.stage[data-room=donjon] .h-names__lab,.stage[data-room=donjon] .h-names__amp{color:#d9bdff}
.stage[data-room=donjon] .h-name{border-color:rgba(160,108,255,.45)}
.phone-hero[data-room=donjon] .h-names__lab,.phone-hero[data-room=donjon] .h-names__amp{color:#d9bdff}
/* La roue à la main */
.plateau-wheel{cursor:pointer}
.plw-hint{position:absolute;z-index:9;left:50.5%;top:calc(39.9% + 15.5cqw);transform:translate(-50%,0);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,240,232,.75);padding:.5rem .9rem;border:1px solid rgba(212,165,116,.35);border-radius:100px;background:rgba(10,6,8,.45);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .5s ease,top .8s ease}
.stage.is-idle .plw-hint{opacity:1;animation:plwHint 2.2s ease-in-out infinite}
.stage[data-room=donjon] .plw-hint{top:calc(52.5% + 15.5cqw);border-color:rgba(160,108,255,.45);color:#e6d6ff}
/* Les portes de la bascule : deux battants */
.stage-doors{position:absolute;inset:0;z-index:60;pointer-events:none}
.stage-door{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(90deg,#160d12,#0d0709);box-shadow:inset 0 0 60px rgba(0,0,0,.8);transform:translateX(-102%);transition:transform .55s cubic-bezier(.7,0,.3,1)}
.stage-door--l{left:0}
.stage-door--r{right:0;transform:translateX(102%);background:linear-gradient(270deg,#160d12,#0d0709)}
.stage-door::after{content:'';position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,rgba(212,165,116,.7),transparent)}
.stage-door--l::after{right:0}
.stage-door--r::after{left:0}
.stage[data-room=donjon] .stage-door::after{background:linear-gradient(180deg,transparent,rgba(160,108,255,.8),transparent)}
.stage-doors.is-closed .stage-door{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.stage-door{transition:none}.stage.is-idle .plw-hint{animation:none}}
.stage[data-room=donjon] .ix-slider__q em{color:#d9bdff}
.stage[data-room=boudoir] .ix-slider__end--b,.phone-hero[data-room=boudoir] .ix-slider__end--b{color:#f0d9ad}
.stage[data-room=donjon] .ix-slider__end--d,.phone-hero[data-room=donjon] .ix-slider__end--d{color:#e6d6ff}
.stage[data-room=donjon] .ix-slider__end--b,.phone-hero[data-room=donjon] .ix-slider__end--b{left:16px}
.stage[data-room=donjon] .ix-slider__end--d,.phone-hero[data-room=donjon] .ix-slider__end--d{right:56px}
.stage[data-room=donjon] .ix-slider__knob,.phone-hero[data-room=donjon] .ix-slider__knob{left:calc(100% - 41px);background:linear-gradient(135deg,#d9bdff,#a06cff)}
.stage[data-room=donjon] .ix-slider__knob::after,.phone-hero[data-room=donjon] .ix-slider__knob::after{background:rgba(26,10,42,.4)}
/* ===== La question dans le bloc (décision fondateur 28/08) : « Ce soir, plutôt caresse… ou fessée ? » ===== */
.h-choice{font-family:var(--disp,'Playfair Display',serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:1.05rem;color:rgba(245,240,232,.78);display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem;margin-bottom:1.3rem}
.h-choice::before{display:none}
.h-choice__w{font:inherit;font-style:italic;font-weight:600;font-size:1.25rem;background:none;border:0;padding:.5rem .15rem;margin:-.5rem 0;cursor:pointer;color:rgba(245,240,232,.5);border-bottom:2px solid transparent;transition:color .25s,border-color .25s,text-shadow .25s;line-height:1.1}
.h-choice__w:focus-visible{outline:2px solid #f0d9ad;outline-offset:3px;border-radius:3px}
.h-choice__w--b[aria-pressed=true]{color:#f0d9ad;border-bottom-color:#d4a574;text-shadow:0 0 18px rgba(212,165,116,.55)}
.h-choice__w--d[aria-pressed=true]{color:#d9bdff;border-bottom-color:#a06cff;text-shadow:0 0 18px rgba(160,108,255,.6)}
.h-choice__w:hover{color:#fff6ec}
.h-names{margin-bottom:1.2rem}
/* Le bloc de texte, plus riche (question, titre, phrase, table, prénoms) : resserré pour tenir dans la scène 16/9 */
@media (min-width:1024px){
  .stage .hero-text{max-width:540px}
  .stage .h-title{font-size:clamp(2.3rem,3.4vw,3.2rem);margin-bottom:1.1rem}
  .stage .h-sub{font-size:.95rem;line-height:1.6;max-width:440px;margin-bottom:1rem}
  .stage .h-choice{margin-bottom:1rem}
  .stage .h-table{margin:0 0 .8rem}
  .stage .h-names{margin-bottom:1rem}
  .stage .h-note{margin-top:.9rem}
  .stage .h-stats{margin-top:1.5rem}
}
.h-choice--phone{justify-content:center;margin:0 auto .9rem;padding:0 1rem;font-size:1.1rem}
/* ===== Votre table : la plaque (desktop) et les pastilles (mobile) : 2-4 joueurs, orientations, rôles ===== */
.table-plaque{position:absolute;z-index:7;right:4%;top:50%;transform:translateY(-50%);width:min(27%,300px);padding:16px 18px 14px;border-radius:14px;background:linear-gradient(160deg,rgba(24,12,16,.82),rgba(12,8,10,.9));border:1px solid rgba(212,165,116,.4);box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,240,205,.12);backdrop-filter:blur(6px)}
.table-plaque__sur{display:block;font-size:.69rem;letter-spacing:.26em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
.table-plaque__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.table-plaque__rows li{display:flex;align-items:center;gap:12px}
.table-plaque__ico{flex:0 0 auto;width:58px;height:22px;color:var(--or2);display:inline-flex;align-items:center}
.table-plaque__ico svg{width:100%;height:100%}
.table-plaque__rows b{display:block;font-family:var(--disp,'Playfair Display',serif);font-weight:600;font-size:.98rem;color:#fff6ec;line-height:1.15}
.table-plaque__rows small{display:block;font-size:.7rem;color:rgba(245,240,232,.55)}
.table-plaque__promesse{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(212,165,116,.25);font-size:.78rem;line-height:1.45;color:rgba(245,240,232,.8)}
.table-plaque__promesse em{font-style:italic;color:var(--or2)}
.stage[data-room=donjon] .table-plaque{border-color:rgba(160,108,255,.45)}
.stage[data-room=donjon] .table-plaque__sur,.stage[data-room=donjon] .table-plaque__promesse em,.stage[data-room=donjon] .table-plaque__ico{color:#d9bdff}
@media (max-width:1023px){.table-plaque{display:none}}
@media (max-width:1023px){
  .table-chips{list-style:none;margin:.9rem auto 0;padding:0 1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:420px}
  .table-chips li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:100px;border:1px solid rgba(212,165,116,.35);background:rgba(20,12,16,.7);font-size:.72rem;letter-spacing:.04em;color:#f5ead2}
  .table-chips .table-plaque__ico{width:44px;height:16px}
  .phone-hero[data-room=donjon] .table-chips li{border-color:rgba(160,108,255,.45)} .phone-hero[data-room=donjon] .table-chips .table-plaque__ico{color:#d9bdff}
}
/* ===== « J'ai pas envie d'être sage… » : l'interrupteur du Donjon, théâtral ===== */
.sage{display:inline-flex;align-items:center;gap:12px;margin-top:1.1rem;padding:10px 14px;border-radius:12px;border:1px solid rgba(212,165,116,.4);background:linear-gradient(160deg,rgba(24,12,16,.75),rgba(12,8,10,.85));cursor:pointer;user-select:none;transition:border-color .3s,box-shadow .3s;width:max-content;max-width:100%;position:relative}
.sage:hover{border-color:rgba(226,192,137,.8)}
.sage__box{position:absolute;opacity:0;width:0;height:0}
.sage__mark{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1.5px solid rgba(212,165,116,.7);background:rgba(10,6,8,.6);position:relative;transition:background .3s,border-color .3s}
.sage__mark::after{content:'';position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #1a0a2a;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .25s}
.sage__txt{font-family:var(--disp,'Playfair Display',serif);font-style:italic;font-size:1.05rem;color:#f5ead2;line-height:1.2}
.sage__on{display:none;color:#d9bdff}
.sage__off{display:inline}
.sage:has(.sage__box:checked){border-color:rgba(160,108,255,.75);box-shadow:0 0 28px rgba(160,108,255,.25)}
.sage:has(.sage__box:checked) .sage__mark{background:linear-gradient(135deg,#d9bdff,#a06cff);border-color:#d9bdff}
.sage:has(.sage__box:checked) .sage__mark::after{transform:rotate(45deg) scale(1)}
.sage:has(.sage__box:checked) .sage__on{display:inline}
.sage:has(.sage__box:checked) .sage__off{display:none}
.sage__box:focus-visible + .sage__mark{outline:2px solid #f0d9ad;outline-offset:2px}
.sage--phone{margin:0 auto .9rem;display:flex;justify-content:center}
/* Le sceau : le Donjon s'ouvre avec le jeu complet (ou le Pass 30 jours) */
.stage[data-room=donjon] .h-stats.only-d,.phone-hero[data-room=donjon] .h-stats.only-d{display:flex!important}
.seal{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:.5rem .95rem .55rem;border:2px solid #a06cff;border-radius:8px;box-shadow:inset 0 0 0 3px rgba(12,8,20,.9),inset 0 0 0 4px rgba(160,108,255,.55),0 12px 30px rgba(0,0,0,.45);background:rgba(18,10,28,.72);color:#d9bdff;text-align:center;line-height:1.1;transform:rotate(-2.5deg)}
.seal__big{font-family:var(--disp,'Playfair Display',serif);font-weight:700;font-size:1.12rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.seal__sub{font-size:.64rem;letter-spacing:.06em;color:rgba(230,214,255,.78);white-space:nowrap}
.sage-row{display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;margin-top:1.1rem}
.sage-row .sage{margin-top:0}
.seal--desk{margin:0;padding:.42rem .8rem .46rem}
.seal--desk .seal__big{font-size:.98rem;letter-spacing:.15em}
.seal--desk .seal__sub{font-size:.6rem}
.stage[data-room=donjon] .seal--desk.only-d{display:inline-flex!important}
.seal-row{display:flex;justify-content:center;margin:0 0 1rem}
.phone-hero[data-room=donjon] .seal-row.only-d{display:flex!important}
.seal--phone{transform:rotate(-2deg);padding:.4rem .8rem .45rem}
.seal--phone .seal__big{font-size:.95rem}
@media (max-width:1023px){.seal--desk{margin:.9rem 0 0}}
/* l'arrivée théâtrale : un éclair améthyste, la scène qui entre en zoom, la roue qui descend */
.stage-flash{position:absolute;inset:0;z-index:59;pointer-events:none;background:radial-gradient(60% 60% at 50% 45%,rgba(160,108,255,.55),rgba(160,108,255,0) 70%);opacity:0}
.stage.is-arriving .stage-flash{animation:ixFlash 1.1s ease-out}
.stage.is-arriving .stage-bg--donjon{animation:ixZoomIn 1.4s cubic-bezier(.2,.7,.2,1)}
.stage.is-arriving .plateau-wheel{animation:ixDrop 1.1s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.stage.is-arriving .stage-flash,.stage.is-arriving .stage-bg--donjon,.stage.is-arriving .plateau-wheel{animation:none}}
@keyframes dust{0%{opacity:0;transform:translate(0,8px) scale(.5)}18%{opacity:var(--o)}
  50%{transform:translate(var(--dx),-26px) scale(1)}82%{opacity:var(--o)}100%{opacity:0;transform:translate(0,-52px) scale(.5)}}
@keyframes fireglow{0%,100%{opacity:.75;transform:scale(1)}40%{opacity:1;transform:scale(1.05)}
  62%{opacity:.82;transform:scale(.98)}80%{opacity:.95;transform:scale(1.03)}}
@keyframes halo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.04)}}
@keyframes ptr{0%,100%{filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(216,50,62,.4))}
  50%{filter:drop-shadow(0 2px 7px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,90,90,.6))}}
@keyframes tick{from{transform:translateX(-50%) rotate(-3deg)}to{transform:translateX(-50%) rotate(3deg)}}
@keyframes gmglow{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes plwHint{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
@keyframes ixFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes ixZoomIn{0%{transform:scale(1.08);filter:brightness(.25)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes ixDrop{0%{margin-top:-2.5%;filter:brightness(.4)}100%{margin-top:0;filter:brightness(1)}}