/* Guides du Snake (/guides/*.php) : tout ce qui ne vient pas du socle
   article.css. Chargé par chaque guide avec ?v=filemtime. */

/* Sommaire en tête de guide */
.sommaire { background: rgba(74, 222, 128, 0.06); border: 1px solid rgba(74, 222, 128, 0.22); border-radius: 12px; padding: 16px 20px; margin: 24px 0; }
.sommaire strong { display: block; color: var(--color-accent); font-size: 0.95rem; margin-bottom: 8px; }
.sommaire ul { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.sommaire li { margin: 0; padding: 0; }
.sommaire li::before { content: none; }
.sommaire a { color: var(--color-light); font-size: 0.9rem; font-weight: 600; text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, 0.3); padding-bottom: 1px; }
.sommaire a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* Hub /guides/ : message quand aucun guide n'est listé */
.guides-vide { text-align: center; color: #94a3b8; padding: 40px 0; }

/* Captures du jeu : largeur plafonnée, jamais plus large que la colonne. Le sélecteur
   reprend celui du socle (.article-card img.screenshot), qui sinon l'emporte. */
.article-card img.screenshot.capture-jeu { max-width: 520px; width: 100%; height: auto; }

/* Fiche du jeu (guide des règles) et fiches de mode */
.fiche-jeu { background: rgba(74, 222, 128, 0.06); border: 1px solid rgba(74, 222, 128, 0.22); border-radius: 12px; padding: 16px 20px; margin: 24px 0; }
.fiche-jeu h2,
.fiche-jeu h3 { margin-top: 0; }
.fiche-jeu dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.fiche-jeu dt { color: var(--color-accent); font-weight: 600; font-size: 0.92rem; }
.fiche-jeu dd { margin: 0; color: #c6ccd4; font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 560px) {
  .fiche-jeu dl { grid-template-columns: 1fr; gap: 2px; }
  .fiche-jeu dd { margin-bottom: 8px; }
}

/* Tableaux chiffrés : légende lisible, première colonne mise en avant */
.article-card table.table-chiffres caption { caption-side: bottom; text-align: left; font-size: 0.85rem; color: #94a3b8; padding-top: 8px; line-height: 1.5; }
.article-card table.table-chiffres tbody th { color: var(--color-accent); }
.article-card table.table-chiffres thead th { white-space: normal; }

/* Figure du peigne et de la double spirale : le trajet tracé sur la grille 20×20,
   aux couleurs du jeu (fond sombre, serpent vert). */
.figure-trajet { margin: 20px 0 24px; text-align: center; }
.figure-trajet svg { width: 100%; max-width: 340px; height: auto; background: #0b0b1a; border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 8px; }
.figure-trajet .trajet { fill: none; stroke: #4ade80; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.figure-trajet .trajet-retour { fill: none; stroke: #22d3ee; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.figure-trajet .depart { fill: #f2f5f8; }
.figure-trajet figcaption { font-size: 0.88rem; color: #94a3b8; margin-top: 8px; line-height: 1.5; }