/* ============================================================
   Zinéma — page Films en tableau « Mondrian ».
   S'appuie sur film-mondrian.css (quadrillage, cases, affiches) :
   les deux feuilles sont chargées ensemble sur cette page.

   Le tableau commence directement par la rangée de filtres : plus
   aucune page du site ne porte de bandeau de titre. Chaque film
   est ensuite une colonne de cases : l'affiche, le titre, puis ses
   infos sur une seule ligne, dans leur propre case.
   Toutes les affiches ont exactement le même format (voir
   --format-affiche) : les cases de texte absorbent la hauteur
   restante de leur rangée, jamais de trou.
   ============================================================ */

/* ---------- Filtres : des cases-boutons. Leur couleur est tirée
   au hasard : au survol pour les autres, en permanence pour le
   filtre actif. ---------- */

.m-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ligne);
  background: var(--ink);
}
.m-filtre {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--taille-texte);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Le filtre actif se peint de sa couleur Mondrian, et jamais en
   noir — contrairement aux autres marqueurs « ici » du site. La
   rangée de filtres est collée sous la barre de navigation, dont
   la case de la page courante est déjà noire ; comme le trait qui
   sépare les cases est noir lui aussi, deux cases noires qui se
   touchent se soudent en un seul bloc. La couleur est tirée sans
   le noir (voir classeVive dans couleurs.js). */
.m-filtre.is-active,
.m-filtre.is-active:hover {
  background: var(--case-fond);
  color: var(--case-texte);
}

/* ---------- Les films : colonnes de cases.
   Flexbox plutôt que grille : la dernière rangée s'élargit pour
   remplir toute la largeur — jamais de case vide ni de trou noir. */

.m-films {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ligne);
  background: var(--ink);
}
/* Largeur fixe par rangée (jamais de croissance) : toutes les
   colonnes font la même largeur, et comme toutes les affiches ont le
   même format, elles font aussi exactement la même hauteur. */
.m-film {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ligne);
  background: var(--ink);
  min-width: 0;
}
.m-film > * {
  background: var(--paper);
}
/* La case du titre absorbe la hauteur restante de la rangée. */
.m-film__entete {
  flex: 1;
}
.m-film__statut {
  font-weight: 800;
  text-transform: uppercase;
  color: var(--case-accent, var(--ink));
  transition: color 0.2s ease-out;
}
/* Survoler la fiche remplit ses deux cases de texte, chacune de sa
   propre couleur tirée au hasard. */
.m-film:hover .m-cell,
.m-film:focus-visible .m-cell {
  background: var(--case-fond);
  color: var(--case-texte);
}
.m-film:hover .m-film__statut { color: inherit; }
.m-film__titre {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.m-film__real {
  font-weight: 400;
  opacity: 0.75;
}
/* Les repères du film (année, pays, durée, version, âge) tiennent
   sur une seule ligne, dans leur propre case. */
.m-film__infos {
  font-weight: 400;
  overflow-wrap: break-word;
}

/* L'affiche garde le format du site : sa hauteur est celle de la
   colonne, la même pour tous les films de la rangée. */
.m-films .m-affiche {
  flex: none;
}
/* Les films sans affiche ne font pas exception : leur affiche
   typographique occupe exactement la même case. */
.m-films .m-affiche--generee {
  flex: none;
}

/* Case « Agenda complet » : elle ferme le tableau et absorbe
   l'espace restant des rangées incomplètes — jamais de trou noir. */
.m-films-agenda {
  flex: 1 1 22%;
  align-items: flex-end;
  background: var(--paper);
  padding: 1.25rem 1rem;
}

/* ---------- Tablette : deux films par rangée ---------- */

@media (min-width: 768px) {
  .m-film {
    width: calc((100% - var(--ligne)) / 2);
  }
}

/* ---------- Ordinateur : trois films par rangée, quatre sur les
   grands écrans. La case Agenda absorbe l'espace restant de la
   dernière rangée — un film seul ne s'étire jamais sur toute la
   largeur. ---------- */

@media (min-width: 1080px) {
  .m-film {
    width: calc((100% - 2 * var(--ligne)) / 3);
  }
}

@media (min-width: 1440px) {
  .m-film {
    width: calc((100% - 3 * var(--ligne)) / 4);
  }
}