/* ==========================================================================
   Punchbox — charte « console de radio, années 70 »
   Palette héritée de l'appli locale (audit §13) :
     bakélite  #16181d   témoin vert #3ddc97   laiton #c9a84c
   Priorité : accessibilité (contraste, tailles) avant le pastiche.
   Pas de faux reflet métallique, pas de dégradé chromé.
   ========================================================================== */

:root {
  --bakelite:      #16181d;
  --bakelite-clair:#1e222a;
  --bakelite-carte:#20242d;
  --bordure:       #333a45;
  --bordure-forte: #454e5c;
  --texte:         #f2efe6;   /* crème, contraste ~14:1 sur bakélite */
  --texte-doux:    #b9c0cc;   /* gris clair, contraste ~9:1 */
  --texte-faible:  #8b93a1;
  --vert:          #3ddc97;   /* témoin */
  --vert-fonce:    #1f7d5a;
  --laiton:        #c9a84c;
  --laiton-clair:  #e2c977;
  --rouge:         #e8564b;   /* enregistrement */
  --rouge-fonce:   #7d2621;
  --ambre:         #e8a13c;
  --focus:         #7fd8ff;

  --rayon:      10px;
  --rayon-gros: 16px;

  /* Largeur maximale du contenu. Étroite en une colonne, élargie dès que le
     tableau de bord passe en deux (puis trois) colonnes — voir les media
     queries plus bas. Le bandeau, le <main> et le pied la partagent pour
     rester alignés. */
  --largeur-max: 860px;
  --mono: "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", "DejaVu Sans Mono",
          "Liberation Mono", Consolas, "Courier New", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--texte);
  background:
    radial-gradient(120% 80% at 50% -10%, #1b1f27 0%, var(--bakelite) 60%) fixed;
  min-height: 100dvh;
  padding: 0 max(16px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
}

/* Lien d'évitement (accessibilité clavier) */
.lien-saut {
  position: absolute; left: -9999px; top: 8px;
  background: var(--vert); color: #06231a; padding: 10px 16px;
  border-radius: var(--rayon); font-weight: 700; z-index: 100;
}
.lien-saut:focus { left: 16px; }

.sr-seulement {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Bandeau
   -------------------------------------------------------------------------- */
.bandeau {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  max-width: var(--largeur-max); margin: 0 auto; padding: 20px 4px 12px;
}
.marque { display: flex; align-items: center; gap: 12px; }
.marque h1 {
  margin: 0; font-size: 1.7rem; letter-spacing: 0.16em; font-weight: 800;
  color: var(--laiton-clair);
}
.marque-sous { color: var(--texte-faible); font-size: 0.9rem; letter-spacing: 0.02em; }

.led {
  width: 14px; height: 14px; border-radius: 50%;
  background: #444; box-shadow: inset 0 0 0 2px #0006;
  flex: none;
}
.led[data-etat="ok"]      { background: var(--vert);  box-shadow: 0 0 8px var(--vert); }
.led[data-etat="occupe"]  { background: var(--ambre); box-shadow: 0 0 8px var(--ambre); }
.led[data-etat="erreur"]  { background: var(--rouge); box-shadow: 0 0 8px var(--rouge); }
.led[data-etat="inconnu"] { background: #555; }

.bandeau-actions { display: flex; align-items: center; gap: 8px; }

.badge-horslimite {
  background: var(--rouge-fonce); color: #ffd9d5; border: 1px solid var(--rouge);
  padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.bouton-icone {
  background: var(--bakelite-clair); color: var(--texte-doux);
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 8px 14px; font: inherit; font-size: 0.92rem; cursor: pointer;
}
.bouton-icone:hover { border-color: var(--bordure-forte); color: var(--texte); }

/* --------------------------------------------------------------------------
   Cartes / sections
   -------------------------------------------------------------------------- */
main { max-width: var(--largeur-max); margin: 0 auto; }

/* --------------------------------------------------------------------------
   Tableau de bord — la disposition en TROIS ZONES (maquette validée)
   --------------------------------------------------------------------------
   Une seule grille porte tout l'agencement, par zones nommées :
     recup  = bannière de récupération (toujours pleine largeur)
     regie  = console d'enregistrement (langue, micro, gros bouton, VU…)
     texte  = zone de texte transcrit
     sortie = actions de sortie (copier, .txt, vidéo, relecture) + encart ÉTAT
     detail = aperçus de sortie (lecteur audio, vidéo) — pleine largeur, à la demande

   On agence par grid-template-areas, pas par l'ordre du HTML : le DOM garde son
   ordre de lecture (régie, texte, sorties), la grille les replace côte à côte
   sans casser le flux clavier ni le lecteur d'écran.

   Par défaut (mobile < 900 px) tout s'empile en UNE colonne. */
.tableau-de-bord {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "recup"
    "regie"
    "texte"
    "sortie"
    "detail";
}
.banniere-recup { grid-area: recup; }
.zone-regie     { grid-area: regie; }
.zone-texte     { grid-area: texte; }
.zone-sortie    { grid-area: sortie; }
.zone-detail    { grid-area: detail; }
/* Tant qu'aucun aperçu (audio/vidéo) n'est ouvert, la zone détail disparaît
   complètement : pas de piste de grille vide, pas d'espace mort (règle « aucune
   zone vide »). :has est géré par les navigateurs cibles ; à défaut, il ne
   reste qu'un écart de grille inoffensif. */
.zone-detail:not(:has(.panneau-sortie:not([hidden]))) { display: none; }

/* ≥ 900 px : DEUX colonnes — régie à gauche, texte à droite ; les SORTIES
   passent en BANDEAU horizontal pleine largeur sous le texte. */
@media (min-width: 900px) {
  :root { --largeur-max: 1120px; }
  .tableau-de-bord {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
    grid-template-areas:
      "recup  recup"
      "regie  texte"
      "sortie sortie"
      "detail detail";
  }
}

/* ≥ 1200 px : TROIS colonnes côte à côte — régie ~200px | texte 1fr | sorties 186px.
   C'est la disposition validée par le fondateur. */
@media (min-width: 1200px) {
  :root { --largeur-max: 1400px; }
  .tableau-de-bord {
    gap: 24px;
    grid-template-columns: 200px minmax(0, 1fr) 186px;
    grid-template-areas:
      "recup  recup  recup"
      "regie  texte  sortie"
      "detail detail detail";
  }
}

.carte {
  background: var(--bakelite-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-gros);
  padding: 20px;
}
.carte-console { border-color: var(--bordure-forte); }

.titre-section {
  margin: 0 0 16px; font-size: 1.05rem; font-weight: 700;
  color: var(--laiton-clair); letter-spacing: 0.02em;
}
.titre-section .sous-titre, .sous-titre { color: var(--texte-faible); font-weight: 400; }

/* --------------------------------------------------------------------------
   Champs de formulaire
   -------------------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ-inline { flex-direction: row; align-items: center; gap: 10px; }
.champ-libelle { font-size: 0.9rem; color: var(--texte-doux); }
.champ-aide { font-size: 0.82rem; color: var(--texte-faible); }
.champ-aide code, .dialogue code {
  font-family: var(--mono); background: #0006; padding: 1px 5px; border-radius: 4px;
}

.select, .entree {
  font: inherit; color: var(--texte);
  background: var(--bakelite); border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon); padding: 11px 12px; width: 100%;
}
.champ-inline .select { width: auto; min-width: 140px; }
.couleur {
  width: 48px; height: 36px; padding: 2px; border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon); background: var(--bakelite); cursor: pointer;
}
.note {
  margin: 12px 0 0; font-size: 0.9rem; color: var(--ambre);
  min-height: 1.2em;
}
.note:empty { display: none; }

/* --------------------------------------------------------------------------
   Colonne 1 — RÉGIE (console d'enregistrement)
   -------------------------------------------------------------------------- */
/* La régie s'empile verticalement dans sa colonne étroite : titre, langue,
   micro, gros bouton + chrono, commandes, VU-mètre. Tout tient sans défiler. */
.zone-regie { display: flex; flex-direction: column; gap: 14px; }

/* Titre RÉGIE en petites capitales espacées */
.titre-regie {
  margin: 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--laiton-clair);
}

/* Gros bouton + chrono, centrés */
.regie-bouton {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 2px 0;
}
/* Le VU-mètre occupe toute la largeur de la colonne */
.regie-vu { width: 100%; }

/* Gros bouton d'enregistrement — dominant mais dimensionné pour la colonne étroite */
.bouton-enreg {
  --taille: 96px;
  width: var(--taille); height: var(--taille); border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #262b34, #14171d 78%);
  border: 3px solid var(--bordure-forte);
  color: var(--texte); font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; transition: border-color .15s, box-shadow .15s;
}
.bouton-enreg:hover { border-color: var(--laiton); }
.bouton-enreg-pastille {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--rouge); box-shadow: 0 0 0 3px #0004 inset;
  transition: border-radius .2s, background .2s, transform .2s;
}
.bouton-enreg-txt { font-weight: 800; letter-spacing: 0.08em; font-size: 0.72rem; }

/* État « en enregistrement » : pastille carrée pulsante, halo rouge */
.bouton-enreg[aria-pressed="true"] {
  border-color: var(--rouge);
  box-shadow: 0 0 0 4px var(--rouge-fonce), 0 0 26px -2px var(--rouge);
}
.bouton-enreg[aria-pressed="true"] .bouton-enreg-pastille {
  border-radius: 6px; width: 26px; height: 26px; animation: pulse-rec 1.1s ease-in-out infinite;
}
@keyframes pulse-rec { 0%,100% { transform: scale(1); } 50% { transform: scale(0.86); } }

.bouton-enreg:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--bordure); }
.bouton-enreg:disabled .bouton-enreg-pastille { background: var(--texte-faible); }

.chrono {
  font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
  color: var(--vert); letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* VU-mètre */
.vumetre {
  width: 100%; height: auto; display: block;
  background: #0d0f13; border: 1px solid var(--bordure); border-radius: var(--rayon);
}
.vumetre-pied {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 6px; min-height: 1.4em;
}
.vumetre-legende {
  margin: 0; text-align: center; font-size: 0.78rem;
  color: var(--texte-faible); letter-spacing: 0.14em; text-transform: uppercase;
}
/* Témoin de saturation (mission §1) : rouge quand ça écrête, + conseil actionnable.
   Le mot SATURATION clignote pour attirer l'œil ; le conseil, lui, reste stable
   et lisible (un texte utile qui clignote se lit mal). */
.temoin-sat {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  color: #2a0f0d; background: var(--rouge); border: 1px solid #ffb3ad;
}
.temoin-sat-titre { letter-spacing: 0.12em; }
.temoin-sat-conseil {
  font-family: inherit; font-weight: 600; letter-spacing: normal;
  text-transform: none; font-size: 0.7rem;
}
.temoin-sat.actif .temoin-sat-titre { animation: clignote-sat 0.5s steps(1) infinite; }
@keyframes clignote-sat { 50% { opacity: 0.35; } }

/* Choix du micro : empilé dans la régie (libellé au-dessus, menu pleine largeur). */
.champ-micro { width: 100%; }

/* Durée maximale restante + avertissement de limite */
.chrono-restant {
  font-family: var(--mono); font-size: 0.85rem; color: var(--texte-faible);
  font-variant-numeric: tabular-nums; text-align: center;
}
.chrono-restant[data-ton="alerte"] { color: var(--ambre); font-weight: 700; }

/* Commandes secondaires (pause / annuler) : sobres, sous le gros bouton */
.commandes-capture { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bouton-secondaire {
  background: var(--bakelite-clair); color: var(--texte-doux);
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon);
  padding: 8px 16px; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.bouton-secondaire:hover { border-color: var(--laiton); color: var(--texte); }
.bouton-annuler:hover { border-color: var(--rouge); color: #ff9a91; }

/* Alerte de capture (suspension / interruption) */
.alerte-capture {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--rayon);
  font-size: 0.92rem; line-height: 1.5;
  border: 1px solid var(--ambre); background: #2a2313; color: #ffe6b0;
}
.alerte-capture[data-ton="erreur"] {
  border-color: var(--rouge); background: #2a1614; color: #ffd0cb;
}

/* Bannière de récupération d'un enregistrement interrompu */
.banniere-recup {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: var(--rayon-gros);
  border: 1px solid var(--laiton); background: #241f10; color: var(--texte);
}
/* L'attribut hidden doit gagner : sans cette règle, .banniere-recup{display:flex}
   (feuille auteur) écrase le [hidden]{display:none} du navigateur (feuille UA,
   priorité moindre), et le bandeau reste affiché en permanence — boutons inertes
   car aucun audio réel n'est proposé. Spécificité (0,2,0) > (0,1,0). */
.banniere-recup[hidden] { display: none; }
.banniere-recup-txt { display: flex; flex-direction: column; gap: 2px; }
.banniere-recup-txt strong { color: var(--laiton-clair); }
.banniere-recup-txt span { color: var(--texte-doux); font-size: 0.9rem; }
.banniere-recup-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   Progression (barre honnête : pulse vs fraction réelle)
   -------------------------------------------------------------------------- */
.progression { margin: 0 0 12px; }
.progression[hidden] { display: none; }
.progression-tete {
  display: flex; justify-content: flex-end; align-items: baseline;
  margin-bottom: 6px; gap: 12px; min-height: 1em;
}
.etat { color: var(--texte-doux); font-size: 0.95rem; }
.progression-pct { font-family: var(--mono); color: var(--vert); font-variant-numeric: tabular-nums; }

.barre {
  height: 16px; background: #0d0f13; border: 1px solid var(--bordure-forte);
  border-radius: 999px; overflow: hidden; position: relative;
}
.barre-jauge {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--vert-fonce), var(--vert));
  border-radius: 999px; transition: width .25s ease;
}
/* Mode pulse : aucune fraction réelle encore reçue → on ne ment pas sur le % */
.barre[data-mode="pulse"] .barre-jauge {
  width: 35%; animation: pulse-barre 1.3s ease-in-out infinite;
  background: linear-gradient(90deg, var(--laiton) , var(--laiton-clair));
}
@keyframes pulse-barre {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}

/* Ligne d'aide discrète sous la zone de texte (mission colonne 2). */
.ligne-etat {
  margin: 10px 0 0;
  color: var(--texte-faible); font-size: 0.88rem; min-height: 1.4em;
}
.ligne-etat[data-ton="erreur"] { color: #ff9a91; }
.ligne-etat[data-ton="succes"] { color: var(--vert); }

/* --------------------------------------------------------------------------
   Colonne 2 — TEXTE transcrit (chasse fixe, ascenseur interne)
   -------------------------------------------------------------------------- */
/* La zone texte remplit sa colonne : la carte est une colonne flex, la zone
   éditable s'étire pour occuper la hauteur mais ne fait JAMAIS grandir la page
   (son propre overflow interne prend le relais). */
.zone-texte { display: flex; flex-direction: column; }

/* En-tête : titre à gauche, état (libellé + compteur) à droite. */
.texte-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.texte-tete .titre-section { margin: 0; }
.texte-etat {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 0.85rem; color: var(--texte-faible);
}
.texte-etat .etat { font-size: 0.85rem; color: var(--texte-doux); }
.texte-etat .compte { font-family: var(--mono); color: var(--texte-faible); }

.texte-transcrit {
  width: 100%; flex: 1 1 auto; min-height: 340px; resize: none;
  overflow-y: auto;
  font-family: var(--mono); font-size: 1.02rem; line-height: 1.75;
  color: var(--texte); background: #12151a;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon);
  padding: 16px; tab-size: 2;
}
.texte-transcrit::placeholder { color: var(--texte-faible); }
.texte-transcrit.ecrit { caret-color: var(--vert); }

/* --------------------------------------------------------------------------
   Colonne 3 — SORTIES (actions empilées + encart ÉTAT)
   -------------------------------------------------------------------------- */
.zone-sortie { display: flex; flex-direction: column; gap: 12px; }
/* Le titre SORTIES : espacement porté par le gap flex (pas de double marge). */
.zone-sortie > .titre-section { margin-bottom: 0; }

/* Par défaut les quatre actions sont EMPILÉES (colonne étroite, mobile). */
.grille-actions {
  display: grid; grid-template-columns: 1fr;
  gap: 8px;
}
.bouton-action {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: var(--bakelite-clair); border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon); padding: 11px 14px; font: inherit; color: var(--texte);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.bouton-action:hover { border-color: var(--laiton); background: #232833; }
.bouton-action-titre { font-weight: 700; }
.bouton-action-sous { font-size: 0.82rem; color: var(--texte-faible); }
.bouton-action:disabled { opacity: 0.5; cursor: not-allowed; }
.bouton-action[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Action principale : « Copier le texte », fond laiton. */
.bouton-action-primaire {
  background: var(--laiton); border-color: var(--laiton); color: #2a2007;
}
.bouton-action-primaire .bouton-action-sous { color: #5c4a12; }
.bouton-action-primaire:hover { background: var(--laiton-clair); border-color: var(--laiton-clair); }
.bouton-action-primaire:disabled { color: #2a2007; }

/* Encart ÉTAT : file d'attente, moteur, rappel du raccourci. */
.carte-etat {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: #171b22; padding: 12px;
}
.titre-etat {
  margin: 0 0 8px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--laiton-clair);
}
.etat-liste { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.etat-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; align-items: baseline; }
.etat-ligne dt { color: var(--texte-faible); font-size: 0.85rem; }
.etat-ligne dd {
  margin: 0; color: var(--texte-doux); font-size: 0.85rem;
  font-family: var(--mono); text-align: right;
}
.rappel-raccourci {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--bordure);
  font-size: 0.82rem; color: var(--texte-faible); line-height: 1.45;
}
.rappel-raccourci kbd {
  font-family: var(--mono); font-size: 0.8rem;
  background: var(--bakelite); border: 1px solid var(--bordure-forte);
  border-radius: 4px; padding: 1px 6px; color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   Détails de sortie (aperçus lecteur audio / vidéo) — pleine largeur
   -------------------------------------------------------------------------- */
.zone-detail { display: flex; flex-direction: column; gap: 18px; }
.panneau-sortie {
  padding: 16px; border: 1px solid var(--bordure);
  border-radius: var(--rayon-gros); background: #171b22;
}
.panneau-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.panneau-tete h3 { margin: 0; font-size: 1rem; color: var(--laiton-clair); }
.panneau-sortie audio, .apercu-video { width: 100%; margin-top: 12px; }
.apercu-video { max-height: 70vh; background: #000; border-radius: var(--rayon); }

.lien-telecharger {
  display: inline-block; margin-top: 12px;
  background: var(--vert-fonce); color: #eafff6; text-decoration: none;
  border: 1px solid var(--vert); border-radius: var(--rayon);
  padding: 10px 16px; font-weight: 700;
}
.lien-telecharger:hover { background: #248a63; }

/* --------------------------------------------------------------------------
   Panneaux d'options des sorties (repliables, pleine largeur)
   --------------------------------------------------------------------------
   Chaque sortie ouvre son panneau sous la grille (mission §3, piste A). Le
   bouton d'ouverture est un « disclosure » : chevron qui pivote, aria-expanded.
   -------------------------------------------------------------------------- */
.panneau-sortie[hidden] { display: none; }

/* Chevron du bouton d'ouverture : à droite du titre, pivote à l'ouverture. */
.bouton-action-titre {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.chevron { color: var(--laiton-clair); transition: transform .18s ease; font-size: 0.85em; }
.bouton-action[aria-expanded="true"] { border-color: var(--laiton); background: #232833; }
.bouton-action[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.bouton-action-primaire .chevron { color: #5c4a12; }

.panneau-options .panneau-tete { margin-bottom: 4px; }
.bouton-fermer-panneau {
  background: none; border: 1px solid var(--bordure); border-radius: var(--rayon);
  color: var(--texte-doux); padding: 6px 12px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.bouton-fermer-panneau:hover { border-color: var(--bordure-forte); color: var(--texte); }

/* Grille de réglages : plusieurs blocs côte à côte quand la largeur le permet. */
.reglages-grille {
  display: grid; gap: 14px 20px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.reglage {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: #12151a; margin: 0; padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.reglage-titre {
  padding: 0 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--laiton-clair);
}

/* Choix radio : cible cliquable généreuse, témoin vert. */
.radio {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.95rem; color: var(--texte); cursor: pointer; line-height: 1.35;
}
.radio input[type="radio"] {
  margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--vert); flex: none;
}
.radio input[type="radio"]:disabled { cursor: not-allowed; }
.radio:has(input:disabled) { color: var(--texte-faible); cursor: not-allowed; }
.radio-sous { display: block; color: var(--texte-faible); font-size: 0.82rem; }
.radio-note { color: var(--ambre); font-size: 0.82rem; }
.radio-note:empty { display: none; }

.reglage-note {
  margin: 10px 0 0; font-size: 0.88rem; color: var(--texte-doux);
}
.reglage-note strong { color: var(--laiton-clair); }

/* Nom de fichier + extension figée à droite. */
.champ-fichier { display: flex; align-items: stretch; gap: 0; }
.champ-fichier .entree {
  border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;
}
.champ-ext {
  display: flex; align-items: center; padding: 0 12px;
  font-family: var(--mono); color: var(--texte-doux);
  background: var(--bakelite-clair); border: 1px solid var(--bordure-forte);
  border-top-right-radius: var(--rayon); border-bottom-right-radius: var(--rayon);
}
.entree-fichier { font: inherit; font-size: 0.88rem; color: var(--texte-doux); max-width: 100%; }
.entree-fichier::file-selector-button {
  font: inherit; margin-right: 10px; cursor: pointer;
  background: var(--bakelite-clair); color: var(--texte-doux);
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon); padding: 7px 12px;
}

/* Glissière (taille de police). */
.glissiere { flex: 1 1 auto; accent-color: var(--vert); min-width: 120px; }
.valeur-range {
  font-family: var(--mono); color: var(--vert); font-variant-numeric: tabular-nums;
  min-width: 4.5em; text-align: right;
}

.panneau-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center;
}

/* Aperçu de la première image de la vidéo (avant rendu). */
.apercu-image {
  display: block; margin-top: 14px; max-height: 60vh; max-width: 100%;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon); background: #000;
}
.apercu-image[hidden] { display: none; }

/* Ligne d'état d'un panneau : succès (vert) / erreur (rouge) / neutre. */
.panneau-sortie .etat { display: block; margin-top: 12px; min-height: 1.3em; }
.panneau-sortie .etat[data-ton="succes"] { color: var(--vert); }
.panneau-sortie .etat[data-ton="erreur"] { color: #ff9a91; }
.panneau-sortie audio[hidden], .apercu-video[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied {
  max-width: var(--largeur-max); margin: 28px auto 0; padding: 20px 4px;
  border-top: 1px solid var(--bordure); color: var(--texte-faible);
  font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
}
.pied p { margin: 0; max-width: 560px; }
.lien-texte {
  background: none; border: none; color: var(--laiton-clair);
  text-decoration: underline; cursor: pointer; font: inherit; padding: 0;
}

/* --------------------------------------------------------------------------
   Dialogues
   -------------------------------------------------------------------------- */
.dialogue {
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-gros);
  background: var(--bakelite-carte); color: var(--texte);
  max-width: 520px; width: calc(100vw - 32px); padding: 0;
}
.dialogue::backdrop { background: #000a; }
.dialogue-tete {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--bordure);
}
.dialogue-tete h2 { margin: 0; font-size: 1.15rem; color: var(--laiton-clair); }
.dialogue-corps { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialogue-corps h3 { margin: 8px 0 2px; font-size: 1rem; }
.dialogue-corps p { margin: 0; color: var(--texte-doux); }
.dialogue-corps a { color: var(--vert); }
.dialogue-actions { margin-top: 8px; display: flex; justify-content: flex-end; }
.bouton-plein {
  background: var(--laiton); color: #2a2007; border: none; border-radius: var(--rayon);
  padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer;
}
.bouton-plein:hover { background: var(--laiton-clair); }

/* --------------------------------------------------------------------------
   Focus visible (accessibilité clavier) — partout, net
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.bouton-enreg:focus-visible { outline-offset: 5px; }

/* --------------------------------------------------------------------------
   900–1200 px : SORTIES en BANDEAU horizontal sous le texte
   --------------------------------------------------------------------------
   La colonne 3 devient un bandeau pleine largeur : les quatre actions se
   répartissent sur une rangée et l'encart ÉTAT prend place à côté — aucune
   zone vide, tout reste dense. */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .zone-sortie {
    flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 12px 16px;
  }
  .zone-sortie > .titre-section { flex-basis: 100%; margin: 0; }
  .grille-actions {
    flex: 3 1 460px;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
  .carte-etat { flex: 1 1 240px; }
}

/* --------------------------------------------------------------------------
   Barre d'actions collée en bas — mobile (< 900 px) seulement
   --------------------------------------------------------------------------
   Garde les sorties atteignables sans dérouler toute la page : dès qu'un texte
   existe, une barre collante propose l'action principale + un saut vers les
   sorties. Masquée sur écran large (les colonnes suffisent). */
.barre-mobile { display: none; }
@media (max-width: 899.98px) {
  .barre-mobile:not([hidden]) {
    display: flex; gap: 10px; align-items: center; justify-content: space-between;
    position: sticky; bottom: 0; z-index: 30; margin-top: 16px;
    padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--bakelite-clair);
    border: 1px solid var(--bordure-forte); border-radius: var(--rayon-gros);
    box-shadow: 0 -8px 22px -10px #000c;
  }
  .barre-mobile .bouton-plein { flex: 1 1 auto; }
  .barre-mobile-lien { white-space: nowrap; text-decoration: none; }
}

/* --------------------------------------------------------------------------
   Préférences utilisateur
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition: none !important; }
}

/* Mobile étroit : régie centrée, gros bouton plus généreux (plus de colonne à
   ménager), titres réduits. */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .zone-regie { align-items: center; text-align: center; }
  .zone-regie .champ, .zone-regie .champ-micro { width: 100%; max-width: 380px; text-align: left; }
  .zone-regie .note, .zone-regie .regie-vu { width: 100%; max-width: 380px; }
  .bouton-enreg { --taille: 128px; }
  .bouton-enreg-txt { font-size: 0.9rem; }
  .bouton-enreg-pastille { width: 40px; height: 40px; }
  .bouton-enreg[aria-pressed="true"] .bouton-enreg-pastille { width: 34px; height: 34px; }
  .marque h1 { font-size: 1.4rem; }
}