/* After TV, l'interface publique de la page du direct (index.html) : écran d'entrée, lecture plein
   écran sans interface, panneau à la demande, boutons discrets. Construite par interface.js.
   Direction : .superpowers/sdd/2026-11-14-aftertv-interface/direction-ui.md (ui-craft), valeurs
   reprises telles quelles. Noir et blanc seulement (Oscar : « on reste en noir et blanc ») : aucune
   teinte dans ce fichier (interface.e2e.mjs le vérifie). La console de debug (#debug) garde son
   allure et ses couleurs : elles vivent dans index.html, pas ici.
   Tout est rangé sous #entree, #panneau et .flottant : les boutons et le #titre d'index.html
   (bandeau du bas, console) ne doivent pas changer d'allure. */

:root {
  /* ink: black and white only, no hue anywhere in this file */
  --ink: #f2f2f2;
  --ink-muted: rgba(242, 242, 242, .55);
  --ink-faint: rgba(242, 242, 242, .32);
  --ground: #000;
  --rule: rgba(242, 242, 242, .14);
  --rule-strong: rgba(242, 242, 242, .42);
  --fill-hover: rgba(242, 242, 242, .08);
  --fill-press: rgba(242, 242, 242, .16);
  --veil: rgba(0, 0, 0, .6);
  --veil-solid: rgba(0, 0, 0, .86);
  --veil-filter: blur(16px) grayscale(1) brightness(.5);
  --chip-bg: rgba(0, 0, 0, .72);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-title: clamp(22px, 1.6vw + 14px, 44px);
  --t-body: 14px;
  --t-meta: 12px;
  --lh-body: 1.45;
  --track-title: .2em;
  --track-label: .2em;
  --track-button: .14em;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --edge: max(16px, env(safe-area-inset-right));

  --radius: 2px;
  --hit: 44px;

  --panel-w: clamp(320px, 28vw, 400px);
  --sheet-max-h: 78dvh;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --d-press: 120ms;
  --d-reveal-in: 160ms;
  --d-reveal-out: 600ms;
  --d-panel-in: 280ms;
  --d-panel-out: 200ms;
  --d-sheet-in: 320ms;
  --d-sheet-out: 220ms;
  --d-entry-out: 200ms;
  --d-title-out: 400ms;
  --d-lights-down: 800ms;
  --idle-ms: 3000;           /* lu par interface.js : les boutons s'effacent après 3 s */
  --panel-idle-ms: 30000;    /* lu par interface.js : le panneau ouvert se ferme après 30 s sans geste */

  /* Empilement : au-dessus de la page du direct (#depart 999, bandeau et indicateurs 1000,
     console #debug 1001) ; la console reste sous le panneau (direction §10). */
  --z-panel: 1100;
  --z-controls: 1200;
  --z-entry: 1300;
}

/* Chaque couche pose son display : [hidden] doit gagner, mais seulement chez nous (le noir du
   silence d'index.html montre #depart même [hidden]). */
#entree[hidden], #entree [hidden], #panneau [hidden], .flottant[hidden] { display: none !important; }

/* --- la page du direct pendant la lecture : la vidéo seule --------------------------------- */
/* KICK, BPM, mode, styles, « En direct », bandeau du bas : cachés, pas retirés (index.html y
   écrit toujours ; « Now playing » lit #titre). La console ouverte rend les indicateurs : c'est
   du debug. */
html.lecture #bandeau, html.lecture #indicateurs { display: none !important; }
html.lecture body.debug #indicateurs { display: flex !important; }
/* La console sous le bouton du panneau (16 + 44 px), et au-dessus du bouton debug. */
html.interface #debug { top: 72px; }

/* --- l'écran d'entrée ---------------------------------------------------------------------- */
#entree {
  position: fixed; inset: 0; z-index: var(--z-entry);
  background: var(--ground); color: var(--ink);
  font: var(--t-body)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased;
  display: grid; place-items: center;
  padding: var(--s6) var(--s5) calc(var(--s8) + env(safe-area-inset-bottom));
  transition: opacity var(--d-lights-down) var(--ease-in-out);
}
#entree p { margin: 0; }
#entree .colonne {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  translate: 0 -4vh; max-width: 100%;
}
/* Le titre : la typographie de #depart (system-ui, capitales interlettrées .2em), à l'échelle
   de la direction. */
#entree-titre {
  margin: 0 -.2em 0 0;   /* centrage optique : l'interlettrage s'ajoute après la dernière lettre */
  font-size: var(--t-title); font-weight: 400; line-height: 1.1;
  letter-spacing: var(--track-title); text-transform: uppercase; text-wrap: balance;
  transition: opacity var(--d-title-out) var(--ease-out);
}
#entree-invitation { margin-top: var(--s5); max-width: 34ch; color: var(--ink-muted); }
#entree-actions {
  display: flex; flex-direction: column; align-items: center;
  margin-top: var(--s7); transition: opacity var(--d-entry-out) var(--ease-out);
}
#entree-secondaires {
  display: flex; gap: 0 var(--s5); justify-content: center; flex-wrap: wrap; margin-top: var(--s3);
}
#entree-secondaires:empty { display: none; }
#entree-aide { margin-top: var(--s4); max-width: 40ch; font-size: var(--t-meta); color: var(--ink-muted); }
#entree-aide:empty { display: none; }

/* Le crédit d'index.html, déplacé ici par interface.js : il n'existe que sur l'écran d'entrée.
   Les règles d'index.html (pastille en haut à droite) sont défaites. */
#entree #credit {
  position: absolute; left: 0; right: 0; top: auto; bottom: max(var(--s5), env(safe-area-inset-bottom));
  z-index: auto; max-width: none; display: block; padding: 0 var(--s4); border-radius: 0;
  background: none; text-align: center;
  font: 400 var(--t-meta)/var(--lh-body) var(--font); color: var(--ink-muted);
  transition: opacity var(--d-entry-out) var(--ease-out);
}
#entree #credit a {
  color: var(--ink); text-decoration: none; min-height: var(--hit);
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  text-underline-offset: 3px;
}
#entree #credit a:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { #entree #credit a:hover { text-decoration: underline; } }

/* Téléphone tenu debout (Oscar : « en évidence au début pour tourner le téléphone ») : une icône
   qui pivote et une ligne, au-dessus du titre, en blanc plein. */
#entree #entree-tourner {   /* #entree : passe devant « #entree p { margin: 0 } » */
  display: none; align-items: center; gap: var(--s3);
  margin-bottom: var(--s7); max-width: 30ch; text-align: left; color: var(--ink);
  transition: opacity var(--d-entry-out) var(--ease-out);
}
#entree-tourner .telephone { width: 32px; height: 32px; flex: none; }
#entree-tourner .telephone g { transform-origin: 12px 12px; animation: at-pivote 2.4s var(--ease-in-out) infinite; }
@keyframes at-pivote {
  0%, 25% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
@media (orientation: portrait) and (max-width: 720px) { #entree #entree-tourner { display: flex; } }

/* Le départ : tout part sauf le titre (200 ms), puis le titre (400 ms), puis le noir s'ouvre sur
   la vidéo qui joue déjà derrière (800 ms). */
#entree.part #entree-invitation, #entree.part #entree-actions, #entree.part #credit, #entree.part #entree-tourner {
  opacity: 0; pointer-events: none;
}
#entree.sans-titre #entree-titre { opacity: 0; }
#entree.eteint { opacity: 0; pointer-events: none; }

/* Téléphone couché (peu de hauteur) : les écarts de moitié, jamais de défilement. */
@media (max-height: 480px) {
  #entree { padding-top: var(--s4); padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom)); }
  #entree-invitation { margin-top: var(--s3); }
  #entree-actions { margin-top: 20px; }
  #entree-secondaires { margin-top: 6px; }
  #entree-aide { margin-top: var(--s2); }
  #entree #credit { bottom: max(var(--s2), env(safe-area-inset-bottom)); }
}

/* --- les boutons (seulement les nôtres) ---------------------------------------------------- */
#entree button, #panneau button, .flottant {
  font: 500 var(--t-meta)/1 var(--font); color: var(--ink); min-height: var(--hit);
  border-radius: var(--radius); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-press) var(--ease-out), background-color 160ms ease,
              border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
#entree button:focus-visible, #panneau button:focus-visible, #panneau summary:focus-visible,
#panneau a:focus-visible, #entree a:focus-visible, .flottant:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
#entree button:active, #panneau button:active, .flottant:active { transform: scale(.97); }

.primaire {
  height: 48px; padding: 0 28px; border: 0;
  background: var(--ink); color: #000 !important;
  letter-spacing: var(--track-button); text-transform: uppercase;
}
.primaire:disabled { background: var(--ink-faint); cursor: default; transform: none; }
.texte {
  background: none; border: 0; padding: 0 var(--s3);
  font: 400 var(--t-body)/1.2 var(--font) !important; color: var(--ink-muted) !important;
  text-underline-offset: 4px;
}
.fantome {
  display: inline-flex; align-items: center; gap: var(--s2); padding: 0 var(--s4);
  background: transparent; border: 1px solid var(--rule-strong);
  letter-spacing: var(--track-button); text-transform: uppercase;
}
.fantome svg { flex: none; }
.fantome:active { background: var(--fill-press); }
@media (hover: hover) and (pointer: fine) {
  .primaire:not(:disabled):hover { background: #fff; }
  .texte:not(:disabled):hover { color: var(--ink) !important; text-decoration: underline; }
  .fantome:hover { background: var(--fill-hover); border-color: var(--ink); }
}

/* --- les boutons flottants de la lecture --------------------------------------------------- */
.flottant {
  position: fixed; z-index: var(--z-controls); padding: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-reveal-out) ease, visibility 0s linear var(--d-reveal-out),
              transform var(--d-press) var(--ease-out), background-color 160ms ease, color 160ms ease;
}
html.reveille .flottant {
  opacity: 1; visibility: visible;
  transition: opacity var(--d-reveal-in) var(--ease-out), visibility 0s,
              transform var(--d-press) var(--ease-out), background-color 160ms ease, color 160ms ease;
}
html.lecture:not(.reveille), html.lecture:not(.reveille) * { cursor: none !important; }

#bouton-panneau {
  top: max(var(--s4), env(safe-area-inset-top)); right: var(--edge);
  width: var(--hit); height: var(--hit);
  display: grid; place-items: center;
  background: var(--chip-bg); border: 1px solid var(--rule);
}
/* Le bouton debug : 44 px de cible, un carré visible de 32 px (sans fond, l'icône disparaît sur
   une image blanche). */
#bouton-debug {
  bottom: max(var(--s4), env(safe-area-inset-bottom)); right: var(--edge);
  width: var(--hit); height: var(--hit);
  display: grid; place-items: center;
  background: none; border: 0; color: var(--ink-muted);
}
#bouton-debug .carre {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--chip-bg); border-radius: var(--radius);
}
#bouton-debug:focus-visible, #bouton-debug[aria-pressed="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  #bouton-panneau:hover, #bouton-debug:hover .carre { background: rgba(0, 0, 0, .85); }
  #bouton-debug:hover { color: var(--ink); }
}
/* Panneau ouvert : son bouton de fermeture remplace le bouton flottant ; le bouton debug, que le
   panneau couvrirait, s'en va aussi. */
html.panneau-ouvert .flottant { opacity: 0; visibility: hidden; }

/* --- le panneau ---------------------------------------------------------------------------- */
#panneau {
  position: fixed; z-index: var(--z-panel);
  top: 0; right: 0; bottom: 0; width: var(--panel-w); box-sizing: border-box;
  padding: var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)) var(--s5);
  padding-right: max(var(--s5), env(safe-area-inset-right));
  background: var(--veil); backdrop-filter: var(--veil-filter); -webkit-backdrop-filter: var(--veil-filter);
  border-left: 1px solid var(--rule); border-radius: 0;
  color: var(--ink); font: var(--t-body)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--d-panel-out) var(--ease-drawer), visibility 0s linear var(--d-panel-out);
}
#panneau.ouvert {
  transform: none; visibility: visible;
  transition: transform var(--d-panel-in) var(--ease-drawer), visibility 0s;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #panneau { background: var(--veil-solid); }
}
@media (max-width: 720px) {
  #panneau {
    top: auto; left: 0; right: 0; width: auto; max-height: var(--sheet-max-h);
    border-left: 0; border-top: 1px solid var(--rule);
    padding-left: max(var(--s4), env(safe-area-inset-left));
    padding-right: max(var(--s4), env(safe-area-inset-right));
    transform: translateY(100%);
    transition: transform var(--d-sheet-out) var(--ease-drawer), visibility 0s linear var(--d-sheet-out);
  }
  #panneau.ouvert { transform: none; transition: transform var(--d-sheet-in) var(--ease-drawer), visibility 0s; }
}
#panneau p { margin: 0; }
.tete-panneau { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.fermer {
  width: var(--hit); height: var(--hit); padding: 0; margin-right: calc(-1 * var(--s3));
  display: grid; place-items: center; background: none; border: 0;
}
@media (hover: hover) and (pointer: fine) { .fermer:hover { background: var(--fill-hover); } }

.etiquette {
  font-size: var(--t-meta); font-weight: 500; color: var(--ink-muted);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.meta { font-size: var(--t-meta); color: var(--ink-muted); }

/* Les sections, dans l'ordre de la liste d'interface.js, séparées par un filet. */
#panneau section { padding: var(--s5) 0; border-top: 1px solid var(--rule); }
#panneau section:first-of-type, #panneau section.premiere { border-top: 0; }
.tete-section { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s3); }
#panneau-titre { font-weight: 500; overflow-wrap: anywhere; }

/* Puces : l'état se dit par le plein, jamais par une couleur (direction §6). */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; min-height: 32px !important; padding: 0 var(--s3);
  font: 400 var(--t-body)/1 var(--font) !important; color: var(--ink);
  background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  position: relative;
}
.chip::after { content: ""; position: absolute; inset: -6px -2px; }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--ink); color: #000 !important; border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-checked="true"]):not([aria-pressed="true"]):hover { background: var(--fill-hover); border-color: var(--ink); }
}
@media (pointer: coarse) { .chip { min-height: var(--hit) !important; } .chip::after { inset: 0; } }
/* Le contrôle segmenté (Quality) : des puces qui partagent leurs bords. */
/* Lissage en niveaux de gris : sans lui, le texte noir sur la puce cochée sort avec des franges
   ClearType colorées (Chromium, Windows). */
.chips { isolation: isolate; will-change: transform; }
.segments { gap: 0; }
.segments .chip + .chip { margin-left: -1px; }
.ligne-qualite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* Watch on TV, About : <details> fermés, + / − échangés (pas tournés). */
#panneau details summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  min-height: var(--hit); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#panneau details summary::-webkit-details-marker { display: none; }
#panneau details summary > span:last-child { display: grid; place-items: center; }
#panneau details .moins, #panneau details[open] .plus { display: none; }
#panneau details[open] .moins { display: block; }
#panneau details .corps { display: grid; gap: var(--s2); padding-top: var(--s2); }
#panneau details .corps p:not(.meta) { color: var(--ink-muted); }
#panneau details.apropos .corps p:not(.meta) { color: var(--ink); }
#panneau a { color: var(--ink); text-underline-offset: 3px; }
#panneau .touches { margin-top: var(--s5); }
@media not ((hover: hover) and (pointer: fine)) { #panneau .touches { display: none; } }

/* --- moins d'animation --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #panneau, #panneau.ouvert { transform: none; opacity: 0;
    transition: opacity 150ms ease, visibility 0s linear 150ms; }
  #panneau.ouvert { opacity: 1; transition: opacity 150ms ease, visibility 0s; }
  #entree, #entree-titre { transition-duration: 200ms; }
  #entree-tourner .telephone g { animation: none; transform: rotate(-90deg); }
}