/* ============================================================
   Zinéma — fiche film « Mondrian ».

   Sur mobile, le tableau est une pile de cases pleine largeur.
   Une BANDE horizontale sert à mettre plusieurs cases sur une
   même ligne : dedans, elles se partagent la largeur en fonction
   de la longueur de leur texte — « Suisse » prend moins de place
   que « Comédie dramatique ». Deux films n'ont donc jamais
   exactement la même page.

   Sur ordinateur, la fiche film passe en grille nommée (voir
   .mondrian--film tout en bas) : les cases sont replacées une par
   une, sans jamais laisser de trou noir.

   Une seule couleur a un sens dans tout le site : le vert du
   bouton d'achat. Les quatre couleurs Mondrian (rouge, jaune,
   bleu, noir) sont tirées au hasard sur chaque case à chaque
   affichage (voir couleurs.js et .m-teinte dans style.css).

   Deux tailles de texte seulement (--taille-titre, --taille-texte),
   la hiérarchie se fait par les graisses.
   ============================================================ */

/* ---------- Le tableau : une pile de bandes ---------- */

.mondrian {
  display: flex;
  flex-direction: column;
  gap: var(--ligne);
  background: var(--ink);
  border: var(--ligne) solid var(--ink);
}

.mondrian > * {
  background: var(--paper);
  min-width: 0;
}

/* Une bande = une ligne du tableau. Ses cases ont toutes la même
   hauteur et se partagent la largeur selon leur contenu. */
.m-bande {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--ligne);
  background: var(--ink);
}

/* Par défaut, les cases se partagent toute la largeur de leur
   bande : aucune bande ne se termine par un trou noir. */
.m-bande > * {
  flex: 1 1 auto;
  background: var(--paper);
  min-width: 0;
}
/* Une bande porte le trait noir, jamais le fond papier : c'est un
   conteneur, pas une case. */
.mondrian > .m-bande,
.m-bande .m-bande {
  background: var(--ink);
}

/* ---------- Les cases ---------- */

.m-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  font-size: var(--taille-texte);
  line-height: 1.35;
}

.m-cell__label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.m-cell__value {
  font-weight: 700;
  /* Les mots trop longs pour la case (« Documentaire »,
     « anglais/allemand ») sont coupés avec un trait d'union,
     comme dans un journal — jamais de débordement. */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ---------- Bande titre ---------- */

.m-titre {
  padding: 1.25rem 1rem;
}
.m-titre h1 {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--taille-titre);
  line-height: 0.92;
  overflow-wrap: anywhere;
}
.m-titre__original {
  margin-top: 0.5rem;
  font-size: var(--taille-texte);
  font-weight: 400;
  opacity: 0.6;
}
.m-titre__realisation {
  margin-top: 0.75rem;
  font-size: var(--taille-texte);
  font-weight: 800;
  text-transform: uppercase;
}

/* ---------- L'affiche ----------
   Sur mobile elle occupe toute la largeur et c'est l'image qui
   donne sa hauteur à la case ; sur ordinateur c'est l'inverse,
   la case impose sa hauteur à l'image (voir la grille en bas). */

.m-affiche {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
/* Par défaut la case épouse la hauteur de son image : c'est ce qu'il
   faut pour les visuels d'événement et les photos d'archive, qui ne
   sont pas des affiches et n'ont aucun format imposé. */
.m-affiche .poster {
  height: auto;
}
.m-affiche .poster img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

/* Une AFFICHE DE FILM, elle, a toujours le même format — c'est la
   règle du mur d'affiches : deux films voisins ne font jamais deux
   cases de tailles différentes. L'affiche remplit sa case sans
   jamais être déformée ; si elle n'est pas au format, elle est
   recadrée sur son point important, celui choisi dans le Studio. */
.m-affiche--film {
  aspect-ratio: var(--format-affiche);
}
.m-affiche--film .poster {
  height: 100%;
}
.m-affiche--film .poster img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Sans vraie affiche : l'affiche générée prend exactement le même
   format que les autres. */
.m-affiche--generee {
  aspect-ratio: var(--format-affiche);
}
.m-affiche--generee .generated-poster {
  width: 100%;
  height: 100%;
}

.m-ba {
  gap: 0.75rem;
}
.m-ba__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  padding: 0;
}
.m-ba__media--bouton { cursor: pointer; display: block; }
.m-ba__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m-ba__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 2.6em;
  font-size: var(--taille-texte);
  background: var(--paper);
  color: var(--ink);
  border: var(--ligne) solid var(--ink);
  transition: background 0.2s ease-out, color 0.2s ease-out;
}
.m-ba__media--bouton:hover .m-ba__play,
.m-ba__media--bouton:focus-visible .m-ba__play {
  background: var(--ink);
  color: #fff;
  border-color: #fff;
}
.m-ba__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ---------- Les informations générales : une info = une case ----------
   Elles ouvrent la fiche, juste sous le titre. Chaque case se cale
   sur la longueur de son texte, puis les cases se partagent la
   largeur restante de la rangée : « Suisse » prend moins de place
   que « Comédie dramatique ». */

.m-info {
  flex: 1 1 auto;
  width: auto;
  min-width: min(100%, 8.5rem);
}

/* Sur mobile, une case en pleine largeur par repère faisait six
   rangées pour six mots : une demi-page à faire défiler, et un
   grand vide au milieu de chaque rangée. Empilés et calés sur la
   longueur de leur texte, deux ou trois repères courts tiennent
   désormais sur la même rangée — comme sur ordinateur. Le calage
   se resserre au passage : ces cases n'ont que deux lignes à
   loger, elles n'ont pas besoin de l'air d'une case de texte. */
@media (max-width: 899px) {
  .m-bande--reperes .m-info {
    padding: 0.75rem;
    gap: 0.25rem;
  }
  /* Même règle que sur ordinateur : un repère se resserre jusqu'à
     son mot le plus long, mais « Italie » ne se coupe jamais en
     « Ita-lie ». Les espaces suffisent à faire les retours. */
  .m-bande--reperes .m-info .m-cell__value { hyphens: manual; }
}

/* ---------- Une information sur une seule ligne (mobile) ----------
   Quelques cases portent un intitulé et une valeur longue : une
   adresse, un e-mail, un numéro (page Contact). Empilées, elles
   feraient de très hautes cases pour trois mots ; elles passent
   donc sur une seule ligne sur mobile — l'intitulé à gauche, la
   valeur à droite — et reprennent leur disposition normale, en
   colonne, dès qu'il y a la place (ordinateur).
   Les repères de la fiche film, eux, sont courts : ils restent
   empilés pour pouvoir se serrer à plusieurs par rangée (voir la
   rangée des repères, plus bas). */
@media (max-width: 899px) {
  .m-cell--ligne {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .m-cell--ligne .m-cell__value {
    text-align: right;
    /* Trop peu de large pour couper les mots au trait d'union. */
    hyphens: manual;
  }
}

/* ---------- Synopsis & séances ---------- */

/* Le synopsis ferme la fiche : une case basse, de la hauteur de
   son texte, jamais une grande case à moitié vide. */
.m-synopsis__texte { font-weight: 400; }

/* Séances : groupées par jour, horaires en pastilles cliquables.
   Au repos, une pastille est un simple cadre : la case des séances
   reste une liste d'horaires, pas un mur de boutons verts. C'est
   au survol qu'elle devient verte — le vert de l'achat, comme tous
   les gestes d'achat du site. Seule la pastille visée réagit : sa
   case, elle, ne se teinte pas (voir classeSansSurvol dans
   couleurs.js), pour que le vert soit le seul mouvement à l'écran. */
.m-seances__bloc { margin-top: 0.25rem; }
.m-seances__jour {
  font-weight: 400;
  text-transform: uppercase;
  opacity: 0.7;
}
.m-seances__chips {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.m-seances__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border: var(--ligne) solid currentColor;
  font-weight: 800;
  transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}
.m-seances__chip-note { font-weight: 400; }
/* Une pastille qui achète est un lien (paiement SumUp collé à la
   main) ou un bouton (caisse en ligne, elle ouvre le panneau
   d'achat) — jamais un simple <span>, qui lui ne vend rien. */
a.m-seances__chip:hover,
a.m-seances__chip:focus-visible,
button.m-seances__chip:hover,
button.m-seances__chip:focus-visible {
  background: var(--vert);
  border-color: var(--vert);
  color: #fff;
}
/* Séance complète ou annulée : la pastille reste en place mais
   s'efface — elle n'achète rien, elle ne verdira jamais. */
.m-seances__chip--off {
  opacity: 0.55;
}
.m-seances__chip--off .m-seances__chip-note { color: var(--red); }
.m-seances__vide { font-weight: 400; opacity: 0.6; }
.m-seances__agenda {
  font-weight: 800;
  text-transform: uppercase;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.75rem;
  border-bottom: var(--ligne) solid currentColor;
}

/* ---------- Bande presse : la citation, à la fin de la fiche ----------
   Une seule case sur sa bande : elle reste basse, elle ne prend
   que la hauteur de son texte. */

.m-presse__citation,
.m-presse__lien {
  font-weight: 400;
  line-height: 1.35;
}
.m-presse__signature {
  font-weight: 800;
  text-transform: uppercase;
}

/* ---------- Bande actions : retour & achat ---------- */

.m-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem 0.75rem;
  flex-wrap: wrap;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
}

/* Lien-case de retour : dans la rangée du bas de la fiche, à côté
   d'un bouton d'achat, ou seul sur sa bande (« film introuvable »).
   Sa largeur suit son texte, comme les cases qui l'entourent. */
.m-lien-retour {
  flex: 1 1 auto;
}

/* La rangée du bas de la fiche : synopsis, presse et retour aux
   films. Sur mobile elles s'empilent. */
/* Sur mobile, la rangée du bas se dissout (display: contents) : ses
   trois cases redeviennent des cases du tableau, ce qui permet de
   glisser le synopsis entre les informations et la bande-annonce —
   on veut savoir de quoi parle le film avant de voir sa bande-
   annonce. L'ordre de lecture est alors donné explicitement. */
@media (max-width: 899px) {
  .mondrian--film > .m-bande--bas { display: contents; }
  .m-bande--bas > * { flex: 0 0 auto; }

  .mondrian--film > .m-titre          { order: 1; }
  .mondrian--film > .m-acheter        { order: 2; }
  .mondrian--film > .m-affiche        { order: 3; }
  .mondrian--film > .m-bande--reperes { order: 4; }
  .m-bande--bas > .m-synopsis         { order: 5; }
  .mondrian--film > .m-ba             { order: 6; }
  .mondrian--film > .m-seances        { order: 7; }
  .m-bande--bas > .m-presse           { order: 8; }
  .m-bande--bas > .m-lien-retour      { order: 9; }
}

@media (min-width: 900px) {
  /* Sur ordinateur, les trois cases tiennent sur une seule ligne et
     se partagent la largeur au prorata de leur texte : le synopsis
     prend l'essentiel, le lien de retour juste ce qu'il lui faut. */
  .m-bande--bas {
    flex-wrap: nowrap;
  }
  .m-bande--bas > * {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* La case de presse se dimensionne sur son texte, comme ses
     voisines. Mais quand il n'y a pas de citation, elle ne porte que
     « Article de presse » : à côté d'un synopsis de dix lignes, sa
     part devenait une colonne de deux lettres écrasée contre le bord
     droit, avec le mot « PRESSE » coupé.

     Un plancher la garde lisible. Elle peut toujours s'élargir
     au-delà quand une citation lui donne de quoi la remplir ; c'est
     le synopsis qui absorbe la différence, il en a les moyens. */
  .m-bande--bas > .m-presse {
    flex: 0 1 auto;
    min-width: 15rem;
  }
  /* Le retour ouvre la rangée, tout à gauche : sa flèche pointe
     vers la gauche, elle ne doit pas partir du bord droit. */
  .m-bande--bas > .m-lien-retour {
    order: -1;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Le bouton d'achat : vert en permanence, partout, toujours.
   C'est le seul repère de couleur fixe du site. */
.m-acheter {
  /* Deux fois plus large que le lien qui l'accompagne : c'est le
     geste principal. */
  flex: 2 1 auto;
  background: var(--vert);
  color: #fff;
  padding: 1.25rem 1rem;
  transition: background 0.2s ease-out;
}
a.m-acheter:hover,
a.m-acheter:focus-visible,
button.m-acheter:hover,
button.m-acheter:focus-visible { background: var(--vert-fonce); }
.m-acheter--indisponible {
  cursor: default;
  background: var(--paper);
  color: var(--ink);
  opacity: 0.6;
}
.m-acheter__prix { font-weight: 400; opacity: 0.9; }

/* ---------- Page Membership : tarifs & formules ----------
   Mêmes bandes que la fiche film ; le prix prend la place d'un
   titre dans sa case. */

.m-tarif__prix {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.m-tarif__precision {
  font-weight: 400;
  opacity: 0.75;
}
/* Les formules tiennent côte à côte tant qu'elles ont 18rem :
   en dessous, elles passent l'une sous l'autre. */
.m-formule {
  flex: 1 1 18rem;
}
.m-formule__texte {
  font-weight: 400;
  margin-top: 0.25rem;
}

/* ---------- Film introuvable ---------- */

.m-introuvable {
  min-height: 50dvh;
  justify-content: center;
  align-items: flex-start;
}

/* ---------- Mobile : ordre de lecture ----------
   Les cases sont écrites dans la page exactement dans l'ordre du
   mobile — titre, achat (acheter son billet ne demande aucun
   défilement), affiche, informations, bande-annonce, séances,
   presse, synopsis — et s'empilent donc naturellement, chacune sur
   toute la largeur. Rien à réordonner ici.

   ---------- Ordinateur ----------
   Une grille nomme chaque case et la replace. Trois principes :

   1. L'affiche ne dicte plus la hauteur de la page — c'est
      l'inverse. Elle est posée en fond de sa case, entière et
      centrée ; ce sont les cases voisines qui décident de la
      hauteur du tableau. Une affiche très haute ne rallonge donc
      plus la page.
   2. Le bouton d'achat monte à côté du titre : on peut acheter
      son billet sans le moindre défilement.
   3. La bande-annonce occupe une vraie case, large.

   Aucun trou : les zones nommées pavent entièrement le tableau. */

@media (min-width: 900px) {
  .mondrian--film {
    display: grid;
    /* Écran de portable : la colonne de droite est étroite, donc
       haute (le texte y revient souvent à la ligne). L'affiche
       prend alors la plus large des trois colonnes pour la suivre
       en hauteur sans laisser de papier vide autour d'elle, et la
       bande-annonce s'installe sur toute la largeur restante. */
    grid-template-columns: minmax(0, 40fr) minmax(0, 32fr) minmax(0, 28fr);
    grid-template-areas:
      "titre    titre    achat"
      "affiche  reperes  reperes"
      "affiche  ba       ba"
      "seances  seances  seances"
      "bas      bas      bas";
  }
  /* Sans bande-annonce, sa case laisserait un trou noir : les
     séances prennent sa place et l'affiche gagne une rangée pour
     ne pas se retrouver minuscule. */
  .mondrian--film-sans-ba {
    grid-template-areas:
      "titre    titre    achat"
      "affiche  reperes  reperes"
      "affiche  seances  seances"
      "bas      bas      bas";
  }

  .mondrian--film > .m-bande--bas     { grid-area: bas; }
  .mondrian--film > .m-titre          { grid-area: titre; }
  .mondrian--film > .m-acheter        { grid-area: achat; }
  .mondrian--film > .m-affiche        { grid-area: affiche; }
  .mondrian--film > .m-bande--reperes { grid-area: reperes; }
  .mondrian--film > .m-ba             { grid-area: ba; }
  .mondrian--film > .m-seances        { grid-area: seances; }

  /* L'affiche remplit sa colonne, au format du site. L'image est en
     position absolue : elle remplit la case sans jamais imposer sa
     hauteur au tableau, quel que soit le format du fichier livré. */
  .mondrian--film > .m-affiche { position: relative; }
  .mondrian--film > .m-affiche .poster,
  .mondrian--film > .m-affiche .generated-poster,
  .mondrian--film > .m-affiche .poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .mondrian--film > .m-affiche .poster img { object-fit: cover; }
  /* Un film sans affiche n'a pas de fichier à respecter : son
     affiche typographique remplit simplement sa case, dont la
     hauteur est donnée par la rangée. */
  .mondrian--film > .m-affiche--generee { aspect-ratio: auto; }

  /* Le bouton d'achat tient toute la hauteur du titre : c'est le
     grand rectangle vert du tableau, impossible à manquer. */
  .mondrian--film > .m-acheter {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
  }

  /* Chaque case d'information se resserre jusqu'à son mot le plus
     long, jamais en dessous : « Italie » ne se coupe pas en
     « Ita-lie ». */
  .m-bande--reperes > .m-info {
    min-width: min-content;
    padding-inline: 0.65rem;
  }
  .m-info .m-cell__value { hyphens: manual; }

  /* Le lecteur de bande-annonce se centre dans sa case quand
     celle-ci est plus haute que lui. */
  .m-ba__media { margin-block: auto; }
}

/* Sur grand écran, la bande-annonce et les séances se mettent
   côte à côte : le tableau y gagne une rangée, et le synopsis
   comme le bouton d'achat remontent dans le premier écran.

   Deux réglages qui ne sont pas décoratifs :

   — Les informations générales traversent tout le tableau. Elles
     tiennent alors sur une seule rangée quel que soit le film,
     même quand la version ou les genres sont longs.
   — L'affiche ne partage sa rangée qu'avec la bande-annonce.
     C'est la seule rangée dont la hauteur ne dépend pas de la
     longueur d'un texte : elle vaut la vidéo (format 16/9) plus
     son intitulé. Les trois colonnes sont calculées pour que la
     hauteur ainsi obtenue soit exactement celle d'une affiche de
     cinéma (environ 1 de large pour 1,4 de haut) posée dans la
     première colonne — l'affiche remplit donc sa case sans papier
     vide autour d'elle, et cela reste vrai d'un film à l'autre
     comme d'une largeur d'écran à l'autre. */
@media (min-width: 1350px) {
  .mondrian--film {
    /* L'affiche gagne de la largeur sur cette rangée — donc de la
       hauteur, puisqu'elle garde son format —, la bande-annonce et
       les séances lui cèdent la place. Ces trois chiffres ne valent
       que pour la rangée du milieu : les autres rangées traversent
       le tableau. */
    grid-template-columns: minmax(0, 33fr) minmax(0, 40fr) minmax(0, 27fr);
    grid-template-areas:
      "titre    titre    achat"
      "reperes  reperes  reperes"
      "affiche  ba       seances"
      "bas      bas      bas";
  }
  /* La case de l'affiche garde le format d'affiche du site : c'est
     elle qui fixe la hauteur de sa rangée, et l'image la remplit donc
     exactement. Sans ça, l'affiche serait bridée par la hauteur des
     séances et flotterait dans du papier blanc. */
  .mondrian--film > .m-affiche { aspect-ratio: var(--format-affiche); }
  /* Sans bande-annonce, plus rien ne fixe la hauteur de la rangée
     de l'affiche : on lui en donne deux pour qu'elle garde une
     présence. */
  .mondrian--film-sans-ba {
    grid-template-areas:
      "titre    titre    achat"
      "reperes  reperes  reperes"
      "affiche  seances  seances"
      "bas      bas      bas";
  }
}


/* ---------- Les photos du film ----------
   Une bande sous la fiche, alimentée par « Photos du film » dans le
   Studio. Les images gardent leurs proportions et se répartissent la
   largeur ; sans photo, la bande n'est pas écrite du tout. */
.m-bande--photos {
  display: flex;
  flex-wrap: wrap;
}
.m-photo {
  flex: 1 1 18rem;
  padding: 0;
  overflow: hidden;
}
.m-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
}