/* Scène d'ouverture : six fragments en profondeur qui se remettent dans l'ordre au défilement. */
.scene{position:relative;height:340vh;background:#1a1612}
.scene-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1100px;perspective-origin:50% 40%;
  background:radial-gradient(ellipse at 30% 20%,#efe6d1 0%,#e2d6bd 45%,#b9ab8f 100%)}
/* lumière de fenêtre : carreaux projetés, légèrement mouvants */
.scene-lumiere{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:multiply;opacity:.55;
  background:
    linear-gradient(transparent 0 31%,rgba(70,55,35,.35) 31% 34%,transparent 34% 64%,rgba(70,55,35,.35) 64% 67%,transparent 67%),
    linear-gradient(90deg,transparent 0 40%,rgba(70,55,35,.35) 40% 43%,transparent 43%);
  transform:rotate(-24deg) skewX(-18deg) translate3d(var(--lx,0px),var(--ly,0px),0);filter:blur(14px)}
.scene-lumiere::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 35% 35%,rgba(255,244,214,.55),transparent 60%)}
.scene-grain{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(60,45,30,.18) .6px,transparent .6px);background-size:3px 3px}
.scene-monde{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;transition:transform .25s ease-out}
.frag3d{position:absolute;left:50%;top:50%;width:var(--cw);padding:16px 18px 18px;background:#fbf7ec;color:#16130F;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 40px rgba(40,28,15,.28),0 2px 4px rgba(40,28,15,.2);
  transform-style:preserve-3d;will-change:transform;backface-visibility:hidden}
.frag3d::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 40%),repeating-linear-gradient(0deg,transparent 0 23px,rgba(120,100,70,.08) 23px 24px)}
.frag3d .l{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.frag3d .lettre{font:900 38px/1 'Big Shoulders Display',sans-serif;color:#C8102E}
.frag3d .rang{font:500 12px 'Roboto Mono',monospace;letter-spacing:.12em;color:#8A7A55;opacity:var(--rang,0)}
.frag3d .h{display:block;font:500 12px 'Roboto Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8A7A55;margin-bottom:6px}
.frag3d p{margin:0;font:15px/1.45 'Roboto Mono',monospace;color:#2c2721}
.frag3d.menteur{transition:background .4s,box-shadow .4s}
.frag3d.menteur.demasque{background:#fff1f1;box-shadow:0 0 0 3px #C8102E,0 18px 40px rgba(120,10,20,.35)}
.frag3d .tampon3d{position:absolute;right:6px;bottom:-24px;transform:rotate(-12deg) scale(1.6);opacity:0;
  border:3px solid #C8102E;color:#C8102E;background:rgba(251,247,236,.9);padding:4px 10px;
  font:900 22px 'Big Shoulders Display',sans-serif;letter-spacing:.06em;transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1)}
.frag3d.demasque .tampon3d{opacity:1;transform:rotate(-12deg) scale(1)}
.scene-texte{position:absolute;left:0;right:0;z-index:2;text-align:center;padding:0 20px;pointer-events:none;color:#16130F}
.scene-texte.haut{top:9vh}
.scene-texte.bas{bottom:7vh}
.scene-texte .label{color:#6f5f3e;margin:0 auto 10px;max-width:none}
.scene-texte h2{font-size:clamp(34px,5.4vw,78px);line-height:.95;transition:opacity .4s}
.scene-texte p{font-size:clamp(16px,1.6vw,21px);margin:10px auto 0;max-width:40ch;transition:opacity .4s}
.scene-phrase{grid-area:1/1;opacity:0;transition:opacity .45s}
.scene-phrase.on{opacity:1}
.scene-phrases{display:grid;justify-items:center}
.scene-suite{pointer-events:auto;display:inline-flex;margin-top:18px}
.scene-indice{font:11px 'Roboto Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6f5f3e;animation:scene-flotte 1.8s ease-in-out infinite}
@keyframes scene-flotte{50%{transform:translateY(6px)}}
.scene-raccourcis{position:absolute;top:14px;right:16px;display:flex;gap:18px;font:11px 'Roboto Mono',monospace;letter-spacing:.08em;text-transform:uppercase;z-index:3}
.scene-raccourcis a{color:#16130F;text-decoration:underline;text-underline-offset:4px}
@media (max-width:700px){
  .scene-texte.haut{top:max(6vh,58px)}
  .frag3d{padding:11px 12px 12px}
  .frag3d .lettre{font-size:28px}
  .frag3d p{font-size:12px;line-height:1.4}
  .frag3d .h{font-size:10px}
  .scene-raccourcis{left:16px;right:16px;justify-content:space-between;font-size:10px}
}
/* sans animation : l'état final, sans défilement long */
.scene.statique{height:100vh;height:100svh}
.scene-fin{position:absolute;left:0;right:0;bottom:0;margin:0 auto;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s;color:#16130F}
.scene-fin b{color:#C8102E}
.scene.fini .scene-fin{opacity:1;transform:none}
.scene.fini .scene-indice{opacity:0}
.frag3d.menteur.demasque{margin-bottom:0}
@media (min-width:980px){.frag3d p{font-size:14px}}
.frag3d .etiquette3d{position:absolute;left:10px;top:-13px;background:#16130F;color:#fff;padding:3px 9px;
  font:500 11px 'Roboto Mono',monospace;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.frag3d.preuve{transition:box-shadow .4s}
.frag3d.preuve.montree{box-shadow:0 0 0 3px #16130F,0 18px 40px rgba(40,28,15,.3)}
.frag3d.preuve.montree .etiquette3d{opacity:1;transform:none}
.scene-fin{font-size:clamp(15px,1.5vw,19px)!important;line-height:1.45;max-width:46ch!important}
.scene-fin span{display:block;margin-top:8px;color:#4a4035;font-size:.92em}
.scene-texte.haut{top:max(9vh,52px)}
@media (max-width:700px){.scene-texte.haut{top:max(6vh,58px)}}