/* ==========================================================================
   La Cie Mayemba — feuille de style unique
   Charte reprise du logo officiel de la compagnie :
     noir #2A2A2A · crème #EBE2D6 · corail #E26146
   Aucune dépendance, aucun build. Ordre : variables, base, blocs, pages.
   ========================================================================== */

/* --- 1. Variables ------------------------------------------------------- */
:root{
  --nuit:#121113;          /* noir de scène, fonds pleine largeur      */
  --nuit-2:#1B191C;        /* second noir, séparations                 */
  --encre:#2A2A2A;         /* noir du logo, texte courant              */
  --encre-60:#5A5650;      /* texte secondaire sur fond clair  6.5:1   */
  --creme:#EBE2D6;         /* crème du logo                            */
  --papier:#F6F2EB;        /* fond de page clair                       */
  --corail:#E26146;        /* accent du logo, aplats et grands titres  */
  --corail-lisible:#B03A22;/* accent pour petits textes sur clair 5.4:1*/
  --corail-bouton:#C44A30; /* aplat des boutons, blanc dessus     4.8:1*/
  --clair-70:#A9A39A;      /* texte secondaire sur fond sombre 7.5:1   */
  --clair-90:#DDD7CF;

  --titre:'Archivo Black', 'Arial Black', Impact, sans-serif;
  --label:'Oswald', 'Arial Narrow', sans-serif;
  --texte:'Spectral', Georgia, 'Times New Roman', serif;

  --marge:clamp(1.25rem, 5vw, 5rem);
  --max:1280px;
  --max-texte:66ch;
  --t:.45s cubic-bezier(.22,.61,.36,1);
}

/* --- 2. Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:clamp(1.0625rem,.98rem + .35vw,1.1875rem);
  line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* le suédois forme de longs mots composés : sans cela, « applådtackning »
     ou « framkallningsvätska » poussent la page hors de l'écran du téléphone */
  overflow-wrap:break-word;hyphens:auto;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titre);font-weight:400;line-height:.94;
  letter-spacing:-.015em;text-transform:uppercase;margin:0}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
hr{border:0;height:1px;background:currentColor;opacity:.18;margin:3rem 0}
::selection{background:var(--corail);color:#fff}
:focus-visible{outline:3px solid var(--corail);outline-offset:3px;border-radius:2px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:absolute;left:-9999px;top:0;z-index:200;background:var(--corail);
  color:#fff;padding:.7rem 1.2rem;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.08em;font-size:.85rem}
.evitement:focus{left:0}

.enveloppe{max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)}
.large{max-width:1600px;margin-inline:auto;padding-inline:var(--marge)}

/* --- 3. Repères typographiques ------------------------------------------ */
.kicker{
  font-family:var(--label);font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;font-size:.72rem;color:var(--corail-lisible);
  display:flex;align-items:center;gap:.8rem;margin:0 0 1.4rem;
}
.kicker::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4;max-width:7rem}
.nuit .kicker,.sombre .kicker,.scene .kicker,.bandeau .kicker{color:var(--corail)}

.t-geant{font-size:clamp(2.8rem,1.4rem + 7vw,7rem)}
.t-grand{font-size:clamp(2rem,1.25rem + 3.3vw,3.45rem)}
.t-moyen{font-size:clamp(1.55rem,1.1rem + 2.2vw,2.5rem)}
.t-petit{font-size:clamp(1.15rem,1rem + .8vw,1.5rem)}

.chapo{font-size:clamp(1.2rem,1.05rem + .75vw,1.55rem);line-height:1.5;
  color:var(--encre-60);max-width:48ch}
.nuit .chapo,.sombre .chapo,.scene .chapo,.bandeau .chapo{color:var(--clair-90)}
.texte{max-width:var(--max-texte)}
.texte p + p{margin-top:0}

.citation{
  font-size:clamp(1.3rem,1.05rem + 1.3vw,2.05rem);line-height:1.38;
  font-style:italic;font-weight:300;margin:0;position:relative;padding-left:1.4rem;
  border-left:3px solid var(--corail);
}
.citation cite{display:block;margin-top:1.1rem;font-style:normal;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;
  font-size:.74rem;color:var(--encre-60)}
.nuit .citation cite,.scene .citation cite,.bandeau .citation cite{color:var(--clair-70)}

/* --- 4. Boutons --------------------------------------------------------- */
.bouton{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.13em;
  font-size:.82rem;font-weight:500;text-decoration:none;
  padding:.95rem 1.7rem;border:1px solid currentColor;background:none;
  color:var(--encre);transition:background var(--t),color var(--t),border-color var(--t);
  cursor:pointer;
}
.bouton::after{content:"→";font-family:var(--texte);transition:transform var(--t)}
.bouton:hover::after,.bouton:focus-visible::after{transform:translateX(5px)}
.bouton:hover,.bouton:focus-visible{background:var(--encre);color:var(--papier)}
.bouton.plein{background:var(--corail-bouton);border-color:var(--corail-bouton);color:#fff}
.bouton.plein:hover,.bouton.plein:focus-visible{background:#9D3317;border-color:#9D3317;color:#fff}
.nuit .bouton,.sombre .bouton,.scene .bouton,.bandeau .bouton{color:var(--creme)}
.nuit .bouton:hover,.nuit .bouton:focus-visible,
.scene .bouton:hover,.scene .bouton:focus-visible,
.bandeau .bouton:hover,.bandeau .bouton:focus-visible{background:var(--creme);color:var(--nuit)}
.nuit .bouton.plein,.sombre .bouton.plein,.scene .bouton.plein,.bandeau .bouton.plein{color:#fff;background:var(--corail-bouton);border-color:var(--corail-bouton)}

/* --- 5. En-tête --------------------------------------------------------- */
.entete{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding:.85rem var(--marge);
  background:rgba(18,17,19,.0);
  transition:background var(--t),box-shadow var(--t),padding var(--t);
}
/* Le flou est porté par un pseudo-élément, jamais par .entete : un
   backdrop-filter sur l'en-tête en ferait le bloc conteneur de ses
   descendants en position fixe, et le menu plein écran du mobile,
   calé sur la fenêtre, se replierait dans la hauteur de l'en-tête. */
.entete::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(18,17,19,.94);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(235,226,214,.12);
  opacity:0;transition:opacity var(--t);pointer-events:none;
}
.entete.pose::before{opacity:1}
.entete.pose{padding-block:.6rem}
.entete .marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.entete .marque img{width:clamp(104px,10vw,136px);height:auto}
.nav{display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.9rem);margin-left:auto}
.nav a{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.13em;
  font-size:.76rem;font-weight:400;text-decoration:none;color:var(--creme);
  padding:.45rem 0;position:relative;white-space:nowrap;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.15rem;height:1px;
  background:var(--corail);transition:right var(--t)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:#fff}
.langues{display:flex;gap:.1rem;align-items:center;margin-left:.4rem;flex:0 0 auto}
.langues a{
  font-family:var(--label);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--clair-70);padding:.3rem .42rem;border:1px solid transparent;
}
.langues a:hover,.langues a:focus-visible{color:#fff}
.langues a.actif{color:var(--nuit);background:var(--creme)}

.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(235,226,214,.45);
  color:var(--creme);font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;padding:.55rem .9rem;cursor:pointer}
@media (max-width:1100px){
  .burger{display:block}
  .nav{
    position:fixed;inset:0;background:rgba(18,17,19,.985);
    flex-direction:column;justify-content:center;gap:.4rem;margin:0;
    /* visibility retire les liens du parcours clavier tant que le menu est
       fermé ; le délai la laisse jouer après la glissade, pas pendant. */
    transform:translateY(-100%);visibility:hidden;
    transition:transform var(--t), visibility 0s linear var(--t);
  }
  .nav[data-ouvert="oui"]{transform:none;visibility:visible;
    transition:transform var(--t), visibility 0s}
  .nav a{font-size:1.45rem;letter-spacing:.06em;padding:.5rem 1rem}
  .nav a::after{display:none}
  .langues{position:fixed;bottom:2.2rem;left:50%;transform:translateX(-50%);
    z-index:101;display:none}
  .nav[data-ouvert="oui"] ~ .langues{display:flex}
}

/* --- 6. Pied ------------------------------------------------------------ */
.pied{background:var(--nuit);color:var(--clair-90);padding:clamp(3.5rem,7vw,6rem) 0 2.2rem}
.pied a{color:var(--clair-90)}
.pied .colonnes{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.pied h3{font-family:var(--label);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:.74rem;color:var(--corail);margin:0 0 1.1rem}
.pied ul{list-style:none;margin:0;padding:0;font-size:.98rem;line-height:2}
.pied .bas{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;
  border-top:1px solid rgba(235,226,214,.16);
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;
  font-size:.7rem;color:var(--clair-70)}
.pied .bas a{color:var(--clair-70);text-decoration:none}
.pied .bas a:hover{color:#fff}

/* --- 7. Blocs de page --------------------------------------------------- */
.bloc{padding:clamp(3.75rem,8vw,7.5rem) 0}
.bloc.nuit{background:var(--nuit);color:var(--clair-90)}
.bloc.nuit h1,.bloc.nuit h2,.bloc.nuit h3{color:var(--creme)}
.bloc.creme{background:var(--creme)}
.bloc.serre{padding-block:clamp(2.5rem,5vw,4.5rem)}

.duo{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.duo.haut{align-items:start}
.duo.texte-droite > :first-child{order:0}
@media (min-width:860px){.duo.image-droite > :first-child{order:-1}}

/* --- 8. Scène d'ouverture ----------------------------------------------- */
.scene{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--nuit);color:var(--creme);overflow:hidden;
}
.scene > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.52;filter:saturate(1.05);
}
.scene::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,17,19,.82) 0%,rgba(18,17,19,.25) 42%,rgba(18,17,19,.93) 100%);
}
.scene .dedans{position:relative;z-index:2;width:100%;
  padding-block:clamp(6rem,14vh,9rem) clamp(3rem,8vh,5rem)}
.scene h1{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.5)}
/* Le second mot du titre passe à la ligne et change de couleur. La règle
   vaut pour les deux sortes de héros : la scène plein écran de l'accueil
   et le bandeau des pages intérieures. */
.scene h1 .fin,.bandeau h1 .fin{color:var(--corail);display:block}
.scene .sous{margin-top:1.6rem;max-width:46ch;color:var(--clair-90);
  font-size:clamp(1.08rem,1rem + .5vw,1.4rem);line-height:1.55}
.scene .actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.scene .repere{
  position:absolute;right:var(--marge);bottom:2.2rem;z-index:2;
  writing-mode:vertical-rl;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.3em;font-size:.68rem;color:var(--clair-70);display:none;
}
@media (min-width:1100px){.scene .repere{display:block}}

/* bandeau de titre des pages intérieures */
.bandeau{
  position:relative;min-height:clamp(21rem,46vh,30rem);display:flex;align-items:flex-end;
  background:var(--nuit);color:var(--creme);overflow:hidden;
}
.bandeau > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.46}
.bandeau::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,17,19,.85),rgba(18,17,19,.45) 55%,rgba(18,17,19,.9))}
.bandeau .dedans{position:relative;z-index:2;width:100%;
  padding-block:clamp(7.5rem,16vh,10.5rem) clamp(2.2rem,5vh,3.4rem)}
.bandeau h1{color:#fff}
.bandeau .chapo{margin-top:1.2rem;color:var(--clair-90)}

/* --- 9. Compteurs ------------------------------------------------------- */
.compteurs{display:grid;gap:1px;background:rgba(235,226,214,.17);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.compteurs > div{background:var(--nuit);padding:clamp(1.6rem,3vw,2.4rem) 1.4rem}
.compteurs b{display:block;font-family:var(--titre);font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem);
  color:var(--corail);line-height:1}
.compteurs span{display:block;margin-top:.6rem;font-family:var(--label);
  text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--clair-70);line-height:1.5}

/* --- 10. Répertoire : cartes et chapitres ------------------------------- */
.pieces{display:grid;gap:clamp(1.1rem,2.2vw,1.9rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.piece{position:relative;display:block;text-decoration:none;color:var(--creme);
  background:var(--nuit-2);overflow:hidden;isolation:isolate}
.piece img{aspect-ratio:4/5;object-fit:cover;width:100%;
  transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity var(--t);opacity:.82}
.piece:hover img,.piece:focus-visible img{transform:scale(1.045);opacity:1}
.piece .sur{position:absolute;inset:auto 0 0;padding:1.5rem 1.4rem 1.3rem;
  background:linear-gradient(180deg,rgba(18,17,19,0),rgba(18,17,19,.9) 55%)}
.piece .num{font-family:var(--label);letter-spacing:.2em;font-size:.68rem;
  color:var(--corail);display:block;margin-bottom:.45rem}
.piece h3{font-size:clamp(1.15rem,1rem + .55vw,1.45rem);color:#fff}
.piece .mot{display:block;margin-top:.5rem;font-size:.92rem;color:var(--clair-70);
  line-height:1.5;font-family:var(--texte)}

.chapitre{padding:clamp(3.5rem,7vw,6.5rem) 0;border-top:1px solid rgba(42,42,42,.14)}
.chapitre:first-of-type{border-top:0}
.chapitre .entete-piece{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem 1.5rem;margin-bottom:1.8rem}
.chapitre .entete-piece .num{font-family:var(--label);letter-spacing:.24em;font-size:.76rem;
  color:var(--corail-lisible)}
.chapitre .bande{width:100%;aspect-ratio:21/9;object-fit:cover;margin-bottom:clamp(2rem,4vw,3rem)}
.fiche{display:grid;gap:clamp(1.8rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:900px){.fiche{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.distribution{font-family:var(--label);font-size:.86rem;line-height:1.9;
  text-transform:none;letter-spacing:.02em}
.distribution dt{text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;
  color:var(--corail-lisible);margin-top:1.3rem}
.distribution dt:first-child{margin-top:0}
.distribution dd{margin:0;color:var(--encre)}
.nuit .distribution dd{color:var(--clair-90)}
.nuit .distribution dt{color:var(--corail)}

/* --- 10 bis. La parole de l'auteur -------------------------------------- */
/* Certains textes ne sont pas des synopsis : ce sont des témoignages, écrits
   à la première personne. Les faire passer pour de la présentation de
   spectacle les affaiblit. Ce bloc les sort du cours de la page — fond
   sombre, mesure resserrée, corps plus grand — pour qu'on sache, avant même
   d'avoir lu, qu'on entend quelqu'un parler. */
.parole .deux{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (min-width:980px){
  .parole .deux{grid-template-columns:minmax(0,36ch) minmax(0,1fr)}
  /* La photographie est recadrée en hauteur par le navigateur : le plateau
     d'Utopie est presque noir, seuls les interprètes sont éclairés, et c'est
     sur eux que le cadrage se cale. */
  /* Elle accompagne la lecture au lieu de disparaître au premier paragraphe :
     l'en-tête est fixe et mesure environ 5 rem, d'où le décalage. */
  .parole .deux img{aspect-ratio:3/4;object-fit:cover;object-position:50% 72%;
    max-width:440px;margin-left:auto;display:block;
    position:sticky;top:7rem}
}
.parole .deux img{width:100%;height:auto}
.parole .dit{max-width:36ch;margin-top:1.6rem;
  font-size:clamp(1.12rem,1rem + .62vw,1.44rem);line-height:1.56;
  font-weight:300;color:var(--clair-90)}
.parole .dit p{margin:0 0 1.1em}
.parole .dit p:last-child{margin-bottom:0}
/* Les deux mots que le texte définit. Le chorégraphe emploie la forme du
   dictionnaire ; la typographie la reprend au lieu de l'aplatir. */
.parole .definition{padding-left:1.2rem;border-left:2px solid rgba(226,97,70,.45)}
.parole .definition b{font-family:var(--titre);font-weight:400;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--corail)}
.parole .chute{font-style:italic;color:var(--creme)}
.parole .signe{margin-top:clamp(1.8rem,3vw,2.6rem);font-family:var(--label);
  text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--clair-70)}

/* --- 10 ter. Le livre --------------------------------------------------- */
/* Les paliers de soutien. Même grammaire que l'agenda — un montant, un
   intitulé, une explication, un bouton — parce que c'est la même lecture :
   on parcourt une colonne et on s'arrête à la ligne qui nous concerne. */
.paliers{display:grid;gap:1px;background:rgba(235,226,214,.17)}
.paliers article{background:var(--nuit);display:grid;gap:.5rem 2rem;align-items:baseline;
  padding:clamp(1.3rem,2.6vw,1.9rem) clamp(1.2rem,3vw,2.2rem);grid-template-columns:1fr}
@media (min-width:800px){.paliers article{grid-template-columns:7.5rem 1fr auto}}
.paliers .montant{font-family:var(--titre);font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  color:var(--corail);letter-spacing:-.01em}
.paliers h3{font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);color:var(--creme)}
.paliers .quoi{margin:.3rem 0 0;font-size:.95rem;color:var(--clair-70);line-height:1.6}

/* Sous les paliers : le moyen de paiement d'un côté, le reçu de l'autre.
   Deux précisions courtes, qui n'ont pas à occuper toute la largeur l'une
   après l'autre. */
.bas-soutien{display:grid;gap:clamp(1.6rem,3vw,3rem);
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid rgba(235,226,214,.17)}
@media (min-width:860px){.bas-soutien{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bas-soutien .note{margin:0;max-width:46ch}
.fiscal p{margin:0 0 .9em;font-size:.97rem;line-height:1.7;color:var(--clair-90)}
.fiscal p:last-child{margin-bottom:0}
.fiscal b{color:var(--creme)}
/* La phrase qui sépare le don de l'achat : c'est celle qu'il ne faut pas
   manquer, elle est mise à part. */
.fiscal .separe{margin-top:1.1rem;padding-left:1.1rem;
  border-left:2px solid rgba(226,97,70,.45);color:var(--creme)}

/* Les trois couvertures, côte à côte : elles ne se recadrent pas, un livre
   se montre entier. */
.editions-dedans{display:grid;gap:clamp(1rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.editions-dedans img{width:100%;height:auto;display:block;
  box-shadow:0 18px 44px rgba(18,17,19,.28)}
/* Les pages intérieures, elles, se recadrent en bandes : ce sont des extraits. */
.rubans-dedans{display:grid;gap:clamp(.6rem,1.4vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.rubans-dedans img{aspect-ratio:3/4;object-fit:cover;object-position:50% 40%;
  width:100%;cursor:zoom-in;opacity:.93;transition:opacity var(--t),transform .5s}
.rubans-dedans img:hover{opacity:1;transform:scale(1.02)}

/* --- 11. Mosaïque et visionneuse ---------------------------------------- */
.mur{column-count:3;column-gap:clamp(.6rem,1.4vw,1rem)}
@media (max-width:900px){.mur{column-count:2}}
@media (max-width:540px){.mur{column-count:1}}
.mur figure{break-inside:avoid;margin:0 0 clamp(.6rem,1.4vw,1rem);position:relative;
  background:var(--nuit-2);cursor:zoom-in;overflow:hidden}
.mur img{width:100%;transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity var(--t);opacity:.94}
.mur figure:hover img,.mur figure:focus-within img{transform:scale(1.04);opacity:1}
.mur figcaption{position:absolute;inset:auto 0 0;padding:1.6rem .95rem .8rem;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;
  color:#fff;background:linear-gradient(180deg,rgba(18,17,19,0),rgba(18,17,19,.86));
  opacity:0;transition:opacity var(--t)}
.mur figure:hover figcaption,.mur figure:focus-within figcaption{opacity:1}

.rubans{display:grid;gap:clamp(.6rem,1.4vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.rubans img{aspect-ratio:1;object-fit:cover;width:100%;cursor:zoom-in;opacity:.93;
  transition:opacity var(--t),transform .5s}
.rubans img:hover{opacity:1;transform:scale(1.03)}

.visionneuse{
  position:fixed;inset:0;z-index:300;background:rgba(10,9,11,.97);
  display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
}
.visionneuse[data-ouvert="oui"]{display:flex}
.visionneuse img{max-width:100%;max-height:86vh;object-fit:contain}
.visionneuse figcaption{position:absolute;left:0;right:0;bottom:1.4rem;text-align:center;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  color:var(--clair-70);padding-inline:4rem}
/* Le crédit du photographe, quand il est renseigné : sur sa propre ligne,
   en corail, pour qu'on le distingue de la description de l'image. */
.visionneuse figcaption .credit{display:block;margin-top:.5rem;color:var(--corail);
  letter-spacing:.1em}
.visionneuse button{
  position:absolute;background:none;border:1px solid rgba(235,226,214,.4);color:var(--creme);
  font-size:1.5rem;line-height:1;width:3rem;height:3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background var(--t)}
.visionneuse button:hover{background:rgba(235,226,214,.16)}
.visionneuse .fermer{top:1.2rem;right:1.2rem}
.visionneuse .prec{left:1.2rem;top:50%;transform:translateY(-50%)}
.visionneuse .suiv{right:1.2rem;top:50%;transform:translateY(-50%)}

/* --- 12. Agenda et actualité -------------------------------------------- */
.agenda{display:grid;gap:1px;background:rgba(235,226,214,.17)}
.agenda article{background:var(--nuit);padding:clamp(1.5rem,3vw,2.2rem) clamp(1.2rem,3vw,2.2rem);
  display:grid;gap:.5rem 2rem;align-items:baseline;grid-template-columns:1fr}
@media (min-width:800px){.agenda article{grid-template-columns:11rem 1fr auto}}
.agenda .quand{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;
  font-size:.76rem;color:var(--corail)}
.agenda h3{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);color:var(--creme)}
.agenda .ou{font-size:.95rem;color:var(--clair-70);font-family:var(--texte)}
.agenda .tarifs{margin-top:.35rem;font-size:.9rem;opacity:.85}

.affiches{display:grid;gap:clamp(1rem,2.2vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.affiches figure{margin:0}
.affiches img{width:100%;box-shadow:0 18px 50px rgba(18,17,19,.4)}
.affiches figcaption{margin-top:.8rem;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.13em;font-size:.68rem;color:var(--clair-70);line-height:1.6}
.creme .affiches figcaption,.bloc:not(.nuit) .affiches figcaption{color:var(--encre-60)}

/* --- 13. Principes, listes -------------------------------------------- */
.principes{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:rgba(235,226,214,.17);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.principes li{background:var(--nuit);padding:clamp(1.5rem,3vw,2.2rem)}
.principes b{display:block;font-family:var(--titre);text-transform:uppercase;
  font-size:1.02rem;letter-spacing:-.01em;color:var(--creme);margin-bottom:.6rem}
.principes span{display:block;font-size:.98rem;line-height:1.65;color:var(--clair-90)}
.bloc:not(.nuit) .principes{background:rgba(42,42,42,.14)}
.bloc:not(.nuit) .principes li{background:var(--papier)}
.bloc:not(.nuit) .principes b{color:var(--encre)}
.bloc:not(.nuit) .principes span{color:var(--encre-60)}
.bloc.creme .principes li{background:var(--creme)}

.jalons{list-style:none;margin:0;padding:0}
.jalons li{display:grid;gap:.3rem 1.6rem;padding:1.1rem 0;
  border-top:1px solid rgba(42,42,42,.14);grid-template-columns:1fr}
@media (min-width:700px){.jalons li{grid-template-columns:7.5rem 1fr}}
.jalons b{font-family:var(--label);font-weight:500;
  letter-spacing:.06em;font-size:.92rem;color:var(--corail-lisible)}
.nuit .jalons li{border-color:rgba(235,226,214,.17)}
.nuit .jalons b{color:var(--corail)}

.partenaires{display:grid;gap:clamp(.8rem,1.8vw,1.4rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.partenaires img{width:100%;height:auto;background:#fff;padding:.9rem;
  filter:saturate(.1) contrast(1.05);opacity:.86;transition:filter var(--t),opacity var(--t)}
.partenaires img:hover{filter:none;opacity:1}

/* --- 14. Contact -------------------------------------------------------- */
.coord{display:grid;gap:.35rem;margin:0 0 2.2rem}
.coord .l{font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;
  font-size:.68rem;color:var(--corail-lisible)}
.nuit .coord .l{color:var(--corail)}
.coord a{text-decoration:none;border-bottom:1px solid rgba(226,97,70,.5)}
.coord a:hover{border-color:var(--corail)}

.formulaire{display:grid;gap:1.1rem}
.formulaire label{display:grid;gap:.4rem;font-family:var(--label);
  text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;color:var(--encre-60)}
.nuit .formulaire label{color:var(--clair-70)}
.formulaire input,.formulaire textarea,.formulaire select{
  font-family:var(--texte);font-size:1rem;padding:.8rem .9rem;
  border:1px solid rgba(42,42,42,.28);background:#fff;color:var(--encre);
  border-radius:0;width:100%}
.nuit .formulaire input,.nuit .formulaire textarea,.nuit .formulaire select{
  background:var(--nuit-2);border-color:rgba(235,226,214,.28);color:var(--creme)}
.formulaire textarea{min-height:9rem;resize:vertical}
.formulaire .deux{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.note{font-size:.88rem;color:var(--encre-60);line-height:1.6}
.nuit .note{color:var(--clair-70)}

/* --- 15. Apparition au défilement --------------------------------------- */
.apparait{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.apparait.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.apparait{opacity:1;transform:none}}

/* --- 16. Sommaire du répertoire ---------------------------------------- */
.sommaire{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.sommaire a{
  display:inline-flex;align-items:baseline;gap:.55rem;text-decoration:none;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.11em;
  font-size:.82rem;padding:.4rem 0;border-bottom:1px solid transparent;
  transition:border-color var(--t),color var(--t);
}
.sommaire a b{color:var(--corail-lisible);font-weight:500;font-size:.72rem;letter-spacing:.16em}
.sommaire a:hover,.sommaire a:focus-visible{border-color:var(--corail)}

.legende{margin-top:.9rem;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.14em;font-size:.68rem;color:var(--encre-60);line-height:1.6}
.nuit .legende,.scene .legende,.bandeau .legende{color:var(--clair-70)}

/* --- 17. Divers --------------------------------------------------------- */
.avis{border:1px solid rgba(226,97,70,.45);background:rgba(226,97,70,.07);
  padding:1.2rem 1.4rem;font-size:.95rem;line-height:1.65}
.nuit .avis{background:rgba(226,97,70,.12)}
.videos{display:grid;gap:clamp(1.4rem,3vw,2.4rem);align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.videos{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.videos figure{margin:0}
.media-video{position:relative;width:100%;aspect-ratio:16/9;background:var(--nuit-2)}
.media-video.vertical{aspect-ratio:9/16;max-width:360px;margin-inline:auto}
.media-video video{width:100%;height:100%;object-fit:cover;display:block}
.deux-col{columns:2;column-gap:clamp(2rem,4vw,3.5rem)}
@media (max-width:820px){.deux-col{columns:1}}
.deux-col p{break-inside:avoid}