/* Lettrix — « Natural Board » (maquette Stitch, octobre 2026) : fond parchemin,
   cartes blanches, accent vert forêt, tuiles d'ivoire identiques dans les deux
   thèmes, cases bonus franches avec leur sigle (MT, MD, LT, LD) pour ne jamais
   dépendre de la seule couleur. Trois thèmes : clair, ardoise (sombre) et vert clair. */

:root {
  /* Fond et interface */
  --papier: #f6f3ec;          /* parchemin : fond de page */
  --surface: #ffffff;         /* cartes, champs, dialogues */
  --grille: #f1eee7;          /* creux : survols, avatars */
  --trait: #ddd6c6;           /* bordures */
  --encre: #1f2a37;           /* texte */
  --encre-douce: #5b6470;     /* texte secondaire */
  --accent: #2f6f4f;          /* vert forêt : actions, sélection, tour en cours */
  --accent-fonce: #245a3f;    /* survol */
  --accent-texte: #ffffff;
  --accent-pale: #e4f0e8;     /* reflet vert : ligne « moi », coup sélectionné */
  --rayon: 8px;
  --rayon-carte: 16px;
  /* Plateau et chevalet */
  --case: #f1eee7;            /* case vide, en léger creux */
  --joint-plateau: #ffffff;
  --repere: #2f6f4f;          /* lettre posée, case visée */
  --tuile: #faf5eb;           /* ivoire */
  --tuile-relief: #a89a84;    /* tranche de la tuile */
  --tuile-bord: #d8ccb8;
  --tuile-encre: #1a1815;
  --tuile-encre-douce: #6b5f4f;
  --tuile-joker: #9a3412;
  --tuile-choisie: #fffdf6;
  /* Cases bonus : MD et LD un ton plus soutenus que la maquette pour que le
     sigle blanc reste lisible (contraste ≥ 4,5:1) */
  --mt: #b91c1c;              /* mot compte triple */
  --mt-texte: #ffffff;
  --md: #be185d;              /* mot compte double */
  --md-texte: #ffffff;
  --lt: #1d4ed8;              /* lettre compte triple */
  --lt-texte: #ffffff;
  --ld: #0369a1;              /* lettre compte double */
  --ld-texte: #ffffff;
  --erreur: #b91c1c;
  --alerte: #b45309;          /* délai bientôt écoulé */
  --monte: #15803d;
  --descend: #b91c1c;
  --ombre: 31, 42, 55;        /* teinte des ombres, en composantes rgb */
  --bulle-fond: #1f2a37;
  --bulle-texte: #f6f3ec;
  --rayon-tuile: 6px;
  --police: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --police-titre: var(--police);
  color-scheme: light;
}

/* Thème sombre : suit le réglage de l'appareil, sauf choix « Clair »,
   « Sombre » ou « Vert clair » fait dans Réglages (attribut data-theme sur
   <html>). Les tuiles gardent leur ivoire. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --papier: #1b1f24;
    --surface: #252b32;
    --grille: #2e353d;
    --trait: #3a424b;
    --encre: #e8e6df;
    --encre-douce: #a9b0b8;
    --accent: #5fb98a;
    --accent-fonce: #7ccaa0;
    --accent-texte: #0f1a14;
    --accent-pale: #22382d;
    --case: #2e353d;
    --joint-plateau: #252b32;
    --repere: #2f6f4f;
    --erreur: #f87171;
    --alerte: #fbbf24;
    --monte: #5fb98a;
    --descend: #f87171;
    --ombre: 0, 0, 0;
    --bulle-fond: #e8e6df;
    --bulle-texte: #1b1f24;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #1b1f24;
  --surface: #252b32;
  --grille: #2e353d;
  --trait: #3a424b;
  --encre: #e8e6df;
  --encre-douce: #a9b0b8;
  --accent: #5fb98a;
  --accent-fonce: #7ccaa0;
  --accent-texte: #0f1a14;
  --accent-pale: #22382d;
  --case: #2e353d;
  --joint-plateau: #252b32;
  --repere: #2f6f4f;
  --erreur: #f87171;
  --alerte: #fbbf24;
  --monte: #5fb98a;
  --descend: #f87171;
  --ombre: 0, 0, 0;
  --bulle-fond: #e8e6df;
  --bulle-texte: #1b1f24;
  color-scheme: dark;
}

/* Vert clair : fond de feuille tendre, mêmes tuiles et cases bonus que le
   thème clair ; seuls le fond et l'interface virent au vert. */
:root[data-theme="green"] {
  --papier: #edf6ee;
  --surface: #fbfefb;
  --grille: #e0eee2;
  --trait: #c3dbc8;
  --encre: #1b2b22;
  --encre-douce: #4d6255;
  --accent-pale: #d2e9da;
  --case: #c6e5cb;            /* cases normales du plateau : vert clair franc */
  --joint-plateau: #fbfefb;
  --ombre: 27, 43, 34;
  --bulle-fond: #1b2b22;
  --bulle-texte: #edf6ee;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1rem;
  font-feature-settings: "tnum" 1;   /* chiffres alignés : scores et tableaux */
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

button { font: inherit; color: inherit; }
input, select, textarea { color: var(--encre); }
::placeholder { color: var(--encre-douce); opacity: 1; }

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

/* ---------- Tuile ---------- */

.tuile {
  position: relative;
  display: inline-grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--rayon-tuile);
  background: var(--tuile);
  color: var(--tuile-encre);
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1;
  /* tuile d'ivoire : bord fin, tranche plus foncée en bas, ombre portée légère */
  box-shadow: inset 0 0 0 1px var(--tuile-bord), 0 2px 0 var(--tuile-relief), 0 3px 5px rgba(0, 0, 0, 0.12);
  user-select: none;
  touch-action: none;
}

.tuile sub {
  position: absolute;
  right: 8%;
  bottom: 6%;
  font-family: var(--police);
  font-size: 0.4em;
  letter-spacing: -0.06em;   /* « 10 » (K, W, X, Y, Z) reste à l'écart de la lettre */
  font-weight: 700;
  line-height: 1;
  color: var(--tuile-encre-douce);
}

.tuile.joker { color: var(--tuile-joker); font-style: italic; }
/* Valeur à deux chiffres (K, W, X, Y, Z = 10) : la lettre se décale pour lui laisser la place */
.tuile.valeur-longue { padding-right: 0.22em; }
.tuile.joker-vierge::after { content: "?"; }

/* ---------- Pages (connexion, tableau de bord…) ---------- */

.page-etroite, .page-moyenne, .page-large {
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) 1rem 3rem;
}

.page-etroite { max-width: 28rem; }
.page-moyenne { max-width: 44rem; }
.page-large { max-width: 56rem; }

h1, h2 { font-family: var(--police-titre); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 1rem; }
h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.45; margin: 0; }

a { color: var(--accent); text-underline-offset: 3px; }

.titre-jeu {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 2rem;
  font-size: clamp(1.6rem, 8.5vw, 2.6rem);
}

.tuile-titre { width: 1.3em; }

.note { color: var(--encre-douce); margin: 1.25rem 0; max-width: 60ch; }
.aide { color: var(--encre-douce); font-weight: 400; }

.formulaire { display: grid; gap: 1rem; }

.formulaire label {
  display: grid;
  gap: 0.35rem;
  font-weight: 600;
}

.formulaire input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  font: inherit;
  font-weight: 400;
}

.formulaire input:focus-visible { outline: none; border-color: var(--accent); }

.formulaire fieldset { border: 0; margin: 0; padding: 0; }
.formulaire legend { font-weight: 700; margin-bottom: 0.5rem; }

.choix { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.choix legend { flex-basis: 100%; }
.choix label { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; min-height: 44px; }
.choix input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }

.liste-invites {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.25rem 1rem;
  max-height: 18rem;
  overflow-y: auto;
  margin-top: 0.6rem;
}

.formulaire .liste-invites label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  font-weight: 500;
}

.liste-invites input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }

.message-erreur { color: var(--erreur); min-height: 1.45em; margin: 0; }
.message-erreur:empty { min-height: 0; }

.retour { font-weight: 600; }
.retour::before { content: "‹ "; }

/* ---------- Tableau de bord ---------- */

.entete-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.entete-page h1 { margin: 0; }
.compte { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; color: var(--encre-douce); }

/* ---------- Avatars ---------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  vertical-align: -0.35rem;
  border-radius: 6px;
  background: var(--grille);
  color: var(--encre-douce);
}

.avatar svg { width: 78%; height: 78%; fill: currentColor; }
.avatar svg .trou { fill: var(--grille); }  /* évidement du dessin, couleur du fond de l'avatar */
.avatar-petit { width: 1.25rem; height: 1.25rem; vertical-align: -0.25rem; border-radius: 5px; }
.avatar-vide { font-weight: 700; font-size: 0.85rem; color: var(--encre-douce); }
.avatar-nom { display: inline-flex; align-items: center; }

.bloc {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  background: var(--surface);
}
.bloc > h2 { margin-bottom: 0.5rem; }

.bloc-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.compteur { color: var(--encre-douce); font-weight: 500; font-variant-numeric: tabular-nums; }

.bloc-entete .bouton { text-decoration: none; display: inline-flex; align-items: center; }
.bouton[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.liste-parties { list-style: none; margin: 0; padding: 0; }

.liste-parties > li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--trait);
}
.liste-parties > li:last-child { border-bottom: 0; }

.liste-parties:empty::before {
  content: attr(data-vide);
  display: block;
  padding: 0.8rem 0;
  color: var(--encre-douce);
}

.ligne-partie { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.ligne-partie:hover .adversaires { text-decoration: underline; }

.adversaires { display: block; font-weight: 600; }
.etat-partie { display: block; color: var(--encre-douce); font-size: 0.95rem; }

/* La partie où c'est à moi de jouer porte un liseré vert, ambre si le délai presse */
.liste-parties > li.a-moi { box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.85rem; }
.liste-parties > li.a-moi .etat-partie { color: var(--accent); font-weight: 600; }
.liste-parties > li.urgent { box-shadow: inset 4px 0 0 var(--alerte); }
.liste-parties > li.urgent .etat-partie { color: var(--alerte); }

.actions-ligne { display: flex; gap: 0.5rem; }

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

.bouton {
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 120ms, border-color 120ms;
}

.bouton:hover:not(:disabled) { border-color: var(--encre-douce); background: var(--grille); }
.bouton:disabled { opacity: 0.45; cursor: not-allowed; }

/* Vert forêt : un seul bouton principal par écran */
.bouton-principal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-texte);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(var(--ombre), 0.18);
}

.bouton-principal:hover:not(:disabled) { background: var(--accent-fonce); border-color: var(--accent-fonce); }

.bouton-lien {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-weight: 600;
}

.bouton-retirer {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--encre-douce);
  font-size: 1.4rem;
  cursor: pointer;
}

/* ---------- Mise en page de la partie ---------- */

.jeu {
  display: grid;
  gap: 0.75rem;
  max-width: 34rem;
  margin: 0 auto;
  padding: max(0.75rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "bandeau"
    "plateau"
    "joueur"
    "historique";
}

.bandeau { grid-area: bandeau; }
.zone-plateau { grid-area: plateau; }
.zone-joueur { grid-area: joueur; }
.zone-historique { grid-area: historique; }

@media (min-width: 900px) {
  .jeu {
    max-width: 75rem;
    gap: 1.25rem 1.5rem;
    padding: 1.5rem 1.5rem 2rem;
    grid-template-columns: minmax(0, 46rem) minmax(18rem, 1fr);
    grid-template-areas:
      "bandeau bandeau"
      "plateau historique"
      "joueur historique";
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }
}

/* Cartes de l'écran de partie */
.bandeau, .cadre-plateau, .zone-joueur, .zone-historique {
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  background: var(--surface);
}
.bandeau, .zone-joueur, .zone-historique { padding: 1rem 1.25rem; }
@media (min-width: 900px) {
  .bandeau { padding: 1.25rem 1.5rem; }
  /* Le chevalet colle à la grille : écart réduit à 0,5rem */
  .zone-joueur { margin-top: -0.75rem; }
}

/* ---------- Bandeau des scores ---------- */

.bandeau .retour { flex-basis: 100%; }

.bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.scores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.score {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.2rem 0 0.15rem;
  border-bottom: 3px solid transparent;
  color: var(--encre-douce);
}

.score strong { color: var(--encre); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }

.score.courant { border-bottom-color: var(--accent); color: var(--encre); font-weight: 600; }
.score.courant strong { color: var(--accent); }

.sac {
  margin: 0;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--encre-douce);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.sac span:first-child { color: var(--encre); font-weight: 700; }

/* ---------- Plateau ---------- */

.plateau {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: repeat(15, minmax(0, 1fr));
  gap: clamp(1px, 0.4vw, 4px);
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  background: var(--joint-plateau);
  /* taille des lettres proportionnelle à la case (× 2 quand la grille est zoomée) */
  font-size: min(calc((100vw - 2rem) / 15 * 0.55 * var(--zoom, 1)), calc(1.45rem * var(--zoom, 1)));
  /* le double-toucher sert à zoomer la grille, pas la page */
  touch-action: manipulation;
}

/* Les lettres déjà jouées laissent faire défiler la grille zoomée */
.case > .tuile:not(.provisoire) { touch-action: manipulation; }

.zone-plateau { display: flex; flex-direction: column; }

/* Carte du plateau : bord fin, coins arrondis */
.cadre-plateau { padding: clamp(0.35rem, 2vw, 1rem); }

/* Sous la grille, à droite : ne cache aucune case */
.bouton-zoom {
  align-self: flex-end;
  margin-top: 0.35rem;
  min-height: 2rem;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* Smartphone et tablette : grille zoomable, chevalet fixé en bas de l'écran */
@media (max-width: 899.98px) {
  .cadre-plateau.zoom {
    aspect-ratio: 1;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .cadre-plateau.zoom .plateau { --zoom: 2; width: 200%; }

  .zone-joueur {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin: 0 -1rem;
    padding: 0.6rem 1rem max(0.6rem, env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: var(--rayon-carte) var(--rayon-carte) 0 0;
    box-shadow: 0 -4px 16px rgba(var(--ombre), 0.08);
  }
  .zone-joueur .statut-tour { margin: 0 0 0.25rem; font-size: 0.9rem; }
  .zone-joueur .apercu { min-height: 0; margin-bottom: 0.4rem; }
  .zone-joueur .apercu:empty { display: none; }
  .zone-joueur .chevalet { margin-bottom: 0.5rem; }
}

@media (min-width: 900px) {
  .plateau { font-size: 1.45rem; }
  .bouton-zoom { display: none; }
}

.case {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: clamp(2px, 0.5vw, 4px);
  background: var(--case);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.case .libelle {
  font-family: var(--police);
  font-size: 0.42em;
  font-weight: 800;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.case.MT { background: var(--mt); color: var(--mt-texte); }
.case.MD { background: var(--md); color: var(--md-texte); }
.case.LT { background: var(--lt); color: var(--lt-texte); }
.case.LD { background: var(--ld); color: var(--ld-texte); }
.case.MT, .case.MD, .case.LT, .case.LD { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); }
.case.depart .libelle { font-size: 0.7em; color: var(--accent); }

/* Une lettre est sélectionnée : seule la case survolée (ou atteinte au clavier) est marquée */
.case.cible:hover,
.case.cible:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: none; }

.case > .tuile {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  font-size: 1em;
  border-radius: clamp(2px, 0.6vw, var(--rayon-tuile));
  box-shadow: inset 0 0 0 1px var(--tuile-bord), 0 1px 0 var(--tuile-relief);
}

.case > .tuile.provisoire {
  background: var(--tuile-choisie);
  box-shadow: inset 0 0 0 2px var(--repere), 0 2px 4px rgba(0, 0, 0, 0.18);
  cursor: grab;
}

.case > .tuile.dernier-coup { box-shadow: inset 0 0 0 2px var(--tuile-encre-douce); }

/* Coup choisi dans l'historique */
.case > .tuile.coup-vu { background: var(--accent); color: var(--accent-texte); box-shadow: none; }
.case > .tuile.coup-vu sub { color: var(--accent-texte); }

/* ---------- Chevalet ---------- */

.apercu {
  min-height: 1.45em;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.apercu.invalide { color: var(--erreur); font-weight: 500; }
.apercu.valide strong { font-size: 1.15rem; }

.chevalet {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.6rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--grille);
  font-size: clamp(1.2rem, 6vw, 1.6rem);
}

.chevalet .tuile {
  width: 100%;
  border: 0;
  padding: 0;
  cursor: grab;
  transition: transform 120ms ease-out;
}

.chevalet .tuile.choisie {
  transform: translateY(-10%);
  background: var(--tuile-choisie);
  box-shadow: 0 0 0 2px var(--accent), 0 4px 8px rgba(0, 0, 0, 0.2);
}
.chevalet .tuile.a-echanger { background: var(--grille); color: var(--encre-douce); box-shadow: inset 0 0 0 1px var(--trait); text-decoration: line-through; }

/* Repère d'insertion quand on range une lettre dans le chevalet */
.chevalet .tuile.insertion-avant { box-shadow: inset 3px 0 0 var(--repere), inset 0 0 0 1px var(--tuile-bord); }
.chevalet .tuile.insertion-apres { box-shadow: inset -3px 0 0 var(--repere), inset 0 0 0 1px var(--tuile-bord); }

.tuile.fantome {
  position: fixed;
  z-index: 50;
  width: 2.6rem;
  font-size: 1.6rem;
  pointer-events: none;
  transform: translate(-50%, -60%) scale(1.08);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.tuile.en-deplacement { opacity: 0.3; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.actions .bouton-principal { margin-left: auto; min-width: 7rem; }

.consigne { flex-basis: 100%; margin: 0; color: var(--encre-douce); }

/* ---------- Vérifier un mot ---------- */

.verifier-mot { margin: 0.25rem 0 0.5rem; }
.verifier-mot label { display: block; margin-bottom: 0.3rem; font-weight: 600; }
.ligne-verifier { display: flex; gap: 0.5rem; }
.ligne-verifier input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  font: inherit;
  text-transform: uppercase;
}
.ligne-verifier input:focus-visible { outline: none; border-color: var(--accent); }
.resultat-verifier { min-height: 1.3em; margin: 0.35rem 0 0; font-weight: 600; }
.resultat-verifier:empty { min-height: 0; }
.resultat-verifier.invalide { color: var(--erreur); }

/* ---------- Lettres restantes ---------- */

.restantes {
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--trait);
}

.restantes summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.4rem;
  min-height: 44px;
  padding: 0.6rem 0;
  font-weight: 600;
  cursor: pointer;
}

.restantes summary strong { font-variant-numeric: tabular-nums; }
.restantes-resume { flex-basis: 100%; color: var(--encre-douce); font-size: 0.9rem; font-weight: 400; }
.note-restantes { margin: 0 0 0.5rem; color: var(--encre-douce); font-size: 0.9rem; }

.grille-restantes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr));
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.restante {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.restante .tuile { width: 1.75rem; font-size: 1rem; flex: none; }
.restante .nombre { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.95rem; }
.restante.epuisee { opacity: 0.4; }
.restante.epuisee .nombre { text-decoration: line-through; }

/* ---------- Historique ---------- */

.zone-historique h2 {
  margin: 0.5rem 0;
  color: var(--encre-douce);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.historique {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--encre-douce);
  font-size: 0.95rem;
}

.historique li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid var(--trait);
}

.historique li strong { color: var(--encre); }
.historique .points { font-variant-numeric: tabular-nums; color: var(--encre); font-weight: 600; }
/* Coup posé : toute la ligne se touche pour le revoir sur la grille */
.historique li.revoir { padding: 0; }
.ligne-coup {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 0.4rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  align-items: center;
  cursor: pointer;
}
.ligne-coup { border-radius: var(--rayon); }
.ligne-coup:hover { background: var(--grille); }
.ligne-coup[aria-pressed="true"] { background: var(--accent-pale); box-shadow: inset 3px 0 0 var(--accent); }

.historique:empty::before { content: "Aucun coup pour l'instant."; }

/* ---------- Statut du tour, bulle d'information ---------- */

.statut-tour { margin: 0 0 0.35rem; color: var(--accent); font-weight: 600; }
.statut-tour.attente { color: var(--encre-douce); font-weight: 500; }
.statut-tour.urgent { color: var(--alerte); }

.echeance-partie { flex-basis: 100%; margin: 0; color: var(--encre-douce); font-size: 0.95rem; }
.echeance-partie:empty { display: none; }

.score.forfait strong { text-decoration: line-through; }
.score.forfait { opacity: 0.65; }

.bulle {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1.1rem;
  border-radius: var(--rayon);
  background: var(--bulle-fond);
  color: var(--bulle-texte);
  font-weight: 500;
  transform: translateX(-50%);
  box-shadow: 0 4px 12px rgba(var(--ombre), 0.2);
}

/* ---------- Dialogues ---------- */

.dialogue {
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  background: var(--surface);
  color: var(--encre);
  box-shadow: 0 18px 40px rgba(var(--ombre), 0.25);
}

.dialogue::backdrop { background: rgba(var(--ombre), 0.45); }
.dialogue h2 { margin: 0 0 1rem; font-size: 1.25rem; }

.lettres-joker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.lettres-joker .tuile { width: 100%; border: 0; cursor: pointer; }

.fin-scores { margin: 0 0 1.25rem; padding-left: 1.4rem; font-size: 1.1rem; }
.fin-scores li { padding: 0.2rem 0; }

/* ---------- Réglages ---------- */

.dialogue-large { width: min(32rem, calc(100vw - 2rem)); }

.reglages { border: 0; margin: 0 0 1rem; padding: 0; }
.reglages legend { font-weight: 700; padding: 0; margin-bottom: 0.5rem; }
.reglages .note { margin: 0.25rem 0 0.75rem; }
.reglages label { display: grid; gap: 0.35rem; font-weight: 600; }
.reglages input[type="email"] {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
}

.lignes-prefs { display: grid; gap: 0.35rem; }
.ligne-pref {
  display: grid;
  grid-template-columns: 1fr 3.5rem 3.5rem;
  align-items: center;
  gap: 0.5rem;
}
.ligne-pref.entete {
  color: var(--encre-douce);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ligne-pref input { justify-self: center; width: 1.15rem; height: 1.15rem; }

.choix-avatar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.4rem;
}

.choix-avatar-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--trait);
  border-radius: 9px;
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.choix-avatar-item.choisi { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.choix-avatar-item span:last-child { font-size: 0.9rem; }

/* ---------- Statistiques et classement ---------- */

.stats { display: grid; gap: 0.3rem; margin: 0 0 1.25rem; }
.stats div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--trait);
}
.stats dt { color: var(--encre-douce); }
.stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.classement { list-style: none; margin: 0; padding: 0; }
.classement:empty::before { content: attr(data-vide); color: var(--encre-douce); }
.classement li {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--trait);
}
.classement .rang { font-weight: 700; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.classement .qui { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.classement .bilan { color: var(--encre-douce); font-size: 0.95rem; text-align: right; }

/* ---------- Administration ---------- */

.formulaire-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.formulaire-ligne label { display: grid; gap: 0.25rem; font-weight: 600; }

.formulaire-ligne input {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
}

.tableau-defilant { overflow-x: auto; }

.tableau-admin { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.95rem; }

.tableau-admin th {
  padding: 0.4rem 0.5rem;
  text-align: left;
  color: var(--encre-douce);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--trait);
}

.tableau-admin td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--trait); vertical-align: middle; }

.compte-nom { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-weight: 600; }
.compte-email { color: var(--encre-douce); font-size: 0.9rem; font-weight: 400; }
.etat-bloque { color: var(--erreur); font-weight: 600; }

.actions-compte { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bouton-petit { padding: 0.3rem 0.55rem; font-size: 0.9rem; }

.filtre-statut { display: flex; align-items: center; gap: 0.4rem; color: var(--encre-douce); }

.filtre-statut select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
}

.formulaire-reglages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.5rem;
}

.formulaire-reglages label { display: grid; gap: 0.25rem; font-weight: 600; }

.formulaire-reglages input[type="number"] {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
}

.formulaire-reglages .case { display: flex; align-items: center; gap: 0.4rem; }
.formulaire-reglages button { justify-self: start; }

.code-activation {
  margin: 0.5rem 0 1.25rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Tournoi ---------- */

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.formulaire textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--surface);
  font: 0.95rem/1.4 ui-monospace, Consolas, monospace;
  font-weight: 400;
  resize: vertical;
}

.formulaire textarea:focus-visible { outline: none; border-color: var(--accent); }

.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
  border-bottom: 2px solid var(--trait);
}

.onglet {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  background: none;
  color: var(--encre-douce);
  font-weight: 600;
  cursor: pointer;
}

.onglet[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.tableau-classement {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tableau-classement th,
.tableau-classement td {
  padding: 0.45rem 0.4rem;
  border-bottom: 1px solid var(--trait);
  text-align: right;
}

.tableau-classement thead th {
  color: var(--encre-douce);
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom-width: 2px;
}

.tableau-classement abbr { text-decoration: none; cursor: help; }
.tableau-classement th[scope="row"],
.tableau-classement thead th:nth-child(2),
.tableau-classement thead th#entete-issue { text-align: left; }
.tableau-classement .abandon { color: var(--encre-douce); font-weight: 400; font-size: 0.85rem; font-style: italic; }
.tableau-classement th[scope="row"] { font-weight: 600; }
.tableau-classement .place { color: var(--encre-douce); font-weight: 400; font-size: 0.85rem; }
.tableau-classement .rang { color: var(--encre-douce); }
.tableau-classement .points { font-weight: 700; }
.tableau-classement .suite { text-align: left; white-space: nowrap; font-size: 0.9rem; }
.tableau-classement .monte { color: var(--monte); }
.tableau-classement .descend { color: var(--descend); }
.tableau-classement tr.moi { background: var(--accent-pale); }
.tableau-classement tr.moi th[scope="row"],
.tableau-classement tr.moi .points { color: var(--encre); }

.liste-matchs { list-style: none; margin: 0; padding: 0; }

.liste-matchs:empty::before {
  content: attr(data-vide);
  color: var(--encre-douce);
}

.liste-matchs li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--trait);
  font-variant-numeric: tabular-nums;
}

.liste-matchs li.moi { font-weight: 600; }
.match-etat { color: var(--encre-douce); font-weight: 400; white-space: nowrap; }

.etiquette-tournoi {
  display: inline-block;
  padding: 0 0.4rem;
  border: 1px solid var(--trait);
  border-radius: 4px;
  color: var(--encre-douce);
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: 0.1em;
}

.info-tournoi { margin: 0; flex-basis: 100%; color: var(--encre-douce); font-size: 0.95rem; }

/* Écran étroit : l'essentiel (rang, joueur, J, V, GA, points, suite) tient sans défilement */
@media (max-width: 30rem) {
  .tableau-classement { font-size: 0.9rem; }
  .tableau-classement .secondaire { display: none; }
  .tableau-classement th, .tableau-classement td { padding: 0.45rem 0.25rem; }
}

/* Phase 2 : sous-onglets, duels */
.onglets-etapes { border-bottom-width: 1px; }
.onglets-etapes .onglet { min-height: 40px; font-size: 0.95rem; }
.sous-titre { font-size: 1rem; margin: 1.25rem 0 0.25rem; }
.duel-libelle { color: var(--encre-douce); font-weight: 400; white-space: nowrap; }
.liste-matchs li { align-items: baseline; }
.liste-matchs li .duel-libelle + .match-joueurs { flex: 1; }

.note-formulaire { margin: 0; font-size: 0.9rem; }

.version-appli { margin: 2.5rem 0 0; color: var(--encre-douce); font-size: 0.8rem; text-align: center; }

/* ---------- Discussion d'une partie ---------- */

.discussion {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--trait);
}
.zone-historique .discussion h2 { margin-top: 0; }

.messages {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}
.messages:empty::before { content: "Aucun message pour l'instant."; color: var(--encre-douce); font-size: 0.95rem; }

.message {
  align-self: flex-start;
  max-width: 88%;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
}
.message.moi { align-self: flex-end; background: var(--accent-pale); border-color: transparent; }
.message.masque .message-texte { color: var(--encre-douce); font-style: italic; }

.message-entete {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  color: var(--encre-douce);
  font-size: 0.8rem;
}
.message-entete strong { color: var(--encre); }
.message-texte { margin: 0.1rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.lien-signaler {
  margin-left: auto;
  padding: 0.1rem 0.2rem;
  border: 0;
  background: none;
  color: var(--encre-douce);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.lien-signaler:hover { color: var(--erreur); }
.message-signale { margin-left: auto; font-style: italic; }

.phrases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.phrase {
  min-height: 36px;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.phrase:hover { border-color: var(--accent); color: var(--accent); }

.form-message { display: flex; gap: 0.5rem; align-items: flex-end; }
.form-message textarea {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  resize: vertical;
}
.form-message textarea:focus-visible { outline: none; border-color: var(--accent); }
.discussion .message-erreur:empty { display: none; }
.note-messagerie { margin: 0; color: var(--encre-douce); font-size: 0.9rem; }

/* Tableau de bord : messages non lus */
.etiquette-messages {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-texte);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Administration : messages signalés */
.texte-signale { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Revanche ---------- */

.bouton-revanche { width: 100%; margin-top: 0.25rem; }
.actions-fin { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }

/* Tableau de bord : dernier coup joué */
.dernier-coup-tableau {
  display: block;
  color: var(--encre-douce);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Apparence (Réglages) ---------- */

.choix-theme { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.reglages .choix-theme label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; }
.choix-theme input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* ---------- Palmarès du tournoi ---------- */

.liens-haut { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.liens-haut a:not(.retour) { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }

.tableau-honneur thead th:first-child { text-align: left; }
.tableau-honneur thead th:nth-child(2) { text-align: right; }
.tableau-honneur .editions,
.tableau-honneur thead th.editions { text-align: left; color: var(--encre-douce); font-size: 0.9rem; }
.tableau-honneur td.editions { font-weight: 400; }
.moi-nom { font-weight: 700; color: var(--encre); }

.edition { padding-top: 1.25rem; border-top: 1px solid var(--trait); }
.edition > h2 { margin: 0; }
.date-edition { margin: 0.2rem 0 0.75rem; }

.ligue-palmares { margin-bottom: 1rem; }
.ligue-palmares .sous-titre { margin: 0.75rem 0 0.4rem; }

.podiums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}
.podium {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
}
.podium-groupe { margin: 0 0 0.35rem; color: var(--encre-douce); font-size: 0.85rem; font-weight: 600; }
.podium ol { margin: 0; padding: 0; list-style: none; }
.podium li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.25rem 0;
}
.podium .rang {
  min-width: 2.2rem;
  color: var(--encre-douce);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.podium .rang-1 { color: var(--accent); }
.podium .points { margin-left: auto; color: var(--encre-douce); font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.mouvements {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.9rem;
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
}
.mouvements dt { color: var(--encre-douce); font-weight: 600; }
.mouvements dd { margin: 0; }
@media (max-width: 30rem) {
  .mouvements { grid-template-columns: 1fr; }
  .mouvements dd { margin-bottom: 0.4rem; }
}

/* ---------- Fiche d'un joueur ---------- */

.lien-joueur { color: inherit; text-decoration: none; }
.lien-joueur:hover, .lien-joueur:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.entete-fiche { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.5rem; }
.entete-fiche .avatar { width: 3rem; height: 3rem; border-radius: 10px; }
.entete-fiche .avatar-vide { font-size: 1.4rem; }
.entete-fiche h1 { margin: 0; }
.entete-fiche .note { margin: 0.15rem 0 0; }

.bilan-face { margin: 0 0 0.5rem; font-weight: 600; }
.liste-matchs a.match-joueurs { color: inherit; text-underline-offset: 3px; }
.liste-matchs li.resultat-victoire { box-shadow: inset 3px 0 0 var(--monte); padding-left: 0.6rem; }
.liste-matchs li.resultat-defaite { box-shadow: inset 3px 0 0 var(--descend); padding-left: 0.6rem; }
.liste-matchs li.resultat-nul { box-shadow: inset 3px 0 0 var(--trait); padding-left: 0.6rem; }

/* Administration : export Excel du tournoi */
.exports { margin-top: 1.25rem; }
.exports .actions a { text-decoration: none; }

/* ---------- Accessibilité ---------- */

/* Case active de la grille au clavier : bien visible, même sur une case bonus */
.case:focus-visible { outline: 3px solid var(--encre); outline-offset: -1px; z-index: 1; }

.aide-clavier { margin-top: 1rem; color: var(--encre-douce); font-size: 0.9rem; }
.aide-clavier summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.aide-clavier ul { margin: 0; padding-left: 1.2rem; }
.aide-clavier li { margin: 0.2rem 0; }

/* ---------- Guide du joueur ---------- */

.guide .bloc { max-width: 65ch; scroll-margin-top: 1rem; }
.guide ul { padding-left: 1.2rem; }
.guide li { margin: 0.35rem 0; }
.sommaire { margin: 0 0 2rem; padding: 0.75rem 1rem; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); }
.sommaire ol { margin: 0; padding-left: 1.3rem; columns: 2 16rem; }
.sommaire li { margin: 0.2rem 0; }
.sommaire a { color: var(--accent); text-underline-offset: 3px; }
.legende-bonus { list-style: none; padding-left: 0 !important; }
.legende-bonus li { display: flex; align-items: center; gap: 0.6rem; }
.case-exemple {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 4px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
}
.case-exemple.MT { background: var(--mt); color: var(--mt-texte); }
.case-exemple.MD { background: var(--md); color: var(--md-texte); }
.case-exemple.LT { background: var(--lt); color: var(--lt-texte); }
.case-exemple.LD { background: var(--ld); color: var(--ld-texte); }
.tableau-lettres { max-width: 20rem; }
.tableau-lettres th[scope="row"] { text-align: left; }
.tableau-lettres thead th:first-child { text-align: left; }
.tableau-lettres .lettre-guide { display: inline-flex; align-items: center; gap: 0.5rem; }
.tableau-lettres .tuile { width: 2rem; font-size: 1.15rem; }

/* Analyse après partie */
.analyse { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.analyse h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.analyse-tours { list-style: none; margin: 1rem 0 0; padding: 0; }
.analyse-tours li { padding: .6rem 0; border-bottom: 1px solid var(--trait); }
.analyse-tour-titre { font-weight: 700; }
.analyse-chevalet { font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; color: var(--encre-douce); }
.analyse-ligne { margin: .15rem 0 0; color: var(--encre-douce); }
.analyse-ligne strong { color: var(--encre); }
.analyse-perte { color: var(--descend); font-weight: 700; }
.analyse-optimal { color: var(--monte); font-weight: 700; }