/* ═══════════════════════════════════════════════════════════════════════
   COMPAGNIE LES IMPATIENTS — feuille de style unique

   Organisation en trois couches, dans cet ordre :
     1. tokens primitifs   — les valeurs brutes
     2. tokens sémantiques — ce que les valeurs veulent dire
     3. composants         — qui n'utilisent QUE des tokens sémantiques

   Aucun hex brut hors de la couche 1. Un changement de palette se fait
   alors en un seul endroit.

   Règle d'espacement, pour éviter que les sélecteurs s'annulent :
     — les sections portent le padding vertical,
     — la grille .mur porte la répartition horizontale,
     — les composants ne portent JAMAIS de marge externe.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 1. TOKENS PRIMITIFS ────────────────────────────────────────────── */

:root {

  /* Couleur — accordée à l'affiche et au logo de la compagnie, qui sont tous
     deux en bleu nuit et or. L'identité du spectacle prime sur toute autre
     considération : c'est elle que le public verra d'abord.
     Deux principes conservés : un panneau LED n'a pas de vrai noir (il a un
     plancher, plus la lumière de scène), d'où un bleu très sombre plutôt
     qu'un noir pur ; et l'opposition chaud/froid, qui est le sujet même de
     la pièce comme du plateau. */

  --c-palier-0: #0F1419;   /* la salle avant les trois coups */
  --c-palier-1: #131920;
  --c-palier-2: #171E26;
  --c-palier-3: #1C242D;
  --c-palier-4: #222B35;   /* le point le plus lumineux de la page */

  --c-papier:         #E9E5DB;   /* le crème des lettres de l'affiche */
  --c-papier-attenue: #B4B7BD;
  --c-tungstene:      #E3AC4B;   /* l'or du titre et du logo */
  --c-tungstene-vif:  #F2C978;
  --c-led-froid:      #86A9C2;   /* le bleu du logo, désaturé, toujours en retrait */
  --c-terre:          #C4543F;

  --c-trait:       rgb(233 229 219 / 0.13);
  --c-trait-fort:  rgb(233 229 219 / 0.26);

  /* Blanc pur, et il n'a qu'un usage : la tuile sous un logo de partenaire.
     Ce n'est pas le crème du site, c'est le fond pour lequel ces logos ont
     été dessinés. Voir §22. */
  --c-tuile-logo:  #FFFFFF;

  /* Espacement — rythme 4 / 8 */
  --e-1:  0.25rem;   --e-2:  0.5rem;    --e-3:  0.75rem;
  --e-4:  1rem;      --e-5:  1.25rem;   --e-6:  1.5rem;
  --e-8:  2rem;      --e-10: 2.5rem;    --e-12: 3rem;
  --e-16: 4rem;      --e-20: 5rem;      --e-24: 6rem;
  --e-32: 8rem;

  /* Typographie.
     Trois rôles, chacun rattaché à un artefact du projet :
     l'affiche, le manuscrit, la fiche de production. */

  --f-affiche: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-texte:   'Source Serif 4', Charter, Georgia, serif;
  --f-fiche:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-hero:  clamp(2.75rem, 10.5vw, 8rem);
  --t-h1:    clamp(2rem, 5vw, 3.25rem);
  --t-h2:    clamp(1.5rem, 3.2vw, 2.125rem);
  --t-h3:    1.3125rem;
  --t-lead:  clamp(1.3125rem, 1.2vw + 1rem, 1.625rem);
  --t-corps: clamp(1.1875rem, 0.35vw + 1.125rem, 1.3125rem);  /* 19 → 21 px */
  --t-petit: 0.9375rem;
  --t-fiche: 0.8125rem;

  --i-serre:  0.98;
  --i-titre:  1.15;
  --i-corps:  1.65;

  /* Grille — les proportions exactes du mur LED : panneaux de 1,50 m /
     3,50 m / 1,50 m sur 6,50 m, soit 23,1 % / 53,8 % / 23,1 %. Les valeurs
     sont écrites littéralement dans grid-template-columns : l'unité fr ne
     peut être ni portée par une variable ni calculée. */

  --largeur-max: 1400px;
  --gouttiere:   var(--e-6);
  --rupture:     900px;

  --duree:  200ms;
  --courbe: cubic-bezier(0.32, 0.72, 0.35, 1);
}


/* ─── 2. TOKENS SÉMANTIQUES ──────────────────────────────────────────── */

:root {
  --fond:            var(--c-palier-1);
  --fond-surface:    var(--c-palier-3);
  --texte:           var(--c-papier);
  --texte-attenue:   var(--c-papier-attenue);
  --texte-fiche:     var(--c-led-froid);
  --action:          var(--c-tungstene);
  --action-vive:     var(--c-tungstene-vif);
  --alerte:          var(--c-terre);
  --trait:           var(--c-trait);
  --trait-fort:      var(--c-trait-fort);
  --focus:           var(--c-tungstene);
}


/* ─── 3. POLICES ─────────────────────────────────────────────────────── */
/* Auto-hébergées : aucune requête vers un tiers, ce qui vaut à la fois
   pour le RGPD et pour la politique de sécurité de contenu stricte. */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-var.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}


/* ─── 4. RÉINITIALISATION ────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  line-height: var(--i-corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* autorise le débord maîtrisé sans barre horizontale */
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--action-vive); }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--action); color: var(--c-palier-0); }


/* ─── 5. BASE TYPOGRAPHIQUE ──────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--f-affiche);
  line-height: var(--i-titre);
  text-wrap: balance;
}

/* Titres de section : Archivo en condensé, en capitales. L'axe de largeur
   de la variable donne deux personnalités à une seule famille. */
h2, h3 {
  font-variation-settings: 'wght' 680, 'wdth' 82;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { text-wrap: pretty; max-width: 68ch; }

strong { font-weight: 620; }

/* Espacement vertical du contenu courant, en un seul sélecteur —
   évite les marges concurrentes entre composants. */
.flow > * + * { margin-block-start: var(--flow, 1.1em); }


/* ─── 6. UTILITAIRES D'ACCÈS ─────────────────────────────────────────── */

.evitement {
  position: absolute;
  inset-inline-start: var(--e-4);
  inset-block-start: -100%;
  z-index: 100;
  padding: var(--e-3) var(--e-5);
  background: var(--action);
  color: var(--c-palier-0);
  font-family: var(--f-affiche);
  font-weight: 600;
  text-decoration: none;
  transition: inset-block-start var(--duree) var(--courbe);
}
.evitement:focus { inset-block-start: var(--e-4); color: var(--c-palier-0); }


/* ─── 7. GRILLE DU MUR ───────────────────────────────────────────────── */
/* Trois colonnes aux proportions des trois panneaux LED. Le texte vit dans
   le panneau central : à 1400 px de large, il fait ~68 caractères en 19 px,
   soit exactement la mesure de lecture confortable. La contrainte scénique
   et la contrainte typographique tombent au même endroit. */

.mur {
  display: grid;
  grid-template-columns: minmax(0, 231fr) minmax(0, 538fr) minmax(0, 231fr);
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.mur__centre  { padding-inline: var(--e-8); min-width: 0; }
.mur__lateral { min-width: 0; }

/* ─── L'encart de billetterie, plus large que la colonne centrale ───────
   Il porte depuis le 17 août 2026 le widget HelloAsso, un tunnel de paiement
   complet. Dans les 53,8 % du centre, soit environ 660 px, il s'affichait en
   version téléphone sur un ordinateur, et s'allongeait d'autant.

   ⚠ IL EST HORS DE LA GRILLE `.mur`, ET C'EST DÉLIBÉRÉ. La première version
   gardait le mur et posait `grid-column: 1 / -1` sur le centre : mesuré,
   **le max-width prenait mais pas le grid-column**, et l'encart restait dans
   sa colonne. Plutôt que de chercher à forcer un placement dans une grille
   dont les trois colonnes ont un sens précis (les proportions du mur LED,
   §6), on en sort : cette section n'a pas de latéraux à porter.

   Le max-width borne l'élargissement : au-delà, la date en très gros et la
   grille des tarifs s'étireraient sans rien y gagner. La gouttière reprend
   celle du mur, pour que les bords s'alignent avec les autres sections.   */
.billetterie-large {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}


/* Le hero est la seule exception : le titre déborde du panneau central sur
   le latéral droit. C'est ce qui lui donne sa taille d'affiche — dans la
   seule colonne centrale, il casserait sur quatre lignes. */
.mur--hero .mur__centre { grid-column: 2 / -1; padding-inline-end: 0; }

/* L'affiche remplit la marge droite, calée sur la ligne de base du texte. */
.mur__lateral--affiche { padding-block-start: 0.6em; }

/* La fiche technique se cale contre la colonne de texte, comme une
   annotation dans la marge d'un document de travail. */
.mur__lateral--fiche { padding-block-start: 0.6em; text-align: end; }


/* ─── 8. SECTIONS ET PALIERS DE LUMIÈRE ──────────────────────────────── */
/* La signature du site : la page s'éclaircit du haut vers le bas, comme une
   conduite lumière. Le hero est au niveau de la salle avant les trois coups,
   l'encart de réservation est le point le plus lumineux — l'œil y va sans
   qu'on ait besoin d'un bouton criard. */

.section { padding-block: var(--e-20); }
.section--dense  { padding-block: var(--e-12); }
.section--ample  { padding-block: var(--e-24); }


.section--palier-0 { background: var(--c-palier-0); }
.section--palier-1 { background: var(--c-palier-1); }
.section--palier-2 { background: var(--c-palier-2); }
.section--palier-3 { background: var(--c-palier-3); }
.section--palier-4 {
  background:
    radial-gradient(120% 90% at 50% 100%, rgb(227 172 75 / 0.08), transparent 70%),
    var(--c-palier-4);
}


/* ─── 9. EN-TÊTE ─────────────────────────────────────────────────────── */

.entete {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  /* Dérivé du premier palier, et non écrit en dur.
     C'était « rgb(15 20 25 / 0.93) », un bleu-noir figé, alors que le texte
     de l'en-tête suit --texte. Sur une page partenaire à palette claire, on
     obtenait du texte sombre sur un fond sombre : l'en-tête devenait
     illisible, et rien dans le code ne le laissait deviner. */
  background: color-mix(in srgb, var(--c-palier-0) 93%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--trait);
}

.entete__interieur {
  position: relative;   /* référence du bouton Réserver sur petit écran */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--e-3) var(--gouttiere);
}

.entete__marque {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;      /* cible tactile, même quand seul le logo s'affiche */
  padding-inline-end: var(--e-2);
  color: var(--texte);
  text-decoration: none;
}

.entete__logo { width: 2.25rem; height: 2.25rem; }

.entete__nom {
  font-family: var(--f-affiche);
  font-variation-settings: 'wght' 700, 'wdth' 84;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* Le passage à la ligne n'est pas une précaution de confort.

   La liste est en flex, donc en nowrap par défaut, et le body est en
   overflow-x: clip. Un lien qui ne tient plus n'aurait donc produit aucune
   barre de défilement : il aurait été rogné, invisible et inatteignable,
   sans qu'aucun contrôle de débordement ne le signale.

   C'est devenu un vrai risque le 9 août 2026, en passant de trois liens à
   quatre : à 320 px, les quatre demandent une trentaine de pixels de plus
   que la largeur disponible. */
.nav__liste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }

.nav__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--e-3);
  color: var(--texte-attenue);
  font-family: var(--f-affiche);
  font-variation-settings: 'wght' 520, 'wdth' 92;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--duree) var(--courbe);
}
.nav__lien:hover { color: var(--texte); }
.nav__lien[aria-current='page'] { color: var(--texte); }

/* L'action de réservation : un bloc à part, jamais dans la liste de
   navigation. C'est ce qui lui permet de rester en haut à droite sur
   téléphone pendant que les liens passent à la ligne. */
.entete__action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--e-5);
  border: 1px solid var(--action);
  color: var(--action);
  font-family: var(--f-affiche);
  font-variation-settings: 'wght' 620, 'wdth' 92;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duree) var(--courbe),
              color var(--duree) var(--courbe);
}
.entete__action:hover { background: var(--action); color: var(--c-palier-0); }


/* ─── 10. BANDEAU MAQUETTE ───────────────────────────────────────────── */

.bandeau-maquette {
  padding: var(--e-2) var(--gouttiere);
  background: var(--alerte);
  color: #fff;
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  letter-spacing: 0.04em;
  text-align: center;
}


/* ─── 11. HERO ───────────────────────────────────────────────────────── */

.hero { position: relative; }

.hero__surtitre {
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  color: var(--texte-fiche);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-block-end: var(--e-6);
}

/* Le titre est plat et littéral — c'est comme ça que le personnage appelle
   son texte. On le traite en conséquence : énorme, net, sans ornement.
   Archivo poussée en largeur, ce que peu de sites font de leur variable. */
.hero__titre {
  font-size: var(--t-hero);
  font-variation-settings: 'wght' 830, 'wdth' 112;
  line-height: var(--i-serre);
  letter-spacing: -0.018em;
  text-transform: uppercase;
  margin-block-end: var(--e-6);
}

.hero__titre span { display: block; }

/* Sur les pages internes, le même traitement mais à une échelle qui laisse
   la vedette au titre du spectacle. */
.hero__titre--page {
  font-size: var(--t-h1);
  font-variation-settings: 'wght' 780, 'wdth' 104;
  /* « Confidentialité » fait quinze lettres sans césure possible : à 320 px
     il dépassait de 5 px et donnait un défilement horizontal à toute la
     page. Mesuré en local ET en production, donc antérieur à ce lot.
     La césure automatique s'appuie sur lang="fr", posé sur <html>. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.hero__mention {
  font-family: var(--f-affiche);
  font-variation-settings: 'wght' 440, 'wdth' 90;
  font-size: var(--t-lead);
  color: var(--texte-attenue);
  text-transform: none;
  letter-spacing: 0;
  margin-block-end: var(--e-10);
}

.hero__affiche {
  width: 100%;
  border: 1px solid var(--trait);
}

/* Le logo de la compagnie, à sa vraie échelle. */
.logo-bandeau {
  max-width: var(--largeur-max);
  margin: var(--e-12) auto 0;
  padding-inline: var(--gouttiere);
}
.logo-bandeau img { width: 100%; }

/* Emplacement réservé tant que l'affiche n'est pas fournie. */
.affiche-attente {
  aspect-ratio: 600 / 849;
  border: 1px solid var(--trait);
  background: var(--c-palier-0);
}


/* ─── 12. FICHE TECHNIQUE ────────────────────────────────────────────── */
/* Chaque donnée annote la section en face d'elle. Ce ne sont pas des
   ornements : ce sont des faits de production, vérifiés, et aucun ne
   raconte une scène du spectacle. */

.fiche { font-family: var(--f-fiche); font-size: var(--t-fiche); }

.fiche__ligne + .fiche__ligne { margin-block-start: var(--e-4); }

.fiche__valeur {
  display: block;
  color: var(--texte);
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.fiche__label {
  display: block;
  color: var(--texte-fiche);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-block-start: var(--e-1);
}


/* ─── 13. TEXTE COURANT ──────────────────────────────────────────────── */

.chapo {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--texte);
}

.citation {
  font-size: var(--t-lead);
  line-height: 1.5;
  font-style: italic;
  border-inline-start: 2px solid var(--action);
  padding-inline-start: var(--e-6);
}

.citation__source {
  display: block;
  margin-block-start: var(--e-4);
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  font-style: normal;
  color: var(--texte-fiche);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.titre-section { margin-block-end: var(--e-6); }

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

/* Un lien qui est une ACTION et non une référence dans une phrase. La règle
   WCAG n'excuse la petite cible que pour les liens pris dans un texte ;
   « Ouvrir l'itinéraire » est un geste qu'on cherche à faire, souvent debout
   et sur un téléphone. */
.lien-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Le délai de réponse annoncé sous les coordonnées. Discret : c'est une
   précision rassurante, pas une information qu'on vient chercher. */
.delai-reponse {
  color: var(--texte-attenue);
  font-size: 0.9375rem;
}

/* Les destinations proposées à qui tombe sur une adresse inconnue.
   Chaque ligne porte un lien et ce qu'on y trouve : quelqu'un arrivé là par
   une affiche mal recopiée doit pouvoir reconnaître ce qu'il cherchait.
   La cible fait 44 px de haut, comme le demande le §12. */
.egare { display: grid; gap: var(--e-5); list-style: none; }
.egare li { display: grid; gap: var(--e-1); }
.egare a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  justify-self: start;
  font-family: var(--f-affiche);
  font-variation-settings: 'wght' 620, 'wdth' 96;
  font-size: var(--t-lead);
}


/* ─── 14. LA VUE DU DÉCOR ────────────────────────────────────────────── */
/* Retirée le 9 août 2026 faute d'une image juste, revenue le 12 avec le
   rendu de l'appartement.

   Plus large que la colonne de texte, et volontairement : la section parle
   du décor, l'image EST le sujet. Elle sort donc de la grille en trois
   colonnes au lieu de tenir dans celle du milieu. Le padding reprend la
   gouttière du site pour qu'elle ne touche jamais le bord de l'écran. */
.decor {
  max-width: 66rem;
  margin: var(--e-12) auto 0;
  padding-inline: var(--gouttiere);
}

.decor img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--trait);
}

/* Marque de place tant que les visuels ne sont pas fournis. */
.panneaux__attente {
  display: grid;
  place-content: center;
  block-size: 100%;
  background:
    repeating-linear-gradient(135deg,
      rgb(233 229 219 / 0.03) 0 10px,
      transparent 10px 20px);
  color: var(--texte-fiche);
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.panneaux__legende {
  margin-block-start: var(--e-4);
  margin-inline: auto;
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  color: var(--texte-fiche);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  max-width: none;
}


/* ─── 15. ENCART DE RÉSERVATION ──────────────────────────────────────── */

.encart {
  padding: var(--e-8);
  background: rgb(233 229 219 / 0.045);
  border: 1px solid var(--trait-fort);
}

.encart__date {
  font-family: var(--f-affiche);
  font-variation-settings: 'wght' 760, 'wdth' 100;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.encart__lieu {
  margin-block-start: var(--e-4);
  font-size: var(--t-corps);
  line-height: 1.4;
}

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

.encart__heure,
.encart__etat {
  margin-block-start: var(--e-2);
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  color: var(--texte-fiche);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.encart__etat { margin-block-start: var(--e-6); color: var(--action); }
.encart__etat--complet { color: var(--alerte); }

.encart__mention {
  margin-block-start: var(--e-3);
  font-size: var(--t-petit);
  line-height: 1.5;
  color: var(--texte-attenue);
}

.encart .bouton { margin-block-start: var(--e-6); }


/* ─── Les avantages partenaires, sur la page Réserver ───────────────────
   Une liste de définitions et non des cartes : trois enseignes avec chacune
   son offre, ce sont des paires terme/définition, et le lecteur d'écran les
   annonce comme telles. Des cartes auraient demandé une grille, des ombres
   et des bordures pour dire la même chose en plus lourd.

   Le nom à gauche, l'offre à droite, sur le même rythme que la liste des
   informations pratiques plus bas dans la page : deux listes voisines qui
   ne se ressembleraient pas donneraient l'impression de deux sites.        */

.avantages-reserver { margin-block-start: var(--e-8); }

.avantages-reserver__ligne {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--e-2) var(--e-6);
  padding-block: var(--e-5);
  border-block-start: 1px solid var(--trait);
}

.avantages-reserver__ligne:last-child { border-block-end: 1px solid var(--trait); }

.avantages-reserver__chez {
  font-family: var(--f-affiche);
  font-size: var(--t-h3);
  font-weight: 600;
}

.avantages-reserver__quoi { margin: 0; }

.avantages-reserver__offre {
  display: block;
  font-family: var(--f-affiche);
  font-size: var(--t-lead);
  font-weight: 600;
  color: var(--action);
  line-height: var(--i-titre);
}

/* Le prix habituel, barré : c'est ce qui donne sa mesure à la remise. */
.avantages-reserver__avant {
  display: block;
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  color: var(--texte-fiche);
  text-decoration: line-through;
  margin-block-start: var(--e-1);
}

/* La condition se lit en plein, jamais en gris : c'est elle qui décide si
   l'avantage s'ouvre, et personne ne doit la découvrir à la caisse. */
.avantages-reserver__condition {
  display: block;
  font-size: var(--t-petit);
  font-weight: 620;
  margin-block-start: var(--e-2);
}

.avantages-reserver__usage {
  display: block;
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  color: var(--texte-fiche);
  margin-block-start: var(--e-2);
}

.avantages-reserver__note {
  font-size: var(--t-petit);
  line-height: var(--i-corps);
  color: var(--texte-attenue);
  margin-block-start: var(--e-6);
}

/* La date de fin des offres. Elle porte le filet d'accent parce qu'elle
   borne tout ce qui suit : quelqu'un qui parcourt la page en diagonale doit
   la voir sans la chercher. Pas de rouge ni de majuscules pour autant, ce
   n'est pas une alerte mais une condition. */
.avantages-reserver__fin {
  font-size: var(--t-petit);
  line-height: var(--i-corps);
  color: var(--texte-attenue);
  border-inline-start: 2px solid var(--action);
  padding-inline-start: var(--e-4);
  margin-block-start: var(--e-8);
}

.avantages-reserver__fin strong {
  color: var(--texte);
  font-weight: 620;
}

@media (max-width: 700px) {
  /* Le nom passe au-dessus de son offre : à 13rem sur un téléphone, la
     colonne de droite tomberait à quelques mots par ligne. */
  .avantages-reserver__ligne { grid-template-columns: 1fr; }
}


/* ─── La billetterie HelloAsso, en cadre ────────────────────────────────
   Le code fourni par HelloAsso portait `style="width:100%; height:750px"`
   en attribut : interdit ici, et bloqué par la politique de sécurité. Il est
   repris en classe, à l'identique pour la largeur, et plus généreux pour la
   hauteur.

   ⚠ LA HAUTEUR EST FIXE, ET C'EST UN CHOIX SUBI. Le code de HelloAsso
   l'ajustait au contenu par un script, que le §6 interdit. Sans lui, un
   cadre trop court fait défiler le formulaire à l'intérieur de la page, ce
   qui est pénible sur un téléphone. On prend donc large, et le défilement
   interne ne sert que de filet.

   Le fond est CLAIR, à dessein : le widget est blanc et ne s'accorde pas au
   bleu nuit du site. Un cadre blanc franc, posé comme un document, vaut
   mieux qu'une bande blanche qui aurait l'air d'un défaut d'affichage.

   ✅ MESURÉE le 23 août 2026, dans le vrai moteur de Safari iOS, après
   trois appels de spectateurs qui n'arrivaient pas à commander.

   Le cadre était TROP COURT à TOUTES les étapes, sur téléphone comme sur
   bureau. Le défaut ne se voyait pas parce que le cadre s'affiche : il
   frappe un cran plus loin. Dès qu'on ajoute un billet, le bouton
   « Commander » tombe à 1251 px dans un cadre qui en faisait 1150, donc
   sous le bord. Il fallait faire défiler DANS le cadre pour l'atteindre,
   geste que presque personne ne fait, et le public a de 45 à 70 ans.

   Hauteurs relevées du contenu HelloAsso :

                       téléphone   bureau
     choix des billets   1326 px   1028 px   (constant)
     coordonnées 1 pl.   1148 px      —
     coordonnées 2 pl.   1398 px   1049 px
     coordonnées 3 pl.   1862 px      —
     coordonnées 4 pl.   2326 px   1713 px
     coordonnées 6 pl.   3255 px      —

   Le formulaire grandit de 464 px par participant sur téléphone, 332 px
   sur bureau : AUCUNE hauteur fixe ne peut suivre. Les valeurs ci-dessous
   couvrent l'étape du choix des billets, où tout le monde bute, et les
   coordonnées jusqu'à deux places, qui sont les trois ventes à ce jour.

   ⚠ Le contenu HelloAsso S'ÉTIRE à la hauteur du cadre : l'agrandir ne
   décale pas le bouton d'autant, mais il le décale. Sur bureau, passer de
   900 à 1100 px n'a rendu que 114 des 128 px manquants, et le bouton
   restait 14 px sous le bord. Ne pas calculer la hauteur en ajoutant
   l'écart mesuré : il faut remesurer après coup.

   ⚠ À partir de trois places, les coordonnées débordent encore. Le lien
   « Ouvrir la billetterie en pleine page » sous le cadre est la sortie, et
   c'est une raison de plus de ne pas le retirer.

   ⚠ Ne pas remesurer avec un navigateur piloté par Chromium : HelloAsso
   le classe en robot et rend un 403 Cloudflare « Just a moment », hors
   cadre comme dedans. WebKit passe, et donne les chiffres ci-dessus.      */

.billetterie-widget {
  display: block;
  width: 100%;
  height: 1300px;
  margin-block-start: var(--e-6);
  border: 1px solid var(--trait-fort);
  border-radius: 3px;
  background: #FFFFFF;
  color-scheme: light;   /* le widget est clair : ne pas lui imposer le sombre */
}

/* Plus la colonne est étroite, plus le contenu du widget s'allonge :
   1326 px au choix des billets contre 1028 px sur bureau. */
@media (max-width: 900px) {
  .billetterie-widget { height: 1450px; }
}


/* ─── 16. BOUTONS ────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--e-3) var(--e-8);
  border: 1px solid transparent;
  font-family: var(--f-affiche);
  font-variation-settings: 'wght' 640, 'wdth' 96;
  font-size: 1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duree) var(--courbe),
              color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe);
}

.bouton--primaire {
  background: var(--action);
  color: var(--c-palier-0);
}
.bouton--primaire:hover { background: var(--action-vive); color: var(--c-palier-0); }

.bouton--secondaire {
  border-color: var(--trait-fort);
  color: var(--texte);
}
.bouton--secondaire:hover { border-color: var(--action); color: var(--action); }


/* ─── 17. TARIFS ─────────────────────────────────────────────────────── */

.tarifs { margin-block-start: var(--e-8); padding-block-start: var(--e-6);
          border-block-start: 1px solid var(--trait); }

.tarifs__titre { font-size: var(--t-fiche); color: var(--texte-fiche);
                 letter-spacing: 0.12em; margin-block-end: var(--e-4); }

.tarifs__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
  border-block-end: 1px solid var(--trait);
}
.tarifs__ligne:last-child { border-block-end: 0; }

.tarifs__detail {
  display: block;
  font-size: var(--t-petit);
  color: var(--texte-attenue);
}

.tarifs dd {
  font-family: var(--f-fiche);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La contribution HelloAsso. Même jeton que .tarifs__detail, dont le
   contraste est déjà validé : c'est une note de bas de grille, pas une
   ligne de tarif, et elle ne doit pas se lire comme un prix de plus. */
.tarifs__contribution {
  margin-block-start: var(--e-5);
  font-size: var(--t-petit);
  color: var(--texte-attenue);
  max-width: 52ch;
}


/* ─── 18. LISTES DE DISTRIBUTION ─────────────────────────────────────── */

.distribution__groupe + .distribution__groupe { margin-block-start: var(--e-10); }

.distribution__titre {
  font-size: var(--t-fiche);
  color: var(--texte-fiche);
  letter-spacing: 0.12em;
  margin-block-end: var(--e-4);
  padding-block-end: var(--e-3);
  border-block-end: 1px solid var(--trait);
}

.distribution__liste { display: grid; gap: var(--e-2); }

.distribution__liste li { font-size: var(--t-corps); }

.equipe__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
  border-block-end: 1px solid var(--trait);
}

.equipe__role {
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  color: var(--texte-fiche);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ─── 19. INFORMATIONS PRATIQUES ─────────────────────────────────────── */

.pratique__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-6);
  padding-block: var(--e-4);
  border-block-end: 1px solid var(--trait);
}

.pratique__cle {
  flex: 0 0 9rem;
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  color: var(--texte-fiche);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pratique__valeur { flex: 1 1 14rem; max-width: none; }


/* ─── 20. MARQUEUR DE VALEUR MANQUANTE ───────────────────────────────── */
/* Volontairement voyant : sur la maquette, on doit repérer d'un coup d'œil
   tout ce qui reste à renseigner. */

.a-renseigner {
  background: rgb(196 84 63 / 0.22);
  color: var(--c-papier);
  border-block-end: 1px dashed var(--alerte);
  padding-inline: 0.35em;
  font-family: var(--f-fiche);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}


/* ─── 21. PIED DE PAGE ───────────────────────────────────────────────── */

.pied {
  padding-block: var(--e-16) var(--e-12);
  background: var(--c-palier-0);
  border-block-start: 1px solid var(--trait);
}

.pied__titre {
  font-family: var(--f-affiche);
  font-variation-settings: 'wght' 760, 'wdth' 100;
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pied__ligne { font-size: var(--t-petit); color: var(--texte-attenue); }

.pied__liens,
.pied__reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-6);
  margin-block-start: var(--e-8);
}

.pied__liens a,
.pied__reseaux a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texte-attenue);
  font-family: var(--f-affiche);
  font-variation-settings: 'wght' 500, 'wdth' 92;
  font-size: 0.9375rem;
  text-decoration: none;
}
.pied__liens a:hover,
.pied__reseaux a:hover { color: var(--action); }

/* Le glyphe d'un réseau. Il est écrit dans la page (app/partials/icones.php),
   sa couleur est donc celle du lien : il passe à l'or au survol avec le mot,
   sans une règle de plus.

   La taille est en « em » et non en pixels : elle suit le corps du lien, y
   compris si le visiteur grossit le texte de son navigateur. Un glyphe figé
   en pixels rapetisserait à mesure que le mot grandit.

   1,35 em de 0,9375 rem font 20 px, exactement les dimensions écrites sur la
   balise dans app/partials/icones.php : le glyphe ne change donc pas de
   taille quand la feuille de style arrive, et le pied de page ne saute pas. */
.pied__reseaux a { gap: var(--e-2); }

.icone-reseau {
  width: 1.35em;
  height: 1.35em;
  fill: currentColor;
  flex: none;          /* sinon le glyphe se comprime quand le mot s'allonge */
}

/* Le titre de la liste des réseaux. Il porte l'écart du haut à la place de
   la liste, sinon les deux s'additionneraient et le pied se déchirerait. */
.pied__reseaux-titre {
  margin-block-start: var(--e-8);
  font-size: var(--t-petit);
  color: var(--texte-attenue);
}
.pied__reseaux-titre + .pied__reseaux { margin-block-start: var(--e-1); }

.pied__mention {
  margin-block-start: var(--e-8);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--texte-attenue);
  /* ⚠ 0,75 jusqu'au 18 août 2026, et c'était trop peu SUR LES PALETTES
     CLAIRES : 3,83:1 chez Un Amour de Chaussures, 3,28:1 chez Eyescape, à
     13 px. Sur le bleu nuit du site, la même règle donnait 5,65:1, et le
     défaut ne se voyait donc nulle part chez nous.
     C'est exactement le piège que le §12 signale : « une cote à 3:1 parce
     qu'elle était à 55 % d'opacité ». L'opacité se compte dans le contraste,
     et elle ne se règle pas au jugé sur une seule palette. */
  opacity: 0.9;
}


/* ─── 22. PARTENAIRES ────────────────────────────────────────────────── */
/* La page /partenaires et celle de la Ville. À ne pas confondre avec
   partenaires.css, qui habille les trois vitrines : ici on est sur le site
   des Impatients, avec sa palette, et on ne fait que présenter. */

/* LA TUILE CLAIRE N'EST PAS DÉCORATIVE.

   Le logo de la Ville est multicolore et dessiné pour du blanc. Sur le
   bleu nuit du site, son magenta #c60f63 tombe à 2,8:1 contre le fond, et
   son bordeaux à peine mieux. Un logo n'est pas soumis au contraste WCAG,
   mais illisible reste illisible.

   C'est le même piège que celui déjà payé sur les bannières : un logo se
   pose sur le fond pour lequel il a été dessiné, pas sur celui de la page
   qui l'accueille. */
.soutien__logo {
  display: block;
  inline-size: fit-content;
  background: var(--c-tuile-logo);
  border-radius: 2px;
  padding: var(--e-5) var(--e-6);
  margin-block: var(--e-6);
}

.soutien__logo img {
  /* Le fichier fait 355 px de large. Le borner à sa taille réelle évite de
     l'étirer : agrandi, un logotype devient flou, et cela ne se voit qu'à
     l'impression ou sur un écran dense. */
  inline-size: min(355px, 100%);
}

.soutien__logo--seul { margin-inline: 0; }

.soutien__ligne {
  font-size: var(--t-lead);
  line-height: 1.5;
}

/* Les trois autres partenaires : le nom en typographie, sans logo. Leurs
   luminosités vont de 11 % à 99 %, ils ne peuvent pas partager un fond. */
.partenaires-liste {
  display: grid;
  gap: var(--e-8);
  margin-block-start: var(--e-8);
}

.partenaire-carte {
  border-block-start: 1px solid var(--trait);
  padding-block-start: var(--e-5);
}

.partenaire-carte__nom {
  font-family: var(--f-affiche);
  font-size: var(--t-h3);
  font-weight: 600;
  margin: 0;
}

/* Le nom EST le lien vers la vitrine, et sa ligne de texte ne faisait que
   22 px de haut : sous les 44 px du §12, et même sous les 24 px que la WCAG
   exige au minimum. La règle n'excuse que les liens pris DANS une phrase ;
   celui-ci est une destination à lui seul. */
.partenaire-carte__nom a,
.avantages-reserver__chez a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.partenaire-carte__ligne {
  margin-block-start: var(--e-2);
  color: var(--texte-attenue);
}


/* ─── 23. ADAPTATION ─────────────────────────────────────────────────── */

/* Palier intermédiaire. En dessous de 1200 px, les trois panneaux ne
   tiennent plus : la colonne centrale tombe à une quarantaine de caractères
   par ligne, ce qui hache la lecture. On fusionne alors le panneau central
   et le latéral droit — la fiche technique garde sa marge, et la mesure du
   texte reste tenue par le max-width de 68ch posé sur les paragraphes. */
@media (max-width: 1200px) {

  .mur { grid-template-columns: minmax(0, 231fr) minmax(0, 769fr); }

  .mur__centre { grid-column: 2; padding-inline-end: 0; }

  /* Le latéral droit repasse sous le texte, dans la même colonne. */
  .mur__lateral--affiche {
    grid-column: 2;
    max-width: 22rem;
    margin-block-start: var(--e-8);
    padding-block-start: 0;
  }
}

/* Sous la rupture, le mur s'effondre en une colonne et la fiche technique
   passe en ligne au-dessus de la section qu'elle annote. */
@media (max-width: 900px) {

  /* Marges resserrées : à 19 px de corps, chaque pixel de gouttière coûte
     un caractère par ligne. On garde les 19 px — pour un public de 45 à
     70 ans, la taille de la police prime sur la longueur de ligne. */
  .mur {
    grid-template-columns: 1fr;
    gap: var(--e-6);
    padding-inline: var(--e-4);
  }

  /* Annuler le placement en colonne 2 hérité du palier 1200 px. Sans cette
     ligne, la grille n'a plus qu'une colonne mais le contenu réclame la
     deuxième : le navigateur en crée une implicite, et la fiche technique
     vient se superposer au texte. */
  .mur__centre { grid-column: auto; padding-inline: 0; }

  /* Le hero a sa propre règle de débord, de spécificité supérieure : elle
     gagnerait ici sans une annulation au moins aussi spécifique. */
  .mur--hero .mur__centre { grid-column: auto; padding-inline-end: 0; }

  .mur__lateral--fiche { text-align: start; padding-block-start: 0; }

  /* Une affiche est un format vertical : à pleine largeur elle mange un écran
     entier de hauteur. On la contient et on la centre. Le grid-column du
     palier au-dessus doit être annulé ici aussi. */
  .mur__lateral--affiche {
    grid-column: auto;
    max-width: 17rem;
    margin-inline: auto;
    margin-block-start: var(--e-4);
    padding-block-start: 0;
  }

  .fiche {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3) var(--e-8);
  }
  .fiche__ligne + .fiche__ligne { margin-block-start: 0; }
  .fiche__valeur { font-size: 1.125rem; }

  .mur__lateral:empty { display: none; }

  .section { padding-block: var(--e-12); }
  .section--ample { padding-block: var(--e-16); }

  .encart { padding: var(--e-6); }
}

/* En dessous de 780 px, l'en-tête passe sur deux rangées : le nom de la
   compagnie et le bouton de réservation en haut, les liens en dessous.
   L'identité et l'action restent donc toujours visibles, et la navigation
   garde toute la largeur pour elle.

   Pas de menu escamotable : pour quatre liens, un bouton qui cache la
   navigation coûte un geste sans rien faire gagner. Ils passent à la ligne
   quand ils ne tiennent plus, voir flex-wrap sur .nav__liste. Et surtout
   aucun positionnement absolu — c'est ce qui faisait chevaucher le bouton
   et le lien « Contact » entre 375 et 560 px. */
@media (max-width: 780px) {

  .entete__interieur {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--e-2);
    padding-block: var(--e-2);
  }

  .entete__marque { order: 1; }
  .entete__action { order: 2; }

  .nav {
    order: 3;
    flex-basis: 100%;
    border-block-start: 1px solid var(--trait);
    padding-block-start: var(--e-1);
  }

  .nav__liste { justify-content: flex-start; gap: 0; }

  .nav__lien {
    padding-inline: var(--e-3);
    font-size: 0.875rem;
    letter-spacing: 0.01em;
  }
  .nav__lien:first-child { padding-inline-start: 0; }

  .bandeau-maquette { font-size: 0.6875rem; line-height: 1.45; }
}

/* Très petits écrans : le nom reste lisible mais se resserre, et l'action
   se compacte pour que les deux tiennent côte à côte. Le nom n'est jamais
   masqué : sans lui, la première rangée serait vide. */
@media (max-width: 400px) {
  .entete__nom { font-size: 0.8125rem; letter-spacing: 0.05em; }
  .entete__action { padding-inline: var(--e-3); font-size: 0.875rem; }
  .nav__lien { padding-inline: var(--e-2); font-size: 0.8125rem; }
}

@media (max-width: 560px) {
  .pratique__cle { flex-basis: 100%; }
  .mur__lateral--affiche { max-width: 14rem; }
}


/* ─── 24. MOUVEMENT RÉDUIT ───────────────────────────────────────────── */
/* Non négociable : tout ce qui bouge s'arrête, et la page reste entièrement
   lisible et utilisable. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

}


/* ─── 25. IMPRESSION ─────────────────────────────────────────────────── */

@media print {
  .entete, .pied__liens, .pied__reseaux, .pied__reseaux-titre, .evitement, .bandeau-maquette { display: none; }
  body { background: #fff; color: #000; }
  .section { background: none; padding-block: var(--e-6); }
  .mur { grid-template-columns: 1fr; }
}


/* ─── Photo ajoutée depuis l'espace de modification ────────────────────── */

.photo { margin: 0; }

.photo img {
  width: 100%;
  height: auto;
  display: block;
}

.photo__legende {
  font-family: var(--f-fiche);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--texte-fiche);
  margin: var(--e-3) 0 0;
}

/* La date d'une actualité. Même traitement qu'un surtitre de hero : c'est
   une donnée, elle est composée dans la police des données et en retrait.
   Elle est collée à son titre, sinon .flow lui donnerait l'écart d'un
   paragraphe et la date semblerait appartenir à la nouvelle du dessus. */
.actu__date {
  font-family: var(--f-fiche);
  font-size: var(--t-fiche);
  color: var(--texte-fiche);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.flow > .actu__date + .titre-section { margin-block-start: var(--e-2); }


/* ─── Les documents d'archive, en marge du texte ────────────────────────
   Affiches, programmes, coupures de presse, EN FACE du paragraphe qui les
   raconte. Deux versions ont précédé celle-ci, et chacune a appris quelque
   chose :

     pleine largeur au milieu du texte — trop grandes, elles écrasaient le
     récit, et il fallait couper le bloc de Gilles pour les intercaler ;

     empilées dans la colonne latérale — à la bonne taille, mais toutes en
     haut du bloc : l'affiche d'une pièce se retrouvait en regard d'un
     paragraphe qui parlait d'autre chose.

   Elles flottent maintenant depuis le flux du texte, écrites juste avant
   leur paragraphe. L'alignement n'est plus un réglage à maintenir : il
   découle de l'ordre du HTML, donc il tient quelle que soit la longueur du
   texte, la taille de la police ou la largeur de l'écran.

   LA MARGE NÉGATIVE EST CE QUI PRÉSERVE LA MESURE DU TEXTE. La figure sort
   entièrement dans la colonne latérale : sa largeur effective dans le flux
   vaut 14 + 2 − 16 = 0 rem, donc les lignes gardent leur longueur au lieu
   d'être rognées de moitié en regard de chaque image. Le §6 tient à cette
   mesure, c'est elle qui rend le texte lisible à 19 px.

   AUCUN aspect-ratio, AUCUN object-fit, AUCUNE hauteur imposée : c'est la
   leçon des vitrines de partenaires, où un cadre commun recadrait les
   affiches et leur coupait le titre.                                      */

.document {
  float: inline-end;
  width: 14rem;
  margin-block: var(--e-2) var(--e-5);
  margin-inline-start: var(--e-8);
  margin-inline-end: -16rem;

  /* ⚠ LE CLEAR EST INDISPENSABLE, ET IL EST LA CONTREPARTIE DE LA MARGE
     NÉGATIVE. Celle-ci ramène la largeur effective de la figure à zéro dans
     le flux : deux figures du même bord se placent alors au même endroit et
     se RECOUVRENT, au lieu de s'empiler. Vu à la capture, l'affiche de
     Natacha derrière celle de La Bonne Planque.

     Du même côté seulement : `both` ferait descendre une figure de droite
     sous une figure de gauche, et l'on perdrait l'alternance qui équilibre
     la page. */
  clear: inline-end;
}

.document--gauche {
  float: inline-start;
  margin-inline-start: -16rem;
  margin-inline-end: var(--e-8);
  clear: inline-start;
}

/* ─────────────────────────────────────────────────────────────────────
   ⚠ CES DEUX PALIERS SONT ICI, ET PAS AU §23 AVEC LES AUTRES

   Ils y étaient d'abord, et ils ne servaient à rien : le §23 est écrit
   AVANT ce bloc dans la feuille, or à spécificité égale c'est la dernière
   règle qui gagne. La marge négative survivait donc aux deux paliers et
   envoyait les figures hors de l'écran — 232 px de débordement horizontal
   mesurés à 1000 px de large, sur une page qui n'en montrait rien
   d'autre. C'est le piège de cascade du §6, dans sa version la plus
   discrète : la règle existe, elle est juste au mauvais endroit.
   ───────────────────────────────────────────────────────────────────── */

/* Plus de colonne où déborder : les figures rentrent dans le texte, qui
   s'enroule autour, comme dans un journal. */
@media (max-width: 1200px) {
  .document,
  .document--gauche {
    width: 11rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .document         { margin-inline-start: var(--e-6); }
  .document--gauche { margin-inline-end: var(--e-6); }
}

/* Un flottement dans une colonne de téléphone laisserait deux mots par
   ligne à côté de l'image. Les figures reprennent leur place dans le flux,
   centrées, juste avant le paragraphe qu'elles illustrent. */
@media (max-width: 900px) {
  .document,
  .document--gauche {
    float: none;
    clear: both;
    width: auto;
    max-width: 60rem;
    margin-inline: auto;
    margin-block: var(--e-6);
  }
}

/* Le flottement s'arrête au bout du texte : sans cela, la note de dépôt ou
   le bouton qui suivent viendraient se caler contre la dernière image. */
.documents-fin { clear: both; }

.document__lien {
  display: block;
  text-decoration: none;
  border: 1px solid var(--trait);
  background: var(--fond-surface);
}

.document__lien:hover { border-color: var(--action); }

.document__lien img { width: 100%; }

/* Le curseur dit ce que la mention disait avant : le document s'agrandit.
   Elle a été retirée à la demande du client, qui la trouvait bavarde sous
   chaque image. Le lien garde une cible bien supérieure à 44 px, celle de
   la vignette entière. */
.document__lien { cursor: zoom-in; }

.document__legende {
  font-family: var(--f-fiche);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--texte-fiche);
  margin: var(--e-2) 0 0;
}


/* ─── La loupe : une visionneuse sans une ligne de JavaScript ───────────
   Un clic sur un document l'agrandit sur place, au lieu d'ouvrir un onglet.
   C'est `:target` qui l'ouvre : le lien pointe sur un identifiant, et cette
   règle affiche l'élément qui le porte. Le mécanisme le plus ancien du web,
   il fonctionne partout et ne demande rien à la politique de sécurité, que
   le §6 tient stricte et sans script.

   Fermée, elle est en `display: none` : ses liens sortent du parcours au
   clavier et sa grande image n'est pas chargée. Elle ne coûte rien tant
   qu'on ne l'ouvre pas.

   La touche Échap ne la ferme pas, faute de script. D'où deux sorties
   visibles, le bouton « Fermer » et tout le fond, plus le bouton retour du
   navigateur, qui marche parce que l'ouverture est une entrée d'historique.
   C'est le geste que l'on tente d'abord sur un téléphone.                 */

.loupe { display: none; }

.loupe:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--e-6);
  /* Presque opaque : un document d'archive se lit, et le texte de la page
     derrière lui ferait un moiré à travers un voile trop clair. Mesuré sur
     un téléphone à 0,95, où les paragraphes transparaissaient encore assez
     pour accrocher l'œil. */
  background: rgb(15 20 25 / 0.975);
}

/* Le fond est un lien qui couvre tout : on ferme en cliquant à côté, comme
   dans n'importe quelle visionneuse. */
.loupe__fond { position: absolute; inset: 0; }

.loupe__cadre {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  max-width: min(96vw, 68rem);
  max-height: 92vh;
}

/* La hauteur commande, pas la largeur : une affiche en portrait déborderait
   de l'écran si on ne la bornait qu'en largeur, et il faudrait faire défiler
   une visionneuse, ce qui n'a pas de sens. */
.loupe__image {
  max-height: 78vh;
  width: auto;
  border: 1px solid var(--trait);
}

.loupe__legende {
  font-family: var(--f-fiche);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--texte-fiche);
  text-align: center;
  max-width: 60ch;
}

.loupe__fermer {
  font-family: var(--f-affiche);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--c-palier-0);
  background: var(--action);
  padding: var(--e-3) var(--e-6);
  border-radius: 3px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.loupe__fermer:hover { background: var(--action-vive); color: var(--c-palier-0); }

@media (max-width: 900px) {
  .loupe:target { padding: var(--e-4); }
  .loupe__image { max-height: 70vh; }
}



/* ─── Section écrite en HTML par un partenaire ─────────────────────────── */

/* Hors de la grille en trois colonnes : celui qui écrit son HTML compose
   sa mise en page lui-même. On ne lui donne qu'une largeur maximale et le
   même rythme vertical que le reste du site. */
.section--libre .libre {
  max-width: var(--l-mur, 90rem);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.section--libre .libre img { max-width: 100%; height: auto; }

/* Un tableau plus large que l'écran défile dans son cadre, jamais la page. */
.section--libre .libre table { display: block; overflow-x: auto; max-width: 100%; }