/* Régie de direct : sombre, pilotable au clavier, utilisable au téléphone.
   Vue Conducteur (le direct guidé) et vue Canaux (contrôle manuel). */
/* La page tient dans la hauteur de l'écran : le prompteur l'occupe toute, sans
   défilement de la page dans les conditions normales. */
body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--c-espace); padding: var(--c-espace); }
#vue-conducteur, .cd-hote { flex: 1 0 auto; display: flex; flex-direction: column; }

/* --- Titre de la régie : l'émission à l'antenne, les vues, la session ------- */
.regie-tete { gap: 4px 12px; }
.regie-tete h1 { font-size: 1.05rem; }
.regie-tete .sous-nav { margin-left: 6px; }
/* Lien qui a l'air d'un bouton discret (ouvre une page à côté). */
a.lien-bouton { color: var(--c-texte); text-decoration: none; border: 1px solid var(--c-bord); border-radius: var(--c-rayon); }
a.lien-bouton:hover { border-color: var(--c-accent); }

.eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-texte-faible); }
.retard { color: var(--c-pgm); }
.avance { color: var(--c-pvw); }
.orange { color: var(--c-alerte); }
.tag { font: 800 .62rem/1.5 system-ui; letter-spacing: .08em; text-transform: uppercase; padding: 0 5px; border-radius: 3px; white-space: nowrap; }
.tag.pgm { background: var(--c-pgm); color: #fff; }
.tag.pvw { background: var(--c-pvw); color: #04150a; }
kbd { font: .72rem var(--c-mono); background: var(--c-fond-3); border: 1px solid var(--c-bord);
      border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; }

/* --- Vue Conducteur ---------------------------------------------------------
   Chronos en haut, conducteur à gauche (lecture seule), antenne et « Suivant »
   au centre, prompteur sur toute la hauteur à droite. */
.cd-ouverture { background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: 10px; padding: 16px; display: grid; gap: 10px; width: 100%; max-width: 980px; }
.cd-ouverture h2 { margin: 0; }
.cd-ouverture p { margin: 0; }
.cd-em { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--c-fond-3); border-radius: 8px; }

/* La grille occupe la hauteur restante ; la dernière rangée prend le reste. */
.cd {
  flex: 1 0 auto;
  display: grid; gap: var(--c-espace); align-items: start;
  grid-template-columns: 280px minmax(0, 1fr) 360px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "chronos chronos rail" "liste centre rail";
}

/* Chronos : une ligne de cases, libellé · valeur · précision. */
.cd-chronos {
  grid-area: chronos;
  display: grid; grid-auto-flow: column; grid-template-columns: auto; grid-auto-columns: minmax(0, 1fr); gap: 1px;
  background: var(--c-bord); border: 1px solid var(--c-bord); border-radius: 10px; overflow: hidden;
}
.cd-chronos > div { background: var(--c-fond-2); padding: 8px 14px; display: grid; align-content: center; min-width: 0; }
.cd-chronos .eyebrow, .cd-chronos .sous { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-chronos .v { font-family: var(--c-mono); font-variant-numeric: tabular-nums; font-size: 1.45rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-chronos .sous { font-size: .76rem; color: var(--c-texte-faible); min-height: 1.15em; }
.cd-chronos .sous.retard { color: var(--c-pgm); }
.cd-chronos .sous.avance { color: var(--c-pvw); }
.cd-chronos .onair { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .1em; font-size: .82rem; text-transform: uppercase; }
.onair i { width: 12px; height: 12px; border-radius: 50%; background: var(--c-pgm); box-shadow: 0 0 10px var(--c-pgm); }
.onair.off i { background: var(--c-texte-faible); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .onair:not(.off) i { animation: pulse 1.6s infinite; }
  @keyframes pulse { 50% { opacity: .35; } }
}
.cd-chronos .barre { height: 4px; background: var(--c-fond-3); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.cd-chronos .barre i { display: block; height: 100%; width: 0; background: var(--c-pvw); }

/* Conducteur : heure prévue · titre · durée prévue, puis l'état de la séquence.
   L'hôte prend la hauteur de sa rangée sans l'agrandir (contain: size) : un long
   conducteur défile dans sa colonne, un court ne s'étire pas. */
.cd-col-hote { grid-area: liste; align-self: stretch; contain: size; min-height: 220px; min-width: 0; }
.cd-col { max-height: 100%; display: flex; flex-direction: column; background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: 10px; overflow: hidden; }
.cd-col-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 12px 7px; }
.cd-col-tete h3 { margin: 0; }
.cd-liste { flex: 0 1 auto; min-height: 0; list-style: none; margin: 0; padding: 0; position: relative; overflow: auto; }
.cd-seq {
  position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: 3px 8px; align-items: baseline;
  border-top: 1px solid var(--c-bord); padding: 8px 12px 8px 14px;
}
.cd-seq::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--c-bord)); }
.cd-seq.passee { opacity: .55; }
.cd-seq.encours { background: color-mix(in srgb, var(--c-pgm) 12%, var(--c-fond-2)); }
.cd-seq.ensuite { background: color-mix(in srgb, var(--c-pvw) 5%, var(--c-fond-2)); }
.cd-seq .cd-h { font-size: .74rem; color: var(--c-texte-faible); }
.cd-seq .t { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-seq .cd-d { font-size: .82rem; }
.cd-seq-sous, .cd-seq-barre, .cd-etapes { grid-column: 2 / -1; }
.cd-seq-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-size: .76rem; color: var(--c-texte-faible); }
.cd-seq-barre { height: 3px; background: var(--c-fond-3); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.cd-seq-barre i { display: block; height: 100%; width: 0; background: var(--c-pvw); }
.cd-pass { font-size: .74rem; color: var(--c-texte-faible); }
.cd-etapes { list-style: none; margin: 1px 0 0; padding: 0; display: grid; gap: 1px; }
.cd-et { display: flex; align-items: baseline; gap: 7px; font-size: .8rem; color: var(--c-texte-faible); }
.cd-et .cd-pass { margin-left: auto; text-align: right; }
.cd-et-puce { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-bord); transform: translateY(-1px); }
.cd-et.encours { color: var(--c-texte); }
.cd-et.encours .cd-et-puce { background: var(--c-pgm); }
.cd-et.ensuite .cd-et-puce { background: var(--c-pvw); }

/* Centre : l'antenne, ce qui vient, « Suivant ». */
.cd-centre { grid-area: centre; display: grid; gap: var(--c-espace); min-width: 0; }
.cd-indic { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--c-bord); border-radius: 10px; background: var(--c-fond-2); }
.cd-indic .gros { font-size: 1.35rem; font-weight: 700; text-wrap: balance; }
.cd-moniteurs { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--c-espace); align-items: start; }
.cd-mon-cadre { display: grid; gap: 5px; min-width: 0; }
.cd-mon-tete { display: flex; gap: 8px; align-items: center; font-size: .78rem; min-width: 0; min-height: 26px; }
.cd-mon-nom { flex: 1; min-width: 0; color: var(--c-texte-faible); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-mon-extras { display: inline-flex; align-items: center; gap: 8px; }
.cd-mon-extras:empty { display: none; }
.cd-son-seul { color: var(--c-texte); white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.cd-pdf { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cd-pdf .btn-min { padding: 1px 7px; }
.cd-son { white-space: nowrap; color: var(--c-texte-faible); }
.cd-son[aria-pressed="true"] { color: var(--c-texte); border-color: var(--c-accent); }
.cd-mon {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; border: 2px solid var(--c-bord);
  background: repeating-conic-gradient(#15191e 0% 25%, #1b2027 0% 50%) 50% / 18px 18px;
}
.cd-mon.program { border-color: var(--c-pgm); }
.cd-mon.preview { border-color: var(--c-pvw); }
/* color-scheme : la console est sombre, les coquilles non ; sans cet alignement,
   le navigateur peint un fond opaque derrière chaque iframe et les couches se masquent. */
.cd-mon iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; pointer-events: none; color-scheme: normal; }
.cd-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.cd-cam-ko { color: var(--c-alerte); white-space: nowrap; cursor: help; }

.cd-suivant {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left;
  background: var(--c-pvw); border-color: var(--c-pvw); color: #04150a; padding: 14px 18px; border-radius: 10px;
}
.cd-suivant:hover:not(:disabled) { border-color: #fff; }
.cd-suivant.fin { background: var(--c-fond-3); border-color: var(--c-pgm); color: var(--c-texte); }
.cd-suivant .fl { font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; }
.cd-suivant .q { font-weight: 600; font-size: 1.05rem; min-width: 0; }
.cd-suivant .q small { display: block; font-weight: 500; opacity: .8; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-suivant kbd { color: inherit; background: transparent; border-color: currentColor; }

/* Passage automatique : sous « Suivant », pour ne jamais déplacer le bouton. */
.cd-auto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 8px; font-size: .88rem;
  border: 1px solid color-mix(in srgb, var(--c-alerte) 50%, var(--c-bord)); background: color-mix(in srgb, var(--c-alerte) 10%, var(--c-fond)); color: var(--c-alerte); }
.cd-auto.tenu { color: var(--c-texte-faible); border-color: var(--c-bord); background: var(--c-fond-2); }
.cd-auto button { margin-left: auto; }

.cd-commandes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cd-commandes select { width: auto; max-width: 15rem; }

/* Prompteur : sur toute la hauteur, à droite. */
.cd-rail {
  grid-area: rail; align-self: stretch; min-height: 380px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; min-width: 0;
}
.cd-rail-tete { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.cd-rail-tete h3 { margin: 0; }
.cd-rail-tete a { font-size: .85rem; white-space: nowrap; }
.cd-prompteur { border-radius: 10px; border: 1px solid var(--c-bord); min-height: 0; }
.cd-rail-aide { margin: 0; font-size: .76rem; }

@media (max-width: 1180px) {
  .cd { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto 1fr; grid-template-areas: "chronos chronos" "centre rail" "liste rail"; }
}
@media (max-width: 980px) {
  .cd-chronos { display: flex; flex-wrap: wrap; }
  .cd-chronos > div { flex: 1 1 40%; }
  .cd-chronos .onair { flex-basis: 100%; }
}
@media (max-width: 820px) {
  .cd { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "chronos" "centre" "rail" "liste"; }
  .cd-rail { height: 360px; min-height: 0; }
  .cd-col-hote { contain: none; min-height: 0; }
  .cd-col { max-height: none; }
  .cd-moniteurs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cd-chronos .v { font-size: 1.15rem; }
  .cd-em { grid-template-columns: minmax(0, 1fr); }
}

/* --- Vue Canaux : contrôle manuel, canal par canal ---------------------------- */
.canaux-barre { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.canaux-barre p { margin: 0; max-width: 62ch; }
.canaux-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--c-espace); align-items: start; }
#bandes { display: grid; gap: var(--c-espace); min-width: 0; }

.canal {
  background: var(--c-fond-2);
  border: 1px solid var(--c-bord);
  border-radius: var(--c-rayon);
  padding: 8px;
  display: grid;
  gap: 8px;
}
.canal:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.canal.actif { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 40%, transparent); }

.canal > header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.canal > header .titre { font-weight: 700; }

.bus-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.bus { display: grid; gap: 6px; min-width: 0; }
.bus .etiquette { display: flex; align-items: center; gap: 6px; font: 700 .72rem/1 system-ui; letter-spacing: .1em; text-transform: uppercase; }
.bus.preview .etiquette { color: var(--c-pvw); }
.bus.program .etiquette { color: var(--c-pgm); }

.vignette {
  position: relative;
  aspect-ratio: 16 / 9;
  background: repeating-conic-gradient(#15191e 0% 25%, #1b2027 0% 50%) 50% / 18px 18px;
  border: 1px solid var(--c-bord);
  border-radius: 4px;
  overflow: hidden;
}
.bus.program .vignette { border-color: color-mix(in srgb, var(--c-pgm) 55%, var(--c-bord)); }
.bus.preview .vignette { border-color: color-mix(in srgb, var(--c-pvw) 45%, var(--c-bord)); }
.vignette iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; }
.vignette .filigrane {
  position: absolute; inset: auto 4px 4px auto; font: 600 .68rem/1 var(--c-mono);
  color: var(--c-texte-faible); background: rgb(0 0 0 / .5); padding: 2px 5px; border-radius: 3px;
}
.vignette.eteinte::after {
  content: 'vignettes désactivées'; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: .78rem; color: var(--c-texte-faible);
}

.contenu { font-size: .84rem; min-height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contenu .type { color: var(--c-texte-faible); font-family: var(--c-mono); font-size: .74rem; }
.cmds { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.cmds .num { width: 4.5em; padding: 3px 5px; font-size: .8rem; }

.jauge { height: 3px; background: var(--c-fond-3); border-radius: 2px; overflow: hidden; }
.jauge > div { height: 100%; background: var(--c-accent); width: 0; }

#rail { display: grid; gap: 8px; position: sticky; top: 60px; }
#rail .vue { display: grid; gap: 8px; background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: var(--c-rayon); padding: 8px; }
#rail .vue > p { margin: 0; }
.liste { display: grid; gap: 4px; max-height: min(52vh, 520px); overflow: auto; }
.liste .item { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center;
  padding: 5px 6px; border: 1px solid transparent; border-radius: 4px; background: var(--c-fond-3); }
.liste .item:hover { border-color: var(--c-bord); }
.liste .item .nom { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .item .meta { font: .72rem var(--c-mono); color: var(--c-texte-faible); }
.liste.journal { font-size: .8rem; }
.liste.journal .item { grid-template-columns: 1fr; background: transparent; padding: 2px 4px; }

@media (max-width: 900px) {
  .canaux-grille { grid-template-columns: minmax(0, 1fr); }
  #rail { position: static; }
  .bus-paire { grid-template-columns: 1fr; }
}

/* Téléphone : vignettes plus petites pour garder plusieurs canaux à l'écran
   (tourner ses pages de PDF depuis son téléphone reste l'usage visé). */
@media (max-width: 560px) {
  .vignette { max-width: 58vw; }
  .cmds .num { width: 4em; }
  .canal { padding: 6px; }
}