/* Guides : sommaire en cartes, étapes illustrées, puces de sheltoms, recettes filtrables (mixing), fiches de quêtes. */
main > p, main > ol.regles { max-width: 720px; }

/* Sommaire : la carte entière est le lien. */
.guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; max-width: 860px; }
.guides a { display: grid; align-content: start; gap: 4px; height: 100%; padding: 14px 16px; background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); color: var(--texte); text-decoration: none; box-shadow: 0 2px 10px rgba(60, 35, 10, .05); }
.guides strong { font-family: var(--titre); font-size: 18px; line-height: 1.25; color: var(--bleu); }
.guides span { color: var(--doux); font-size: 14px; }
.guides a:hover { border-color: var(--or); }
.guides a:hover strong { color: var(--brun); }

/* Illustrations */
.figure { max-width: 520px; margin: 0 0 4px; }
.figure img, .etapes img { display: block; max-width: 100%; height: auto; border: 1px solid var(--bord); border-radius: 8px; background: #000; }
figcaption { margin-top: 6px; font-size: 14px; color: var(--doux); }

/* Étapes numérotées, une image (ou une paire) et sa légende. */
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px 20px; }
.etapes li { counter-increment: etape; min-width: 0; }
.etapes p { margin: 8px 0 0; }
.etapes p::before { content: counter(etape); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  background: var(--bleu); color: #fff; font-size: 13px; font-weight: 700; vertical-align: 1px; }
.paire { display: grid; grid-template-columns: minmax(0, 430fr) minmax(0, 175fr); gap: 4px; }
.paire img { width: 100%; }

/* Sheltoms : icône du jeu sur sa case noire, et le nombre. */
.puces { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sh { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.sh img, .legende img { width: 22px; height: 22px; display: block; background: #000; border-radius: 4px; }
.sh b { font-weight: 600; }

/* Tableaux dont le texte passe à la ligne. */
.mix td, .touches td { white-space: normal; }
.mix td:first-child { min-width: 130px; }
.touches td:first-child { white-space: nowrap; }
/* Un tableau étroit ne s'étire pas sur toute la largeur ; en 390 px, il garde la largeur de l'écran. */
.defile.compact { display: inline-block; max-width: 100%; vertical-align: top; }
.defile.etroit { max-width: 780px; }
/* Tableau qui défile en 390 px : la première colonne reste visible. */
.colle td:first-child { position: sticky; left: 0; background: var(--carte); }
.colle tbody tr:nth-child(even) td:first-child { background: #fbf6ec; }
.colle th:first-child { left: 0; z-index: 2; }
.fixe { color: var(--doux); }

/* Mixing : filtres par type et par sheltom (la légende des icônes). */
.legende button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 4px; font-size: 13px; }
.recettes h2 { margin-top: 22px; }
/* Les quatre tableaux de recettes gardent la même colonne de sheltoms, alignée d'un tableau à l'autre. */
@media (min-width: 761px) { .mix th:first-child { width: 290px; } }

.filtres button:focus-visible, .guides a:focus-visible { outline: 2px solid var(--bleu); outline-offset: 1px; }

/* Objets spec */
.bonus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 28px; max-width: 900px; }
.bonus li { padding: 7px 0; border-bottom: 1px solid #efe4d2; }
.bonus strong { font-weight: 600; }
.bonus span { display: block; font-size: 14px; color: var(--doux); }

/* Commandes */
kbd, .touches code { font: 600 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--texte); background: #f6efe2; border: 1px solid var(--bord);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.touches code { background: #edf3fb; border-color: #c9d7ea; }
.touches var { font-style: italic; color: var(--doux); }
.touches td:first-child { width: 1%; }

/* Expérience */
.regles { display: grid; gap: 6px; padding-left: 22px; margin: 0; }

/* Quêtes : une fiche par quête, la récompense en avant. */
.quetes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.quete { min-width: 0; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; }
.quete h2 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; }
/* Le niveau en brun : l'or du site (--or) n'a que 3,3:1 sur le blanc, il faut 4,5:1 pour ce corps (8,9:1). */
.quete .niv { display: block; font: 700 12px/1.5 var(--texte-police); letter-spacing: .04em; text-transform: uppercase; color: var(--brun); }
.quete dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.quete dt { color: var(--doux); font-size: 14px; padding-top: 1px; }
.quete dd { margin: 0; }
.quete .recompense { font-weight: 700; color: var(--bleu); }
.quete .note { margin: 10px 0 0; font-size: 14px; }
.butin { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }