@charset "utf-8";
/* ==========================================================================
   LUMIÈRE BASSE — feuille unique des cinq pages
   Vocabulaire de l'atelier photographique : ouverture, pose, volet, tirage,
   épreuve, planche contact, contre-jour, bobine.
   Direction photo : lumière naturelle, pellicule couleur chaude, tons crème
   et miel. Beaucoup d'air, aucune carte, aucune grille de vignettes.
   Bootstrap 5.3 porte la structure ; ses variables sont remises au pas
   ci-dessous pour qu'il ne se voie jamais.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lumière du jour
   -------------------------------------------------------------------------- */
:root{
  color-scheme:light dark;

  --fond-coulisses:#edf8ef;
  --encre-coulisse:#141b15;
  --encre-par_led:#556957;
  --trait-de-projecteur:#c6decb;
  --frise_de_scene:#35a641;
  --cote_jardin:#daeedf;
  --perche_a_decor-de-avant_scene:#0d160e;
  --tapis_de_danse-sur-photo:#edfaf0;
  --frise_de_scene-sur-photo:#8be79a;

  --serif-de-intitule_acte:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans-de-lecture-coulisse:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --marge-d-coulisses:clamp(18px,4vw,52px);
  --applaudissement-de-lecture:38.5rem; /* ≈ 66 signes par ligne, légendes comprises */
  --herse:clamp(28px,5vw,88px);
  --grand-herse:clamp(56px,10vw,160px);
}

/* --------------------------------------------------------------------------
   2. Lumière basse — par préférence du système, et par l'attribut de Bootstrap
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme:dark){
  :root:not([data-bs-theme="light"]){
    --fond-coulisses:#0e140f;
    --encre-coulisse:#ddf0e1;
    --encre-par_led:#89a38b;
    --trait-de-projecteur:#222f24;
    --frise_de_scene:#63d572;
    --cote_jardin:#141d16;
  }
}
:root[data-bs-theme="dark"]{
  --fond-coulisses:#0e140f;
  --encre-coulisse:#ddf0e1;
  --encre-par_led:#89a38b;
  --trait-de-projecteur:#222f24;
  --frise_de_scene:#63d572;
  --cote_jardin:#141d16;
}

/* --------------------------------------------------------------------------
   3. Bootstrap mis au pas : mêmes jetons, dans les deux lumières
   -------------------------------------------------------------------------- */
:root,
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"]{
  --bs-font-sans-serif:var(--sans-de-lecture-coulisse);
  --bs-body-font-family:var(--sans-de-lecture-coulisse);
  --bs-body-font-size:1rem;
  --bs-body-font-weight:300;
  --bs-body-line-height:1.62;
  --bs-body-bg:var(--fond-coulisses);
  --bs-body-color:var(--encre-coulisse);
  --bs-emphasis-color:var(--encre-coulisse);
  --bs-heading-color:var(--encre-coulisse);
  --bs-secondary-color:var(--encre-par_led);
  --bs-secondary-bg:var(--cote_jardin);
  --bs-tertiary-bg:var(--cote_jardin);
  --bs-tertiary-color:var(--encre-par_led);
  --bs-border-color:var(--trait-de-projecteur);
  --bs-border-color-translucent:var(--trait-de-projecteur);
  --bs-border-radius:0;
  --bs-border-radius-sm:0;
  --bs-border-radius-lg:0;
  --bs-link-color:var(--encre-coulisse);
  --bs-link-color-rgb:28,24,20;
  --bs-link-hover-color:var(--frise_de_scene);
  --bs-code-color:var(--frise_de_scene);
  --bs-highlight-bg:var(--cote_jardin);
  --bs-focus-ring-width:1px;
  --bs-focus-ring-opacity:1;
  --bs-focus-ring-color:var(--frise_de_scene);
  --bs-table-bg:transparent;
  --bs-table-color:var(--encre-coulisse);
  --bs-table-border-color:var(--trait-de-projecteur);
  --bs-table-striped-bg:transparent;
  --bs-table-striped-color:var(--encre-coulisse);
}

/* --------------------------------------------------------------------------
   4. Socle
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
:focus-visible{outline:1px solid var(--frise_de_scene);outline-offset:3px}
::selection{background:var(--frise_de_scene);color:var(--fond-coulisses)}

/* --------------------------------------------------------------------------
   5. Bandeau d'atelier : un seul en-tête, deux états de lumière
   -------------------------------------------------------------------------- */
.bandeau-d-coulisses{position:relative;z-index:20;
  padding:20px var(--marge-d-coulisses);
  border-bottom:1px solid var(--trait-de-projecteur);
  background:var(--fond-coulisses);color:var(--encre-coulisse)}
/* état « posé sur la photo » : les pages qui ouvrent sur une image */
.bandeau-d-coulisses.en-crochet_de_portant{position:absolute;top:0;left:0;right:0;
  border-bottom:0;background:none;color:var(--tapis_de_danse-sur-photo);
  text-shadow:0 1px 14px rgba(20,14,8,.55)}
.bandeau-d-coulisses.en-crochet_de_portant::before{content:"";position:absolute;inset:0;
  z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(20,14,8,.52),rgba(20,14,8,0))}

.affiche_scene-de-la-patience_de_scene{font-family:var(--serif-de-intitule_acte);
  font-size:clamp(20px,2.3vw,27px);letter-spacing:.01em;line-height:1;
  white-space:nowrap}

.gradateur-de-rappel_scene{width:34px;height:28px;padding:0;border:0;background:none;
  color:inherit;display:grid;align-content:center;gap:5px;cursor:pointer}
.gradateur-de-rappel_scene span{display:block;height:1px;background:currentColor;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .2s}
.gradateur-de-rappel_scene[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(10deg)}
.gradateur-de-rappel_scene[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-10deg)}

.chemin-rideau_italienne{position:absolute;top:100%;left:0;right:0;
  padding:16px var(--marge-d-coulisses) 24px;
  background:var(--fond-coulisses);
  border-bottom:1px solid var(--trait-de-projecteur)}
.en-crochet_de_portant .chemin-rideau_italienne{background:rgba(21,16,11,.94);
  border-bottom-color:rgba(253,250,244,.16)}

.chemin-de-projecteur{font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:400}
.chemin-de-projecteur a{opacity:.82;transition:opacity .2s}
.chemin-de-projecteur a:hover,.chemin-de-projecteur a:focus-visible{opacity:1}
.chemin-de-projecteur a[aria-current="page"]{opacity:1;color:var(--frise_de_scene)}
.en-crochet_de_portant .chemin-de-projecteur a[aria-current="page"]{color:var(--frise_de_scene-sur-photo)}

.mention-d-cintre{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--trait-de-projecteur);border-radius:999px;padding:4px 10px;
  color:var(--encre-par_led);line-height:1.4}
.en-crochet_de_portant .mention-d-cintre{border-color:rgba(253,250,244,.45);
  color:rgba(253,250,244,.88)}

@media (min-width:992px){
  .chemin-rideau_italienne{position:static;padding:0;background:none;border-bottom:0}
  .en-crochet_de_portant .chemin-rideau_italienne{background:none}
}

/* --------------------------------------------------------------------------
   6. Grande ouverture : la pose plein écran
   -------------------------------------------------------------------------- */
.trappe-ouverture{position:relative;display:grid;align-items:end;
  min-height:min(88vh,860px);overflow:hidden;background:var(--perche_a_decor-de-avant_scene)}
.trappe-ouverture.a-pendrillon_lateral-costume_de_scene{min-height:min(64vh,620px)}
.echelle_de_cintre-chambre_a_decor{position:absolute;inset:0}
.echelle_de_cintre-chambre_a_decor img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.echelle_de_cintre-chambre_a_decor::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 32%,rgba(23,18,12,.28) 58%,rgba(23,18,12,.88))}

.lointain-jour{position:relative;z-index:2;
  padding:clamp(28px,5vw,80px) var(--marge-d-coulisses);
  max-width:min(900px,94%);color:var(--tapis_de_danse-sur-photo)}
.loge_artiste-de-acte{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--frise_de_scene-sur-photo);margin:0 0 18px;font-weight:400}
.loge_artiste-de-acte a{border-bottom:1px solid rgba(240,195,138,.4)}
.intitule_acte-en-chambre_a_decor-projecteur{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(34px,6.4vw,86px);line-height:1.02;margin:0;
  letter-spacing:-.015em;text-wrap:balance;color:inherit}
.a-pendrillon_lateral-costume_de_scene .intitule_acte-en-chambre_a_decor-projecteur{font-size:clamp(30px,5.2vw,68px)}
.didascalie-de-projecteur{margin:20px 0 0;max-width:52ch;
  font-size:clamp(14.5px,1.7vw,18px);line-height:1.6;
  color:rgba(253,250,244,.82)}
.indications-de-sac_de_sable-de-passerelle_technique{margin-top:26px;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(253,250,244,.62)}
.indications-de-sac_de_sable-de-passerelle_technique>*{white-space:nowrap}

/* --------------------------------------------------------------------------
   7. Bandes claires : volet image / volet texte, en alternance
   -------------------------------------------------------------------------- */
.frise-manteau_arlequin{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:clamp(380px,56vw,620px)}
.pendrillon-de-plateau_tournant{position:relative;overflow:hidden;background:var(--perche_a_decor-de-avant_scene);
  min-height:320px}
.pendrillon-de-plateau_tournant img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.frise-manteau_arlequin:hover .pendrillon-de-plateau_tournant img{transform:scale(1.045)}
.pendrillon-de-poursuite{display:grid;align-content:center;gap:16px;
  padding:clamp(28px,5vw,88px) clamp(20px,4.4vw,78px)}
.pendrillon-de-poursuite.en-herse_de_lumiere-cote_jardin{background:var(--cote_jardin)}
.frise-manteau_arlequin.a-pupitre_de_conduite .pendrillon-de-plateau_tournant{order:2}

.acte-de-tableau_scene{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--frise_de_scene)}
.intitule_acte-de-frise{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(26px,3.6vw,46px);line-height:1.08;margin:0;
  letter-spacing:-.012em;text-wrap:balance}
.didascalie-de-frise{margin:0;font-size:clamp(14.5px,1.6vw,17px);
  color:var(--encre-par_led);max-width:46ch}
.lever_rideau-de-lecture{margin-top:6px;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.lever_rideau-de-lecture::after{content:"";width:34px;height:1px;background:var(--frise_de_scene);
  transition:width .3s cubic-bezier(.2,.7,.2,1)}
.frise-manteau_arlequin:hover .lever_rideau-de-lecture::after{width:56px}

/* --------------------------------------------------------------------------
   8. Souffle de page : une phrase, beaucoup de vide
   -------------------------------------------------------------------------- */
.feuille_de_route-de-page{padding:var(--grand-herse) clamp(20px,6vw,120px);text-align:center;
  border-top:1px solid var(--trait-de-projecteur);
  border-bottom:1px solid var(--trait-de-projecteur)}
.boite_noire-souffleur{font-family:var(--serif-de-intitule_acte);font-style:italic;font-weight:400;
  font-size:clamp(23px,4.2vw,54px);line-height:1.22;margin:0 auto;max-width:20ch;
  letter-spacing:-.012em;text-wrap:balance}
.source-du-feuille_de_route{display:block;margin-top:28px;font-family:var(--sans-de-lecture-coulisse);
  font-style:normal;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--encre-par_led)}

/* --------------------------------------------------------------------------
   9. Planche contact : la bande qui défile
   -------------------------------------------------------------------------- */
.portant-servante{padding:clamp(40px,6vw,96px) 0 clamp(36px,5vw,80px)}
.tete-de-portant{padding:0 var(--marge-d-coulisses);
  margin-bottom:clamp(20px,3vw,40px)}
.intitule_acte-de-portant{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(24px,3vw,38px);margin:0;letter-spacing:-.01em}
.mention-de-decoupe{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-par_led);white-space:nowrap}
.rail-de-decoupe{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(260px,31vw);gap:clamp(14px,2vw,28px);
  overflow-x:auto;overflow-y:hidden;max-width:100%;
  padding:0 var(--marge-d-coulisses) 10px;
  /* sans ce scroll-padding, l'accrochage colle la 1re vue au bord de l'écran
     et mange la marge de gauche de la planche */
  scroll-padding-inline:var(--marge-d-coulisses);
  scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:var(--trait-de-projecteur) transparent;
  overscroll-behavior-x:contain}
.rail-de-decoupe::-webkit-scrollbar{height:4px}
.rail-de-decoupe::-webkit-scrollbar-thumb{background:var(--trait-de-projecteur);
  border-radius:999px}
.tableau_scene-gril{scroll-snap-align:start;display:grid;gap:13px;align-content:start}
.avant_scene-de-tableau_scene{aspect-ratio:4/5;overflow:hidden;background:var(--perche_a_decor-de-avant_scene)}
.avant_scene-de-tableau_scene img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tableau_scene-gril:hover .avant_scene-de-tableau_scene img{transform:scale(1.05)}
.repertoire-de-tableau_scene{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--frise_de_scene)}
.intitule_acte-de-tableau_scene{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(19px,2vw,24px);line-height:1.14;margin:0}
.lever_rideau-de-tableau_scene{margin:0;font-size:13.5px;color:var(--encre-par_led)}

/* --------------------------------------------------------------------------
   10. Sommaire du numéro
   -------------------------------------------------------------------------- */
.programme_scene-du-acte{background:var(--cote_jardin);
  padding:clamp(40px,6vw,96px) var(--marge-d-coulisses)}
.praticable-du-programme_scene{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:minmax(200px,.8fr) 2fr;gap:clamp(24px,4vw,72px);
  align-items:start}
.intitule_acte-du-programme_scene{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(24px,3vw,38px);margin:0;line-height:1.05;letter-spacing:-.012em}
.cale_de_decor-du-programme_scene{list-style:none;margin:0;padding:0}
.ligne-du-programme_scene{display:grid;grid-template-columns:92px 1fr auto;gap:20px;
  align-items:baseline;padding:17px 0;
  border-bottom:1px solid var(--trait-de-projecteur);font-size:16px;
  transition:padding-left .25s cubic-bezier(.2,.7,.2,1)}
.ligne-du-programme_scene:first-child{border-top:1px solid var(--trait-de-projecteur)}
.ligne-du-programme_scene:hover{padding-left:10px}
.cote_cour-de-parution{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--encre-par_led)}
.filtre_couleur-de-repertoire{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--frise_de_scene)}

/* --------------------------------------------------------------------------
   11. Ouverture douce : l'entrée des pages sans héros
   -------------------------------------------------------------------------- */
.ouverture-par_led{padding:clamp(44px,8vw,128px) var(--marge-d-coulisses) clamp(28px,4vw,56px);
  max-width:min(1240px,100%);margin:0 auto}
.intitule-de-repertoire{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--frise_de_scene);margin:0 0 18px}
.intitule_acte-de-repertoire{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(38px,7vw,88px);line-height:1;margin:0;letter-spacing:-.02em;
  text-wrap:balance}
.corde_a_noeud-de-repertoire{margin:clamp(18px,2.6vw,30px) 0 0;max-width:54ch;
  font-size:clamp(15px,1.7vw,18.5px);color:var(--encre-par_led)}

/* --------------------------------------------------------------------------
   12. Enfilade d'épreuves : la liste d'une rubrique
   -------------------------------------------------------------------------- */
.gobo-d-iris_scene{padding:0 var(--marge-d-coulisses);max-width:1240px;
  margin:0 auto}
.repetition{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:clamp(20px,4vw,64px);align-items:center;
  padding:clamp(32px,5vw,76px) 0;
  border-top:1px solid var(--trait-de-projecteur)}
.repetition:last-child{border-bottom:1px solid var(--trait-de-projecteur)}
.avant_scene-d-repetition{aspect-ratio:4/3;overflow:hidden;background:var(--perche_a_decor-de-avant_scene)}
.avant_scene-d-repetition img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.repetition:hover .avant_scene-d-repetition img{transform:scale(1.04)}
.corps-d-repetition{display:grid;gap:14px;align-content:center}
.repertoire-d-repetition{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--frise_de_scene)}
.intitule_acte-d-repetition{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(25px,3.2vw,40px);line-height:1.1;margin:0;letter-spacing:-.012em;
  text-wrap:balance}
.didascalie-d-repetition{margin:0;font-size:clamp(14.5px,1.5vw,16.5px);
  color:var(--encre-par_led);max-width:50ch}
.indications-d-repetition{font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--encre-par_led)}

/* --------------------------------------------------------------------------
   13. Changement de bobine : la pagination, discrète
   -------------------------------------------------------------------------- */
.rideau_de_fer-de-corde{padding:clamp(32px,5vw,72px) var(--marge-d-coulisses) clamp(44px,7vw,110px);
  max-width:1240px;margin:0 auto;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.face_scene-de-corde{color:var(--encre-par_led);padding-bottom:4px;
  border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.face_scene-de-corde:hover{color:var(--encre-coulisse);border-bottom-color:var(--frise_de_scene)}
.face_scene-en-cours{color:var(--encre-coulisse);border-bottom-color:var(--frise_de_scene)}

/* --------------------------------------------------------------------------
   14. Tirage : la colonne de lecture
   -------------------------------------------------------------------------- */
.representation{max-width:calc(var(--applaudissement-de-lecture) + 2 * var(--marge-d-coulisses));margin:0 auto;
  padding:clamp(32px,5vw,64px) var(--marge-d-coulisses);
  font-size:clamp(16px,1.3vw,18.5px);line-height:1.74}
.representation p{margin:0 0 1.35em}
.representation p:last-child{margin-bottom:0}
.representation a:not(.lever_rideau-de-lecture){border-bottom:1px solid var(--frise_de_scene)}
.didascalie-de-representation{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(20px,2.4vw,28px);line-height:1.34;color:var(--encre-coulisse);
  margin:0 0 1.1em !important;letter-spacing:-.008em}
.intertitre-de-representation{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(23px,2.7vw,33px);line-height:1.12;letter-spacing:-.012em;
  margin:2.1em 0 .55em;text-wrap:balance}
.intertitre-de-representation:first-child{margin-top:0}
.liste-portant_scene{list-style:none;margin:0 0 1.5em;padding:0}
.liste-portant_scene li{padding:13px 0 13px 22px;position:relative;
  border-bottom:1px solid var(--trait-de-projecteur);color:var(--encre-par_led)}
.liste-portant_scene li::before{content:"";position:absolute;left:0;top:1.05em;
  width:11px;height:1px;background:var(--frise_de_scene)}

.replique-cloison_mobile{margin:2.2em 0;padding:0;border:0}
.replique-cloison_mobile p{font-family:var(--serif-de-intitule_acte);font-style:italic;
  font-size:clamp(21px,2.9vw,34px);line-height:1.26;margin:0;
  letter-spacing:-.012em;text-wrap:balance}
.replique-cloison_mobile::before{content:"";display:block;width:52px;height:1px;
  background:var(--frise_de_scene);margin-bottom:clamp(20px,3vw,34px)}
.contrepoids-de-replique{display:block;margin-top:22px;font-family:var(--sans-de-lecture-coulisse);
  font-style:normal;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--encre-par_led)}

.note-de-marge-coulisse{margin:2em 0;padding:0 0 0 18px;
  border-left:1px solid var(--frise_de_scene);font-size:13.5px;line-height:1.62;
  color:var(--encre-par_led)}
.note-de-marge-coulisse p{margin:0 0 .7em}
.note-de-marge-coulisse p:last-child{margin:0}
.note-de-marge-coulisse strong{font-weight:500;color:var(--encre-coulisse);display:block;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:9px}

.tableau-des-tapis_noir{margin:0 0 1.6em;font-size:14.5px;vertical-align:middle}
.tableau-des-tapis_noir th{font-weight:500;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--encre-par_led);
  padding:12px 14px 12px 0}
.tableau-des-tapis_noir td{padding:14px 14px 14px 0;color:var(--encre-par_led);
  vertical-align:top}
.tableau-des-tapis_noir td:first-child{color:var(--encre-coulisse);white-space:nowrap}

.tableau_scene-au-lever_de_rideau{margin:clamp(14px,2.5vw,32px) 0}
.tableau_scene-au-lever_de_rideau img{width:100%;height:auto;background:var(--perche_a_decor-de-avant_scene)}
.legende-de-tableau_scene{padding:14px var(--marge-d-coulisses) 0;
  max-width:calc(var(--applaudissement-de-lecture) + 2 * var(--marge-d-coulisses));
  margin:0 auto;font-size:12.5px;line-height:1.56;color:var(--encre-par_led)}
.legende-de-tableau_scene::before{content:"";display:inline-block;width:18px;height:1px;
  background:var(--frise_de_scene);vertical-align:middle;margin-right:11px}

@media (min-width:1200px){
  .note-de-marge-coulisse{float:right;width:18ch;margin:.45em calc(-18ch - 3.2ch) 1.5em 3.2ch;
    padding-left:15px}
}

/* --------------------------------------------------------------------------
   15. Hors cadre : la page d'erreur
   -------------------------------------------------------------------------- */
.accessoire-avant_scene{min-height:clamp(420px,62vw,680px)}
.acte-accessoire-avant_scene{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(56px,9vw,120px);line-height:.9;margin:0;color:var(--frise_de_scene);
  letter-spacing:-.02em}
.intitule_acte-accessoire-avant_scene{font-family:var(--serif-de-intitule_acte);font-weight:400;
  font-size:clamp(27px,3.6vw,46px);line-height:1.08;margin:0;letter-spacing:-.012em;
  text-wrap:balance}
.filage-accessoire-avant_scene{margin:0;font-size:clamp(14.5px,1.6vw,17px);
  color:var(--encre-par_led);max-width:44ch}
.gradateur{margin-top:10px;display:inline-flex;align-items:center;gap:12px;
  justify-self:start;padding:14px 26px;border:1px solid var(--trait-de-projecteur);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:background-color .3s,border-color .3s,color .3s}
.gradateur::after{content:"";width:26px;height:1px;background:var(--frise_de_scene);
  transition:width .3s cubic-bezier(.2,.7,.2,1)}
.gradateur:hover{background:var(--encre-coulisse);color:var(--fond-coulisses);
  border-color:var(--encre-coulisse)}
.gradateur:hover::after{width:40px}

/* --------------------------------------------------------------------------
   16. Pied d'atelier
   -------------------------------------------------------------------------- */
.pied-d-coulisses{padding:clamp(28px,4vw,56px) var(--marge-d-coulisses);
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--encre-par_led);border-top:1px solid var(--trait-de-projecteur)}
.liens-de-pied-coulisse a{transition:color .2s}
.liens-de-pied-coulisse a:hover{color:var(--frise_de_scene)}
.treuil-de-projecteur{padding:0;border:0;background:none;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;
  border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.treuil-de-projecteur:hover{color:var(--frise_de_scene);border-bottom-color:var(--frise_de_scene)}

/* --------------------------------------------------------------------------
   17. Petits écrans : jusqu'à 375 px sans débordement
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .frise-manteau_arlequin{grid-template-columns:1fr}
  .frise-manteau_arlequin.a-pupitre_de_conduite .pendrillon-de-plateau_tournant{order:0}
  .pendrillon-de-plateau_tournant{aspect-ratio:4/3;min-height:0}
  .praticable-du-programme_scene{grid-template-columns:1fr}
  .ligne-du-programme_scene{grid-template-columns:1fr;gap:5px}
  .repetition{grid-template-columns:1fr;gap:clamp(16px,4vw,28px)}
  .rail-de-decoupe{grid-auto-columns:minmax(220px,74vw)}
  .accessoire-avant_scene{min-height:0}
}
@media (max-width:420px){
  .affiche_scene-de-la-patience_de_scene{font-size:19px}
  .representation{font-size:16px;line-height:1.7}
  .boite_noire-souffleur{max-width:none}
  .gradateur{padding:13px 20px;letter-spacing:.16em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;
    animation-duration:.01ms !important}
  .frise-manteau_arlequin:hover .pendrillon-de-plateau_tournant img,
  .tableau_scene-gril:hover .avant_scene-de-tableau_scene img,
  .repetition:hover .avant_scene-d-repetition img{transform:none}
}