/* =========================================================
   WURUS · POESAM 2026 — Scène, slides, grille
   Modèle : scène fixe 1600×900 mise à l'échelle par transform.
   Ce que je vois = ce que le jury voit, quel que soit le projecteur.
   ========================================================= */

/* La scène est en 16:9 fixe. Sur une fenêtre d'un autre format, le débord
   reste en brun profond : il se lit alors comme le noir d'une salle, et
   l'écran garde son cadre. L'invite au plein écran (.fs-hint) est là pour
   qu'on sache comment le faire disparaître. */
.deck {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--brown-deep);
}

/* --- La scène : dimensions fixes, scalée par JS (--stage-scale) --- */
.stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  flex: none;
  background: var(--cream);
  overflow: hidden;
  transform: scale(var(--stage-scale, 1));
  transform-origin: center center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 40px 120px rgba(0, 0, 0, 0.45);
}

/* En plein écran, plus de débord à cadrer : l'ombre n'a plus lieu d'être. */
.deck.is-fullscreen .stage { box-shadow: none; }

/* --- Invite au plein écran ---
   Elle ne s'affiche que hors plein écran, disparaît dès qu'on y entre, et
   se referme d'un clic sur sa croix pour le reste de la session. */
.fs-hint {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 16px;
  border-radius: 999px;
  background: rgba(42, 26, 11, 0.88);
  border: var(--hairline) solid rgba(212, 162, 68, 0.34);
  backdrop-filter: blur(8px);
  color: var(--dark-ink);
  font-size: 13px;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: opacity var(--dur-mid) var(--ease-out), translate var(--dur-mid) var(--ease-out);
}
.fs-hint:hover { border-color: var(--gold); }

.fs-hint__icon { width: 15px; height: 15px; flex: none; color: var(--gold-light); }
.fs-hint kbd {
  background: rgba(245, 235, 217, 0.14);
  border-color: rgba(212, 162, 68, 0.4);
  color: var(--dark-ink);
}

.fs-hint__close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--dark-muted);
  font-size: 15px;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fs-hint__close:hover { background: rgba(245, 235, 217, 0.14); color: var(--dark-ink); }

.deck.is-fullscreen .fs-hint,
.fs-hint.is-dismissed {
  opacity: 0;
  translate: 0 14px;
  pointer-events: none;
}

/* --- Pile de slides --- */
.slides {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  background: var(--cream);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity, transform;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* Slide sortante — reste peinte le temps du crossfade */
.slide.is-leaving {
  visibility: visible;
  z-index: 1;
}

/* L'écran d'accueil couvre toute la scène, sans gouttière imposée */
.slide[data-slide="home"] { padding: 0; z-index: 5; }

/* --- Squelette commun d'un slide de contenu --- */
.slide-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 40px;
}

.slide-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide-foot {
  flex: none;
  padding-top: 28px;
}

/* --- Utilitaires de grille --- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 40px;
}
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.stack-md { display: flex; flex-direction: column; gap: 24px; }
.stack-lg { display: flex; flex-direction: column; gap: 40px; }
.row-center { display: flex; align-items: center; gap: 16px; }

.center-screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --- Décor : frise géométrique africaine (losanges et triangles) ---
   Remplace le bandeau « monogramme répété » : celui-ci se lisait comme une
   texture floue de logos, la frise se lit comme un motif. */
.frieze {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  /* Assez fine pour encadrer, pas assez épaisse pour peser : à 52 px la
     frise écrasait la couverture au lieu de la border. */
  height: 34px;
  background-image: url('../assets/patterns/frieze-terracotta.svg');
  background-repeat: repeat-x;
  background-size: auto 100%;
  pointer-events: none;
}
.frieze--top    { top: 0; }
.frieze--bottom { bottom: 0; transform: scaleY(-1); }
.frieze--gold   { background-image: url('../assets/patterns/frieze-gold.svg'); }

/* --- Décor : filigrane géométrique --- */
.geo-wash {
  position: absolute;
  inset: 0;
  background-image: url('../assets/patterns/pattern-geometric.svg');
  background-repeat: repeat;
  background-size: 320px 320px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  /* Le semis s'efface au centre : le motif habille les marges,
     il ne passe jamais derrière le texte. */
  -webkit-mask-image: radial-gradient(74% 66% at 50% 50%, transparent 24%, #000 82%);
  mask-image: radial-gradient(74% 66% at 50% 50%, transparent 24%, #000 82%);
}

/* Variante « marges seules » : le semis n'existe que sur les bords.
   Utilisée sur les slides où le centre doit rester absolument nu. */
.geo-wash--margins {
  opacity: 0.045;
  -webkit-mask-image: radial-gradient(62% 58% at 50% 48%, transparent 46%, #000 100%);
  mask-image: radial-gradient(62% 58% at 50% 48%, transparent 46%, #000 100%);
}

/* --- Grain : une texture très fine sur toute la scène ---
   Casse l'aplat numérique des grands fonds crème. Invisible en tant que
   tel, mais l'écran paraît imprimé plutôt que rendu. */
.stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Canvas d'effets (poussière d'or) --- */
.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Les confettis passent DEVANT le contenu : une paillette qui disparaît
   derrière le texte n'est pas tombée, elle a buggé. */
.fx-canvas--front { z-index: 6; }

/* Les couches de décor sont en z-index 0 ; tout contenu de slide passe
   au-dessus via `.slide-content`. On ne pose PAS de règle générique sur
   `.slide > *` : elle écraserait le positionnement absolu des éléments
   composés (pieds de page, cartouches d'angle). */
.slide-content { position: relative; z-index: 1; }

/* --- Garde portrait étroit : le deck est pensé pour la projection --- */
.rotate-hint {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  text-align: center;
  background: var(--cream);
  color: var(--brown);
}

@media (orientation: portrait) and (max-width: 900px) {
  .rotate-hint { display: flex; }
}