/* ============================================
   DUAL EMPIRES - Styles principaux
   ============================================ */

/* Reset des styles par défaut du navigateur */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Style général du body */
body {
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Container principal du menu */
.menu-container {
  text-align: center;
  padding: 2rem;
  /* assez large pour le titre sur une ligne ; boutons à largeur fixe */
  max-width: 1100px;
  width: 96%;
  position: relative;
  z-index: 10;
}

/* Logo / Titre */
.game-logo {
  margin-bottom: 1rem;
}

.game-title {
  /* Une seule ligne : ~48 % de la largeur d'écran (96 px à 1920, 68 px à
     1366), jamais coupé en deux. */
  font-size: clamp(1.6rem, 5vw, 6rem);
  white-space: nowrap;
  /* largeur du texte seul : le dégradé bleu reste calé sur les lettres */
  display: inline-block;
  font-weight: 900;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.1em;
  text-shadow: 0 0 40px rgba(59, 130, 246, 0.4);
  margin-bottom: 0.5rem;
}

.game-subtitle {
  font-size: 1.2rem;
  color: #94a3b8;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 3rem;
}

/* Menu des boutons */
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.menu-btn {
  width: 320px;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #f5f5f5;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 2px solid #3b82f6;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.menu-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
  transform: translateY(-2px);
}

.menu-btn:active {
  transform: translateY(0);
}

/* Bouton principal (Jouer) plus mis en avant */
.menu-btn.primary {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  font-size: 1.4rem;
  padding: 1.2rem 2rem;
}

.menu-btn.primary:hover {
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
}

/* Footer */
.menu-footer {
  margin-top: 3rem;
  color: #64748b;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
}

/* Animation d'arrière-plan subtile */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(59, 130, 246, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(29, 78, 216, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 1;
}

/* ===== FONDS ILLUSTRÉS DES MENUS (assets/ui/backgrounds/) ===== */
/* Une page choisit son fond avec <body data-fond="...">. Un seul calque
   fixe (body::after, page CSS existantes non concernées : elles ne
   masquent que body::before), dans l'ordre de dessin :
     image (cover, centrée, sans répétition)
     → vignettage léger → voile sombre réglable (--voile-page)
     → interface (z-index ≥ 0) → modales.
   z-index -1 sans contexte d'empilement sur body : le calque passe
   au-dessus du fond dégradé d'origine (repli pendant le chargement) et
   sous tout le contenu. Fixe : ne défile jamais avec les pages longues.
   Jamais utilisé par plateau.html (feuille et fond propres). */
body[data-fond="titre"] {
  --fond-page: url("../assets/ui/backgrounds/titre.png");
  --voile-page: 0.18;
}

body[data-fond="jouer"] {
  --fond-page: url("../assets/ui/backgrounds/jouer.png");
  --voile-page: 0.26;
}

body[data-fond="choixdeck"] {
  --fond-page: url("../assets/ui/backgrounds/jouer.png");
  --voile-page: 0.3;
}

body[data-fond="mes-decks"] {
  --fond-page: url("../assets/ui/backgrounds/mes-decks.png");
  --voile-page: 0.3;
}

body[data-fond="deck-builder"] {
  --fond-page: url("../assets/ui/backgrounds/deck-builder.png");
  --voile-page: 0.38;
}

body[data-fond="collection"] {
  --fond-page: url("../assets/ui/backgrounds/collection.png");
  --voile-page: 0.36;
}

body[data-fond="regles"] {
  --fond-page: url("../assets/ui/backgrounds/regles.png");
  --voile-page: 0.4;
}

body[data-fond="options"] {
  --fond-page: url("../assets/ui/backgrounds/options.png");
  --voile-page: 0.32;
}

/* Versions runtime légères (WebP 4K, tools/generer-fonds-runtime.py) :
   prioritaires partout où le navigateur gère image-set() typé et WebP ;
   sinon les PNG masters ci-dessus restent utilisés. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  body[data-fond="titre"] {
    --fond-page: image-set(url("../assets/ui/backgrounds-runtime/titre.webp") type("image/webp"), url("../assets/ui/backgrounds/titre.png") type("image/png"));
  }

  body[data-fond="jouer"],
  body[data-fond="choixdeck"] {
    --fond-page: image-set(url("../assets/ui/backgrounds-runtime/jouer.webp") type("image/webp"), url("../assets/ui/backgrounds/jouer.png") type("image/png"));
  }

  body[data-fond="mes-decks"] {
    --fond-page: image-set(url("../assets/ui/backgrounds-runtime/mes-decks.webp") type("image/webp"), url("../assets/ui/backgrounds/mes-decks.png") type("image/png"));
  }

  body[data-fond="deck-builder"] {
    --fond-page: image-set(url("../assets/ui/backgrounds-runtime/deck-builder.webp") type("image/webp"), url("../assets/ui/backgrounds/deck-builder.png") type("image/png"));
  }

  body[data-fond="collection"] {
    --fond-page: image-set(url("../assets/ui/backgrounds-runtime/collection.webp") type("image/webp"), url("../assets/ui/backgrounds/collection.png") type("image/png"));
  }

  body[data-fond="regles"] {
    --fond-page: image-set(url("../assets/ui/backgrounds-runtime/regles.webp") type("image/webp"), url("../assets/ui/backgrounds/regles.png") type("image/png"));
  }

  body[data-fond="options"] {
    --fond-page: image-set(url("../assets/ui/backgrounds-runtime/options.webp") type("image/webp"), url("../assets/ui/backgrounds/options.png") type("image/png"));
  }
}

body[data-fond]::after {
  content: "";
  position: fixed;
  inset: 0;
  /* -2 : laisse la place aux effets d'ambiance (z-index -1) entre le fond
     et l'interface */
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(5, 8, 14, var(--voile-page, 0.3)), rgba(5, 8, 14, var(--voile-page, 0.3))),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%),
    var(--fond-page, none) center / cover no-repeat;
}

/* --- Lisibilité sur les illustrations --- */

/* En-têtes des pages : texte détaché du décor par une ombre */
body[data-fond] .page-header,
body[data-fond] .db-header,
body[data-fond] .compteur,
body[data-fond] .page-footer {
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(0, 0, 0, 0.6);
}

/* Écran titre : la porte reste visible, pas de grand panneau opaque —
   ombres et lueur sur le titre, boutons légèrement translucides. */
body[data-fond="titre"] .game-title {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 22px rgba(59, 130, 246, 0.45));
}

body[data-fond="titre"] .game-subtitle {
  color: #cbd5e1;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.95),
    0 0 12px rgba(0, 0, 0, 0.7);
}

body[data-fond="titre"] .menu-btn {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.72) 0%, rgba(30, 41, 59, 0.72) 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

body[data-fond="titre"] .menu-btn.primary {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.85) 0%, rgba(59, 130, 246, 0.85) 100%);
}

body[data-fond="titre"] .menu-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
}

body[data-fond="titre"] .menu-footer {
  color: #94a3b8;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* Jouer : cartes de mode / niveau un peu plus sombres */
body[data-fond="jouer"] .mode-carte,
body[data-fond="jouer"] .niveau-carte {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.66) 100%);
}

/* Choix du deck / Mes Decks : panneaux de deck sombres mais translucides */
body[data-fond="choixdeck"] .deck-carte,
body[data-fond="mes-decks"] .deck-carte {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.84) 0%, rgba(30, 41, 59, 0.7) 100%);
}

/* Deck Builder : lisibilité absolue — panneaux presque opaques, le décor
   n'apparaît qu'autour et entre eux. */
body[data-fond="deck-builder"] .db-deck,
body[data-fond="deck-builder"] .db-collection {
  background: linear-gradient(135deg, rgba(11, 15, 23, 0.9) 0%, rgba(20, 28, 42, 0.86) 100%);
}

/* Règles : le centre de l'illustration est déjà sombre — panneaux un peu
   plus translucides que l'original (0,70 / 0,50), texte toujours lisible. */
body[data-fond="regles"] .regle-section {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.62) 0%, rgba(51, 65, 85, 0.44) 100%);
}

/* Options : panneau de contenu sombre, décor visible autour */
body[data-fond="options"] .options-contenu {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.84) 0%, rgba(30, 41, 59, 0.72) 100%);
}

/* ===== TRANSITION ENTRE PAGES DE MENU ===== */
/* Fondu natif très court entre deux pages qui chargent cette feuille
   (navigateurs compatibles uniquement, ignoré ailleurs) : masque le
   passage d'une page à l'autre. Jamais sur le plateau (feuille propre). */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ===== ÉCRAN TITRE VIVANT (index.html uniquement) ===== */
/* Calque décoratif .menu-ambient-effects : au-dessus du fond illustré
   (body::after, z-index -2), sous toute l'interface (titre, boutons,
   pied de page), jamais cliquable. Le fond lui-même n'est jamais animé.
   .ambiance-scene reproduit exactement le cadrage « cover » centré du fond
   16:9 : les positions en % ci-dessous sont celles de l'image (porte au
   centre, cristaux cyan, runes des piliers) et restent calées sur la salle
   quelle que soit la taille d'écran. Animations : transform / opacity /
   background-position uniquement ; flous fixes ; aucune animation JS. */
.menu-ambient-effects {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambiance-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  translate: -50% -50%;
}

.ambiance-scene > * {
  position: absolute;
  pointer-events: none;
}

/* --- Brume : 3 nappes, vitesses différentes, aller-retour sans saut --- */
.brume {
  filter: blur(14px);
  will-change: transform;
}

/* Nappe au sol, plus dense au centre */
.brume-sol {
  left: -12%;
  width: 124%;
  top: 70%;
  height: 34%;
  background:
    radial-gradient(ellipse 34% 55% at 50% 55%, rgba(185, 220, 245, 0.16), transparent 72%),
    radial-gradient(ellipse 26% 45% at 22% 60%, rgba(160, 205, 235, 0.1), transparent 72%),
    radial-gradient(ellipse 26% 45% at 78% 52%, rgba(160, 205, 235, 0.1), transparent 72%);
  animation: brume-derive-a 27s ease-in-out infinite alternate;
}

/* Profondeur de la salle : traverse la lumière de la porte */
.brume-profondeur {
  left: 18%;
  width: 64%;
  top: 34%;
  height: 46%;
  background:
    radial-gradient(ellipse 45% 40% at 48% 62%, rgba(200, 230, 250, 0.12), transparent 75%),
    radial-gradient(ellipse 30% 30% at 64% 40%, rgba(180, 220, 245, 0.07), transparent 75%);
  animation: brume-derive-b 41s ease-in-out -13s infinite alternate;
}

/* Voile intermédiaire, très diffus, sur toute la largeur */
.brume-voile {
  left: -20%;
  width: 140%;
  top: 48%;
  height: 32%;
  background:
    radial-gradient(ellipse 20% 50% at 15% 50%, rgba(170, 210, 240, 0.07), transparent 75%),
    radial-gradient(ellipse 22% 50% at 45% 40%, rgba(170, 210, 240, 0.06), transparent 75%),
    radial-gradient(ellipse 20% 50% at 80% 55%, rgba(170, 210, 240, 0.07), transparent 75%);
  animation: brume-derive-c 34s ease-in-out -21s infinite alternate;
}

/* --- Porte centrale : halo qui respire autour de la ligne lumineuse --- */
.porte-halo {
  left: 50%;
  top: 25%;
  width: 12%;
  height: 68%;
  translate: -50% 0;
  background:
    radial-gradient(ellipse 22% 48% at 50% 52%, rgba(225, 245, 255, 0.28), rgba(120, 200, 240, 0.1) 45%, transparent 75%),
    radial-gradient(ellipse 40% 6% at 50% 6%, rgba(200, 240, 255, 0.22), transparent 80%);
  animation: porte-respire 8.6s ease-in-out infinite;
}

/* --- Rayons : légère variation d'opacité, sans déplacement --- */
.rayons {
  top: 0;
  height: 72%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}

.rayons-droite {
  left: 64%;
  width: 36%;
  background: repeating-linear-gradient(
    114deg,
    transparent 0 5%,
    rgba(205, 232, 255, 0.05) 7%,
    transparent 10% 15%
  );
  animation: rayons-respire 13.7s ease-in-out -4s infinite;
}

.rayons-gauche {
  left: 0;
  width: 30%;
  background: repeating-linear-gradient(
    66deg,
    transparent 0 6%,
    rgba(205, 232, 255, 0.035) 8%,
    transparent 11% 17%
  );
  animation: rayons-respire 17.3s ease-in-out -9s infinite;
}

/* --- Énergie cyan : halos sur les cristaux et les runes des piliers --- */
.halo-cyan {
  border-radius: 50%;
  translate: -50% -50%;
}

/* Gauche : cristaux flottants, groupe au pied du pilier, runes */
.halo-g1 {
  left: 13.5%;
  top: 56%;
  width: 10%;
  height: 20%;
  background: radial-gradient(ellipse closest-side, rgba(110, 230, 255, 0.3), rgba(60, 190, 240, 0.1) 50%, transparent 100%);
  animation: cyan-respire-a 9.7s ease-in-out -1.5s infinite;
}

.halo-g2 {
  left: 29%;
  top: 63%;
  width: 9%;
  height: 15%;
  background: radial-gradient(ellipse closest-side, rgba(110, 230, 255, 0.26), rgba(60, 190, 240, 0.08) 50%, transparent 100%);
  animation: cyan-respire-b 12.3s ease-in-out -6s infinite;
}

.halo-g3 {
  left: 9%;
  top: 37%;
  width: 5%;
  height: 42%;
  background: radial-gradient(ellipse closest-side, rgba(110, 225, 255, 0.18), transparent 100%);
  animation: cyan-respire-a 15.1s ease-in-out -3s infinite;
}

/* Droite : mêmes principes, autres durées, déphasages et intensités */
.halo-d1 {
  left: 65%;
  top: 69.5%;
  width: 8%;
  height: 13%;
  background: radial-gradient(ellipse closest-side, rgba(110, 230, 255, 0.24), rgba(60, 190, 240, 0.08) 50%, transparent 100%);
  animation: cyan-respire-b 11.9s ease-in-out -2.5s infinite;
}

.halo-d2 {
  left: 73%;
  top: 60%;
  width: 9%;
  height: 15%;
  background: radial-gradient(ellipse closest-side, rgba(110, 230, 255, 0.22), rgba(60, 190, 240, 0.07) 50%, transparent 100%);
  animation: cyan-respire-a 13.7s ease-in-out -7.2s infinite;
}

.halo-d3 {
  left: 92%;
  top: 37%;
  width: 5%;
  height: 42%;
  background: radial-gradient(ellipse closest-side, rgba(110, 225, 255, 0.16), transparent 100%);
  animation: cyan-respire-b 16.9s ease-in-out -9.4s infinite;
}

/* Traînées lumineuses le long des volutes d'énergie (flux qui glisse) */
.trainee {
  height: 3%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 0%, rgba(160, 240, 255, 0.32) 50%, transparent 100%) 0 0 / 60% 100% repeat-x;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 40%, transparent 100%);
  filter: blur(2px);
}

.trainee-g {
  left: 23%;
  top: 62%;
  width: 12%;
  rotate: 24deg;
  animation: trainee-flux 6.8s linear -2s infinite;
}

.trainee-d {
  left: 62%;
  top: 63%;
  width: 14%;
  rotate: -28deg;
  animation: trainee-flux 8.3s linear -5s infinite reverse;
}

/* Éclats occasionnels près des cristaux : apparition douce, jamais un flash */
.eclat {
  width: 0.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle closest-side, rgba(235, 252, 255, 0.95), rgba(120, 225, 255, 0.5) 45%, transparent 100%);
  opacity: 0;
}

.eclat-1 { left: 15%; top: 52%; animation: eclat-doux 7.9s ease-in-out -1s infinite; }
.eclat-2 { left: 30.5%; top: 66%; animation: eclat-doux 11.3s ease-in-out -6s infinite; }
.eclat-3 { left: 64%; top: 72%; animation: eclat-doux 9.4s ease-in-out -3.5s infinite; }
.eclat-4 { left: 75.5%; top: 58%; animation: eclat-doux 13.1s ease-in-out -8s infinite; }

/* --- Particules : 10 points cyan / bleu glace, surtout sur les côtés --- */
.particule {
  left: var(--x);
  top: var(--y);
  width: var(--taille, 0.32%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(225, 248, 255, 0.95), rgba(110, 215, 255, 0.45) 50%, transparent 100%);
  opacity: 0;
  animation: particule-monte var(--duree) ease-in-out var(--delai) infinite;
}

.particule-1 { --x: 7%; --y: 78%; --dx: 1.5vw; --dy: -22vh; --duree: 17s; --delai: -2s; --o: 0.7; }
.particule-2 { --x: 14%; --y: 66%; --dx: -1vw; --dy: -18vh; --duree: 13s; --delai: -9s; --o: 0.6; --taille: 0.26%; }
.particule-3 { --x: 21%; --y: 84%; --dx: 2vw; --dy: -25vh; --duree: 19s; --delai: -5s; --o: 0.55; }
.particule-4 { --x: 27%; --y: 72%; --dx: 0.8vw; --dy: -16vh; --duree: 14.5s; --delai: -12s; --o: 0.65; --taille: 0.24%; }
.particule-5 { --x: 32%; --y: 88%; --dx: -1.2vw; --dy: -20vh; --duree: 21s; --delai: -15s; --o: 0.45; }
.particule-6 { --x: 68%; --y: 86%; --dx: 1vw; --dy: -21vh; --duree: 18s; --delai: -4s; --o: 0.5; }
.particule-7 { --x: 72%; --y: 70%; --dx: -1.8vw; --dy: -17vh; --duree: 15.5s; --delai: -11s; --o: 0.65; --taille: 0.26%; }
.particule-8 { --x: 79%; --y: 80%; --dx: 1.4vw; --dy: -24vh; --duree: 20s; --delai: -7s; --o: 0.55; }
.particule-9 { --x: 86%; --y: 64%; --dx: -0.8vw; --dy: -15vh; --duree: 12.5s; --delai: -3s; --o: 0.6; --taille: 0.24%; }
.particule-10 { --x: 93%; --y: 76%; --dx: -1.5vw; --dy: -19vh; --duree: 16.5s; --delai: -13s; --o: 0.5; }

/* --- Animations (keyframes irrégulières, pas de hasard JS) --- */
@keyframes brume-derive-a {
  from { transform: translate(-4%, 0) scale(1); }
  to { transform: translate(4%, -1.5%) scale(1.04); }
}

@keyframes brume-derive-b {
  0% { transform: translate(3%, 0.5%) scale(1.02); opacity: 0.85; }
  45% { opacity: 1; }
  100% { transform: translate(-3%, -0.5%) scale(0.98); opacity: 0.75; }
}

@keyframes brume-derive-c {
  0% { transform: translate(-5%, 1%); opacity: 0.7; }
  60% { opacity: 1; }
  100% { transform: translate(5%, -1%); opacity: 0.8; }
}

@keyframes porte-respire {
  0%, 100% { opacity: 0.6; scale: 0.98 1; }
  31% { opacity: 0.85; scale: 1.02 1; }
  54% { opacity: 0.7; scale: 1 1; }
  77% { opacity: 0.9; scale: 1.03 1; }
}

@keyframes rayons-respire {
  0%, 100% { opacity: 0.55; }
  23% { opacity: 0.9; }
  48% { opacity: 0.65; }
  71% { opacity: 1; }
  87% { opacity: 0.7; }
}

@keyframes cyan-respire-a {
  0%, 100% { opacity: 0.45; }
  18% { opacity: 0.8; }
  39% { opacity: 0.55; }
  63% { opacity: 0.95; }
  82% { opacity: 0.6; }
}

@keyframes cyan-respire-b {
  0%, 100% { opacity: 0.55; }
  27% { opacity: 0.7; }
  44% { opacity: 0.95; }
  69% { opacity: 0.5; }
  88% { opacity: 0.8; }
}

/* Motif répété de 60 % : +150 % = exactement un motif, boucle sans saut */
@keyframes trainee-flux {
  from { background-position: 0% 0; }
  to { background-position: 150% 0; }
}

@keyframes eclat-doux {
  0%, 62% { opacity: 0; scale: 0.6; }
  74% { opacity: 0.9; scale: 1.1; }
  88%, 100% { opacity: 0; scale: 0.8; }
}

@keyframes particule-monte {
  0% { opacity: 0; transform: translate(0, 0); }
  18% { opacity: var(--o); }
  78% { opacity: calc(var(--o) * 0.6); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

/* Mouvement réduit : brume et halos fixes, particules et éclats masqués */
@media (prefers-reduced-motion: reduce) {
  .ambiance-scene > * {
    animation: none;
  }

  .particule,
  .eclat,
  .trainee {
    display: none;
  }
}

/* ===== ACCUEIL : CADRAGE « CONTAIN » SUR REMPLISSAGE FLOU ===== */
/* La fenêtre du navigateur n'est presque jamais en 16:9 exact (barres
   d'interface) : en « cover », le fond titre était agrandi et rogné en
   haut et en bas. Ici, deux couches :
   - arrière (body::after) : la même image en « cover », floutée et
     assombrie, qui ne sert qu'à remplir les bandes éventuelles ;
   - principale (.fond-principal) : l'image entière, sans déformation, dans
     .ambiance-scene, qui passe en cadrage « contain » 16:9 centré. Bords
     fondus vers le remplissage (aucune limite visible). Les effets
     d'ambiance, positionnés dans la même scène, suivent l'image principale.
   Sur un écran 16:9 réel, l'image principale occupe tout l'écran. */
body[data-fond="titre"]::after {
  background: var(--fond-page, none) center / cover no-repeat;
  filter: blur(18px) brightness(0.5) saturate(0.85);
  transform: scale(1.08);
}

body[data-fond="titre"] .ambiance-scene {
  width: min(100vw, 177.78vh);
  height: min(100vh, 56.25vw);
}

.fond-principal {
  inset: 0;
  background:
    linear-gradient(rgba(5, 8, 14, var(--voile-page, 0.3)), rgba(5, 8, 14, var(--voile-page, 0.3))),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%),
    var(--fond-page, none) center / 100% 100% no-repeat;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}

/* ===== IDENTITÉ TYPOGRAPHIQUE DES MENUS ===== */
/* Polices auto-hébergées (assets/fonts/, licence SIL OFL 1.1 :
   docs/licences-fonts/). Une seule police variable WOFF2 par famille
   (sous-ensemble latin : tout le français) couvre toutes les graisses.
   font-display: swap : le texte s'affiche tout de suite en police de
   repli, jamais de texte invisible. Le plateau n'utilise pas cette
   feuille : il n'est pas concerné. */
@font-face {
  font-family: "Cinzel";
  src:
    url("../assets/fonts/cinzel-latin-wght.woff2") format("woff2-variations"),
    url("../assets/fonts/cinzel-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("../assets/fonts/cormorant-garamond-latin-wght.woff2") format("woff2-variations"),
    url("../assets/fonts/cormorant-garamond-latin-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* titres, noms de pages et de sections, boutons, libellés courts */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  /* descriptions, règles, textes secondaires */
  --font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* rendus texte des données de cartes (repli sans image) : inchangés */
  --font-donnees: Georgia, "Times New Roman", serif;
}

/* Corps de texte. Cormorant a des minuscules plus petites que Georgia :
   font-size-adjust ramène sa hauteur d'œil au niveau de lisibilité
   actuel (≈ +19 % à taille CSS égale), sans toucher aux font-size. */
body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size-adjust: 0.46;
}

/* Cinzel : titres, boutons et libellés courts uniquement (jamais de
   paragraphes). « body » en tête : passe devant les « font-family:
   inherit » des feuilles de page. */
body :is(
    h1,
    h2,
    h3,
    h4,
    .game-title,
    .game-subtitle,
    .menu-btn,
    .btn-retour,
    .btn-sauvegarder,
    .btn-option,
    .options-onglet,
    .filtre-btn,
    .civ-bouton,
    .mode-nom,
    .niveau-nom,
    .deck-carte-titre,
    .aucun-deck-titre,
    .compteur,
    .db-compteur,
    .volume-valeur,
    .reglage-volume > label,
    .reglage-compte > label
  ) {
  font-family: var(--font-display);
  font-size-adjust: none;
}

/* Composants qui reproduisent les données des cartes (Collection et Deck
   Builder, rendu texte si l'image manque) : police et tailles inchangées,
   statistiques toujours lisibles. Les images de cartes ne sont pas du
   texte : elles ne sont jamais concernées. */
body :is(.carte, .db-carte) {
  font-family: var(--font-donnees);
  font-size-adjust: none;
}

/* Logo : Cinzel très gras, une seule ligne (voir .game-title plus haut) */
.game-title {
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* Sous-titre : plus léger, largement espacé */
.game-subtitle {
  font-weight: 400;
  letter-spacing: 0.32em;
}