/*
 * comment-jouer.fr — feuille de style unique
 *
 * Parti pris visuel : le manuel de règles. Fond papier, encre noire, bordures
 * franches, ombres dures sans flou. UN SEUL accent, le vert bouteille du tapis
 * de jeu : un référentiel n'a pas de camp à désigner, contrairement à
 * jeux-a-deux.fr dont l'identité repose sur deux couleurs qui s'opposent.
 * Volontairement à l'opposé du portail jeux-multijoueurs.fr (sombre, néon, arrondi).
 *
 * Écrit en mobile first : le style de base est celui du téléphone,
 * les media queries n'ajoutent que l'élargissement.
 * Aucune webfont : la pile système s'affiche instantanément (LCP mobile).
 *
 * Deux familles de couleurs échappent volontairement au thème et à la palette :
 * les diagrammes SVG (.dg-*) et les grilles de jeu (.g2048, .g-demineur…).
 * Elles imitent un plateau réel : un damier qui s'inverse devient illisible, et
 * une mine de démineur doit rester rouge même si l'accent du site change.
 */

:root {
  --papier: #faf6ef;
  --papier-creux: #f1eade;
  --encre: #14110d;
  --encre-doux: #5c564d;
  --accent: #1f5c45;
  --bleu: #1f5578;
  --or: #b8841c;
  /* Fond des blocs posés sur le papier (cartes, encadrés, tableaux, figures).
     TOUJOURS passer par cette variable, jamais par #fff en dur : c'est ce qui
     garantit qu'un bloc ajouté plus tard suit le mode sombre sans qu'on pense
     à l'inscrire dans une liste. */
  --surface: #fff;
  /* Filets internes (pointillés de séparation) */
  --filet: #ccc4b6;
  --trait: 2px solid var(--encre);
  --ombre: 4px 4px 0 var(--encre);
  --ombre-petite: 3px 3px 0 var(--encre);
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
a { color: var(--bleu); }

.enveloppe {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Lien d'évitement clavier */
.skip {
  position: absolute;
  left: -9999px;
  background: var(--encre);
  color: var(--papier);
  padding: 10px 16px;
  z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- En-tête ---------- */
.entete {
  border-bottom: var(--trait);
  background: var(--papier);
}
.entete .enveloppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  /* Cinq familles ne tiennent pas à côté du logo sur un téléphone :
     la nav passe à la ligne plutôt que de faire déborder la page. */
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.logo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.logo .deux {
  color: var(--accent);
  font-style: italic;
}
.entete nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.9rem;
  font-weight: 600;
}
.entete nav a {
  color: var(--encre-doux);
  text-decoration: none;
}
.entete nav a:hover { color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  padding: 40px 0 32px;
  border-bottom: var(--trait);
}
.hero h1 {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  font-weight: 700;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero p {
  margin: 0 0 20px;
  font-size: 1.05rem;
  color: var(--encre-doux);
  max-width: 62ch;
}

/* Bandeau de promesses : ce que le site fait, annoncé d'entrée.
   C'est l'équivalent structurel d'un bandeau de couverture de manuel. */
.promesses {
  display: grid;
  grid-template-columns: 1fr;
  border: var(--trait);
  box-shadow: var(--ombre);
  background: var(--surface);
  margin-bottom: 24px;
  max-width: 640px;
}
.promesse {
  padding: 12px 16px;
  border-bottom: 1px dashed var(--filet);
}
.promesse:last-child { border-bottom: 0; }
.promesse strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--accent);
}
.promesse span {
  font-size: 0.86rem;
  color: var(--encre-doux);
}

/* ---------- Sections ---------- */
.section { padding: 36px 0; }
.section + .section { border-top: var(--trait); }

.titre-section {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  font-weight: 700;
}
.chapeau {
  margin: 0 0 24px;
  color: var(--encre-doux);
  max-width: 62ch;
}

/* Étiquette de rubrique */
.etiquette {
  display: inline-block;
  border: var(--trait);
  background: var(--or);
  color: var(--encre);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  margin-bottom: 12px;
}

/* ---------- Grille de jeux ---------- */
.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carte {
  border: var(--trait);
  background: var(--surface);
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  /* transform seul : pas de reflow au survol */
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.carte:hover,
.carte:focus-within {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--encre);
}
.carte a.lien-carte {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.carte-visuel {
  position: relative;
  border-bottom: var(--trait);
  background: var(--papier-creux);
}
/* Vignette carrée 330x330 : ratio respecté, jamais d'étirement */
.carte-visuel img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* Repli quand aucune vignette n'existe pour ce jeu */
.carte-visuel .repli {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: var(--papier-creux);
}
.carte-format {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--encre);
  color: var(--papier);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
}
.carte-corps {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
.carte h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.carte p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--encre-doux);
  flex: 1;
}
.carte-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--encre-doux);
  border-top: 1px dashed var(--filet);
  padding-top: 10px;
}
.carte-pied .fleche {
  font-weight: 700;
  color: var(--accent);
}

/* ---------- Fiches techniques (page jeu) ---------- */
.fil {
  font-size: 0.82rem;
  color: var(--encre-doux);
  padding: 14px 0;
}
.fil a { color: var(--encre-doux); }
.fil span[aria-current] { font-weight: 600; color: var(--encre); }

.jeu-titre { padding-bottom: 20px; }
.jeu-titre h1 {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-wrap: balance;
}
/* Mobile : titre, puis encart (visuel + bouton), puis le texte */
.jeu-layout { display: flex; flex-direction: column; gap: 8px; }
.jeu-accroche {
  font-size: 1.08rem;
  color: var(--encre-doux);
  margin: 0 0 20px;
  max-width: 60ch;
}
.jeu-visuel {
  border: var(--trait);
  box-shadow: var(--ombre);
  margin-bottom: 20px;
  background: var(--papier-creux);
}
.jeu-visuel img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Tableau des caractéristiques */
.fiche {
  border: var(--trait);
  background: var(--surface);
  box-shadow: var(--ombre);
  margin-bottom: 24px;
}
.fiche dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
}
.fiche dt,
.fiche dd {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--filet);
  font-size: 0.9rem;
}
.fiche dt {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  background: var(--papier-creux);
  border-right: 1px dashed var(--filet);
  white-space: nowrap;
}
.fiche dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* ---------- Bouton d'appel ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  border: var(--trait);
  box-shadow: none;
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bouton:hover {
  transform: translate(-2px, -2px);
  box-shadow: none;
}
.bouton:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.bouton.secondaire { background: var(--bleu); }
.bouton-note {
  display: block;
  font-size: 0.82rem;
  color: var(--encre-doux);
  margin-top: 10px;
}

/* ---------- Corps rédactionnel ---------- */

/* Article sans encart latéral : on borne la colonne, sinon les blocs
   s'étirent sur 1080px alors que le texte s'arrête à 66 caractères. */
.article-seul { max-width: 760px; }


.prose h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin: 32px 0 12px;
  padding-bottom: 6px;
  border-bottom: var(--trait);
}
.prose h3 {
  font-family: var(--serif);
  font-size: 1.12rem;
  margin: 22px 0 8px;
}
.prose p { margin: 0 0 14px; max-width: 66ch; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; max-width: 66ch; }
.prose li { margin-bottom: 7px; }
.prose strong { font-weight: 700; }

/* Tableaux rédactionnels (barèmes, valeurs de cartes, motifs de déduction).
   Enveloppés dans .table-scroll : un barème large doit défiler dans son cadre,
   jamais faire déborder la page sur mobile. */
.table-scroll {
  overflow-x: auto;
  border: var(--trait);
  box-shadow: var(--ombre);
  background: var(--surface);
  margin: 0 0 24px;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
  margin: 0;
}
.table-scroll caption {
  caption-side: top;
  text-align: left;
  padding: 10px 12px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: var(--trait);
  background: var(--papier-creux);
}
.table-scroll th,
.table-scroll td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px dashed var(--filet);
  white-space: nowrap;
}
.table-scroll thead th {
  background: var(--papier-creux);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: var(--trait);
}
.table-scroll tbody tr:last-child th,
.table-scroll tbody tr:last-child td { border-bottom: 0; }
.table-scroll tbody th {
  font-weight: 700;
  border-right: 1px dashed var(--filet);
}
/* Une cellule de commentaire peut revenir à la ligne, un barème non */
.table-scroll td.libre { white-space: normal; min-width: 22ch; }

/* ---------- Grilles illustratives des pages de règles ---------- */

/* Ces tableaux ne sont pas des barèmes : ils dessinent un plateau (une grille de
   2048, un motif de démineur, une rangée de tuiles). D'où deux différences avec
   .table-scroll, qui les vise pourtant aussi :
   - ils se dimensionnent sur leur contenu et se centrent, au lieu de s'étirer ;
   - chaque cellule porte son propre cadre, à la place des filets pointillés.

   Les règles ci-dessous sont donc préfixées par .table-scroll et portent une classe
   de cellule : trois classes, ce qui passe devant .table-scroll tbody tr:last-child td
   (deux classes) et lui reprend la main sur les bordures de la dernière ligne.

   Les couleurs qui imitent un vrai plateau (le beige du 2048, le bois du taquin, les
   touches du Simon) sont en dur : comme les diagrammes SVG, une grille de jeu qui
   s'inverse en mode sombre devient fausse. Les variables de thème ne servent que
   quand la cellule est du texte neutre, ou quand la paire fond/texte s'inverse
   ensemble (var(--accent) sur var(--papier), par exemple, reste lisible des deux côtés). */
.table-scroll table.grille-jeu {
  width: auto;
  margin: 0 auto;
}

/* Explication posée sous le cadre. Un <caption> ne peut pas être plus large que son
   tableau sans l'étirer : sur une grille étroite, la légende longue vit donc ici. */
.prose .grille-note {
  font-size: 0.84rem;
  color: var(--encre-doux);
  margin: -14px 0 24px;
  max-width: 66ch;
}

/* 2048 : les teintes de l'original, du beige au doré, en dur. */
.table-scroll table.g2048 { background: #bbada0; }
.table-scroll .g2048 td.tuile {
  border: 3px solid #bbada0;
  width: 58px;
  height: 58px;
  padding: 0;
  text-align: center;
  font-weight: 800;
}
.table-scroll .g2048 td.vide  { background: #cdc1b4; }
.table-scroll .g2048 td.v2    { background: #eee4da; color: #776e65; font-size: 1rem; }
.table-scroll .g2048 td.v4    { background: #ede0c8; color: #776e65; font-size: 1rem; }
.table-scroll .g2048 td.v8    { background: #f2b179; color: #f9f6f2; font-size: 1rem; }
.table-scroll .g2048 td.v16   { background: #f59563; color: #f9f6f2; font-size: 1rem; }
.table-scroll .g2048 td.v32   { background: #f67c5f; color: #f9f6f2; font-size: 1rem; }
.table-scroll .g2048 td.v64   { background: #f65e3b; color: #f9f6f2; font-size: 1rem; }
.table-scroll .g2048 td.v128  { background: #edcf72; color: #f9f6f2; font-size: 1rem; }
.table-scroll .g2048 td.v256  { background: #edcc61; color: #f9f6f2; font-size: 1rem; }
.table-scroll .g2048 td.v512  { background: #edc850; color: #f9f6f2; font-size: 1rem; }
/* À quatre chiffres, la tuile ne tient plus à 1rem */
.table-scroll .g2048 td.v1024 { background: #edc53f; color: #f9f6f2; font-size: 0.8rem; }
.table-scroll .g2048 td.v2048 { background: #edc22e; color: #f9f6f2; font-size: 0.8rem; }

/* Démineur : les motifs de déduction. Le fond rouge / bleu est posé sur var(--papier),
   qui s'inverse avec lui : le couple reste lisible dans les deux thèmes. */
.table-scroll table.g-demineur { font-size: 0.95rem; }
/* L'étiquette de ligne garde les filets pointillés de .table-scroll : c'est une
   légende de tableau, pas une case du plateau. D'où l'absence de bordure ici. */
.table-scroll .g-demineur th.etiq {
  padding: 6px 10px 6px 0;
  text-align: right;
  font-size: 0.75rem;
  color: var(--encre-doux);
  font-weight: 400;
  white-space: nowrap;
}
.table-scroll .g-demineur td.case {
  border: 2px solid var(--encre);
  padding: 10px 14px;
  text-align: center;
  font-weight: 700;
  min-width: 44px;
}
.table-scroll .g-demineur td.inconnue { background: var(--papier-creux); }
.table-scroll .g-demineur td.revele   { color: var(--encre-doux); font-weight: 400; }
.table-scroll .g-demineur td.mine     { background: #c2402a; color: var(--papier); }
.table-scroll .g-demineur td.sure     { background: #1f5578; color: var(--papier); }

/* Mahjong : une rangée de tuiles vue du dessus, et sa ligne d'état. */
.table-scroll table.g-mahjong { font-size: 0.9rem; }
.table-scroll .g-mahjong td.tuile {
  border: 1px solid var(--encre-doux);
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
}
/* .jouable et pas .libre : .table-scroll td.libre existe déjà pour les cellules de
   commentaire des barèmes, et impose min-width: 22ch. */
.table-scroll .g-mahjong td.jouable { background: var(--papier-creux); font-weight: 700; }
.table-scroll .g-mahjong td.bloquee { color: var(--encre-doux); }
.table-scroll .g-mahjong td.etat {
  border: 1px solid var(--encre-doux);
  padding: 6px 12px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--encre-doux);
}

/* MasterMind : tableau des réglages et exemple de comptage. Ces deux-là sont de vrais
   tableaux de données, ils gardent la pleine largeur de .table-scroll (pas de .grille-jeu). */
.table-scroll table.g-mastermind { font-size: 0.88rem; }
.table-scroll .g-mastermind th.tete {
  border: 1px solid var(--encre);
  padding: 7px 10px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--papier-creux);
  white-space: nowrap;
}
.table-scroll .g-mastermind td.val {
  border: 1px solid var(--encre-doux);
  padding: 7px 10px;
  text-align: center;
  white-space: nowrap;
}
.table-scroll .g-mastermind td.val-gauche { text-align: left; }
.table-scroll .g-mastermind td.exact  { font-weight: 700; color: #c2402a; }
/* Le pion coloré : la couleur seule n'est pas une information accessible,
   le nom reste écrit à côté dans le HTML. */
.table-scroll .g-mastermind .pion {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--encre);
  vertical-align: -2px;
}
.table-scroll .g-mastermind .pion-rouge { background: #c2402a; }
.table-scroll .g-mastermind .pion-bleu  { background: #1f5578; }
.table-scroll .g-mastermind .pion-vert  { background: #2f7d43; }

/* Memory : le dos des cartes. Le bleu est en dur - var(--bleu) s'éclaircit en mode
   sombre et le texte du dos, lui, reste clair : le couple devenait illisible.
   .dos et pas .carte : .carte est la carte de jeu du portail, et elle est en
   display: flex - sur un <td>, elle démonte la grille. */
.table-scroll table.g-memory { font-size: 0.9rem; }
.table-scroll .g-memory .etiq {
  border: 0;
  padding: 6px 10px 6px 0;
  text-align: right;
  font-size: 0.75rem;
  color: var(--encre-doux);
  font-weight: 400;
}
.table-scroll .g-memory th.coord {
  border: 0;
  padding: 6px 10px;
  font-size: 0.75rem;
  color: var(--encre-doux);
  font-weight: 400;
  background: none;
}
.table-scroll .g-memory td.dos {
  border: 1px solid var(--encre-doux);
  width: 56px;
  height: 56px;
  padding: 0;
  text-align: center;
  background: #1f5578;
  color: #faf6ef;
  font-weight: 700;
  font-size: 0.86rem;
}

/* Simon : les quatre touches. Teintes du jouet, en dur, filet clair entre les touches. */
.table-scroll .g-simon th.etiq {
  border: 0;
  padding: 6px 14px 6px 0;
  text-align: right;
  font-size: 0.75rem;
  color: var(--encre-doux);
  font-weight: 400;
  white-space: nowrap;
}
.table-scroll .g-simon td.touche {
  border: 2px solid #faf6ef;
  width: 74px;
  height: 44px;
  padding: 0;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #faf6ef;
}
.table-scroll .g-simon td.c-vert  { background: #2f8f4e; }
.table-scroll .g-simon td.c-rouge { background: #c2402a; }
.table-scroll .g-simon td.c-jaune { background: #e5b636; }
.table-scroll .g-simon td.c-bleu  { background: #22557a; }

/* Sudoku : grilles de candidats. Du papier et du crayon : les variables de thème
   conviennent, il n'y a aucune couleur de plateau à préserver. */
.table-scroll table.g-sudoku { font-size: 0.8rem; line-height: 1.35; }
.table-scroll .g-sudoku td.candidat {
  border: 1px solid var(--encre-doux);
  padding: 7px 9px;
  text-align: center;
  color: var(--encre-doux);
  letter-spacing: 2px;
  min-width: 64px;
}
.table-scroll .g-sudoku td.donne {
  border: 1px solid var(--encre-doux);
  padding: 7px 9px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--papier-creux);
  min-width: 64px;
}
.table-scroll .g-sudoku td.cible {
  border: 2px solid #c2402a;
  padding: 7px 9px;
  text-align: center;
  color: var(--encre-doux);
  letter-spacing: 2px;
  min-width: 64px;
}
/* .coord et pas .entete : .entete est l'en-tête du site. */
.table-scroll .g-sudoku th.coord {
  border: 1px solid var(--encre-doux);
  padding: 4px 9px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--encre-doux);
  font-weight: 400;
}
/* Le chiffre que la technique fait sortir, au milieu des candidats */
.table-scroll .g-sudoku .trouve { color: #c2402a; }

/* Taquin : tuiles de bois clair dans leur cadre, en dur. */
.table-scroll .g-taquin td.tuile {
  border: 1px solid #14110d;
  width: 52px;
  height: 52px;
  padding: 0;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  background: #efe2c6;
  color: #14110d;
}
/* Les deux tuiles interverties du défi « 14-15 » */
.table-scroll .g-taquin td.marquee { background: #c2402a; color: #faf6ef; }
/* Le trou : il laisse voir le fond de la page, donc il suit le thème */
.table-scroll .g-taquin td.vide {
  border: 1px solid #14110d;
  width: 52px;
  height: 52px;
  padding: 0;
  background: var(--papier-creux);
}

/* Encadré de règle */
.encadre {
  border: var(--trait);
  border-left: 6px solid var(--bleu);
  background: var(--surface);
  padding: 14px 16px;
  margin: 0 0 20px;
}
.encadre p:last-child { margin-bottom: 0; }
.encadre .encadre-titre {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 6px;
}

/* ---------- Diagrammes SVG ---------- */
.figure {
  margin: 0 0 24px;
  border: var(--trait);
  background: var(--surface);
  box-shadow: var(--ombre);
  padding: 14px;
}
.figure figcaption {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--filet);
  font-size: 0.84rem;
  color: var(--encre-doux);
  line-height: 1.45;
}
.damier { width: 100%; height: auto; display: block; }
/* Couleurs en dur : un diagramme doit rester lisible dans les deux thèmes,
   un damier qui s'inverse en mode sombre devient incompréhensible. */
.dg-tapis  { fill: #35705a; }
.dg-ligne  { stroke: #14110d; stroke-width: 1.5; }
/* Exception à la règle « couleurs figées » : les coordonnées sont dans la marge du
   SVG, donc posées sur le fond de la figure, qui suit le thème. En couleur fixe,
   elles tombaient à 2,3:1 en mode sombre. Le plateau, lui, reste figé. */
.dg-coord  { fill: var(--encre-doux); font-size: 11px; font-family: var(--sans); font-weight: 600; }
.dg-pion   { stroke: #14110d; stroke-width: 1.5; }
.dg-noir   { fill: #14110d; }
.dg-blanc  { fill: #faf6ef; }
.dg-coin   { fill: none; stroke: #c2402a; stroke-width: 3; }
.dg-axe    { stroke: #c2402a; stroke-width: 3; stroke-linecap: round; }
.dg-marque { fill: none; stroke-width: 2.5; }
.dg-legal  { stroke: #faf6ef; stroke-dasharray: 4 4; }
.dg-cible  { stroke: #c2402a; stroke-dasharray: 4 4; }
.dg-danger { stroke: #c2402a; }

/* Damier (dames, échecs) */
.dg-case-claire { fill: #efe2c6; }
.dg-case-sombre { fill: #a9805a; }
.dg-couronne { fill: none; stroke: #c2402a; stroke-width: 2.5; }
.dg-piece { font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", serif; }
.dg-piece-blanche { fill: #faf6ef; stroke: #14110d; stroke-width: 1.6; paint-order: stroke fill; }
.dg-piece-noire   { fill: #14110d; stroke: #faf6ef; stroke-width: 0.6; paint-order: stroke fill; }

/* Puissance 4 */
.dg-grille-p4 { fill: #22557a; }
.dg-trou   { fill: #faf6ef; stroke: #14110d; stroke-width: 1.2; }
.dg-jeton  { stroke: #14110d; stroke-width: 1.5; }
.dg-rouge  { fill: #c2402a; }
.dg-jaune  { fill: #e5b636; }

/* Morpion */
.dg-croix { stroke: #c2402a; stroke-width: 6; stroke-linecap: round; }
.dg-rond  { fill: none; stroke: #22557a; stroke-width: 6; }

/* Gomoku : plateau de bois, pierres sur les intersections */
.dg-bois { fill: #d9b072; }

/* Bataille navale */
.dg-mer    { fill: #cfe0ea; }
.dg-navire { fill: #5c564d; stroke: #14110d; stroke-width: 1.5; }
.dg-rate   { stroke: #5c564d; stroke-width: 2.5; stroke-linecap: round; }
.dg-touche { fill: #c2402a; stroke: #14110d; stroke-width: 1.5; }
.dg-coule  { fill: #14110d; }

/* Deux diagrammes côte à côte (avant / après) */
.duo-figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.duo-figures .figure { margin-bottom: 0; }

/* ---------- Blocs éditoriaux ---------- */

/* Résumé en tête d'article */
.essentiel {
  border: var(--trait);
  border-left: 6px solid var(--accent);
  background: var(--surface);
  box-shadow: var(--ombre);
  padding: 16px 18px;
  margin: 0 0 28px;
}
.essentiel h2 {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin: 0 0 10px;
  border: 0;
  padding: 0;
}
.essentiel ul { margin: 0; padding-left: 18px; }
.essentiel li { margin-bottom: 5px; font-size: 0.94rem; }

/* Mise en garde : la version en ligne diffère de la règle officielle */
.nuance {
  border: var(--trait);
  border-left: 6px solid var(--or);
  background: var(--surface);
  padding: 14px 16px;
  margin: 0 0 20px;
}
.nuance .encadre-titre {
  font-family: var(--serif);
  font-weight: 700;
  margin: 0 0 6px;
}
.nuance p:last-child { margin-bottom: 0; }

/* Sources en fin d'article */
.sources {
  border-top: var(--trait);
  margin-top: 36px;
  padding-top: 16px;
  font-size: 0.86rem;
}
.sources h2 {
  font-family: var(--serif);
  font-size: 1rem;
  margin: 0 0 8px;
  border: 0;
  padding: 0;
}
.sources ul { margin: 0; padding-left: 18px; }
.sources li { margin-bottom: 5px; color: var(--encre-doux); }

/* Sommaire d'article */
.sommaire {
  border: var(--trait);
  background: var(--papier-creux);
  padding: 14px 16px;
  margin: 0 0 28px;
}
.sommaire h2 {
  font-family: var(--serif);
  font-size: 0.95rem;
  margin: 0 0 8px;
  border: 0;
  padding: 0;
}
.sommaire ol { margin: 0; padding-left: 20px; font-size: 0.9rem; }
.sommaire li { margin-bottom: 4px; }
.sommaire a { color: var(--encre); }

/* Renvoi vers le jeu en ligne, en fin de page de règles */
.aller-jouer {
  border: var(--trait);
  background: var(--papier-creux);
  box-shadow: var(--ombre);
  padding: 20px;
  margin: 32px 0 0;
}
.aller-jouer h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 0 0 10px;
  border: 0;
  padding: 0;
}
.aller-jouer p { margin: 0 0 14px; }

/* Index par famille : la liste dense d'un sommaire d'ouvrage, pas une vitrine.
   On veut voir les 24 jeux vite, pas admirer des vignettes. */
.famille { padding: 32px 0; }
.famille + .famille { border-top: var(--trait); }
.famille-entete { margin-bottom: 18px; }
.famille-entete h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.famille-entete h2 .compte {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--encre-doux);
  letter-spacing: 0;
}
.famille-entete p {
  margin: 0;
  color: var(--encre-doux);
  max-width: 62ch;
  font-size: 0.95rem;
}

.index {
  display: grid;
  /* minmax(0, 1fr) et non 1fr : un élément de grille a min-width:auto par défaut,
     donc il refuse de descendre sous la largeur de son contenu. L'accroche en
     white-space:nowrap poussait alors la ligne à 880px au lieu d'être tronquée. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.index li { min-width: 0; }
.index a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: var(--trait);
  background: var(--surface);
  box-shadow: var(--ombre-petite);
  padding: 10px 14px 10px 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.index a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--encre);
}
.index .vignette {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--encre);
  flex-shrink: 0;
}
.index .vignette-repli {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--encre);
  background: var(--papier-creux);
  font-size: 1.6rem;
  flex-shrink: 0;
}
.index .texte { flex: 1; min-width: 0; }
.index .nom {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  display: block;
}
.index .accroche {
  display: block;
  font-size: 0.86rem;
  color: var(--encre-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index .meta {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--encre-doux);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Liste de jeux hors ligne (papier-crayon, jeux de société) */
.jeu-hors-ligne {
  border: var(--trait);
  background: var(--surface);
  box-shadow: var(--ombre);
  padding: 18px;
  margin-bottom: 20px;
}
.jeu-hors-ligne h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 0 0 4px;
}
.jeu-hors-ligne .materiel {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--encre-doux);
  margin: 0 0 10px;
}
.jeu-hors-ligne p { margin: 0 0 10px; }
.jeu-hors-ligne p:last-child { margin-bottom: 0; }
.jeu-hors-ligne .aussi-en-ligne {
  border-top: 1px dashed var(--filet);
  padding-top: 10px;
  margin-top: 12px;
  font-size: 0.88rem;
}

/* ---------- FAQ ---------- */
.faq details {
  border: var(--trait);
  background: var(--surface);
  margin-bottom: 10px;
}
.faq summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 0.95rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--accent);
}
.faq details[open] summary::after { content: "\2212"; }
.faq .reponse {
  padding: 0 14px 14px;
  font-size: 0.94rem;
  color: var(--encre-doux);
}
.faq .reponse p { margin: 0; }

/* ---------- Autres jeux en bas de fiche ---------- */
.mini-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mini-grille a {
  display: flex;
  align-items: center;
  gap: 10px;
  border: var(--trait);
  background: var(--surface);
  padding: 8px 10px;
  text-decoration: none;
  color: var(--encre);
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: var(--ombre-petite);
  transition: transform 0.12s ease;
}
.mini-grille a:hover { transform: translate(-2px, -2px); }
.mini-grille img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--encre);
  flex-shrink: 0;
}
.mini-grille .repli-mini {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--encre);
  background: var(--papier-creux);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ---------- Pied de page ---------- */
.pied {
  border-top: var(--trait);
  background: var(--papier-creux);
  padding: 28px 0;
  margin-top: 40px;
  font-size: 0.88rem;
}
.pied .colonnes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.pied h2 {
  font-family: var(--serif);
  font-size: 1rem;
  margin: 0 0 8px;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 5px; }
.pied a { color: var(--encre-doux); text-decoration: none; }
.pied a:hover { color: var(--accent); text-decoration: underline; }
.pied .mention {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--filet);
  color: var(--encre-doux);
  font-size: 0.82rem;
}

/* ---------- Page 404 ---------- */
.page-404 { padding: 60px 0; text-align: center; }
.page-404 h1 { font-family: var(--serif); font-size: 2.4rem; margin: 0 0 12px; }

/* ---------- Élargissement tablette ---------- */
@media (min-width: 620px) {
  body { font-size: 18px; }
  .hero { padding: 56px 0 40px; }
  .hero h1 { font-size: 2.8rem; }
  .grille { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .jeu-titre h1 { font-size: 2.4rem; }
  .titre-section { font-size: 1.8rem; }
  .pied .colonnes { grid-template-columns: repeat(3, 1fr); }
  .mini-grille { grid-template-columns: repeat(3, 1fr); }
  .duo-figures { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Élargissement desktop ---------- */
@media (min-width: 960px) {
  .enveloppe { padding: 0 24px; }
  .hero h1 { font-size: 3.2rem; max-width: 24ch; }
  .grille { grid-template-columns: repeat(3, 1fr); }
  .prose h2 { font-size: 1.6rem; }
  .jeu-titre h1 { font-size: 2.6rem; max-width: 20ch; }

  /* Fiche de jeu sur deux colonnes : le texte à gauche, l'encart suit la lecture */
  .jeu-layout {
    display: grid;
    grid-template-columns: 1fr 330px;
    /* aucun écart vertical : le titre et le texte forment un seul bloc de lecture */
    gap: 0 40px;
    align-items: start;
  }
  .jeu-layout .jeu-titre     { grid-column: 1; grid-row: 1; }
  .jeu-layout .jeu-principal { grid-column: 1; grid-row: 2; }
  .jeu-layout .jeu-aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 20px;
  }
  .jeu-visuel { margin-bottom: 16px; }
  /* Le second appel en bas de page ferait doublon avec l'encart persistant */
  .jeu-principal .rappel-cta { display: none; }
}

/* ---------- Confort nocturne ---------- */
/*
 * Le thème sombre se règle UNIQUEMENT en redéfinissant les variables.
 * Surtout ne pas revenir à une liste de sélecteurs à repeindre à la main :
 * elle avait été écrite pour 8 blocs, 5 autres ont été ajoutés ensuite sans y
 * être inscrits, et sont restés blancs avec du texte crème dessus.
 * Un nouveau bloc qui utilise var(--surface) et var(--filet) suit le thème seul.
 *
 * Les diagrammes SVG (.dg-*) et les grilles de jeu (.g2048, .g-demineur…) gardent
 * volontairement leurs couleurs en dur : un damier qui s'inverse devient illisible.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #17150f;
    --papier-creux: #211e16;
    --encre: #f3ece0;
    --encre-doux: #a9a294;
    --accent: #5aa383;
    --bleu: #6aa9d4;
    --or: #d9a53c;
    --surface: #221f17;
    --filet: #3b362b;
    --ombre: 4px 4px 0 #000;
    --ombre-petite: 3px 3px 0 #000;
    --trait: 2px solid #000;
  }
  /* Les ombres portées sont noires sur fond sombre, pas couleur encre */
  .carte:hover, .carte:focus-within,
  .bouton:hover,
  /* Texte posé sur un aplat clair : il doit repasser en sombre */
  .bouton { color: #17150f; }
  .etiquette { color: #17150f; }
  .carte-format { background: #000; color: var(--encre); }
}

/* ---------- Impression ---------- */
@media print {
  .entete nav, .bouton, .faq summary::after { display: none; }
  body { background: #fff; }
  .carte, .fiche { box-shadow: none; }
}

/* ---------- Respect des préférences de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}