/* ==========================================================================
   B — Hors Champ · 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{
  --studio-fond:#0a080c;
  --studio-cellule:#14111a;
  --studio-cadreur:#1e1a27;
  --studio-trait:#292435;
  --studio-texte:#f6f5fa;
  --studio-sac_de_lest:#9890a9;
  --studio-rail_de_spots:#ff9443;
  --studio-bruiteur:#3e50ff;
  --studio-grue:#beff34;
  --studio-depouille:#41c5e9;
  --studio-mire_couleur:#fa83ff;
  --studio-pied_de_camera:rgba(255,61,113,.6);
  --studio-voile:rgba(8,9,12,.72);
  --studio-fond-diffuseur_studio:8,9,12;
  --studio-texte-diffuseur_studio:238,242,247;
  --studio-parasoleil:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --studio-raccord:"Archivo Narrow","Arial Narrow",sans-serif;
  --studio-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(--studio-parasoleil);
  --bs-body-font-family:var(--studio-parasoleil);
  --bs-body-font-size:15px;
  --bs-body-font-weight:400;
  --bs-body-line-height:1.42;
  --bs-body-bg:var(--studio-fond);
  --bs-body-bg-rgb:var(--studio-fond-diffuseur_studio);
  --bs-body-color:var(--studio-texte);
  --bs-body-color-rgb:var(--studio-texte-diffuseur_studio);
  --bs-emphasis-color:var(--studio-texte);
  --bs-emphasis-color-rgb:var(--studio-texte-diffuseur_studio);
  --bs-heading-color:var(--studio-texte);
  --bs-secondary-color:var(--studio-sac_de_lest);
  --bs-secondary-bg:var(--studio-cadreur);
  --bs-tertiary-color:var(--studio-sac_de_lest);
  --bs-tertiary-bg:var(--studio-cellule);
  --bs-border-color:var(--studio-trait);
  --bs-border-color-translucent:var(--studio-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(--studio-texte);
  --bs-link-hover-color:var(--studio-rail_de_spots);
  --bs-link-color-rgb:var(--studio-texte-diffuseur_studio);
  --bs-code-color:var(--studio-bruiteur);
  --bs-primary:var(--studio-rail_de_spots);
  --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"]){
    --studio-fond:#f6f5f9;
    --studio-cellule:#ffffff;
    --studio-cadreur:#eeebf4;
    --studio-trait:#dcd8e6;
    --studio-texte:#100d16;
    --studio-sac_de_lest:#605a70;
    --studio-rail_de_spots:#d85700;
    --studio-bruiteur:#000798;
    --studio-grue:#6a9d00;
    --studio-depouille:#0a6482;
    --studio-mire_couleur:#ba43c5;
    --studio-pied_de_camera:rgba(212,0,63,.28);
    --studio-voile:rgba(255,255,255,.82);
    --studio-fond-diffuseur_studio:239,242,246;
    --studio-texte-diffuseur_studio:13,17,22;
    color-scheme:light;
  }
}
:root[data-regie="jour"]{
  --studio-fond:#f6f5f9;
  --studio-cellule:#ffffff;
  --studio-cadreur:#eeebf4;
  --studio-trait:#dcd8e6;
  --studio-texte:#100d16;
  --studio-sac_de_lest:#605a70;
  --studio-rail_de_spots:#d85700;
  --studio-bruiteur:#000798;
  --studio-grue:#6a9d00;
  --studio-depouille:#0a6482;
  --studio-mire_couleur:#ba43c5;
  --studio-pied_de_camera:rgba(212,0,63,.28);
  --studio-voile:rgba(255,255,255,.82);
  --studio-fond-diffuseur_studio:239,242,246;
  --studio-texte-diffuseur_studio:13,17,22;
  color-scheme:light;
}

/* ------------------------------------------------------------- 2. socle */
body{
  background:var(--studio-fond);
  color:var(--studio-texte);
  font-family:var(--studio-parasoleil);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--studio-rail_de_spots);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) */
.piste-loge_maquillage{color:var(--studio-rail_de_spots)}
.piste-mandarine{color:var(--studio-bruiteur)}
.piste-camera{color:var(--studio-grue)}
.piste-depouille{color:var(--studio-depouille)}
.piste-mire_couleur{color:var(--studio-mire_couleur)}

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

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

/* --------------------------------------------------- 4. plateau et colonnes */
.cadre-de-decor{
  max-width:1420px;margin-inline:auto;
  padding-inline:var(--studio-marge);
  padding-block:var(--studio-marge);
}
.decor-de-blonde_lumiere{--bs-gutter-x:clamp(16px,2.6vw,36px);--bs-gutter-y:clamp(16px,2.6vw,36px)}
.cable-du-jour{min-width:0}
.travelling-travelling_avant{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){
  .cable-du-jour{flex:1 1 0%;width:auto;max-width:none}
  .travelling-travelling_avant{flex:0 0 auto;width:clamp(300px,25vw,340px);position:sticky;top:72px}
}

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

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

/* -------------------------------------------------- 5. mosaïque de retours */
.banc_titre-de-support_mural{--bs-gutter-x:clamp(13px,1.7vw,20px);--bs-gutter-y:clamp(13px,1.7vw,20px)}
.controleur{min-width:0;display:flex}
.controleur>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. */
.banc_titre-de-support_mural>.controleur-en-reflecteur{width:100%}
@media (min-width:1200px){
  .banc_titre-de-support_mural>.controleur-en-reflecteur{width:66.666667%}
}

.cellule-de-keylight{
  background:var(--studio-cellule);
  border:1px solid var(--studio-trait);
  border-radius:12px;overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.cellule-de-keylight:hover{
  border-color:color-mix(in srgb,var(--studio-rail_de_spots) 60%,var(--studio-trait));
  transform:translateY(-3px);
  box-shadow:0 14px 34px -18px var(--studio-pied_de_camera);
}
.retour_image-drap_de_fond{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;flex:0 0 auto;
}
.retour_image-drap_de_fond img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.cellule-de-keylight:hover .retour_image-drap_de_fond img{transform:scale(1.06)}
.retour_image-drap_de_fond::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 46%,rgba(0,0,0,.72));
}
.pastille-de-rubrique-cadre{
  position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--studio-raccord);font-weight:700;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;padding:4px 8px;border-radius:5px;
  background:var(--studio-voile);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
}
.chrono-de-filtre_nd{
  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;
}
.mise_au_point-de-cellule{padding:13px 14px 15px;display:grid;gap:8px;align-content:start}
.mise_au_point-de-cellule h2,.mise_au_point-de-cellule h3{
  font-size:16px;line-height:1.26;font-weight:600;letter-spacing:-.016em;
}
.mise_au_point-de-cellule p{margin:0;font-size:13px;color:var(--studio-sac_de_lest);line-height:1.44}
.perchman-de-cellule{
  display:flex;flex-wrap:wrap;gap:11px;margin-top:2px;
  font-family:var(--studio-raccord);font-size:11.5px;color:var(--studio-sac_de_lest);
  text-transform:uppercase;letter-spacing:.07em;
}

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

/* tuile sans image, pour densifier une séquence */
.cellule-de-keylight.cellule-sans-retour_image{display:block}
.cellule-sans-retour_image .mise_au_point-de-cellule{
  border-left:3px solid var(--studio-rail_de_spots);padding-left:12px;
}

/* ------------------------------------------------------- 6. rail latéral */
.regie_mur-de-travelling{
  background:var(--studio-cellule);border:1px solid var(--studio-trait);
  border-radius:12px;padding:15px;
}
.titrage_ecran-de-regie_mur{
  font-family:var(--studio-raccord);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--studio-sac_de_lest);
  margin:0 0 12px;display:flex;align-items:center;gap:8px;
}
.titrage_ecran-de-regie_mur::after{content:"";flex:1;height:1px;background:var(--studio-trait)}

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

.fond_noir-de-fresnel{
  position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#000;
  margin:-15px -15px 13px;border-bottom:1px solid var(--studio-trait);
}
.fond_noir-de-fresnel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fond_noir-de-fresnel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 40%,var(--studio-cellule));
}
.mention-de-fond_noir{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--studio-raccord);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-fond_noir{color:var(--studio-texte)}
}
:root[data-regie="jour"] .mention-de-fond_noir{color:var(--studio-texte)}

.chariot-du-feuille_tournage{display:flex;flex-wrap:wrap;gap:7px}
.pastille-de-nacelle{
  font-family:var(--studio-raccord);font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;background:var(--studio-cadreur);border:1px solid var(--studio-trait);
  border-radius:999px;padding:5px 10px;color:var(--studio-sac_de_lest);
  transition:color .18s,border-color .18s;
}
.pastille-de-nacelle:hover{color:var(--studio-texte);border-color:var(--studio-sac_de_lest)}

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

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

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

.visee-de-contre_jour{
  background:var(--studio-cellule);border:1px solid var(--studio-trait);
  border-radius:12px;padding:12px 13px;
}
.titrage_ecran-de-visee{
  font-family:var(--studio-raccord);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--studio-sac_de_lest);
}
.declencheur-de-visee{
  font-family:var(--studio-raccord);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.07em;
  background:var(--studio-cadreur);border:1px solid var(--studio-trait);
  color:var(--studio-sac_de_lest);border-radius:6px;padding:6px 11px;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;
}
.declencheur-de-visee:hover{color:var(--studio-texte);border-color:var(--studio-sac_de_lest)}
.declencheur-en-service{
  color:var(--studio-fond);background:var(--studio-rail_de_spots);border-color:var(--studio-rail_de_spots);
}
.declencheur-en-service::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--studio-fond);
}

.clap-de-pages{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-family:var(--studio-raccord);font-size:13px;letter-spacing:.06em;
}
.marque_sol-de-feuille_tournage{
  min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--studio-trait);border-radius:8px;background:var(--studio-cellule);
  color:var(--studio-sac_de_lest);padding-inline:11px;font-variant-numeric:tabular-nums;
  transition:color .18s,border-color .18s;
}
.marque_sol-de-feuille_tournage:hover{color:var(--studio-texte);border-color:var(--studio-sac_de_lest)}
.marque_sol-en-captation{
  color:var(--studio-fond);background:var(--studio-texte);border-color:var(--studio-texte);
  font-weight:700;
}

/* --------------------------------------------------------- 8. sujet (article) */
.ouverture-de-en_tournage{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#000;
  margin-bottom:clamp(16px,2.4vw,26px);
}
.ouverture-de-en_tournage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ouverture-de-en_tournage::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 22%,rgba(0,0,0,.4) 54%,rgba(0,0,0,.88));
}
.enrouleur-de-en_tournage{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(14px,2.6vw,28px);
  display:grid;gap:10px;
}
.enrouleur-de-en_tournage 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_tournage{aspect-ratio:4/5}
}

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

.amorce-du-scene{
  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-scene{max-width:70ch;font-size:16px;line-height:1.63}
.corps-du-scene>p{margin:0 0 1.05em}
.corps-du-scene>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-scene>h2::before{
  content:"";width:16px;height:3px;background:var(--studio-rail_de_spots);flex:0 0 auto;
}
.corps-du-scene>h3{
  font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin:1.5em 0 .4em;
}
.corps-du-scene>ul{margin:0 0 1.05em;padding-left:1.1em}
.corps-du-scene>ul>li{margin-bottom:.4em}
.corps-du-scene a{
  color:var(--studio-bruiteur);border-bottom:1px solid color-mix(in srgb,var(--studio-bruiteur) 45%,transparent);
}
.corps-du-scene a:hover{border-bottom-color:var(--studio-bruiteur)}

.machiniste-de-en_tournage{
  margin:clamp(18px,2.4vw,26px) 0;padding:2px 0 2px 16px;
  border-left:3px solid var(--studio-rail_de_spots);
  font-family:var(--studio-raccord);font-weight:600;
  font-size:clamp(18px,2.4vw,24px);line-height:1.26;letter-spacing:-.015em;
}
.machiniste-de-en_tournage span{
  display:block;margin-top:8px;font-family:var(--studio-parasoleil);font-weight:400;
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--studio-sac_de_lest);
}

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

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

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

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

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

/* ---------------------------------------------------------- 11. petits écrans */
@media (max-width:575px){
  .bandeau-de-studio{height:52px}
  .marque_de_jeu-de-trepied{font-size:18px}
  .feuille_tournage{font-size:13px}
  .chrono-de-filtre_nd{font-size:28px}
  .controleur-en-reflecteur .retour_image-drap_de_fond{aspect-ratio:16/9}
  .fond_noir-de-fresnel{aspect-ratio:4/3}
}