/* ===========================================================================
   Exercice radio GOLF — feuille de style
   Registre visuel : le papier autocopiant des fiches d'intervention.
   Bleu-gris pâle, réglure au carbone, tampon rouge, libellés condensés.
   =========================================================================== */

:root {
  --papier:       #dee4ec;
  --feuille:      #f4f7fa;
  --feuille-bis:  #eaeff5;
  --encre:        #16202b;
  --encre-doux:   #5d6d7d;
  --carbone:      #b0bcc9;
  --carbone-fin:  #c9d3dd;
  --tampon:       #c2172b;
  --golf:         #1a5794;
  --jaune:        #b8862a;
  --vert:         #2c7355;

  --titre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --corps: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", "Consolas", monospace;

  --bandeau-h: 74px;
  --pupitre-h: 148px;
}

* { box-sizing: border-box; }

/* Les écrans masqués le restent, même quand leur classe impose un display. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--papier);
  /* Réglure de la fiche : deux traits de carbone, très pâles. */
  background-image:
    repeating-linear-gradient(to bottom, rgba(90,110,130,.09) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to right,  rgba(90,110,130,.06) 0 1px, transparent 1px 24px);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 { margin: 0; font-family: var(--titre); font-weight: 600; letter-spacing: .02em; }
p { margin: 0 0 .6em; }
b, strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--tampon);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- bandeau -- */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--bandeau-h);
  padding: 0 18px;
  background: var(--encre);
  color: #eef3f8;
  border-bottom: 3px solid var(--tampon);
}

.bandeau__identite { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }

.sigle {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .16em;
  padding: 4px 8px 3px;
  border: 1.5px solid var(--tampon);
  color: #fff;
  background: var(--tampon);
  flex: none;
}

.bandeau h1 {
  font-size: 21px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.bandeau h1 em { font-style: normal; color: #ff8d9c; }

.bandeau__sous {
  margin: 1px 0 0;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8ea2b5;
}

/* Signature : la porteuse. Plate au repos, vivante pendant l'émission. */
.porteuse {
  flex: 0 1 420px;
  min-width: 0;
  height: 46px;
  align-self: center;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.07) 0 1px, transparent 1px 16px),
    #0d1620;
  border: 1px solid #2b3a49;
}

.bandeau__etat { flex: none; text-align: right; }

.etat {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: 0;
  font-family: var(--titre);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.led {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #46586a;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.led--emission { background: var(--tampon); box-shadow: 0 0 9px 2px rgba(194,23,43,.75); }
.led--travail  { background: var(--jaune);  box-shadow: 0 0 8px 1px rgba(184,134,42,.6); }
.led--ecoute   { background: #3f8fd8;       box-shadow: 0 0 8px 1px rgba(63,143,216,.6); }

.horloge {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: #8ea2b5;
  letter-spacing: .06em;
}

/* ---------------------------------------------------------------- feuilles - */

.feuille {
  position: relative;
  padding: 16px 18px 18px;
  background: var(--feuille);
  border: 1px solid var(--carbone);
  box-shadow: 1px 1px 0 rgba(22,32,43,.14);
}

.feuille__titre {
  margin: 0 0 12px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid var(--encre);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .13em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.feuille__ref {
  margin-left: auto;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--encre-doux);
  text-transform: none;
}

/* ------------------------------------------------------------ mise en place */

.mise-en-place {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 1120px;
  margin: 28px auto;
  padding: 0 18px 40px;
}

.intro { max-width: 62ch; color: var(--encre-doux); }

.grille-reglages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 18px;
}

.champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.champ__label {
  font-family: var(--titre);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--encre-doux);
}

.champ__saisie {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--encre);
  padding: 8px 9px;
  background: #fff;
  border: 1px solid var(--carbone);
  border-bottom-width: 2px;
  width: 100%;
}
.champ__saisie:hover { border-color: var(--encre-doux); }

select.champ__saisie { font-family: var(--corps); }

.champ__aide { font-size: 11.5px; color: var(--encre-doux); }

.depart__action {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--carbone);
}

.depart__note { margin: 0; font-size: 12px; color: var(--encre-doux); }

.bouton {
  font-family: var(--titre);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 9px 18px;
  color: var(--encre);
  background: var(--feuille-bis);
  border: 1px solid var(--encre);
  cursor: pointer;
}
.bouton:hover:not(:disabled) { background: #fff; }
.bouton:disabled { opacity: .4; cursor: not-allowed; }

.bouton--principal {
  color: #fff;
  background: var(--tampon);
  border-color: var(--tampon);
  box-shadow: 2px 2px 0 rgba(22,32,43,.3);
}
.bouton--principal:hover:not(:disabled) { background: #a8121f; }

.bouton--fin { font-size: 13px; padding: 6px 11px; letter-spacing: .07em; }

.consignes {
  margin: 0;
  padding-left: 22px;
  font-size: 14px;
}
.consignes li { margin-bottom: 7px; }
.consignes li::marker { font-family: var(--mono); color: var(--tampon); font-size: 12px; }
.consignes i { color: var(--encre-doux); }

.feuille__titre--suite { margin-top: 20px; }

.journal--exemple .transmission__texte { font-size: 12.5px; }
.journal--exemple .transmission__entete { font-size: 12px; }

.consignes__pied {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--carbone);
  font-size: 12.5px;
  text-transform: uppercase;
  font-family: var(--titre);
  letter-spacing: .08em;
  color: var(--tampon);
}

/* --------------------------------------------------------------- exercice -- */

.plan-exercice {
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 1360px;
  margin: 18px auto;
  padding: 0 18px calc(var(--pupitre-h) + 22px);
}

.colonne-fiche { display: flex; flex-direction: column; gap: 14px; }

/* --- la fiche, avec ses lignes à pointillés --- */

.fiche { margin: 0; }

.fiche > div {
  display: grid;
  grid-template-columns: 8.2em minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 8px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--carbone);
}

.fiche dt {
  font-family: var(--titre);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--encre-doux);
}

.fiche dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}

.fiche--serree dd { font-size: 12px; }

.fiche__contexte {
  margin: 12px 0 0;
  padding: 10px 11px;
  background: var(--feuille-bis);
  border-left: 3px solid var(--carbone);
  font-size: 13.5px;
}

.constantes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.constante {
  padding: 5px 7px;
  background: #fff;
  border: 1px solid var(--carbone-fin);
}
.constante__label {
  display: block;
  font-family: var(--titre);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--encre-doux);
}
.constante__valeur {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}

/* --- canevas attendu --- */

.canevas__type {
  margin: -4px 0 10px;
  font-family: var(--titre);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tampon);
}

.canevas { margin: 0; padding: 0; list-style: none; counter-reset: item; }

.canevas li {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px dotted var(--carbone-fin);
  counter-increment: item;
}

.canevas li::before {
  content: counter(item, decimal-leading-zero);
  flex: none;
  width: 1.4em;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--encre-doux);
  padding-top: 2px;
}

.canevas .marque {
  flex: none;
  width: 1.1em;
  font-family: var(--mono);
  font-weight: 600;
  text-align: center;
}

.canevas li[data-statut="ok"]       { color: var(--encre); }
.canevas li[data-statut="ok"] .marque       { color: var(--vert); }
.canevas li[data-statut="partiel"] .marque  { color: var(--jaune); }
.canevas li[data-statut="manquant"]         { color: var(--tampon); }
.canevas li[data-statut="manquant"] .marque { color: var(--tampon); }
.canevas li[data-statut=""] .marque         { color: var(--carbone); }

.canevas__commentaire {
  display: block;
  font-size: 11.5px;
  color: var(--encre-doux);
  font-style: italic;
}

/* --- suivi des notes --- */

.suivi { display: flex; flex-direction: column; gap: 5px; }
.suivi__vide { margin: 0; font-size: 12.5px; color: var(--encre-doux); }

.suivi__ligne { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.suivi__nom {
  flex: none;
  width: 8.5em;
  font-family: var(--titre);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--encre-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suivi__barre { flex: 1 1 auto; height: 7px; background: var(--feuille-bis); border: 1px solid var(--carbone-fin); }
.suivi__barre i { display: block; height: 100%; background: var(--encre); }
.suivi__note { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 500; width: 2.2em; text-align: right; }

.phonetique {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--carbone);
  font-size: 12px;
}
.phonetique summary {
  cursor: pointer;
  font-family: var(--titre);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12.5px;
  color: var(--encre-doux);
}
.phonetique p { margin: 8px 0 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; }

/* --------------------------------------------------------------- journal -- */

.colonne-journal {
  padding: 16px 18px 18px;
  background: var(--feuille);
  border: 1px solid var(--carbone);
  box-shadow: 1px 1px 0 rgba(22,32,43,.14);
  min-height: 60vh;
}

.journal__entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.journal__entete .feuille__titre { flex: 1 1 260px; }

.attendu {
  margin: 0 0 12px;
  padding: 3px 9px;
  font-family: var(--titre);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #fff;
  background: var(--encre);
}
.attendu b { color: #ffb3bd; }

.journal { display: flex; flex-direction: column; gap: 14px; }

/* --- une transmission --- */

.transmission { padding-left: 14px; border-left: 3px solid var(--carbone); }

.transmission__entete {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--titre);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.transmission__heure { font-family: var(--mono); font-size: 11px; color: var(--encre-doux); letter-spacing: 0; }

.transmission__texte {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
}

.transmission--stagiaire { border-left-color: var(--tampon); }
.transmission--stagiaire .transmission__entete { color: var(--tampon); }
.transmission--stagiaire .transmission__texte { text-transform: uppercase; }

.transmission--golf { border-left-color: var(--golf); background: rgba(26,87,148,.05); padding: 6px 0 6px 14px; }
.transmission--golf .transmission__entete { color: var(--golf); }

.transmission--systeme {
  border-left-color: var(--jaune);
  background: rgba(184,134,42,.09);
  padding: 6px 0 6px 14px;
}
.transmission--systeme .transmission__entete { color: var(--jaune); }
.transmission--systeme .transmission__texte { font-family: var(--corps); text-transform: none; }

.transmission__lire {
  margin-top: 4px;
  font-family: var(--titre);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--golf);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
}

/* --- carte de contrôle : le tampon --- */

.controle {
  position: relative;
  margin-top: 4px;
  padding: 16px 18px 18px;
  background: #fff;
  border: 1px solid var(--encre);
  box-shadow: 2px 2px 0 rgba(22,32,43,.18);
}

.controle__entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.controle__titre {
  margin: 0;
  padding-top: 6px;
  font-family: var(--titre);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .13em;
}

/* Le tampon d'encre : unique fantaisie de la page. */
.tampon {
  flex: none;
  transform: rotate(-5deg);
  padding: 3px 10px 2px;
  border: 2px solid var(--tampon);
  outline: 1px solid var(--tampon);
  outline-offset: 2px;
  color: var(--tampon);
  text-align: center;
  opacity: .9;
}
.tampon__note { display: block; font-family: var(--mono); font-size: 25px; font-weight: 600; line-height: 1; }
.tampon__mention {
  display: block;
  font-family: var(--titre);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; }

.axe__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--titre);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--encre-doux);
}
.axe__label span:last-child { font-family: var(--mono); color: var(--encre); }
.axe__barre { height: 8px; background: var(--feuille-bis); border: 1px solid var(--carbone-fin); }
.axe__barre i { display: block; height: 100%; background: var(--encre); }
.axe--faible .axe__barre i { background: var(--tampon); }
.axe--moyen  .axe__barre i { background: var(--jaune); }
.axe--bon    .axe__barre i { background: var(--vert); }

.bloc { margin-top: 16px; }

.bloc__titre {
  margin: 0 0 6px;
  font-family: var(--titre);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--encre-doux);
  border-bottom: 1px dotted var(--carbone);
  padding-bottom: 3px;
}

.liste-plate { margin: 0; padding-left: 18px; font-size: 13.5px; }
.liste-plate li { margin-bottom: 4px; }

.correction { display: grid; gap: 2px; margin-bottom: 9px; font-size: 13px; }
.correction__entendu { font-family: var(--mono); color: var(--encre-doux); text-decoration: line-through; }
.correction__attendu { font-family: var(--mono); color: var(--vert); }

.modele {
  margin: 0;
  padding: 10px 12px;
  background: var(--feuille-bis);
  border-left: 3px solid var(--golf);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.instructeur { margin: 12px 0 0; font-size: 14px; }

/* --------------------------------------------------------------- pupitre -- */

.pupitre {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 18px 14px;
  background: var(--papier);
  border-top: 1.5px solid var(--carbone);
  box-shadow: 0 -6px 16px rgba(22,32,43,.12);
}

.pupitre__secondaire {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}

.bascule {
  margin-left: auto;
  font-family: var(--titre);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--encre-doux);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Le pavé d'alternat : la pièce maîtresse. */
.alternat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 15px 20px;
  font-family: var(--titre);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #eef3f8;
  background: var(--encre);
  border: 0;
  border-bottom: 4px solid #05090d;
  box-shadow: 0 3px 0 rgba(22,32,43,.35);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: transform .06s linear, background-color .12s linear;
}
.alternat:hover:not(:disabled) { background: #1d2b39; }

.alternat__pastille {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #46586a;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
  flex: none;
}

.alternat__touche {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: none;
  padding: 2px 6px;
  color: #8ea2b5;
  border: 1px solid #3a4a59;
}

.alternat--emission {
  background: var(--tampon);
  border-bottom-color: #7c0d18;
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.alternat--emission .alternat__pastille { background: #fff; box-shadow: 0 0 10px 3px rgba(255,255,255,.7); }
.alternat--emission .alternat__touche { color: #ffd7dc; border-color: #ffd7dc; }

.alternat:disabled { opacity: .55; cursor: progress; }

/* --------------------------------------------------------------- réponses - */

@media (max-width: 1080px) {
  .plan-exercice { grid-template-columns: minmax(0, 1fr); }
  .mise-en-place { grid-template-columns: minmax(0, 1fr); }
  .porteuse { display: none; }
}

@media (max-width: 720px) {
  :root { --bandeau-h: 64px; --pupitre-h: 176px; }
  body { font-size: 14.5px; }
  .bandeau { gap: 10px; padding: 0 12px; }
  .bandeau h1 { font-size: 16px; white-space: normal; }
  .bandeau__sous { display: none; }
  .horloge { display: none; }
  .grille-reglages { grid-template-columns: minmax(0, 1fr); }
  .plan-exercice, .mise-en-place { padding-left: 10px; padding-right: 10px; }
  .plan-exercice { padding-bottom: calc(var(--pupitre-h) + 18px); }
  .feuille, .colonne-journal { padding: 13px 13px 15px; }
  .alternat { font-size: 17px; letter-spacing: .1em; padding: 16px 12px; }
  .alternat__touche { display: none; }
  .controle__titre { padding-right: 0; }
  .tampon { position: static; display: inline-block; transform: rotate(-3deg); margin-bottom: 10px; }
  .fiche > div { grid-template-columns: 7em minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0s !important; animation-duration: 0s !important; }
}