/* ============================================================
   Zinéma — feuille de style unique, écrite à la main (pas de
   build, pas de préprocesseur). Toutes les valeurs (couleurs,
   espacements, tailles) reprennent exactement le design existant.
   ============================================================ */

/* Police unique du site : Aileron (proche d'Akzidenz-Grotesk),
   hébergée localement. Quatre graisses seulement :
   400 = texte courant · 700 = liens & étiquettes ·
   800 = valeurs & boutons · 900 = titres. */
@font-face {
  font-family: "Aileron";
  src: url("../fonts/Aileron-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/Aileron-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/Aileron-Heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/Aileron-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Aileron", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Aileron", "Helvetica Neue", Arial, sans-serif;
  --ink: #100f0c;
  /* Le « papier » du site : un gris clair neutre (référence
     publicrecords.nyc) — toute la surface du site, cases comprises. */
  --paper: #ededed;
  --red: #c22a1d;
  --blue: #2f49c2;
  --jaune: #f7c600;
  /* Le vert du billet : un vert fougère profond. C'est la seule
     couleur du site qui a un sens fixe — elle ne sert qu'à acheter
     un billet, nulle part ailleurs.
     Les deux valeurs ont exactement la même teinte et la même
     saturation : seule la luminosité change, pour que le survol se
     lise comme le même vert qui s'assombrit, jamais comme une
     autre couleur. Le blanc dessus tient largement le contraste
     (8,2:1 au repos, 11,7:1 au survol). */
  --vert: #275a1b;
  --vert-fonce: #1b4014;
  /* Le rose fluo : la seule couleur du site qui ne vienne pas du
     tirage au sort des cases. Elle ne sert qu'au survol de deux
     choses, le logo en haut et la signature de l'agence en bas —
     les deux bornes de la page.

     Le texte posé dessus est l'encre du site, pas du blanc : noir
     sur ce rose tient 5,8:1, blanc n'en tiendrait que 3,7 et
     passerait sous le seuil de lisibilité. */
  --rose-fluo: #ff00a0;
  /* Le trait du site. Il n'y en a qu'un : la même épaisseur pour
     TOUS les traits, partout — le quadrillage des tableaux, la
     barre de navigation, le pied de page, les cases de l'accueil,
     les pastilles d'horaire. Changer ce seul chiffre change tout
     le site d'un coup.

     Deuxième règle : deux traits qui se touchent n'en font qu'un.
     Là où deux blocs se rejoignent (la barre de navigation et le
     tableau, le tableau et le pied de page), le bloc du dessous
     remonte d'exactement une épaisseur de trait pour venir se
     poser sur celui du dessus — jamais un trait deux fois plus
     épais à la jonction. */
  --ligne: 4px;
  /* LE format d'affiche du site. Toutes les affiches de film sont
     montrées dans ce même rectangle, partout : sur l'accueil, sur la
     page Films, sur la fiche du film, dans les événements. Une
     affiche livrée dans un autre format est recadrée sur son point
     important (choisi dans le Studio) — jamais deux cases de tailles
     différentes côte à côte. C'est le format des affiches suisses et
     françaises (A0, A1, F4 : 1 sur 1,41). */
  --format-affiche: 1 / 1.41;
  --ease-editorial: cubic-bezier(0.65, 0, 0.35, 1);
  /* Les deux seules tailles de texte du site : titres et tout le reste.
     La hiérarchie se fait avec les graisses, jamais avec la taille. */
  --taille-titre: clamp(2.75rem, 1.5rem + 5.5vw, 6rem);
  --taille-texte: clamp(1.375rem, 1.1rem + 0.75vw, 1.75rem);
  /* Seule exception à ces deux tailles : la barre de navigation.
     Six rubriques + le logo doivent tenir sur une ligne dès
     1200px de large ; elle grandit ensuite avec l'écran et
     rejoint la taille courante du site sur les grands moniteurs. */
  --taille-nav: clamp(1.3rem, 0.7rem + 0.85vw, 1.75rem);
}

* {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   Les quatre couleurs Mondrian, tirées au hasard
   ------------------------------------------------------------
   Aucune couleur n'a de signification : couleurs.js pose une de
   ces quatre classes au hasard sur chaque case, à chaque
   affichage. La classe ne peint rien elle-même — elle renseigne
   trois variables que les feuilles de style utilisent ensuite :
     --case-fond   : la couleur de remplissage (au survol)
     --case-texte  : le texte lisible sur ce fond
     --case-accent : la même couleur en version « texte sur
                     papier » (le jaune y est assombri, illisible
                     sinon sur fond clair).
   Le vert du bouton d'achat ne fait pas partie du tirage. */
.c-rouge { --case-fond: var(--red);   --case-texte: #fff;      --case-accent: var(--red); }
.c-bleu  { --case-fond: var(--blue);  --case-texte: #fff;      --case-accent: var(--blue); }
.c-noir  { --case-fond: var(--ink);   --case-texte: var(--paper); --case-accent: var(--ink); }
.c-jaune { --case-fond: var(--jaune); --case-texte: var(--ink);   --case-accent: #8a6d00; }

/* Une case « teintée » se remplit de sa couleur au survol. */
.m-teinte {
  transition: background 0.2s ease-out, color 0.2s ease-out;
}
.m-teinte:hover,
.m-teinte:focus-visible {
  background: var(--case-fond);
  color: var(--case-texte);
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
  /* Caractères agrandis sur tout le site (clientèle âgée) :
     toutes les tailles en rem grossissent proportionnellement. */
  font-size: 112.5%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Le corps du site occupe toujours au moins toute la hauteur
   visible, et le contenu pousse le pied de page vers le bas : sur
   une page courte (un jour d'agenda avec deux séances, une page
   d'histoire encore vide), le pied de page se cale au bas de
   l'écran au lieu de flotter au milieu. Sur une page longue, il
   reprend sa place normale, à la suite du contenu.
   L'en-tête et le menu plein écran sont en position fixe : ils ne
   participent pas à cet empilement. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

h1, h2, h3, p, ul, ol, blockquote, figure {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
::selection {
  background: var(--ink);
  color: var(--paper);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--paper);
}
/* Seul « trait » du site à ne pas valoir --ligne, et ce n'en est
   pas un : ces 2px de papier ne dessinent rien, ils affinent le
   curseur à l'intérieur de sa glissière de 10px. À --ligne, il ne
   resterait qu'un filet de 2px à saisir. */
::-webkit-scrollbar-thumb {
  background: var(--ink);
  border: 2px solid var(--paper);
}

/* Sur le site actuel, tout élément en "font-display" garde toujours cet
   espacement des lettres (-0.01em), même quand un espacement plus large
   est aussi défini sur le même élément (comportement du site en ligne
   aujourd'hui, reproduit ici à l'identique pour ne rien changer au rendu). */
.font-display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
}
.stroke-text {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
}
@media (min-width: 1080px) {
  .stroke-text { -webkit-text-stroke: 2px var(--ink); }
}

.underline-hover {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--ease-editorial);
}
.underline-hover:hover { background-size: 100% 1px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   En-tête + menu plein écran
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Hauteur fixe : le contenu des pages se cale pile dessous. */
  height: 3.5rem;
  padding: 0.75rem 1rem;
  border-bottom: var(--ligne) solid var(--ink);
  background: var(--paper);
}
@media (min-width: 768px) {
  .site-header {
    height: 4.5rem;
    padding: 1rem 2rem;
  }
}

/* Le logo ramène à l'accueil. Au survol, sa case se remplit de rose
   fluo — comme la signature de l'agence tout en bas : les deux
   bornes de la page réagissent de la même façon. */
.site-header__logo {
  display: flex;
  position: relative;
  z-index: 10;
  align-items: center;
  gap: 0.75rem;
  transition: background 0.2s ease-out;
}
.site-header__logo:hover,
.site-header__logo:focus-visible {
  background: var(--rose-fluo);
}
.site-header__logo img { height: 2rem; width: auto; }
@media (min-width: 768px) {
  .site-header__logo img { height: 2.5rem; }
}

/* Le bouton du menu n'est plus qu'un carré : plus de mot à côté,
   donc plus de typographie ni d'espacement à régler ici. */
.menu-toggle {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
}
.menu-toggle__box {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* Même épaisseur de trait que les pastilles du site. */
  border: var(--ligne) solid var(--ink);
}
.menu-toggle__bar {
  height: 2px;
  width: 1.125rem;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.3s var(--ease-editorial);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar--1 { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar--2 { transform: translateY(-3.5px) rotate(-45deg); }

/* ------------------------------------------------------------
   Barre de navigation en cases (ordinateur uniquement).
   Sur mobile et tablette, le menu plein écran reste en place.
   Chaque case se remplit de sa couleur primaire au survol ;
   la case de la page courante est inversée (noir sur blanc).
   ------------------------------------------------------------ */
.nav-bar { display: none; }

/* En dessous de 1200px, les six cases ne tiennent pas en gros
   caractères : le menu plein écran reste alors en service. */
@media (min-width: 1200px) {
  .menu-toggle { display: none; }
  .main-nav { display: none; }

  .site-header {
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--paper);
    border-bottom: var(--ligne) solid var(--ink);
  }
  .site-header__logo {
    display: flex;
    /* Le logo garde ses proportions, quoi qu'il arrive. */
    flex-shrink: 0;
    padding: 0 1.5rem;
  }

  .nav-bar {
    display: flex;
    flex: 1;
    border-left: var(--ligne) solid var(--ink);
  }
  .nav-bar__list {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav-bar__item {
    display: flex;
    flex: 1 0 auto;
  }
  .nav-bar__item + .nav-bar__item {
    border-left: var(--ligne) solid var(--ink);
  }
  .nav-bar__link {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    /* Six rubriques à loger : le calage horizontal est plus serré
       que sur les cases du tableau. */
    padding: 0 0.75rem;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: var(--taille-nav);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--ink);
    transition: background 0.2s ease-out, color 0.2s ease-out;
  }
  /* Le remplissage au survol vient de .m-teinte (couleur tirée au
     hasard) ; la case de la page courante, elle, reste noire. */
  .nav-bar__link[aria-current="page"],
  .nav-bar__link[aria-current="page"]:hover {
    background: var(--ink);
    color: var(--paper);
  }
}

.main-nav {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--ink);
  color: var(--paper);
  padding: 6rem 1rem 2rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s var(--ease-editorial);
  visibility: hidden;
}
.main-nav.is-open {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
}
@media (min-width: 768px) {
  .main-nav { padding: 8rem 2.5rem 3rem; }
}

.main-nav__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}
@media (min-width: 768px) { .main-nav__list { gap: 0.5rem; } }

.main-nav__item {
  border-bottom: var(--ligne) solid rgba(255, 255, 255, 0.15);
  padding: 0.5rem 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s var(--ease-editorial), transform 0.5s var(--ease-editorial);
}
.main-nav.is-open .main-nav__item { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) { .main-nav__item { padding: 0.75rem 0; } }

.main-nav__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 900;
  font-size: var(--taille-titre);
  line-height: 0.9;
}
.main-nav__link-label {
  display: inline-block;
  transition: transform 0.3s var(--ease-editorial);
}
.main-nav__link:hover .main-nav__link-label { transform: translateX(0.75rem); }
@media (min-width: 768px) {
  .main-nav__link:hover .main-nav__link-label { transform: translateX(1.5rem); }
}
.main-nav__link-num {
  display: none;
  font-weight: 400;
  font-size: var(--taille-texte);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) { .main-nav__link-num { display: block; } }

.main-nav__footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: var(--ligne) solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
  font-weight: 400;
  font-size: var(--taille-texte);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 768px) {
  .main-nav__footer { flex-direction: row; align-items: center; justify-content: space-between; }
}
.main-nav__footer a { color: var(--paper); }

/* Le contenu s'étire pour occuper la hauteur restante : c'est lui
   qui repousse le pied de page en bas de l'écran. */
.main-area { flex: 1 0 auto; }

/* Le contenu se cale exactement sous l'en-tête fixe. Toutes les
   pages du site (sauf l'accueil, qui n'a pas de barre) sont des
   tableaux : leur quadrillage remonte d'une épaisseur de trait
   pour venir se poser sur celui de la barre de navigation — un
   seul trait à la jonction, jamais deux. */
body:not([data-page="home"]) .main-area {
  padding-top: calc(3.5rem - var(--ligne));
}
@media (min-width: 768px) {
  body:not([data-page="home"]) .main-area {
    padding-top: calc(4.5rem - var(--ligne));
  }
}

/* Même principe en bas de page : le pied de page remonte d'une
   épaisseur de trait pour que son cadre se confonde avec le bas
   du tableau. Sur une page courte, où du papier les sépare, ce
   décalage ne se voit pas. */
#footer-root {
  margin-top: calc(-1 * var(--ligne));
}

/* ------------------------------------------------------------
   Affiches
   ------------------------------------------------------------ */
.poster {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.poster img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }

/* Les affiches générées sont des visuels (comme une image d'affiche) :
   leurs tailles internes sont proportionnelles à la case et échappent
   à la règle des deux tailles, qui vaut pour le texte du site. */
.generated-poster {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.generated-poster--0 { background: var(--ink); color: var(--paper); }
.generated-poster--0 .gp-row { display: flex; flex: 1; align-items: stretch; justify-content: space-between; padding: 1rem; }
.generated-poster--0 .gp-year { font-size: 0.6875rem; letter-spacing: -0.01em; opacity: 0.7; }
.generated-poster--0 .gp-title { writing-mode: vertical-rl; font-weight: 900; font-size: clamp(2.2rem, 10vw, 4.5rem); line-height: 0.85; letter-spacing: -0.01em; word-break: break-word; }
.generated-poster--0 .gp-director { border-top: var(--ligne) solid rgba(255,255,255,0.25); padding: 1rem; font-size: 0.625rem; letter-spacing: -0.01em; opacity: 0.7; }

.generated-poster--1 { border: var(--ligne) solid rgba(16,15,12,0.7); background: var(--paper); color: var(--ink); }
.generated-poster--1 .gp-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem; font-size: 0.625rem; letter-spacing: -0.01em; }
.generated-poster--1 .gp-mid { display: flex; flex: 1; align-items: center; justify-content: center; padding: 1rem; text-align: center; }
.generated-poster--1 .gp-mid span { font-weight: 900; font-size: clamp(2rem, 9vw, 4rem); line-height: 0.86; word-break: break-word; }
.generated-poster--1 .gp-bar { height: 0.5rem; background: var(--ink); }

.generated-poster--2 { background: var(--red); color: var(--paper); }
.generated-poster--2 .gp-clip { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(0 55%, 100% 30%, 100% 100%, 0% 100%); }
.generated-poster--2 .gp-top { position: relative; z-index: 1; padding: 1rem; font-size: 0.625rem; letter-spacing: -0.01em; }
.generated-poster--2 .gp-title { position: relative; z-index: 1; margin-top: auto; padding: 1rem; font-weight: 900; font-size: clamp(1.9rem, 8.5vw, 3.6rem); line-height: 0.86; word-break: break-word; }

.generated-poster--3 { background: var(--blue); color: var(--paper); }
.generated-poster--3 .gp-title { padding: 1rem; font-weight: 900; font-size: clamp(1.9rem, 8.5vw, 3.6rem); line-height: 0.86; word-break: break-word; }
.generated-poster--3 .gp-bottom { display: flex; margin-top: auto; align-items: flex-end; justify-content: space-between; gap: 0.75rem; padding: 1rem; }
.generated-poster--3 .gp-director { font-size: 0.625rem; letter-spacing: -0.01em; }
.generated-poster--3 .gp-year { display: flex; height: 3.5rem; width: 3.5rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--ink); font-size: 0.6875rem; }

.generated-poster--4 { background: var(--ink); color: var(--paper); }
.generated-poster--4 .gp-frame { margin: 0.75rem; display: flex; flex: 1; flex-direction: column; border: var(--ligne) solid rgba(255,255,255,0.4); padding: 1rem; }
.generated-poster--4 .gp-spacer { flex: 1; }
.generated-poster--4 .gp-title { font-weight: 900; font-size: clamp(1.8rem, 8vw, 3.4rem); line-height: 0.86; word-break: break-word; }
.generated-poster--4 .gp-bottom { display: flex; margin-top: 0.75rem; justify-content: space-between; gap: 0.75rem; border-top: var(--ligne) solid rgba(255,255,255,0.3); padding-top: 0.5rem; font-size: 0.625rem; letter-spacing: -0.01em; opacity: 0.8; }

/* ------------------------------------------------------------
   Accueil — canevas d'affiches
   ------------------------------------------------------------ */
/* Le mur : des affiches qui flottent sur fond blanc, séparées par
   de larges espaces — comme des cadres accrochés à un mur. Les
   espaces sont définis dans home.js (gap).
   Le mur occupe tout l'écran SOUS la barre de navigation, qui est
   fixe : le défilement passe donc dessous, il ne la recouvre
   jamais. Les deux hauteurs suivent celle de .site-header. */
.home-canvas {
  position: fixed;
  inset: 3.5rem 0 0 0;
  z-index: 0;
  overflow: hidden;
  background: var(--paper);
}
@media (min-width: 768px) {
  .home-canvas { inset: 4.5rem 0 0 0; }
}
/* Flèche d'invitation au défilement : une petite case blanche qui
   rebondit doucement en bas de l'écran, dans le langage du tableau.
   Elle disparaît au premier défilement (classe posée par home.js). */
.home-scroll-cue {
  pointer-events: none;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(16, 15, 12, 0.25);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--ink);
  animation: scroll-cue-bounce 2s ease-in-out infinite;
  transition: opacity 0.4s ease-out;
}
.home-scroll-cue.is-hidden { opacity: 0; }
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-0.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .home-scroll-cue { animation: none; }
}

.home-canvas__scroll {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.home-canvas__track { position: relative; width: 100%; }
.home-canvas__stage { transform-origin: top left; }
.home-canvas__copy { position: absolute; left: 0; }
.home-canvas__slot { position: absolute; }

/* Une case du mur : rien que l'affiche. Le titre y figure déjà,
   dessiné par le distributeur, souvent mieux que nous ne saurions
   l'écrire — le répéter en dessous doublait l'information et
   volait de la place à l'image. */
.canvas-poster {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: var(--ink);
}
.canvas-poster__image {
  position: relative;
  display: block;
  flex: 1;
  /* Sans cette ligne, l'image imposerait sa hauteur naturelle au
     lieu de se plier à celle de la case. */
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}
/* Les cases sont taillées au ratio des affiches ; `cover` garantit
   zéro liséré blanc, même si une affiche dévie un peu. Au survol,
   l'affiche grossit dans son cadre — la grille, elle, ne bouge pas. */
.canvas-poster .poster img {
  object-fit: cover;
  transition: transform 0.4s var(--ease-editorial);
}
.canvas-poster:hover .poster img { transform: scale(1.04); }
.canvas-poster__plus {
  pointer-events: none;
  position: absolute;
  right: 0.375rem;
  top: 0.375rem;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--paper);
  font-weight: 700;
  font-size: var(--taille-texte);
  box-shadow: 0 1px 4px rgba(16, 15, 12, 0.25);
  opacity: 0;
  transition: opacity 0.2s;
}
.canvas-poster:hover .canvas-poster__plus { opacity: 1; }

/* Case de secours (aucun film avec affiche) : le mur reste plein. */
.canvas-block {
  height: 100%;
  width: 100%;
  background: var(--paper);
  border: var(--ligne) solid var(--ink);
}

/* La page Agenda est un tableau Mondrian comme le reste du
   site : sa mise en page vit dans agenda-mondrian.css. */

/* La page Histoire est un tableau Mondrian comme le reste du
   site : sa mise en page vit dans histoire-mondrian.css. */

/* La page Contact est un tableau Mondrian comme le reste du
   site : sa mise en page vit dans contact-mondrian.css. */

/* ------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------ */
/* Le pied de page est lui aussi un tableau : des cases blanches
   séparées par les mêmes traits noirs que le reste du site, et les
   mêmes couleurs tirées au hasard au survol.

   Une seule suite de cases, sans rangées imposées : chacune se cale
   sur la longueur de son texte et la suite se replie toute seule
   selon la largeur de l'écran — une ligne sur ordinateur, trois ou
   quatre sur mobile. Aucune case ne se retrouve seule sur sa ligne
   par construction, elles se regroupent au mieux.

   Il ne reprend aucune rubrique du site (voir footer.js) : la
   navigation est ailleurs. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ligne);
  background: var(--ink);
  border: var(--ligne) solid var(--ink);
}

.site-footer__lien,
.site-footer__case {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 1rem;
  background: var(--paper);
  font-size: var(--taille-texte);
  line-height: 1.35;
}
.site-footer__lien {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.site-footer__case { font-weight: 700; }

/* Sur mobile, chaque case du pied de page prend toute la largeur :
   à hauteur de case égale au reste du site, le colophon occupait
   plus de la moitié de l'écran. Il se resserre donc — c'est un
   pied de page, pas du contenu : le texte y garde sa taille, seul
   le calage se réduit. */
@media (max-width: 767px) {
  .site-footer__lien,
  .site-footer__case {
    padding: 0.6rem 1rem;
  }
}

/* La signature de l'agence : une case comme les autres, même
   graisse que ses voisines. Elle ne s'en distingue que d'une
   façon — c'est la seule case du site, avec le logo, qui échappe
   au tirage des couleurs : elle se remplit de rose fluo au survol. */
.site-footer__signature {
  transition: background 0.2s ease-out, color 0.2s ease-out;
}
.site-footer__signature:hover,
.site-footer__signature:focus-visible {
  background: var(--rose-fluo);
  color: var(--ink);
}

/* ============================================================
   États d'une page : chargement, rubrique vide, erreur.

   Le site n'affiche plus jamais de contenu d'exemple pour combler
   un vide : il dit ce qu'il en est. Ces trois messages reprennent
   le trait et le gris du reste du site.
   ============================================================ */
.etat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
  padding: 2rem 1.25rem;
  border: var(--trait) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  max-width: 42rem;
}
.etat--chargement {
  /* Rien de clignotant : un simple texte, qui disparaît dès que le
     contenu arrive. */
  opacity: 0.55;
  font-weight: 400;
}
.etat--erreur {
  border-color: var(--red);
  color: var(--red);
}

/* Le paragraphe d'introduction d'une page, réglé dans Sanity
   (« Pages du site → Textes des pages »). */
.m-intro {
  font-size: 1.05rem;
  line-height: 1.5;
}

/* La liste d'avantages d'une formule d'abonnement. Elle s'écrit
   exactement comme le paragraphe juste au-dessus : même fonte, même
   corps, même graisse. Elle était plus petite, ce qui la faisait
   passer pour une note de bas de page alors qu'elle dit l'essentiel
   — ce que la formule donne droit. */
.m-formule__avantages {
  margin: 0.5rem 0 0;
  /* Aucun retrait et aucune puce : les avantages commencent au même
     bord que le titre, le prix et le paragraphe au-dessus d'eux. Le
     retrait par défaut des listes les décalait vers la droite, seuls
     de leur case à ne pas être alignés. */
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.45;
}
.m-formule__avantages li {
  margin-bottom: 0.2rem;
}

/* Les affiches des films rattachés à un événement. */
.m-bande--une-films {
  display: flex;
  flex-wrap: wrap;
}
.m-annonce__film {
  flex: 0 0 auto;
  width: clamp(6rem, 18vw, 10rem);
}

/* Les coordonnées bancaires : une ligne par information, pour
   qu'un IBAN reste lisible et copiable. */
.m-banque__ligne {
  margin: 0;
}
.m-banque__ligne + .m-banque__ligne {
  margin-top: 0.15rem;
}