/* screens/salon.css — Caribbein · app famille : LE SALON (U3.2 + U3.3, plan famille-atelier-2026-09).
   TOKENS ONLY (invariant §3.7) : pas un hex, pas un rgb ni un rgba, pas une couleur nommée. La
   source portée (Providers/Desktop/_shared/cahier/cahier.css) est pleine de dégradés codés en
   dur — ils sont TOUS devenus des var() ici, et rien n'a eu besoin d'un token nouveau.

   ⚠ CE FICHIER EST CHARGÉ PAR DEUX PAGES, et c'est la raison de sa forme :
     · index.html   → l'HÔTE (screens/salon.js), sur une télé, à trois mètres ;
     · salon.html   → le PAD (salon-pad.js), sur un téléphone, dans une main — et cette page-là
       ne charge NI apprendre.css NI modals.css.
   D'où `.salon-choice` plutôt que `.ex-choice` : la grammaire d'une option de l'app (48 px de
   cible, une lettre à gauche, une coche à droite, le juste dans la lumière école et le raté en
   NEUTRE) est reprise trait pour trait, mais elle doit vivre dans un fichier que le pad charge.
   Emprunter `.ex-choice` obligerait la page publique à charger le lecteur d'exercice entier.

   Les tailles suivent l'écran : la base est celle du POUCE (16 px minimum, invariant §3.8), et
   `.salon-host` — posé par l'écran hôte — remonte tout à la taille d'une pièce.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── LA TÉLÉ ────────────────────────────────────────────────────────────────
   `body.tv` est posé par screens/salon.js pendant que l'écran est monté, et retiré au démontage.
   Une télé n'a pas de pouce : la colonne de 480 px s'ouvre, et la barre du bas — quatre cibles
   qu'aucun doigt n'atteindra jamais depuis un canapé — s'en va. */
body.tv .shell { max-width: none; }
body.tv .nav { display: none; }

/* Et les deux lignes ci-dessus NE SUFFISENT PAS, mesuré à l'écran : desktop.css (≥ 900 px,
   pointer:fine) recadre `.shell` en TÉLÉPHONE POSÉ — 430 px de large, bordure, coins, ombre,
   son propre conteneur de défilement — et le hook d'index.html pose à côté une colonne
   « Caribbein se vit sur le téléphone » avec un QR. Sur un salon, ce QR-là (celui de l'app)
   voisinerait celui de la partie, et la question à 34 px vivrait dans une carte de 430 px au
   milieu d'une télé. `body.tv` (0,1,1 et 0,2,0) passe devant `body` et `.shell` de desktop.css
   sans que ce fichier-là bouge d'une ligne — il reste en lecture seule et le reste de l'app
   garde son cadre. Le mode salon est le SEUL endroit de la section qui veut la pleine largeur. */
body.tv { display: block; gap: 0; padding: 0; }
body.tv .shell {
  width: auto; margin: 0; min-height: 100vh; height: auto; max-height: none;
  border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
body.tv main { padding-bottom: 0; }
body.tv .desktop-rail { display: none; }

.salon-host .title { padding: 26px 24px 6px; }
.salon-stage { max-width: 1040px; margin: 0 auto; padding: 6px 20px 40px; }
.salon-stage > .card { margin-top: 12px; }

.salon-eyebrow, .card .salon-eyebrow {
  font: 600 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); margin: 18px 0 6px;
}

/* ── le lobby : le code, le QR, l'adresse en toutes lettres ──────────────── */
.salon-join {
  background: var(--voice-wash); border-color: var(--voice-line);
  box-shadow: inset 3px 0 0 var(--voice), var(--shadow-card);
  text-align: center;
}
.salon-join .salon-eyebrow { margin-top: 0; }
/* 64 px en --serif : un code se lit à voix haute, à trois mètres, par un enfant de huit ans. */
.salon-code {
  font: 600 64px/1 var(--serif); letter-spacing: .1em; color: var(--ink);
  margin: 4px 0 12px;
}
.salon-qr { display: flex; justify-content: center; }
.salon-qr svg { width: 168px; height: 168px; }
.card .salon-url { font: 600 15px/1.4 var(--mono); color: var(--ink); margin-top: 10px; word-break: break-all; }
.card .salon-hint { font-size: 13px; color: var(--ink-muted); margin-top: 8px; }

/* ── qui joue ────────────────────────────────────────────────────────────── */
.salon-players { list-style: none; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.salon-player {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--chip-bg); color: var(--chip-ink);
  font: 600 14px/1 var(--font);
}
.salon-player-n { white-space: nowrap; }
/* La COCHE, pas une teinte : un ✓ pour qui l'avait, rien pour les autres — jamais une croix sur
   le travail d'un enfant, et jamais un rang (décision D8 ; un classement est la porte G3). */
.salon-player-k { color: var(--school); font-weight: 700; }
.salon-player-k:empty { display: none; }

/* ── le décompte : 25 s, tenues par l'hôte ───────────────────────────────── */
.salon-timer { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.salon-bar {
  flex: 1 1 auto; height: 10px; border-radius: var(--r-pill);
  background: var(--surface-3); overflow: hidden;
}
.salon-bar > i { display: block; height: 100%; width: 100%; background: var(--voice); }
/* Les cinq dernières secondes passent au corail — mais le NOMBRE est à côté, toujours : un état
   ne se signale jamais par la seule couleur (invariant §3.8). */
.salon-bar.hot > i { background: var(--sport); }
.salon-secs { flex: 0 0 auto; font: 600 20px/1 var(--mono); color: var(--ink); min-width: 2.2ch; text-align: right; }

/* ── la question ─────────────────────────────────────────────────────────── */
.salon-q { font: 400 34px/1.28 var(--font); color: var(--ink); margin: 14px 0 4px; text-wrap: balance; }
/* §3.2 · les listes de l'énoncé sur la télé — la peau de `.ex-q-*` (apprendre.css) à l'échelle de
   la pièce : un item par rangée, la marque en gouttière, le texte replié sous lui-même. Pas de
   colonnes : à 46 px, trois colonnes de 300 px replieraient chaque item. TOKENS ONLY. */
.salon-q > * + * { margin-top: 12px; }
.salon-q-p { margin: 0; white-space: pre-line; }
.salon-q-l { list-style: none; margin: 0; padding: 0; }
.salon-q-i { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.salon-q-i + .salon-q-i { margin-top: 6px; }
.salon-q-k { font-weight: 600; }
.salon-q-t { min-width: 0; overflow-wrap: anywhere; }
.salon-count { font-size: 14px; color: var(--ink-muted); margin-top: 14px; }

/* ── les options — la grammaire de `.ex-choice`, dans un fichier que le pad charge ─────────── */
.salon-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.salon-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
  text-align: left; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
}
.salon-choice-k {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--btn-bg); border: 1px solid var(--line);
  font: 600 12.5px/1 var(--font); color: var(--ink);
}
.salon-choice-t { flex: 1 1 auto; min-width: 0; font: 400 16px/1.35 var(--font); }  /* 16 px minimum (§3.8) */
.salon-choice-g { flex: 0 0 auto; font: 700 18px/1 var(--font); color: var(--school); }
.salon-choice.good { background: var(--school-soft); border-color: var(--school-line); }
.salon-choice.good .salon-choice-k { background: var(--school); border-color: var(--school); color: var(--ink-on-school); }
/* Ce que le pouce vient de toucher — un accusé de geste, pas un verdict : le verdict vient de
   l'hôte, plus tard, et il s'écrit en toutes lettres dans `.pad-status`. */
.salon-choice.picked { border-color: var(--line-2); background: var(--surface-3); }
.salon-choice[disabled] { opacity: 1; }   /* verrouillé ≠ effacé : la réponse reste lisible */

/* ── la révélation ───────────────────────────────────────────────────────── */
.salon-answer {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--school-soft); border: 1px solid var(--school-line);
}
.salon-answer-k {
  display: block; font: 600 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--school); margin-bottom: 6px;
}
.salon-answer-t { font: 400 22px/1.35 var(--font); color: var(--ink); }
/* ENSEMBLE. Le seul compte du salon, et il n'appartient à personne en particulier. */
.salon-collective { font: italic 400 20px/1.4 var(--serif); color: var(--ink); margin-top: 14px; }

.salon-acts { margin-top: 20px; }
.salon-host .salon-acts .btn { font-size: 15px; padding: 13px 22px; }

/* ── la pièce : à trois mètres, tout grandit ─────────────────────────────── */
@media (min-width: 900px) {
  .salon-host .title h1 { font-size: 40px; }
  .salon-q { font-size: 46px; }
  .salon-code { font-size: 92px; }
  .salon-host .salon-choice-t { font-size: 24px; }
  .salon-host .salon-choice { min-height: 62px; }
  .salon-host .salon-choice-k { width: 34px; height: 34px; font-size: 16px; }
  .salon-host .salon-player { font-size: 17px; }
  .salon-answer-t { font-size: 28px; }
  .salon-collective { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LE PAD — salon.html, un téléphone dans une main.
   `body.pad` : la page n'a pas de barre de navigation, donc pas de creux à réserver en bas.
   ════════════════════════════════════════════════════════════════════════════ */
body.pad main { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.pad-wrap { padding: calc(10px + env(safe-area-inset-top)) 20px 0; }
.pad-wrap .title { padding: 16px 0 6px; }
.pad-wrap .card { margin-top: 14px; }

.pad-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 16px 0 4px; }
.pad-me { font: 600 16px/1 var(--font); color: var(--ink); }
.pad-step { font: 600 12px/1 var(--mono); letter-spacing: .06em; color: var(--ink-muted); }

.pad-lab { display: block; font: 600 12px/1 var(--font); color: var(--ink-muted); margin: 14px 0 6px; }
.pad-join .pad-lab:first-of-type { margin-top: 0; }
/* 16 px : en dessous, iOS zoome sur le champ et sort le reste de l'écran (invariant §3.8). */
.pad-in {
  width: 100%; background: var(--field-bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink); padding: 12px 14px; font: 400 16px/1.3 var(--font);
}
.pad-code { font: 600 26px/1 var(--serif); letter-spacing: .22em; text-align: center; text-transform: uppercase; }
.card .pad-note { font-size: 12.5px; color: var(--ink-muted); margin-top: 10px; }
.pad-go { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }

.pad-row { display: flex; gap: 8px; }
.pad-row .pad-in { flex: 1 1 auto; }
.pad-row .btn { flex: 0 0 auto; }
.pad-vf { display: flex; flex-direction: column; gap: 8px; }
.pad-vf-b { justify-content: center; min-height: 56px; }
.pad-vf-b .salon-choice-t { flex: 0 1 auto; text-align: center; font-size: 18px; font-weight: 600; }
.card .pad-say { font: italic 400 15px/1.5 var(--serif); color: var(--ink); margin-bottom: 12px; }

/* Le verdict s'écrit EN TOUTES LETTRES. La teinte ne fait que redire ce que le mot dit déjà. */
.card .pad-status { font: 600 15px/1.4 var(--font); color: var(--ink); margin-top: 14px; min-height: 1.4em; }
.card .pad-status.ok { color: var(--school); }
.card .pad-status.ko { color: var(--ink); }

/* ── mouvement : la barre coule, et se tait quand on le lui demande ───────── */
@media (prefers-reduced-motion: no-preference) {
  .salon-bar > i { transition: width .3s linear; }
}
:root[data-calme="1"] .salon-bar > i { transition: none; }