/* screens/soir.css — « Ce soir ».  Propriétaire : S4 (FAMILLE-12-PLAN.md §4 S4).
   TOKENS ONLY — pas une valeur de couleur dans ce fichier, seulement des var() de tokens.css (G1).

   La carte du soir reste écrite dans le vocabulaire partagé de base.css (.card / .list / .quote /
   .foot-note). Ce fichier n'ajoute que ce que S4 apporte :
     · la fin de la soirée — le voile, la ligne, le monde qui baisse d'un cran
     · le pied de page « Envie d'autre chose ce soir ? »
     · le repère de forme de l'onglet actif (4.3)

   POURQUOI LE REPÈRE DE NAV EST ICI ET PAS DANS base.css : base.css appartient à S1 (géométrie)
   et S3 (transitions) pendant cette vague. Trois règles de S4 y entreraient en collision pour
   rien. À la fusion, elles ont leur place dans le bloc « nav » de base.css — elles sont écrites
   pour se déplacer telles quelles.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── 4.3 · l'onglet actif : une FORME, pas seulement une couleur (D7) ─────── */
.nav-in button .nav-mark {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 16px;
  height: 2px;
  margin-left: -8px;
  border-radius: var(--r-pill);
  background: currentColor;      /* = --nav-ink-on, l'onglet actif se peint lui-même */
}

/* ── 4.2 · la bibliothèque, en pied de « Ce soir » ────────────────────────── */
.autre { padding: 30px 24px 4px; text-align: center; }
.autre p { font-size: 12.5px; color: var(--ink-muted); }
.autre-l { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.autre-b {
  font: 600 12px/1 var(--font);
  color: var(--ink-muted);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 9px 15px;
}
.autre-b:active { transform: translateY(1px); }

/* ── 4.1 · LA FIN ──────────────────────────────────────────────────────────
   Le milieu s'efface d'abord (.s-retire), la fin prend sa place ensuite. Deux mouvements
   lents : c'est une soirée qui se termine, pas une transition d'écran. */
.s-retire {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}

/* Le monde baisse d'un cran. Le voile est fixe et n'intercepte rien : la barre (z-index 20)
   reste au-dessus de lui, on peut toujours sortir. */
.fin-voile {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: var(--sky-0);          /* crépuscule : on descend vers le fond de la nuit */
  opacity: 0;
  transition: opacity 1s ease;
}
.fin-voile.on { opacity: .62; }
/* Terrain de jeu : la lumière baisse aussi le jour, mais sur du papier ça se fait à l'encre. */
:root[data-theme="terrain"] .fin-voile { background: var(--ink); }
:root[data-theme="terrain"] .fin-voile.on { opacity: .09; }

.fin-bloc {
  position: relative;
  z-index: 11;
  padding: 66px 30px 40px;
  text-align: center;
  animation: fin-venir 1.2s ease both;
}
.fin-ligne {
  font: 300 21px/1.5 var(--serif);
  color: var(--ink);
  text-wrap: balance;
}
@keyframes fin-venir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* L'app se retire : la barre s'estompe. Elle ne DISPARAÎT pas — un parent doit pouvoir aller
   voir la semaine sans rien deviner — et elle revient entière dès qu'on la vise. */
:root.soiree-finie .nav-in { opacity: .34; transition: opacity 1s ease; }
:root.soiree-finie .nav-in:hover,
:root.soiree-finie .nav-in:focus-within { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .s-retire { transition: none; }
  .fin-voile { transition: none; }
  .fin-bloc { animation: none; }
  :root.soiree-finie .nav-in { transition: none; }
}
/* U2 — data-calme (le masque de concentration) redit le bloc ci-dessus, choisi dans l'app. */
:root[data-calme="1"] .s-retire { transition: none; }
:root[data-calme="1"] .fin-voile { transition: none; }
:root[data-calme="1"] .fin-bloc { animation: none; }
:root[data-calme="1"].soiree-finie .nav-in { transition: none; }

/* ── 11.3 · le passage de relais — une phrase, pas une carte (rendue par relaisSlot) ──
   Le sérif, la même famille que la ligne de fin : c'est une phrase qu'on lit, pas une donnée
   qu'on consulte. Le filet à gauche dit « ceci vient d'ailleurs » sans faire une carte de plus. */
.relais {
  margin: 22px 24px 2px;
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--voice-line);
  font: 300 15.5px/1.6 var(--serif);
  color: var(--ink);
  text-wrap: balance;
}