/* La Taverne · « Comment on joue » : la démonstration de l'accueil.
 *
 * La section #accComment (balisage d'index.html) et ce que accueil.js y
 * pose. Trois objets, dans l'ordre où on les lit :
 *   1. la TABLE, arrondie, dans le bois de la table de jeu : TaverneTable s'y
 *      monte (ses dés, son gobelet) ; elle reste toujours sombre ;
 *   2. le PIED : ce que compte la manche (les points, gros et tabulaires),
 *      puis la leçon, et le bouton pause (WCAG 2.2.2) ;
 *   3. les ÉTAPES : une liste lisible, numérotée dans des pastilles reliées
 *      par un filet ; l'étape en cours a sa pastille de cuivre et sa carte.
 *
 * Sans le script (ou sans la table), `.is-live` n'est pas posée : la table et
 * le pied disparaissent, les trois étapes restent un texte égal et complet.
 *
 * Les jetons --tv-* sont ceux de style.css (les deux thèmes y sont déclarés) ;
 * le mouvement est arbitré par `:root[data-anim="off"]` (style.css le ramène
 * à zéro partout), jamais par une media query ici.
 */

/* ── La section ───────────────────────────────────────────────────────── */

.acc-comment {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.acc-comment > .acc-but {
  margin: 4px 0 0;
  max-width: 60ch;
  color: var(--tv-ink-2);
  font: 400 15px/1.5 var(--tv-ui);
}

/* ── La démonstration : table, pied, étapes ───────────────────────────── */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "table" "score" "etapes";
  min-width: 0;
}

/* La table : le même bois que la table de jeu (TaverneTable le peint par
   dessus ; ce fond ne se voit qu'avant elle). Un objet posé : son ombre est
   celle de la table de l'accueil, son liseré un filet de lumière. */
.demo-table {
  grid-area: table;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 196px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--tv-bois-2) url("img/bois.webp") center / cover no-repeat;
  box-shadow: var(--tv-ombre-objet);
  isolation: isolate;
}
.demo-table::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 228, 190, .1);
  pointer-events: none;
}
.demo:not(.is-live) .demo-table,
.demo:not(.is-live) .demo-pied { display: none; }

/* La rangée de la manche : terne quand elle est perdue, puis elle s'efface
   au départ de la manche suivante. */
.demo-table .tv-rangee { transition: opacity var(--tv-dur-m) var(--tv-ease-out); }
.demo-table.is-perdu .tv-rangee { opacity: .36; }
.demo-table.is-efface .tv-rangee { opacity: 0; transition-duration: var(--tv-dur-s); }

/* ── Le pied : le compte de la manche, et la pause ────────────────────── */

/* Le pied n'est qu'un groupe dans le balisage : ses deux enfants prennent
   place dans la grille de la démonstration. Le compte sous la table, la
   pause POSÉE SUR la table, dans son coin, comme celle de la table du haut
   (deux pauses au même endroit d'un même objet : un seul geste à apprendre). */
.demo-pied { display: contents; }
.demo-score {
  grid-area: score;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding-top: 10px;
  color: var(--tv-ink-2);
  font: 500 15px/1.4 var(--tv-ui);
  overflow-wrap: anywhere;
}
.demo-score-txt { display: block; }
.demo-score-txt.is-jet { font-variant-numeric: tabular-nums; }
.demo-score-txt.is-points {
  color: var(--tv-ink);
  font: 700 26px/1.1 var(--tv-ui);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.demo-score-txt.is-points .demo-unite {
  color: var(--tv-ink-2);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}
.demo-score-txt.is-perte { color: var(--tv-rouge-texte); }
.demo-score-txt .demo-conseil { color: var(--tv-ink); font-weight: 600; }
.demo-score-txt.is-conseil { color: var(--tv-ink); }

.demo-pause {
  grid-area: table;
  justify-self: end;
  align-self: start;
  z-index: 7;
  margin: 8px;
  border: 1px solid rgba(255, 236, 205, .12);
  background: rgba(18, 13, 9, .55);
  color: var(--tv-scene-ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.demo-pause[hidden] { display: none; }

/* ── Les étapes ───────────────────────────────────────────────────────── */

.demo-etapes {
  grid-area: etapes;
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.demo-etape {
  position: relative;
  min-width: 0;
}
.demo-etape-btn {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 12px 14px 12px 10px;
  border: 1px solid transparent;
  border-radius: var(--tv-rayon-l);
  background: transparent;
  color: var(--tv-ink-2);
  font: 400 15px/1.45 var(--tv-ui);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--tv-dur-s) var(--tv-ease-out),
              border-color var(--tv-dur-s) var(--tv-ease-out),
              color var(--tv-dur-s) var(--tv-ease-out);
}
.demo-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--tv-line-3);
  border-radius: 50%;
  color: var(--tv-ink-2);
  font: 600 14px/1 var(--tv-ui);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--tv-dur-s) var(--tv-ease-out),
              border-color var(--tv-dur-s) var(--tv-ease-out),
              color var(--tv-dur-s) var(--tv-ease-out),
              transform var(--tv-dur-s) var(--tv-ressort);
}
.demo-txt {
  min-width: 0;
  padding-top: 3px;
}
.demo-txt strong {
  display: block;
  margin-bottom: 2px;
  color: var(--tv-ink);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: color var(--tv-dur-s) var(--tv-ease-out);
}

/* Le filet qui relie les pastilles : la piste, puis le cuivre qui la
   remplit à mesure que la manche avance. Il part sous une pastille et
   s'arrête au-dessus de la suivante (12 px de marge, 4 px d'écart). */
.demo-etape:not(:last-child)::before,
.demo-etape:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 25.25px;
  top: 47px;
  bottom: -13px;
  width: 1.5px;
  border-radius: 1px;
  pointer-events: none;
}
.demo-etape:not(:last-child)::before { background: var(--tv-line-2); }
.demo-etape:not(:last-child)::after {
  background: var(--tv-accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--tv-dur-m) var(--tv-ease-out);
}

/* Vivante : les étapes à venir et passées se retirent, celle en cours a sa
   carte, sa pastille de cuivre, et le filet se remplit jusqu'à elle. */
.demo.is-live .demo-etape-btn { color: var(--tv-ink-3); }
.demo.is-live .demo-etape-btn strong { color: var(--tv-ink-2); }
.demo.is-live .demo-etape.is-on .demo-etape-btn {
  border-radius: 20px;
  background: var(--tv-surface);
  color: var(--tv-ink-2);
}
.demo.is-live .demo-etape.is-on .demo-etape-btn strong { color: var(--tv-ink); }
.demo.is-live .demo-etape.is-on .demo-num {
  border-color: var(--tv-accent-plein);
  background: var(--tv-accent-plein);
  color: var(--tv-on-accent);
  transform: scale(1.06);
}
.demo.is-live .demo-etape.is-fait .demo-num {
  border-color: var(--tv-accent);
  color: var(--tv-accent-texte);
}
.demo.is-live .demo-etape.is-fait::after { transform: scaleY(1); }

/* ── Grands écrans : la table à gauche, les étapes à droite ───────────── */

@media (min-width: 900px) {
  .demo {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: "table etapes" "score etapes";
    grid-template-rows: auto 1fr;
    column-gap: 36px;
  }
  .demo-table { border-radius: 20px; }
  .demo-etapes { align-self: center; margin: 0; }
}

/* ── Le survol (pointeur fin), puis le toucher en dernier ─────────────── */

@media (hover: hover) and (pointer: fine) {
  .demo.is-live .demo-etape:not(.is-on) .demo-etape-btn:hover { background: var(--tv-surface-2); }
  .demo.is-live .demo-etape:not(.is-on) .demo-etape-btn:hover strong { color: var(--tv-ink); }
  .demo-pause:hover { background: rgba(18, 13, 9, .75); }
}

@media (hover: none) {
  .demo.is-live .demo-etape:not(.is-on) .demo-etape-btn:active { background: var(--tv-surface-2); }
  .demo-pause:hover { background: rgba(18, 13, 9, .55); }
}