/* =========================================================
   CONTACT — la lumière du film, la carte en verre, le rail

   Variante « A — Plein cadre » retenue sur la planche de maquettes.
   Tout vient de l'accueil et rien n'est inventé : la lumière ambiante du
   cover flow, la carte en verre de « Parlons-en », le compteur et la
   pilule « Voir tous les films ». La page les réunit dans un seul écran.

   Chargée APRÈS style.css, et seulement ici : v30.css porte trois mille
   lignes de hero et de cover flow dont la page n'a pas l'usage.
   ========================================================= */

/* La voix de l'accueil. Les pages intérieures sont encore en
   Inter ; celle-ci reprend la voix de l'accueil parce qu'elle en reprend
   la matière — un Switzer sur le verre, un Inter dans le pied de page
   auraient fait deux sites. */
:root {
  --font-sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --ct-courbe: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- La scène ---------- */
.ct-scene {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "gauche carte"
    "rail   rail";
  column-gap: clamp(40px, 6.6vw, 96px);
  /* La marge de `.wrap`, mais sur une scène pleine largeur : la lumière doit
     aller jusqu'aux bords de la fenêtre, même au-delà de 1680 px. */
  --ct-marge: max(var(--pad-x), calc((100vw - var(--max)) / 2 + var(--pad-x)));
  padding-inline: var(--ct-marge);
  padding-top: clamp(84px, 11vh, 120px);
}

/* ---------- La lumière ambiante ----------

   Le même mécanisme que l'accueil : deux calques en fondu croisé, chacun
   portant l'affiche du film désigné, floutée jusqu'à l'abstraction.

   PLUS FORTE QU'À L'ACCUEIL, ET C'EST VOULU. Là-bas elle enveloppe une
   pochette et ne doit pas la laver : 0,34. Ici elle est la matière que la
   carte en verre traverse — sur un noir uni, `backdrop-filter` n'a rien à
   flouter et le verre se réduit à un liseré. D'où 0,62, et un masque qui
   descend vers la carte au lieu de rester au centre. */
.ct-ambiance {
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 62% at 62% 44%,
    #000 0%, rgba(0, 0, 0, 0.55) 50%, transparent 80%);
  mask-image: radial-gradient(70% 62% at 62% 44%,
    #000 0%, rgba(0, 0, 0, 0.55) 50%, transparent 80%);
}
.ct-ambiance span {
  position: absolute;
  inset: 0;
  background-position: 50% 45%;
  background-size: cover;
  filter: blur(72px) saturate(1.5) brightness(0.5);
  opacity: 0;
  transition: opacity 0.9s var(--ct-courbe);
  will-change: opacity;
}
.ct-ambiance span.is-on { opacity: 0.62; }

/* Le voile : lisibilité du titre en haut, et un pied sombre sous le rail
   pour que les vignettes se détachent de la lumière qu'elles projettent. */
.ct-voile {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.18) 36%,
    rgba(0, 0, 0, 0.4) 70%,
    #000 100%);
}

.ct-gauche,
.ct-carte,
.ct-rail { position: relative; z-index: 1; }

/* ---------- Le texte ---------- */
.ct-gauche {
  grid-area: gauche;
  align-self: center;
}
/* LA TAILLE DU TITRE D'À PROPOS, et non celle de `.h-xl`. C'est la seule
   autre page où le titre tient dans une demi-colonne à côté d'un autre
   bloc ; à 84 px il écrasait la carte et se lisait 40 % plus fort que
   « Ludo — Réalisateur ». À cette taille, la hauteur de la fenêtre n'a plus
   besoin de le plafonner : le rail tient dans un écran de 900 px. */
.ct-titre {
  margin-top: 14px;
  font-size: clamp(30px, 4.2vw, 64px);
}
.ct-gauche .lead { margin-top: clamp(18px, 1.8vw, 24px); }

.ct-direct {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 40px;
  margin-top: clamp(22px, 3vh, 30px);
  max-width: 520px;
}
.ct-direct li {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 14px;
}
.ct-direct .eyebrow { display: block; margin-bottom: 6px; }
/* Le glyphe d'Instagram devant le compte : on reconnaît le réseau avant
   de lire le nom. Dans le lien, donc souligné avec lui au survol, et en
   `currentColor` pour suivre le texte. */
.ct-insta { display: inline-flex; align-items: center; gap: 8px; }
.ct-insta svg { width: 15px; height: 15px; flex: none; }

/* ---------- La carte en verre ----------
   Les valeurs de `.cv-carte` (v30.css), à l'arête près. */
.ct-carte {
  grid-area: carte;
  align-self: center;
  margin-block: 12px;
  padding: clamp(26px, 2.2vw, 32px) clamp(28px, 2.8vw, 40px);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ct-carte .eyebrow { display: block; }
.ct-carte form { margin-top: 18px; }
.ct-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.ct-carte .field { margin-bottom: 14px; }
.ct-carte .field textarea { min-height: 64px; }
/* La note de confirmation réserve sa ligne dans style.css ; ici elle
   n'apparaît qu'une fois remplie, pour ne pas creuser la carte à vide. */
.ct-carte .form-note:empty { display: none; }

/* CE QUI EST FACULTATIF EST MARQUÉ, pas ce qui est obligatoire : trois
   champs sur six peuvent rester vides, et le dire rassure plus qu'une
   rangée d'astérisques. En bas de casse et sans interlettrage, pour se lire
   comme une précision et non comme la suite de l'étiquette. */
.ct-facultatif {
  margin-left: 4px;
  font-size: 9.5px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.4);
}

/* AUCUN CHOIX N'EST FAIT D'AVANCE. « Film de marque » était sélectionné
   par défaut : qui envoie sans y toucher déclarait un film de marque sans
   l'avoir dit. Le menu part donc sur « Choisir… », en gris tant qu'il y
   reste, pour qu'on voie qu'il n'est pas répondu. */
.ct-carte .field select:has(option[value=""]:checked) { color: var(--grey-40); }

/* `appearance: none` (style.css) retire la flèche native sans rien mettre
   à la place : un menu déroulant qui ressemble à un champ texte. */
.ct-carte .field select {
  padding-right: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='1.3'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") no-repeat right 2px center;
  cursor: pointer;
}

.ct-carte .btn { margin-top: 4px; }
/* Pendant l'envoi : le bouton ne répond plus, et le dit. */
.ct-carte .btn[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.6;
  pointer-events: none;
}
.ct-carte .btn[aria-disabled="true"] .arrow { opacity: 0; }

/* LE REMPLISSAGE AUTOMATIQUE PEINT LES CHAMPS, et rien ne l'en empêchait.
   Chrome et Safari posent un fond clair sur un champ qu'ils remplissent :
   dans le verre, nom et e-mail devenaient deux pavés blancs. Ce fond est
   imposé par le navigateur et ne se remplace pas ; on RETARDE donc sa
   transition assez longtemps pour qu'il n'arrive jamais, et on rend au
   texte sa couleur. Firefox, lui, passe par un filtre, qu'on retire.
   Deux règles et non une liste : un navigateur qui ne connaît pas l'un
   des deux sélecteurs ignorerait la règle entière. */
.ct-carte input:-webkit-autofill,
.ct-carte input:-webkit-autofill:hover,
.ct-carte input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 99999s 0s, color 99999s 0s;
}
.ct-carte input:autofill { filter: none; }

/* ---------- Le verso ----------

   La carte garde la hauteur du formulaire pendant qu'elle montre son verso
   (posée en ligne par le script) : un verso plus court ferait remonter la
   page sous le curseur au moment exact où l'on regarde le résultat. Le
   contenu se centre donc dans une boîte qui ne change pas. */
.ct-carte { transform-origin: 50% 50%; }
.ct-verso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
.ct-verso[hidden] { display: none; }
.ct-coche {
  width: 58px;
  height: 58px;
  margin-bottom: 26px;
  color: #fff;
}
/* En bas de casse, et non dans la capitale serrée des titres : un merci se
   dit, il ne s'affiche pas comme une enseigne. Le registre
   du titre des films (`.cf-nom strong`) — régulier, légèrement resserré. */
.ct-verso-titre {
  margin-top: 12px;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  outline: none;
}
.ct-verso-texte {
  margin-top: 16px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grey-90);
}
.ct-verso .btn { margin-top: 30px; }
.ct-verso .btn:hover .arrow { transform: translateX(-4px); }
.ct-verso-demo {
  margin-top: 18px;
  max-width: 40ch;
  font-size: 11px;
  color: var(--grey-40);
}

/* LA COCHE SE TRACE, elle ne s'affiche pas : le cercle d'abord, puis le
   trait, une fois la carte posée. C'est ce qui fait lire « c'est parti »
   plutôt que « voici une icône ». Les longueurs sont celles des tracés :
   2π × 30 pour le cercle, et les deux segments de la coche. */
.ct-coche circle { stroke-dasharray: 188.5; stroke-dashoffset: 188.5; opacity: 0.4; }
.ct-coche path { stroke-dasharray: 33.4; stroke-dashoffset: 33.4; }
.ct-verso.is-vu .ct-coche circle { animation: ctTrace 0.9s var(--ease-pose) 0.05s forwards; }
.ct-verso.is-vu .ct-coche path { animation: ctTrace 0.55s var(--ease-pose) 0.5s forwards; }
@keyframes ctTrace { to { stroke-dashoffset: 0; } }

/* Le verso entre en léger décalé, élément par élément, après la coche. */
.ct-verso > :not(.ct-coche) {
  opacity: 0;
  transform: translateY(8px);
}
.ct-verso.is-vu > :not(.ct-coche) {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-pose), transform 0.8s var(--ease-pose);
}
.ct-verso.is-vu > :nth-child(2) { transition-delay: 0.35s; }
.ct-verso.is-vu > :nth-child(3) { transition-delay: 0.42s; }
.ct-verso.is-vu > :nth-child(4) { transition-delay: 0.49s; }
.ct-verso.is-vu > :nth-child(5) { transition-delay: 0.58s; }
.ct-verso.is-vu > :nth-child(6) { transition-delay: 0.66s; }

/* LE REFLET : une bande de lumière qui traverse le verre pendant le tour,
   comme un reflet qui glisse sur une vitre qu'on incline. Sans lui, la
   carte tourne mais reste mate — c'est lui qui dit « surface ». */
.ct-reflet {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.16) 48%,
    rgba(255, 255, 255, 0.05) 54%,
    transparent 70%) no-repeat;
  background-size: 260% 100%;
  background-position: 120% 0;
  opacity: 0;
}

/* La mention de confidentialité : dire à quoi servent nom et e-mail là où
   on les donne, pas seulement dans une page que personne n'ouvre. En gris
   60 et non 40 — à 12 px, le gris 40 tombe sous le contraste lisible. */
.ct-rgpd {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey-60);
}
.ct-rgpd a { color: rgba(255, 255, 255, 0.82); }
.ct-rgpd a:hover { color: #fff; }

/* ---------- Le rail ---------- */
.ct-rail {
  grid-area: rail;
  /* Le filet traverse toute la largeur ; le contenu garde la marge. */
  margin-inline: calc(var(--ct-marge) * -1);
  padding: 0 var(--ct-marge) clamp(18px, 2.6vh, 28px);
  border-top: 1px solid var(--line);
}

.ct-rail-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}
.ct-rail-info {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

/* Le compteur du cover flow (`.cf-meter`), sorti de son cadre absolu. */
.ct-meter {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}
.ct-meter-bar {
  display: block;
  width: clamp(90px, 10vw, 140px);
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.ct-meter-bar > span {
  display: block;
  height: 100%;
  background: #fff;
  transform-origin: 0 50%;
  transform: scaleX(0.143);
  transition: transform 0.6s var(--ct-courbe);
}

.ct-rail-film {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}
.ct-rail-film strong { font-weight: 400; }
.ct-rail-film span {
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* La pilule de `.cf-sortie`. */
.ct-sortie {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 0.4s var(--ct-courbe), background 0.4s var(--ct-courbe), color 0.4s var(--ct-courbe);
}
.ct-sortie:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
}
.ct-sortie-fleche { transition: transform 0.4s var(--ct-courbe); }
.ct-sortie:hover .ct-sortie-fleche { transform: translateX(3px); }

.ct-films {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  /* De la place au-dessus pour la vignette élue, qui monte de 8 px, et
     pour son liseré posé à 3 px du bord. */
  padding-top: 12px;
}

.ct-film {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 1);
  outline: 1px solid transparent;
  outline-offset: 3px;
  opacity: 0.5;
  transition: opacity 0.6s var(--ct-courbe), transform 0.6s var(--ct-courbe), outline-color 0.6s var(--ct-courbe);
}
.ct-film:hover { opacity: 0.85; }
.ct-film.is-elue {
  opacity: 1;
  transform: translateY(-8px);
  outline-color: rgba(255, 255, 255, 0.9);
}
.ct-film:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ct-film img,
.ct-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Un film tourné en format large arrive avec des bandes noires dans
     son cadre 16/9 : `object-fit` ne les voit pas, elles font partie de
     l'image. La vignette concernée porte son propre `--zoom` pour les
     pousser hors du cadre. */
  transform: scale(var(--zoom, 1));
}
/* L'aperçu ne se montre qu'une fois qu'il joue : avant, c'est un cadre
   noir par-dessus l'affiche. */
.ct-film video { opacity: 0; transition: opacity 0.5s var(--ct-courbe); }
.ct-film video.is-vue { opacity: 1; }

/* Le cartouche de `.cf-nom`, réduit à la vignette. */
.ct-film-nom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 26px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.5) 50%, transparent);
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ct-courbe), transform 0.5s var(--ct-courbe);
}
.ct-film.is-elue .ct-film-nom { opacity: 1; transform: none; }
.ct-film-nom strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.ct-film-nom svg { flex: none; width: 24px; height: 24px; }

/* ---------- Lecteur plein écran ----------
   Repris de v3.css, où il vit encore pour l'accueil. */
.player {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 52px);
  background: rgba(6, 6, 6, 0.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 0.4s var(--ct-courbe);
}
.player[hidden] { display: none; }
.player.on { opacity: 1; }
.player-box {
  width: min(1400px, 100%);
  transform: translateY(10px) scale(0.99);
  transition: transform 0.55s var(--ct-courbe);
}
.player.on .player-box { transform: none; }
.player-stage {
  background: #000;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.player-stage video {
  display: block;
  width: 100%;
  max-height: min(76svh, 800px);
  background: #000;
}
.player-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding-top: 16px;
}
.player-meta strong {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.player-meta span {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-60);
}
.player-close {
  position: absolute;
  top: clamp(14px, 2.5vw, 28px);
  right: clamp(14px, 2.5vw, 28px);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.4s var(--ct-courbe), color 0.4s var(--ct-courbe), border-color 0.4s var(--ct-courbe);
}
.player-close:hover { background: #fff; color: #000; border-color: #fff; }
.player-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}
.player-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.player-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Tablette et téléphone ----------

   UNE COLONNE, ET LE RAIL REMONTE AU-DESSUS DU FORMULAIRE. En bas d'une
   page empilée, après un formulaire d'un écran et demi, on ne le verrait
   jamais. Juste sous le titre, il se lit comme « voici ce que je fais »
   avant « écrivez-moi ».

   `display: contents` sur la colonne de gauche : ses enfants deviennent des
   cases de la grille, ce qui permet de glisser le rail ENTRE le texte et
   les coordonnées sans dupliquer le balisage. */
@media (max-width: 1024px) {
  .ct-scene {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "texte"
      "rail"
      "carte"
      "direct";
    padding-top: clamp(104px, 16vw, 150px);
    padding-bottom: clamp(48px, 8vw, 80px);
  }
  .ct-gauche { display: contents; }
  .ct-texte { grid-area: texte; position: relative; z-index: 1; }
  /* Même relais qu'À propos en une colonne. */
  .ct-titre { font-size: clamp(30px, 8.4vw, 56px); }
  .ct-direct { grid-area: direct; position: relative; z-index: 1; max-width: none; }
  .ct-carte { max-width: 620px; width: 100%; margin-block: 36px 8px; }

  .ct-ambiance {
    -webkit-mask-image: radial-gradient(80% 50% at 50% 60%, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 80%);
    mask-image: radial-gradient(80% 50% at 50% 60%, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 80%);
  }
  .ct-voile { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 85%, #000); }

  .ct-rail { margin-top: clamp(28px, 5vw, 44px); border-top: 0; padding-bottom: 0; }
  .ct-rail-tete { min-height: 0; }
  .ct-rail-film { display: none; }

  /* Une bande qui déborde et défile au doigt. Le débordement à droite est
     le signe qu'il y a une suite ; il ne faut donc pas le rogner à la
     marge, d'où la marge rendue en `scroll-padding`. */
  .ct-films {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(150px, 34vw, 220px);
    gap: 12px;
    margin-inline: calc(var(--ct-marge) * -1);
    padding: 16px var(--ct-marge) 12px;
    scroll-padding-inline: var(--ct-marge);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ct-films::-webkit-scrollbar { display: none; }
  .ct-films li { scroll-snap-align: start; }
  /* Pas de survol au doigt : toutes les vignettes sont à pleine intensité,
     et le titre de chacune reste visible. */
  .ct-film { opacity: 1; }
  .ct-film.is-elue { transform: none; }
  .ct-film-nom { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .ct-duo { grid-template-columns: minmax(0, 1fr); }
  .ct-direct { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ct-direct li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .ct-direct .eyebrow { margin: 0; }
  .ct-carte { padding: 26px 22px; }
  .ct-carte .btn { width: 100%; justify-content: center; }
  .ct-sortie { padding: 9px 13px; font-size: 11px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-film.is-elue { transform: none; }
}

/* =========================================================
   L'ENTRÉE — la même que Boutique et À propos

   Le titre se levait ligne par ligne, la carte apparaissait au défilement,
   et le reste — sur-titre, chapeau, coordonnées, rail — était là d'emblée.

   LA TÊTE : chaque pièce monte de 18 px en apparaissant, 1 s d'opacité,
   1,2 s de montée, 80 ms entre deux — le sur-titre, le titre, le chapeau,
   puis les coordonnées. Le titre a perdu son masque de ligne, la carte sa
   classe `reveal` : les animations se seraient superposées.

   LA CARTE DU FORMULAIRE monte à son tour, juste après.

   LES FILMS DU RAIL ARRIVENT DU FOND, comme les rayons de la Boutique et
   les films de l'accueil : plus petits, plus bas, transparents, puis à leur
   place. Ils partent de la vignette élue — la première — et se suivent de
   gauche à droite, 80 ms par vignette. C'est le `li` qui s'anime et non la
   vignette : celle-ci porte déjà son opacité et sa montée d'élue.

   Déclenchée par `is-loaded`, que main.js pose à la première image. Rien
   de tout cela en animations réduites.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .ct-texte > *,
  .ct-direct,
  .ct-carte,
  .ct-rail-tete {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 1s var(--ct-courbe), translate 1.2s var(--ct-courbe);
  }
  .is-loaded .ct-texte > *,
  .is-loaded .ct-direct,
  .is-loaded .ct-carte,
  .is-loaded .ct-rail-tete { opacity: 1; translate: none; }

  .is-loaded .ct-texte > :nth-child(2) { transition-delay: 0.08s; }
  .is-loaded .ct-texte > :nth-child(3) { transition-delay: 0.16s; }
  .is-loaded .ct-direct                { transition-delay: 0.24s; }
  .is-loaded .ct-carte                 { transition-delay: 0.32s; }
  .is-loaded .ct-rail-tete             { transition-delay: 0.45s; }

  .ct-films > li {
    opacity: 0;
    scale: 0.82;
    translate: 0 36px;
    transition:
      opacity 1.1s var(--ct-courbe),
      scale 1.6s var(--ct-courbe),
      translate 1.6s var(--ct-courbe);
  }
  .is-loaded .ct-films > li { opacity: 1; scale: 1; translate: none; }
  .is-loaded .ct-films > li:nth-child(1) { transition-delay: 0.5s; }
  .is-loaded .ct-films > li:nth-child(2) { transition-delay: 0.58s; }
  .is-loaded .ct-films > li:nth-child(3) { transition-delay: 0.66s; }
  .is-loaded .ct-films > li:nth-child(4) { transition-delay: 0.74s; }
  .is-loaded .ct-films > li:nth-child(5) { transition-delay: 0.82s; }
  .is-loaded .ct-films > li:nth-child(6) { transition-delay: 0.9s; }
  .is-loaded .ct-films > li:nth-child(7) { transition-delay: 0.98s; }
}