/* Préparation (/admin) : le contenu de l'émission d'abord, l'outil à part.
   Hiérarchie : ce qui sert la tâche en clair, le secondaire en retrait. */
main { padding: 16px var(--c-espace) 48px; max-width: 1360px; margin: 0 auto; }
.vue { display: grid; gap: 14px; }

/* Navigation et titres de vue : communs aux consoles (console.css). */
.vue-tete > .btn-primaire { margin-left: auto; }

/* --- Boutons propres à la préparation ------------------------------------- */
.btn-ajout {
  justify-self: start; background: transparent; border: 1px dashed var(--c-bord);
  color: var(--c-texte-faible); padding: 5px 11px; font-size: .84rem;
}
.btn-ajout:hover:not(:disabled) { color: var(--c-texte); border-color: var(--c-accent); }
.btn-icone {
  width: 28px; height: 28px; padding: 0; display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
  background: transparent; border-color: transparent; color: var(--c-texte-faible);
}
.btn-icone:hover:not(:disabled) { color: var(--c-texte); border-color: var(--c-bord); }
.btn-lien { display: inline-block; text-decoration: none; padding: 7px 14px; border-radius: var(--c-rayon); text-align: center; }
a.btn-primaire { background: var(--c-accent); color: #04121f; font-weight: 600; }
a.btn-second { border: 1px solid var(--c-bord); background: var(--c-fond-3); color: var(--c-texte); }
a.btn-second:hover { border-color: var(--c-accent); }
a.btn-lien-min { display: inline-block; text-decoration: none; border: 1px solid var(--c-bord); border-radius: var(--c-rayon); color: var(--c-texte); background: var(--c-fond-3); }
.select-min, .court { width: auto; padding: 3px 6px; font-size: .82rem; }
.court { width: 5.5em; }
.select-auto { width: auto; max-width: 100%; }

/* --- Éléments communs ------------------------------------------------------ */
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-texte-faible); }
.alerte { color: var(--c-alerte); font-size: .8rem; margin: 0; }
.aide { margin: 4px 0 0; }
.defile-x { overflow-x: auto; }
.retard { color: var(--c-pgm); }
.avance { color: var(--c-pvw); }
.groupe { background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: var(--c-rayon); padding: 8px 10px; }
.actions-ligne { text-align: right; white-space: nowrap; }
.actions-ligne button + button { margin-left: 4px; }

.badge.statut-prete { color: var(--c-pvw); border-color: color-mix(in srgb, var(--c-pvw) 50%, var(--c-bord)); }
.badge.statut-direct { color: #fff; background: var(--c-pgm); border-color: var(--c-pgm); }
.badge.statut-modele { color: var(--c-accent); }

.depot {
  border: 1px dashed var(--c-bord); border-radius: 8px; padding: 14px; text-align: center; background: var(--c-fond-2);
}
.depot.depot-min { padding: 10px; }
.depot.survol { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 10%, var(--c-fond-2)); }
.depot p { margin: 2px 0; }
.progres { height: 4px; background: var(--c-fond-3); border-radius: 2px; overflow: hidden; }
.progres > div { height: 100%; background: var(--c-accent); width: 0; transition: width .1s linear; }

.pied-dialogue { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--c-bord); }
.mod-fichier { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mod-fichier > span:first-child { margin-right: 4px; }
.pile.serre { gap: 8px; }
.ligne-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.ligne-form > div { flex: 1; min-width: 9rem; }
.ligne-form > h2 { flex-basis: 100%; margin: 0; }

/* --- Accueil des émissions ------------------------------------------------- */
.em-carte { display: grid; gap: 10px; background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: 10px; padding: 12px 16px 14px; }
.em-prochaine { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 14px 16px; }
.em-titre { font-size: 1.25rem; margin: 4px 0; text-wrap: balance; }

/* --- Éditeur d'émission ---------------------------------------------------- */
.em-haut { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.em-haut .retour { font-size: .86rem; text-decoration: none; margin-right: 4px; }
.em-champs { display: grid; grid-template-columns: minmax(0, 1fr) 6em 15em; gap: 10px; }
.em-champs.modele { grid-template-columns: minmax(0, 1fr); }
.em-champs .titre { font-size: 1.12rem; font-weight: 600; }
.em-depart { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: .86rem; }
.court.repere { width: 7em; }
.em-resume { margin: 0; color: var(--c-texte-faible); font-size: .86rem; }
.em-resume b { color: var(--c-texte); font-weight: 600; }

.em-grille { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
.panneau { background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: 10px; min-width: 0; }
.panneau > header, .panneau > div > header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--c-bord); flex-wrap: wrap;
}
.panneau header h2 { margin: 0; font-size: .98rem; }

/* Conducteur : heure, séquence, durée. Rien d'autre. */
.seq {
  display: grid; grid-template-columns: 4.7rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 10px 14px 10px 17px; border-top: 1px solid var(--c-bord); cursor: pointer; position: relative;
}
.panneau > header + .seq { border-top: 0; }
.seq::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--c-bord)); }
.seq:hover { background: var(--c-fond-3); }
.seq[aria-current="true"] { background: color-mix(in srgb, var(--c-accent) 12%, var(--c-fond-2)); }
.seq-heure { color: var(--c-texte-faible); font-size: .78rem; }
.seq-titre { font-weight: 600; min-width: 0; }
.seq-titre small { display: block; font-weight: 400; color: var(--c-texte-faible); font-size: .78rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-auto { color: var(--c-alerte); }
.seq-duree { text-align: right; font-size: .84rem; }
.seq-duree small { display: block; font-size: .74rem; white-space: nowrap; }

/* Zone d'ajout : en pointillés, on lit tout de suite qu'elle sert à ajouter. */
.ajout-zone {
  margin: 10px 12px 12px; padding: 10px 12px; display: grid; gap: 4px; border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--c-accent) 50%, var(--c-bord));
  background: color-mix(in srgb, var(--c-accent) 5%, transparent);
}
.ajout-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ajout-titre { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-right: auto; }
.plus {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-accent); color: #04121f; font-weight: 800; line-height: 1;
}
.ajout-zone select { width: auto; min-width: 10em; padding: 4px 8px; font-size: .86rem; }
.ajout-aide { margin: 0; font-size: .76rem; color: var(--c-texte-faible); }

/* Séquence sélectionnée */
.detail { padding: 14px; display: grid; gap: 20px; }
.seq-champs { display: grid; grid-template-columns: minmax(0, 1fr) 6.5em 4em; gap: 10px; }
.seq-champs input[type="color"] { padding: 2px; height: 34px; }
.case-attente p { margin: 4px 0 0 26px; }
.bloc { display: grid; gap: 8px; }
.bloc > h3 { margin: 0; }
.bloc > h3 label { display: inline; font-size: inherit; color: inherit; margin: 0; }
textarea.prompteur { font-family: inherit; font-size: .9rem; line-height: 1.5; min-height: 9em; }

/* Étape : ce qui est à l'écran, canal par canal. */
.etape { border: 1px solid var(--c-bord); border-radius: 8px; background: color-mix(in srgb, var(--c-fond) 55%, var(--c-fond-2)); overflow: hidden; }
.etape-tete {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center;
  padding: 8px 10px; background: var(--c-fond-3); border-bottom: 1px solid var(--c-bord);
}
.etape-num { font: .75rem var(--c-mono); color: var(--c-texte-faible); }
.etape-titre { font-weight: 600; padding: 4px 8px; }
.couches { display: grid; }
.couche {
  display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
  padding: 10px 8px 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--c-bord) 70%, transparent);
}
.couche-canal { padding-top: 6px; min-width: 0; }
.couche-canal label { margin: 0; color: var(--c-texte); font-weight: 600; font-size: .88rem; }
.couche-canal small { display: block; color: var(--c-texte-faible); font-size: .74rem; line-height: 1.3; margin-top: 2px; }
.couche-el { display: grid; gap: 5px; min-width: 0; }
.couche-vide { padding: 10px 12px; margin: 0; }
.opts summary { cursor: pointer; font-size: .76rem; color: var(--c-texte-faible); width: fit-content; }
.opts summary:hover { color: var(--c-texte); }
.opts.regle summary { color: var(--c-texte); }
.opts-champs { display: flex; gap: 8px 16px; flex-wrap: wrap; padding: 8px 0 2px; }
.opt { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: .8rem; color: var(--c-texte-faible); }
.ajout-couche { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--c-bord) 70%, transparent); }
.ajout-couche select {
  flex: 1; min-width: 0; padding: 4px 8px; font-size: .82rem; color: var(--c-texte-faible);
  background: transparent; border-style: dashed;
}
.etape-pied { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; padding: 10px 12px 12px; }

/* Après le direct */
.export { border-color: color-mix(in srgb, var(--c-pvw) 40%, var(--c-bord)); }
.export-corps { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 16px; padding: 14px; align-items: start; }
.export textarea { font-size: .85rem; min-height: 0; }
.export-actions { display: grid; gap: 8px; align-content: start; justify-items: start; }
.export-actions p { margin: 0; }

/* --- Bibliothèque ---------------------------------------------------------- */
.biblio-outils { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filtres { display: flex; gap: 4px; flex-wrap: wrap; }
.filtre { padding: 4px 11px; border-radius: 999px; font-size: .82rem; background: transparent; color: var(--c-texte-faible); }
.filtre[aria-pressed="true"] { background: var(--c-fond-3); color: var(--c-texte); border-color: var(--c-accent); }
#recherche-biblio { max-width: 240px; margin-left: auto; }
.biblio { display: grid; gap: 8px; }
.item-biblio {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center;
  background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: 8px; padding: 8px 12px 8px 8px;
}
.vignette-biblio {
  width: 88px; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--c-fond-3); display: grid; place-items: center;
  overflow: hidden; font: 700 .72rem var(--c-mono); color: var(--c-texte-faible);
}
.vignette-biblio img { width: 100%; height: 100%; object-fit: cover; }
.item-nom { font-weight: 600; overflow-wrap: anywhere; }
.item-info { font-size: .8rem; color: var(--c-texte-faible); }
.item-actions { display: flex; gap: 6px; }
.cartons { grid-column: 2 / -1; margin: 2px 0 0; padding: 0 0 0 10px; list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--c-bord); }
.cartons li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .86rem; }
.carton-valeurs { color: var(--c-texte-faible); font-size: .78rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
p.cartons { border-left: 0; padding-left: 0; font-size: .8rem; margin: 0; }

/* --- Réglages -------------------------------------------------------------- */
.liste-reglages { display: grid; gap: 6px; }
.ligne-reglage {
  display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap;
  background: var(--c-fond-2); border: 1px solid var(--c-bord); border-radius: 8px; padding: 8px 12px;
}
.ligne-reglage-corps { flex: 1; min-width: 12rem; display: grid; gap: 1px; }
.ligne-reglage-corps code { font-size: .76rem; }
img.mini { height: 20px; vertical-align: middle; margin-right: 6px; border-radius: 2px; }
.champ-token { flex: 1; min-width: 0; }
.carte > h2 { margin: 0; }
.carte summary { cursor: pointer; }

/* --- Petits écrans --------------------------------------------------------- */
@media (max-width: 980px) {
  .em-grille, .export-corps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .em-prochaine { grid-template-columns: minmax(0, 1fr); }
  .em-champs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .em-champs > :first-child { grid-column: 1 / -1; }
  .seq-champs { grid-template-columns: minmax(0, 1fr) 6.5em 4em; }
  .seq-champs > :first-child { grid-column: 1 / -1; }
  .seq { grid-template-columns: 3.9rem minmax(0, 1fr) auto; gap: 8px; }
  .couche { grid-template-columns: minmax(0, 1fr) auto; }
  .couche-el { grid-column: 1 / -1; grid-row: 2; }
  .etape-pied { grid-template-columns: minmax(0, 1fr); }
  .etape-tete { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .etape-tete .btn-suppr { grid-column: 1 / -1; justify-self: end; }
  .item-biblio { grid-template-columns: 64px minmax(0, 1fr); }
  .vignette-biblio { width: 64px; }
  .item-actions { grid-column: 1 / -1; justify-content: flex-end; }
  #recherche-biblio { max-width: none; margin-left: 0; }
}