/* =====================================================================
   Feuille de style des PAGES DE PRÉSENTATION — le dossier /yams/.

   Ces pages (règles, feuille à imprimer, les façons de jouer, les deux
   défis) existent pour Google : ce sont des pages de TEXTE, légères, qui
   s'affichent sans lancer le jeu, et qui renvoient toutes vers lui.

   ⚠️ CETTE FEUILLE VIENT APRÈS /legal.css, ELLE NE LE REMPLACE PAS.
   La palette, l'en-tête, les cartes et les boutons sont ceux des pages
   légales — eux-mêmes copiés d'index.html. Une seule copie de la palette
   pour toutes les pages annexes : c'est le lien qu'il ne faut pas multiplier.
   Ici ne vit que ce que les pages légales n'ont pas : le bandeau d'appel,
   les dés dessinés, le tableau des points, la FAQ, la barre du guide.

   Chemins absolus, comme dans legal.css : les pages anglaises vivent un
   cran plus bas, dans /yams/en/.
   ===================================================================== */

/* ---------- La barre du guide : les sept pages, en pied de chaque page ----------
   C'est aussi le maillage interne : chaque page reçoit un lien de toutes les
   autres, ce que Google lit comme « cette page compte dans le site ». */
.guide-nav{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 8px}
/* Placée en PIED de page, et non en tête : sept pastilles au-dessus du texte
   repoussaient le bouton « Jouer » sous le premier écran d'un téléphone. */
.guide-nav .gn-t{width:100%; margin:0 0 2px; font-family:'Outfit',sans-serif; font-weight:700;
  color:var(--muted); font-size:14px}
.guide-nav a{
  font-size:13.5px; font-weight:600; text-decoration:none; padding:7px 13px;
  border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--muted)
}
.guide-nav a:hover{color:var(--ink); border-color:var(--line-strong)}
.guide-nav a[aria-current="page"]{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink)}

/* ---------- Le fil d'Ariane ---------- */
.crumbs{font-size:13px; color:var(--muted); margin:0 0 10px}
.crumbs a{color:var(--muted)}
.crumbs span[aria-hidden]{margin:0 6px; opacity:.6}

/* ---------- L'appel à jouer : en tête et en pied de chaque page ---------- */
.cta{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 22px}
.cta-band{
  background:var(--accent-fill); color:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; margin:22px 0 16px
}
.cta-band h2{color:#fff; margin-bottom:4px}
.cta-band p{margin:4px 0 14px; opacity:.92}
.cta-band .btn{background:#fff; color:var(--accent-fill)}
.cta-band .btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55)}

/* ---------- Les dés dessinés ----------
   Des images SVG en ligne plutôt que les caractères ⚀…⚅ : ceux-ci se dessinent
   différemment sur chaque système, et le mode contraste élevé de Samsung les
   repeignait en aplats noirs (voir le correctif du jeu, même cause). Un dé est
   un objet blanc dans les deux thèmes ; `forced-color-adjust` le protège du
   repeint des modes à fort contraste. */
.dice{display:inline-flex; gap:4px; vertical-align:middle; forced-color-adjust:none}
.d{width:26px; height:26px; display:inline-block; flex:none; background:center/contain no-repeat}
.d1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' rx='5' fill='%23fff' stroke='%23CFCBBD' stroke-width='1.5'/%3E%3Cg fill='%2316211C'%3E%3Ccircle cx='12' cy='12' r='2.3'/%3E%3C/g%3E%3C/svg%3E")}
.d2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' rx='5' fill='%23fff' stroke='%23CFCBBD' stroke-width='1.5'/%3E%3Cg fill='%2316211C'%3E%3Ccircle cx='6.5' cy='6.5' r='2.3'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.3'/%3E%3C/g%3E%3C/svg%3E")}
.d3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' rx='5' fill='%23fff' stroke='%23CFCBBD' stroke-width='1.5'/%3E%3Cg fill='%2316211C'%3E%3Ccircle cx='6.5' cy='6.5' r='2.3'/%3E%3Ccircle cx='12' cy='12' r='2.3'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.3'/%3E%3C/g%3E%3C/svg%3E")}
.d4{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' rx='5' fill='%23fff' stroke='%23CFCBBD' stroke-width='1.5'/%3E%3Cg fill='%2316211C'%3E%3Ccircle cx='6.5' cy='6.5' r='2.3'/%3E%3Ccircle cx='17.5' cy='6.5' r='2.3'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.3'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.3'/%3E%3C/g%3E%3C/svg%3E")}
.d5{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' rx='5' fill='%23fff' stroke='%23CFCBBD' stroke-width='1.5'/%3E%3Cg fill='%2316211C'%3E%3Ccircle cx='6.5' cy='6.5' r='2.3'/%3E%3Ccircle cx='17.5' cy='6.5' r='2.3'/%3E%3Ccircle cx='12' cy='12' r='2.3'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.3'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.3'/%3E%3C/g%3E%3C/svg%3E")}
.d6{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' rx='5' fill='%23fff' stroke='%23CFCBBD' stroke-width='1.5'/%3E%3Cg fill='%2316211C'%3E%3Ccircle cx='6.5' cy='6' r='2.3'/%3E%3Ccircle cx='17.5' cy='6' r='2.3'/%3E%3Ccircle cx='6.5' cy='12' r='2.3'/%3E%3Ccircle cx='17.5' cy='12' r='2.3'/%3E%3Ccircle cx='6.5' cy='18' r='2.3'/%3E%3Ccircle cx='17.5' cy='18' r='2.3'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- Une combinaison : les dés, le nom, les points ---------- */
.combo{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px 14px;
  padding:12px 0; border-top:1px solid var(--line)}
.combo:first-of-type{border-top:0}
.combo .cn{font-weight:700}
.combo .cn small{display:block; font-weight:500; color:var(--muted); font-size:13px}
.combo .cp{font-weight:700; color:var(--accent-ink); text-align:right; white-space:nowrap}
@media (max-width:430px){
  .combo{grid-template-columns:1fr auto}
  .combo .dice{grid-column:1 / -1}
  .d{width:22px; height:22px}
}

/* ---------- Le tableau des points ---------- */
.table-wrap{overflow-x:auto; margin:10px 0}
table{border-collapse:collapse; width:100%; font-size:15px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:'Outfit',sans-serif; font-weight:700; color:var(--accent-ink); font-size:14px}
td.n{text-align:right; white-space:nowrap; font-weight:700}
tr.sum td{font-weight:700; background:var(--accent-soft)}

/* ---------- Les étapes numérotées ---------- */
ol.steps{counter-reset:s; list-style:none; padding:0}
ol.steps li{counter-increment:s; position:relative; padding-left:40px; margin:12px 0}
ol.steps li::before{
  content:counter(s); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:9px;
  background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center;
  font-family:'Outfit',sans-serif; font-weight:800; font-size:14px
}

/* ---------- Les questions fréquentes ---------- */
.faq dt{font-family:'Outfit',sans-serif; font-weight:700; margin:16px 0 4px}
.faq dt:first-child{margin-top:4px}
.faq dd{margin:0 0 4px}

/* ---------- Les deux feuilles à télécharger ---------- */
.pdf-list{display:grid; gap:10px; margin:12px 0 4px}
.pdf-opt{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px;
  background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--ink);
  transition:border-color .15s ease
}
.pdf-opt:hover{border-color:var(--accent)}
.pdf-ic{width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink);
  display:grid; place-items:center; font-family:'Outfit',sans-serif; font-weight:800; flex:none}
.pdf-tx{display:flex; flex-direction:column; margin-right:auto}
.pdf-tx span{color:var(--muted); font-size:14px}
.pdf-dl{width:22px; height:22px; color:var(--accent); flex:none}

/* ---------- Le sommaire de la page d'accueil du guide ---------- */
.toc{display:grid; gap:12px}
.toc a{display:block; text-decoration:none; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow)}
.toc a:hover{border-color:var(--accent)}
.toc b{font-family:'Outfit',sans-serif; font-size:1.05rem; display:block; color:var(--accent-ink)}
.toc span{color:var(--muted); font-size:14.5px}