/* SoireeTV — thème « le plateau en velours » (§18).
 *
 * TOUT est en variables : un thème futur (mariage, entreprise, Halloween) est
 * une redéfinition de ce bloc `:root`, zéro ligne de règle touchée.
 *
 * Le sujet n'est pas « une application sombre », c'est une émission de
 * variétés du samedi soir jouée dans un salon : velours du rideau, rampe de
 * projecteurs chauds au sol, ampoules de loge, laiton des chiffres de score.
 * D'où un fond violet-velours et un blanc CHAUD — un blanc froid éteint la
 * fête.
 *
 * Les tailles d'écran sont en vmin, jamais en px : le plateau doit rester
 * lisible à 5 m sur une télé de 40" comme sur un vidéoprojecteur (§17.3).
 */

/* Archivo variable (SIL OFL), servie en local : le soir J, le wifi de la salle
   peut tomber, le serveur non. Deux axes utilisés — wght 100-900 ET
   wdth 62-125 %, dont `ajuster.js` se sert pour CONDENSER un texte trop long
   avant de le rétrécir. */
@font-face {
  font-family: "Archivo";
  src: url("../vendor/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../vendor/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* — les dix couleurs, et pas une de plus — */
  --nuit: #150e24;              /* velours violet-noir, jamais un gris teinté */
  --velours: #241638;
  --velours-haut: #33204f;
  --rampe: #ff8a3d;             /* la lumière chaude des projecteurs au sol */
  --laiton: #f5c242;            /* scores, rangs, chiffres */
  --rose: #ff4d7e;              /* mises, urgence, verrou */
  --menthe: #3ed598;
  --braise: #ff5a5a;
  --creme: #fff4e2;             /* blanc CHAUD */
  --creme-sourd: #b6a6c9;       /* violet désaturé, jamais du gris */

  /* Alias historiques : le code du chantier 2 les utilise encore. Les garder
     évite une réécriture inutile et permet à un thème de tout redéfinir. */
  --fond: var(--nuit);
  --surface: var(--velours);
  --surface-haute: var(--velours-haut);
  --accent: var(--laiton);
  --accent-2: var(--rose);
  --bon: var(--menthe);
  --mauvais: var(--braise);
  --texte: var(--creme);
  --texte-sourd: var(--creme-sourd);

  /* encres posées SUR un aplat clair (laiton, menthe) : jamais du blanc */
  --sur-laiton: #2a1a00;
  --sur-menthe: #04210f;

  /* — une seule famille, deux extrêmes — */
  --police: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif,
            "Noto Color Emoji", "Apple Color Emoji";
  --police-titre: var(--police);
  --titre-graisse: 800;
  --titre-largeur: 115;         /* % — l'axe wdth, condensé par ajuster.js */
  --titre-interlettre: .005em;

  /* — écran (plateau) — en vmin — */
  --t-titre: 8.5vmin;
  --t-question: 6vmin;
  --t-liste: 3.6vmin;
  --t-chrono: 12vmin;
  --t-sourd: 2.6vmin;

  /* — téléphone — en rem : à 30 cm des yeux, vmin n'a pas de sens — */
  --t-mobile-titre: 1.35rem;
  --t-mobile: 1.05rem;

  /* §17.3 : les 10 % du bas d'un vidéoprojecteur sont souvent coupés ou
     masqués par une tête — rien de critique n'y descend jamais. */
  --marge-basse-sure: 12vh;

  --rayon: 14px;
  --rayon-mou: 22px;
  --ombre: 0 1.2vmin 4vmin rgb(0 0 0 / .55);
  --lueur-laiton: 0 0 3vmin rgb(245 194 66 / .35);

  --duree-courte: .25s;
  --duree: .6s;
  --duree-longue: 1.2s;

  /* facteur d'ajustement automatique, piloté par ajuster.js (§3 du plan) */
  --fit: 1;
}

/* Un invité qui a demandé « moins d'animations » à son téléphone doit être
   servi : GSAP est neutralisé côté JS, le CSS suit ici. */
@media (prefers-reduced-motion: reduce) {
  :root { --duree-courte: .01s; --duree: .01s; --duree-longue: .01s; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    /* `transition: none`, PAS une durée de 0,01 ms. La recette qui traîne
       partout sur le web laisse `transition-property: all` actif : le
       navigateur ouvre alors une transition sur CHAQUE propriété modifiée —
       y compris `font-size`, que l'ajustement automatique écrit. Tant que la
       transition n'a pas produit une image, la valeur calculée reste
       l'ANCIENNE : la mise en page se fait à l'ancienne taille, et le texte
       déborde alors que la bonne taille est bien posée. Trois heures pour
       comprendre celle-là. */
    transition: none !important;
  }
}

/* — socle commun aux quatre interfaces — */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--nuit); color: var(--creme);
       font-family: var(--police); font-synthesis: none; }

/* Tout texte qui vient d'un invité peut être un mot de 40 caractères sans
   espace : il casse au lieu de pousser la mise en page hors de l'écran.
   `break-word` et non `anywhere` : la coupure n'intervient qu'en dernier
   recours, APRÈS que l'ajustement automatique a essayé de rétrécir. Avec
   `anywhere`, « Jean-Édouard de La Rochefoucauld-Montmorency » se coupait en
   « Rochefoucaul / d- » alors qu'il avait la place en plus petit. */
body, input, button, select, textarea { overflow-wrap: break-word; }

/* Un conteneur souple sans `min-width: 0` laisse un pseudo à rallonge pousser
   le score hors du cadre. C'est LA cause n°1 des débordements en flex. */
.tv-souple > * { min-width: 0; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--laiton); outline-offset: 2px;
}

.tv-fond { background: var(--nuit); color: var(--creme); font-family: var(--police); }
.tv-titre {
  font-family: var(--police-titre);
  font-size: var(--t-titre);
  font-weight: var(--titre-graisse);
  font-stretch: calc(var(--titre-largeur) * 1%);
  letter-spacing: var(--titre-interlettre);
  line-height: 1.04;
  text-wrap: balance;
}
.tv-accent { color: var(--laiton); }
.tv-sourd { color: var(--creme-sourd); }
.tv-carte { background: var(--velours); border-radius: var(--rayon);
            box-shadow: var(--ombre); }
.tv-zone-sure { padding-bottom: var(--marge-basse-sure); }

/* Chiffres : toujours tabulaires, sinon un score qui monte fait sautiller
   toute la ligne du classement. */
.tv-nb { font-variant-numeric: tabular-nums; }

/* — Icônes de jeu (`shared/icones-jeux.js`) ————————————————————————————————
 * Une tuile velours, le dessin au trait couleur du texte, une touche d'accent
 * de la couleur de la famille. Taille en `em` : elle suit le texte voisin. */
.icone-jeu { display: inline-flex; align-items: center; justify-content: center;
             flex: none; width: 1.3em; height: 1.3em; border-radius: .34em;
             background: var(--velours-haut); color: var(--creme);
             vertical-align: -.28em; --ic: var(--laiton); }
.icone-jeu svg { width: 76%; height: 76%; overflow: visible;
                 fill: none; stroke: currentColor; stroke-width: 1.8;
                 stroke-linecap: round; stroke-linejoin: round; }
.icone-jeu .a { stroke: var(--ic); }
.icone-jeu .f { fill: var(--ic); stroke: none; }
.icone-jeu .s { stroke: var(--creme-sourd); opacity: .7; }
.ij-vote, .ij-media { --ic: var(--rose); }
.ij-arbitrage, .ij-collecte { --ic: var(--rampe); }
.ij-reflexe, .ij-dessin { --ic: var(--menthe); }