/* ==========================================================================
   B — Banc d'Essai · feuille de régie partagée par les cinq gabarits
   (index, rubrique, article, page, 404)

   Vocabulaire des classes : régie télévision et direct — bandeau de régie,
   conducteur, tuile de flux, retour vidéo, cadran, pupitre, minutage, mire.
   Bootstrap 5.3 porte la structure (flex, row-cols, utilitaires, sticky) ;
   toutes ses variables utiles sont réécrites ci-dessous pour qu'il ne se
   voie pas. Mode sombre par défaut (data-bs-theme="dark" sur <html>),
   thème clair en secours via prefers-color-scheme.
   ========================================================================== */

/* --------------------------------------------------------------- 1. jetons */
:root{
  --baie-fond:#0c0908;
  --baie-carreau:#191211;
  --baie-horloge_mot:#251b1a;
  --baie-trait:#332524;
  --baie-texte:#f7efee;
  --baie-bus_de_mixage:#a5908e;
  --baie-ligne_de_retour:#45f768;
  --baie-jack:#f7407c;
  --baie-gain:#36e6f7;
  --baie-matrice:#de43e1;
  --baie-sortie_directe:#fad880;
  --baie-multipaire:rgba(255,61,113,.6);
  --baie-voile:rgba(8,9,12,.72);
  --baie-fond-porte_de_bruit:8,9,12;
  --baie-texte-porte_de_bruit:238,242,247;
  --baie-intercom:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --baie-perche:"Archivo Narrow","Arial Narrow",sans-serif;
  --baie-marge:clamp(14px,2.8vw,38px);
  color-scheme:dark;

  /* réécriture de Bootstrap — valeurs tirées des jetons ci-dessus */
  --bs-font-sans-serif:var(--baie-intercom);
  --bs-body-font-family:var(--baie-intercom);
  --bs-body-font-size:15px;
  --bs-body-font-weight:400;
  --bs-body-line-height:1.42;
  --bs-body-bg:var(--baie-fond);
  --bs-body-bg-rgb:var(--baie-fond-porte_de_bruit);
  --bs-body-color:var(--baie-texte);
  --bs-body-color-rgb:var(--baie-texte-porte_de_bruit);
  --bs-emphasis-color:var(--baie-texte);
  --bs-emphasis-color-rgb:var(--baie-texte-porte_de_bruit);
  --bs-heading-color:var(--baie-texte);
  --bs-secondary-color:var(--baie-bus_de_mixage);
  --bs-secondary-bg:var(--baie-horloge_mot);
  --bs-tertiary-color:var(--baie-bus_de_mixage);
  --bs-tertiary-bg:var(--baie-carreau);
  --bs-border-color:var(--baie-trait);
  --bs-border-color-translucent:var(--baie-trait);
  --bs-border-radius:12px;
  --bs-border-radius-sm:6px;
  --bs-border-radius-lg:14px;
  --bs-border-radius-xl:18px;
  --bs-border-radius-pill:999px;
  --bs-link-color:var(--baie-texte);
  --bs-link-hover-color:var(--baie-ligne_de_retour);
  --bs-link-color-rgb:var(--baie-texte-porte_de_bruit);
  --bs-code-color:var(--baie-jack);
  --bs-primary:var(--baie-ligne_de_retour);
  --bs-focus-ring-width:2px;
  --bs-focus-ring-color:rgba(255,61,113,.45);
}

/* thème clair de secours : un seul bloc de jetons bascule toute la feuille,
   Bootstrap compris, puisque ses variables pointent sur ces jetons. */
@media (prefers-color-scheme:light){
  :root:not([data-regie="nuit"]){
    --baie-fond:#f6f0ef;
    --baie-carreau:#ffffff;
    --baie-horloge_mot:#f1e6e5;
    --baie-trait:#e2d4d4;
    --baie-texte:#160e0d;
    --baie-bus_de_mixage:#6d5a59;
    --baie-ligne_de_retour:#08cc2a;
    --baie-jack:#8f062c;
    --baie-gain:#068794;
    --baie-matrice:#7a0f79;
    --baie-sortie_directe:#bf9744;
    --baie-multipaire:rgba(212,0,63,.28);
    --baie-voile:rgba(255,255,255,.82);
    --baie-fond-porte_de_bruit:239,242,246;
    --baie-texte-porte_de_bruit:13,17,22;
    color-scheme:light;
  }
}
:root[data-regie="jour"]{
  --baie-fond:#f6f0ef;
  --baie-carreau:#ffffff;
  --baie-horloge_mot:#f1e6e5;
  --baie-trait:#e2d4d4;
  --baie-texte:#160e0d;
  --baie-bus_de_mixage:#6d5a59;
  --baie-ligne_de_retour:#08cc2a;
  --baie-jack:#8f062c;
  --baie-gain:#068794;
  --baie-matrice:#7a0f79;
  --baie-sortie_directe:#bf9744;
  --baie-multipaire:rgba(212,0,63,.28);
  --baie-voile:rgba(255,255,255,.82);
  --baie-fond-porte_de_bruit:239,242,246;
  --baie-texte-porte_de_bruit:13,17,22;
  color-scheme:light;
}

/* ------------------------------------------------------------- 2. socle */
body{
  background:var(--baie-fond);
  color:var(--baie-texte);
  font-family:var(--baie-intercom);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--baie-ligne_de_retour);outline-offset:2px}
h1,h2,h3,h4{letter-spacing:-.035em;font-weight:900;margin:0}
img{display:block;max-width:100%}

/* voies de couleur (étiquettes, filets, chiffres) */
.canal_audio-memoire_de_scene{color:var(--baie-ligne_de_retour)}
.canal_audio-egaliseur{color:var(--baie-jack)}
.canal_audio-potentiometre{color:var(--baie-gain)}
.canal_audio-matrice{color:var(--baie-matrice)}
.canal_audio-sortie_directe{color:var(--baie-sortie_directe)}

/* ------------------------------------------- 3. bandeau de régie et pied */
.bandeau-de-baie{
  background:color-mix(in srgb,var(--baie-fond) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--baie-trait);
  height:56px;
  padding-inline:var(--baie-marge);
}
.groupe_son-de-pad{
  font-weight:900;font-size:20px;letter-spacing:-.05em;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.temoin-emission{
  width:10px;height:10px;border-radius:50%;background:var(--baie-ligne_de_retour);
  box-shadow:0 0 14px 2px var(--baie-ligne_de_retour);flex:0 0 auto;
}
.sequencier{
  min-width:0;
  font-family:var(--baie-perche);font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;
  scrollbar-width:none;-ms-overflow-style:none;
}
.sequencier::-webkit-scrollbar{display:none}
.attenuateur-de-sequencier{
  color:var(--baie-bus_de_mixage);white-space:nowrap;padding:5px 0;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.attenuateur-de-sequencier:hover{color:var(--baie-texte)}
.attenuateur-en-en_ligne{color:var(--baie-texte);border-bottom-color:var(--baie-ligne_de_retour)}
.top-horaire{
  font-family:var(--baie-perche);font-size:13px;color:var(--baie-bus_de_mixage);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

.pied-de-baie{
  border-top:1px solid var(--baie-trait);
  padding:clamp(18px,2.6vw,30px) var(--baie-marge);
  font-family:var(--baie-perche);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--baie-bus_de_mixage);
}
.xlr-de-pied a{transition:color .18s}
.xlr-de-pied a:hover{color:var(--baie-texte)}

/* --------------------------------------------------- 4. plateau et colonnes */
.cadre-de-console{
  max-width:1420px;margin-inline:auto;
  padding-inline:var(--baie-marge);
  padding-block:var(--baie-marge);
}
.console-de-compresseur{--bs-gutter-x:clamp(16px,2.6vw,36px);--bs-gutter-y:clamp(16px,2.6vw,36px)}
.cordon-du-jour{min-width:0}
.glissiere-coupure_son{min-width:0}
/* à partir du grand écran, le rail garde une largeur de régie constante
   (comme un retour de contrôle) et le fil prend tout le reste. */
@media (min-width:992px){
  .cordon-du-jour{flex:1 1 0%;width:auto;max-width:none}
  .glissiere-coupure_son{flex:0 0 auto;width:clamp(300px,25vw,340px);position:sticky;top:72px}
}

/* minutage du jour : le conducteur minuté, en bande */
.symetrie-du-jour{
  border-top:1px solid var(--baie-trait);
  border-bottom:1px solid var(--baie-trait);
  background:var(--baie-carreau);
  font-family:var(--baie-perche);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.07em;
  scrollbar-width:none;
}
.symetrie-du-jour::-webkit-scrollbar{display:none}
.top-de-minutage{
  display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;
  color:var(--baie-bus_de_mixage);padding-block:9px;
}
.top-de-minutage b{
  color:var(--baie-texte);font-weight:700;font-variant-numeric:tabular-nums;
}
.top-de-minutage::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--baie-jack);
  align-self:center;flex:0 0 auto;
}
.top-de-minutage:first-child::before{background:var(--baie-ligne_de_retour)}

/* lancement de séquence : le titre de bloc, filet épais dessous */
.solo-de-niveau_crete{
  border-bottom:2px solid var(--baie-texte);
  padding-bottom:9px;margin-bottom:clamp(14px,1.8vw,22px);
}
.solo-de-niveau_crete h1,.solo-de-niveau_crete h2{
  font-size:clamp(21px,2.6vw,30px);letter-spacing:-.04em;
}
.solo-de-niveau_crete span{
  font-family:var(--baie-perche);font-size:13px;color:var(--baie-bus_de_mixage);
  text-transform:uppercase;letter-spacing:.08em;
}

/* -------------------------------------------------- 5. mosaïque de retours */
.retour_de_scene-de-sortie_casque{--bs-gutter-x:clamp(13px,1.7vw,20px);--bs-gutter-y:clamp(13px,1.7vw,20px)}
.jauge{min-width:0;display:flex}
.jauge>article{flex:1 1 auto;min-width:0}
/* un cadran en duplex occupe toute la largeur de la mosaïque, quel que soit
   le row-cols-* en vigueur (deux classes : l'emporte sur .row-cols-n > *) ;
   sur la mosaïque à trois colonnes, il en prend deux. */
.retour_de_scene-de-sortie_casque>.jauge-en-casque{width:100%}
@media (min-width:1200px){
  .retour_de_scene-de-sortie_casque>.jauge-en-casque{width:66.666667%}
}

.carreau-de-patch{
  background:var(--baie-carreau);
  border:1px solid var(--baie-trait);
  border-radius:12px;overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.carreau-de-patch:hover{
  border-color:color-mix(in srgb,var(--baie-ligne_de_retour) 60%,var(--baie-trait));
  transform:translateY(-3px);
  box-shadow:0 14px 34px -18px var(--baie-multipaire);
}
.renvoi_son-diffuseur{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;flex:0 0 auto;
}
.renvoi_son-diffuseur img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.carreau-de-patch:hover .renvoi_son-diffuseur img{transform:scale(1.06)}
.renvoi_son-diffuseur::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 46%,rgba(0,0,0,.72));
}
.pastille-de-rubrique-baie{
  position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--baie-perche);font-weight:700;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;padding:4px 8px;border-radius:5px;
  background:var(--baie-voile);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
}
.totaliseur-de-ordre_general{
  position:absolute;right:10px;bottom:6px;z-index:2;
  font-weight:900;font-size:34px;line-height:1;color:rgba(255,255,255,.3);
  font-variant-numeric:tabular-nums;letter-spacing:-.05em;
}
.auxiliaire-de-carreau{padding:13px 14px 15px;display:grid;gap:8px;align-content:start}
.auxiliaire-de-carreau h2,.auxiliaire-de-carreau h3{
  font-size:16px;line-height:1.26;font-weight:600;letter-spacing:-.016em;
}
.auxiliaire-de-carreau p{margin:0;font-size:13px;color:var(--baie-bus_de_mixage);line-height:1.44}
.xlr-de-carreau{
  display:flex;flex-wrap:wrap;gap:11px;margin-top:2px;
  font-family:var(--baie-perche);font-size:11.5px;color:var(--baie-bus_de_mixage);
  text-transform:uppercase;letter-spacing:.07em;
}

/* duplex = tuile en plan large, vignette plus basse, titre plus gros */
.jauge-en-casque .renvoi_son-diffuseur{aspect-ratio:2/1}
.jauge-en-casque .auxiliaire-de-carreau{padding:16px 18px 20px}
.jauge-en-casque .auxiliaire-de-carreau h2,
.jauge-en-casque .auxiliaire-de-carreau h3{
  font-size:clamp(19px,2.2vw,25px);letter-spacing:-.025em;font-weight:800;line-height:1.2;
}
.jauge-en-casque .auxiliaire-de-carreau p{font-size:14px}

/* tuile sans image, pour densifier une séquence */
.carreau-de-patch.carreau-sans-renvoi_son{display:block}
.carreau-sans-renvoi_son .auxiliaire-de-carreau{
  border-left:3px solid var(--baie-ligne_de_retour);padding-left:12px;
}

/* ------------------------------------------------------- 6. rail latéral */
.tableau_bord-de-glissiere{
  background:var(--baie-carreau);border:1px solid var(--baie-trait);
  border-radius:12px;padding:15px;
}
.libelle_canal-de-tableau_bord{
  font-family:var(--baie-perche);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--baie-bus_de_mixage);
  margin:0 0 12px;display:flex;align-items:center;gap:8px;
}
.libelle_canal-de-tableau_bord::after{content:"";flex:1;height:1px;background:var(--baie-trait)}

.palmares-des-ecoutes{list-style:none;margin:0;padding:0}
.palmares-des-ecoutes li{
  display:grid;grid-template-columns:26px 1fr;gap:10px;padding:10px 0;
  border-top:1px solid var(--baie-trait);align-items:start;
  font-size:13.5px;line-height:1.34;
}
.palmares-des-ecoutes li:first-child{border-top:0;padding-top:0}
.palmares-des-ecoutes b{
  font-weight:900;color:var(--baie-ligne_de_retour);font-variant-numeric:tabular-nums;font-size:16px;
}

.souffle_de_fond-de-limiteur{
  position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#000;
  margin:-15px -15px 13px;border-bottom:1px solid var(--baie-trait);
}
.souffle_de_fond-de-limiteur img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.souffle_de_fond-de-limiteur::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 40%,var(--baie-carreau));
}
.mention-de-souffle_de_fond{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--baie-perche);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
@media (prefers-color-scheme:light){
  :root:not([data-regie="nuit"]) .mention-de-souffle_de_fond{color:var(--baie-texte)}
}
:root[data-regie="jour"] .mention-de-souffle_de_fond{color:var(--baie-texte)}

.boitier_de_scene-du-sequencier{display:flex;flex-wrap:wrap;gap:7px}
.pastille-de-ligne_directe{
  font-family:var(--baie-perche);font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;background:var(--baie-horloge_mot);border:1px solid var(--baie-trait);
  border-radius:999px;padding:5px 10px;color:var(--baie-bus_de_mixage);
  transition:color .18s,border-color .18s;
}
.pastille-de-ligne_directe:hover{color:var(--baie-texte);border-color:var(--baie-bus_de_mixage)}

.enceinte-trim{display:grid;gap:3px;padding:10px 0;border-top:1px solid var(--baie-trait)}
.enceinte-trim:first-of-type{border-top:0;padding-top:0}
.enceinte-trim b{
  font-size:24px;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.enceinte-trim span{font-size:12px;color:var(--baie-bus_de_mixage);line-height:1.3}

/* ------------------------------------------- 7. rubrique : pupitre, crans */
.chemin-de-baie{
  font-family:var(--baie-perche);font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--baie-bus_de_mixage);display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:10px;
}
.chemin-de-baie span+span::before{content:"/";margin-right:8px;opacity:.6}

.ouverture-de-rubrique-baie{
  border-bottom:2px solid var(--baie-texte);padding-bottom:14px;
  margin-bottom:clamp(14px,1.8vw,20px);
}
.ouverture-de-rubrique-baie h1{font-size:clamp(28px,5vw,46px);letter-spacing:-.045em}
.ouverture-de-rubrique-baie p{
  margin:10px 0 0;color:var(--baie-bus_de_mixage);font-size:15px;line-height:1.5;max-width:62ch;
}

.talkback-de-bonnette{
  background:var(--baie-carreau);border:1px solid var(--baie-trait);
  border-radius:12px;padding:12px 13px;
}
.libelle_canal-de-talkback{
  font-family:var(--baie-perche);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--baie-bus_de_mixage);
}
.commande-de-talkback{
  font-family:var(--baie-perche);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.07em;
  background:var(--baie-horloge_mot);border:1px solid var(--baie-trait);
  color:var(--baie-bus_de_mixage);border-radius:6px;padding:6px 11px;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;
}
.commande-de-talkback:hover{color:var(--baie-texte);border-color:var(--baie-bus_de_mixage)}
.commande-en-service{
  color:var(--baie-fond);background:var(--baie-ligne_de_retour);border-color:var(--baie-ligne_de_retour);
}
.commande-en-service::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--baie-fond);
}

.micro-de-pages{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-family:var(--baie-perche);font-size:13px;letter-spacing:.06em;
}
.repere_temps-de-sequencier{
  min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--baie-trait);border-radius:8px;background:var(--baie-carreau);
  color:var(--baie-bus_de_mixage);padding-inline:11px;font-variant-numeric:tabular-nums;
  transition:color .18s,border-color .18s;
}
.repere_temps-de-sequencier:hover{color:var(--baie-texte);border-color:var(--baie-bus_de_mixage)}
.repere_temps-en-emission{
  color:var(--baie-fond);background:var(--baie-texte);border-color:var(--baie-texte);
  font-weight:700;
}

/* --------------------------------------------------------- 8. sujet (article) */
.ouverture-de-en_ligne{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#000;
  margin-bottom:clamp(16px,2.4vw,26px);
}
.ouverture-de-en_ligne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ouverture-de-en_ligne::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 22%,rgba(0,0,0,.4) 54%,rgba(0,0,0,.88));
}
.reverberation-de-en_ligne{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(14px,2.6vw,28px);
  display:grid;gap:10px;
}
.reverberation-de-en_ligne h1{
  font-size:clamp(23px,4.1vw,44px);line-height:1.07;letter-spacing:-.04em;color:#fff;
  max-width:28ch;
}
@media (max-width:575px){
  .ouverture-de-en_ligne{aspect-ratio:4/5}
}

.xlr-de-entree_sujet{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  font-family:var(--baie-perche);font-size:12px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--baie-bus_de_mixage);
  border-top:1px solid var(--baie-trait);border-bottom:1px solid var(--baie-trait);
  padding-block:10px;margin-bottom:clamp(14px,2vw,20px);
}
.xlr-de-entree_sujet b{color:var(--baie-texte);font-weight:700}

.amorce-du-entree_sujet{
  font-size:clamp(16px,1.9vw,19.5px);line-height:1.46;font-weight:500;
  margin:0 0 clamp(16px,2.2vw,24px);max-width:66ch;
}
/* les sélecteurs d'élément du corps restent en enfant direct : un encadré
   posé dans le flux (relevé, insert) garde ses propres règles. */
.corps-du-entree_sujet{max-width:70ch;font-size:16px;line-height:1.63}
.corps-du-entree_sujet>p{margin:0 0 1.05em}
.corps-du-entree_sujet>h2{
  font-size:clamp(18px,2.2vw,23px);font-weight:800;letter-spacing:-.03em;
  margin:1.9em 0 .6em;display:flex;align-items:center;gap:10px;
}
.corps-du-entree_sujet>h2::before{
  content:"";width:16px;height:3px;background:var(--baie-ligne_de_retour);flex:0 0 auto;
}
.corps-du-entree_sujet>h3{
  font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin:1.5em 0 .4em;
}
.corps-du-entree_sujet>ul{margin:0 0 1.05em;padding-left:1.1em}
.corps-du-entree_sujet>ul>li{margin-bottom:.4em}
.corps-du-entree_sujet a{
  color:var(--baie-jack);border-bottom:1px solid color-mix(in srgb,var(--baie-jack) 45%,transparent);
}
.corps-du-entree_sujet a:hover{border-bottom-color:var(--baie-jack)}

.latence-de-en_ligne{
  margin:clamp(18px,2.4vw,26px) 0;padding:2px 0 2px 16px;
  border-left:3px solid var(--baie-ligne_de_retour);
  font-family:var(--baie-perche);font-weight:600;
  font-size:clamp(18px,2.4vw,24px);line-height:1.26;letter-spacing:-.015em;
}
.latence-de-en_ligne span{
  display:block;margin-top:8px;font-family:var(--baie-intercom);font-weight:400;
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--baie-bus_de_mixage);
}

.mesure-de-preampli{
  background:var(--baie-carreau);border:1px solid var(--baie-trait);border-top:3px solid var(--baie-ligne_de_retour);
  border-radius:12px;padding:15px;margin:clamp(18px,2.6vw,28px) 0;
}
.trim-mesure b{
  display:block;font-size:clamp(24px,3.2vw,32px);font-weight:900;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.trim-mesure span{
  display:block;margin-top:6px;font-size:12.5px;color:var(--baie-bus_de_mixage);line-height:1.35;
}
.note-de-mesure{
  font-family:var(--baie-perche);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--baie-bus_de_mixage);margin:13px 0 0;
  border-top:1px solid var(--baie-trait);padding-top:10px;
}

.panoramique_son-de-entree_sujet{margin:clamp(18px,2.6vw,28px) 0}
.panoramique_son-de-entree_sujet>div{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000;
}
.panoramique_son-de-entree_sujet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sommation-de-legende{
  font-size:12.5px;color:var(--baie-bus_de_mixage);line-height:1.4;margin:9px 0 0;
  padding-left:11px;border-left:2px solid var(--baie-trait);
}

.depart_auxiliaire-du-cordon{
  border-top:1px solid var(--baie-trait);margin-top:clamp(22px,3vw,34px);
  padding-top:clamp(16px,2.2vw,24px);
}

/* ------------------------------------------------- 9. page statique sobre */
.bus_son-de-lecture{max-width:74ch}
.bus_son-de-lecture>h1{font-size:clamp(28px,4.4vw,44px);letter-spacing:-.045em;margin-bottom:14px}
.bus_son-de-lecture>h2{
  font-size:clamp(18px,2.2vw,22px);font-weight:800;letter-spacing:-.03em;margin:1.9em 0 .5em;
}
.bus_son-de-lecture>p{margin:0 0 1.05em;font-size:16px;line-height:1.62}
.bus_son-de-lecture>ul{margin:0 0 1.2em;padding-left:1.1em;font-size:16px;line-height:1.6}
.bus_son-de-lecture>ul>li{margin-bottom:.45em}
.reperes-de-coupe_bas{
  background:var(--baie-carreau);border:1px solid var(--baie-trait);border-radius:12px;
  padding:13px 15px;margin-bottom:clamp(18px,2.4vw,26px);
}
.reperes-de-coupe_bas ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;
  font-family:var(--baie-perche);font-size:13px;text-transform:uppercase;letter-spacing:.07em;
  counter-reset:repere;
}
.reperes-de-coupe_bas li{color:var(--baie-bus_de_mixage);counter-increment:repere}
.reperes-de-coupe_bas li::before{
  content:counter(repere,decimal-leading-zero);margin-right:7px;color:var(--baie-ligne_de_retour);font-weight:700;
}
.reperes-de-coupe_bas a:hover{color:var(--baie-texte)}

/* ------------------------------------------------------------- 10. mire 404 */
.haut_parleur-de-gabarit{
  border:1px solid var(--baie-trait);border-radius:14px;background:var(--baie-carreau);
  overflow:hidden;
}
.gabarit-de-vumetre{position:relative;aspect-ratio:3/4;overflow:hidden;background:#000;min-height:100%}
.gabarit-de-vumetre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gabarit-de-vumetre::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 40%,color-mix(in srgb,var(--baie-carreau) 92%,transparent));
}
@media (max-width:767px){
  .gabarit-de-vumetre{aspect-ratio:16/9}
  .gabarit-de-vumetre::after{
    background:linear-gradient(transparent 42%,color-mix(in srgb,var(--baie-carreau) 94%,transparent));
  }
}
.renvoi_son-au-en_ligne h2{font-size:clamp(20px,2.8vw,28px);letter-spacing:-.035em;margin-bottom:10px}
.renvoi_son-au-en_ligne p{color:var(--baie-bus_de_mixage);font-size:15px;line-height:1.5;margin:0 0 18px;max-width:46ch}
.renvoi_son-au-en_ligne .numero-de-gabarit{
  font-size:clamp(58px,13vw,118px);font-weight:900;line-height:.86;letter-spacing:-.06em;
  color:var(--baie-ligne_de_retour);font-variant-numeric:tabular-nums;margin:0 0 10px;max-width:none;
}
.bouton-de-solo{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--baie-ligne_de_retour);color:var(--baie-fond);
  font-family:var(--baie-perche);font-weight:700;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.1em;
  padding:11px 18px;border-radius:8px;border:1px solid var(--baie-ligne_de_retour);
  transition:filter .18s,transform .18s;
}
.bouton-de-solo:hover{filter:brightness(1.12);transform:translateY(-2px);color:var(--baie-fond)}
.bouton-de-solo::after{content:"→"}
.bouton-de-routage{
  display:inline-flex;align-items:center;gap:9px;background:transparent;
  color:var(--baie-texte);border:1px solid var(--baie-trait);
  font-family:var(--baie-perche);font-weight:600;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.1em;padding:11px 18px;border-radius:8px;
  transition:border-color .18s}
.bouton-de-routage:hover{border-color:var(--baie-ligne_de_retour)}

/* ---------------------------------------------------------- 11. petits écrans */
@media (max-width:575px){
  .bandeau-de-baie{height:52px}
  .groupe_son-de-pad{font-size:18px}
  .sequencier{font-size:13px}
  .totaliseur-de-ordre_general{font-size:28px}
  .jauge-en-casque .renvoi_son-diffuseur{aspect-ratio:16/9}
  .souffle_de_fond-de-limiteur{aspect-ratio:4/3}
}