:root {
  --bg:         #070c14;
  --bg-card:    rgba(14,24,44,0.94);
  --blue:       #78b4ff;
  --blue-mid:   rgba(120,180,255,0.28);
  --blue-dim:   rgba(120,180,255,0.12);
  --blue-glow:  rgba(120,180,255,0.07);
  --text:       #eaf4ff;
  --text-dim:   rgba(190,220,255,0.72);
  --border:     rgba(120,180,255,0.30);
  --gold:       #f0d060;

  --c-grass:   #52a040;
  --c-field:   #d4b840;
  --c-forest:  #246830;
  --c-house:   #b08860;
  --c-water:   #2068a0;
  --c-rail:    #706880;

  --font-title: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:  'Space Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ─── BACKGROUND ────────────────────────────────────────────── */
#particles-js {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#particles-js canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%,  rgba(40,90,180,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 8%  80%,  rgba(20,60,140,0.13) 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 92% 60%,  rgba(60,30,120,0.11) 0%, transparent 55%);
}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 96px 0; }
section + section { border-top: 1px solid var(--border); }

/* 2026-08-01 — cadre décoratif médiéval de la prez (#prezFooterBanner/
   #prezHeaderBanner/#prezLeftBanner/#prezRightBanner, cf. index.php et
   css/themes/medieval.css) : masqué par défaut (thème bleu, ou tout état
   avant application du thème), même logique que #footerBanner et consorts
   côté jeu (css/base.css). Réaffichés uniquement par
   [data-theme="ancien"] dans themes/medieval.css. */
#prezFooterBanner,
#prezHeaderBanner,
#prezLeftBanner,
#prezRightBanner {
  display: none;
}

/* ─── NAV ────────────────────────────────────────────────────── */
/* 2026-07-19 — homogénéisation : seul le layout partagé (position/z-index/
   display/gap) reste ici. Le "look" (left/right, padding, fond, liseré, flou,
   couleurs) diverge entre les 2 thèmes et est désormais dupliqué explicitement
   dans themes/bleu.css et themes/medieval.css — même convention que les 14
   cartes de la prez (.mission-card, .biome-card, etc.). */
nav {
  position: fixed;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* 2026-07-20 — sur demande explicite : ne contient plus que le glyphe hexagone
   (retiré : "HEXISTENZ" + le numéro de version .nav-version, déplacés à la
   suite de .hero-title) — agrandi en conséquence (26px→40px→56px après un 2e
   retour utilisateur, le glyphe seul ferait pauvre à une taille plus modeste
   dans le bandeau). */
.nav-logo {
  font-family: var(--font-title);
  font-size: 56px;
  letter-spacing: 0.08em;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
  /* 2026-07-20 — à 56px, la boîte du glyphe (centrée par align-items:center
     du <nav>) déborde symétriquement du contenu 42px du bandeau (thème
     médiéval, cf. themes/medieval.css) et se retrouve visuellement ~5px plus
     haut que le centre des liens .nav-links (dont le padding-bottom:6px
     décale leur propre boîte). Recalé ici par un léger décalage relatif —
     ajuster cette valeur si la police du logo ou la hauteur du bandeau
     changent à l'avenir. */
  position: relative;
  top: 5px;
}
/* Refonte i18n scalable du 2026-07-14 (cf. CONTEXT.md §21) : #lang-toggle
   contenait 2 <button> FR/EN codés en dur, remplacés par un <select> dont les
   <option> sont générées par PHP depuis $LANGS — ajouter une langue future ne
   demande aucun changement ici. */
#lang-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px;
  flex-shrink: 0;
}
#lang-toggle select {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: transparent;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
/* 2026-07-17 — sélecteur de thème graphique (Bleu / Ancien), même style que
   #lang-toggle, positionné juste avant lui. Plomberie uniquement pour l'instant :
   le thème "Ancien" (parchemin, 9-slice) n'est pas encore implémenté visuellement,
   cf. themeManager.js — la valeur est stockée mais n'a pas d'effet sur le HUD. */
#theme-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px;
  flex-shrink: 0;
}
#theme-toggle select {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: transparent;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  flex: 1;
}
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 0 2px 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  opacity: 1;
}
.nav-cta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 20px;
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
.section-label {
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-title);
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin-bottom: 18px;
}
.section-title + .section-title {
  margin-top: 0;
}
.section-title:has(+ .section-title) {
  margin-bottom: 4px;
}
.section-sub {
  font-size: 14px;
  color: var(--text-dim);
  /* 2026-07-20 — 580px ne couvrait qu'une fraction de la largeur disponible
     (conteneur plein ou colonne de grid selon la section) ; retiré au profit de
     100% pour occuper toute la largeur réellement offerte par le parent, quel
     qu'il soit (même logique que le fix .hero-tagline du même jour). */
  max-width: 100%;
  line-height: 1.75;
}
.section-sub--lead {
  font-size: 18px;
  color: var(--text);
  opacity: 0.7;
  margin-bottom: 6px;
  font-style: italic;
}
.ambiance-subtitle {
  font-family: var(--font-title);
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-bottom: 20px;
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 32px;
  background: var(--blue);
  color: #040810;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s;
}
.btn-primary:hover { background: #a8d0ff; }
.btn-secondary {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 32px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }

/* ─── HERO ───────────────────────────────────────────────────── */
#hero {
  position: relative;
  z-index: 1;
  /* 2026-08-01 — demande explicite : "laisse bcp de marge avant la 1ere
     image bouliste-transparent.png (au moins 125px)". #hero hérite déjà
     d'un padding-top:96px générique (`section { padding: 96px 0; }` plus
     haut dans ce fichier) ; le <nav> fixed (thème bleu, hauteur ~83px) ne
     laissait donc que 21px de marge réelle entre le bas du nav et l'image
     — insuffisant. margin-top ajouté ici pour porter ce gap à 125px
     (112 + 96 padding − 83 nav.bottom = 125). Thème médiéval : override
     séparé et plus grand dans css/themes/medieval.css (nav bien plus haut
     à cause du cadre décoratif, cf. CONTEXT.md §39). */
  margin-top: 112px;
}

.hero-banner {
  width: 100%;
  height: 62vh;
  background: url('../images/bouliste-transparent.png') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  pointer-events: none;
}

.hero-content {
  padding-top: 96px;
  padding-bottom: 80px;
}
.hero-inner {
  display: grid;
  /* 2026-08-02 — minmax(0, 1fr) au lieu de 1fr nu : une grid-item a par défaut
     min-width:auto (= la taille min-content de son contenu), qui PASSE OUTRE la
     fraction 1fr dès qu'un run de texte insécable (ex. ⬡ HEXISTENZ + pastille de
     version, cf. index.php) dépasse la largeur du track — tout .hero-text
     (sous-titre, inspi, tagline, boutons, stats-bar) était alors forcé de
     s'élargir avec lui et débordait sous le cadre médiéval en largeur réduite
     (~920px). minmax(0, 1fr) retire ce plancher : le track respecte la fraction
     réellement disponible, laissant le contenu wrap/scroller normalement à
     l'intérieur plutôt que de faire déborder toute la colonne. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.hero-badge {
  display: inline-block;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 14px;
  border: 1px solid rgba(120,180,255,0.38);
  border-radius: 20px;
  color: var(--blue);
  margin-bottom: 22px;
  background: rgba(120,180,255,0.08);
}
.hero-title {
  font-family: var(--font-title);
  /* 2026-07-20 — agrandi sur demande explicite ("plus gros, sans occuper
     toute la largeur") : plafond 128px→160px, plancher 68px→78px, 9vw→10vw.
     Le texte "⬡ HEXISTENZ" (Bebas Neue très condensée) reste largement sous
     la largeur du conteneur (.container max-width:1100px) même au plafond —
     vérifié en direct (bounding box du h1 vs conteneur). */
  font-size: clamp(78px, 10vw, 160px);
  letter-spacing: 0.06em;
  line-height: 0.92;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #b8d8ff 45%, #78b4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.95)) drop-shadow(0 0 30px rgba(0,0,0,0.7));
}
/* 2026-07-20 — numéro de version, déplacé ici depuis .nav-logo (bandeau) sur
   demande explicite : "en tout petit", à la suite du titre. .hero-title
   dessine son texte via background-clip:text (dégradé) — sans ce reset, le
   span hériterait du même clip et deviendrait transparent lui aussi. Couleur
   réelle fixée par thème ci-dessous (même pattern que l'ex-.nav-version). */
/* 2026-07-28 — passage en PASTILLE (fond plein + coins arrondis) sur demande :
   le rapport fond/texte est inversé par rapport au titre selon le thème.
   Médiéval → fond marron sombre + typo claire ; Bleu sidéral → fond bleu clair
   + typo sombre. Ici uniquement la géométrie (commune aux 2 thèmes) ; les
   couleurs vivent dans css/themes/medieval.css et css/themes/bleu.css, comme
   pour le reste de la prez (cf. CONTEXT.md §32).
   Les resets background-clip/text-fill restent indispensables : .hero-title
   dessine son texte via background-clip:text (dégradé), sans quoi ce span
   hériterait du clip et deviendrait transparent. */
/* 2026-08-03 — pastille + date regroupées dans un wrapper unique inline-block +
   white-space:nowrap : garantit qu'elles restent toujours collées l'une à
   l'autre sur la même ligne (la date se retrouvait seule sur une nouvelle
   ligne, très en dessous, à cause du line-height géant hérité du titre h1
   quand elle wrappait indépendamment de la pastille — même un espace
   insécable entre les deux spans ne suffisait pas à les garder groupés).
   Le wrapper reste lui-même libre de passer à la ligne (espace normal avant,
   entre "HEXISTENZ" et lui) pour ne pas réintroduire le débordement horizontal
   corrigé en #226. */
/* 2026-08-08 — pastille #prezVersionBadge (bas-gauche, par-dessus le cadre)
   ajoutée puis RETIRÉE le même jour sur demande explicite ("c'était une
   erreur") : la version restait affichée uniquement en ligne dans .hero-title
   via .hero-version-wrap ci-dessous (repli sur le comportement d'origine).
   2026-08-09 — ERRATUM : demande explicite different cette fois-ci, la
   pastille est réintroduite mais SEULEMENT visible en thème médiéval (jamais
   sur le thème Bleu, où .hero-version-wrap reste l'unique affichage) — cf.
   [data-theme="ancien"] #prezVersionBadge dans css/themes/medieval.css.
   Masquée ici par défaut (thème Bleu / valeur de repli). */
#prezVersionBadge {
  display: none;
}

.hero-version-wrap {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
  font-size: 15px;
}
.hero-version {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-left: 16px;
  /* 2026-07-28 — CORRECTIF : vertical-align:bottom aligne sur le bas de la
     LIGNE (line box) du titre, qui réserve l'espace des descentes de police
     (jambages de g/j/p/q/y — mesuré en live : fontBoundingBoxDescent ~55px à
     158px de font-size, alors que "HEXISTENZ" (tout en capitales, sans
     jambage) n'a qu'un actualBoundingBoxDescent ~5px) — la pastille se
     retrouvait ainsi ~20-50px plus bas que le bas visuel réel des lettres,
     signalé par l'utilisateur ("plus basse sur les 2 thèmes"). vertical-align:
     baseline aligne au contraire sur la ligne de base du texte (bas visuel des
     capitales, quasi confondu avec le bas des lettres pour ce titre tout en
     majuscules) — seul le padding-bottom propre à la pastille (le "dessous" de
     son propre texte interne) dépasse encore légèrement sous cette ligne,
     dépassement mineur et volontaire (cohérent avec un badge/pastille, pas un
     défaut d'alignement). */
  vertical-align: baseline;
  padding: 5px 12px 4px;
  border-radius: 8px;
  line-height: 1;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}
/* 2026-07-29 — date de dernière modif de variables.js, à côté (hors) de la
   pastille .hero-version ci-dessus : simple texte italique, pas de fond/pastille
   propre — même vertical-align:baseline que .hero-version pour rester aligné
   sur le titre plutôt que de "flotter" au-dessus/dessous. */
.hero-version-date {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  opacity: 0.75;
}
.hero-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-bottom: 26px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}
.hero-inspi-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(120,180,255,0.55);
  margin-bottom: 10px;
  border-left: 2px solid rgba(120,180,255,0.35);
  padding-left: 10px;
}
.hero-inspi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.hero-inspi-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-inspi-buy {
  display: block;
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  transition: opacity 0.2s, color 0.2s;
}
.hero-inspi-buy:hover {
  opacity: 1;
  color: var(--blue);
}
/* 2026-07-17 — layout partagé uniquement, cf. note identique §BIOMES/§MISSIONS. */
.hero-inspi-card {
  position: relative;
  overflow: hidden;
}
.hero-inspi-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  opacity: 1;
}
/* 2026-07-19 — effet de survol souris (fondu d'opacité) retiré sur demande
   explicite : les 3 images de l'intro (.hero-inspi-grid) restent statiques. */
.hero-inspi-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 12px 10px;
  background: linear-gradient(to top, rgba(4,10,22,0.92) 0%, transparent 100%);
}
.hero-inspi-name {
  font-family: var(--font-title);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: rgba(220,200,140,0.95);
  line-height: 1.2;
}
.hero-inspi-sub {
  font-size: 9px;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  opacity: 0.75;
  margin-top: 2px;
}
.hero-inspi {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 22px;
  border-left: 2px solid rgba(120,180,255,0.35);
  padding-left: 12px;
  line-height: 1.6;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
.hero-inspi em { color: rgba(220,200,140,0.85); font-style: normal; }
.hero-tagline {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.8;
  /* 2026-07-20 — 420px puis 720px ne couvraient encore qu'une fraction de
     .container (1100px) ; le texte étant désormais plus volubile (plusieurs
     paragraphes via <br><br>), on utilise toute la largeur disponible
     (.hero-inner est en grid-template-columns: 1fr, donc pas de colonne voisine
     à préserver). */
  max-width: 100%;
  margin-bottom: 36px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
/* 2026-07-17 — layout partagé uniquement, cf. note identique §BIOMES/§MISSIONS. */
.stats-bar {
  display: flex;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.stat-item {
  flex: 1;
  padding: 18px 20px;
  text-align: center;
  /* 2026-07-31 — sans ceci, `min-width: 50%` (media query ≤900px plus bas)
     s'appliquait à la boîte de CONTENU seule ; les 40px de padding horizontal
     s'ajoutaient PAR-DESSUS, donc 2 items à 50% dépassaient 100% de la largeur
     disponible et le flex-wrap les repoussait chacun sur sa propre ligne — colonne
     unique au lieu de 2 par ligne, invisible avec l'ancien total de 3 items mais
     flagrant avec les 5 items actuels (Langues/Thèmes graphiques ajoutés). */
  box-sizing: border-box;
}
.stat-num {
  font-family: var(--font-title);
  font-size: 38px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.stat-label {
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ─── HERO VISUAL (supprimé) ─────────────────────────────────── */

/* ─── BIOMES ─────────────────────────────────────────────────── */
.biomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 44px;
}
/* 2026-07-17 — layout partagé uniquement (grid/flex/tailles/structure image).
   Tout ce qui distingue visuellement les thèmes (fond, bordure, rayon, couleurs
   de survol, teintes des .biome-tag) est parti dans css/themes/bleu.css et
   css/themes/medieval.css — cf. CONTEXT.md §32. Ce fichier reste le tronc commun :
   toute règle ici s'applique aux deux thèmes. */
.biome-card {
  overflow: hidden;
}
/* 2026-07-19 — effets de survol souris (ombre portée + zoom bannière) retirés
   sur demande explicite : les images de "Six biomes à connecter" restent statiques. */

/* Bannière image */
.biome-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
}
.biome-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.biome-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,12,20,0.88) 0%, rgba(7,12,20,0.10) 60%);
  display: flex;
  align-items: flex-end;
  padding: 14px 18px;
}

/* Corps texte — layout partagé, couleurs déportées dans les CSS de thème */
.biome-body { padding: 18px 20px 20px; }
.biome-name { font-family: var(--font-title); font-size: 26px; letter-spacing: 0.06em; line-height: 1; }
.biome-desc { font-size: 12px; line-height: 1.65; }
.biome-tag  { display: inline-block; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; margin-top: 12px; }

/* ─── CREATURES ──────────────────────────────────────────────── */
.creatures-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 44px;
}
/* 2026-07-17 — layout partagé uniquement, cf. note identique §BIOMES/§MISSIONS/§FACTIONS. */
.creature-card {
  overflow: hidden;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.creature-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.4); }
.creature-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.creature-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
/* Zoom au hover retiré (2026-07-18, demande utilisateur) — même traitement que
   .gallery-img ci-dessus : plus aucun scale() sur .creature-banner-img au survol. */
.creature-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,12,20,0.88) 0%, rgba(7,12,20,0.10) 60%);
  display: flex;
  align-items: flex-end;
  padding: 14px 18px;
}
.creature-name { font-family: var(--font-title); font-size: 26px; letter-spacing: 0.06em; line-height: 1; }
.creature-desc { font-size: 12px; line-height: 1.65; }

/* ─── GAMEPLAY STEPS ─────────────────────────────────────────── */
.gameplay-ui-preview {
  margin-top: 36px;
  text-align: center;
}
.gameplay-ui-preview img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(120,180,255,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.gameplay-ui-caption {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.55;
  margin-top: 10px;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px;
  counter-reset: steps;
}
/* 2026-07-17 — layout partagé uniquement, cf. note identique §MISSIONS.
   2026-07-19 : passage en grid (icon+title sur la même ligne, desc en dessous
   pleine largeur). Fonctionne pour les 2 thèmes : en bleu, .internal-parchment
   est display:contents (cf. themes/bleu.css) donc step-icon/title/desc
   deviennent des enfants grid directs de .step-card ; en ancien,
   .internal-parchment est une vraie boîte (bordure manuscrit), donc le même
   grid est redéclaré sur elle (cf. themes/medieval.css), .step-card restant
   un simple conteneur single-cell. */
.step-card {
  counter-increment: steps;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "desc desc";
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
}
.step-icon  { grid-area: icon; font-size: 28px; margin-bottom: 0; }
.step-title { grid-area: title; font-family: var(--font-title); font-size: 21px; letter-spacing: 0.06em; margin-bottom: 0; }
.step-desc  { grid-area: desc; font-size: 12px; line-height: 1.65; }

/* ─── SCORE PILLS ────────────────────────────────────────────── */
.score-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.score-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
}
.score-pill-pts { font-family: var(--font-title); font-size: 26px; letter-spacing: 0.04em; line-height: 1; }
.score-pill-label { font-size: 11px; letter-spacing: 0.08em; }

/* ─── KBD STRIP (raccourcis) ─────────────────────────────────────
   2026-07-15 : passage d'une ligne flex dense (wrap serré, aucune séparation
   visuelle entre raccourcis) à une grille de "cartes" — chaque raccourci reçoit
   son propre fond/liseré/padding, avec un espacement généreux entre elles.
   Liste complétée à la même occasion (zoom +/-, SHIFT accélération, SHIFT+ESPACE
   super-immersif, ESC ajouté à côté de H) pour rester exhaustive vis-à-vis des
   raccourcis réellement actifs (cf. scene.js::keydown). */
.kbd-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px 16px;
  margin-top: 20px;
  /* Pas de max-width propre : occupe toute la largeur de .container, comme
     .score-pills juste au-dessus — largeur cohérente entre les deux rubriques
     (signalé 2026-07-15, la valeur précédente de 920px créait un écart visible).
     border-top/padding-top retirés (2026-07-15) : la séparation visuelle est
     désormais portée par le titre "CONTRÔLES CLAVIER" (.section-title) placé
     juste au-dessus, qui porte lui-même ce border-top. */
}
.kbd-strip-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
/* Les <kbd> d'un même raccourci (ex. Z Q S D + flèches, ou SHIFT+ESPACE) restent
   groupés sur leur propre ligne si besoin, jamais mélangés avec le texte. */
.kbd-strip-item .kbd-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Variante empilée (ZQSD + flèches) : deux lignes de 4 touches au lieu d'un
   seul groupe qui wrappe de façon imprévisible selon la largeur disponible. */
.kbd-strip-item .kbd-group--stacked {
  flex-direction: column;
  gap: 4px;
}
.kbd-strip-item .kbd-row {
  display: inline-flex;
  gap: 6px;
}
/* Fix débordement/texte tronqué (signalé 2026-07-15, ex. "Z Q S D telecame…") :
   par défaut un enfant flex ne peut pas rétrécir sous la largeur de son contenu
   (min-width:auto implicite), donc le texte débordait au lieu de passer à la
   ligne quand le groupe de <kbd> voisin prenait déjà beaucoup de place. */
.kbd-strip-item span:not(.kbd-group) {
  min-width: 0;
  flex: 1 1 auto;
}
/* ─── POPULATION STRIP (variété des personnages, créatures) ────── */
.population-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.population-group { flex: 1; min-width: 240px; }
.population-group-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.population-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.population-tag {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
}
.population-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 640px;
}

.kbd-strip kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 3px 6px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1;
}

/* ─── FACTIONS ───────────────────────────────────────────────── */
.factions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 44px;
}
/* 2026-07-17 — layout partagé uniquement (grid/structure/tailles), cf. note
   identique §BIOMES/§MISSIONS. Fond/bordure/rayon/couleurs déportés dans
   css/themes/bleu.css et css/themes/medieval.css (cf. CONTEXT.md §32). */
.faction-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faction-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.45); }
.faction-img {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Replace this block with an <img> tag when the screenshots are ready */
}
.faction-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.faction-name { font-family: var(--font-title); font-size: 32px; letter-spacing: 0.06em; margin-bottom: 10px; }
.faction-desc { font-size: 13px; line-height: 1.70; }
.faction-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-top: 18px;
}

/* ─── MISSIONS ───────────────────────────────────────────────── */
.missions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 44px;
}
/* 2026-07-17 — layout partagé uniquement, cf. note identique §BIOMES ci-dessus. */
.mission-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.mission-icon { font-size: 26px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.mission-name { font-family: var(--font-title); font-size: 17px; letter-spacing: 0.05em; margin-bottom: 6px; }
.mission-desc { font-size: 11px; line-height: 1.6; }

/* ─── AUDIO ──────────────────────────────────────────────────── */
.audio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 44px;
}
/* 2026-07-17 — layout partagé uniquement, cf. note identique §MISSIONS. */
.audio-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.audio-icon { font-size: 26px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.audio-name { font-family: var(--font-title); font-size: 17px; letter-spacing: 0.05em; margin-bottom: 6px; }
.audio-desc { font-size: 11.5px; line-height: 1.6; }
/* 2026-08-02 — demande explicite : "Une voix qui commente la partie" (clé
   audio.voice) sort de .audio-grid pour devenir sa propre sous-rubrique, avec
   un gros titre H2 (.section-title, cf. index.php).
   2026-08-02 (v2) — 3 retours explicites sur la v1 (wrapper .audio-solo en
   flex, icône 34px à côté du titre, section-sub plafonné à 640px) :
   1) icône retirée — plus de .audio-solo-icon, plus de wrapper flex (le H2
      .audio-solo-title ci-dessous porte directement la marge, comme
      n'importe quel h2.section-title de rubrique) ;
   2) le H2 doit avoir EXACTEMENT la même typo que les autres titres de
      rubrique — la règle générique `.section-title` (presentation.css,
      clamp(36px, 5vw, 60px)) suffit donc seule, plus d'override de
      font-size/margin-bottom ici (la v1 réduisait à tort à 26-38px) ;
   3) le paragraphe doit utiliser davantage la largeur de page — le plafond de
      640px est retiré, `.section-sub` retrouve son max-width:100% générique
      (presentation.css) comme le sous-titre principal de la rubrique
      au-dessus.
   2026-08-02 (v3) — demande explicite : la bordure haute séparant les 4
   parchemins de ce titre est retirée (jugée superflue une fois le reste
   validé) — seule la marge haute demeure pour l'espacement. */
.audio-solo-title {
  margin-top: 44px;
}

/* ─── GALLERY ────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(320px, auto);
  gap: 14px;
  margin-top: 44px;
}
/* 2026-07-17 — layout partagé uniquement, cf. note identique §BIOMES/§MISSIONS. */
.gallery-card {
  position: relative;
  overflow: hidden;
}
.gallery-scene { position: absolute; inset: 0; transition: transform 0.6s ease; }
.gallery-card:hover .gallery-scene { transform: scale(1.06); }

.scene-automne {
  background:
    radial-gradient(ellipse 55% 45% at 25% 65%, rgba(200,110,20,0.7) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 72% 35%, rgba(160,80,10,0.6) 0%, transparent 50%),
    radial-gradient(ellipse 80% 65% at 50% 95%, rgba(80,35,5,0.8) 0%, transparent 65%),
    linear-gradient(170deg, #1c1005 0%, #341a08 45%, #1c1005 100%);
}
.scene-cote {
  background:
    radial-gradient(ellipse 75% 55% at 50% 55%, rgba(30,90,160,0.6) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 15% 80%, rgba(15,55,110,0.7) 0%, transparent 55%),
    linear-gradient(170deg, #06121f 0%, #0e2038 50%, #081826 100%);
}
.scene-hiver {
  background:
    radial-gradient(ellipse 65% 50% at 50% 25%, rgba(200,225,255,0.16) 0%, transparent 58%),
    radial-gradient(ellipse 45% 55% at 82% 72%, rgba(130,165,220,0.12) 0%, transparent 55%),
    linear-gradient(170deg, #060812 0%, #0c1422 50%, #080a16 100%);
}
.scene-village {
  background:
    radial-gradient(ellipse 50% 55% at 38% 62%, rgba(200,120,35,0.55) 0%, transparent 52%),
    radial-gradient(ellipse 40% 38% at 72% 38%, rgba(240,140,30,0.4) 0%, transparent 48%),
    linear-gradient(170deg, #120b04 0%, #201208 50%, #140d04 100%);
}
.scene-nuit {
  background:
    radial-gradient(ellipse 45% 40% at 50% 18%, rgba(70,95,180,0.35) 0%, transparent 48%),
    radial-gradient(ellipse 65% 65% at 50% 50%, rgba(8,16,50,0.9) 0%, transparent 72%),
    linear-gradient(170deg, #01020c 0%, #04060f 100%);
}
.gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
/* Zoom au hover retiré (2026-07-18, demande utilisateur) — .gallery-img garde sa
   transition transform pour ne pas casser d'autres usages éventuels, mais plus
   aucune règle ne déclenche de scale() au survol de .gallery-card. */
.gallery-card--contain {
  align-self: start;
  height: auto;
}
.gallery-card--contain .gallery-img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #05070c;
}
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,12,20,0.92) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 18px 20px;
}
.gallery-label { font-family: var(--font-title); font-size: 20px; letter-spacing: 0.08em; }
.gallery-label span { display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.20em; margin-bottom: 3px; }

/* ─── DAY / NIGHT ───────────────────────────────────────────── */
.daynight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 44px;
}
/* 2026-07-17 — layout partagé uniquement, cf. note identique §BIOMES. */
.daynight-card {
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.daynight-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.45); }
.daynight-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.daynight-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.daynight-icon { font-size: 36px; line-height: 1; }
.daynight-name {
  font-family: var(--font-title);
  font-size: 28px;
  letter-spacing: 0.06em;
}
.daynight-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.daynight-list li {
  font-size: 12px;
  line-height: 1.55;
}

/* ─── EDA SHOWCASE (personnalisation extrême) ──────────────────── */
.eda-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 44px;
}
/* 2026-07-17 — layout partagé uniquement, cf. note identique §BIOMES/§MISSIONS. */
.eda-showcase-card {
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.eda-showcase-img {
  width: 100%;
  height: auto;
  display: block;
}
.eda-showcase-tab {
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.eda-showcase-label { font-family: var(--font-title); font-size: 29px; letter-spacing: 0.05em; margin-bottom: 8px; }
.eda-showcase-desc { font-size: 11px; line-height: 1.55; }

/* ─── MULTIPLAYER ────────────────────────────────────────────── */
/* 2026-07-19 — align-items center→start : .multi-inner ne contient plus QUE
   la 1ère sous-rubrique (titre "Bâtissez ensemble"/sub/features) + .room-demo,
   les 2 sous-rubriques suivantes ont été sorties dans .multi-below (pleine
   largeur, en dessous) pour que .room-demo reste calé EN FACE de la 1ère
   sous-rubrique au lieu de "flotter" centré sur 3 sous-rubriques empilées. */
.multi-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
/* 2026-07-19 — "Multiplayer" (title1, kicker) / "Bâtissez ensemble" (title2, vrai
   titre) : la règle générale .section-title:has(+ .section-title) ne laisse que
   4px entre les deux (pensée pour un bloc de titre 2 lignes soudé). Ici les 2
   niveaux ont des rôles différents (titre au-dessus / sous-titre en dessous) et
   ont besoin d'un vrai espacement — override scopé à #multi uniquement. */
#multi .section-title:has(+ .section-title) { margin-bottom: 14px; }
.multi-feature-list { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.multi-feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.multi-feature-list li::before { content: '◆'; color: var(--blue); font-size: 8px; flex-shrink: 0; margin-top: 5px; }
/* 2026-07-19 — sous-rubriques "Partagez vos captures"/"Enregistrez vos parties"
   + bouton, sorties de .multi-inner (cf. note ci-dessus) : d'abord contraintes
   par erreur à la largeur de la colonne de texte (calc(50% - 30px)), corrigé
   sur retour explicite ("pas en pleine largeur à l'instar de toute la page") —
   .multi-below n'a plus de max-width, occupe toute la largeur du .container
   comme le reste des rubriques de la prez. */
/* 2026-07-17 — layout partagé uniquement, cf. note identique §BIOMES/§MISSIONS. */
.room-demo { padding: 28px; }
.room-demo-title { font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 12px; }
.room-code {
  font-family: var(--font-title);
  font-size: 60px;
  letter-spacing: 0.16em;
  text-align: center;
  line-height: 1;
  margin: 10px 0;
}
.room-status { font-size: 10px; letter-spacing: 0.14em; text-align: center; margin-top: 4px; }
.room-players { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.player-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.room-scores { margin-top: 18px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.room-scores-label { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; }
.room-score-row { display: flex; justify-content: space-between; align-items: center; }
.room-score-name { font-size: 13px; }
.room-score-pts  { font-family: var(--font-title); font-size: 22px; }

/* ─── HIGHSCORES ─────────────────────────────────────────────── */
/* 2026-07-17 — layout partagé uniquement, cf. note identique §BIOMES/§MISSIONS.
   Fond/bordure/rayon/couleurs déportés dans css/themes/bleu.css et
   css/themes/medieval.css (cf. CONTEXT.md §32). */
.hs-list { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; }
.hs-card {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 0 20px;
  align-items: center;
  transition: border-color 0.2s, background 0.2s;
}

/* Rang : gros numéro centré (pas de médaille — retirée à la demande utilisateur). */
.hs-rank-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hs-rank {
  font-family: var(--font-title);
  font-size: 46px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
}

.hs-main {}

/* Nom + date : bien plus visibles qu'avant (16px→20px, date sortie du petit
   texte gris pour devenir une ligne propre en bleu clair). */
.hs-name { font-family: var(--font-title); font-size: 27px; font-weight: 800; margin-bottom: 4px; letter-spacing: 0.07em; }
.hs-date {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* "Tuiles posées" : seule sur sa ligne, en gros — la stat vedette de la carte. */
.hs-headline-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 400;
}
.hs-headline-stat .icon { font-size: 31px; }

/* Toutes les AUTRES petites stats (lignes, bateaux, comètes, détail des biomes) :
   un seul flux .hs-meta, un seul style, plus petit que la stat vedette.
   row-gap réduit de 28% (14px→10px) : espacement vertical entre lignes wrappées
   uniquement — column-gap (entre stats sur une même ligne) inchangé. */
.hs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 9px;
  margin-bottom: 6px;
}
.hs-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-family: 'Space Mono';
  font-weight: 400;
}
/* Icônes des petites stats : badge hexagonal (thème du jeu), même bleu que .player-dot.active.
   2026-07-19 — remplace le rond d'origine (border-radius:50%) sur demande explicite.
   ⚠️ Historique des essais ratés sur ce badge (3 piièges vécus successivement, à ne
   plus reproduire) :
   1) clip-path hexagonal DIRECTEMENT sur .icon tronque l'emoji lui-même dès qu'il
      déborde du pincement 25%/75% (la vraie proportion d'un hexagone).
   2) adoucir le pincement (15%/85%) évite le rognage mais ne ressemble plus à un
      hexagone (retour utilisateur).
   3) fond hexagonal sur ::before + BORDURE CSS classique (`border: 2px solid`) :
      la bordure calculée sur la boîte carrée d'origine se fait ensuite retailler EN
      BIAIS par le clip-path sur les 4 côtés obliques de l'hexagone — son épaisseur
      visuelle y devient incohérente (parfois quasi nulle, aspect "pointillé/cassé"
      signalé par l'utilisateur), alors qu'elle reste correcte sur les 2 côtés plats.
   Solution retenue : DEUX hexagones clippés superposés (classique en CSS pur, pas
   de propriété `border`) — ::before = hexagone PLEIN à la couleur de bordure, un peu
   plus grand ; ::after = hexagone PLEIN à la couleur de fond, inset de l'épaisseur de
   bordure voulue. Le anneau visible entre les deux est alors une épaisseur ABSOLUE
   uniforme sur les 6 côtés, contrairement à `border`+clip-path. `.icon` lui-même ne
   porte plus rien (ni fond ni bordure) : seul le layout/l'emoji, jamais recadré. */
.hs-meta-item .icon {
  position: relative;
  z-index: 0; /* confine les z-index négatifs des pseudo-éléments à .icon (sinon ils
                 s'échappent jusqu'au contexte d'empilement du .hs-card parent et se
                 retrouvent peints sous le fond parchemin de la carte — invisibles). */
  width: 40px; /* 2026-07-19 — élargi (34→40px, hauteur inchangée), même traitement
                  que .hs-rank (52→62px) sur demande explicite, dans les 2 thèmes
                  (règle non thémée, partagée). */
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.hs-meta-item .icon::before,
.hs-meta-item .icon::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hs-meta-item .icon::before {
  inset: 0;
  z-index: -2;
  /* couche du BAS = "bordure" (couleur pleine, fixée par thème) */
}
.hs-meta-item .icon::after {
  inset: 2px;
  /* couche du DESSUS = "fond" (couleur pleine, fixée par thème), inset de 2px sur
     les 6 côtés — l'anneau visible entre ::before et ::after fait 2px partout,
     sans jamais dépendre d'une propriété `border` retaillée en biais. */
}

.hs-biome-label { font-weight: 400; }
/* Chiffres des stats (lignes/bateaux/comètes + totaux/max biomes) : Bebas Neue bleu,
   détachés de la typo Space Mono des labels. Taille +10% (22px→24px). */
.hs-stat-num, .hs-biome-total, .hs-biome-max {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 400;
}
.hs-biome-note { font-size: 10px; font-weight: 600; }

.hs-score-col { text-align: right; }
/* 2026-07-31 — classement reclassé par efficacité (score/tuile) au lieu du score
   brut (demande explicite), affichée sur CHAQUE entrée. 2e demande (même jour) :
   hiérarchie visuelle inversée — l'efficacité devient LE gros nombre en avant
   (plus grosse que ne l'était .hs-score, 46px vs 41px), le score brut passe en
   second, réduit — même traitement discret que .hs-date sous le nom (petit
   texte, pas la typo titre). Couleurs thémées (var(--blue)/gold en bleu,
   brun/doré en ancien, cf. themes/bleu.css et themes/medieval.css) suivent le
   même transfert : c'est maintenant .hs-efficiency qui les porte. */
.hs-efficiency {
  font-family: var(--font-title);
  font-size: 46px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.hs-score {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.72;
}
.hs-empty { text-align: center; padding: 56px; font-size: 14px; margin-top: 40px; }

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 36px 0 0; }
.footer-screenshot {
  width: 100%;
  line-height: 0;
}
.footer-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-logo  { font-family: var(--font-title); font-size: 22px; letter-spacing: 0.08em; color: var(--blue); }
.footer-copy  { font-size: 11px; color: var(--text-dim); }
.footer-links-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-sep   { color: var(--border); font-size: 11px; }
.footer-link  { font-size: 11px; color: var(--text-dim); text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; }
.footer-link:hover { color: var(--blue); }
.footer-cta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 18px;
  background: var(--blue-mid);
  border: 1px solid var(--blue);
  border-radius: 6px;
  color: var(--blue);
  text-decoration: none;
  transition: background 0.2s;
  margin-left: 6px;
}
.footer-cta:hover { background: rgba(120,180,255,0.40); }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
/* Nav mobile — dropdown + hamburger, seuil volontairement bas (téléphone/petite
   tablette) pour ne jamais chevaucher la zone où les liens tiennent en 2 lignes. */
@media (max-width: 860px) {
  .nav-toggle { display: flex; order: 1; margin-left: auto; }
  .nav-links {
    display: none;
    flex-wrap: nowrap;
    position: fixed;
    top: 59px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 59px);
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
    padding: 6px 24px 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 13px 2px;
    font-size: 12px;
  }
  #theme-toggle { order: 2; }
  #lang-toggle { order: 2; }
  .nav-cta { order: 3; }
  .hero-content { padding-top: 56px; }
}
/* Nav compact forcée par JS (cf. script en bas de page) dès que la barre
   dépasserait 2 lignes — mesuré réellement (nombre de rangées de <li>),
   pas un seuil px deviné. Mêmes règles que le breakpoint 860px ci-dessus. */
body.nav-compact .nav-toggle { display: flex; order: 1; margin-left: auto; }
body.nav-compact .nav-links {
  display: none;
  flex-wrap: nowrap;
  position: fixed;
  top: 59px; left: 0; right: 0;
  flex-direction: column;
  gap: 0;
  max-height: calc(100vh - 59px);
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
  padding: 6px 24px 18px;
}
body.nav-compact .nav-links.open { display: flex; }
body.nav-compact .nav-links li { width: 100%; }
body.nav-compact .nav-links a {
  display: block;
  padding: 13px 2px;
  font-size: 12px;
}
body.nav-compact #theme-toggle { order: 2; }
body.nav-compact #lang-toggle { order: 2; }
body.nav-compact .nav-cta { order: 3; }
body.nav-compact .hero-content { padding-top: 56px; }
@media (max-width: 900px) {
  .hero-inner, .multi-inner { grid-template-columns: 1fr; }
  .biomes-grid, .missions-grid, .audio-grid, .hero-inspi-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid  { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr; }
  /* 2026-07-20 — fix cartes "psyché-LSD"/été/nordique minuscules et disproportionnées
     en largeur réduite : 5 des 8 cartes (automne/amiga/ega/cga/apple2) portent un
     style="grid-column:span 2" INLINE (index.php), qui bat toujours une règle de
     classe sans !important — l'ancienne règle ci-dessous (:nth-child(1) seul, sans
     !important) ne neutralisait donc RIEN en pratique. Avec 1 seule colonne explicite
     déclarée mais des items réclamant un span 2, le navigateur crée une 2e colonne
     IMPLICITE (auto, dimensionnée sur le contenu) : les cartes non spannées (été/
     nordique/psyché-LSD) se retrouvent alors écrasées dans une colonne résiduelle
     minuscule au lieu de la pleine largeur. Fix : !important sur TOUTES les cartes. */
  .gallery-card { grid-column: span 1 !important; }
  .stats-bar { flex-wrap: wrap; }
  .stat-item { min-width: 50%; }
  .footer-inner { flex-direction: column; text-align: center; }
  .hs-card { grid-template-columns: 60px 1fr auto; padding: 16px 16px; }
  .hs-rank { font-size: 32px; }
  .hs-name { font-size: 17px; }
  .hs-efficiency { font-size: 31px; }
  .hs-score { font-size: 11px; }
  .hs-headline-stat { font-size: 15px; }
  .hs-headline-stat .icon { font-size: 26px; }

  .hero-banner { height: 50vh; }
  .hero-subtitle { white-space: normal; }
}
@media (max-width: 600px) {
  .biomes-grid, .missions-grid, .audio-grid, .steps-grid, .hero-inspi-grid, .creatures-grid { grid-template-columns: 1fr; }
  .hs-meta { gap: 8px; }

  /* Stats-bar en grille 2×2 sur petits écrans */
  .stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .stat-item {
    min-width: unset;
    border-right: none;
  }
  .stat-item:nth-last-child(-n+2) { border-bottom: none; }

  nav { gap: 10px; padding: 10px 14px; }
  .nav-logo { font-size: 38px; }
  /* 2026-07-28 — display:none retiré sur demande explicite ("conserve la
     pastille de version, meme en mobile 900px") : la pastille reste visible à
     toutes les largeurs, seule sa taille est réduite ici pour rester
     proportionnée à côté du titre réduit. */
  .hero-version { font-size: 11px; padding: 4px 9px 3px; margin-left: 10px; }
  /* 2026-07-29 — même réduction proportionnée que .hero-version ci-dessus. */
  .hero-version-date { font-size: 11px; margin-left: 7px; }
  .nav-cta { padding: 8px 14px; font-size: 10px; }
}

/* ─── TOAST clavier M/T (2026-07-31) ────────────────────────────────────────
   Confirmation visuelle des touches M (son) / T (voix) sur la prez — cette
   page n'a pas le popup central du jeu (#scorePopup, scorePopup.js), donc sans
   ceci la coupure (M ou T) restait totalement imperceptible : pas de son
   (normal, silence voulu à la coupure) ET pas de retour visuel. S'affiche sur
   LES DEUX directions (contrairement à la confirmation vocale, qui ne parle
   qu'à la réactivation) pour que chaque appui produise toujours un effet
   perceptible. Couleurs héritées du thème actif (--bg-card/--text/--gold),
   pas de nouvelle variable.
   2026-08-01 — demande explicite : "les helpers (touches T/M) doivent être
   alignés au centre de l'écran : en thème médiéval avec le cadre, ils sont
   masqués". Double correctif :
   1. Repositionné du bas de l'écran (bottom:28px) vers le centre exact
      (top/left:50%, transform:translate(-50%,-50%)) — demande explicite,
      appliqué aux 2 thèmes (pas de comportement thème-spécifique demandé).
   2. z-index relevé 9999 → 100000 : en thème médiéval, le cadre décoratif
      (#prezFooterBanner/etc., cf. CONTEXT.md §39) est en z-index 99999, donc
      strictement au-dessus de l'ancien 9999 du toast — c'est ce qui le
      masquait complètement en bas d'écran (zone recouverte par la bande
      basse du cadre). 100000 aligné sur la convention déjà en place pour
      #lutHelpTooltip (cf. javascript/helpTooltip.js, CONTEXT.md §39) :
      tout élément devant rester visible par-dessus le cadre utilise ce
      même palier. */
.prez-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.03em;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.prez-toast--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* 2026-08-03 — demande explicite : uniquement en thème médiéval, les popups
   type "voix activée"/"voix désactivée" (#prez-toast) ne doivent avoir aucun
   text-shadow — le glow clair EnchantedLand (hérité de `body`, pensé pour la
   lisibilité sur le fond carte/parchemin) rend le texte flou/illisible ici,
   posé sur son propre fond opaque (--bg-card) qui n'en a pas besoin. */
[data-theme="ancien"] .prez-toast {
  text-shadow: none;
}