/* style.css - Theme "L'Honneur des Heros" (pixel-art / RPG 16-bits) - Vanilla CSS, sans framework
   Systeme de tokens : toute couleur/taille de texte/espacement passe par une var(--...)
   definie ici. Ne jamais ecrire de valeur brute ailleurs dans ce fichier. */

:root {
  --font-pixel: 'Geist Pixel', monospace;
  --font-body: 'Josefin Sans', sans-serif;

  /* --- Couleurs de fond --- */
  --bg-void: #07080c;
  --bg-glow: #1a162b;
  --bg-stone: #11131a;
  --bg-stone-deep: #0a0b10;
  --bg-card-back: #090b10;
  --bg-panel-deep: #050608;

  /* --- Couleurs de marque --- */
  --gold: #f4d068;
  --gold-rgb: 244, 208, 104;
  --gold-bright: #fff0a8;
  --gold-dim: #967e37;
  --blue-crest: #2b5cb8;

  /* --- Texte --- */
  --text-main: #e2e2ed;
  --text-muted: #8c92a4;
  --black: #000;
  --black-rgb: 0, 0, 0;
  --white: #fff;
  --white-rgb: 255, 255, 255;

  /* --- Bordures --- */
  --border-subtle: #2d3348;
  --border-strong: #3a4058;
  --border-hairline: #1c1e2b;

  /* --- Les 4 familles de l'Oracle --- */
  --c-archetype: #d48b70;
  --c-epreuve: #4ea896;
  --c-objet: #9ab0c7;
  --c-special: #f6c845;

  /* --- Danger (bouton Supprimer) --- */
  --red: #b3261e;
  --red-bright: #d4382f;

  /* --- Echelle de texte (fluide : une seule valeur, mobile -> desktop) --- */
  --text-xs: clamp(.7rem, .65rem + .2vw, .75rem);
  --text-sm: clamp(.8rem, .75rem + .2vw, .875rem);
  --text-base: clamp(.9rem, .85rem + .25vw, 1rem);
  --text-md: clamp(1rem, .95rem + .3vw, 1.125rem);
  --text-lg: clamp(1.1rem, 1rem + .4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --text-3xl: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem);
  --text-title: clamp(2rem, 1.6rem + 2vw, 4rem);
  --text-hero: clamp(2.4rem, 1.8rem + 4vw, 6.5rem);

  /* --- Echelle d'espacement (base 4px, fluide au-dela de 16px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: clamp(16px, 14px + .5vw, 20px);
  --space-6: clamp(18px, 15px + 1vw, 24px);
  --space-8: clamp(22px, 16px + 2vw, 32px);
  --space-10: clamp(26px, 18px + 3vw, 40px);
  --space-12: clamp(30px, 20px + 4vw, 48px);
  --space-16: clamp(36px, 22px + 5vw, 64px);

  /* --- Ombres (opacite variable via --black-rgb) --- */
  --shadow-sm: 0 3px 8px rgba(var(--black-rgb), .5);
  --shadow-md: 0 10px 25px rgba(var(--black-rgb), .75);
  --shadow-lg: 0 20px 50px rgba(var(--black-rgb), .85);
  --shadow-xl: 0 25px 60px rgba(var(--black-rgb), .95);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  background-color: var(--bg-void);
  color: var(--text-main);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 50% 10%, var(--bg-glow) 0%, var(--bg-void) 70%),
    linear-gradient(rgba(var(--black-rgb),0) 50%, rgba(var(--black-rgb),0.3) 50%);
  background-size: 100% 100%, 100% 4px;
}
a { color: inherit; }
img, svg { max-width: 100%; }

.pixel-heading {
  font-family: var(--font-pixel);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#ember-canvas {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; opacity: 0.6;
}

/* --- BARRE DE NAVIGATION --- */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.nav-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: var(--space-8); height: var(--space-8);
  background: none; border: 2px solid var(--border-hairline); border-radius: 4px;
  cursor: pointer;
}
.nav-toggle-bar { width: 20px; height: 2px; background: var(--text-main); }

.nav-links {
  display: flex; align-items: center; gap: var(--space-1);
  list-style: none;
}
.nav-links a {
  font-family: var(--font-pixel);
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--text-main);
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0 rgba(var(--black-rgb),.6);
  padding: 0 var(--space-2);
}

/* Separateur vertical entre les liens de nav : meme motif que .ornament-divider (tirets + trait plein), sans le losange */
.nav-sep {
  display: flex; flex-direction: column; align-items: center;
  width: 6px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--gold);
}
.nav-sep .seg { width: 2px; }
.nav-sep .seg.dash {
  flex: 1 1 6px;
  background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 4px);
}
.nav-sep .seg.solid { flex: 1 1 8px; background: currentColor; }

/* Diviseur ornemental long (tirets + trait plein + losange a pointes), a utiliser entre les sections du site */
.ornament-divider {
  display: flex; align-items: center;
  width: 100%; max-width: 420px;
  margin: 0 auto;
  color: var(--gold-dim);
}
.ornament-divider .seg { height: 2px; background: currentColor; }
.ornament-divider .seg.dash {
  flex: 1 1 60px;
  background: repeating-linear-gradient(to right, currentColor 0 6px, transparent 6px 13px);
}
.ornament-divider .seg.solid { flex: 1 1 90px; }
.ornament-divider .diamond { position: relative; width: 20px; height: 20px; flex: 0 0 auto; margin: 0 2px; }
.ornament-divider .diamond::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.ornament-divider .tick { position: absolute; width: 3px; height: 3px; background: currentColor; }
.ornament-divider .tick.n { top: 0; left: 50%; transform: translateX(-50%); }
.ornament-divider .tick.s { bottom: 0; left: 50%; transform: translateX(-50%); }
.ornament-divider .tick.e { right: 0; top: 50%; transform: translateY(-50%); }
.ornament-divider .tick.w { left: 0; top: 50%; transform: translateY(-50%); }

.nav-links a.active,
.nav-links a:hover { color: var(--gold); }

/* --- HERO --- */
.hero-altar {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 140px var(--space-4) var(--space-8);
}
.hero-columns::before {
  /* image de fond du header, dissoute vers le bas (pas de bord dur en bas du header) */
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: url("../img/bg/bg_paysage_1.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* --- MOBILE FIRST : le site est destine a etre scanne au QR code depuis le livret --- */
@media (max-width: 640px) {
  .top-nav { padding: var(--space-3) var(--space-4); justify-content: space-between; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-panel-deep);
    border-bottom: 2px solid var(--border-hairline);
    padding: var(--space-2) var(--space-4);
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: var(--space-3) 0; text-align: center; }
  .nav-sep { display: none; }

  .hero-altar { min-height: auto; padding: 90px var(--space-4) var(--space-8); }
  .quest-badge { text-align: center; }

  .hero-btn-group { flex-direction: column; width: 100%; }
  .btn-epic { width: 100%; justify-content: center; text-align: center; }
}

.quest-badge {
  font-family: var(--font-pixel);
  font-size: var(--text-md);
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: var(--space-5);
  display: inline-flex; align-items: center; gap: var(--space-2);
}

.main-title {
  font-family: var(--font-pixel);
  font-size: var(--text-hero);
  line-height: 0.95;
  color: var(--white);
  margin-bottom: var(--space-4);
}
.main-title span { color: var(--gold); }

.hero-manifesto {
  max-width: 600px;
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin: 0 auto var(--space-8);
}

.hero-btn-group { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; justify-content: center; }

/* --- HERO SPLIT (accueil) : logo a gauche, titre/texte/CTA/deck a droite --- */
/* --- HERO : texte a gauche, cartes a droite, layout normal (2 blocs cote a cote,
   ecart fixe, unite centree). Jamais de flex-grow/space-between entre les 2 blocs :
   ca cree un vide qui grandit sans fin sur les ecrans larges (deja teste et casse 2x). --- */
.hero-text { display: flex; flex-direction: column; align-items: center; }
.hero-cards { display: flex; margin-top: var(--space-10); }

/* Seuil calcule sur le contenu reel : 620 (texte) + 64 (ecart) + 470 (3 cartes 190px qui se chevauchent)
   + 128 (padding 2x64) = 1282px minimum pour tenir sur une ligne sans se chevaucher. */
@media (min-width: 1300px) {
  .hero-columns {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    text-align: left;
    width: 100%;
    margin-left: auto; margin-right: auto;
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }
  .hero-columns .hero-text { flex: 0 0 auto; max-width: 620px; align-items: flex-start; }
  .hero-columns .hero-cards { flex: 0 0 auto; margin-top: 0; }
  /* --text-hero deborde une colonne de 620px : deja teste, on descend d'un cran. */
  .hero-columns .main-title { font-size: var(--text-title); }
  .hero-columns .hero-manifesto { margin-left: 0; margin-right: 0; }
  .hero-columns .hero-btn-group { justify-content: flex-start; }
}
.mini-card {
  width: 190px; aspect-ratio: 70 / 120;
  margin-left: -50px;
  position: relative;
}
.mini-card:first-child { margin-left: 0; }
.mini-card:nth-child(2) { margin-top: -20px; }
.mini-card .fan-art-frame { width: 100%; height: 100%; }
/* La zone de survol (.mini-card) ne doit JAMAIS retrecir : sinon elle expose la voisine
   sous le curseur et declenche son survol en cascade. Seul .mini-card-inner retrecit
   visuellement (scaleX) : l'ombre et les coins arrondis vivent ici, sur le MEME element
   que celui qui bouge, pour que l'ombre suive vraiment la carte au lieu de rester figee
   a sa taille pleine pendant que le contenu visible s'aplatit. */
.mini-card-inner {
  width: 100%; height: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
}
.mini-card-face {
  position: absolute; inset: 0;
}
.mini-card-face--back {
  opacity: 0;
}
.mini-card-face--back img {
  width: 100%; height: 100%;
  display: block;
}
/* 3 cartes a 190px (470px au total) debordent sous 640px : on retrecit.
   Placee apres la regle de base pour gagner sur l'ordre de cascade (meme specificite). */
@media (max-width: 640px) {
  .mini-card { width: 100px; margin-left: -26px; }
  .mini-card:nth-child(2) { margin-top: -10px; }
}
.btn-epic {
  font-family: var(--font-pixel);
  font-size: var(--text-2xl);
  padding: var(--space-3) var(--space-8);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}
.btn-gold {
  background: var(--gold);
  color: var(--black);
  border: 3px solid var(--black);
  box-shadow: 5px 5px 0 var(--black);
}
.btn-gold:hover { background: var(--gold-bright); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--black); }
.btn-stone {
  background: var(--bg-stone);
  color: var(--text-main);
  border: 2px solid var(--border-strong);
  box-shadow: 4px 4px 0 var(--black);
}
.btn-stone:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold:disabled, .btn-stone:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- SECTIONS GENERIQUES --- */
.forge-section, .showcase-section, .details-section, .concept-section {
  position: relative; z-index: 1;
  max-width: 1600px; margin: var(--space-10) auto; padding: var(--space-12) var(--space-10);
}

.ancient-frame {
  padding: var(--space-5) 0 var(--space-10);
  text-align: center;
}

.sec-kicker {
  font-family: var(--font-pixel);
  font-size: var(--text-xl);
  color: var(--gold);
  letter-spacing: 2px;
  display: block;
  margin-bottom: var(--space-2);
}
.sec-title {
  font-family: var(--font-pixel);
  font-size: var(--text-title);
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--space-5);
  text-shadow: 2px 2px 0 var(--black);
}
.sec-subtitle {
  max-width: 600px;
  margin: 0 auto var(--space-8);
  color: var(--text-muted);
  font-size: var(--text-md);
}

/* --- CARTES DE TIRAGE (Forge) --- */
.cards-altar-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
  perspective: 1200px;
}

.tarot-slot {
  aspect-ratio: 70 / 120;
  border: 3px dashed var(--border-subtle);
  border-radius: 6px;
  background: rgba(var(--black-rgb),0.35);
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-3);
}

.magic-card {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  transform-style: preserve-3d;
  opacity: 0;
  transform: scale(0.6) translateY(40px);
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.magic-card.is-flipped { transform: rotateY(180deg) !important; }

.card-face {
  position: absolute; inset: 0;
  border-radius: 6px;
  backface-visibility: hidden;
  overflow: hidden;
}

.card-front { z-index: 2; transform: rotateY(0deg); }

.card-sprite {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}

.card-back {
  transform: rotateY(180deg);
  background: var(--bg-card-back);
  border: 5px solid var(--gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-5);
}
.card-back-crest {
  width: 60px; height: 60px;
  border: 2px solid var(--gold);
  transform: rotate(45deg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  background: radial-gradient(circle, rgba(var(--gold-rgb),0.2) 0%, transparent 80%);
}
.card-back-crest svg { transform: rotate(-45deg); }
.card-back-lore { font-size: var(--text-base); color: var(--text-main); font-style: italic; line-height: 1.5; }
.card-back-hint { font-family: var(--font-pixel); font-size: var(--text-md); color: var(--gold); margin-top: var(--space-3); letter-spacing: 1px; }

.card-click-badge {
  position: absolute; bottom: -32px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: var(--text-md);
  color: var(--gold);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.magic-card.revealed + .card-click-badge { opacity: 1; }

/* --- SELECTEUR DE METHODE DE TIRAGE --- */
.spread-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.spread-tab {
  font-family: var(--font-pixel);
  font-size: var(--text-lg);
  letter-spacing: 0.5px;
  background: var(--bg-stone-deep);
  color: var(--text-muted);
  border: 2px solid var(--border-subtle);
  border-radius: 4px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: all 0.2s;
}
.spread-tab:hover { color: var(--text-main); border-color: var(--gold-dim); }
.spread-tab.active { color: var(--black); background: var(--gold); border-color: var(--black); box-shadow: 3px 3px 0 var(--black); }

.spread-info { margin-bottom: var(--space-5); }
.spread-resume { color: var(--text-main); font-size: var(--text-md); margin-bottom: var(--space-2); }
.spread-regle { color: var(--text-muted); font-size: var(--text-base); max-width: 640px; margin: 0 auto; }

/* --- MODE AUTO / MANUEL --- */
.mode-tabs {
  display: flex; justify-content: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.mode-tab {
  font-family: var(--font-pixel);
  font-size: var(--text-md);
  background: transparent;
  color: var(--text-muted);
  border: 2px solid var(--border-subtle);
  border-radius: 20px;
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: all 0.2s;
}
.mode-tab:hover { color: var(--text-main); border-color: var(--gold-dim); }
.mode-tab.active { color: var(--black); background: var(--blue-crest); border-color: var(--blue-crest); }

/* --- DECLENCHEUR MODE MANUEL (bouton inline sur la page) --- */
.manual-decks { margin: var(--space-3) 0 var(--space-8); text-align: center; }
.manual-progress { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); }
.manual-progress-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border-subtle); border: 1px solid var(--border-strong);
}
.manual-progress-dot.done { background: var(--gold); border-color: var(--gold); }

/* --- MODALE PLEIN ECRAN : CHOIX A L'AVEUGLE EN EVENTAIL --- */
.deck-modal {
  position: fixed; inset: 0; z-index: 3000;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(60, 45, 20, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(43, 92, 184, 0.25) 0%, transparent 60%),
    var(--bg-panel-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  overflow: hidden;
  opacity: 0;
}

.deck-modal-close {
  position: absolute; top: var(--space-5); left: var(--space-5); z-index: 20;
  background: none; border: none; color: var(--text-muted);
  font-family: var(--font-pixel); font-size: var(--text-md);
  cursor: pointer; letter-spacing: 1px;
  display: flex; align-items: center; gap: var(--space-2);
}
.deck-modal-close:hover { color: var(--gold); }

.deck-modal-intro {
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  text-align: center; max-width: 620px; padding: 0 var(--space-6); z-index: 10;
}
.deck-modal-kicker {
  display: block;
  font-family: var(--font-pixel); font-size: var(--text-xl); color: var(--gold);
  letter-spacing: 2px; margin-bottom: var(--space-3);
  text-shadow: 0 0 20px rgba(var(--gold-rgb), 0.4);
}
.deck-modal-line { color: var(--text-muted); font-size: var(--text-md); font-style: italic; }

.deck-fan-pivot {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  width: 0; height: 0;
}

.fan-pick-card {
  position: absolute;
  left: 0; top: 0;
  aspect-ratio: 70 / 120;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.25s ease;
  transform-origin: 50% 100%;
  background: none;
  padding: 0;
  opacity: 0;
}
.fan-pick-card:hover {
  box-shadow: 0 10px 30px rgba(var(--gold-rgb), 0.5);
  z-index: 999 !important;
}
.fan-pick-card.chosen { opacity: 0 !important; pointer-events: none; }

.fan-card-back {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--bg-stone) 0%, var(--bg-stone-deep) 100%);
  border: 2px solid var(--gold-dim);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
}
.fan-card-back svg { width: 34%; filter: drop-shadow(0 0 6px rgba(var(--gold-rgb),0.5)); }

.fan-reveal-card {
  position: fixed; z-index: 3100;
  width: 140px; aspect-ratio: 70/120;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 50px rgba(var(--gold-rgb),0.6);
  pointer-events: none;
}
.fan-reveal-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 640px) {
  .deck-modal-intro { top: 6%; }
}

/* --- GRILLE DE TIRAGE --- */
.spread-grid {
  margin: var(--space-8) 0;
  perspective: 1200px;
}

.spread-slot {
  position: relative;
  aspect-ratio: 70 / 120;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.spread-slot-label {
  margin-top: var(--space-3);
  font-family: var(--font-pixel);
  font-size: var(--text-base);
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.5px;
}

.spread-card { opacity: 0; }

/* Rangee simple de 3 cartes (Equipement du Heros) */
.layout-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6);
}
.layout-row .spread-slot { width: 190px; }

/* Croix a 5 cartes (Bouclier de l'Avenir) : centre + haut/bas/gauche/droite */
.layout-cross5 {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 170px));
  grid-template-areas:
    ".  s2 ."
    "s4 s1 s5"
    ".  s3 .";
  gap: var(--space-5);
  justify-content: center;
}
.layout-cross5 .pos-1 { grid-area: s1; }
.layout-cross5 .pos-2 { grid-area: s2; }
.layout-cross5 .pos-3 { grid-area: s3; }
.layout-cross5 .pos-4 { grid-area: s4; }
.layout-cross5 .pos-5 { grid-area: s5; }

/* Croix a 4 cartes sans centre (Fleche du Destin) */
.layout-cross4 {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 170px));
  grid-template-areas:
    ".  s4 ."
    "s2 .  s3"
    ".  s1 .";
  gap: var(--space-5);
  justify-content: center;
}
.layout-cross4 .pos-1 { grid-area: s1; }
.layout-cross4 .pos-2 { grid-area: s2; }
.layout-cross4 .pos-3 { grid-area: s3; }
.layout-cross4 .pos-4 { grid-area: s4; }

/* Grille 3x3 (Tour de la Verite) */
.layout-grid3x3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 150px));
  gap: var(--space-4);
  justify-content: center;
}

@media (max-width: 640px) {
  .layout-cross5, .layout-cross4 { grid-template-columns: repeat(3, minmax(80px, 110px)); gap: var(--space-2); }
  .layout-grid3x3 { grid-template-columns: repeat(3, minmax(70px, 100px)); gap: var(--space-2); }
  .spread-slot-label { font-size: var(--text-xs); }
}

.prophecy-terminal {
  padding: var(--space-5) var(--space-3);
  margin-top: var(--space-8);
  min-height: 80px;
  font-family: var(--font-pixel);
  font-size: var(--text-xl);
  color: var(--gold);
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.prophecy-terminal strong { white-space: nowrap; }

/* --- VITRINE DES ARCANES (Grimoire / Showcase) --- */
.showcase-header, .grimoire-header { text-align: center; margin-bottom: var(--space-10); }

.deck-fan-shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  perspective: 1200px;
}
@media (max-width: 900px) { .deck-fan-shelf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .deck-fan-shelf { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; } }

.fan-card {
  position: relative;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  cursor: pointer;
  overflow: hidden;
}
.fan-card::after {
  content: "";
  position: absolute; top: 0; left: -30%; width: 18%; height: 100%;
  background: linear-gradient(75deg, transparent 0%, rgba(var(--white-rgb),0.12) 45%, rgba(var(--gold-rgb),0.22) 50%, rgba(var(--white-rgb),0.12) 55%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 10;
  transition: left 0.75s ease;
}
.fan-card:hover {
  transform: translateY(-16px) scale(1.03);
  box-shadow: var(--shadow-xl), 0 0 30px rgba(var(--gold-rgb), 0.25);
}
.fan-card:hover::after { left: 130%; }

.fan-card-inner {
  display: block;
  height: 100%;
  position: relative;
}

.fan-art-frame {
  width: 100%; aspect-ratio: 70 / 120;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.fan-art-frame img {
  width: 100%; height: 100%;
  display: block;
}
.card-sprite img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.showcase-hint {
  text-align: center; margin-top: var(--space-6);
  font-family: var(--font-pixel); font-size: var(--text-lg); color: var(--text-muted); letter-spacing: 1px;
}

/* --- GRIMOIRE : table de taverne 3D --- */
/* La page tient dans l'ecran : ni scroll ni pied de page. La table (canvas three.js) remplit tout
   l'ecran derriere la nav. Les boutons HTML (decks et cartes) sont colles sur les pieces 3D par le JS,
   qui leur passe --x, --y, --w et --h : clavier, lecteur d'ecran et survol fonctionnent sans 3D. */
body.page-table { height: 100dvh; overflow: hidden; }
.table-section {
  position: relative; z-index: 1;
  width: 100%; height: 100dvh;
  overflow: hidden;
  background: var(--bg-void);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.table-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 0.6s ease;
}
.table-section.is-ready .table-canvas { opacity: 1; }
/* Vignettage pour que les pieces ressortent, sous les boutons et sans capter la souris */
.table-section::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(var(--black-rgb), 0.6) 100%);
  pointer-events: none;
}
.table-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.table-section:not(.is-ready) .table-overlay,
.table-section.is-intro .table-overlay { visibility: hidden; }

.deck-pile, .table-card {
  position: absolute; left: 0; top: 0;
  transform: translate(var(--x, 0px), var(--y, 0px));
  width: var(--w, 0px); height: var(--h, 0px);
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
  cursor: pointer; pointer-events: auto;
}
/* Pas de cadre de focus : la piece qui monte et le projecteur qui la suit montrent deja le focus */
.deck-pile:focus, .table-card:focus { outline: none; }
.table-card:disabled, .table-section.is-dealing .table-card { pointer-events: none; }

/* Nombre de cartes et nom : sous le deck, sur une ligne, ancres sur son bord avant (--ax, --ay) */
.deck-info {
  position: absolute; left: var(--ax, 50%); top: var(--ay, 100%);
  transform: translateX(-50%);
  margin-top: var(--space-3);
  display: flex; align-items: center; gap: var(--space-4);
  white-space: nowrap;
}
.deck-count {
  width: var(--space-6); height: var(--space-6);
  display: grid; place-items: center; flex: none;
  transform: rotate(45deg);
  background: var(--bg-stone-deep);
  border: 2px solid var(--border-strong);
}
.deck-count > span {
  transform: rotate(-45deg);
  font-family: var(--font-pixel); font-size: var(--text-sm); line-height: 1; color: var(--text-main);
}
.deck-pile.is-active .deck-count > span { color: var(--gold); }
.deck-pile-label {
  font-family: var(--font-pixel); font-size: var(--text-lg); letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--black);
}
/* Pendant la partie, les decks sont petits et en haut : seul le nombre reste, les noms s'effacent */
.table-section.has-active .deck-pile-label { display: none; }
@media (max-width: 640px) {
  .deck-pile-label { font-size: var(--text-sm); }
  .deck-info { gap: var(--space-2); }
}

/* Secours sans WebGL : simple grille de cartes par famille */
.table-section.is-fallback .table-canvas,
.table-section.is-fallback .table-overlay,
.table-section.is-lost .table-overlay { display: none; }
.table-fallback {
  position: relative; z-index: 1;
  height: 100%; overflow-y: auto;
  padding: var(--space-16) var(--space-4) var(--space-8);
}
.fallback-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.fallback-tab {
  appearance: none; cursor: pointer;
  background: rgba(var(--black-rgb), 0.6);
  border: 2px solid var(--border-strong); border-radius: 6px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-pixel); font-size: var(--text-lg);
}
.fallback-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(84px, 9vw), 1fr)); gap: var(--space-4); }
.fallback-card { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; }
.fallback-card img { width: 100%; display: block; }

/* --- FICHE PLEIN ECRAN : carte 3D a gauche, texte a droite --- */
.card-detail {
  position: fixed; inset: 0; z-index: 1500;
  display: grid; grid-template-columns: 1fr 1fr;
}
/* Le fond s'estompe a part : pendant le vol de la carte, on voit encore la table derriere */
.detail-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 25% 50%, var(--bg-glow) 0%, var(--bg-void) 70%);
}
/* Le canvas couvre tout l'ecran : la carte vole de la table jusqu'a la fiche, sans etre coupee */
.detail-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.detail-back {
  position: absolute; top: var(--space-6); left: var(--space-6); z-index: 2;
  appearance: none; background: none; border: 0; cursor: pointer; padding: var(--space-2);
  color: var(--text-main);
}
/* Fleche pixel art : dessinee en carres de 1 unite, jamais lissee */
.detail-back svg { display: block; width: var(--space-10); height: auto; fill: currentColor; shape-rendering: crispEdges; }
.detail-back:hover { color: var(--gold-bright); }
.detail-back:hover svg { transform: translateX(calc(var(--space-1) * -1)); }
.detail-back:focus-visible { outline: 2px solid var(--text-main); outline-offset: var(--space-1); }
.detail-visual { position: relative; min-height: 0; }
.detail-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.detail-text {
  position: relative; align-self: center; justify-self: center;
  width: 100%; max-width: 46rem; max-height: 100dvh; overflow-x: hidden; overflow-y: auto;
  padding: var(--space-8);
}
.detail-kicker { display: block; font-family: var(--font-pixel); font-size: var(--text-md); letter-spacing: 2px; text-transform: uppercase; }
.detail-number { font-family: var(--font-pixel); font-size: var(--text-title); line-height: 1; color: var(--text-main); margin-top: var(--space-2); }
.detail-name { font-family: var(--font-pixel); font-size: var(--text-3xl); line-height: 1.05; text-transform: uppercase; color: var(--text-main); margin-top: var(--space-2); }
/* Separateur : celui du site (.ornament-divider), aligne a gauche avec le texte */
.detail-text .ornament-divider { margin: var(--space-5) 0; }
.detail-section + .detail-section { margin-top: var(--space-5); }
.detail-label { font-family: var(--font-pixel); font-size: var(--text-xs); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
.detail-copy { font-size: var(--text-base); line-height: 1.6; color: var(--text-main); }
/* Petit ecran : la carte en haut, le texte dessous (il defile a l'interieur de la fiche) */
@media (max-width: 900px) {
  .card-detail { grid-template-columns: 1fr; grid-template-rows: 42dvh 1fr; }
  .detail-text { align-self: stretch; padding: var(--space-6) var(--space-6) var(--space-12); }
}

/* --- MODALE D'INSPECTION --- */
.inspect-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5, 6, 9, 0.88);
  backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.inspect-modal.active { display: flex; }

.modal-content {
  background: var(--bg-stone);
  border: 4px solid var(--gold);
  border-radius: 8px;
  max-width: 480px; width: 100%;
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
  position: relative;
  text-align: center;
}
.modal-close-btn {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: transparent; border: none;
  color: var(--white); font-family: var(--font-pixel); font-size: var(--text-2xl); line-height: 1;
  cursor: pointer;
}
.modal-close-btn:hover { color: var(--gold); }
.modal-visual { margin: var(--space-4) auto; width: 200px; aspect-ratio: 70 / 120; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; }
.modal-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-lore { font-size: var(--text-lg); font-style: italic; color: var(--text-main); margin: var(--space-4) 0; line-height: 1.6; }
.modal-advice { font-family: var(--font-pixel); font-size: var(--text-xl); color: var(--gold); border-top: 1px solid var(--border-hairline); padding-top: var(--space-3); }

/* --- SPECS --- */
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.spec-block {
  background: var(--bg-stone);
  border: 3px solid var(--border-hairline);
  border-radius: 8px;
  padding: var(--space-8) var(--space-6);
  box-shadow: 6px 6px 0 var(--black);
  text-align: left;
}
.spec-block h3 { font-family: var(--font-pixel); font-size: var(--text-3xl); color: var(--gold); line-height: 1; margin-bottom: var(--space-3); }
.spec-block p { color: var(--text-muted); font-size: var(--text-base); margin-bottom: var(--space-3); }
.spec-block--full { grid-column: 1 / -1; }
.spec-list { list-style: none; margin-top: var(--space-4); }
.spec-list li { font-family: var(--font-pixel); font-size: var(--text-xl); color: var(--text-main); margin-bottom: var(--space-2); }
.spec-list li span { color: var(--gold); margin-right: var(--space-2); }
/* Puce des listes : l'etoile doree en X du logo (calque 4), a la place du symbole texte (emoji) */
.star-bullet { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; background: url("../img/logo/etoile_calque_4.webp") center / 235% no-repeat; }
.example-lecture { color: var(--text-muted); font-style: italic; }
.creator-tag { color: var(--gold); font-family: var(--font-pixel); font-size: var(--text-xl); letter-spacing: 1px; }
.signature-block { margin-top: var(--space-5); }

/* --- MODIFICATEURS DE PAGE (hero compact, sous-titres, liens indices) --- */
.hero-altar--compact { min-height: 30vh; padding-top: 160px; padding-bottom: var(--space-5); }
.hero-altar--tirage { min-height: 35vh; padding-top: 160px; }
.main-title--sub { font-size: var(--text-title); }
.hint-link { color: var(--gold); text-decoration: none; }
.hero-secondary-link {
  font-family: var(--font-pixel);
  font-size: var(--text-lg);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.hero-secondary-link:hover { color: var(--gold-bright); }
.showcase-hint--spaced { margin-top: var(--space-6); }
.showcase-section--cta { text-align: center; padding-top: 0; }
.text-c-archetype { color: var(--c-archetype); }
.text-c-epreuve { color: var(--c-epreuve); }
.text-c-objet { color: var(--c-objet); }
.text-c-special { color: var(--c-special); }
.modal-title-compact { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.modal-keys { color: var(--text-muted); letter-spacing: 1px; font-size: var(--text-base); }

/* --- Page d'accueil : rythme vertical renforce + vitrine compacte (conversion) --- */
.section--spaced { margin-top: var(--space-16); margin-bottom: var(--space-16); }

.deck-fan-shelf--showcase {
  grid-template-columns: repeat(4, minmax(0, 190px));
  justify-content: center;
  gap: var(--space-8);
}
@media (max-width: 900px) {
  .deck-fan-shelf--showcase { grid-template-columns: repeat(2, minmax(0, 190px)); }
}
@media (max-width: 540px) {
  .deck-fan-shelf--showcase { grid-template-columns: 1fr; max-width: 220px; margin: 0 auto; }
}

/* --- ARCANES (section a onglets horizontaux, modele valheimgame.com) --- */
/* Grand separateur (haut/bas de section) : pointe + motif central a taille FIXE (1px par unite du
   SVG source divider_full.svg, jamais etires), relies par une ligne qui s'allonge. */
.fx-divider { display: flex; align-items: center; width: 100%; opacity: .5; }
/* Epaisseur 2px partout (demande 2026-09-25) : la ligne fait 2px et les motifs pixel (carres de 3 unites)
   sont affiches aux 2/3, donc chaque carre fait aussi 2px : ligne et motifs gardent la meme epaisseur. */
.fx-divider .fx-div-line { flex: 1 1 auto; height: 2px; background: var(--text-main); }
.fx-divider .fx-div-el { flex: 0 0 auto; display: flex; zoom: 0.6667; }
.fx-div-fixed { display: block; shape-rendering: crispEdges; }
.fx-div-fixed rect, .fx-div-fixed polyline { fill: var(--text-main); stroke: none; }

/* Demi-separateurs (divider_half_top.svg / divider_half_bottom.svg, colles tels quels, echelle
   UNIFORME sur la largeur du bloc) au-dessus et en dessous du menu d'onglets, opacite encore plus
   faible que le grand separateur. Une seule regle d'ecart (--space-5) partout dans cette colonne. */
.fx-half { max-width: 42rem; margin: 0 auto; opacity: .3; }
/* Asymetrique demande : au moins le double d'espace entre le grand divider et le petit, et moins
   entre le petit divider et le menu (ce sont 2 elements distincts vs un seul groupe visuel). */
.fx-half-top { margin-top: 4rem; margin-bottom: var(--space-1); }
.fx-half-bottom { margin-top: var(--space-1); margin-bottom: 4rem; }
.fx-svg-divider { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.fx-svg-divider rect, .fx-svg-divider polyline { fill: var(--text-main); stroke: none; }

.fx-section {
  position: relative; z-index: 1;
  max-width: 1600px;       /* meme limite que .forge-section/.showcase-section/.details-section/.concept-section */
  margin: 0 auto;
  padding: 5rem var(--space-4) 6rem;
}
/* Fond de la section : DEUX calques reels qui s'alternent (JS bascule .is-active + change l'image
   du calque cache avant de le faire apparaitre) pour un vrai fondu quand l'onglet change, au lieu
   d'un changement d'image instantane. Les 2 grands dividers sont poses sur les limites de la section
   (.fx-edge-top / .fx-edge-bottom) : l'image commence et s'arrete PILE sur le trait, donc aux limites.
   full-bleed : sort du max-width 1600px pour couvrir 100% de la largeur ecran. */
.fx-bg-layer {
  --a: 1;    /* pose par le script, meme mecanique que .fx-slide : le fond bouge et fond EXACTEMENT
                comme l'image/texte/perso, pas separement. Toujours vers la droite (--a, jamais --d). */
  /* commence/finit a la limite de la section = au CENTRE du trait des grands dividers */
  position: absolute; top: 0; bottom: 0; z-index: -1;
  left: 50%; right: auto; width: 100vw; margin-left: -50vw;
  background-image: url("../img/bg/bg_paysage_1_mono.webp");
  background-size: cover;
  background-position: center;
  opacity: calc(0.10 * (1 - var(--a)));
  transform: translate3d(calc(var(--a) * 10vw), 0, 0);
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
}
/* Grands dividers des arcanes : leur trait tombe PILE sur la limite haute/basse de la section.
   Deplacement visuel seulement (transform) : aucune marge ni aucun espacement ne change.
   -50% / +50% = la moitie de leur propre hauteur, pour centrer le trait sur la limite. */
.fx-edge-top { transform: translateY(calc(-5rem - 50%)); }
.fx-edge-bottom { transform: translateY(calc(6rem + 50%)); }
/* Le fond de la section suivante remonte a travers sa marge jusqu'a ce trait */
.fx-section + .section--spaced > .sec-mono { top: calc(var(--space-16) * -1); }
.fx-tabs {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0 auto;
  padding: var(--space-2) 0;
  max-width: 42rem;
}
.fx-tab, .fx-arrow {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-pixel); font-size: var(--text-lg);
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
}
.fx-tab:hover, .fx-arrow:hover { color: var(--text-main); }
.fx-tab.is-active { color: var(--gold); }
.fx-arrow { display: flex; align-items: center; padding: 0 var(--space-1); }
.fx-arrow-ico { width: 1.1em; fill: currentColor; }
.fx-arrow--next .fx-arrow-ico, .fx-btn--next .fx-arrow-ico { transform: scaleX(-1); }

.fx-frame { container-type: inline-size; margin: 0 0 var(--space-5); }  /* les cqw du stage se rapportent a la largeur de ce cadre ; pas de marge en haut, l'image colle au divider juste au-dessus */
.fx-stage {
  --span: 10cqw;          /* distance de glissement (leger decalage facon Valheim, pas un slide) */
  position: relative;
  /* hauteur dans la MEME unite que la largeur de l'image (58cqw, ratio 16:9 => 32.6cqw), SANS borne
     en px : purement cqw des deux cotes pour qu'ils restent verrouilles ensemble sur n'importe quelle
     largeur d'ecran. */
  height: 36cqw;
}
.fx-slide {
  --d: 0; --a: 0;         /* posees par le script : distance a la diapo courante (en diapos) et sa valeur absolue */
  position: absolute; inset: 0;
  opacity: calc(1 - var(--a));
  /* TOUJOURS vers la droite, dans les deux sens (celui qui part ET celui qui arrive) : --a est
     toujours positif. Un seul mouvement pour image + texte + perso. */
  transform: translate3d(calc(var(--a) * var(--span)), 0, 0);
}
.fx-slide[hidden] { display: none; }
.fx-clip {
  position: absolute; inset: 0; overflow: hidden;
  /* vignette horizontale : l'image qui glisse se dissout avant d'atteindre le bord du cadre, au lieu
     d'etre coupee net par l'overflow:hidden pendant la transition entre onglets */
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}
.fx-image, .fx-char, .fx-text { position: absolute; will-change: transform; }
.fx-image {
  left: 8cqw; top: 0;
  width: 58cqw; height: auto; aspect-ratio: 16 / 9;   /* dimensionnee par la LARGEUR (meme unite que le texte a droite) donc ratio 16:9 jamais rogne ; colle en haut du stage */
  box-shadow: var(--shadow-lg);
  /* masque aux bords dechires (blanc = garde, noir = enleve) */
  mask-image: url("../img/bg/masque_image.webp");
  mask-size: 100% 100%; mask-repeat: no-repeat; mask-mode: luminance;
  -webkit-mask-image: url("../img/bg/masque_image.webp");
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
}
.fx-image::after {
  /* fondu en bas de l'image, respecte le meme masque a bords dechires que l'image elle-meme */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(var(--black-rgb), .9) 100%);
}
.fx-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-char {
  left: -10cqw; bottom: 0;   /* volontairement au-dela du cadre : rien ne le coupe plus */
  height: 81%;
  z-index: 2;
  pointer-events: none;
  /* s'ajoute au glissement de .fx-slide : le perso bouge 2x plus que le reste (20cqw au total) */
  transform: translate3d(calc(var(--a) * var(--span)), 0, 0);
}
.fx-char img {
  display: block; height: 100%; width: auto; max-width: none;
  /* meme fondu que l'image : les pieds se dissolvent dans le fond au lieu d'etre coupes net */
  mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
}
.fx-text {
  right: 2cqw; top: 50%;   /* ancre depuis la droite : ne depend plus de la largeur exacte de l'image */
  width: 30cqw;
  transform: translateY(-50%);
}
.fx-title {
  font-family: var(--font-pixel);
  font-size: 2.6cqw;
  line-height: 1;
  text-transform: uppercase;
  margin: var(--space-2) 0 var(--space-4);
}
.fx-copy { font-size: max(var(--text-base), 1.365cqw); line-height: 1.6; color: var(--text-muted); }
.fx-buttons { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.fx-btn {
  display: flex; align-items: center; justify-content: center;
  width: var(--space-12); height: var(--space-10);
  background: rgba(var(--black-rgb), .4);
  border: 2px solid var(--border-strong);
  color: var(--text-muted);
  cursor: pointer;
}
.fx-btn:hover { color: var(--text-main); border-color: var(--text-muted); }
.fx-btn .fx-arrow-ico { width: 1.3rem; fill: currentColor; }

@media (max-width: 900px) {
  .fx-stage { height: clamp(560px, 76vh, 900px); }
  .fx-title { font-size: calc(var(--text-title) * 0.735); }
  .fx-copy { font-size: var(--text-base); }
  .fx-image { left: 0; width: 100cqw; height: auto; max-width: none; aspect-ratio: 16/9; top: 0; }
  .fx-char { height: 40cqw; left: -2cqw; bottom: auto; top: -4cqw; }
  .fx-text { left: 0; top: 62cqw; width: 100cqw; padding: 0 var(--space-4); transform: none; }
}

/* --- FOOTER --- */
footer.site-footer {
  position: relative; z-index: 1;
  border-top: 2px solid var(--border-hairline);
  padding: var(--space-8) var(--space-4); text-align: center;
  background: var(--bg-panel-deep);
}
.footer-credo {
  font-family: var(--font-pixel); font-size: var(--text-xl); color: var(--gold); margin-bottom: var(--space-2);
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
}
.footer-star { width: 18px; height: 18px; }
.footer-sub { font-size: var(--text-sm); color: var(--text-muted); }

@media (max-width: 768px) {
  .specs-grid { grid-template-columns: 1fr; }
  .cards-altar-slots { grid-template-columns: 1fr; max-width: 260px; margin-left: auto; margin-right: auto; }
}

/* ===================== TIRAGE : ACCUEIL DES TIRAGES (tirage.php) ===================== */
:root {
  --th-plate: clamp(120px, 9vw, 180px);   /* largeur des plaques (images 827 px : toujours reduites, jamais agrandies) */
  --th-text: 42rem;                       /* longueur de ligne confortable pour les paragraphes */
  --th-card-h: 1.716;                     /* hauteur d'une carte pour une largeur de 1 (827 x 1419) */
  /* cartes du schema des methodes : la section entiere (du separateur a celui de la section suivante) doit tenir
     dans la hauteur de l'ecran. 630px = tout ce qui n'est pas le schema (menu, separateur, en-tete, onglets, marges) ;
     le schema fait 6,3 hauteurs de carte (3 rangees). */
  --th-mini: clamp(48px, min(5.4vw, calc((100svh - 630px) / 6.3)), 100px);
  --th-micro: clamp(30px, 2.6vw, 46px);   /* cartes des petites demonstrations des modes */
}

/* Menu du site : fond qui apparait des qu'on fait defiler, le texte ne passe plus dessous en transparence */

/* Fonds : un mono par section, entre ses deux separateurs (comme les arcanes de l'accueil) : il commence au
   centre du grand separateur de la section et finit au centre de celui de la section suivante (padding-top 5rem
   partout, separateur de 14px). Pleine largeur d'ecran, bords fondus, tres discret. */
.th-sbg, .th-mbg {
  position: absolute; top: calc(5rem + 7px); bottom: calc(-5rem - 7px);
  left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
}
.th-sbg { opacity: .10; }   /* image posee sur l'element (style inline : chemin relatif a la page) */
.th-final .th-sbg { bottom: 0; }   /* derniere section : pas de separateur apres, le fond s'arrete avec elle */
/* overflow-x: clip : les fonds et diapos qui glissent (10vw) ne doivent jamais elargir la page,
   sinon elle defile de cote et tout parait decale a gauche sous le menu */
.th-page { position: relative; z-index: 1; overflow-x: clip; }

/* ---------- Hero : celui de l'accueil (hero-altar hero-columns : plein ecran, texte a gauche, cartes a droite),
   avec l'image de la salle de l'autel au lieu du paysage, et les 4 plaques a la place des mini-cartes ---------- */
.th-hero.hero-columns::before { background-image: url("../img/bg/bg_salle_2.webp"); }

/* Bouton d'action : le bouton or du site, a une taille raisonnable */
.th-cta { font-size: var(--text-lg); padding: var(--space-3) var(--space-6); }

/* Sections : meme respiration que la section des arcanes de l'accueil (5rem au-dessus, 6rem en dessous),
   separees par le grand separateur pixel de l'accueil ; en-tetes centres (kicker, titre, sous-titre de l'accueil) */
.th-section { position: relative; max-width: 1600px; margin: 0 auto; padding: 5rem var(--space-10) 6rem; }
.th-section > .fx-divider:not(.fx-half) { margin-bottom: 5rem; }   /* le grand seulement : les demi-separateurs gardent l'ecart de l'accueil */
.th-head { text-align: center; margin-bottom: var(--space-16); }
.th-head .sec-subtitle { margin-bottom: 0; }

.th-name { font-family: var(--font-pixel); font-size: var(--text-2xl); line-height: 1.05; color: var(--gold); margin-bottom: var(--space-2); }
.th-meta { font-family: var(--font-pixel); font-size: var(--text-sm); letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4); }
.th-meta .a { color: var(--c-archetype); } .th-meta .e { color: var(--c-epreuve); } .th-meta .i { color: var(--c-objet); }
.th-body p { color: var(--text-main); font-size: var(--text-base); line-height: 1.6; margin-bottom: var(--space-3); max-width: var(--th-text); }
.th-body p.th-summary, .th-body p.th-example { color: var(--text-muted); font-style: italic; }

/* Lien d'action : fleche pixel + libelle, jamais souligne */
.th-go {
  display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2);
  font-family: var(--font-pixel); font-size: var(--text-md); letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-main); text-decoration: none;
}
.th-go svg { width: var(--space-6); height: auto; fill: currentColor; shape-rendering: crispEdges; transition: transform .2s ease; }
.th-go:hover { color: var(--gold); }
.th-go:hover svg { transform: translateX(var(--space-1)); }

/* ---------- Les 4 methodes : onglets, meme glissement que les arcanes de l'accueil (Valheim) ---------- */
/* Fonds dedies (a fournir) : 2 calques qui s'alternent, meme mouvement que les diapos */
.th-mbg {
  --a: 1;
  opacity: calc(0.10 * (1 - var(--a)));
  transform: translate3d(calc(var(--a) * 10vw), 0, 0);
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
}
/* onglets entre les deux demi-separateurs, exactement comme les arcanes de l'accueil ;
   marges resserrees dans cette section pour qu'elle tienne dans un ecran */
.th-methods { padding-bottom: 3rem; }
.th-methods > .fx-divider:not(.fx-half) { margin-bottom: 3rem; }
.th-methods .th-head { margin-bottom: var(--space-10); }
.th-methods .fx-half-top { margin-top: 0; }
.th-methods .fx-half-bottom { margin-bottom: var(--space-6); }
/* La situation a laquelle repond la methode choisie (texte du bas de sa plaque), sous les onglets */
.th-when { text-align: center; font-size: var(--text-lg); font-style: italic; color: var(--text-main); min-height: 1.6em; margin-bottom: var(--space-6); }
.th-stage { --span: 6vw; position: relative; height: calc(var(--th-mini) * 6.3 + var(--space-10)); }
.th-slide {
  --a: 0;
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center;
  opacity: calc(1 - var(--a));
  transform: translate3d(calc(var(--a) * var(--span)), 0, 0);
}
.th-slide[hidden] { display: none; }

/* Le schema de la methode : emplacements numerotes, paquet a droite, les cartes viennent s'y poser dans l'ordre,
   restent, rentrent dans le paquet, et ca recommence. Aucun texte sur les cartes : la colonne de droite explique,
   et la famille est ecrite sur le dos de chaque carte.
   --c / --r = colonne / rangee de l'emplacement (comme sur la table) ; --ox = centre du bloc emplacements + paquet. */
.th-schema {
  --sx: calc(var(--th-mini) * 1.5); --sy: calc(var(--th-mini) * 2.1); --ox: calc(50% - var(--th-mini) * 1.05);
  position: relative; height: 100%;
}
.th-pos {
  position: absolute; width: var(--th-mini); aspect-ratio: 827 / 1419;
  left: calc(var(--ox) + var(--c) * var(--sx) - var(--th-mini) / 2);
  top: calc(50% + var(--r) * var(--sy) - var(--th-mini) * var(--th-card-h) / 2);
}
.th-slot {
  border: 2px dashed rgba(var(--white-rgb), .22); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel); font-size: var(--text-xl); color: rgba(var(--white-rgb), .35);
}
.th-card { display: block; height: auto; filter: drop-shadow(3px 3px 0 rgba(var(--black-rgb), .7)); }
.th-deck { --c: 2.4; --r: 0; }
.th-deck img { position: absolute; inset: 0; width: 100%; height: auto; filter: drop-shadow(2px 2px 0 rgba(var(--black-rgb), .7)); }
.th-deck img:nth-child(2) { transform: translate(-2px, -3px); }
.th-deck img:nth-child(3) { transform: translate(-4px, -6px); }

/* ---------- Les 2 modes : plaque, texte, et une petite demonstration qui tourne en boucle ---------- */
.th-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 36rem)); justify-content: center; gap: var(--space-16) calc(var(--space-16) * 2); }
.th-item { display: grid; grid-template-columns: var(--th-plate) 1fr; gap: var(--space-8); align-items: start; }
.th-plate { width: 100%; height: auto; display: block; filter: drop-shadow(4px 4px 0 rgba(var(--black-rgb), .7)); transition: transform .25s ease; }
.th-item:hover .th-plate { transform: translateY(calc(var(--space-2) * -1)) rotate(-2deg); }
.th-demo { position: relative; height: calc(var(--th-micro) * var(--th-card-h) * 2.3); margin-top: var(--space-10); }
.th-demo .th-m {
  position: absolute; width: var(--th-micro); aspect-ratio: 827 / 1419;
  left: calc(var(--x) * var(--th-micro)); top: calc(var(--y) * var(--th-micro));
}
.th-demo .th-slot { border-width: 1px; font-size: var(--text-xs); }

/* ---------- Comment ca marche : tuto de l'utilisateur, puis 4 etapes qui s'allument l'une apres l'autre ---------- */
.th-tuto { display: block; width: 100%; max-width: 1280px; height: auto; margin-bottom: var(--space-10); }
.th-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 18rem)); justify-content: center; gap: var(--space-16); counter-reset: step; }
.th-steps li { counter-increment: step; color: var(--text-muted); font-size: var(--text-base); line-height: 1.7; text-align: center; }
.th-steps li::before {
  content: counter(step); display: block;
  font-family: var(--font-pixel); font-size: var(--text-title); line-height: 1; color: var(--c, var(--gold)); margin-bottom: var(--space-3);
  transition: color .3s steps(2);
}
.th-steps.is-waiting li { --c: var(--border-strong); }
.th-steps strong { display: block; font-family: var(--font-pixel); font-size: var(--text-lg); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: var(--text-main); margin-bottom: var(--space-3); }

.th-final { text-align: center; }
.th-final .sec-title { margin-bottom: var(--space-10); }

/* ---------- Les formules (tirage.php#formules, resume sur l'accueil) : prix et textes lus dans tarifs.json.
   Du texte sans cadre, comme les etapes : nom, prix, phrase, bouton ; les boutons alignes en bas. ---------- */
.th-offers { text-align: center; }
.th-free { margin-bottom: var(--space-16); }
.th-free-title { font-family: var(--font-pixel); font-size: var(--text-2xl); letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-2); }
.th-offer-text { color: var(--text-main); font-size: var(--text-base); line-height: 1.6; max-width: var(--th-text); margin: 0 auto var(--space-5); }
.th-offer-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 16rem)); justify-content: center; gap: var(--space-16); }
.th-offer { display: flex; flex-direction: column; align-items: center; }
.th-offer .th-offer-text { flex: 1; }
.th-offer-name { display: block; font-family: var(--font-pixel); font-size: var(--text-lg); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: var(--text-main); margin-bottom: var(--space-3); }
.th-offer-price { font-family: var(--font-pixel); font-size: var(--text-title); line-height: 1; color: var(--gold); margin-bottom: var(--space-3); }
.th-offer-note { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-8); }
.th-box { margin-top: var(--space-16); }
.th-warning { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; max-width: var(--th-text); margin: var(--space-16) auto 0; }
.home-offer { margin-bottom: var(--space-8); }
/* Hero de la page des tirages : l'offre gratuite sous le bouton, avec le lien vers les formules */
.th-hero-free { font-family: var(--font-pixel); font-size: var(--text-base); letter-spacing: 1px; color: var(--text-main); margin-top: var(--space-4); }
@media (max-width: 1100px) { .th-offer-list { grid-template-columns: repeat(2, minmax(0, 16rem)); } }
@media (max-width: 640px) { .th-offer-list { grid-template-columns: minmax(0, 16rem); gap: var(--space-10); } }

@media (max-width: 1100px) {
  .th-grid { grid-template-columns: 1fr; }
  .th-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  /* petit ecran : schema au-dessus, texte dessous ; seule la methode choisie est affichee */
  .th-stage { height: auto; }
  .th-slide { position: relative; grid-template-columns: 1fr; gap: var(--space-6); }
  .th-slide.is-off { display: none; }
  .th-schema { height: calc(var(--th-mini) * 6.3); }
}
@media (max-width: 640px) {
  .th-section { padding: var(--space-8) var(--space-4); }
  .th-item { grid-template-columns: 96px 1fr; gap: var(--space-4); }
  .th-steps { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Plaques du hero des tirages (mini-cartes de l'accueil, hero.js), 4 au lieu de 3 :
   - eventail symetrique : les 2 du milieu sont relevees (sur l'accueil, seule la 2e, celle du milieu de 3) ;
   - pas de box-shadow : il dessine un rectangle qui deborde aux coins arrondis des plaques ;
     l'ombre suit la forme de la plaque (drop-shadow). */
.th-plates .mini-card:nth-child(2), .th-plates .mini-card:nth-child(3) { margin-top: -20px; }
.th-plates .mini-card-inner { box-shadow: none; overflow: visible; border-radius: 0; }
.th-plates .fan-art-frame { overflow: visible; }
.th-plates .mini-card-face img { filter: drop-shadow(6px 6px 0 rgba(var(--black-rgb), .6)); }
@media (max-width: 640px) { .th-plates .mini-card:nth-child(2), .th-plates .mini-card:nth-child(3) { margin-top: -10px; } }

/* ===================== TIRAGE : TABLE 3D ET LECTURE (tirage-table.php) ===================== */
:root {
  --tt-crystal: #8cc4ff;        /* lumiere du cristal peint */
  --tt-engrave-rgb: 226, 226, 237;
  --tt-icon: 24px;              /* icones pixelarticons : taille native de leur grille, pixels nets */
}
.page-tirage .table-canvas { z-index: 0; }

/* Fleche (pixelarticons arrow-down, MIT) au-dessus de l'oeil allume : "touche ici pour tout devoiler" */
/* --x/--y/--s : position et taille donnees par le JS (centree sur la pupille peinte, taille = 1/3 de l'oeil) */
.tt-eye-arrow {
  position: absolute; left: 0; top: 0;
  width: var(--s, var(--tt-icon)); height: var(--s, var(--tt-icon));
  transform: translate(var(--x, 0px), var(--y, 0px));
  color: var(--tt-crystal); pointer-events: none;
}
.tt-eye-arrow svg {
  display: block; width: 100%; height: 100%; max-width: none;
  fill: currentColor; shape-rendering: crispEdges;
  filter: drop-shadow(2px 2px 0 var(--black));
  animation: tt-eye-bob 1.1s steps(2, jump-none) infinite alternate;
}
@keyframes tt-eye-bob {
  from { transform: translateY(-25%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .tt-eye-arrow svg { animation: none; } }

/* La lecture du tirage : meme presentation que la fiche du Grimoire (fond, fleche, typographie, filets).
   En haut : les cartes dans la disposition du tirage (a gauche) et le message de guidance (a droite).
   En dessous : la synthese de chaque carte. */
/* Tout tient sur un ecran : la page ne defile jamais, seule la colonne de droite (message puis synthese) defile.
   Les cartes et le texte forment un seul bloc centre, avec un ecart fixe entre eux. */
.tt-reading {
  position: fixed; inset: 0; z-index: 1500; overflow: hidden;
  background: radial-gradient(circle at 30% 45%, var(--bg-glow) 0%, var(--bg-void) 70%);
}
.tt-read-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.tt-read-hero {
  position: relative; height: 100dvh;
  display: flex; justify-content: center; gap: var(--space-12);
  padding: 0 var(--space-8);
}
.tt-read-spread { position: relative; flex: 0 0 auto; height: 100dvh; }   /* largeur donnee par le JS : juste celle des cartes */
.tt-read-col {
  flex: 0 1 46rem; min-width: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-16) 0 var(--space-12);
  scrollbar-width: thin; scrollbar-color: var(--border-hairline) transparent;
}
.tt-read-card {
  position: absolute; transform: translate(-50%, -50%);
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  transition: transform .2s ease, opacity .2s ease;
}
.tt-read-card img { display: block; width: 100%; filter: drop-shadow(4px 4px 0 rgba(var(--black-rgb), .7)); }
.tt-read-card span {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: var(--space-3); width: var(--lw, auto); text-align: center; line-height: 1.25;   /* --lw : largeur de la case, donnee par le JS */
  font-family: var(--font-pixel); font-size: var(--text-sm); letter-spacing: 1px; text-transform: uppercase;
}
.tt-read-card:hover { transform: translate(-50%, calc(-50% - var(--space-1))); }
.tt-reading.has-pick .tt-read-card:not(.is-on) { opacity: .45; }
.tt-read-card.is-on { transform: translate(-50%, calc(-50% - var(--space-2))); }
.tt-read-card.is-on img { filter: drop-shadow(0 0 var(--space-4) rgba(var(--white-rgb), .35)) drop-shadow(4px 4px 0 rgba(var(--black-rgb), .7)); }
.tt-read-row {
  position: absolute; transform: translate(-100%, -50%); padding-right: var(--space-3);
  font-family: var(--font-pixel); font-size: var(--text-sm); letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted);
}
/* Colonne de droite : toujours au meme endroit, seul le contenu change */
.tt-read-text { max-width: none; max-height: none; overflow: visible; padding: 0; }
/* Le message de guidance : une phrase par carte, son role puis ce qu'elle te conseille */
.tt-guide { font-size: var(--text-lg); line-height: 1.6; color: var(--text-main); font-weight: 400; }
.tt-guide + .tt-guide { margin-top: var(--space-4); }
.tt-lead { font-family: var(--font-pixel); }
.tt-guide-row { font-family: var(--font-pixel); font-size: var(--text-sm); letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin: var(--space-6) 0 var(--space-3); }
.tt-guide-row:first-child { margin-top: 0; }
.tt-name {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; line-height: inherit;
  text-decoration: underline dotted; text-underline-offset: 4px;
}
.tt-name.is-on { text-decoration-style: solid; }
.tt-read-hint { margin-top: var(--space-5); color: var(--text-muted); font-size: var(--text-base); font-weight: 400; }
.tt-read-home {
  display: inline-flex; align-items: center; gap: var(--space-3);
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-pixel); font-size: var(--text-md); letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted);
}
.tt-read-home svg { width: var(--space-6); height: auto; fill: currentColor; shape-rendering: crispEdges; }
.tt-read-home:hover { color: var(--text-main); }
/* Synthese des cartes, sous l'ecran principal */
.tt-read-synth { padding-top: var(--space-12); }
.tt-read-synth > .detail-kicker { color: var(--text-muted); margin-bottom: var(--space-3); }
.tt-reading.has-pick .tt-read-synth { display: none; }   /* une carte ouverte : sa fiche remplace message et synthese */
.tt-read-item { display: block; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; border-top: 1px solid var(--border-hairline); padding: var(--space-6) 0; color: inherit; font: inherit; }
.tt-read-item:hover .tt-read-name { text-decoration: underline; }
.tt-read-pos { font-family: var(--font-pixel); font-size: var(--text-sm); letter-spacing: 2px; text-transform: uppercase; }
.tt-read-name { display: block; font-family: var(--font-pixel); font-size: var(--text-3xl); line-height: 1.1; text-transform: uppercase; margin: var(--space-2) 0; color: var(--text-main); }
.tt-read-meta { display: block; font-size: var(--text-sm); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.tt-read-guid { display: block; font-size: var(--text-lg); font-style: italic; margin: var(--space-4) 0 var(--space-3); color: var(--text-main); }
.tt-read-desc { display: block; font-size: var(--text-base); line-height: 1.7; color: var(--text-main); font-weight: 400; }
/* Telephone tenu droit : la lecture en 2 ecrans.
   1) les cartes du tirage, centrees et aussi grandes que possible (juste leur numero dessous), et en bas le bouton
      "Lire mon message" ; toucher une carte ouvre directement sa fiche.
   2) le message (le role de chaque carte en tete de son paragraphe), puis la synthese ; la page defile d'un bloc.
   La fleche du haut : du message vers les cartes, des cartes vers la table. */
:root { --tt-read-foot: calc(var(--space-16) + var(--space-12)); }   /* place du bouton sous les cartes */
.tt-read-more { display: none; }
@media (max-width: 900px) and (orientation: portrait) {
  .tt-read-hero { flex-direction: column; gap: 0; padding: 0; }
  .tt-read-spread { width: 100%; height: calc(100dvh - var(--tt-read-foot)); }
  .tt-read-col { display: none; }
  .tt-read-more {
    display: inline-flex; width: auto;   /* pas la pleine largeur des boutons du site sur mobile */
    position: absolute; left: 50%; bottom: var(--space-8); transform: translateX(-50%);
    white-space: nowrap;
  }
  .tt-reading.is-text .tt-read-spread, .tt-reading.is-text .tt-read-more { display: none; }
  .tt-reading.is-text .tt-read-col {
    display: block; flex: 1 1 auto; height: 100dvh;
    padding: var(--space-16) var(--space-4) var(--space-12);
  }
  /* numero seul sous la carte ; nom des rangees (Tour) centre au-dessus de sa rangee */
  .tt-read-card span { width: auto; }
  .tt-read-row { transform: translate(-50%, -100%); padding: 0; }
  .tt-guide-pos { display: block; font-family: var(--font-pixel); font-size: var(--text-sm); letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
}
/* Telephone couche : cote a cote comme sur ordinateur, marges reduites */
@media (orientation: landscape) and (max-height: 500px) {
  .tt-read-hero { gap: var(--space-6); padding: 0 var(--space-4); }
  .tt-read-col { padding: var(--space-6) 0; }
}

/* Telephone couche : la table remplit l'ecran jusqu'en haut, les liens du menu cacheraient l'etagere du fond
   (paquets, methodes). Le menu passe en burger, comme sur telephone tenu droit, range dans le coin du cristal. */
@media (orientation: landscape) and (max-height: 500px) {
  .page-tirage .top-nav { padding: var(--space-3) var(--space-4); justify-content: flex-start; }
  .page-tirage .nav-toggle { display: flex; }
  .page-tirage .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-panel-deep);
    border-bottom: 2px solid var(--border-hairline);
    padding: var(--space-2) var(--space-4);
  }
  .page-tirage .nav-links.is-open { display: flex; }
  .page-tirage .nav-links a { display: block; padding: var(--space-2) 0; }
  .page-tirage .nav-sep { display: none; }
}

/* Telephone tenu droit : la table se joue en portrait. Elle garde la hauteur de l'ecran barre d'adresse cachee
   (lvh) : quand la barre du navigateur apparait ou disparait, rien n'est recalcule (sinon toute la table change de
   taille d'un coup). La barre recouvre seulement le bas de l'image, sous l'oeil. */
@media (orientation: portrait) {
  body.page-tirage, .page-tirage .table-section { height: 100lvh; }
}

/* Tirage manuel (telephone tenu droit) : les cartes du paquet, face cachee, en eventail, sur le fond du menu du
   telephone (la table ne se voit pas). Une famille = un eventail ; tout le jeu (Fleche) = le paquet melange, coupe
   en eventails egaux. Taille et place de chaque carte (--cw, --x, --y, --r) calculees par le JS. */
.tt-pick {
  position: fixed; inset: 0; z-index: 1400;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* en haut : la ligne des cases du menu (a --space-4 du bord, cases de 40px), ou se place le titre */
  --tt-pick-line: calc(var(--slot-h, 100px) * .4);
  padding: calc(var(--space-4) * 2 + var(--tt-pick-line)) var(--space-4) var(--space-4);
  background: var(--bg-void) url("../img/bg/bg_texture.webp") center / cover no-repeat;
  touch-action: none;   /* le doigt glisse le long de l'eventail sans faire defiler la page */
}
.tt-pick[hidden] { display: none; }
.tt-pick-title {
  position: absolute; top: var(--space-4); left: 0; right: 0; height: var(--tt-pick-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel); font-size: var(--text-md); letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-main); text-align: center;
}
.tt-pick-fans { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.tt-fan { position: relative; }
.tt-fan-card {
  position: absolute; left: 0; top: 0; width: var(--cw);
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  transform: translate(var(--x), var(--y)) rotate(var(--r)); transform-origin: 50% 100%;
}
.tt-fan-card img {
  display: block; width: 100%;
  filter: drop-shadow(3px 3px 0 rgba(var(--black-rgb), .7));
  transition: transform .15s ease;
}
/* la carte sous le doigt se souleve : on anime l'image, jamais le bouton (la zone touchee ne bouge pas) */
.tt-fan-card.is-up { z-index: 1; }
.tt-fan-card.is-up img { transform: translateY(calc(-1 * var(--space-5))); }

/* ===================== ACCUEIL : SECTIONS DU BAS ===================== */
/* Fond mono d'une section (regle du site : chaque section a le sien), pleine largeur, bords fondus, tres discret */
.sec-mono {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: .10;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
}
/* Les 4 plaques des methodes, en eventail : au survol, seule l'image monte (le lien, zone de survol, reste fixe) */
.home-plates { display: flex; justify-content: center; margin: var(--space-10) 0 var(--space-12); }
.home-plates a { --r: 0deg; --y: 0px; width: var(--th-plate); margin-left: calc(var(--th-plate) * -0.2); }
.home-plates a:first-child { margin-left: 0; }
.home-plates a:nth-child(1) { --r: -6deg; }
.home-plates a:nth-child(2) { --r: -2deg; --y: calc(var(--space-2) * -1); }
.home-plates a:nth-child(3) { --r: 2deg; --y: calc(var(--space-2) * -1); }
.home-plates a:nth-child(4) { --r: 6deg; }
.home-plates img {
  display: block; width: 100%; height: auto;
  transform: rotate(var(--r)) translateY(var(--y));
  filter: drop-shadow(6px 6px 0 rgba(var(--black-rgb), .6));
  transition: transform .25s ease;
}
.home-plates a:hover img { transform: rotate(var(--r)) translateY(calc(var(--y) - var(--space-4))); }
/* Separateur entre le hero et la section du coffret : le grand separateur des arcanes, a la meme largeur (1600px, marges --space-4).
   Hauteur nulle : son trait tombe pile sur la ligne ou les 2 fonds se rejoignent. */
.home-seam { max-width: 1600px; height: 0; margin: 0 auto; padding: 0 var(--space-4); }
/* Les fonds des sections voisines vont jusqu'au separateur (a travers la marge de la section) : la jonction est sous le trait */
.home-seam + .section--spaced > .sec-mono { top: calc(var(--space-16) * -1); }
/* ... et le fond du coffret descend jusqu'au separateur du haut des arcanes, pose sur leur limite */
.section--spaced:has(+ .fx-section) > .sec-mono { bottom: calc(var(--space-16) * -1); }
/* Blocs de texte de l'accueil : du texte, sans cadre (la version encadree n'est plus utilisee) */
.spec-block--plain { background: none; border: 0; box-shadow: none; padding: 0; }
@media (max-width: 640px) {
  .home-plates a { width: calc(var(--th-plate) * .6); }
}

/* Conteneur de page : coupe ce qui depasse sur les cotes (fonds pleine largeur, glissement des arcanes de 10vw)
   sans creer de barre de defilement : la page ne peut plus glisser de cote (meme correctif que .th-page du Tirage). */
.page-clip { display: block; overflow-x: clip; }

/* ===================== MENU EN CASES (partials/head.php, toutes les pages) + ACCUEIL (index.php, .page-home) =====================
   Case d'inventaire : les 3 morceaux assets/img/bg/button_left (25px) / button_middle (10px) / button_right (35px), 100px de haut.
   Le centre se REPETE, jamais etire : largeur = 25 + 35 + n x 10 (n calcule par site.js, fitSlots : jamais moins de 4 = carre).
   Bords transparents de la taille des bouts : les bouts se posent dessus, le centre ne se repete qu'entre les deux. */
:root {
  --slot-l: 25px; --slot-m: 10px; --slot-r: 35px; --slot-h: 100px;   /* tailles reelles des fichiers */
  --slot-k: .6;                                                       /* echelle d'affichage : cases de 60px de haut */
}
.slot {
  --n: 4;
  box-sizing: border-box; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(12px * var(--slot-k));
  height: calc(var(--slot-h) * var(--slot-k));
  width: calc((var(--slot-l) + var(--slot-r) + var(--n) * var(--slot-m)) * var(--slot-k));
  border-left: calc(var(--slot-l) * var(--slot-k)) solid transparent;
  border-right: calc(var(--slot-r) * var(--slot-k)) solid transparent;
  /* les bouts ne font pas la meme largeur (25 / 35) : sans cette compensation, l'icone et le texte seraient decales
     vers la gauche dans la case (centres entre les bords, pas sur la case) */
  padding-left: calc((var(--slot-r) - var(--slot-l)) * var(--slot-k));
  border-top: 0; border-bottom: 0;   /* un <button> a par defaut une bordure en relief en haut et en bas */
  appearance: none;
  background:
    url("../img/bg/button_left.webp") left top / calc(var(--slot-l) * var(--slot-k)) 100% no-repeat border-box,
    url("../img/bg/button_right.webp") right top / calc(var(--slot-r) * var(--slot-k)) 100% no-repeat border-box,
    url("../img/bg/button_middle.webp") left top / calc(var(--slot-m) * var(--slot-k)) 100% repeat-x padding-box;
  background-clip: border-box, border-box, padding-box;
  background-origin: border-box, border-box, padding-box;
  image-rendering: pixelated;
  color: var(--text-main); font-family: var(--font-pixel); font-size: var(--text-base); letter-spacing: 1px;
  text-decoration: none; white-space: nowrap;
}
.slot svg { width: var(--tt-icon); height: var(--tt-icon); flex: 0 0 auto; fill: currentColor; shape-rendering: crispEdges; }
/* Survol : la case s'eclaire (selection d'inventaire) et son contenu passe en dore. Rien ne bouge : ni la case, ni l'icone, ni le texte
   (pas de saut, pas d'agrandissement : la police pixel resterait nette). Au clic, la case s'assombrit un peu. */
.slot:hover, .slot:focus-visible, .slot:has(:focus-visible), .slot.is-active, .slot-vol.is-open { color: var(--gold); filter: brightness(1.3); }   /* focus au clavier seulement : un bouton qui reprend le focus apres un clic ne reste pas allume */
.slot:active { filter: brightness(.9); }
.slot[aria-disabled="true"] { cursor: default; }
.slot > * { flex: 0 0 auto; }   /* le contenu ne se tasse jamais : c'est la case qui s'adapte a lui */
/* Case du volume : le haut-parleur se remplit d'or selon le volume ; ouverte, la case s'elargit et montre la jauge de 8 crans */
.vol-spk { appearance: none; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; display: flex; }
.vol-spk svg { width: var(--tt-icon); height: var(--tt-icon); shape-rendering: crispEdges; }
.vol-base { fill: currentColor; }
.vol-fill { fill: var(--gold); clip-path: inset(0 calc((1 - var(--lvl, 0)) * 100%) 0 0); }
.vol-gauge { display: none; gap: 3px; height: calc(var(--tt-icon) * .75); width: calc(8 * 6px + 7 * 3px); cursor: ew-resize; touch-action: none; }
.slot-vol.is-open .vol-gauge { display: flex; }
.vol-gauge span { flex: 1; background: var(--border-strong); }
.vol-gauge span.is-on { background: var(--gold); }

/* La barre : logo libre a gauche (hors case), cases, et a droite le compte et le volume. Pas de fond : chaque case est un objet. */
/* meme marge en haut et sur les cotes (--space-5), ecart entre cases pris dans l'echelle (--space-2) */
.inv { position: fixed; top: var(--space-5); left: 0; right: 0; z-index: 1000; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-5); pointer-events: none; }
.inv > * { pointer-events: auto; }
.inv-spacer { flex: 1 1 auto; pointer-events: none; }

/* Hero : le logo remplace le grand titre, le slogan dessous */
/* echelle du hero : logo -> slogan (moyen), slogan -> texte (petit, ils vont ensemble), texte -> boutons (grand) */
.hero-logo { margin: 0 0 var(--space-5); line-height: 0; }
.hero-logo img { display: block; width: min(520px, 70vw); height: auto; }
.hero-slogan { font-family: var(--font-pixel); font-size: var(--text-3xl); line-height: 1.2; color: var(--text-main); margin-bottom: var(--space-3); }
.hero-slogan span { color: var(--gold); }

/* Hero solo : le logo seul, tout centre (les cartes sont dans la section du coffret) */
.hero-columns.hero-solo { text-align: center; }
.hero-solo .hero-text { align-items: center; max-width: 720px; }
.hero-solo .hero-logo img { margin: 0 auto; }
.hero-solo .hero-manifesto { margin-left: auto; margin-right: auto; }
.hero-solo .hero-btn-group { justify-content: center; }
.hero-solo .hero-manifesto { font-weight: 400; color: var(--text-main); }   /* lisible : ni fin ni gris */
/* Boutons d'action a taille raisonnable, sur tout le site : Geist Pixel n'a qu'une graisse, pas de faux gras */
.btn-epic { font-size: var(--text-base); padding: var(--space-3) var(--space-6); font-weight: 400; }
.hero-solo .hero-manifesto { margin-bottom: var(--space-8); }
/* groupe du hero agrandi d'un cran (etait borne par le paragraphe a 600px) ; lien jamais plus gros que le texte du bouton */
.hero-solo .hero-manifesto { font-size: var(--text-xl); max-width: 680px; }
.hero-solo .btn-epic { font-size: var(--text-lg); padding: var(--space-4) var(--space-8); }
.hero-solo .hero-secondary-link { font-size: var(--text-lg); }
/* bloc centre en hauteur : meme marge en haut et en bas (l'ancien menu demandait 140px en haut) */
.hero-altar.hero-solo { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.btn-gold { border-width: 2px; box-shadow: 3px 3px 0 var(--black); }
.btn-gold:hover { box-shadow: 5px 5px 0 var(--black); }

/* Coffret : les 2 blocs de texte a gauche (texte courant a taille normale), l'objet a droite
   (le tas de cartes de hero.js aujourd'hui, les vraies photos plus tard) */
.coffret-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.coffret-text.specs-grid { grid-template-columns: 1fr; gap: var(--space-10); }
.coffret-text .spec-block h3 { font-size: var(--text-2xl); }
.coffret-text .spec-list li { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; }
.coffret-media .hero-cards { margin-top: 0; justify-content: center; }
@media (max-width: 1100px) { .coffret-grid { grid-template-columns: 1fr; } }

/* Telephone : la barre passe en bas, icones seules dans des cases carrees, pas de logo (il est dans le hero) */
@media (max-width: 700px) {
  .inv { top: auto; bottom: var(--space-2); justify-content: center; padding: 0 var(--space-2); }
  .inv-spacer, .slot-txt { display: none; }
  .inv .slot { --n: 4 !important; }
  .inv .slot-vol.is-open { --n: 11 !important; }   /* ouverte : assez large pour le haut-parleur + la jauge */
  .hero-logo img { margin: 0 auto; }
}

/* ===== ACCUEIL : hierarchie des offres =====
   Coffret = offre principale : titre de section, colonnes egales, cartes plus grandes, bouton or.
   Tirages = offre secondaire : titre un cran en dessous, bouton pierre (l'or est reserve a l'achat du coffret). */
.coffret-media .mini-card { width: 240px; margin-left: -64px; }
.coffret-media .mini-card:first-child { margin-left: 0; }
.coffret-cta { margin-top: var(--space-2); }
.page-home #forge .sec-title { font-size: var(--text-3xl); }
.end-cta { position: relative; z-index: 1; max-width: 1600px; margin-left: auto; margin-right: auto; padding: var(--space-12) var(--space-10); text-align: center; }
/* meme espace entre le trait d'un separateur et le contenu, dans chaque section (la Forge avait en plus la marge interne de .ancient-frame) */
.page-home #forge .ancient-frame { padding: 0; }
/* separateur entre les tirages et la fin de page : les deux fonds vont jusqu'a son trait */
.section--spaced:has(+ .home-seam) > .sec-mono { bottom: calc(var(--space-16) * -1); }
/* petits textes lisibles : ni gris, ni fins */
.page-home .sec-subtitle, .page-home .fx-copy, .page-home .coffret-text .spec-block p { color: var(--text-main); font-weight: 400; }
.page-home .sec-subtitle { font-size: var(--text-lg); }
@media (max-width: 1100px) { .coffret-media .mini-card { width: 190px; margin-left: -50px; } }
@media (max-width: 640px) { .coffret-media .mini-card { width: 110px; margin-left: -30px; } }   /* les 3 cartes tiennent dans l'ecran du telephone */

/* Telephone : la barre du bas ne cache jamais la fin des pages */
@media (max-width: 700px) {
  body:not(.page-table) { padding-bottom: calc(var(--slot-h) * var(--slot-k) + var(--space-4)); }
}

/* ===================== MOBILE (tout le site) : arcanes, jeu physique, onglets, textes =====================
   Seul le mobile change (valide en test sur index2.php le 2026-09-27). */
@media (max-width: 900px) {
  /* Arcanes (colonne unique sous 900px) : pas de personnage, pas de glissement (simple fondu), hauteur = contenu */
  .fx-char { display: none; }
  .fx-slide, .fx-bg-layer { transform: none; }
  .fx-stage { height: auto; display: grid; }
  .fx-slide { position: relative; inset: auto; grid-area: 1 / 1; }
  .fx-clip { position: relative; inset: auto; mask-image: none; -webkit-mask-image: none; }   /* plus de glissement : le fondu des bords ne sert plus et effacait le debut du texte */
  .fx-image { position: relative; left: auto; top: auto; }
  .fx-text { position: relative; left: auto; top: auto; margin-top: var(--space-5); }
  .fx-btn { width: 44px; height: 44px; }   /* zone tactile minimale */
}
@media (max-width: 700px) {
  /* Jeu physique : l'objet d'abord (les cartes), puis le texte et le bouton */
  .coffret-media { order: -1; }
  /* Onglets des arcanes sur une seule ligne, zones tactiles de 44px de haut */
  /* Onglets des arcanes facon Valheim : la ligne a la largeur des demi-separateurs (fleches a leurs extremites, qui
     tombent a 4,5 % des bords du SVG), onglets repartis entre elles, serres entre les deux separateurs ;
     l'onglet actif domine (plus grand, dore), les autres et les fleches sont en retrait. Zones tactiles de 44px. */
  .fx-half-top { margin-top: var(--space-8); margin-bottom: 0; }
  .fx-half-bottom { margin-top: 0; margin-bottom: var(--space-8); }
  /* Arcanes : moins de vide autour du contenu (l'ordinateur garde 5rem/6rem) ; les grands separateurs restent
     pile sur les limites de la section (leur deplacement suit la nouvelle marge) */
  .fx-section { padding-top: 0; padding-bottom: 0; }
  .fx-edge-top { transform: translateY(-50%); }
  .fx-edge-bottom { transform: translateY(50%); }
  .fx-frame { margin-bottom: var(--space-8); }
  .fx-tabs { flex-wrap: nowrap; justify-content: space-between; gap: 0; padding: 0 4.5%; }
  .fx-tab { font-size: var(--text-sm); letter-spacing: 0; padding: var(--space-1) 2px; color: var(--text-muted); }
  .fx-tab.is-active { font-size: var(--text-lg); color: var(--gold); }
  .fx-arrow { padding: var(--space-1) 0; color: var(--text-muted); opacity: .7; }
  /* espacement serre autour des onglets, mais zone tactile gardee a ~44px par une zone invisible qui deborde */
  .fx-tab, .fx-arrow { position: relative; }
  .fx-tab::after, .fx-arrow::after { content: ""; position: absolute; inset: -12px -2px; }
  .fx-arrow-ico { width: .9em; }
  /* Titres sans mot seul en fin de ligne ; offre du mois un cran plus petite */
  .sec-title, .hero-slogan, .th-free-title { text-wrap: balance; }
  .th-free-title { font-size: var(--text-lg); }
  /* Texte courant et boutons a 16px minimum */
  .spec-block p, .spec-list li, .th-offer-text, .btn-epic { font-size: var(--text-md); }
}

/* ===================== MENU DU TELEPHONE (partials/head.php + site.js, initMobileMenu), sous 700px =====================
   Ferme : une petite case (icone menu) en haut a gauche, fixe. Ouvert : menu plein ecran, ouvert par le portail pixel.
   Remplace le menu en cases sur telephone. Ordinateur : rien ne change. */
.mm-open, .mm, .mm-portal { display: none; }   /* le canvas du portail aussi : sinon, hors telephone, il pousse la page de 150px */
@media (max-width: 700px) {
  .inv { display: none; }
  body:not(.page-table) { padding-bottom: 0; }   /* plus de barre en bas */
  .mm-open, .mm-close, .mm-sound { --slot-k: .4; }   /* cases de 40px */
  .mm-open {
    display: inline-flex; position: fixed; top: var(--space-4); left: var(--space-4); z-index: 1000;
    cursor: pointer; appearance: none;
  }
  .mm-open svg, .mm .slot svg { width: 24px; height: 24px; }   /* taille native de la grille pixelarticons : traits nets */
  /* zone tactile de 44px autour des petites cases */
  .mm-open::after, .mm .slot::after { content: ""; position: absolute; inset: -4px; }
  .mm-open, .mm .slot { position: relative; }
  .mm-open { position: fixed; }

  .mm:not([hidden]) {
    display: flex; flex-direction: column; align-items: center;
    position: fixed; inset: 0; z-index: 1500; overflow: hidden auto;
    padding: var(--space-4) var(--space-5) 0;
    /* fond : la texture de pierre fissuree dessinee par l'utilisateur (470 x 912, taille d'un ecran de telephone) */
    background: var(--bg-void) url("../img/bg/bg_texture.webp") center / cover no-repeat;
  }
  /* l'anneau du portail pixel qui ouvre le menu (site.js) : au-dessus du menu, hors de sa decoupe */
  .mm-portal { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1501; pointer-events: none; image-rendering: pixelated; display: none; }
  .mm-top { align-self: stretch; display: flex; justify-content: space-between; }
  .mm-sound .vol-base { fill: currentColor; }
  /* Autant d'air au-dessus du logo qu'en dessous. Au-dessus, rien n'arrete l'oeil jusqu'au haut de l'ecran (les cases
     sont dans les coins) : marge du menu + ligne des cases (40px), sans marge en plus. En dessous, la meme distance
     jusqu'au trait du separateur (au milieu de son bloc : on retire la moitie de ce bloc, --space-2). */
  .mm-logo-wrap {
    --mm-logo-air: calc(var(--space-4) + var(--slot-h) * .4);
    position: relative; display: block; margin: 0 0 calc(var(--mm-logo-air) - var(--space-2));
  }
  .mm-logo { display: block; width: min(46vw, 200px); height: auto; }
  .mm .mm-div { width: 100%; }
  .mm-nav { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .mm-link {
    display: block; padding: var(--space-4) calc(1.2em + var(--space-2));   /* place pour les etoiles de part et d'autre ; de l'air entre les liens */
    font-family: var(--font-pixel); font-size: var(--text-xl); letter-spacing: 1px; text-transform: uppercase;   /* un cran sous le 2xl : moins lourd */
    color: var(--text-main); text-decoration: none;
  }
  /* Liens : au toucher (et au survol / clavier), le texte passe en dore et deux etoiles du logo (calque 4) apparaissent
     de part et d'autre ; la page courante les garde allumees. Seules les etoiles bougent (la zone touchee reste fixe). */
  .mm-link { position: relative; -webkit-tap-highlight-color: transparent; transition: color .15s; }
  .mm-link::before, .mm-link::after {
    content: ""; position: absolute; top: 50%; width: .8em; height: .8em; margin-top: -.4em;
    background: url("../img/logo/etoile_calque_4.webp") center / 235% no-repeat;
    opacity: 0; transform: scale(.4); transition: opacity .15s, transform .15s;
  }
  .mm-link::before { left: 0; }
  .mm-link::after { right: 0; }
  .mm-link:hover, .mm-link:active, .mm-link:focus-visible, .mm-link[aria-current="page"] { color: var(--gold); }
  .mm-link:hover::before, .mm-link:hover::after,
  .mm-link:active::before, .mm-link:active::after,
  .mm-link:focus-visible::before, .mm-link:focus-visible::after,
  .mm-link[aria-current="page"]::before, .mm-link[aria-current="page"]::after { opacity: 1; transform: scale(1); }
  .mm-link:active::before, .mm-link:active::after { transform: scale(1.25) rotate(45deg); }   /* au toucher : les etoiles tournent d'un quart */
  /* Cases (menu, fermer, son) : au toucher, la case s'eclaire et son icone s'enfonce (comme les cases du menu ordinateur) */
  .mm-open, .mm .slot { -webkit-tap-highlight-color: transparent; }
  .mm-open:active, .mm .slot:active { color: var(--gold); filter: brightness(1.3); }
  .mm-more { display: flex; justify-content: space-around; width: 100%; margin-top: var(--space-6); }
  .mm-soon { font-family: var(--font-pixel); font-size: var(--text-base); text-transform: uppercase; color: var(--text-muted); text-align: center; }
  /* le combat : le heros (a gauche) face a la Peur (a droite), poses en bas ; images recadrees au plus pres */
  .mm-fight { position: relative; flex: 1 1 0; align-self: stretch; min-height: 140px; margin-top: var(--space-4); }   /* prend la place qui reste jusqu'au bas de l'ecran */
  .mm-fight img { position: absolute; bottom: 0; height: 100%; width: 48%; object-fit: contain; object-position: bottom; }
  .mm-hero { left: 0; }
  .mm-foe { right: 0; }
  body.mm-is-open { overflow: hidden; }
}

/* ===================== A PROPOS (apropos.php, .page-about) =====================
   Que du texte, sans cadre. Sur ordinateur, chaque section met le texte d'un cote et une image de l'autre, en
   alternance (l'image a droite, a gauche, a droite) ; sur telephone, l'image d'abord puis le texte (comme le coffret
   de l'accueil). */
.about-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.about-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.about-split--flip .about-media { order: -1; }
.about-text .showcase-header { text-align: left; margin-bottom: var(--space-6); }
/* colonne de lecture : assez etroite pour lire sans fatigue */
.about-col { position: relative; max-width: 42rem; text-align: left; }
.about-col p { color: var(--text-main); font-weight: 400; font-size: var(--text-lg); line-height: 1.7; margin-bottom: var(--space-5); }
.about-col strong { color: var(--white); font-weight: 600; }
.about-col .creator-tag { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.about-sign { font-family: var(--font-pixel); color: var(--gold); margin-top: var(--space-8); }
.page-about .about-col p.about-sign { font-size: var(--text-lg); line-height: 1.4; }
.about-values li { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 400; line-height: 1.6; margin-bottom: var(--space-3); }
.about-values strong { font-weight: 600; }
.about-values--inline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-6) 0; }
.about-values--inline li { margin-bottom: 0; }
/* le haut de la page : le titre ne colle ni au menu ni au bord (le menu fait 80px de haut sur ordinateur) */
.page-about main > .details-section:first-child { margin-top: calc(var(--space-16) * 2); }
/* l'image de la section : centree dans sa colonne */
.about-media { display: flex; justify-content: center; align-items: center; }
.about-logo { display: block; width: min(420px, 100%); height: auto; margin: 0; line-height: 0; }
.about-media img.about-logo { width: min(360px, 100%); }
.about-logo img { display: block; width: 100%; height: auto; }   /* le logo de l'oracle est dans un h1 */
/* le paquet : les cartes sont empilees, deck-loop.js les place et fait passer celle du dessus au fond */
.deck-loop { position: relative; width: min(240px, 60vw); aspect-ratio: 70 / 120; margin: var(--space-6) 0; }
.deck-card { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-md); cursor: pointer; }
.deck-card .fan-art-frame { width: 100%; height: 100%; }
@media (max-width: 900px) {
  .about-split, .about-split--flip { grid-template-columns: 1fr; gap: var(--space-8); }
  .about-media, .about-split--flip .about-media { order: -1; }   /* l'image d'abord */
  .about-logo, .about-media img.about-logo { width: min(240px, 60vw); }
}

/* ===================== FENETRE "MON ESPACE" (partials/compte.php + site.js, initAccount) =====================
   Le compte : voile noir sur le site, un panneau de pierre (bg_texture.webp, le fond du menu du telephone : rogne, jamais etire).
   Taille FIXE, la meme pour les 3 onglets : l'en-tete et les onglets ne bougent jamais, seul le contenu de l'onglet defile. */
.cm { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(var(--black-rgb), .78); }
body.cm-open { overflow: hidden; }
.cm-panel {
  --cm-w: 44rem; --cm-h: 50rem;
  position: relative; display: flex; flex-direction: column;
  width: min(var(--cm-w), calc(100vw - 2 * var(--space-4))); height: min(var(--cm-h), 92vh);
  background: var(--bg-void) url("../img/bg/bg_texture.webp") center / cover no-repeat;
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-xl);
  color: var(--text-main);
}
.cm-in { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: var(--space-8) var(--space-8) var(--space-6); }
/* la gouttiere de la barre de defilement est reservee : rien ne saute quand elle apparait */
.cm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; padding-right: var(--space-2); }
.cm-close { --slot-k: .4; position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; cursor: pointer; }
.cm-close svg { width: 24px; height: 24px; }

.cm-head { flex: 0 0 auto; text-align: center; margin-bottom: var(--space-4); }
.cm-title { font-family: var(--font-pixel); font-size: var(--text-2xl); font-weight: 400; line-height: 1; color: var(--white); text-shadow: 2px 2px 0 var(--black); letter-spacing: 1px; text-transform: uppercase; margin-bottom: var(--space-3); }
.cm-credits { display: flex; align-items: baseline; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.cm-credits-num { font-family: var(--font-pixel); font-size: var(--text-title); line-height: 1; color: var(--gold); text-shadow: 2px 2px 0 var(--black); }
.cm-credits-lbl { font-family: var(--font-pixel); font-size: var(--text-md); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }

/* onglets : les cases du menu (.slot), largeur calculee par fitSlots (site.js) */
.cm-tabs { --slot-k: .5; flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin-bottom: var(--space-5); }

.cm-panel-title { font-family: var(--font-pixel); font-size: var(--text-xl); font-weight: 400; color: var(--white); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-4); text-align: center; }

/* listes (tirages, achats) : des lignes de texte separees par un filet, aucune boite */
.cm-list { list-style: none; }
.cm-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.cm-row:first-child { border-top: 1px solid var(--border-subtle); }
.cm-when { flex: 0 0 auto; width: 9.5rem; color: var(--text-muted); font-size: var(--text-sm); font-weight: 400; }
.cm-what { flex: 1 1 auto; min-width: 0; font-family: var(--font-pixel); font-size: var(--text-base); color: var(--text-main); }
.cm-qty, .cm-amount { flex: 0 0 auto; font-family: var(--font-pixel); font-size: var(--text-sm); color: var(--text-main); text-align: right; }
.cm-row .btn-epic { flex: 0 0 auto; width: auto; padding: var(--space-2) var(--space-4); }

/* formulaire */
.cm-form { display: flex; flex-direction: column; gap: var(--space-4); }
.cm-field { display: flex; flex-direction: column; gap: var(--space-1); }
.cm-field > label { font-family: var(--font-pixel); font-size: var(--text-sm); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.cm-input { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; color: var(--text-main); background: var(--bg-stone-deep); border: 2px solid var(--border-strong); box-shadow: 4px 4px 0 var(--black); padding: var(--space-2) var(--space-3); width: 100%; }
.cm-input:focus { outline: none; border-color: var(--text-main); }
.cm-check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); font-weight: 400; color: var(--text-main); cursor: pointer; }
.cm-check small { display: block; color: var(--text-muted); font-size: var(--text-sm); }
.cm-check input { appearance: none; flex: 0 0 auto; width: var(--space-5); height: var(--space-5); margin-top: .1em; background: var(--bg-stone-deep); border: 2px solid var(--border-strong); box-shadow: 2px 2px 0 var(--black); cursor: pointer; }
.cm-check input:checked { background: var(--gold); box-shadow: inset 0 0 0 3px var(--bg-stone-deep), 2px 2px 0 var(--black); }
.cm-check input:focus-visible { border-color: var(--text-main); outline: none; }
.cm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.cm-actions .btn-epic { width: auto; padding: var(--space-3) var(--space-4); }
.btn-danger { background: var(--red); color: var(--white); border: 2px solid var(--black); box-shadow: 4px 4px 0 var(--black); }
.btn-danger:hover { background: var(--red-bright); }

/* telephone : le site met les boutons en pleine largeur, ici ils gardent leur taille */
@media (max-width: 640px) {
  .cm-row { flex-wrap: wrap; row-gap: var(--space-1); }
  .cm-when { width: 100%; }
}

/* menu du telephone : "Mon compte" est un vrai lien (Contact reste grise) */
.mm-more a.mm-soon { color: var(--text-main); text-decoration: none; }
.mm-more a.mm-soon:hover, .mm-more a.mm-soon:active, .mm-more a.mm-soon:focus-visible { color: var(--gold); }

/* etat vide d'un onglet (pas encore de tirage, pas encore d'achat) */
.cm-empty { text-align: center; color: var(--text-muted); font-size: var(--text-md); font-weight: 400; padding: var(--space-8) 0; }

/* la fenetre "Mon espace" : les deux etats (deconnecte / connecte) remplissent la place sous l'en-tete */
.cm-state { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cm-msg { text-align: center; color: var(--text-main); font-size: var(--text-base); font-weight: 400; margin-top: var(--space-4); min-height: 1.6em; }
.cm-msg.is-error { color: var(--red-bright); }
.cm-warn { color: var(--text-main); font-size: var(--text-base); font-weight: 400; text-align: center; }
.cm-input[readonly] { color: var(--text-muted); }
.cm-admin { align-self: center; width: auto; padding: var(--space-3) var(--space-4); }

/* connexion Google, en haut de la fenetre : le bouton fourni par Google, puis "ou" avec de l'air de chaque cote, puis les onglets e-mail */
.cm-google { display: flex; justify-content: center; flex: 0 0 auto; width: 100%; min-height: 44px; margin-bottom: var(--space-2); }
.cm-or { flex: 0 0 auto; text-align: center; color: var(--text-muted); font-family: var(--font-pixel); font-size: var(--text-sm); letter-spacing: 1px; text-transform: uppercase; margin: var(--space-4) 0 var(--space-6); }

/* la lecture d'un tirage rouvert depuis le compte : un cadre plein ecran, au-dessus de tout, qui monte du bas (site.js, ouvrirLecture) */
.lecture-frame { position: fixed; inset: 0; z-index: 2500; background: var(--bg-void); }
.lecture-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
body.lecture-open { overflow: hidden; }
.cm-row .is-loading { opacity: .5; pointer-events: none; }   /* Revoir : la lecture se prepare, la fenetre reste jusqu'a ce qu'elle monte */

/* Mes tirages : la navigation par pages (10 tirages par page) */
.cm-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
.cm-pager .btn-epic { width: auto; padding: var(--space-2) var(--space-4); }
.cm-pager .btn-epic:disabled { opacity: .4; cursor: default; }
.cm-pager-num { font-family: var(--font-pixel); font-size: var(--text-base); letter-spacing: 1px; color: var(--text-main); min-width: 4ch; text-align: center; }