/* ══════════════════════════════════════════════════════════════
   Parcours Poker — le spot du jour (28/10/2026).
   Pages /spot/<slug>.html, /spot-du-jour.html, /spots.html.
   Toutes les couleurs viennent des variables du thème (style.css) ;
   la table en SVG est colorée ici, par ses classes t-….
   ══════════════════════════════════════════════════════════════ */

:root {
  --spot-feutre: #0F3B2C;        /* le tapis vert de l'app, thème Nuit */
  --spot-feutre-bord: #1C5A43;
  --spot-carte: var(--texte);
  --spot-carte-noire: var(--carte);
}

.spot { max-width: 640px; margin: 0 auto; }
.spot-surtitre { color: var(--vert); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .4em; }
.spot-titre { font-size: clamp(1.6rem, 5vw, 2.4rem); margin-bottom: .5em; }
.spot-du-jour-date { color: var(--texte-doux); margin: -.2em 0 1em; }
.spot-du-jour-date::first-letter { text-transform: uppercase; }

.spot-figure { margin: 0 0 14px; }
.spot-table { display: block; width: 100%; height: auto; font-family: var(--sans); }
.t-bord { fill: var(--carte); stroke: var(--carte-bord); stroke-width: 2; }
.t-feutre { fill: var(--spot-feutre); stroke: var(--spot-feutre-bord); stroke-width: 2; }
.t-pot { fill: var(--texte); font-size: 14px; font-weight: 700; }
.t-ante { fill: var(--texte-doux); font-size: 10px; }
.t-siege-fond { fill: var(--carte); stroke: var(--carte-bord); stroke-width: 1.5; }
.t-hero .t-siege-fond { stroke: var(--or); stroke-width: 2.5; }
.t-couche { opacity: .45; }
.t-siege-nom { fill: var(--texte); font-size: 12px; font-weight: 700; }
.t-siege-stack { fill: var(--texte-doux); font-size: 11px; }
.t-carte-fond { fill: var(--spot-carte); stroke: var(--carte-bord); stroke-width: 1; }
.t-carte-rang { font-size: 17px; font-weight: 700; }
.t-carte-couleur { font-size: 16px; }
.t-rouge { fill: var(--rouge); }
.t-noir { fill: var(--spot-carte-noire); }
.t-donneur { fill: var(--texte); stroke: var(--carte-bord); }
.t-donneur-d { fill: var(--spot-carte-noire); font-size: 11px; font-weight: 700; }
.t-jeton { fill: var(--or); stroke: var(--or-sombre); stroke-width: 2; }
.t-mise-texte { fill: var(--or-clair); font-size: 12px; font-weight: 700; }
.t-range { fill: var(--carte); stroke: var(--or); stroke-width: 1.5; }
.t-range-texte { fill: var(--or); font-size: 13px; font-weight: 700; }

.spot-situation { display: grid; gap: 2px; margin: 0 0 12px; }
.spot-situation span:first-child { color: var(--texte-doux); font-size: .9rem; }
.spot-question { font-weight: 700; font-size: 1.15rem; margin: 0 0 10px; }
.spot-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 12px; }
.spot-bouton {
  font: inherit; font-weight: 700; color: var(--texte); background: var(--carte);
  border: 1px solid var(--carte-bord); border-radius: var(--rayon-s); padding: 14px 12px; min-height: 48px; cursor: pointer;
}
.spot-bouton:hover:not([disabled]) { border-color: var(--or-sombre); }
.spot-bouton:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.spot-bouton[disabled] { cursor: default; opacity: .7; }
.spot-bouton.juste { border-color: var(--vert); background: color-mix(in srgb, var(--vert) 16%, var(--carte)); opacity: 1; }
.spot-bouton.faux { border-color: var(--rouge); background: color-mix(in srgb, var(--rouge) 16%, var(--carte)); opacity: 1; }
.spot-compteur { color: var(--texte-doux); min-height: 1.2em; margin: 0 0 10px; }
.spot-compteur:empty { display: none; }

.spot-revelation { border: 1px solid var(--carte-bord); border-radius: var(--rayon-s); background: var(--carte); padding: 12px 16px; margin: 0 0 16px; }
.spot-revelation summary { cursor: pointer; color: var(--or); font-weight: 600; }
.spot-revelation[open] summary { margin-bottom: 8px; }
.spot-bonne strong { color: var(--vert); }
.spot-source { color: var(--texte-doux); font-size: .85rem; margin: 0; }

.spot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.spot-actions .bouton { flex: 1 1 200px; text-align: center; }
.spot-partage-ok { color: var(--vert); word-break: break-word; }
.spot-partage-ok[hidden], .spot-partager[hidden] { display: none; }

.spot-nav { display: flex; justify-content: space-between; gap: 10px; margin: 22px 0 0; font-size: .95rem; flex-wrap: wrap; }
.spot-nav a { padding: 8px 0; }

/* L'encart de l'accueil et l'index */
.spot-encart { border: 1px solid var(--or-sombre); border-radius: var(--rayon); background: var(--carte); padding: 20px 22px; }
.spot-encart h2 { margin-bottom: .3em; }
.spots-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.spots-liste a { display: block; border: 1px solid var(--carte-bord); border-radius: var(--rayon-s); background: var(--carte); padding: 12px 16px; text-decoration: none; color: var(--texte); font-weight: 600; }
.spots-liste a:hover { border-color: var(--or-sombre); }
.spots-liste small { display: block; color: var(--texte-doux); font-weight: 400; font-size: .85rem; }
.spots-liste .aujourdhui a { border-color: var(--or); }
.spots-liste .aujourdhui small::after { content: " · aujourd'hui"; color: var(--or); }
.spots-liste .a-venir small::after { content: " · à venir"; }