/* ============================================================
   Shinkatô — site vitrine
   Charte : noir #1d1d1d · jaune #f2cd0f · rouge #ad1919 · blanc cassé #f0eeee
   Typo : Cinzel (titres épiques, substitut web de Trajan Pro) · Montserrat (corps)

   Le FOND de tout le site est une vidéo fixe dont la tête de lecture est le
   scroll de la page (cf. js/main.js, PARTIE 1). Les sections défilent par-dessus.
   ============================================================ */

:root {
  --noir: #1d1d1d;
  --noir-deep: #141414;
  --surface: rgba(22, 20, 15, 0.88);
  --surface-2: rgba(30, 27, 21, 0.86);
  --jaune: #f2cd0f;
  --jaune-dim: #c4a80c;
  --rouge: #ad1919;
  --rouge-dark: #8a1414;
  --rouge-hot: #e0453b;
  --blanc: #f0eeee;
  /* ⚠️ Le fond du site est une VIDÉO sombre et mouvante : un texte gris y disparaît.
     Le corps de texte est donc quasi blanc, et seules les micro-notes sont atténuées.
     (Ces deux variables gardent leur nom historique — elles ne sont plus à 60/40 %.) */
  --blanc-60: rgba(240, 238, 238, 0.95);
  --blanc-40: rgba(240, 238, 238, 0.78);
  --bordure: rgba(242, 205, 15, 0.35);
  --font-epic: 'Cinzel', 'Trajan Pro', serif;
  --font-ui: 'Montserrat', system-ui, sans-serif;
}

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

/* ⚠️ `scroll-padding-top` est indispensable dès qu'une barre collante existe.
   Sans lui (mesuré le 18/08/2026 : valeur `auto`, donc 0), TOUS les liens d'ancrage du
   site — « Le jeu », « Essayer la carte », « Affronter un obstacle », « Partenaires »,
   ainsi que les boutons du hero — amenaient la section pile sous la barre : son titre
   restait caché derrière. 99 px avalés sur ordinateur, 122 px sur téléphone, où la
   barre passe sur trois lignes. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

/* Sur téléphone la barre mesure 65 px depuis qu'elle est repliée (elle en faisait 122
   quand les liens passaient à la ligne). On garde une marge d'air au-dessus du titre
   plutôt que de le coller sous la barre. */
@media (max-width: 860px) {
  html { scroll-padding-top: 80px; }
}

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--jaune);
  outline-offset: 3px;
}

/* ---------- Fond vidéo global (scrubbé par le scroll de la page) ---------- */

.filmbg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #000;
  pointer-events: none;
}

.filmbg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile : la vidéo reste lisible SOUS le texte, jamais au même niveau de contraste */
.filmbg-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(10, 9, 7, 0.32) 0%, rgba(10, 9, 7, 0.78) 100%),
    linear-gradient(to bottom, rgba(20, 18, 13, 0.72) 0%, rgba(20, 18, 13, 0.5) 40%, rgba(20, 18, 13, 0.82) 100%);
}

/* Fine barre de progression du « film » — collée en haut, sous la nav */
.filmbg-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: rgba(240, 238, 238, 0.08);
  pointer-events: none;
}

.filmbg-progressfill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--rouge), var(--jaune));
}

/* ---------- Plaques inclinées — bannière-titre (25°, ombre noire décalée) ---------- */

/* ⚠️ `inline-flex` + `align-items: center` et NON `inline-block`.
   En inline-block, le texte se pose sur sa ligne de base : la hauteur réservée aux
   jambages (p, g, y) s'ajoute SOUS les lettres, et l'interligne hérité du corps de
   page (1.65) ajoute encore de la place. Résultat, le libellé flottait visiblement
   trop bas dans le bandeau — constaté le 18/08/2026 sur « TON TERRITOIRE » et
   « TES STATS ». Le centrage par flex ignore la ligne de base et centre la boîte
   du texte, ce qui est ce que l'œil attend. */
.plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: skewX(-25deg);
  padding: 10px 30px;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.9);
}

.plate > span {
  display: inline-block;
  transform: skewX(25deg);
  font-family: var(--font-epic);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1;          /* sans ça, l'interligne du corps de page décale encore */
  white-space: nowrap;
}

.plate-yellow { background: var(--jaune); }
.plate-yellow > span { color: var(--noir); }

.plate-red { background: var(--rouge); }
.plate-red > span { color: var(--blanc); }

/* ---------- Fenêtre avec titre (coins coupés + bannière à cheval) ---------- */

.panel {
  --notch: 18px;
  position: relative;
  margin-top: 24px;
  filter: drop-shadow(9px 9px 0 rgba(0, 0, 0, 0.85));
}

.panel::before,
.panel::after {
  content: '';
  position: absolute;
  clip-path: polygon(
    var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch)
  );
}

.panel::before { inset: 0; background: var(--jaune); }
.panel::after { inset: 2px; --notch: 17px; background: rgba(16, 14, 10, 0.94); }

.panel-body {
  position: relative;
  z-index: 1;
  padding: 34px 28px 28px;
}

/* Même correction que `.plate` : centrage par flex, pas par ligne de base. */
.panel-title {
  position: absolute;
  top: -20px;
  left: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skewX(-25deg);
  background: var(--jaune);
  padding: 9px 26px;
}

.panel-title > span {
  display: inline-block;
  transform: skewX(25deg);
  font-family: var(--font-epic);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--noir);
  white-space: nowrap;
}

.panel-title-red { background: var(--rouge); }
.panel-title-red > span { color: var(--blanc); }

.panel-title-center {
  left: 50%;
  transform: translateX(-50%) skewX(-25deg);
  max-width: calc(100% - 32px);
}

.panel-title-center > span { font-size: clamp(0.72rem, 1.7vw, 0.95rem); }

/* ---------- Hexagone pointe-en-haut (badge visuel) ---------- */

.hex {
  --hexclip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  position: relative;
  width: 96px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex::before,
.hex::after {
  content: '';
  position: absolute;
  clip-path: var(--hexclip);
}

.hex::before { inset: 0; background: var(--jaune); }
.hex::after { inset: 2px; background: rgba(20, 16, 10, 0.95); }

.hex img {
  position: relative;
  z-index: 1;
  width: 58%;
  height: auto;
  object-fit: contain;
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  transform: skewX(-8deg);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.btn:hover { transform: skewX(-8deg) translateY(-2px); }
.btn:active { transform: skewX(-8deg) translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: skewX(-8deg); }
.btn[hidden] { display: none; }

.btn-yellow {
  background: var(--jaune);
  color: var(--noir);
  box-shadow: 0 0 0 rgba(242, 205, 15, 0);
}
.btn-yellow:hover { box-shadow: 0 6px 24px rgba(242, 205, 15, 0.35); }

.btn-ghost {
  background: rgba(20, 16, 10, 0.6);
  color: var(--blanc);
  border: 1px solid var(--bordure);
  font-family: var(--font-ui);
}
.btn-ghost:hover { border-color: var(--jaune); color: var(--jaune); }

.btn-red {
  background: var(--rouge);
  color: var(--blanc);
}
.btn-red:hover { background: var(--rouge-dark); box-shadow: 0 6px 24px rgba(173, 25, 25, 0.4); }

.btn-small { padding: 10px 20px; font-size: 0.86rem; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 5vw;
  background: rgba(16, 14, 10, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-logo {
  width: 40px;
  height: auto;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.nav-wordmark {
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.32em;
  color: var(--blanc);
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}

/* Survol de la marque : l'emblème s'allume et le mot s'ouvre légèrement.
   Sans ça, le seul élément cliquable du header sans réaction — on doutait
   qu'il le soit. L'espacement des lettres bouge de 0.32 à 0.35em : perceptible,
   jamais assez pour décaler la mise en page voisine. */
.nav-brand:hover .nav-logo {
  transform: scale(1.08) rotate(-4deg);
  filter: drop-shadow(0 0 10px rgba(242, 205, 15, 0.55));
}

.nav-brand:hover .nav-wordmark {
  color: var(--jaune);
  letter-spacing: 0.35em;
}

/* Repère clavier : la marque doit rester atteignable sans souris. */
.nav-brand:focus-visible {
  outline: 2px solid var(--jaune);
  outline-offset: 6px;
  border-radius: 3px;
}

.nav-links { display: flex; gap: 32px; }

/* ---------- Bouton du menu replié (téléphone) ----------
   Masqué par défaut : sur grand écran les quatre liens tiennent sur la ligne. */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 11px 9px;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: 1px solid var(--bordure);
  cursor: pointer;
}

.nav-burger > span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--blanc);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Ouvert : les deux barres extérieures se croisent, celle du milieu s'efface. */
.nav-burger[aria-expanded="true"] { border-color: var(--jaune); }
.nav-burger[aria-expanded="true"] > span { background: var(--jaune); }
.nav-burger[aria-expanded="true"] > span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-burger[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav-links a {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blanc-60);
  transition: color 0.15s ease;
}

.nav-links a:hover { color: var(--jaune); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: calc(100vh - 69px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 5vw 120px;
}

.hero-inner { max-width: 820px; }

.eyebrow {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--jaune-dim);
  margin-bottom: 20px;
}

.hero-title {
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blanc);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
}

.hero-title-accent {
  color: var(--jaune);
  text-shadow: 0 0 50px rgba(242, 205, 15, 0.45);
}

.hero-sub {
  margin: 26px auto 0;
  /* 62ch au lieu de 54 : à 54, la phrase finissait sur « territoire » tout seul sur sa ligne.
     `pretty` verrouille le résultat — il interdit à la dernière ligne de tomber à un mot,
     quelle que soit la taille de l'écran. */
  max-width: 62ch;
  text-wrap: pretty;
  font-size: 1.12rem;
  color: var(--blanc-60);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 38px;
}

.hero-note {
  margin-top: 24px;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--blanc-40);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.hero-cue {
  position: absolute;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blanc-60);
  white-space: nowrap;
  transition: opacity 0.4s ease;
}

.hero-cue::after {
  content: ' ↓';
  color: var(--jaune);
  display: inline-block;
  animation: cue-bob 1.6s ease-in-out infinite;
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(5px); opacity: 1; }
}

.hero-cue.is-hidden { opacity: 0; }

/* ---------- Sections communes ---------- */

.section {
  position: relative;
  padding: 110px 5vw;
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Chapeau de section = FENÊTRE DE DIALOGUE ----------
   Même grammaire visuelle que dans l'application : un panneau blanc cassé, texte noir,
   trait noir net et ombre portée franche ; l'étiquette du titre mord sur le bord haut à
   gauche, exactement comme l'étiquette de nom d'un personnage qui parle.
   Les quatre chapeaux (`#voies`, `#territoire`, `#combat`, `#progression`) partagent cette
   règle : ce sont les quatre seuls `.section-head` de la page. */

.section-head { position: relative; margin-bottom: 60px; }

/* L'étiquette reste DANS le flux (elle ne peut donc jamais déborder du cadre sur un petit
   écran), et la marge négative fait remonter la fenêtre sous elle. */
.section-head > .plate {
  /* `display: block` est indispensable : sur un inline-block, une marge basse négative ne
     remonte PAS le bloc suivant (elle ne joue que sur la hauteur de ligne). `fit-content`
     garde l'étiquette collée à son texte. */
  display: block;
  width: fit-content;
  position: relative;
  z-index: 2;
  margin-left: 26px;
  margin-bottom: -17px;
}

.section-lead {
  /* Le chapeau court sur TOUTE la largeur du bloc, donc exactement celle des trois cartes
     en dessous (`.section` cale déjà à 1280 px), et il est CENTRÉ.

     ⚠️ Ne pas remettre `text-wrap: balance` : il égalise la longueur des lignes, donc il les
     RACCOURCIT toutes les deux — c'est lui qui laissait un grand vide à droite alors que la
     largeur disponible était bonne. `pretty` fait le travail utile sans ce défaut : il
     empêche seulement la dernière ligne de se réduire à un mot orphelin. */
  max-width: none;
  text-align: center;
  text-wrap: pretty;
  font-size: 1.16rem;

  /* Fenêtre de dialogue. Le texte passe en NOIR : sur blanc cassé, l'ombre portée du texte
     (héritée du fond vidéo sombre) le salissait — elle est donc retirée ici. */
  background: var(--blanc);
  color: var(--noir);
  border: 2px solid var(--noir);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.85);
  padding: 38px 44px 32px;
  text-shadow: none;
}

/* Le gras des termes de l'univers (« Écho ») reste lisible sur blanc. */
.section-lead b { color: var(--noir); }

/* ---------- Les 3 voies ---------- */

.voies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.voie-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 42px 30px 34px;
  overflow: hidden;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.voie-card:hover {
  border-color: var(--jaune);
  transform: translateY(-4px);
}

.voie-card .hex { margin: 0 auto; }

.voie-visual { margin-bottom: 6px; }

.voie-title {
  font-family: var(--font-epic);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jaune);
  margin: 20px 0 14px;
}

.voie-body { font-size: 1.06rem; color: var(--blanc-60); }
.voie-body b { color: var(--blanc); font-weight: 700; }

.voie-tag {
  margin-top: 20px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jaune-dim);
}

/* ============================================================
   TERRITOIRE JOUABLE — carte hexagonale d'expansion
   ============================================================ */

.terr-card { max-width: 760px; margin-left: auto; margin-right: auto; }

.terr-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  margin-bottom: 18px;
  font-size: 1rem;
  font-weight: 700;
}

.hud-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blanc);
}

.hud-stat img { width: 22px; height: 22px; object-fit: contain; }
.hud-stat b { color: var(--jaune); font-weight: 900; }
.hud-progress { margin-left: auto; }

.terr-stage { position: relative; }

.terr-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}

/* Nid d'abeilles : les rangées se chevauchent d'un quart de hauteur */
.terr-row {
  display: flex;
  justify-content: center;
  gap: 3px;
}

.terr-row + .terr-row { margin-top: -28px; }

.terr-hex {
  position: relative;
  width: 104px;
  height: 120px;
  border: none;
  padding: 0;
  background: transparent;
  flex: none;
  cursor: default;
  transition: transform 0.15s ease, filter 0.3s ease;
}

.terr-hex img.terr-tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Case verrouillée hors de portée : assombrie, non cliquable */
.terr-hex.is-locked { filter: brightness(0.42) saturate(0.4); }

/* Case de la frontière : cliquable, halo jaune pulsé */
.terr-hex.is-frontier {
  cursor: pointer;
  filter: brightness(0.85);
  animation: terr-pulse 1.9s ease-in-out infinite;
}

.terr-hex.is-frontier:hover { filter: brightness(1.15); transform: scale(1.06); }

@keyframes terr-pulse {
  0%, 100% { filter: brightness(0.7); }
  50% { filter: brightness(1.05); }
}

.terr-hex.is-owned { filter: none; }

/* Contenu révélé (coffre, parchemin, baies, écho, relique) */
.terr-hex img.terr-content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: auto;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  z-index: 2;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
}

.terr-hex.has-content img.terr-content { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Anneau de progression d'investissement (PM déposés / coût) */
.terr-cost {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.76rem;
  font-weight: 900;
  color: var(--jaune);
  background: rgba(10, 9, 7, 0.9);
  padding: 1px 7px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
}

.terr-hex.is-owned .terr-cost { display: none; }

.float-reward {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, 0);
  z-index: 5;
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--jaune);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
  pointer-events: none;
  animation: float-up 1.1s ease-out forwards;
}

@keyframes float-up {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -36px); }
}

/* Embuscade : l'écho fonce sur le joueur (calque, comme EchoAmbush dans l'app) */
.terr-ambush[hidden] { display: none; }

.terr-ambush {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(6, 5, 4, 0.82);
  animation: ambush-flash 0.9s ease-out;
}

@keyframes ambush-flash {
  0% { background: rgba(6, 5, 4, 0); }
  55% { background: rgba(173, 25, 25, 0.55); }
  100% { background: rgba(6, 5, 4, 0.82); }
}

.terr-ambush-echo {
  width: 140px;
  filter: drop-shadow(0 0 22px rgba(173, 25, 25, 0.9));
  animation: ambush-rush 0.9s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes ambush-rush {
  0% { transform: scale(0.25); opacity: 0; }
  55% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.terr-ambush-label {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  color: var(--blanc);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

/* Burst de récompense : « +3 PM » en GRAND au milieu de la carte — la validation
   d'habitude doit se voir, sinon le joueur ne comprend pas ce qu'il vient de gagner. */
.terr-burst[hidden] { display: none; }

.terr-burst {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.terr-burst span {
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: clamp(3rem, 11vw, 5rem);
  color: var(--jaune);
  text-shadow:
    4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000,
    0 0 60px rgba(242, 205, 15, 0.8);
  animation: burst-pop 1.25s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}

@keyframes burst-pop {
  0% { opacity: 0; transform: scale(0.2) rotate(-10deg); }
  25% { opacity: 1; transform: scale(1.18) rotate(-4deg); }
  40% { transform: scale(1) rotate(-4deg); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(1) translateY(-40px) rotate(-4deg); }
}

/* ── Consigne de jeu, entre la carte et le dialogue ─────────────
   Le dialogue joue le rôle du personnage ; la CONSIGNE dit quoi faire.
   Confondre les deux (ce qui était le cas) laissait le visiteur regarder
   une carte sans savoir qu'elle se clique. */

.terr-tip {
  margin-top: 10px;
  padding: 9px 14px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--jaune);
  background: rgba(242, 205, 15, 0.08);
  border: 1px solid var(--bordure);
}

/* Plus de PM : la consigne devient l'appel à valider une habitude. */
.terr-tip.is-warn {
  color: var(--rouge-hot);
  background: rgba(173, 25, 25, 0.14);
  border-color: rgba(224, 69, 59, 0.55);
  animation: nudge 1.1s ease-in-out infinite;
}

/* ── Objet RAMASSÉ : il quitte la case ──────────────────────────
   Coffre, baies, parchemin, tantô : une fois pris, l'objet n'a plus rien à
   faire sur la carte. C'est l'ANIMATION plein écran qui raconte le geste ;
   la case, elle, redevient de l'herbe. Seul l'Écho reste (il s'affronte). */
.terr-hex.has-content img.terr-content.is-taken {
  animation: content-taken 0.4s ease-in forwards;
}

@keyframes content-taken {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  40%  { transform: translate(-50%, -62%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -78%) scale(0.3); opacity: 0; }
}

/* ── Fenêtre de dialogue du territoire ─────────────────────────── */

.terr-dialogue {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 18px;
}

.terr-portrait {
  width: 74px;
  flex: none;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

.terr-dialogue-box {
  position: relative;
  flex: 1;
  background: rgba(20, 16, 10, 0.97);
  border: 2px solid var(--jaune);
  padding: 16px 16px 13px;
  min-height: 5.2em;
}

/* La PLAQUE est inclinée, le NOM reste DROIT : un nom penché se lit mal et ne
   correspond à aucune autre étiquette du site (toutes redressent leur texte). */
.terr-dialogue-name {
  position: absolute;
  top: -14px;
  left: 12px;
  background: var(--jaune);
  color: var(--noir);
  transform: skewX(-25deg);
  padding: 3px 16px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.9);
  font-family: var(--font-epic);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
}

.terr-dialogue-name > span {
  display: inline-block;
  transform: skewX(25deg);
}

.terr-dialogue-text {
  font-size: 1.08rem;
  line-height: 1.55;
  color: #ffffff;
}

.terr-dialogue-text.is-new { animation: bubble-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Bloc « vraie vie » : l'action qui donne des PM, isolée de la carte ─ */

.terr-habit-block {
  margin-top: 20px;
  padding: 18px 18px 16px;
  text-align: center;
  background: rgba(30, 27, 21, 0.9);
  border: 1px dashed rgba(242, 205, 15, 0.45);
}

.terr-habit-label {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--jaune-dim);
  margin-bottom: 12px;
}

.terr-habit-sub {
  margin-top: 12px;
  font-size: 0.98rem;
  color: var(--blanc-60);
}

.terr-habit-sub b { color: var(--jaune); }

.terr-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.terr-actions:empty { margin-top: 0; }

.terr-log {
  margin-top: 18px;
  border-top: 1px solid rgba(242, 205, 15, 0.18);
  padding-top: 12px;
  font-size: 0.94rem;
  color: var(--blanc-40);
  min-height: 3.4em;
}

.terr-log p { margin-bottom: 3px; }
.terr-log b { color: var(--jaune); }

/* Plus de PM : le bouton « valider une habitude » s'annonce comme la sortie.
   ⚠️ NE PAS toucher à `color` ici : sur `.btn-yellow` (fond jaune), passer le texte
   en jaune le rendait INVISIBLE — un bouton jaune vide. Le halo suffit à attirer
   l'œil, l'étiquette doit rester lisible. */
.btn.is-nudge {
  animation: nudge 1.1s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { box-shadow: 0 0 0 rgba(242, 205, 15, 0); }
  50% { box-shadow: 0 0 22px rgba(242, 205, 15, 0.55); }
}

/* ============================================================
   ANIMATION DE RAMASSAGE — frames de l'app, plein écran
   Voile sombre + sprite de 220 px, 100 ms par frame (SpriteOverlay.tsx).
   ============================================================ */

.sprite-layer[hidden] { display: none; }

.sprite-layer {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.sprite-stage {
  position: relative;
  width: min(280px, 62vw);
  height: min(280px, 62vw);
}

/* Toutes les frames sont montées en même temps (donc décodées une seule fois) :
   on ne fait basculer que l'opacité — changer le `src` frame par frame fait
   clignoter le temps du décodage. */
.sprite-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.sprite-stage img.is-on { opacity: 1; }

/* ============================================================
   ILLUSTRATION DU PARCHEMIN — plan fixe de 2 s avant la lecture
   ============================================================ */

.story-splash[hidden] { display: none; }

.story-splash {
  position: fixed;
  inset: 0;
  z-index: 195;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 3, 5, 0.94);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.story-splash.is-on { opacity: 1; }

.story-splash img {
  max-width: min(560px, 88vw);
  max-height: 78vh;
  object-fit: contain;
  border: 2px solid var(--jaune);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.85);
  transform: scale(0.96);
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.story-splash.is-on img { transform: scale(1); }

/* ============================================================
   PARCHEMIN D'HISTOIRE — lecture scène par scène
   Reprise de la grammaire de l'app : papier crème bordé de noir, portrait
   du personnage en haut à gauche avec sa plaque rouge, mot fort en rouge.
   ============================================================ */

.scroll-layer[hidden] { display: none; }

.scroll-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.scroll-scrim { position: absolute; inset: 0; background: rgba(4, 4, 4, 0.9); }

.scroll-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  background: rgba(14, 12, 9, 0.98);
  border: 2px solid var(--jaune);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.85);
  animation: scroll-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scroll-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.scroll-head { display: flex; align-items: center; gap: 12px; }
.scroll-icon { width: 34px; height: 34px; object-fit: contain; }
.scroll-kicker {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--jaune-dim);
}
.scroll-title {
  font-family: var(--font-epic);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--jaune);
}
.scroll-close {
  margin-left: auto;
  border: 1px solid var(--bordure);
  background: transparent;
  color: var(--blanc);
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 0.96rem;
  line-height: 1;
}
.scroll-close:hover { border-color: var(--jaune); color: var(--jaune); }

.scroll-portrait-col[hidden] { display: none; }
.scroll-portrait-col { align-self: flex-start; display: flex; flex-direction: column; align-items: center; }
.scroll-portrait { width: 96px; image-rendering: pixelated; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7)); }
.scroll-plate {
  margin-top: -8px;
  background: var(--rouge);
  border: 2px solid #141210;
  color: var(--blanc);
  padding: 3px 10px;
  transform: rotate(-2deg);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

/* Papier crème : c'est là que le récit se lit, exactement comme en jeu. */
.scroll-panel {
  flex: 1;
  overflow-y: auto;
  background: #f4ead0;
  border: 3px solid #141210;
  padding: 16px;
}

.scroll-text {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 600;
  color: #141210;
}

.scroll-text b { color: var(--rouge); font-weight: 900; }
.scroll-text.is-new { animation: bubble-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

.scroll-dots { display: flex; justify-content: center; gap: 6px; }
.scroll-dots i { width: 6px; height: 6px; background: rgba(240, 238, 238, 0.28); }
.scroll-dots i.is-on { width: 16px; background: var(--jaune); }

/* ============================================================
   COMBAT — duel de phrases contre TAMERAI
   ============================================================ */

.section-combat { max-width: 1120px; }

.fight {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  border: 2px solid var(--jaune);
  background: rgba(14, 12, 9, 0.96);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.fight-screen[hidden] { display: none; }

/* ── Écran 1 : présentation du boss ─────────────────────────── */

.fight-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 26px 28px;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(173, 25, 25, 0.22), transparent 62%),
    rgba(14, 12, 9, 0.98);
}

.fight-kicker {
  font-weight: 900;
  font-size: 0.86rem;
  letter-spacing: 0.4em;
  color: var(--rouge-hot);
  margin-bottom: 16px;
}

.fight-portrait {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0a08;
  border: 2px solid var(--bordure);
  margin-bottom: 18px;
}

.fight-portrait img {
  width: 108px;
  filter: drop-shadow(0 0 18px rgba(173, 25, 25, 0.7));
  animation: echo-float 2.8s ease-in-out infinite;
}

@keyframes echo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.fight-bossname {
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  letter-spacing: 0.06em;
  color: var(--jaune);
}

.fight-obstacle {
  margin-top: 10px;
  background: var(--jaune);
  border: 2px solid #141210;
  padding: 5px 16px;
}

.fight-obstacle > span {
  font-weight: 900;
  font-size: 0.92rem;
  color: var(--noir);
}

.fight-introline {
  margin: 20px auto 24px;
  max-width: 40ch;
  font-size: 1.05rem;
  font-style: italic;
  color: #ffffff;
}

/* ── Écran 2 : arène ────────────────────────────────────────── */

.fight-scene {
  position: relative;
  padding: 12px 14px 14px;
  background-image:
    linear-gradient(to bottom, rgba(10, 8, 14, 0.35), rgba(10, 8, 14, 0.72)),
    url('../assets/fight/bg_combat.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Identité de l'écho — collée SOUS son sprite (haut-droite), jamais dans un bandeau */
.fight-echo-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.fight-name-tag {
  display: inline-block;
  transform: skewX(-12deg);
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: clamp(1.2rem, 3.6vw, 1.7rem);
  letter-spacing: 0.08em;
  color: var(--blanc);
  text-shadow:
    2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000,
    0 0 22px rgba(173, 25, 25, 0.9);
}

.fight-ob-tag {
  display: inline-block;
  background: var(--jaune);
  color: var(--noir);
  font-weight: 900;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  padding: 3px 11px;
  transform: skewX(-12deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
}

/* Cœurs — 5 PV, AU-DESSUS du joueur (bas-gauche) */
.hearts { display: flex; gap: 4px; justify-content: center; }

.hearts img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.hearts img.is-lost { filter: grayscale(1) brightness(0.4); opacity: 0.55; transform: scale(0.85); }

/* AUCUNE hauteur fixe : la scène prend la hauteur de la plus haute des deux colonnes.
   Avec une hauteur en dur, le tag « La Peur de se lancer » se faisait rogner dès que
   le sprite ou la police changeaient de taille. */
.fight-sprites {
  position: relative;
  display: flex;
  align-items: flex-end;           /* le héros reste collé en bas */
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 2% 0 3%;
}

/* Écho descendu de quelques pixels : il laisse respirer la bulle posée au-dessus. */
.fight-echo-col {
  align-self: flex-start;
  order: 2;
  width: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.fight-hero-col {
  order: 1;
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.fight-echo {
  position: relative;
  width: 100%;
  animation: echo-float 2.6s ease-in-out infinite;
}

.fight-echo img { width: 100%; filter: drop-shadow(0 0 14px rgba(80, 20, 120, 0.8)); }

/* Flash de dégâts : copie de l'écho virée au rouge, révélée 1/4 de seconde */
.fight-echo-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: sepia(1) saturate(9) hue-rotate(-32deg) brightness(1.15);
}

.fight-echo.is-hit { animation: echo-recoil 0.42s ease-out; }
.fight-echo.is-hit .fight-echo-flash { animation: echo-flash 0.24s ease-out; }

@keyframes echo-recoil {
  0% { transform: translate(0, 0) scale(1); }
  22% { transform: translate(16px, -12px) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes echo-flash {
  0%, 100% { opacity: 0; }
  35% { opacity: 0.85; }
}

.fight-echo.is-down { filter: grayscale(0.8) brightness(0.5); opacity: 0.25; transition: all 0.7s ease; }

.fight-hero { position: relative; width: 112px; }

.fight-hero img { width: 100%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.7)); }

.fight-hero.is-hurt { animation: hero-shake 0.28s linear; }

@keyframes hero-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

/* Slash de tantô sur l'écho */
.fight-slash[hidden] { display: none; }

.fight-slash {
  position: absolute;
  inset: -20%;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.fight-slash::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: linear-gradient(
    135deg,
    transparent 42%,
    rgba(240, 238, 238, 0.95) 47%,
    var(--jaune) 50%,
    rgba(240, 238, 238, 0.95) 53%,
    transparent 58%
  );
  transform: translate(-55%, -55%);
  animation: slash-move 0.32s ease-in forwards;
}

@keyframes slash-move {
  to { transform: translate(55%, 55%); }
}

/* Pop-up PARFAIT / BON / RÉESSAYE (images du jeu) */
.fight-qpop[hidden] { display: none; }

.fight-qpop {
  position: absolute;
  left: -46%;
  top: 8%;
  width: 130px;
  z-index: 6;
  pointer-events: none;
  animation: qpop 1.05s ease-out forwards;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85));
}

@keyframes qpop {
  0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  22% { opacity: 1; transform: scale(1.15) rotate(-4deg); }
  40% { transform: scale(1) rotate(-4deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(1) translateY(-16px) rotate(-4deg); }
}

/* Bulle papier de l'attaque */
.fight-bubble {
  position: relative;
  z-index: 4;
  background: #f4f1e8;
  border: 3px solid #14110c;
  border-radius: 4px;
  padding: 14px 16px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75);
}

/* ⚠️ Plus de QUEUE de bulle. Elle était faite d'un seul triangle NOIR (le contour,
   sans le triangle crème par-dessus) : à l'écran, ça ne se lisait pas comme la
   pointe d'une bulle mais comme un petit rectangle noir posé sous le cadre. La
   bulle est déjà collée au-dessus de l'écho : rien à désigner. */

.fight-bubble-text {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #16130d;
}

.fight-bubble.is-new { animation: bubble-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes bubble-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Jauge de Libération */
.fight-liber {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(10, 9, 7, 0.95);
  border-top: 1px solid var(--bordure);
}

.fight-liber-label {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jaune-dim);
  white-space: nowrap;
}

.fight-liber-bar {
  flex: 1;
  height: 12px;
  background: rgba(240, 238, 238, 0.1);
  border: 1px solid rgba(242, 205, 15, 0.25);
  overflow: hidden;
}

.fight-liber-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--jaune-dim), var(--jaune));
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fight-liber-pct {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--jaune);
  min-width: 3.4em;
  text-align: right;
}

/* Ripostes */
.fight-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: rgba(10, 9, 7, 0.95);
}

.fight-answers[hidden] { display: none; }

.answer-btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
  background: rgba(30, 27, 21, 0.95);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--jaune-dim);
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* ⚠️ Les ripostes restent DROITES sur le site (l'app les incline légèrement) :
   sur écran large, l'inclinaison lisait comme un défaut de rendu, pas comme un parti pris. */
.answer-btn:hover:not(:disabled) {
  background: rgba(48, 42, 30, 0.98);
  border-color: var(--jaune);
  border-left-color: var(--jaune);
  transform: translateX(4px);
}

.answer-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Finisher : martèlement */
.fight-finisher[hidden] { display: none; }

.fight-finisher {
  padding: 16px;
  background: rgba(10, 9, 7, 0.97);
  text-align: center;
}

.fight-fin-callout {
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: clamp(1rem, 3.2vw, 1.3rem);
  letter-spacing: 0.12em;
  color: var(--rouge-hot);
  text-shadow: 0 0 18px rgba(224, 69, 59, 0.6);
  animation: callout-pulse 0.9s ease-in-out infinite;
}

@keyframes callout-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

.fight-fin-line {
  min-height: 2.6em;
  margin: 12px 0 6px;
  font-family: var(--font-epic);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  color: var(--blanc);
  text-shadow: 0 0 20px rgba(242, 205, 15, 0.35);
}

.fight-fin-line.is-new { animation: bubble-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

.fight-time {
  height: 6px;
  background: rgba(240, 238, 238, 0.1);
  margin-bottom: 12px;
  overflow: hidden;
}

.fight-time-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--rouge), var(--rouge-hot));
}

.fight-charge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.fight-charge-bar {
  flex: 1;
  height: 18px;
  background: rgba(240, 238, 238, 0.1);
  border: 1px solid rgba(242, 205, 15, 0.25);
  overflow: hidden;
}

.fight-charge-fill {
  height: 100%;
  width: 0%;
  background: var(--jaune);
}

.fight-charge-pct {
  font-family: var(--font-epic);
  font-size: 1rem;
  font-weight: 900;
  color: var(--jaune);
  min-width: 4.2em;
  text-align: right;
}

.fight-attack-btn { width: 100%; font-size: 1rem; padding: 18px 30px; }
.fight-attack-btn:active { transform: skewX(-8deg) scale(0.97); }

/* Flash « BAM » quand une jauge de charge se remplit */
.fight.is-bam { animation: bam 0.2s ease-out; }

@keyframes bam {
  0% { box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.85), inset 0 0 0 999px rgba(255, 255, 255, 0.55); }
  100% { box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.85), inset 0 0 0 999px rgba(255, 255, 255, 0); }
}

/* Étoile de dégâts cumulés */
/* PV arrachés à l'écho : nombre posé dans une ÉTOILE ROUGE (même découpe que
   l'étoile d'XP de la victoire). Un chiffre nu se perdait sur le décor sombre,
   au moment précis où le joueur martèle et ne quitte pas le bouton des yeux.
   Descendu de 32 px : plus haut, il sortait de la zone qu'on regarde. */
.dmg-star {
  position: absolute;
  left: 50%;
  top: calc(30% + 32px);
  transform: translate(-50%, -50%);
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  background: var(--rouge);
  clip-path: polygon(
    50% 0%, 61% 33%, 96% 33%, 68% 54%, 79% 87%, 50% 67%,
    21% 87%, 32% 54%, 4% 33%, 39% 33%
  );
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
  pointer-events: none;
  animation: dmg-star 0.6s ease-out forwards;
}

@keyframes dmg-star {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-12deg); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(0.95) rotate(-6deg); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1) rotate(-6deg); }
}

/* ── Écran 3 : victoire ─────────────────────────────────────── */

.fight-victory {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 24px 26px;
  background-image:
    linear-gradient(to bottom, rgba(8, 12, 20, 0.66), rgba(8, 12, 20, 0.82)),
    url('../assets/fight/bg_victory.jpg');
  background-size: cover;
  background-position: center;
}

.fight-vic-kicker { animation: plate-in 0.4s ease-out both; }

.fight-vic-name {
  margin-top: 14px;
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: clamp(1.5rem, 4.6vw, 2.2rem);
  letter-spacing: 0.08em;
  color: var(--blanc);
  text-shadow: 3px 3px 0 #000;
  animation: vic-slide 0.5s 0.15s ease-out both;
}

.fight-vic-stamp {
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: clamp(2rem, 6.4vw, 3rem);
  letter-spacing: 0.06em;
  color: var(--jaune);
  text-shadow: 4px 4px 0 #000, 0 0 40px rgba(242, 205, 15, 0.5);
  animation: vic-stamp 0.5s 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

/* ⚠️ `vic-in` sert à PLUSIEURS blocs de l'écran de victoire (gains, note, boutons) :
   elle ne doit porter AUCUNE inclinaison, sinon tout l'écran penche. */
@keyframes vic-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

/* Animation réservée aux PLAQUES (`.plate`), qui sont inclinées et dont le texte
   est redressé par `.plate > span`. Une keyframe sans `skewX` REMPLACE le skew de
   la plaque sans toucher au contre-skew du texte → plaque droite, texte penché
   (« C'est gagné », « Pas encore »). Le skew est donc rejoué à chaque étape. */
@keyframes plate-in {
  from { opacity: 0; transform: skewX(-25deg) scale(0.5); }
  to   { opacity: 1; transform: skewX(-25deg) scale(1); }
}
@keyframes vic-slide { from { opacity: 0; transform: translateX(-52px); } to { opacity: 1; transform: translateX(0); } }
@keyframes vic-stamp { from { opacity: 0; transform: scale(2.6); } to { opacity: 1; transform: scale(1); } }

/* Bulle-étoile comics de l'XP (fond blanc, valeur noire) */
.fight-star {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 16px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  clip-path: polygon(
    50% 0%, 61% 33%, 96% 33%, 68% 54%, 79% 87%, 50% 67%,
    21% 87%, 32% 54%, 4% 33%, 39% 33%
  );
  animation: vic-star 0.5s 0.75s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.fight-star span {
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: 1.4rem;
  color: #111;
  line-height: 1;
}

/* 0.75rem = 12 px : plancher de lisibilité. L'étoile fait 118 px, la place ne manque pas. */
.fight-star small { font-weight: 900; font-size: 0.75rem; letter-spacing: 0.16em; color: #111; }

@keyframes vic-star { from { opacity: 0; transform: scale(0.2) rotate(-40deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

.fight-vic-gains {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 12px;
  animation: vic-in 0.5s 1s ease-out both;
}

.fight-vic-gains span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--jaune);
}

.fight-vic-gains img { width: 24px; height: 24px; object-fit: contain; }

.fight-vic-note {
  margin: 14px auto 0;
  max-width: 44ch;
  font-size: 1rem;
  color: var(--blanc-60);
  animation: vic-in 0.5s 1.15s ease-out both;
}

.fight-vic-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  animation: vic-in 0.5s 1.3s ease-out both;
}

/* ── Écran 4 : pas encore ───────────────────────────────────── */

.fight-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: 40px 26px;
}

.fight-failed-text {
  max-width: 46ch;
  font-size: 1.05rem;
  color: var(--blanc-60);
}

.fight-failed-text b { color: var(--jaune); }

/* ---------- Progression / stats ---------- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.stat-card {
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 32px 28px;
  text-align: center;
}

.stat-card img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  margin: 0 auto 18px;
  image-rendering: pixelated;
}

.stat-card h4 {
  font-family: var(--font-epic);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 12px;
}

.stat-card p { font-size: 1.03rem; color: var(--blanc-60); }

.tanto-band {
  margin-top: 70px;
  display: grid;
  /* Le texte reprend la part la plus large : il n'y a plus six visuels à étaler,
     une seule lame au premier plan suffit à droite. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--jaune);
  border-radius: 6px;
  padding: 44px;
}

.tanto-title {
  font-family: var(--font-epic);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 16px;
}

.tanto-copy p { color: var(--blanc-60); font-size: 1.08rem; }

/* ---------- Éventail de tantôs ----------
   Une lame au premier plan (le Tantô de Shinkatô), quatre en retrait derrière elle.
   Les lames d'arrière-plan sont en `position: absolute` et le premier plan en flux :
   c'est LUI qui donne sa hauteur au bloc, donc la composition ne s'effondre jamais,
   même si une image d'arrière-plan manque. */

.tanto-fan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.tanto-premier {
  position: relative;
  z-index: 2;
  width: 46%;
  max-width: 230px;
  height: auto;
  object-fit: contain;
  transform: rotate(-8deg);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 22px rgba(242, 205, 15, 0.28));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.tanto-premier:hover {
  transform: rotate(-8deg) translateY(-12px) scale(1.04);
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 30px rgba(242, 205, 15, 0.55));
}

/* Les quatre autres : plus petites, en retrait, estompées — présentes sans concurrencer. */
.tanto-arriere {
  position: absolute;
  top: 50%;
  z-index: 1;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

.tanto-g1 { left: 15%;  width: 27%; max-width: 136px; opacity: 0.30; transform: translateY(-46%) rotate(-20deg); }
.tanto-g2 { left: 1%;   width: 22%; max-width: 108px; opacity: 0.15; transform: translateY(-42%) rotate(-32deg); }
.tanto-d1 { right: 15%; width: 27%; max-width: 136px; opacity: 0.30; transform: translateY(-46%) rotate(6deg); }
.tanto-d2 { right: 1%;  width: 22%; max-width: 108px; opacity: 0.15; transform: translateY(-42%) rotate(18deg); }

/* ---------- Kaen ---------- */

.kaen-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 56px;
  align-items: center;
}

/* Visuel vectoriel (plus de pixel-art ici) → surtout PAS d'`image-rendering: pixelated`,
   qui crénelerait un dessin aux contours nets. */
.kaen-figure img {
  max-height: 430px;
  width: auto;
  margin: 0 auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65));
}

.dialogue-card .panel-body { padding: 40px 36px 32px; }

/* Kaen parle : même fenêtre blanche que les chapeaux de section. `.panel::after` est le
   remplissage du cadre (le `::before` jaune reste la bordure) — c'est donc lui qu'on
   repeint, pas un fond ajouté par-dessus. */
.dialogue-card::after { background: var(--blanc); }

.dialogue-text {
  font-family: var(--font-epic);
  font-weight: 600;
  font-size: 1.34rem;
  line-height: 1.6;
  color: var(--noir);
}

.dialogue-sub { margin-top: 20px; font-size: 1.06rem; color: rgba(29, 29, 29, 0.82); }

/* ---------- CTA ---------- */

.section-cta { text-align: center; padding-top: 130px; padding-bottom: 90px; }

.cta-emblem { width: 84px; margin: 0 auto 30px; }

.cta-title {
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blanc);
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.9);
}

.cta-sub { margin: 22px auto 0; max-width: 56ch; color: var(--blanc-60); }

.cta-actions { margin-top: 36px; }

/* ---------- Formulaire « Être prévenu au lancement » ---------- */

.cta-form { margin: 36px auto 0; max-width: 720px; }

.cta-form-label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 12px;
}

/* Champ + bouton sur une ligne, qui passe en colonne sous 560px (cf. responsive). */
.cta-form-row { display: flex; gap: 12px; align-items: stretch; }

.cta-input {
  flex: 1 1 auto;
  min-width: 0;                       /* sinon le champ refuse de se réduire en flex */
  font-family: var(--font-ui);
  font-size: 1.08rem;
  color: var(--blanc);
  background: rgba(20, 16, 10, 0.72);
  border: 1px solid var(--bordure);
  border-radius: 4px;
  padding: 19px 22px;                 /* champ volontairement généreux : c'est LE geste
                                         qu'on demande au visiteur, il doit se voir */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cta-input::placeholder { color: rgba(240, 238, 238, 0.34); }

.cta-input:focus {
  outline: none;
  border-color: var(--jaune);
  box-shadow: 0 0 0 3px rgba(242, 205, 15, 0.18);
}

/* Le navigateur colore en rouge dès la saisie du premier caractère si on cible
   :invalid seul — on n'alerte donc qu'une fois le champ quitté ou le formulaire soumis. */
.cta-input:not(:placeholder-shown):not(:focus):invalid { border-color: var(--rouge); }

.cta-form .btn { flex: 0 0 auto; cursor: pointer; }

/* Piège à robots : hors écran, jamais lu par un lecteur d'écran, jamais atteint au clavier. */
.cta-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Formulaire partenaire : champs empilés (deux informations à saisir, pas une). */
.partners-form { display: flex; flex-direction: column; gap: 0; }
.partners-form .cta-form-label { margin-top: 18px; }
.partners-form .cta-form-label:first-of-type { margin-top: 0; }
.partners-form .cta-input { width: 100%; }
.partners-form .btn { margin-top: 22px; align-self: center; cursor: pointer; }

/* Confirmation affichée EN PLACE du formulaire : le visiteur ne quitte pas la page. */
.form-ok {
  border: 2px solid var(--jaune);
  border-radius: 4px;
  background: rgba(242, 205, 15, 0.07);
  padding: 22px 24px;
  color: var(--blanc);
  line-height: 1.6;
  text-align: center;
}
.form-ok b { color: var(--jaune); font-size: 1.1rem; }

/* Échec d'envoi : jamais silencieux, et on laisse toujours une porte de sortie. */
.form-erreur {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--rouge);
  background: rgba(173, 25, 25, 0.12);
  color: var(--blanc);
  font-size: 0.96rem;
  line-height: 1.55;
}
.form-erreur a { color: var(--jaune); }

.cta-form-note {
  margin-top: 14px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--blanc-60);
}

.cta-characters {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 64px;
}

.cta-characters img {
  width: 104px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}

.cta-characters img:nth-child(even) { transform: translateY(14px); }

/* ---------- Partenaires ---------- */

.section-partners { padding-top: 0; }

.partners-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 44px;
  align-items: center;
  padding: 40px 40px 34px;
}

.partners-body { font-size: 1.08rem; color: var(--blanc-60); }
/* Deux paragraphes : le reset global met margin:0, il faut donc rendre le blanc. */
.partners-body p + p { margin-top: 14px; }

.partners-actions { text-align: center; }

.partners-note {
  margin-top: 16px;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--blanc-40);
}

/* ---------- Footer ---------- */

/* ---------- Page 404 ---------- */

.notfound {
  max-width: 900px;
  margin: 0 auto;
  padding: 110px 5vw 90px;
  text-align: center;
}

.notfound-echo {
  width: 150px;
  margin: 0 auto 40px;
  display: block;
  filter: drop-shadow(0 10px 34px rgba(0, 0, 0, 0.9));
}

/* Sur la 404 l'étiquette est CENTRÉE : il n'y a pas de grille de cartes en dessous pour
   justifier un alignement à gauche. */
.notfound-head > .plate { margin-left: auto; margin-right: auto; }

.notfound-actions {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ---------- Réseaux sociaux (juste au-dessus du pied de page) ---------- */

.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0 5vw 64px;
}

.socials-label {
  font-family: var(--font-epic);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc-40);
  margin-right: 6px;
}

/* Même inclinaison que les boutons du site (`skewX(-8deg)`) : l'icône, elle, est
   redressée à l'intérieur — un logo penché ne se reconnaît plus. */
.social {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--jaune);
  background: rgba(20, 17, 12, 0.8);
  border: 2px solid rgba(242, 205, 15, 0.45);
  transform: skewX(-8deg);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.social svg { width: 26px; height: 26px; transform: skewX(8deg); }

.social:hover,
.social:focus-visible {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--noir);
  transform: skewX(-8deg) translateY(-3px);
}

.footer {
  position: relative;
  border-top: 1px solid var(--bordure);
  padding: 56px 5vw 48px;
  text-align: center;
  background: rgba(12, 11, 9, 0.94);
}

.footer-logo { width: 64px; margin: 0 auto 18px; opacity: 0.9; }

.footer-tagline {
  font-family: var(--font-epic);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.98rem;
  color: var(--blanc-60);
}

.footer-meta { margin-top: 18px; font-size: 0.94rem; color: var(--blanc-40); }

/* Cibles tactiles du pied de page : ces liens ne faisaient que 19 px de haut. Le
   remplissage vertical porte la zone de clic à 44 px sans déplacer le texte —
   c'est le dernier endroit de la page où l'on tape sur un mobile (contact, mentions). */
.footer-meta a {
  color: var(--jaune-dim);
  text-decoration: none;
  display: inline-block;
  padding: 12px 4px;
}
.footer-meta a:hover { color: var(--jaune); }
.footer-meta span { margin: 0 10px; }

/* ---------- Pages légales (mentions, confidentialité) ---------- */

.legal-wrap { max-width: 780px; margin: 0 auto; padding: 130px 5vw 90px; }

.legal-title {
  font-family: var(--font-epic);
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jaune);
}

.legal-updated { margin-top: 10px; font-size: 0.92rem; color: var(--blanc-40); }

.legal-intro {
  margin-top: 26px;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--blanc);
  border-left: 3px solid var(--rouge);
  padding-left: 18px;
}

.legal-section { margin-top: 42px; }

.legal-section h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 14px;
}

.legal-section p { color: var(--blanc-60); line-height: 1.68; margin-bottom: 14px; }
.legal-section a { color: var(--jaune-dim); }
.legal-section a:hover { color: var(--jaune); }

.legal-list { margin: 0 0 14px 20px; color: var(--blanc-60); line-height: 1.68; }
.legal-list li { margin-bottom: 10px; }

/* Tableau des durées de conservation (politique de confidentialité). */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 18px;
  font-size: 1rem;
  color: var(--blanc-60);
}

.legal-table th,
.legal-table td {
  border: 1px solid var(--bordure);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.legal-table th {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jaune);
  background: rgba(242, 205, 15, 0.05);
}

/* Le tableau déborderait sur un téléphone : on le laisse défiler seul. */
@media (max-width: 620px) {
  .legal-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- Reveal au scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-cue::after,
  .fight-portrait img,
  .fight-echo,
  .fight-fin-callout,
  .terr-hex.is-frontier { animation: none; }
  .terr-hex.is-frontier { filter: brightness(0.95); }
  .fight-slash::before { animation-duration: 0.05s; }
  .float-reward, .dmg-star { animation-duration: 0.01s; }
  .btn, .voie-card, .tanto-premier, .terr-hex,
  .nav-logo, .nav-wordmark, .cta-input { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .kaen-wrap { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .dialogue-card .panel-title { left: 50%; transform: translateX(-50%) skewX(-25deg); }
  .tanto-band { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .cta-form-row { flex-direction: column; }
  .cta-form .btn { width: 100%; }

  /* ⚠️ CAUSE RACINE du débordement horizontal de la page d'accueil sur téléphone.
     Mesuré le 18/08/2026 : 25 px de trop à 360 px de large, 18 px à 375, 10 px à 390.
     « DESCENDS — TON TERRITOIRE T'ATTEND » en `nowrap` avec 0.24em d'interlettrage
     occupe 411 px — plus large que l'écran. Comme .hero-cue est centrée par
     translateX(-50%), le texte se faisait rogner des DEUX côtés, et l'overflow-x
     du body masquait le symptôme au lieu de le corriger.
     On resserre le texte et on l'autorise à passer à la ligne : tout le reste
     (vidéo de fond, voile, titres) débordait par ricochet et rentre dans l'ordre. */
  .hero-cue {
    font-size: 0.75rem;   /* plancher de lisibilité : 12 px, jamais moins */
    letter-spacing: 0.12em;
    white-space: normal;
    max-width: 84vw;
    text-align: center;
    line-height: 1.45;
  }

  /* Trois autres sources de débordement, invisibles tant que .hero-cue dominait.
     Toutes ont la même origine : du texte en majuscules très espacé qui ne peut pas
     se réduire. Un `width: 100%` ne sert à rien face à `white-space: nowrap` —
     la largeur minimale du contenu l'emporte toujours. */

  /* 1. Les boutons du hero. `nowrap` bloque le repli, et le skewX(-8deg) élargit
        encore la boîte d'environ 7 px de chaque côté : on lui laisse la place. */
  .hero-ctas .btn {
    white-space: normal;
    letter-spacing: 0.1em;
    padding: 14px 18px;
    max-width: calc(100% - 18px);
  }

  /* 2. La ligne « 進化 SHINKA — ÉVOLUTION · 刀 TÔ — LAME » : 0.3em d'interlettrage
        la poussait à 368 px, ce qui élargissait tout le bloc du hero. */
  .eyebrow { font-size: 0.78rem; letter-spacing: 0.16em; }

  /* 3. L'étiquette jaune inclinée (« VOUS ÊTES UNE MARQUE ? ») : posée à 22 px du
        bord gauche, elle ressortait de 20 px à droite sur un écran de 360.

        ⚠️ `:not(.panel-title-center)` est INDISPENSABLE. Sans cette exclusion, le
        `left: 14px` écrasait le `left: 50%` des étiquettes centrées, qui gardaient
        leur `translateX(-50%)` : « CARTE D'EXPANSION » partait alors à moitié hors
        de l'écran, illisible. Régression introduite le 18/08 et corrigée le même
        jour — le sélecteur doit rester tel quel. */
  .panel-title:not(.panel-title-center) { left: 14px; }
  .panel-title { padding: 7px 16px; }
  .panel-title > span { font-size: 0.8rem; letter-spacing: 0.08em; }

  /* L'étiquette centrée reste centrée, et ne dépasse jamais la largeur du panneau. */
  .panel-title-center { max-width: calc(100% - 24px); }
  .panel-title-center > span { font-size: clamp(0.68rem, 3vw, 0.8rem); }
}

@media (max-width: 860px) {
  /* ---------- BARRE COMPACTE ----------
     Avant : les quatre libellés passaient à la ligne sous le logo, ce qui donnait une
     barre collante de 122 px — 15 % de l'écran, occupés en permanence, mesuré le
     18/08/2026. Maintenant les liens se replient derrière un bouton : la barre tient
     sur UNE ligne. On ne perd aucune destination, on récupère la moitié de la hauteur.

     `position: relative` sert d'ancrage au panneau déroulant ci-dessous. */
  .nav {
    position: sticky;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 5vw;
  }

  /* Le panneau : posé SOUS la barre, jamais dans le flux — sinon il repousserait la
     page à chaque ouverture. `visibility` (et pas seulement l'opacité) le retire du
     parcours clavier quand il est fermé. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 6px 5vw 14px;
    /* Fond OPAQUE, pas translucide : à 0,97 le grand titre du hero transparaissait
       derrière les libellés et les rendait sales. Un menu se lit, il ne se devine pas. */
    background: #100e0a;
    border-bottom: 1px solid var(--bordure);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Cibles tactiles : un lien de nav ne faisait que 20 px de haut, là où un doigt
     demande 44 px (iOS) / 48 dp (Android). Dans le panneau, chaque lien occupe toute
     la largeur — la cible devient impossible à manquer. */
  .nav-links a {
    display: block;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    padding: 15px 4px;
    border-bottom: 1px solid rgba(242, 205, 15, 0.12);
    color: var(--blanc);
  }

  .nav-links a:last-child { border-bottom: none; }

  .nav-burger { display: flex; flex: 0 0 auto; }
  .voies-grid, .stats-row { grid-template-columns: 1fr; }
  .partners-body-grid { grid-template-columns: 1fr; text-align: center; }
  .partners-body-grid .hex, .voie-card .hex { margin-left: auto; margin-right: auto; }
  .section { padding: 72px 6vw; }
  .cta-characters img { width: 68px; }
  .terr-hex { width: 84px; height: 97px; }
  .terr-row + .terr-row { margin-top: -22px; }
  .fight-echo-col { width: 124px; }
  .fight-hero-col { width: 108px; }
  .fight-hero { width: 92px; }
  .fight-qpop { left: -34%; width: 104px; }
  .terr-portrait { width: 58px; }
  .section-lead, .hero-sub { font-size: 1.11rem; }
  .section-lead { padding: 32px 24px 26px; box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.85); }
  .section-head > .plate { margin-left: 14px; }
}

@media (max-width: 480px) {
  /* L'étiquette « AFFRONTER UN OBSTACLE » est la plus longue : à pleine taille elle déborde
     du cadre sur un téléphone étroit. On resserre la plaque, pas la fenêtre. */
  .section-head > .plate { padding: 7px 18px; margin-left: 10px; }
  .section-head > .plate > span { font-size: 0.78rem; letter-spacing: 0.1em; }
  .section-lead { padding: 28px 18px 22px; }
  .nav-wordmark { display: none; }
  .nav-brand { flex: 0 0 auto; }

  /* Le CTA de la barre. Deux corrections du 18/08/2026 :
     • 0.72rem valait 11,5 px — sous le plancher de lisibilité de 12 px ;
     • le `skewX(-8deg)` déporte le coin supérieur droit d'environ 3 px hors de la
       boîte : le bouton frôlait le bord de l'écran. `margin-right` lui rend cet air.
     Il reste au-dessus du plancher tactile grâce à son remplissage vertical. */
  .nav > .btn {
    font-size: 0.75rem;
    padding: 12px 14px;   /* 12 px de haut de chaque côté : la cible atteint 44 px */
    letter-spacing: 0.06em;
    margin-right: 5px;
  }

  /* L'emblème seul (le mot « SHINKATÔ » est masqué à cette taille) ne faisait que
     40 px de large : sous le seuil tactile. On élargit la zone, pas l'image. */
  .nav-brand { padding: 6px 4px; }
  .nav-logo { width: 36px; }
  .hero-ctas .btn { width: 100%; }
  .hud-progress { margin-left: 0; }
  .cta-characters { flex-wrap: wrap; }
  .terr-hex { width: 68px; height: 79px; }
  .terr-row { gap: 2px; }
  .terr-row + .terr-row { margin-top: -18px; }
  /* 0.6rem valait 9,6 px, illisible. Remonté au plancher de 12 px — l'étiquette
     « 3 PM » y tient largement dans l'hexagone de 68 px. */
  .terr-cost { font-size: 0.75rem; bottom: 7px; padding: 0 5px; }
  .terr-dialogue { flex-direction: column; align-items: stretch; gap: 0; }
  .terr-portrait { width: 54px; align-self: center; margin-bottom: -6px; }
  .fight-answers { padding: 12px; }
  .answer-btn { font-size: 0.85rem; padding: 11px 13px; }
}