/* ═══════════════════════════════════════════════════════════════════════
   BLOCS DES PAGES PARTENAIRES

   Chargée après site.css et après la palette du partenaire. Elle n'emploie
   que des jetons sémantiques : les mêmes règles donnent une page sombre
   chez JJLR Films et une page claire chez Eyescape, sans une seule
   exception écrite en dur.

   C'est ce qui permettra d'ajouter un troisième partenaire en écrivant
   une palette, et rien d'autre.
   ═══════════════════════════════════════════════════════════════════════ */

.large {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.intro {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--texte-attenue);
  max-width: 46rem;
  margin: 0 0 var(--e-10);
}


/* ─── Fil d'Ariane ────────────────────────────────────────────────────────
   Il précède la bannière, qui est un bloc plein écran : il doit donc rester
   discret et court. Aucune couleur en dur, comme tout le reste de cette
   feuille, pour qu'il suive la palette du partenaire.

   Le séparateur est posé en ::before sur les étapes SAUF la première, et non
   en ::after sur toutes : autrement la dernière en traîne un derrière elle.
   Il porte aria-hidden par le CSS seul (content d'un pseudo-élément), donc
   les lecteurs d'écran lisent la liste et non « accueil chevron ». */

.ariane {
  max-width: 78rem;
  margin-inline: auto;
  padding: var(--e-4) var(--e-5) 0;
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
}

.ariane__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ariane__etape { color: var(--texte-attenue); }

.ariane__etape + .ariane__etape::before {
  content: '›';
  margin-inline-end: var(--e-3);
  opacity: 0.6;
}

.ariane__etape a {
  color: var(--texte-attenue);
  text-decoration: none;
}
.ariane__etape a:hover { color: var(--action); text-decoration: underline; }

.ariane__etape [aria-current] { color: var(--texte); }


/* ─── Bannière ────────────────────────────────────────────────────────── */

.banniere {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(72vh, 40rem);
  padding: var(--e-16) var(--e-5);
  overflow: hidden;
  text-align: center;
}

.banniere__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.banniere__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────
   LA BANNIÈRE RESTE SOMBRE, MÊME EN PALETTE CLAIRE

   Première version : le voile reprenait --fond, donc il fonçait chez JJLR
   Films et éclaircissait chez Eyescape. Erreur, et mesurable : le logo
   d'Eyescape a une luminosité moyenne de 65 %, celui de JJLR de 99 %. Sur
   un voile clair, le premier devenait illisible et le second disparaissait
   purement et simplement.

   Une bannière posée sur une photographie est un cas à part : elle est
   sombre partout, et son texte est clair. Le reste de la page d'Eyescape
   garde sa palette claire — c'est la seule exception, et elle porte sur un
   bloc dont l'arrière-plan est une image, pas une couleur de marque.
   ───────────────────────────────────────────────────────────────────── */
.banniere__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(10 13 26 / 0.52),
    rgb(10 13 26 / 0.86)
  );
}

/* Le texte de la bannière suit son fond, pas la palette de la page.
   ⚠ Ces trois couleurs sont les seules du bloc : ne pas en redéclarer une
   dans les règles de mise en forme plus bas. Elles y étaient, et comme
   elles venaient après à spécificité égale, c'est la palette qui gagnait —
   le titre d'Eyescape s'affichait en #394550 sur le voile sombre, soit
   1,4:1. Le commentaire ci-dessus décrivait l'intention, le code faisait
   l'inverse, et cela ne se voyait que sur une page claire. */
.banniere__titre,
.banniere__accroche { color: #f3ede1; }

.banniere__mention  { color: rgb(243 237 225 / 0.72); }

/* ─────────────────────────────────────────────────────────────────────
   MAIS TOUT CELA SUPPOSE UNE IMAGE, ET UNE PAGE PEUT NE PAS EN AVOIR

   Les trois couleurs ci-dessus sont écrites pour le voile sombre. Sans
   image de fond, il n'y a pas de voile : le fond de la bannière est celui
   de la page. Sur une palette claire, cela donnait du crème sur du crème,
   mesuré à 1,13:1 sur la page d'Un Amour de Chaussures le 17 août 2026.

   La classe est posée par bloc_gabarit_banniere(), qui est seul à savoir
   si l'image existe vraiment sur le disque. Elle suit ici les trois
   déclarations qu'elle corrige, et non ailleurs dans la feuille : sa
   spécificité suffirait à gagner de n'importe où, mais un projet qui a
   déjà payé deux fois ce genre d'écart préfère que l'ordre et la
   spécificité disent la même chose.

   Mesures sur la palette d'Un Amour de Chaussures, fond #fdfbf6 :
     titre et accroche  var(--texte)         #3a2029   14,31:1
     mention            var(--texte-attenue) #6b5058    6,97:1
   ───────────────────────────────────────────────────────────────────── */
.banniere--nue .banniere__titre,
.banniere--nue .banniere__accroche { color: var(--texte); }

.banniere--nue .banniere__mention  { color: var(--texte-attenue); }

/* Le bouton, lui, garde la couleur de marque du partenaire : c'est le seul
   point de la bannière qui doit dire de qui l'on parle. */
.banniere__bouton { color: #0a0d1a; }

.banniere__contenu {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.banniere__logo {
  max-width: min(20rem, 62vw);
  height: auto;
  margin-inline: auto;
  margin-block-end: var(--e-8);
  display: block;
}

.banniere__titre {
  font-family: var(--f-affiche);
  font-size: clamp(2.25rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--e-5);
}

.banniere__accroche {
  font-family: var(--f-texte);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  margin: 0 0 var(--e-4);
}

.banniere__mention {
  font-family: var(--f-fiche);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

.banniere__bouton {
  display: inline-block;
  margin-block-start: var(--e-8);
  padding: var(--e-4) var(--e-8);
  font-family: var(--f-affiche);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-palier-0);
  background: var(--action);
  border-radius: 3px;
  min-height: 44px;
}

.banniere__bouton:hover { background: var(--action-vive); }

.banniere__bouton:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────
   CENTRER LES BOÎTES, PAS SEULEMENT LE TEXTE QUI EST DEDANS

   site.css borne tout paragraphe à 68ch, pour le confort de lecture. Un ch
   se mesure sur la police de l'élément : l'accroche, en Source Serif à
   1,5 rem, plafonne à 811 px et n'est donc jamais bridée dans un conteneur
   de 736 px — la mention, en IBM Plex Mono à 0,875 rem, tombe à 571 px.

   Sa boîte devenait plus étroite que ses voisines, et un bloc plus étroit
   que son parent reste collé à gauche : text-align: center centrait le
   texte dans une boîte qui, elle, ne l'était pas. Mesuré à 1440 px, la
   ligne était 82 px trop à gauche.

   Les marges automatiques recentrent la boîte quelle que soit sa largeur.
   La règle vient après celles qui posent un margin en écriture courte,
   sans quoi elle serait annulée par elles.
   ───────────────────────────────────────────────────────────────────── */
.banniere__contenu > * { margin-inline: auto; }


/* ─── Cartes ──────────────────────────────────────────────────────────── */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--e-8);
}

.carte {
  display: flex;
  flex-direction: column;
  background: var(--fond-surface);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────
   L'IMAGE EST MONTRÉE TELLE QU'ELLE EST

   Première version : aspect-ratio 4/3 et object-fit: cover. Autrement dit,
   toute image était recadrée en paysage — les affiches des salles y
   perdaient leur titre, et les illustrations d'Eyescape, qui sont en
   portrait, étaient massacrées.

   Plus de cadre imposé, donc, et plus de fond derrière : ce fond suivait la
   palette, et sur une page claire il dessinait un liseré blanc autour de
   chaque affiche.

   Pas de width non plus : sans elle, l'image s'arrête à sa taille réelle au
   lieu d'être étirée pour remplir la carte. Les affiches d'Eyescape font
   239 pixels de large, c'est leur seule taille, et les agrandir les
   rendrait floues.
   ───────────────────────────────────────────────────────────────────── */
.carte__image {
  display: flex;
  justify-content: center;
}

.carte__image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.carte__texte {
  padding: var(--e-6);
  flex: 1;
}

.carte__titre {
  font-family: var(--f-affiche);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--texte);
  margin: 0 0 var(--e-3);
}

.carte__texte p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texte-attenue);
  margin: 0;
}

/* Les repères d'une carte : durée, nombre de joueurs, âge. Des étiquettes,
   pas une liste à puces — on les lit d'un coup d'œil. */
.carte__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: 0;
}

.carte__reperes li {
  font-family: var(--f-fiche);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--texte-fiche);
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
  padding: 0.25em 0.6em;
}


/* ─── Tarifs ──────────────────────────────────────────────────────────── */

.tarifs { margin-block-end: var(--e-10); }

.tarifs__nom {
  font-family: var(--f-affiche);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--texte);
  margin: 0 0 var(--e-4);
  padding-block-end: var(--e-3);
  border-block-end: 1px solid var(--trait);
}

.tarifs__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--e-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tarif {
  text-align: center;
  padding: var(--e-4) var(--e-2);
  background: var(--fond-surface);
  border: 1px solid var(--trait);
  border-radius: 3px;
}

/* Le prix est ce qu'on vient chercher : il est gros, l'intitulé suit. */
.tarif__prix {
  display: block;
  font-family: var(--f-affiche);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--action);
  line-height: 1;
}

.tarif__quoi {
  display: block;
  font-size: 0.875rem;
  color: var(--texte-attenue);
  margin-block-start: var(--e-2);
}

.tarifs__note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texte-attenue);
  border-block-start: 1px solid var(--trait);
  padding-block-start: var(--e-4);
  max-width: 46rem;
}


/* ─── L'avantage réservé aux spectateurs ──────────────────────────────────
   Elle reprend la carte de « Où nous trouver » et sa liste de définitions :
   les deux sections disent des faits, dans la même forme, et deux dessins
   différents pour un même propos n'apprendraient rien au lecteur.

   Ce qui change est le chiffre de la remise, posé en gros et dans la couleur
   d'action : c'est la seule ligne de la page que quelqu'un vient chercher.
   Aucun code hexadécimal ici, uniquement des jetons sémantiques, ce qui
   permet à cette section de suivre la palette de chaque partenaire.         */

.avantage-carte {
  background: var(--fond-surface);
  border: 1px solid var(--trait);
  border-radius: 4px;
  padding: var(--e-10) var(--e-8);
  max-width: 46rem;
}

.avantage-offre {
  font-family: var(--f-affiche);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: var(--i-titre);
  letter-spacing: -0.01em;
  color: var(--action);
  margin: 0 0 var(--e-4);
}

.avantage-detail {
  font-size: var(--t-corps);
  line-height: var(--i-corps);
  color: var(--texte);
  margin: 0 0 var(--e-6);
}

.avantage-note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texte-attenue);
  margin: 0 0 var(--e-8);
  max-width: 44ch;
}


/* ─── Où nous trouver ─────────────────────────────────────────────────── */

.pratique-carte {
  background: var(--fond-surface);
  border: 1px solid var(--trait);
  border-radius: 4px;
  padding: var(--e-10) var(--e-8);
  max-width: 46rem;
}

.pratique-liste { margin: 0 0 var(--e-8); }

.pratique-liste__ligne {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--e-4);
  padding-block: var(--e-4);
  border-block-end: 1px solid var(--trait);
}

.pratique-liste__ligne:last-child { border-block-end: 0; }

.pratique-liste dt {
  font-family: var(--f-fiche);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-fiche);
  padding-block-start: 0.2em;
}

.pratique-liste dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
}

.pratique-liste a { color: var(--action); text-underline-offset: 0.25em; }


@media (max-width: 620px) {
  .pratique-liste__ligne { grid-template-columns: 1fr; gap: var(--e-1); }
  .pratique-carte        { padding: var(--e-6) var(--e-5); }
  .avantage-carte        { padding: var(--e-6) var(--e-5); }
  .banniere              { min-height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
  .banniere__bouton { transition: none; }
}


/* ─── Colonnes resserrées ─────────────────────────────────────────────── */
/* Des colonnes plus étroites quand les images sont petites ou en portrait :
   une affiche de 239 pixels n'a pas besoin de la largeur d'une photo de
   paysage, et rester près de sa taille d'origine la garde nette. */
.cartes--etroites {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}