/* ==========================================================================
   Site Compagnie NAO — habillage
   Prolonge la charte (tokens dans nao.css) : mêmes couleurs, mêmes polices,
   même vocabulaire de formes. Bords francs, rouge employé avec parcimonie.
   ========================================================================== */

:root {
  --courbe: cubic-bezier(.2, .7, .3, 1);
  --duree: 320ms;
  --duree-longue: 760ms;
  --entete: 76px;
  /* Respiration verticale des sections. Une seule variable : resserrer ou
     aérer le site entier se fait ici. Réduite d'environ 20 % le 23/10/2026. */
  --section: clamp(34px, 4.3vw, 64px);          /* resserré d'environ 20 % */
  --section-courte: clamp(24px, 3vw, 40px);
  --marge: clamp(20px, 5vw, 72px);
  --large: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--nao-blanc); }
body {
  font-family: var(--nao-font-texte);
  color: var(--nao-noir);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--nao-bleu);
  outline-offset: 3px;
}

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

.saut {
  position: fixed; top: -100px; left: 12px; z-index: 100;
  padding: 12px 20px; background: var(--nao-noir); color: var(--nao-creme);
  font-family: var(--nao-font-titre); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; transition: top var(--duree) var(--courbe);
}
.saut:focus { top: 12px; }

/* --------------------------------------------------------- En-tête ------ */
.entete {
  position: sticky; top: 0; z-index: 60;
  height: var(--entete);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
          backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(38, 38, 38, .1);
  transition: box-shadow var(--duree) var(--courbe);
}
.entete.defile { box-shadow: 0 6px 24px rgba(38, 38, 38, .07); }
/* L'entête s'étale sur toute la largeur de la fenêtre, pas sur la colonne de
   1240 px du contenu : le logo vient se poser près du bord gauche, le menu près
   du bord droit — et le menu gagne la place qui lui manquait. */
.entete .contenu {
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
  max-width: none;
}
/* Le logo ne se laisse pas écraser : en flex, une image en width:auto est le
   premier élément que le navigateur comprime, et à partir de 1200 px le menu
   à six entrées le réduisait à zéro — le logo disparaissait purement. */
.entete .contenu > a { flex: 0 0 auto; display: flex; align-items: center; }
.entete img { height: 40px; width: auto; flex: none; min-width: 64px; }
/* Le menu respire : l'entête est pleine largeur et « Contact » est court, on a la
   place d'écarter les entrées. */
.entete nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }

/* Menu en bas-de-casse, initiale haute : plus classe, plus lisible. Les petites
   capitales restent réservées aux métadonnées (dates, catégories, surtitres). */
.lien-nav {
  position: relative; white-space: nowrap;   /* le menu ne doit jamais se plier */
  font-family: var(--nao-font-titre); font-weight: 400; font-size: 14.5px;
  letter-spacing: .01em; text-transform: none; padding-block: 6px;
}
/* « Nous contacter » : un lien comme les autres, achevé par un point rond en
   couleur — le point en fin de trait de la charte. Pas de bouton, pas d'aplat :
   on est dans l'artistique, l'appel doit rester fin. */
.lien-contact { display: inline-flex; align-items: center; gap: 9px; }
.lien-contact .point {
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
  transition: transform var(--duree) var(--courbe);
}
.lien-contact:hover .point { transform: scale(1.35); }
.menu-mobile .lien-contact { margin-top: 6px; width: 100%; }
.menu-mobile .lien-contact .point { width: 8px; height: 8px; }
/* Plus de filet rouge sous le menu : l'entrée active est en pleine couleur de
   texte, les autres un ton plus clair ; le survol ramène à la pleine couleur. */
.lien-nav { color: var(--texte); }
/* Le menu ne change pas de couleur. Un filet d'un pixel se dessine au survol et
   reste sous l'entrée de la page courante : c'est tout. */
.lien-nav::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px;
  background: currentColor; transition: right 320ms var(--courbe);
}
.lien-nav:hover::after, .lien-nav[aria-current]::after { right: 0; }
.lien-nav:hover::after, .lien-nav[aria-current]::after { right: 0; }
/* L'entrée courante garde la couleur du menu : seul le filet la distingue. */

.bouton {
  display: inline-flex; align-items: center; gap: 0;
  max-width: 100%;
  padding: 13px 26px; text-align: left; line-height: 1.35;
  border: 1px solid rgba(220, 30, 30, .55);
  border-radius: 999px; background: transparent;
  font-family: var(--nao-font-titre); font-weight: 400; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--nao-rouge);
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              transform var(--duree) var(--courbe);
}
.bouton::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--nao-rouge); transform: scaleX(0); transform-origin: left center;
  transition: transform 460ms var(--courbe);
}
.bouton:hover { color: #fff; border-color: var(--nao-rouge); transform: translateY(-2px); }
.bouton:hover::before { transform: scaleX(1); }
/* La flèche garde sa taille : sans cela, un libellé trop long pour sa colonne
   l'écrasait à 0 px et le bouton perdait sa flèche (constaté vers 1024 px). */
/* Les flèches des boutons ont été jugées agressives : on les retire partout —
   un bouton avec flèche ici et sans ailleurs aurait l'air d'un oubli. Le survol
   garde son aplat de couleur, c'est lui qui dit « cliquez ». */
.bouton svg { display: none; }
/* Sur un écran étroit, « Dossier de diffusion 2026-27 » dépassait de l'écran :
   le libellé se met alors sur deux lignes au lieu de forcer la largeur. */
@media (max-width: 540px) {
  .bouton { padding: 12px 20px; gap: 10px; }
}

.burger { display: none; width: 46px; height: 46px; align-items: center;
  justify-content: center; gap: 5px; border: 1px solid rgba(38,38,38,.2);
  border-radius: 999px; background: #fff; cursor: pointer; }
.burger span { width: 5px; height: 5px; border-radius: 999px; }

/* ---------------------------------------------------- Fil d'Ariane ------ */
.ariane {
  /* Les liens et les séparateurs se touchent dans le HTML : sans flex-wrap,
     le fil ne trouvait aucun point de coupure et débordait sur petit écran. */
  display: flex; flex-wrap: wrap; align-items: baseline;
  padding-block: 18px 0;
  font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: #6A6A6A;
}
.ariane a:hover { color: var(--nao-rouge); }
.ariane span { margin-inline: 8px; color: #BDBDBD; }

/* ---------------------------------------------------------- Héros ------- */
/* Deux colonnes plutôt qu'une image à bord perdu : les photos d'archive
   plafonnent à 1100 px de large, les étirer les rendrait molles. */
.heros { padding-top: clamp(22px, 3vw, 40px);
  padding-block: clamp(22px, 3vw, 40px) var(--section);
  display: grid; gap: clamp(28px, 4vw, 60px);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
}
.heros figure { margin: 0; position: relative; background: var(--nao-noir); }
.heros figure img { width: 100%; height: auto; }
.heros .etiquette {
  position: absolute; top: 0; left: 0;
  padding: 9px 18px; background: var(--nao-noir); color: var(--nao-creme);
  font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
}
.heros h1 {
  margin: 14px 0 0;
  font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(38px, 5.6vw, 76px); line-height: .98;
  letter-spacing: -.02em;
  /* Lexend Exa est très large : « hypermodernes » d'un seul tenant sortait
     de la colonne. La page est en lang="fr", la césure automatique coupe
     donc au bon endroit ; break-word reste le filet de sécurité. */
  hyphens: auto; overflow-wrap: break-word;
}
/* Un titre dont le mot le plus long dépasse dix lettres : un cran plus bas,
   pour qu'il se coupe une fois et non trois. */
.heros h1.titre-long { font-size: clamp(34px, 3.9vw, 54px); line-height: 1.02; }
.heros .annee {
  font-family: var(--nao-font-titre); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nao-bleu);
}
.heros .chapo {
  margin: 20px 0 0; max-width: 34ch;
  font-weight: 300; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.5;
  text-wrap: pretty;
}
.heros .lieux {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px;
}
.heros .lieux li {
  list-style: none; padding: 7px 15px;
  border: 1px solid rgba(38, 38, 38, .22);
  font-size: 14px; font-weight: 300;
}

/* --------------------------------------------------- Fiche technique ---- */
.fiche { background: var(--nao-creme); }
.fiche .contenu { padding-block: var(--section-courte); }
.fiche dl {
  margin: 0; display: grid; gap: clamp(22px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}
.fiche dt {
  font-family: var(--nao-font-titre); font-weight: 400; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--nao-rouge);
}
.fiche dd {
  margin: 10px 0 0; font-weight: 300;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45;
}

/* ---------------------------------------------------------- Propos ------ */
.propos { padding-block: var(--section); }
.propos .contenu {
  display: grid; gap: clamp(26px, 5vw, 70px);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
  align-items: start;
}
.propos .intitule { position: sticky; top: calc(var(--entete) + 34px); }
.propos .colonne { max-width: 58ch; }
@media (max-width: 900px) {
  .propos .contenu { grid-template-columns: 1fr; }
  .propos .intitule { position: static; }
}
.propos p {
  margin: 0 0 18px; font-weight: 300;
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.62; text-wrap: pretty;
}
.definition {
  margin: 30px 0; padding: 24px 28px;
  border-left: 3px solid var(--nao-bleu); background: #FAFAFA;
}
.definition .mot {
  font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nao-bleu);
}
.definition p { margin: 12px 0 0; font-size: clamp(16px, 1.5vw, 19px); }

/* Les textes du répertoire sont signés par la chorégraphe : on le montre. */
.propos .signature {
  margin-top: 26px; font-size: clamp(15px, 1.3vw, 17px);
  color: var(--texte-faible); font-style: italic;
}

/* « On en parle » : la presse extérieure, un lien par article. */
.presse { padding-block: var(--section-courte); border-top: 1px solid var(--trait); }
.presse .liens { margin-top: 14px; }
.presse p { margin: 0 0 10px; }
.lien-presse {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 300;
  text-decoration: none; color: var(--texte);
}
.lien-presse .organe {
  font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-faible);
}
.lien-presse:hover .titre-article { color: var(--accent); }
.note-presse { display: block; margin-top: 4px; font-size: 14px; color: var(--texte-faible); }
.lien-presse svg { transition: transform var(--duree) var(--courbe); }
.lien-presse:hover svg { transform: translateX(4px); }

.surtitre {
  font-family: var(--nao-font-titre); font-weight: 400; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--nao-rouge);
}
h2 {
  margin: 14px 0 0;
  font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(27px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.01em;
}

/* --------------------------------------------------------- Vidéo -------- */
.video { padding-block: 0 var(--section); }
.lecteur {
  position: relative; aspect-ratio: 16/9; background: var(--nao-noir);
  cursor: pointer; overflow: hidden; border: 0; padding: 0; width: 100%;
}
.lecteur img { width: 100%; height: 100%; object-fit: cover; opacity: .72;
  transition: opacity var(--duree) var(--courbe), transform 620ms var(--courbe); }
.lecteur:hover img { opacity: .55; transform: scale(1.03); }
.lecteur .play {
  position: absolute; inset: 0; margin: auto; width: 86px; height: 86px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(254, 236, 199, .92);
  transition: transform var(--duree) var(--courbe);
}
.lecteur:hover .play { transform: scale(1.08); }
.lecteur .play svg { margin-left: 4px; }
.lecteur .mention {
  position: absolute; left: 0; bottom: 0; padding: 10px 18px;
  background: var(--nao-noir); color: var(--nao-creme);
  font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
}
.lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------- Galerie -------- */
.galerie { padding-block: 0 var(--section); }
.galerie .grille { display: grid; gap: clamp(14px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.galerie figure { margin: 0; overflow: hidden; background: var(--nao-noir); aspect-ratio: 3/2; }
.galerie img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 620ms var(--courbe); }
.galerie figure:hover img { transform: scale(1.04); }

/* ------------------------------------- Distribution, dates, dossier ----- */
.pied-fiche { background: var(--nao-noir); color: var(--nao-creme); }
.pied-fiche .contenu {
  padding-block: var(--section);
  display: grid; gap: clamp(34px, 5vw, 70px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.pied-fiche h3 {
  margin: 0 0 20px;
  font-family: var(--nao-font-titre); font-weight: 400; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nao-jaune);
}
.pied-fiche .role { font-weight: 300; font-size: 16px; color: #B9B2A4; }
.pied-fiche .noms { margin: 4px 0 18px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 300; }
.date-ligne { display: flex; gap: 18px; align-items: baseline;
  padding-block: 14px; border-top: 1px solid rgba(254, 236, 199, .2); }
.date-ligne:last-child { border-bottom: 1px solid rgba(254, 236, 199, .2); }
.date-ligne .jour { font-family: var(--nao-font-titre); font-size: 26px; line-height: 1; }
.date-ligne .ou { font-weight: 300; font-size: 16px; color: #D8CFBE; }
.pied-fiche .bouton { color: var(--nao-jaune); border-color: rgba(255, 201, 0, .5); }
.pied-fiche .bouton::before { background: var(--nao-jaune); }
.pied-fiche .bouton:hover { color: var(--nao-noir); border-color: var(--nao-jaune); }

/* ------------------------------------------------------ Voir aussi ------ */
.voir-aussi { padding-block: var(--section); }
.voir-aussi .grille { margin-top: clamp(22px, 2.8vw, 34px);
  display: grid; gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
/* La carte est une colonne : image en bloc (ratio 3/2), puis le titre, puis la
   ligne de métadonnées. Le cadre était un <span> inline — le texte qui suivait
   n'entrait pas dans la hauteur de la carte et débordait sur la ligne d'après. */
.carte { display: flex; flex-direction: column; text-decoration: none; color: var(--texte); }
.carte .cadre { display: block; width: 100%; }
/* Toute règle de display explicite écrase le display:none que le navigateur
   applique à [hidden] : sans ce rappel, filtrer ne masquait rien. */
[hidden] { display: none !important; }
.carte .cadre { overflow: hidden; background: var(--nao-noir); aspect-ratio: 3/2; }
.carte img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 620ms var(--courbe); }
.carte:hover img { transform: scale(1.05); }
.carte .cadre img { display: block; }
.carte .meta { display: block; margin-top: 8px; font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-faible); }
.carte .meta .cat { color: var(--accent); }
.carte .cat { font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--nao-bleu); }
.carte .nom { display: block; margin-top: 18px; font-family: var(--nao-font-titre); line-height: 1.12;
  font-size: clamp(21px, 2.2vw, 27px); transition: color var(--duree) var(--courbe); }
.carte:hover .nom { color: var(--nao-rouge); }

/* ----------------------------------------------------- Pied de page ----- */
.pied { background: var(--nao-noir); color: var(--nao-creme);
  border-top: 1px solid rgba(254, 236, 199, .14); }
.pied .contenu { padding-block: clamp(34px, 4vw, 54px);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 22px; }
.pied img { width: 142px; }
.pied .liens { display: flex; flex-wrap: wrap; gap: 20px;
  font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(254, 236, 199, .72); }
.pied .liens a { min-height: 44px; display: inline-flex; align-items: center;
  transition: color var(--duree) var(--courbe); }
.pied .liens a:hover { color: var(--nao-jaune); }

/* --------------------------------------------- Révélation au défilement - */
/* Le masquage n'existe que si le script a pu poser la classe « anime » sur
   <html>. Sans JavaScript — ou si l'observateur ne se déclenche jamais — le
   contenu reste visible : jamais une page blanche. */
html.anime [data-reveal] {
  opacity: 0; transform: translate3d(0, 20px, 0);
  transition: opacity var(--duree-longue) var(--courbe),
              transform var(--duree-longue) var(--courbe);
}
html.anime [data-reveal].vu { opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 80ms); }

/* ------------------------------------------------------------ Mobile ---- */
/* Le menu se replie dès 1240 px : six entrées, le bouton, la bascule et le logo
   ne tiennent plus en dessous — on l'a vu déborder de 21 px à 1200. */
@media (max-width: 1240px) {
  .entete nav .lien-nav, .entete nav .bouton { display: none; }
  .entete nav { gap: 10px; }
  .burger { display: inline-flex; }
}

/* Le héros, lui, tient en deux colonnes bien plus bas. */
@media (max-width: 900px) {
  .heros { grid-template-columns: 1fr; }
  .heros .texte { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  html.anime [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   MODE SOMBRE
   La charte l'autorise : logo en défonce, fond #262626, texte crème.
   Deux règles non négociables qu'elle documente :
     — le bleu tombe à 2,8:1 sur noir : l'accent devient le jaune ;
     — le rouge plein tombe à 3,1:1 : il ne porte plus de texte, seulement un trait.
   Suit la préférence système, et se force par data-theme sur <html>.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) { color-scheme: dark; }
}
:root[data-theme='sombre'] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) {
    --page: #1B1B1B;        /* le fond de page, plus sombre que les bandeaux */
    --bandeau: #262626;     /* remplace le crème */
    --encart: #232323;      /* remplace le gris très clair de la définition */
    --texte: #FEECC7;
    --texte-faible: #B9B2A4;
    --trait: rgba(254, 236, 199, .22);
    --accent: var(--nao-jaune);
    --sur-accent: #262626;
  }
}
:root[data-theme='sombre'] {
  --page: #1B1B1B; --bandeau: #262626; --encart: #232323;
  --texte: #FEECC7; --texte-faible: #B9B2A4;
  --trait: rgba(254, 236, 199, .22);
  --accent: var(--nao-jaune); --sur-accent: #262626;
}

/* Valeurs claires par défaut : le reste de la feuille s'y réfère */
:root {
  --page: #FFFFFF; --bandeau: var(--nao-creme); --encart: #FAFAFA;
  --texte: var(--nao-noir); --texte-faible: #6A6A6A;
  --trait: rgba(38, 38, 38, .18);
  --accent: var(--nao-rouge); --sur-accent: #FFFFFF;
}

html, body { background: var(--page); }
body { color: var(--texte); }
.entete { background: color-mix(in srgb, var(--page) 94%, transparent);
          border-bottom-color: var(--trait); }
.ariane { color: var(--texte-faible); }
.ariane span { color: var(--trait); }
.surtitre, .fiche dt, .heros .annee, .carte .cat, .definition .mot { color: var(--accent); }
.fiche { background: var(--bandeau); }
.definition { background: var(--encart); border-left-color: var(--accent); }
.heros .lieux li { border-color: var(--trait); }
.carte:hover .nom { color: var(--accent); }
.bouton { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.bouton::before { background: var(--accent); }
.bouton:hover { color: var(--sur-accent); border-color: var(--accent); }
.burger { background: var(--page); border-color: var(--trait); }

/* Le bloc « distribution / dates / programmer » est déjà sombre en mode clair :
   en mode sombre il se confondrait avec la page. On le détache par deux filets. */
:root[data-theme='sombre'] .pied-fiche,
:root[data-theme='sombre'] .pied,
.pied-fiche, .pied { background: var(--nao-noir); color: var(--nao-creme); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) .pied-fiche {
    border-block: 1px solid rgba(254, 236, 199, .16);
  }
}
:root[data-theme='sombre'] .pied-fiche {
  border-block: 1px solid rgba(254, 236, 199, .16);
}

/* Le logo tricolore ne va que sur fond blanc : en sombre, version en défonce */
.logo-sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) .logo-clair  { display: none; }
  :root:not([data-theme='clair']) .logo-sombre { display: block; }
}
:root[data-theme='sombre'] .logo-clair  { display: none; }
:root[data-theme='sombre'] .logo-sombre { display: block; }
:root[data-theme='clair']  .logo-clair  { display: block; }
:root[data-theme='clair']  .logo-sombre { display: none; }

/* Bouton de bascule */
.bascule {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--trait); border-radius: 999px;
  background: transparent; color: var(--texte); cursor: pointer;
  transition: border-color var(--duree) var(--courbe),
              transform var(--duree) var(--courbe);
}
.bascule:hover { border-color: var(--accent); transform: scale(1.06); }
/* L'icône annonce la destination, pas l'état courant : en clair on voit la
   lune (cliquer passe en sombre), en sombre on voit le soleil. */
.bascule .soleil { display: none; }
.bascule .lune   { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) .bascule .soleil { display: block; }
  :root:not([data-theme='clair']) .bascule .lune   { display: none; }
}
:root[data-theme='sombre'] .bascule .soleil { display: block; }
:root[data-theme='sombre'] .bascule .lune   { display: none; }
:root[data-theme='clair']  .bascule .soleil { display: none; }
:root[data-theme='clair']  .bascule .lune   { display: block; }

/* ==========================================================================
   Pages autres que les fiches de création.
   Mêmes règles que le reste : bords francs, accent variable selon le thème,
   espacements pilotés par --section.
   ========================================================================== */

/* -------------------------------------------------------- Tête de page --- */
.tete-page { padding-block: clamp(26px, 3.4vw, 46px) var(--section-courte); }
.tete-page h1 {
  margin: 10px 0 0; font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -.02em;
  hyphens: auto; overflow-wrap: break-word;
}
.tete-page .chapo {
  margin: 18px 0 0; max-width: 56ch; font-weight: 300;
  font-size: clamp(17px, 1.8vw, 23px); line-height: 1.5; color: var(--texte);
}

/* La tête de page en bandeau : même grammaire que le bandeau d'accueil, en
   plus bas. Le voile monte de la gauche et du bas, la photo reste lisible. */
.tete-page.bandeau {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(44vh, 400px); display: flex; align-items: flex-end;
  padding-block: clamp(28px, 5vw, 56px); margin-bottom: var(--section-courte);
}
.tete-page.bandeau .fond { position: absolute; inset: 0; z-index: -2; display: block; }
.tete-page.bandeau .fond img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.tete-page.bandeau::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(18,16,14,.84) 0%, rgba(18,16,14,.5) 40%, rgba(18,16,14,.08) 75%, rgba(18,16,14,0) 100%),
    linear-gradient(to right, rgba(18,16,14,.42) 0%, rgba(18,16,14,0) 60%);
}
.tete-page.bandeau .contenu { width: 100%; }
.tete-page.bandeau .surtitre { color: var(--nao-jaune); }
.tete-page.bandeau h1, .tete-page.bandeau .chapo { color: var(--nao-creme); }
.tete-page.bandeau .chapo { max-width: 48ch; }

/* ------------------------------------------------------- Héros d'accueil --- */
/* Composé comme sur son site : l'image sur toute la hauteur de l'écran, un
   voile uniforme, et au centre le logo blanc, son paragraphe, les deux boutons.
   La vidéo ouvre la page ; la photo fixe attend dessous, masquée, et n'apparaît
   qu'à la fin (.photo) ou si la vidéo est écartée (.inactive). */
.heros-accueil {
  position: relative; isolation: isolate; overflow: hidden; background: #1B1B1B;
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding-block: calc(var(--entete) + 40px) 56px; text-align: center;
}
.heros-accueil .fond { position: absolute; inset: 0; z-index: -3; display: block; }
.heros-accueil .fond img,
.heros-accueil video.boucle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; display: block;
}
.heros-accueil .fond img { opacity: 0; transition: opacity 700ms var(--courbe); object-position: center 30%; }
.heros-accueil.photo .fond img { opacity: 1; }
.heros-accueil video.boucle { z-index: -2; opacity: 1; transition: opacity 1100ms var(--courbe); }
.heros-accueil video.boucle.fin { opacity: 0; }
.heros-accueil video.boucle.inactive { display: none; }
/* Le voile : égal partout, plus un renfort en haut pour le menu blanc. */
.heros-accueil::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(18, 16, 14, .46); transition: background 1100ms var(--courbe);
}
/* La photo fixe est déjà sombre (mesurée à 0,09 de luminance) : une fois la vidéo
   finie, le voile disparaît, seul le renfort radial derrière le texte demeure. */
.heros-accueil.photo::after { background: rgba(18, 16, 14, 0); }
.heros-accueil .contenu { width: 100%; display: flex; justify-content: center; position: relative; z-index: 1; }
/* Un renfort radial derrière le texte : sur les images les plus claires de la vidéo,
   le paragraphe tombait à 4,5:1 tout juste ; il passe à 5,3:1. */
.heros-accueil .texte::before {
  content: ''; position: absolute; z-index: -1; inset: -120px -220px;
  background: radial-gradient(ellipse at center, rgba(18,16,14,.38) 0%, rgba(18,16,14,.22) 45%, rgba(18,16,14,0) 72%);
  pointer-events: none;
}
.heros-accueil .texte { position: relative; }
.heros-accueil .texte { max-width: 66ch; color: #FFFFFF; display: flex; flex-direction: column; align-items: center; }
.heros-accueil h1 { margin: 0; line-height: 0; }
.heros-accueil h1 img { width: clamp(84px, 9vw, 110px); height: auto; display: block; }
.heros-accueil .chapo {
  margin: clamp(22px, 3vw, 36px) 0 0; font-weight: 300;
  font-size: clamp(15.5px, 1.35vw, 18px); line-height: 1.6; letter-spacing: .02em;
  color: #FFFFFF; text-wrap: balance;
}
.heros-accueil .actions { margin: clamp(26px, 3.4vw, 40px) 0 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.heros-accueil .bouton {
  color: #FFFFFF; background: var(--nao-noir); border-color: var(--nao-noir);
  padding-inline: 30px; min-width: 300px; justify-content: center;
}
.heros-accueil .bouton::before { background: #FFFFFF; }
.heros-accueil .bouton:hover { color: var(--nao-noir); border-color: #FFFFFF; }
.heros-accueil .bouton.discret { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.85); }
.heros-accueil .bouton.discret::before { background: #FFFFFF; }
.heros-accueil .bouton.discret:hover { color: var(--nao-noir); }
@media (max-width: 760px) {
  .heros-accueil { min-height: 100svh; padding-block: calc(var(--entete) + 24px) 40px; }
  .heros-accueil .texte { max-width: 100%; padding-inline: 4px; }
  .heros-accueil h1 img { width: 92px; }
  .heros-accueil .chapo { font-size: 15.5px; line-height: 1.55; margin-top: 20px; }
  .heros-accueil .actions { width: 100%; margin-top: 26px; }
  .heros-accueil .bouton { min-width: 0; width: 100%; max-width: 360px; padding-block: 14px; }
  .heros-accueil .fond img, .heros-accueil video.boucle { object-position: 50% 45%; }
  .heros-accueil .fond img { opacity: 1; }
  .heros-accueil .bouton { font-size: 12px; letter-spacing: .07em; padding-inline: 16px; text-align: center; }
}

/* Un bouton secondaire, sans l'aplat de couleur. */
.bouton.discret { color: var(--texte); border-color: var(--trait); }
.bouton.discret::before { background: var(--texte); }
.bouton.discret:hover { color: var(--page); border-color: var(--texte); }

/* ------------------------------------------------- Familles de lieux --- */
/* Repris du site actuel : fond blanc, tout centré, l'icône grande, le nom,
   puis un bouton à liseré. Au survol, l'icône se soulève légèrement. */
.familles { padding-block: var(--section); text-align: center; }
.familles h2 { margin: 0; font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1; }
.familles .intro { margin: 16px auto 0; max-width: 64ch; font-weight: 300;
  font-size: clamp(16px, 1.5vw, 19px); }
.grille-familles {
  margin-top: clamp(26px, 3.2vw, 44px); display: grid;
  gap: clamp(22px, 3vw, 36px) clamp(18px, 2.4vw, 32px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Chaque bloc occupe toute la hauteur de sa ligne ; le titre a une hauteur
   réservée de deux lignes et le bouton est poussé en bas : les quatre boutons
   sont alignés, que le nom tienne sur une ligne ou deux. */
.famille {
  display: flex; flex-direction: column; align-items: center; gap: 0; height: 100%;
  text-decoration: none; color: var(--texte);
}
.famille .icone {
  width: clamp(84px, 8vw, 110px); height: auto; display: block;
  transform-origin: 50% 60%;
  transition: transform 520ms cubic-bezier(.34, 1.4, .64, 1);
}
.famille:hover .icone { transform: translateY(-5px) rotate(-1.5deg) scale(1.04); }
.famille .nom { margin-top: clamp(16px, 2vw, 26px); font-family: var(--nao-font-titre);
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.15; min-height: 2.3em;
  display: flex; align-items: flex-start; justify-content: center; }
.famille .bouton { margin-top: auto; }
.grille-familles { align-items: stretch; }
.famille, .famille:hover, .famille:hover .nom { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .famille:hover .icone { transform: none; } }
@media (max-width: 900px) { .grille-familles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grille-familles { grid-template-columns: 1fr; } }

.apres-grille { margin-top: clamp(24px, 3vw, 36px); }

/* ------------------------------------------------------ Brèves d'accueil --- */
.breves-accueil { padding-block: var(--section); }
.grille-breves {
  margin-top: clamp(22px, 2.8vw, 34px); display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.breve {
  display: block; padding-top: 18px; border-top: 2px solid var(--accent);
  text-decoration: none; color: var(--texte);
}
.breve .quand { display: block; font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-faible); }
.breve .quoi { display: block; margin-top: 10px; font-family: var(--nao-font-titre);
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.2;
  transition: color var(--duree) var(--courbe); }
.breve:hover .quoi { color: var(--accent); }
.breve .apercu { display: block; margin-top: 10px; font-weight: 300;
  font-size: 16px; line-height: 1.5; color: var(--texte-faible); }

/* -------------------------------------------------------------- Appel --- */
.appel { padding-block: var(--section); background: var(--nao-noir); color: var(--nao-creme); }
.appel h2 { margin: 0; font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; }
.appel p { margin: 16px 0 0; max-width: 52ch; font-weight: 300;
  font-size: clamp(16px, 1.6vw, 20px); }
.appel .bouton { margin-top: 10px; color: var(--nao-jaune);
  border-color: color-mix(in srgb, var(--nao-jaune) 55%, transparent); }
.appel .bouton::before { background: var(--nao-jaune); }
.appel .bouton:hover { color: var(--nao-noir); border-color: var(--nao-jaune); }

/* --------------------------------------------------------- Répertoire --- */
.repertoire { padding-block: 0 var(--section); }
.filtres {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px clamp(14px, 2.2vw, 34px);
}
.filtre {
  position: relative; padding: 10px 2px 12px; border: 0; background: transparent;
  font-family: var(--nao-font-titre); font-size: 14.5px; letter-spacing: .01em;
  text-transform: none; color: var(--texte-faible); cursor: pointer;
  transition: color var(--duree) var(--courbe);
}
.filtre::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1.5px;
  background: currentColor; transition: right var(--duree) var(--courbe);
}
.filtre:hover { color: var(--texte); }
.filtre.actif { color: var(--texte); }
.filtre.actif::after, .filtre:hover::after { right: 0; }
.barre-filtres {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: clamp(26px, 3.4vw, 44px);
}
.barre-filtres .filtres { margin-bottom: 0; }
.compteur { margin: 0; font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-faible); }
.repertoire .grille {
  display: grid; gap: clamp(34px, 4vw, 56px) clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.carte .an { color: var(--texte-faible); }
/* Les pièces sans fiche : une liste sobre, pas des cadres vides. */
.repertoire-autres { padding-block: var(--section-courte) var(--section); background: var(--bandeau); }
.repertoire-autres .intro { margin: 10px 0 0; max-width: 54ch; font-weight: 300;
  font-size: clamp(15px, 1.4vw, 17px); color: var(--texte-faible); }
.liste-sobre { list-style: none; margin: clamp(18px, 2.2vw, 28px) 0 0; padding: 0; }
.liste-sobre li {
  display: grid; gap: 4px 24px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto 70px;
  padding: 14px 0; border-top: 1px solid var(--trait);
}
.liste-sobre li:last-child { border-bottom: 1px solid var(--trait); }
.liste-sobre .nom { font-family: var(--nao-font-titre); font-size: clamp(16px, 1.6vw, 19px); }
.liste-sobre .cat { font-size: 14px; font-weight: 300; color: var(--texte-faible); }
.liste-sobre .an { font-family: var(--nao-font-titre); font-size: 13px;
  text-align: right; color: var(--accent); }
@media (max-width: 620px) {
  .liste-sobre li { grid-template-columns: 1fr auto; }
  .liste-sobre .cat { grid-column: 1 / -1; }
}
.vide-filtre { margin-top: 20px; color: var(--texte-faible); }

/* ------------------------------------------------------------- Agenda --- */
.agenda { padding-block: var(--section-courte) var(--section); }
.agenda.passe { background: var(--bandeau); }
.agenda h2 { margin: 0 0 clamp(18px, 2.2vw, 26px); font-family: var(--nao-font-titre);
  font-weight: 400; font-size: clamp(24px, 2.8vw, 34px); }
/* Les années de l'agenda passé : un repère, pas un titre qui crie. */
.millesime {
  margin: clamp(26px, 3vw, 40px) 0 10px; font-family: var(--nao-font-titre);
  font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); color: var(--accent);
}
.millesime:first-of-type { margin-top: 0; }
.dates { list-style: none; margin: 0; padding: 0; }
.dates li {
  display: grid; gap: 6px 26px; align-items: baseline;
  grid-template-columns: 190px minmax(0, 1fr);
  padding: 18px 0; border-top: 1px solid var(--trait);
}
.dates li:last-child { border-bottom: 1px solid var(--trait); }
.dates .quand { font-family: var(--nao-font-titre); font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.dates .nom { display: block; font-family: var(--nao-font-titre);
  font-size: clamp(17px, 1.7vw, 21px); }
.dates .ou { display: block; margin-top: 4px; font-weight: 300; color: var(--texte-faible); }
.dates .detail { display: block; margin-top: 4px; font-size: 15px;
  font-weight: 300; color: var(--texte-faible); }
/* Le titre devient le lien vers la fiche de la pièce. */
.dates .nom.vers-piece {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--texte);
  transition: color var(--duree) var(--courbe);
}
.dates .nom.vers-piece svg { flex: none; color: var(--accent);
  transition: transform var(--duree) var(--courbe); }
.dates .nom.vers-piece:hover { color: var(--accent); }
.dates .nom.vers-piece:hover svg { transform: translateX(5px); }
.aucune { font-weight: 300; font-size: clamp(16px, 1.6vw, 20px); }
.aucune a { color: var(--accent); }
@media (max-width: 760px) {
  .dates li { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- Actualités --- */
.breves { padding-block: 0 var(--section); }
/* La date tient la marge de gauche, le texte occupe la colonne : même langage
   que l'agenda, et la page cesse d'être une colonne plate. */
.breve-longue {
  display: grid; gap: 8px clamp(24px, 3.4vw, 54px); align-items: start;
  grid-template-columns: 190px minmax(0, 1fr);
  padding: clamp(30px, 3.6vw, 48px) 0; border-top: 1px solid var(--trait);
}
.breve-longue:last-child { border-bottom: 1px solid var(--trait); }
.breve-longue .corps { max-width: 64ch; }
@media (max-width: 760px) { .breve-longue { grid-template-columns: 1fr; } }
.breve-longue figure { margin: 22px 0 0; }
.breve-longue img { width: 100%; height: auto; display: block; }
.breve-longue .quand { margin: 0; font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.breve-longue h2 { margin: 0; font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.08; }
.breve-longue .chapo-breve { margin: 12px 0 0; font-weight: 300;
  font-size: clamp(16px, 1.6vw, 20px); color: var(--texte-faible); }
.breve-longue p { margin: 14px 0 0; max-width: 62ch; font-weight: 300;
  font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; }
.breve-longue .apres { margin-top: 20px; }
/* Sur la page contact, le bandeau partenaires sépare le formulaire du pied. */
.contact + .partenaires { border-top: 1px solid var(--trait); }

/* -------------------------------------------- Compagnie : portrait, etc. --- */
.portrait { padding-block: var(--section); background: var(--bandeau); }
.portrait .contenu {
  display: grid; gap: clamp(26px, 4vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
.portrait figure { margin: 0; }
.portrait img { width: 100%; height: auto; display: block; aspect-ratio: 3/2; object-fit: cover; object-position: 50% 30%; }
.portrait h2 { margin: 8px 0 0; font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1; }
.portrait p { margin: 16px 0 0; max-width: 56ch; font-weight: 300;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; }
@media (max-width: 900px) { .portrait .contenu { grid-template-columns: 1fr; } }

.parcours { padding-block: var(--section); }
.etapes { margin-top: clamp(22px, 2.8vw, 32px); }
.etape {
  display: grid; gap: 6px 26px; grid-template-columns: 130px minmax(0, 1fr);
  padding: 16px 0; border-top: 1px solid var(--trait);
}
.etape:last-child { border-bottom: 1px solid var(--trait); }
.etape .an { font-family: var(--nao-font-titre); font-size: 13px;
  letter-spacing: .06em; color: var(--accent); }
.etape p { margin: 0; max-width: 62ch; font-weight: 300;
  font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; }
@media (max-width: 620px) { .etape { grid-template-columns: 1fr; } }

.equipe { padding-block: var(--section); background: var(--bandeau); }
.grille-artistes {
  margin-top: clamp(22px, 2.8vw, 32px); display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.artiste { padding-top: 16px; border-top: 2px solid var(--accent); }
.artiste .nom { margin: 0; font-family: var(--nao-font-titre);
  font-size: clamp(17px, 1.7vw, 21px); }
.artiste .role { margin: 6px 0 0; font-weight: 300; font-size: 15px; color: var(--texte-faible); }

/* -------------------------------------------------------------- Films --- */
.films { padding-block: 0 var(--section); }
.grille-films {
  display: grid; gap: clamp(20px, 2.6vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.film { display: block; text-decoration: none; color: var(--texte); }
.film .cadre { display: block; width: 100%; padding: 0; border: 0; overflow: hidden; background: var(--nao-noir);
  aspect-ratio: 19/10; cursor: pointer; font: inherit; color: inherit; }
.film .cadre.sans-video { cursor: default; }
.film .cadre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.film img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 620ms var(--courbe); }
.film:hover img { transform: scale(1.05); }
.film .nom { display: block; margin: 16px 0 0; font-weight: 400; font-family: var(--nao-font-titre);
  font-size: clamp(19px, 1.9vw, 24px); transition: color var(--duree) var(--courbe); }
.film:hover .nom { color: var(--accent); }
.film .resume { display: block; margin-top: 10px; font-weight: 300;
  font-size: 16px; line-height: 1.55; color: var(--texte-faible); }
/* Une petite icône de lecture, semi-transparente, dans le coin de l'image —
   elle remplace le libellé « Voir le film ». Pleine au survol. */
.film .lecture-sur-image {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  color: #FFFFFF; opacity: .72;
  transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.film .lecture-sur-image .lecture { width: 34px; height: 34px; }
.film .lecture-sur-image circle { fill: rgba(20, 18, 16, .34); }   /* lisible sur une image claire */
.film:hover .lecture-sur-image { opacity: 1; transform: scale(1.06); }
/* Film sans vignette : le titre dans le cadre sombre, en crème. */
.film .cadre { position: relative; }
.film .sans-image {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px;
  font-family: var(--nao-font-titre); font-size: clamp(18px, 1.8vw, 24px);
  color: var(--nao-creme); line-height: 1.1;
}
/* L'aperçu animé recouvre la vignette ; invisible tant qu'il ne joue pas. */
.film .apercu {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 500ms var(--courbe);
}
.film .apercu.joue { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .film .apercu { display: none; } }

/* --------------------------------------------------- Actions culturelles --- */
.bandeau-large { padding-block: 0 var(--section-courte); }
.bandeau-large figure { margin: 0; }
.bandeau-large img { width: 100%; height: auto; display: block; }
.ateliers { padding-block: 0 var(--section); }
.atelier {
  display: grid; gap: clamp(20px, 3vw, 52px);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
  padding-block: var(--section-courte); border-top: 1px solid var(--trait);
}
.atelier .intitule h2 { margin: 0; position: sticky; top: calc(var(--entete) + 34px);
  font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.08; }
.atelier .colonne p { margin: 0 0 18px; max-width: 60ch; font-weight: 300;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; }
.refs { margin-top: 26px; }
.ref { display: grid; gap: 4px 22px; grid-template-columns: 160px minmax(0, 1fr);
  padding: 13px 0; border-top: 1px solid var(--trait); }
.ref:last-child { border-bottom: 1px solid var(--trait); }
.ref .an { font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ref .nom { display: block; font-size: 16px; }
.ref .ou { display: block; margin-top: 3px; font-weight: 300; font-size: 15px;
  color: var(--texte-faible); }
@media (max-width: 860px) {
  .atelier { grid-template-columns: 1fr; }
  .atelier .intitule h2 { position: static; }
  .ref { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Contact --- */
.contact { padding-block: 0 var(--section); }
.contact .contenu {
  display: grid; gap: clamp(28px, 4vw, 60px); align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}
.formulaire { display: grid; gap: 18px; }
.piege { position: absolute; left: -9999px; opacity: 0; }
.obligatoire { margin: 0; font-size: 14px; color: var(--texte-faible); }
.champ { display: grid; gap: 7px; }
.champ label { font-family: var(--nao-font-titre); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texte-faible); }
.champ label span { color: var(--accent); }
.champ input, .champ textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--trait);
  background: var(--page); color: var(--texte);
  font-family: inherit; font-size: 16px; font-weight: 300;
  transition: border-color var(--duree) var(--courbe);
}
.champ textarea { resize: vertical; line-height: 1.5; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--accent); }
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-faible); opacity: .75; }
.formulaire .bouton { justify-self: start; }
.retour { margin: 0; min-height: 1.4em; font-size: 16px; }
.retour.ok { color: var(--accent); }
.retour.erreur { color: var(--nao-rouge); }
.coordonnees h2 { margin: 0; font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(21px, 2.1vw, 26px); }
.coordonnees h3 { margin: 26px 0 8px; font-family: var(--nao-font-titre);
  font-weight: 400; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-faible); }
.coordonnees .courriel { margin: 14px 0 0; font-size: clamp(16px, 1.6vw, 19px); }
.coordonnees a { color: var(--accent); text-decoration: none; }
.coordonnees a:hover { text-decoration: underline; }
.coordonnees address { font-style: normal; font-weight: 300; line-height: 1.6; }
.coordonnees address span { display: block; }
.coordonnees p { margin: 0 0 7px; font-weight: 300; }
.coordonnees .reseau { display: inline-flex; align-items: center; gap: 10px; }
.coordonnees .reseau svg { width: 20px; height: 20px; flex: none; color: var(--texte); transition: transform var(--duree) var(--courbe); }
.coordonnees .reseau:hover svg { transform: translateY(-1px); }
.coordonnees svg { vertical-align: middle; }
@media (max-width: 860px) { .contact .contenu { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- Mentions légales --- */
.legal { padding-block: 0 var(--section); }
.legal .contenu { max-width: 70ch; }
.bloc-legal { margin-bottom: clamp(26px, 3vw, 40px); }
.bloc-legal h2 { margin: 0 0 12px; font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(20px, 2.1vw, 26px); }
.bloc-legal p { margin: 0 0 12px; font-weight: 300;
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; }

/* ------------------------------------------------------- Menu mobile --- */
/* Le panneau n'existe que sous le seuil de repli : au-delà, le menu est
   dans l'entête et ce bloc reste masqué quoi qu'il arrive. */
.menu-mobile { display: none; }
@media (max-width: 1240px) {
  .menu-mobile {
    display: block; border-top: 1px solid var(--trait);
    background: var(--page);
  }
  .menu-mobile[hidden] { display: none; }
  .menu-mobile nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px clamp(20px, 5vw, 48px) 22px;
    max-height: calc(100dvh - var(--entete)); overflow-y: auto;
  }
  .menu-mobile a {
    width: 100%; padding: 15px 0; border-bottom: 1px solid var(--trait);
    font-family: var(--nao-font-titre); font-size: 18px; text-transform: none;
    text-decoration: none; color: var(--texte);
  }
  .menu-mobile a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
}
/* Les trois points du burger deviennent une croix quand le menu est ouvert. */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(5px); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateX(-5px); }
.burger span { transition: transform var(--duree) var(--courbe); }

/* ------------------------------------------- Newsletter et partenaires --- */
/* Deux blocs repris de son site actuel : ne pas les retirer. */
.newsletter { padding-block: var(--section); background: var(--bandeau); }
.newsletter .contenu {
  display: grid; gap: clamp(20px, 3vw, 48px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.newsletter h2 { margin: 0; font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.08; }
.newsletter .texte p { margin: 12px 0 0; max-width: 42ch; font-weight: 300;
  font-size: clamp(16px, 1.5vw, 19px); }
.inscription label { display: block; margin-bottom: 7px;
  font-family: var(--nao-font-titre); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-faible); }
.inscription label span { color: var(--accent); }
.inscription .ligne { display: flex; flex-wrap: wrap; gap: 10px; }
.inscription input[type="email"] {
  flex: 1 1 220px; min-width: 0; padding: 13px 15px;
  border: 1px solid var(--trait); background: var(--page); color: var(--texte);
  font-family: inherit; font-size: 16px; font-weight: 300;
  transition: border-color var(--duree) var(--courbe);
}
.inscription input[type="email"]:focus { outline: none; border-color: var(--accent); }
.inscription .bouton { flex: none; }
@media (max-width: 860px) { .newsletter .contenu { grid-template-columns: 1fr; } }

.partenaires { padding-block: var(--section-courte) var(--section); }
.partenaires .logos {
  list-style: none; margin: clamp(18px, 2.2vw, 28px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(22px, 3.4vw, 48px);
}
.partenaires .logos img {
  height: 46px; width: auto; display: block;
  /* Les logos sont de styles très différents : on les apaise au repos. */
  filter: grayscale(1); opacity: .62;
  transition: filter var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}
.partenaires .logos li:hover img { filter: none; opacity: 1; }
/* En thème sombre, des logos noirs sur fond noir disparaîtraient. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) .partenaires .logos img { filter: grayscale(1) invert(1); }
  :root:not([data-theme='clair']) .partenaires .logos li:hover img { filter: invert(1); }
}
:root[data-theme='sombre'] .partenaires .logos img { filter: grayscale(1) invert(1); }
:root[data-theme='sombre'] .partenaires .logos li:hover img { filter: invert(1); }


/* ==========================================================================
   Animations. Trois gestes, pas davantage — et tous suspendus si le visiteur
   a demandé « mouvement réduit » dans son système.
   ========================================================================== */

/* 1. Le logo se trace de gauche à droite à l'arrivée sur l'accueil.
      Un balayage plutôt qu'un vrai tracé : les lettres du SVG sont des aplats,
      pas des traits, on ne peut pas les dessiner au stylo. */
@keyframes tracer { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* L'animation n'est portée que par une classe posée en JavaScript, et retirée
   dès qu'elle finit — ou au bout d'1,6 s si elle n'a jamais démarré. Sans ce
   garde-fou, un navigateur qui gèle les animations laisserait le logo masqué. */
.entete .tracer { animation: tracer 900ms cubic-bezier(.22, 1, .36, 1) both; }

/* 2. La photo du bandeau respire : 4 % en vingt secondes, imperceptible mais
      la page cesse d'être figée. */
@keyframes respirer { from { transform: scale(1); } to { transform: scale(1.045); } }
.heros-accueil.video-active .fond img { animation: none; }
.heros-accueil .fond img {
  animation: respirer 22s cubic-bezier(.33, 0, .2, 1) 300ms both;
  will-change: transform;
}

/* 3. Le tri du répertoire : les cartes retenues réapparaissent en cascade. */
@keyframes entrer {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.carte.entre, .liste-sobre li.entre {
  animation: entrer 420ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--d, 0ms);
}


@media (prefers-reduced-motion: reduce) {
  .entete .tracer,
  .heros-accueil .fond img,
  .carte.entre, .liste-sobre li.entre { animation: none; }
}

/* L'entête est la même sur toutes les pages, accueil compris : fond clair,
   texte noir. On simplifie (décision d'Antonin, 23 octobre au soir). */

/* Icônes des familles de lieux : une version par thème, comme le logo. En sombre,
   les traits sont en crème et les pastilles gardent leurs vraies couleurs — un
   simple invert() les aurait fait virer au cyan et à l'orange. */
.famille .icone-sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) .famille .icone-clair  { display: none; }
  :root:not([data-theme='clair']) .famille .icone-sombre { display: block; }
}
:root[data-theme='sombre'] .famille .icone-clair  { display: none; }
:root[data-theme='sombre'] .famille .icone-sombre { display: block; }
:root[data-theme='clair']  .famille .icone-clair  { display: block; }
:root[data-theme='clair']  .famille .icone-sombre { display: none; }

/* Entre deux sections de même fond, un seul pas d'espacement et non deux :
   chacune portait son padding haut et bas, l'écart doublait. */
.familles { padding-bottom: var(--section-courte); }
.familles + .voir-aussi { padding-block: var(--section-courte); }
.voir-aussi + .breves-accueil { padding-top: var(--section-courte); }
.voir-aussi .apres-grille, .breves-accueil .apres-grille { margin-top: clamp(20px, 2.4vw, 30px); }

/* ---------------------------------------------------------- Visionneuse --- */
/* Le lecteur dans la page, sur le modèle du site d'Antonin : fond sombre, cadre
   16/9 centré, précédent / suivant, compteur, Échap pour fermer. L'iframe n'est
   créée qu'à l'ouverture et détruite à la fermeture : rien ne se charge avant. */
.visionneuse { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(14, 13, 12, .94); padding: 24px; }
.visionneuse[hidden] { display: none; }
.vis-cadre { width: min(1200px, 100%); }
.vis-lecteur { aspect-ratio: 16/9; background: #000; }
.vis-lecteur iframe { width: 100%; height: 100%; border: 0; display: block; }
.vis-legende { display: flex; justify-content: space-between; gap: 16px; margin: 14px 2px 0;
  font-family: var(--nao-font-titre); color: var(--nao-creme); font-size: 15px; }
.vis-compteur { color: rgba(254, 236, 199, .6); font-variant-numeric: tabular-nums; }
.vis-fermer, .vis-nav { position: absolute; display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid rgba(254, 236, 199, .35); border-radius: 999px; background: transparent; color: var(--nao-creme);
  cursor: pointer; transition: border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
.vis-fermer:hover, .vis-nav:hover { border-color: var(--nao-creme); transform: scale(1.06); }
.vis-fermer { top: 20px; right: 20px; }
.vis-nav { top: 50%; transform: translateY(-50%); }
.vis-nav:hover { transform: translateY(-50%) scale(1.06); }
.vis-prec { left: 20px; } .vis-suiv { right: 20px; }
body.is-bloque { overflow: hidden; }
@media (max-width: 760px) {
  .visionneuse { padding: 64px 12px 24px; align-items: start; }
  .vis-nav { top: auto; bottom: 18px; transform: none; } .vis-nav:hover { transform: scale(1.06); }
  .vis-prec { left: 16px; } .vis-suiv { right: 16px; }
}

/* --------------------------------------------------------- Page d'un film ----
   Sur le modèle de bettercall-ra.com : la fenêtre d'abord, le titre dessous,
   centré et sobre, puis les photogrammes, puis le film suivant. */
.film-fenetre { padding-top: clamp(16px, 2.4vw, 32px); }
.film-fenetre .lecteur img { opacity: .82; }
.film-fenetre .lecteur.sans-video { cursor: default; display: block; margin: 0; }
.film-fenetre .lecteur.sans-video img { opacity: .9; }
/* Deux colonnes, comme sur bettercall-ra : quatre photogrammes font deux rangs pleins. */
@media (min-width: 640px) { .film-galerie .grille { grid-template-columns: repeat(2, 1fr); } }
.film-galerie figure { aspect-ratio: 16/9; }
.film-tete { text-align: center; padding-block: clamp(30px, 4vw, 56px) var(--section); }
.film-tete h1 { margin: 12px auto 0; font-family: var(--nao-font-titre); font-weight: 400;
  font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -.01em; max-width: 20ch; }
.film-tete .chapo { margin: 22px auto 0; max-width: 62ch; font-weight: 300; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; }
.film-suite { border-top: 1px solid var(--trait); padding-block: var(--section-courte); }
.film-suite .contenu { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.film-suite a { display: grid; gap: 4px; text-decoration: none; }
.film-suite .suiv { text-align: right; }
.film-suite .sens { font-family: var(--nao-font-titre); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-faible); }
.film-suite .nom { font-family: var(--nao-font-titre); font-size: clamp(16px, 1.5vw, 20px); position: relative; }
.film-suite a:hover .nom { color: var(--accent); }
.film-suite .tous { font-family: var(--nao-font-titre); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 18px; border: 1px solid var(--trait); border-radius: 999px; }
.film-suite .tous:hover { border-color: var(--texte); }
.film .nom a { text-decoration: none; color: inherit; }
@media (max-width: 640px) {
  .film-suite .contenu { grid-template-columns: 1fr 1fr; }
  .film-suite .tous { grid-column: 1 / -1; justify-self: center; order: 3; }
}