/* ─────────────────────────────────────────────────────────────────────────
   Le Sang et le Sel — feuille de l'écran.
   Parti pris : pierre, parchemin, cire, fer. Une seule ambiance, sombre,
   éclairée à la bougie. Rien de blanc, rien d'arrondi sans raison.
   ───────────────────────────────────────────────────────────────────────── */

/* Les teintes, les polices et le rayon viennent de jeu/jetons.css. */
:root {
  --gouttiere: clamp(0.75rem, 2vw, 1.4rem);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: var(--or); text-decoration-color: color-mix(in srgb, var(--echelon-5) 50%, transparent); }
a:hover { color: var(--parchemin); }
a:visited { color: var(--or-sourd); }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Sur un téléphone à encoche, rien ne passe sous la barre d'accueil. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height: 100dvh;
  font-family: var(--police-corps);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
  line-height: 1.5;
  color: var(--texte);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--pierre-4) 0%, transparent 60%),
    radial-gradient(80% 60% at 50% 110%, var(--pierre-3) 0%, transparent 70%),
    var(--pierre-1);
  background-attachment: fixed;
}

/* Le grain de la pierre, posé une fois pour toute la page. */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  z-index: 100;
}

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

button { font: inherit; color: inherit; cursor: pointer; }
/* Toute commande d'un écran fait au moins 44 px de haut : la cible tactile minimale (les liens dans le texte, les petits pas et les chiffres dépliables ont leur propre zone). */
.page button:not(.lien):not(.pas):not(.chiffre):not(.dialogue__fermer) { min-height: 44px; }

/* ── Titres ─────────────────────────────────────────────────────────────── */

.titre-jeu {
  font-family: var(--police-titre);
  font-size: clamp(2.2rem, 7vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--parchemin);
  text-shadow: var(--ombre-texte), 0 0 40px color-mix(in srgb, var(--echelon-5) 18%, transparent);
  text-wrap: balance;
}

.colonne__titre,
.bloc__titre {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-sourd);
  margin: 0 0 var(--e-2);
  padding-bottom: var(--e-1);
  border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 22%, transparent);
}

/* ── Création ───────────────────────────────────────────────────────────── */

/* La page tient dans l'écran : une barre d'étapes en haut, le portrait à gauche,
   une seule étape à droite, les boutons toujours au même endroit en bas. */
.creation {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
}

.creation::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pierre-0) 62%, transparent) 0%, color-mix(in srgb, var(--pierre-0) 34%, transparent) 43%, color-mix(in srgb, var(--pierre-0) 60%, transparent) 100%),
    url("../images/accueil-background.webp") center center / cover no-repeat;
  pointer-events: none;
}

@media (max-width: 700px) {
  .creation::before {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 55%, transparent) 0%, color-mix(in srgb, var(--pierre-0) 35%, transparent) 48%, color-mix(in srgb, var(--pierre-0) 70%, transparent) 100%),
      url("../images/accueil-background-mobile.webp") center top / cover no-repeat;
  }

  .objectif {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .objectif__titre,
  .objectif__progression,
  .objectif__gain,
  .objectif__statut {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .objectif__gain,
  .objectif__statut {
    grid-column: 1 / -1;
  }

  .objectif__gain {
    margin-left: 0;
    white-space: normal;
    justify-self: start;
  }
}

/* La barre du haut : logo, les quatre étapes, le compte. */
.creation__barre {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem var(--gouttiere);
  padding: 0.55rem var(--gouttiere);
  background: color-mix(in srgb, var(--pierre-0) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 30%, transparent);
  backdrop-filter: blur(6px);
}
.creation__barre .creation__logo { width: 6.5rem; height: auto; margin: 0; }
.creation__compte { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-1); text-align: right; }
.creation__compte .lien { font-size: var(--t-3); }
.creation__compte .refus { margin: 0; }

.creation__jalons { display: flex; justify-content: center; gap: var(--e-1); margin: 0; padding: 0; list-style: none; counter-reset: jalon; }
.creation__jalons li { counter-increment: jalon; display: flex; align-items: center; }
.creation__jalons li + li::before {
  content: "";
  width: clamp(0.8rem, 3vw, 2.4rem);
  height: 1px;
  margin: 0 var(--e-1);
  background: color-mix(in srgb, var(--echelon-5) 35%, transparent);
}
.jalon {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-1) var(--e-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  color: var(--texte-pale);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 120ms, border-color 120ms;
}
.jalon::before {
  content: counter(jalon);
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid currentColor;
  border-radius: var(--rayon-rond);
  font-size: var(--t-2);
  letter-spacing: 0;
}
.jalon:hover { color: var(--parchemin); }
.jalon[aria-current="step"] { color: var(--parchemin); border-color: color-mix(in srgb, var(--echelon-5) 45%, transparent); }
.jalon[aria-current="step"]::before { color: var(--pierre-1); background: var(--or); border-color: var(--or); }
.jalon.est-fait::before { content: "✓"; color: var(--or); }

/* Le corps : le portrait à gauche, l'étape à droite. */
.creation__corps {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) minmax(0, 3fr);
  gap: var(--gouttiere);
  width: min(100%, 92rem);
  margin: 0 auto;
  padding: var(--gouttiere);
  min-height: 0;
}

.creation__personnage { display: flex; flex-direction: column; gap: var(--e-3); min-height: 0; overflow: hidden; }

.portrait-creation {
  position: relative;
  flex: 1;
  min-height: 18rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--echelon-5) 35%, transparent);
  background: var(--pierre-0);
  box-shadow: var(--ombre-3);
}
/* Le cadre du héros avant la 3D, et pour de bon sur un appareil sans 3D : la
   même salle sombre que sous le corps en pied. */
.portrait-creation__attente { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, #2a231a 0%, #15120e 58%, #0b0b0c 100%); }
.portrait-creation__nom:empty { display: none; }
.portrait-creation__nom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--e-6) var(--e-4) var(--e-3);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pierre-0) 92%, transparent));
  color: var(--parchemin);
  font-family: var(--police-titre);
  font-size: var(--t-6);
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: var(--ombre-texte);
}

/* Le personnage en pied (jeu/createur.js), dans la salle de sa terre natale
   (jeu/decor-du-heros.js) : la toile prend tout le cadre, le héros se cadre
   sur sa hauteur et le décor remplit la largeur. */
.creation.a-le-relief .portrait-creation__attente { display: none; }
/* Le bord de la salle s'assombrit : l'œil va au héros, le nom reste lisible. */
.creation.a-le-relief .portrait-creation::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, color-mix(in srgb, var(--pierre-0) 60%, transparent) 100%);
}
.creation.a-le-relief .portrait-creation__nom { z-index: 1; }
.creation.a-le-relief .portrait-creation {
  background: radial-gradient(ellipse at 50% 38%, var(--pierre-4) 0%, var(--pierre-2) 58%, var(--pierre-0) 100%);
}
.portrait-creation__relief {
  position: absolute;
  inset: 0;
}
.portrait-creation__relief .personnage__toile { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: grab; }
.portrait-creation__relief .personnage__toile:active { cursor: grabbing; }

/* Tourner d'un quart de tour, passer du corps au visage : au clavier et au
   doigt, en plus du glisser sur la toile. */
.portrait-creation__commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2); }
.portrait-creation__commandes[hidden] { display: none; }
.portrait-creation__cadres { display: flex; gap: var(--e-1); }
.portrait-creation__commandes .jeton-mot { min-height: 44px; padding: var(--e-1) var(--e-3); font-size: var(--t-2); }
.portrait-creation__tourner { min-width: 44px; display: inline-grid; place-items: center; }
/* Plus près, plus loin : le signe seul se voit, le lecteur d'écran lit son nom.
   Trop étroite, la rangée passe les deux boutons à la ligne, ensemble. */
.portrait-creation__zoom { display: flex; gap: var(--e-1); }
.portrait-creation__commandes .portrait-creation__zoom .jeton-mot { min-width: 44px; padding: 0 var(--e-2); font-size: var(--t-5); line-height: 1; }
.portrait-creation__zoom [aria-disabled="true"] { opacity: 0.4; cursor: default; }
.portrait-creation__fleche { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Le visage dans l'étape « Nom et visage » : des jetons de mots et de teintes,
   des curseurs repliés pour affiner. */
.etape__visage { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-2); }
.etape__visage[hidden] { display: none; }
.etape__sous-titre { margin: 0; font-family: var(--police-titre); font-size: var(--t-5); letter-spacing: 0.06em; color: var(--parchemin); }
.visage-choix { display: flex; flex-direction: column; gap: var(--e-3); }
.visage-choix > .jeton-mot--large { align-self: flex-start; }
.visage-groupe { display: flex; flex-direction: column; gap: var(--e-1); }
.visage-groupe__jetons { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.visage-groupe .jeton-mot { min-height: 40px; padding: var(--e-1) var(--e-3); font-size: var(--t-3); letter-spacing: 0.04em; }
.jeton-teinte {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon-rond);
  background: var(--teinte, var(--fer));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pierre-0) 55%, transparent);
  cursor: pointer;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}
.jeton-teinte[aria-pressed="true"] { border-color: var(--or); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pierre-0) 55%, transparent), 0 0 0 2px var(--or); }
.jeton-teinte:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.visage-note { color: var(--texte); font-size: var(--t-3); }
.visage-traits { border-top: 1px solid color-mix(in srgb, var(--fer) 20%, transparent); padding-top: var(--e-2); }
.visage-traits summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-family: var(--police-titre); letter-spacing: 0.06em; color: var(--parchemin); }
.visage-trait { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: var(--e-3); align-items: center; min-height: 40px; color: var(--texte-pale); font-size: var(--t-3); }
.visage-trait input[type="range"] { width: 100%; accent-color: var(--or); }

.creation__resume {
  display: grid;
  gap: var(--e-1) var(--e-4);
  margin: 0;
  padding: var(--e-3) var(--e-4);
  background: color-mix(in srgb, var(--pierre-0) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--fer) 18%, transparent);
  border-top-color: color-mix(in srgb, var(--echelon-5) 30%, transparent);
}
.creation__resume div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--e-2); align-items: baseline; }
.creation__resume dt { font-family: var(--police-titre); font-size: var(--t-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-pale); }
.creation__resume dd { margin: 0; color: var(--parchemin); overflow-wrap: anywhere; }
.creation__repere-texte { margin: 0; padding: 0 var(--e-1); color: var(--texte); font-size: var(--t-3); line-height: 1.5; }

/* L'étape : un seul bloc, qui prend toute la hauteur qui reste. */
.creation__feuille {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--parchemin-clair) 3%, transparent), transparent 60%), color-mix(in srgb, var(--pierre-1) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--fer) 18%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--echelon-5) 35%, transparent);
  box-shadow: var(--ombre-3);
}
.etape { flex: 1; min-height: 0; overflow: auto; padding: var(--e-4) var(--e-5) var(--e-4); display: flex; flex-direction: column; gap: var(--e-4); }
.etape__titre { margin: 0; font-family: var(--police-titre); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: 0.06em; color: var(--parchemin); }
.etape__intro { margin: calc(-1 * var(--e-2)) 0 0; color: var(--texte); line-height: 1.45; max-width: 64ch; }
.etape__compteur { color: var(--or); font-family: var(--police-titre); font-size: var(--t-6); font-variant-numeric: tabular-nums; }
.etape .bloc__note { margin: var(--e-1) 0 var(--e-2); font-style: normal; color: var(--texte); font-size: var(--t-3); }
.etape .ligne-champs { align-items: flex-end; }
.etape .choix-deux { margin-top: 0; align-self: flex-end; }
.carte-trait.est-hors-compte { opacity: 0.45; }

/* Le pied : toujours au même endroit, Retour à gauche, Suivant ou Commencer à droite. */
.creation__pied {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-5);
  border-top: 1px solid color-mix(in srgb, var(--echelon-5) 25%, transparent);
  background: color-mix(in srgb, var(--pierre-0) 60%, transparent);
}
.creation__pied .refus { flex: 1; margin: 0; }
.creation__pied .sceau { margin: 0 0 0 auto; align-self: auto; }
.creation__pied #creation-retour { min-width: 7rem; }

.creation__compte-note { margin: 0; max-width: 22rem; color: var(--texte-pale); font-size: var(--t-1); line-height: 1.35; }

/* Sur téléphone : le portrait passe en bandeau, l'étape en dessous, le pied collé en bas. */
@media (max-width: 860px) {
  .creation__barre { grid-template-columns: auto 1fr; }
  .creation__barre .creation__logo { width: 4.5rem; }
  .creation__compte { grid-column: 1 / -1; align-items: center; text-align: center; }
  .creation__jalons { justify-content: flex-end; }
  .jalon { min-width: 44px; padding: var(--e-1) var(--e-2); font-size: 0; gap: 0; }
  .jalon::before { font-size: var(--t-2); }
  .jalon[aria-current="step"] { font-size: var(--t-2); gap: var(--e-2); }
  /* « Maison de départ » élargissait la barre de 27 px au-delà d'un écran de 390 :
     les traits entre étapes raccourcissent et le nom de l'étape passe à la ligne. */
  .creation__jalons { min-width: 0; }
  .creation__jalons li + li::before { width: 0.45rem; margin: 0 var(--e-0); }
  .jalon[aria-current="step"] { white-space: normal; letter-spacing: 0.06em; text-align: left; line-height: 1.15; }
  /* La création défile dans son propre bloc : html et body cachent le
     débordement horizontal, ce qui fait de body un bloc qui ne défile pas, et
     rien ne peut s'y coller. Ici le personnage et le pied restent collés. */
  .creation { height: 100dvh; overflow-x: hidden; overflow-y: auto; }
  /* Le corps prend sa hauteur : réduit à l'écran, il ne tiendrait plus le personnage collé. */
  .creation__corps { flex: none; }
  .creation__corps { grid-template-columns: 1fr; padding: var(--e-2); gap: var(--e-2); }
  .creation__personnage { overflow: visible; }
  .etape { overflow: visible; }
  .creation__personnage { display: grid; grid-template-columns: minmax(6rem, 30vw) minmax(0, 1fr); gap: var(--e-2); }
  .portrait-creation { min-height: 0; aspect-ratio: 4 / 5; flex: none; }
  /* En pied : le corps entier à gauche, la fiche et les commandes à droite.
     Pendant le visage et la terre natale, le personnage reste collé en haut
     pendant que les choix défilent dessous ; la fiche s'efface alors, les
     choix de l'étape la montrent déjà. */
  .creation.a-le-relief .creation__personnage { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
  .creation.a-le-relief .portrait-creation { grid-column: 1; grid-row: 1 / span 2; width: min(42vw, calc(36dvh * 0.56)); aspect-ratio: 0.56; }
  .creation.a-le-relief .creation__resume { grid-column: 2; grid-row: 1; }
  .creation.a-le-relief .portrait-creation__commandes { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); align-self: end; }
  .creation.a-le-relief .portrait-creation__cadres { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); }
  .creation.a-le-relief [data-tourner="-1"] { grid-column: 1; grid-row: 2; }
  .creation.a-le-relief [data-tourner="1"] { grid-column: 2; grid-row: 2; }
  .creation.a-le-relief .portrait-creation__zoom { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); }
  .creation.a-le-relief .portrait-creation__commandes .jeton-mot { padding: var(--e-1) var(--e-2); font-size: var(--t-1); letter-spacing: 0.04em; }
  .creation.a-le-relief .portrait-creation__commandes .portrait-creation__zoom .jeton-mot { font-size: var(--t-5); }
  .creation.a-le-relief[data-etape="identite"] .creation__personnage,
  .creation.a-le-relief[data-etape="origine"] .creation__personnage {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: calc(-1 * var(--e-2)) calc(-1 * var(--e-2)) 0;
    padding: var(--e-2) var(--e-2);
    background: var(--pierre-0);
    border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 25%, transparent);
  }
  .creation.a-le-relief[data-etape="identite"] .creation__resume,
  .creation.a-le-relief[data-etape="origine"] .creation__resume { display: none; }
  .creation.a-le-relief[data-etape="identite"] .portrait-creation__commandes,
  .creation.a-le-relief[data-etape="origine"] .portrait-creation__commandes { grid-row: 1 / span 2; align-self: center; }
  .creation.a-le-relief[data-etape="identite"] .portrait-creation__cadres,
  .creation.a-le-relief[data-etape="origine"] .portrait-creation__cadres { grid-template-columns: 1fr; }
  .visage-trait { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); }
  .portrait-creation__nom { padding: var(--e-5) var(--e-2) var(--e-2); font-size: var(--t-2); }
  .creation__resume { padding: var(--e-2) var(--e-2); align-content: start; }
  .creation__resume div { grid-template-columns: 6.6rem minmax(0, 1fr); gap: var(--e-2); }
  .creation__resume dt { font-size: var(--t-1); letter-spacing: 0.1em; }
  .creation__resume dd { font-size: var(--t-3); }
  .creation__repere-texte { display: none; }
  /* Le lien du compte et sa note se lisent à la première étape : redits à chaque étape, ils prenaient 79 px. */
  .creation:not([data-etape="identite"]) .creation__compte { display: none; }
  .creation__feuille { min-height: 60dvh; }
  .etape { padding: var(--e-4) var(--e-4) var(--e-4); }
  .etape .choix-deux { align-self: flex-start; }
    .creation__pied { position: sticky; bottom: 0; padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .creation__pied .refus { flex-basis: 100%; order: -1; }
}

/* Le téléphone couché (16/10/2026) : le héros à gauche sur la hauteur de l'écran, l'étape défile à droite. Collé en
   haut comme sur le téléphone droit, le bloc du personnage prenait la moitié des 390 px pour un héros de 77 px, et le
   prénom passait sous le pli. */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 520px) {
  /* La barre tient sur une ligne : logo, étapes, lien du compte (171 px de haut avant, sur 390). La note du compte se
     relit dans le bandeau du jeu, qui propose de lier la partie à Google. */
  .creation__barre { grid-template-columns: auto minmax(0, 1fr) auto; padding-block: 0.3rem; }
  .creation__barre .creation__logo { width: 3.2rem; }
  .creation__compte { grid-column: auto; align-items: flex-end; text-align: right; }
  .creation__compte-note { display: none; }
  .creation__corps { grid-template-columns: minmax(9rem, 30vw) minmax(0, 1fr); align-items: start; }
  .creation.a-le-relief .creation__personnage,
  .creation.a-le-relief[data-etape="identite"] .creation__personnage,
  .creation.a-le-relief[data-etape="origine"] .creation__personnage {
    position: sticky; top: var(--e-2); z-index: 1;
    display: flex; flex-direction: column; gap: var(--e-1);
    height: calc(100dvh - 5.5rem); margin: 0; padding: 0; border: 0; background: none;
  }
  .creation.a-le-relief .portrait-creation { width: 100%; flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
  .creation.a-le-relief .creation__resume { display: none; }
  .creation.a-le-relief .portrait-creation__commandes,
  .creation.a-le-relief[data-etape="identite"] .portrait-creation__commandes,
  .creation.a-le-relief[data-etape="origine"] .portrait-creation__commandes {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-0); align-self: stretch;
  }
  .creation.a-le-relief .portrait-creation__cadres,
  .creation.a-le-relief[data-etape="identite"] .portrait-creation__cadres,
  .creation.a-le-relief[data-etape="origine"] .portrait-creation__cadres { grid-column: 1 / -1; grid-row: 1; grid-template-columns: 1fr 1fr; }
  .creation.a-le-relief [data-tourner="-1"] { grid-column: 1; grid-row: 2; }
  .creation.a-le-relief .portrait-creation__zoom { grid-column: 2 / span 2; grid-row: 2; }
  .creation.a-le-relief [data-tourner="1"] { grid-column: 4; grid-row: 2; }
  .creation.a-le-relief .portrait-creation__commandes .jeton-mot { min-height: 40px; min-width: 0; padding: 0 var(--e-1); }
}

.bloc {
  border: 1px solid color-mix(in srgb, var(--fer) 18%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--echelon-5) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--parchemin-clair) 3%, transparent), transparent 60%), var(--pierre-3);
  padding: var(--e-4) var(--e-4) var(--e-5);
}

.bloc__note {
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--texte-pale);
  margin: calc(-1 * var(--e-1)) 0 var(--e-4);
}

.ligne-champs { display: flex; flex-wrap: wrap; gap: var(--e-4); }

.champ { display: flex; flex-direction: column; gap: var(--e-1); flex: 1 1 12rem; }

.champ > span, .champ__intitule {
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

input, select {
  font: inherit;
  color: var(--encre);
  background: linear-gradient(180deg, var(--parchemin), var(--parchemin-bas));
  border: 1px solid var(--cuir);
  border-radius: var(--rayon);
  padding: var(--e-2) var(--e-2);
  min-width: 0;
}

input::placeholder { color: var(--encre-pale); }
/* Un champ refusé (aria-invalid, posé avec le refus) prend le bord des pertes. */
input[aria-invalid="true"] { border-color: var(--perte); box-shadow: 0 0 0 1px var(--perte); }
/* Les champs et les listes font 44 px de haut : la cible tactile minimale. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select { min-height: 44px; }

.lore { margin: 0 0 var(--e-4); padding: var(--e-3); border: 1px solid var(--or-sombre); background: color-mix(in srgb, var(--pierre-2) 72%, transparent); }
.lore__accroche, .lore__details p, .lore__compteur { margin: var(--e-2) 0 0; color: var(--encre-pale); font-style: italic; line-height: 1.45; }
.lore__details { margin-top: var(--e-3); }
.lore__details summary { color: var(--or-clair); cursor: pointer; }
.lore__compteur { font-size: var(--t-2); font-style: normal; }
.lore__chapitres { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding-left: var(--e-4); }
.lore__chapitre { padding-left: var(--e-0); line-height: 1.35; }
.lore__chapitre-titre { display: inline; color: var(--or-clair); }
.lore__chapitre-statut { margin-left: var(--e-2); color: var(--rouge-clair); font-size: var(--t-1); text-transform: uppercase; letter-spacing: .04em; }
.lore__chapitre-texte { margin: var(--e-0) 0 0; color: var(--encre-pale); font-size: var(--t-2); }

.choix-deux { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-4); flex-wrap: wrap; }
.choix-deux .champ__intitule { margin-right: var(--e-1); }

/* 🔴 Un jeton qui porte un MOT, et il lui faut sa classe.
   Le propriétaire, le 16/09/2026, capture à l'appui du bouton « Homme » et du
   bouton « Femme » : « bug affichage ici ». Les deux boutons de sexe portaient
   la classe `jeton`, définie ici en bouton texte — mais `parure-lice.css`,
   chargée trente rangs plus loin, définit la MÊME classe en pastille RONDE de
   2,7rem pour les mises de tournoi, avec `font-variant-numeric: tabular-nums`.
   Elle est faite pour un chiffre. Le dernier chargé gagne : « Homme » et
   « Femme » débordaient de leur disque et se chevauchaient.
   La pastille reste à la lice et au royaume, qui s'en servent tous les deux
   (`jeton--influence` s'appuie dessus). Ce qui porte un mot prend ce nom. */
.jeton-mot {
  background: transparent;
  border: 1px solid var(--fer-sombre);
  border-radius: var(--rayon);
  min-height: 44px;
  padding: var(--e-1) var(--e-4);
  color: var(--texte-pale);
  font-family: var(--police-titre);
  letter-spacing: 0.08em;
  transition: color 120ms, border-color 120ms, background-color 120ms;
}
.jeton-mot[aria-pressed="true"] {
  color: var(--pierre-1);
  background: linear-gradient(180deg, var(--or), var(--or-sourd));
  border-color: var(--or);
}

.continents { display: flex; gap: var(--e-2); margin-bottom: var(--e-4); }

.onglet-continent {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--e-1) var(--e-1);
  font-family: var(--police-titre);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--t-2);
  color: var(--texte-pale);
}
.onglet-continent.est-actif { color: var(--parchemin); border-bottom-color: var(--cire); }

.cartes-origine { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--e-2); }
.etape .carte-origine__dit { font-style: normal; font-size: var(--t-3); }

.carte-origine, .carte-trait {
  text-align: left;
  background: linear-gradient(160deg, color-mix(in srgb, var(--parchemin) 6%, transparent), transparent 70%), var(--pierre-2);
  border: 1px solid color-mix(in srgb, var(--fer) 22%, transparent);
  border-radius: var(--rayon);
  padding: var(--e-3) var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  transition: border-color 140ms, background-color 140ms, transform 140ms;
}
.carte-origine:hover, .carte-trait:hover { border-color: var(--or-sourd); }
.carte-origine[aria-pressed="true"], .carte-trait[aria-pressed="true"] {
  border-color: var(--or);
  background: linear-gradient(160deg, color-mix(in srgb, var(--echelon-5) 14%, transparent), transparent 70%), var(--pierre-3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--echelon-5) 25%, transparent);
}

.carte-origine__nom, .carte-trait__nom {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--parchemin);
  letter-spacing: 0.04em;
}
.carte-origine__dit, .carte-trait__dit {
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-3);
  color: var(--texte-pale);
  line-height: 1.35;
}
.carte-origine__effets { color: var(--or-pale); font: .72rem/1.35 var(--sans); letter-spacing: .015em; }
.carte-origine__durete { font: 0.78rem/1.35 var(--sans); letter-spacing: 0.02em; color: var(--texte-pale); }

.cartes-trait { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: var(--e-2); }
.etape .carte-trait { padding: var(--e-2) var(--e-3); gap: var(--e-0); }
.etape .carte-trait__nom { font-size: var(--t-4); }
.etape .carte-trait__dit { font-size: var(--t-2); font-style: normal; line-height: 1.28; }

.competences { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--e-1) var(--e-5); }

.competence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-1) 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--fer) 20%, transparent);
}
.etape .competence { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-2); border: 1px solid color-mix(in srgb, var(--fer) 16%, transparent); border-left: 2px solid color-mix(in srgb, var(--fer) 30%, transparent); background: color-mix(in srgb, var(--pierre-2) 70%, transparent); }
.etape .competence.est-choisie { border-left-color: var(--or); }
.etape .pas { width: 2.1rem; height: 2.1rem; font-size: var(--t-5); }
.competence__texte { display: flex; flex-direction: column; gap: var(--e-0); min-width: 0; }
.competence__nom { font-family: var(--police-corps); color: var(--parchemin); }
.competence__effet { color: var(--texte-pale); font-size: var(--t-2); line-height: 1.3; }
.competence.est-choisie .competence__nom { color: var(--or-clair, var(--or)); }
.competence__reglage { display: flex; align-items: center; gap: var(--e-2); }
.competence__valeur { font-variant-numeric: tabular-nums; min-width: 1.2rem; text-align: center; color: var(--parchemin); }

.pas {
  position: relative;
  width: 1.7rem; height: 1.7rem;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--fer-sombre);
  color: var(--texte);
  border-radius: var(--rayon);
}
/* Le bouton reste petit à l'œil, mais sa zone touchable fait 44 px. */
.pas::after { content: ''; position: absolute; inset: -0.55rem; }
.pas:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.pas:disabled { opacity: 0.3; cursor: not-allowed; }

.sceau {
  align-self: center;
  margin-top: var(--e-2);
  padding: var(--e-3) 3rem;
  font-family: var(--police-titre);
  font-size: var(--t-5);
  /* Casse normale : jamais de bouton en capitales (AGENTS.md, interface de jeu vidéo). */
  letter-spacing: 0.04em;
  color: var(--parchemin-clair);
  background: radial-gradient(120% 140% at 50% 0%, var(--cire-vif), var(--cire) 60%, var(--cire-fonce));
  border: 1px solid var(--cire-fonce);
  border-radius: var(--rayon);
  box-shadow: 0 2px 0 var(--cire-fonce), 0 8px 24px color-mix(in srgb, var(--cire) 35%, transparent);
}
.sceau:hover { filter: brightness(1.12); }
.sceau:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--cire-fonce); }

.lien { background: none; border: 0; padding: 0; color: var(--or); text-decoration: underline; text-underline-offset: 3px; font-family: inherit; font-style: inherit; }

/* ─────────────────────────────────────────────────────────────────────────
   Lot 16, accessibilité et mobile (spec §17.3).
   Le mouvement réduit vaut pour toute la page, par le réglage du système ou
   par celui du jeu. Les animations finissent tout de suite au lieu d'être
   coupées : une animation coupée à son premier pas gèle ce qui apparaît.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html:not(.mouvement-libre) *, html:not(.mouvement-libre) *::before, html:not(.mouvement-libre) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html.mouvement-reduit *, html.mouvement-reduit *::before, html.mouvement-reduit *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Un téléphone de 360 px : rien ne déborde du cadre, jamais de défilement
   horizontal de la page. Ce qui est large défile dans son propre bloc. */
html, body { overflow-x: hidden; }
main, aside, section, article, form, fieldset, .page, .dialogue { min-width: 0; }
img, svg, canvas, video { max-width: 100%; height: auto; }
table { display: block; max-width: 100%; overflow-x: auto; }
pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 400px) {
  .simple-resume dd { font-size: var(--t-5); }
  .mestre-conseil__actions { flex-direction: column; align-items: stretch; }
  .mestre-conseil__aller { width: 100%; }
}
/* La carte d'une maison : l'écu à gauche sur toute la hauteur, les cinq
   lignes de texte à droite. Sans les deux règles ci-dessous, la place n'était
   réservée que sur quatre rangs et les lignes suivantes tombaient dans la
   colonne de 64 px : « Paysan · sans armée ni château » s'écrivait un mot par
   ligne, en prod, sur bureau comme sur téléphone. */
.carte-maison {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: repeat(5, auto);
  align-items: start;
  gap: var(--e-1) var(--e-4);
  text-align: left;
}
.carte-maison__blason { grid-column: 1; grid-row: 1 / -1; align-self: center; width: 60px; height: 76px; object-fit: contain; }
.carte-maison > :not(.carte-maison__blason) { grid-column: 2; }
.carte-maison[aria-pressed=true] { border-color:var(--or-vif); background:var(--cuir); }