/* ==========================================================================
   Héros de l'accueil : scène animée en CSS 3D (carte → dés → Loup-garou), sans bibliothèque.
   Quatre calques « scène » superposés (tapis, carte, dés, loup-garou) partagent exactement la même caméra :
   chacun s'efface en fondu par son opacité, sans casser la 3D (l'opacité s'applique au calque, pas aux objets).
   Les dimensions dérivent de --cwm (largeur de la carte du héros, en px) posée par stage.js.
   ========================================================================== */

/* ----- Mise en page : texte à gauche, scène à droite (ordinateur) ; texte puis scène (mobile) ----- */
.hero { overflow-x: clip; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.hero__art { min-width: 0; }
@media (min-width: 52rem) { .hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(1.5rem, 4vw, 3rem); } }
.hero-stage { display: grid; gap: .8rem; justify-items: center; }

/* ----- Texte sous la scène + commandes ----- */
.scene__line { margin: 0; min-height: 2.2rem; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.3rem, 3vw, 1.8rem); letter-spacing: var(--display-tracking); text-align: center; text-wrap: balance; }
.stage-controls { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.stage-controls[hidden] { display: none; }
.stage-pause { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); cursor: pointer; font-size: .8rem; line-height: 1; display: inline-grid; place-items: center; transition: background-color .15s, color .15s; }
.stage-pause:hover { background: var(--ink); color: var(--bg); }
.stage-dots { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.stage-dot { min-height: 2.75rem; padding: .3rem .85rem; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.stage-dot:hover { border-color: var(--ink); }
.stage-dot[aria-current='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ----- Boîte de la scène ----- */
.scene { --cwm: 170px; --cw: var(--cwm); --ch: calc(var(--cw) * 1.3968); --ct: max(2px, calc(var(--cw) * .016)); --cr: calc(var(--cw) * .06); --tilt: 40deg;
  --sw: 400px; --fw: min(calc(var(--cw) * 2.28), calc(var(--sw) * .88)); --fh: calc(var(--cw) * 2.6);
  position: relative; width: 100%; aspect-ratio: 1 / .95; min-height: 17rem; max-height: calc(100svh - 17.5rem); pointer-events: none; }
.stage { position: absolute; inset: 0; perspective: calc(var(--cw) * 7); perspective-origin: 50% 30%; }
.stage--sc { visibility: hidden; opacity: 0; will-change: opacity; }
.world { position: absolute; left: 50%; top: 49%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt)); }

/* Tapis de feutrine vert profond : grain fin, lumière en haut à gauche, bordure discrète surpiquée */
.felt { position: absolute; left: calc(var(--fw) * -.5); top: calc(var(--fh) * -.5); width: var(--fw); height: var(--fh);
  border-radius: calc(var(--cw) * .09); transform: translateZ(-1px);
  background:
    radial-gradient(ellipse 70% 55% at 26% 18%, rgba(235, 255, 225, .24), transparent 70%),
    radial-gradient(ellipse 80% 60% at 85% 95%, rgba(0, 0, 0, .34), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 1 0 0 0 0 .85 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    #0e4a36;
  box-shadow: inset 0 0 0 calc(var(--cw) * .022) rgba(0, 0, 0, .22), 0 calc(var(--cw) * .025) 0 #08301f, 0 calc(var(--cw) * .14) calc(var(--cw) * .22) rgba(0, 0, 0, .38); }
.felt::after { content: ''; position: absolute; inset: calc(var(--cw) * .085); border: max(1px, calc(var(--cw) * .008)) dashed rgba(232, 244, 226, .34); border-radius: calc(var(--cw) * .05); }

/* Ombres posées sur le tapis (plan z = 0) : matrices calculées en JS ; découpées aux bords du tapis */
.shadows, .dice-shadows { position: absolute; left: 0; top: 0; width: 0; height: 0;
  clip-path: inset(calc(var(--fh) * -.5 + var(--cw) * .03) calc(var(--fw) * -.5 + var(--cw) * .03) calc(var(--fh) * -.5 + var(--cw) * .03) calc(var(--fw) * -.5 + var(--cw) * .03) round calc(var(--cw) * .06)); }
.shadow { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); transform-origin: 0 0; will-change: transform, opacity; }
.shadow i { display: block; width: 100%; height: 100%; border-radius: var(--cr); background: #04140c; }
.shadow--far { filter: blur(calc(var(--cw) * .13)); }
.shadow--mid { filter: blur(calc(var(--cw) * .06)); }
.shadow--near { filter: blur(calc(var(--cw) * .022)); }
.shadow--contact { filter: blur(calc(var(--cw) * .006)); }

/* Carte : deux faces distinctes (backface-visibility) + tranche ivoire */
.card3d { position: absolute; left: calc(var(--cw) * -.5); top: calc(var(--ch) * -.5); width: var(--cw); height: var(--ch); transform-style: preserve-3d; will-change: transform; --lit: 0; --dim: 0; }
.card3d__face { position: absolute; inset: 0; border-radius: var(--cr); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fbf5e9 center / 100% 100% no-repeat; }
.card3d__face svg { display: block; width: 100%; height: 100%; }
.card3d__back { transform: translateZ(calc(var(--ct) * .5)); }
.card3d__front { transform: rotateY(180deg) translateZ(calc(var(--ct) * .5)); }   /* pré-retournée : lisible, jamais en miroir */
.card3d__face::before, .card3d__face::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.card3d__face::before { background: linear-gradient(120deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%); opacity: var(--lit); }
.card3d__face::after { background: #0a1030; opacity: var(--dim); }
.card-txt { font-family: var(--font-display); font-weight: var(--display-weight); }
.card3d__edge { position: absolute; background: linear-gradient(#efe6d0, #d9cdb0); }
.e-l, .e-r { width: var(--ct); height: calc(var(--ch) - 2 * var(--cr)); top: var(--cr); left: calc(50% - var(--ct) / 2); }
.e-l { transform: translateX(calc(var(--cw) * -.5)) rotateY(90deg); } .e-r { transform: translateX(calc(var(--cw) * .5)) rotateY(90deg); }
.e-t, .e-b { height: var(--ct); width: calc(var(--cw) - 2 * var(--cr)); left: var(--cr); top: calc(50% - var(--ct) / 2); }
.e-t { transform: translateY(calc(var(--ch) * -.5)) rotateX(90deg); } .e-b { transform: translateY(calc(var(--ch) * .5)) rotateX(90deg); }

/* ----- Scène 2 : dés (vrais cubes) et main ----- */
.die { --ds: calc(var(--cw) * .36); --hs: calc(var(--ds) / 2); position: absolute; left: calc(var(--ds) * -.5); top: calc(var(--ds) * -.5); width: var(--ds); height: var(--ds); transform-style: preserve-3d; will-change: transform; }
.die__f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 19%; overflow: hidden; --lit: 0; --dim: 0; }
.die__f svg { display: block; width: 100%; height: 100%; }
.die__f::before, .die__f::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.die__f::before { background: linear-gradient(120deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%); opacity: var(--lit); }
.die__f::after { background: #0a1030; opacity: var(--dim); }
.dsh { position: absolute; left: 0; top: 0; width: calc(var(--cw) * .36); height: calc(var(--cw) * .36); margin: calc(var(--cw) * -.18) 0 0 calc(var(--cw) * -.18); will-change: transform, opacity; }
.dsh i { display: block; width: 100%; height: 100%; border-radius: 22%; background: #04140c; }
.dsh--soft { filter: blur(calc(var(--cw) * .06)); } .dsh--contact { filter: blur(calc(var(--cw) * .012)); }
.hand { --hw: calc(var(--cw) * 1.25); position: absolute; left: 0; top: 0; width: var(--hw); height: calc(var(--hw) * .718); margin: calc(var(--hw) * -.436) 0 0 calc(var(--hw) * -.385); transform-origin: 38.5% 60.7%; opacity: 0; will-change: transform, opacity; }
.hand svg { display: block; width: 100%; height: 100%; }

/* ----- Scène 3 : cartes de rôle en cercle (dos / Loup-garou / Villageois) ----- */
.card3d--r, .shadow--r { --cw: calc(var(--cwm) * .56); --ch: calc(var(--cw) * 1.3968); --ct: max(2px, calc(var(--cw) * .016)); --cr: calc(var(--cw) * .06); }
.card3d__back--img { background-image: url('../img/card-back.svg'); }
.shadows--r { clip-path: none; }

/* ----- Nuit : ciel derrière le tapis, teinte / étoiles / lune / soleil / ondes du hurlement au-dessus ----- */
.night__sky { position: absolute; inset: 0; border-radius: var(--radius-lg); background: linear-gradient(#0b1234, #1d2c66); opacity: 0; }
.night__fx { position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; }
.night__tint { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(6, 10, 40, .25), rgba(6, 10, 40, .85)); opacity: 0; }
.star { position: absolute; border-radius: 50%; background: #fff6d6; opacity: 0; box-shadow: 0 0 6px rgba(255, 246, 214, .9); }
.moonbox { position: absolute; right: 6%; top: 4%; width: 19%; aspect-ratio: 1; }
.moon, .sun { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.moon { filter: drop-shadow(0 0 14px rgba(255, 244, 190, .85)); }
.sun { filter: drop-shadow(0 0 14px rgba(244, 185, 66, .75)); }
.howl i { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 244, 190, .8); opacity: 0; transform: translate(-50%, -50%) scale(.55); }

/* Repli : mouvements réduits ou CSS 3D indisponible → carte posée, recto visible, aucune commande */
.hero-stage.no-3d .world { transform: none; }
.hero-stage.no-3d .card3d__back, .hero-stage.no-3d .card3d__edge, .hero-stage.no-3d .shadow { display: none; }
.hero-stage.no-3d .card3d__front { transform: none; backface-visibility: visible; }

@media print { .hero-stage { display: none; } }

/* ----- Mobile : composition resserrée (aucune distance de défilement réservée) ----- */
@media (max-width: 51.99rem) {
  .hero { padding-block: 1.25rem 1rem; }
  .hero__inner { gap: 1rem; }
  .scene { aspect-ratio: 1 / 1.04; min-height: 0; }
  .hero + .section { padding-top: 1.75rem; }
  .hero__badge-more { display: none; }
  .hero__badge { margin-bottom: .75rem; }
  .stage-dot { padding-inline: .7rem; font-size: .85rem; }
}