@charset "UTF-8";
/* ==========================================================================
   Harc'Event — feuille de style unique
   --------------------------------------------------------------------------
   Système « décalage » : le logo est un rectangle bleu roi posé en décalé sur
   un quadrilatère cyan. Le site reprend ce geste — cadres décalés, barres
   obliques, aplats francs, filets fins. Aucune ombre douce générique.

   Sommaire
     1.  Polices
     2.  Variables
     3.  Base, accessibilité, défilement fluide
     4.  Mise en page
     5.  Typographie
     6.  Boutons et liens
     7.  En-tête, navigation, annonce
     8.  Héros
     9.  Blocs de contenu (aplats, filets, grain)
     10. Composants
     11. Galerie et visionneuse
     12. Formulaires
     13. Pied de page
     14. Animations
     15. Impression
   ========================================================================== */

/* ==========================================================================
   1. POLICES — auto-hébergées, aucun appel à un service tiers
   ========================================================================== */

@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/quicksand-latin.woff2') format('woff2');
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/quicksand-latin-ext.woff2') format('woff2');
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. VARIABLES
   --------------------------------------------------------------------------
   Bleu et cyan relevés au pixel dans le logo.
   Contrastes : bleu sur blanc 7,35:1 · blanc sur bleu 7,35:1 · cyan sur bleu
   5,86:1 · cyan sur nuit 15,7:1. Le cyan sur BLANC ne fait que 1,25:1 : il est
   donc interdit pour du texte et réservé aux formes, filets et fonds.
   ========================================================================== */

:root {
  --bleu:   #0036F6;
  --bleu-c: #2A61FF;          /* survols, dégradés */
  --nuit:   #06081A;          /* fonds sombres */
  --nuit-2: #0C1030;          /* surfaces sur fond nuit */
  --cyan:   #00FFFF;
  --blanc:  #FFFFFF;
  --creme:  #F5F6FA;          /* fond alterné */
  --encre:  #10141F;          /* texte, 15,9:1 sur blanc */
  --encre-2:#535A6E;          /* texte secondaire, 6,6:1 sur blanc */
  --filet:  #E2E5F0;
  --filet-nuit: rgba(255, 255, 255, .14);

  --titre: 'Quicksand', 'Trebuchet MS', system-ui, sans-serif;
  --corps: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle typographique fluide */
  --t-geant:   clamp(2.9rem, 1.1rem + 7.4vw, 8rem);
  --t-affiche: clamp(2.3rem, 1.2rem + 4.4vw, 5rem);
  --t-h2:      clamp(1.9rem, 1.15rem + 2.9vw, 3.5rem);
  --t-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  --t-lead:    clamp(1.06rem, 1rem + 0.42vw, 1.35rem);
  --t-corps:   clamp(1rem, 0.97rem + 0.18vw, 1.09rem);
  --t-petit:   0.885rem;
  --t-micro:   0.72rem;

  --marge:  clamp(1.15rem, 4vw, 4rem);
  --large:  1360px;
  --etroit: 760px;
  --bloc:   clamp(4.5rem, 10vw, 9.5rem);

  --rayon: 4px;
  --sortie: cubic-bezier(.22, 1, .36, 1);
  --transition: 260ms var(--sortie);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. BASE, ACCESSIBILITÉ, DÉFILEMENT FLUIDE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 7rem;
}
/* Le défilement fluide est piloté par Lenis. Sans lui (JS coupé, mouvement
   réduit), on retombe sur le comportement natif du navigateur. */
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--corps);
  font-size: var(--t-corps);
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.evitement {
  position: fixed; left: 1rem; top: -6rem; z-index: 999;
  padding: .9rem 1.5rem;
  background: var(--bleu); color: var(--blanc);
  font-family: var(--titre); font-weight: 700; text-decoration: none;
  border-radius: var(--rayon);
  transition: top var(--transition);
}
.evitement:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 2px; }
.sombre :focus-visible, .pied :focus-visible { outline-color: var(--cyan); }

.lecture-seule {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

::selection { background: var(--cyan); color: var(--encre); }

/* ==========================================================================
   4. MISE EN PAGE
   ========================================================================== */

.enveloppe { width: min(100% - 2 * var(--marge), var(--large)); margin-inline: auto; }
.enveloppe--etroite { width: min(100% - 2 * var(--marge), var(--etroit)); }

.bloc { padding-block: var(--bloc); }
.bloc--court { padding-block: clamp(3rem, 6vw, 5rem); }
.bloc--creme { background: var(--creme); }

/* Fonds sombres : le texte passe en blanc, les accents en cyan */
.sombre { position: relative; background: var(--nuit); color: rgba(255, 255, 255, .82); isolation: isolate; }
.sombre--bleu { background: var(--bleu); color: rgba(255, 255, 255, .9); }
.sombre h1, .sombre h2, .sombre h3, .sombre h4, .sombre strong { color: var(--blanc); }
.sombre::after {   /* grain : donne de la matière aux aplats */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain);
  opacity: .18; mix-blend-mode: overlay; pointer-events: none;
}

.grille { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Une seule vignette : elle garde la largeur d'une vignette et reste calée à
   gauche, sous le titre de la section, au lieu de s'étirer sur toute la page
   — c'est ce qui désalignait la billetterie dès qu'un deuxième événement
   était ajouté. */
.grille--1 { grid-template-columns: minmax(0, 27rem); }

/* Deux colonnes éditoriales, volontairement asymétriques */
.duo { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 62rem) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--texte  { grid-template-columns: 1.05fr .95fr; }
  .duo--image  { grid-template-columns: .85fr 1.15fr; }
  .duo--haut   { align-items: start; }
  .duo__media--avant { order: -1; }
}

/* Titre de section : étiquette, titre, filet */
.entete-bloc { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.entete-bloc p { margin-bottom: 0; }
.entete-bloc--large { max-width: 46rem; }

/* ==========================================================================
   5. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 700;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: var(--t-affiche); line-height: .98; letter-spacing: -.035em; }
h2 { font-size: var(--t-h2);      line-height: 1.02; letter-spacing: -.03em; }
h3 { font-size: var(--t-h3);      line-height: 1.22; letter-spacing: -.015em; }
h4 { font-size: 1.05rem;          line-height: 1.3; }

p, ul, ol { margin: 0 0 1.2em; }
p, li { max-width: 68ch; text-wrap: pretty; }

.etiquette {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.5rem;
  font-family: var(--titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bleu);
}
.etiquette::before {
  content: ''; width: 1.6rem; height: .34rem; flex-shrink: 0;
  background: var(--cyan); transform: skewX(-16deg);
}
.sombre .etiquette { color: var(--cyan); }

/* Barre cyan sous un mot — signature typographique */
.trait { position: relative; display: inline-block; isolation: isolate; }
.trait::after {
  content: ''; position: absolute; left: -.04em; right: -.04em; bottom: .04em;
  height: .17em; min-height: 5px; z-index: -1;
  background: var(--cyan); transform: skewX(-16deg);
  transform-origin: left;
}

.chapo { font-size: var(--t-lead); line-height: 1.6; color: var(--encre-2); max-width: 56ch; }
.sombre .chapo { color: rgba(255, 255, 255, .82); }
.petit { font-size: var(--t-petit); color: var(--encre-2); }
.sombre .petit { color: rgba(255, 255, 255, .72); }

/* Liste à repère oblique */
.liste { list-style: none; padding: 0; }
.liste li { position: relative; padding-left: 1.9rem; margin-bottom: .9rem; }
.liste li::before {
  content: ''; position: absolute; left: 0; top: .66em;
  width: 1.05rem; height: .34rem;
  background: var(--cyan); transform: skewX(-16deg);
}

/* ==========================================================================
   6. BOUTONS ET LIENS
   ========================================================================== */

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
.sombre a { color: var(--cyan); }

.boutons { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* Le décalage cyan est obtenu par une ombre portée NETTE : elle se peint
   toujours derrière l'élément, contrairement à un pseudo-élément en
   z-index négatif, qui recouvrirait le fond du bouton. */
.bouton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 2rem;
  border: 0; border-radius: var(--rayon);
  background: var(--bleu); color: var(--blanc);
  font-family: var(--titre); font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 0 var(--cyan);
  transition: transform var(--transition), background var(--transition),
              color var(--transition), box-shadow var(--transition);
}
.bouton:hover, .bouton:focus-visible {
  transform: translate(-3px, -3px);
  background: var(--bleu-c);
  box-shadow: 7px 7px 0 0 var(--cyan);
}
.bouton:active { transform: translate(0, 0); box-shadow: 2px 2px 0 0 var(--cyan); }

.bouton--ligne { background: transparent; color: var(--bleu); box-shadow: inset 0 0 0 2px var(--bleu); }
.bouton--ligne:hover, .bouton--ligne:focus-visible {
  background: var(--bleu); color: var(--blanc);
  box-shadow: inset 0 0 0 2px var(--bleu), 7px 7px 0 0 var(--cyan);
}

.sombre .bouton { background: var(--blanc); color: var(--nuit); }
.sombre .bouton:hover, .sombre .bouton:focus-visible { background: var(--cyan); color: var(--nuit); box-shadow: 7px 7px 0 0 rgba(255, 255, 255, .35); }
.sombre .bouton--ligne { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.sombre .bouton--ligne:hover, .sombre .bouton--ligne:focus-visible {
  background: var(--blanc); color: var(--nuit);
  box-shadow: inset 0 0 0 2px var(--blanc), 7px 7px 0 0 var(--cyan);
}

/* Lien fléché */
.fleche {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--titre); font-weight: 700; text-decoration: none;
  padding-bottom: .35rem;
  background-image: linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  transition: background-size var(--transition);
}
.fleche::after { content: '\2192'; transition: transform var(--transition); }
.fleche:hover { background-size: 100% 100%; }
.fleche:hover::after { transform: translateX(6px); }
.sombre .fleche:hover { color: var(--nuit); }

/* ==========================================================================
   7. EN-TÊTE, NAVIGATION, ANNONCE
   ========================================================================== */

.annonce { background: var(--nuit); color: var(--blanc); font-size: var(--t-petit); }
.annonce[hidden] { display: none; }

/* Un élément retiré depuis l'espace d'administration. Il reste dans le
   fichier — le retrait se défait — mais rien ne doit le réafficher : la
   règle prime donc sur toutes les autres, y compris sur les affichages en
   grille, qui sinon annuleraient l'attribut `hidden`. */
[data-masque] { display: none !important; }
.annonce p {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem;
  max-width: none; margin: 0; padding-block: .65rem;
}
.annonce strong { font-family: var(--titre); color: var(--cyan); }
.annonce a { color: var(--blanc); font-weight: 700; }

.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.entete.defile { border-bottom-color: var(--filet); background: rgba(255, 255, 255, .94); }

/* Au-dessus d'un bloc sombre, l'en-tête s'efface : pas de bande blanche qui
   coupe l'image en deux. */
.entete.sur-sombre {
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.entete.sur-sombre .nav__lien { color: var(--blanc); }
.entete.sur-sombre .nav__lien[aria-current="page"] { color: var(--cyan); }
.entete.sur-sombre .nav__action .bouton { background: var(--blanc); color: var(--nuit); }
.entete.sur-sombre .nav__action .bouton:hover { background: var(--cyan); }
.entete.sur-sombre .burger { background: var(--blanc); }
.entete.sur-sombre .burger span { background: var(--nuit); }

.entete__interieur {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 4.9rem;
  transition: min-height var(--transition);
}
.entete.defile .entete__interieur { min-height: 4.1rem; }

.marque { display: inline-flex; align-items: center; flex-shrink: 0; }
.marque img { width: auto; height: 2.5rem; transition: height var(--transition); }
.entete.defile .marque img { height: 2.1rem; }

.nav__liste { display: flex; align-items: center; gap: clamp(.2rem, .9vw, .9rem); list-style: none; margin: 0; padding: 0; }
.nav__lien {
  position: relative; display: block; padding: .5rem .45rem;
  color: var(--encre); font-family: var(--titre); font-size: .95rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.nav__lien::after {
  content: ''; position: absolute; left: .45rem; right: .45rem; bottom: .1rem;
  height: 4px; background: var(--cyan);
  transform: skewX(-16deg) scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.nav__lien:hover::after, .nav__lien:focus-visible::after { transform: skewX(-16deg) scaleX(1); }
.nav__lien[aria-current="page"] { color: var(--bleu); }
.nav__lien[aria-current="page"]::after { transform: skewX(-16deg) scaleX(1); }

.nav__action { margin-left: .6rem; }
.nav__action .bouton { padding: .7rem 1.3rem; font-size: .93rem; }

.burger {
  display: none; width: 3rem; height: 3rem; padding: 0;
  border: 0; border-radius: var(--rayon);
  background: var(--bleu); cursor: pointer;
}
.burger span { display: block; width: 1.3rem; height: 2px; margin: .27rem auto; background: var(--blanc); transition: transform var(--transition), opacity var(--transition); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.35rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.35rem) rotate(-45deg); }

@media (max-width: 71rem) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 4.9rem 0 auto 0;
    max-height: calc(100dvh - 4.9rem); overflow-y: auto;
    background: var(--nuit);
    transform: translateY(-101%); visibility: hidden;
    transition: transform 420ms var(--sortie), visibility 420ms;
  }
  .nav.ouvert { transform: translateY(0); visibility: visible; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; padding: 1rem var(--marge) 2.5rem; }
  .nav__lien { padding: 1rem 0; font-size: 1.35rem; color: var(--blanc); border-bottom: 1px solid var(--filet-nuit); }
  .nav__lien[aria-current="page"] { color: var(--cyan); }
  .nav__lien::after { display: none; }
  .nav__action { margin: 1.5rem 0 0; }
  .nav__action .bouton { width: 100%; }
}

/* ==========================================================================
   8. HÉROS
   ========================================================================== */

/* Le héros remonte SOUS l'en-tête : l'image occupe alors tout l'écran et
   l'en-tête peut s'effacer par-dessus, sans bande blanche. La marge négative
   est compensée par le remplissage, le contenu ne passe jamais dessous. */
.heros {
  position: relative;
  display: flex; align-items: center;
  min-height: min(94svh, 54rem);
  margin-top: -4.9rem;
  /* Le bandeau de chiffres est posé PAR-DESSUS le bas du héros. La place
     qu'il occupe doit donc être réservée ici, sinon il mord sur ce qui
     finit la colonne — les deux boutons se retrouvaient à demi cachés
     dessous. La réserve vaut zéro quand le bandeau ne s'affiche pas. */
  padding-block: calc(4.9rem + clamp(3rem, 7vh, 5.5rem))
                 calc(clamp(1.75rem, 4vh, 3rem) + var(--pied-heros, 0px));
  background: var(--nuit); color: var(--blanc);
  overflow: hidden; isolation: isolate;
}
.heros__fond { position: absolute; inset: 0; z-index: -2; }
.heros__fond img { width: 100%; height: 100%; object-fit: cover; }
.heros__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, var(--nuit) 6%, rgba(6, 8, 26, .88) 34%, rgba(0, 54, 246, .55) 62%, rgba(0, 54, 246, .28) 100%);
}
.heros__voile::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--grain); opacity: .2; mix-blend-mode: overlay;
}
.heros__contenu { position: relative; z-index: 1; }

.heros h1 { font-size: var(--t-geant); line-height: .93; letter-spacing: -.045em; max-width: 15ch; margin-bottom: 1.4rem; }
.heros .chapo { color: rgba(255, 255, 255, .88); max-width: 46ch; }
.heros .boutons { margin-top: 2.25rem; }

/* Repères (lieu, année) en ligne, séparés par une barre oblique */
.reperes {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  margin: 0 0 1.8rem; padding: 0; list-style: none;
  font-family: var(--titre); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cyan);
}
.reperes li { max-width: none; }
.reperes li + li { position: relative; padding-left: 1.6rem; }
.reperes li + li::before {
  content: ''; position: absolute; left: 0; top: .38em;
  width: .8rem; height: .3rem; background: currentColor; transform: skewX(-16deg);
}

/* Bandeau de chiffres en bas du héros */
/* La hauteur réellement occupée par le bandeau : deux fois son espacement
   intérieur, le grand chiffre et son intitulé. Mesurée à 95 px ; on réserve
   un peu plus pour que rien ne se touche. */
.heros { --pied-heros: 6.25rem; }
@media (max-width: 48rem) { .heros { --pied-heros: 0px; } }

.heros__pied {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  border-top: 1px solid var(--filet-nuit);
  background: rgba(6, 8, 26, .38);
  backdrop-filter: blur(6px);
}
.heros__pied ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.heros__pied li {
  max-width: none; padding: 1.15rem 0 1.15rem 1.5rem;
  border-left: 1px solid var(--filet-nuit);
}
.heros__pied li:first-child { border-left: 0; padding-left: 0; }
.heros__pied b {
  display: block; font-family: var(--titre); font-size: 1.7rem; line-height: 1;
  color: var(--cyan); font-variant-numeric: tabular-nums;
}
.heros__pied span { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
@media (max-width: 48rem) { .heros__pied { display: none; } }

/* Indicateur de défilement */
.defilement {
  position: absolute; right: var(--marge); bottom: 7rem; z-index: 1;
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--titre); font-size: var(--t-micro);
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
  writing-mode: vertical-rl;
}
.defilement::after {
  content: ''; width: 1px; height: 4rem; background: linear-gradient(var(--cyan), transparent);
}
@media (max-width: 62rem) { .defilement { display: none; } }

/* Héros des pages intérieures */
.heros--page { min-height: min(62svh, 34rem); align-items: flex-end; padding-bottom: clamp(3rem, 7vh, 5rem); }
.heros--page h1 { font-size: var(--t-affiche); max-width: 20ch; }
/* Le remplissage supérieur reprend la compensation de l'en-tête : sans elle,
   le titre passerait sous la barre de navigation sur les petits écrans. */
.heros--nu { background: var(--bleu); min-height: auto; padding-block: calc(4.9rem + clamp(2.5rem, 7vh, 4.5rem)) clamp(3rem, 7vh, 5rem); }
.heros--nu .heros__voile { background: none; }

/* Année en très grand, en filigrane */
.heros__annee {
  position: absolute; right: -.05em; bottom: -.24em; z-index: 0;
  font-family: var(--titre); font-size: clamp(10rem, 32vw, 30rem); font-weight: 700;
  line-height: .72; letter-spacing: -.05em;
  color: rgba(0, 255, 255, .13);
  pointer-events: none; user-select: none;
}

/* ==========================================================================
   9. BLOCS DE CONTENU
   ========================================================================== */

.filet { height: 1px; border: 0; margin: 0; background: var(--filet); }
.sombre .filet { background: var(--filet-nuit); }

/* Grand énoncé typographique */
.enonce {
  font-family: var(--titre); font-weight: 700;
  font-size: var(--t-affiche); line-height: 1.06; letter-spacing: -.035em;
  max-width: 18ch; margin: 0;
}

/* Liste numérotée en lignes (remplace les cartes : plus éditorial) */
.rangs { list-style: none; margin: 0; padding: 0; }
.rangs > li {
  display: grid; gap: .5rem 2rem; align-items: baseline;
  max-width: none;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-top: 1px solid var(--filet);
}
.rangs > li:last-child { border-bottom: 1px solid var(--filet); }
.sombre .rangs > li { border-color: var(--filet-nuit); }
@media (min-width: 48rem) { .rangs > li { grid-template-columns: 4.5rem 1fr; } }
.rangs__num {
  font-family: var(--titre); font-size: 1rem; font-weight: 700;
  letter-spacing: .1em; color: var(--bleu);
}
.sombre .rangs__num { color: var(--cyan); }
.rangs h3 { margin-bottom: .4rem; }
.rangs p { margin-bottom: 0; max-width: 60ch; }

/* Cadre décalé cyan autour d'un visuel — le geste du logo.
   Le bloc cyan est posé sur le CADRE ; le masque d'ouverture est sur un
   élément intérieur, sinon son overflow:hidden rognerait le bloc cyan. */
.cadre { position: relative; }
.cadre::before {
  content: ''; position: absolute; z-index: 0;
  inset: auto -1.15rem -1.15rem auto;
  width: 58%; height: 58%;
  background: var(--cyan); border-radius: var(--rayon);
}
.cadre--gauche::before { inset: -1.15rem auto auto -1.15rem; }
@media (max-width: 40rem) { .cadre::before { inset: auto -.6rem -.6rem auto; } }

.cadre > .reveler, .cadre > img { position: relative; z-index: 1; }
.cadre img { width: 100%; border-radius: var(--rayon); }

/* Visuel avec rideau d'ouverture au défilement.
   Le rideau est un VRAI élément, ajouté par le script et animé en
   translation : l'image reste toujours à sa taille normale, donc elle se
   charge et s'affiche même si le script ne s'exécute pas. */
.reveler { position: relative; overflow: hidden; border-radius: var(--rayon); }
.reveler__rideau {
  position: absolute; inset: 0; z-index: 2;
  background: var(--cyan);
  pointer-events: none;
}

/* Chiffres */
.chiffres { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.chiffre { padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--filet-nuit); }
.chiffre:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 60rem) {
  .chiffre { border-left: 0; border-top: 1px solid var(--filet-nuit); padding-left: 0; }
  .chiffre:first-child { border-top: 0; }
}
.chiffre b {
  display: block;
  font-family: var(--titre); font-weight: 700;
  font-size: clamp(3rem, 1.4rem + 5vw, 6.5rem); line-height: .92; letter-spacing: -.05em;
  color: var(--cyan); font-variant-numeric: tabular-nums;
}
.chiffre span { display: block; margin-top: .9rem; max-width: 16ch; font-family: var(--titre); font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--blanc); }

/* Citation — la largeur est donnée par la colonne, jamais par un max-width
   en caractères : à cette taille de corps, cela réduirait le texte à un mot
   par ligne. */
.citation { margin: 0; }
.citation blockquote {
  margin: 0; font-family: var(--titre); font-weight: 700;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.4rem);
  line-height: 1.1; letter-spacing: -.03em; text-wrap: balance;
}
.citation blockquote p { max-width: none; margin: 0; }
.citation figcaption { margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--filet-nuit); font-family: var(--titre); font-weight: 700; max-width: 28ch; }
.citation figcaption span { display: block; font-weight: 500; font-size: .9rem; opacity: .75; }

/* Citation mise en valeur : la phrase d'un côté, une photo de l'autre.
   Elle occupait auparavant une colonne étroite au milieu d'un grand aplat
   bleu, sans rien autour — beaucoup de vide pour peu de mots. */
.citation-duo { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.citation-duo .citation blockquote { max-width: none; }
.citation-duo__photo { max-width: 34rem; }
@media (min-width: 62rem) {
  .citation-duo { grid-template-columns: 1.15fr .85fr; }
}

/* Témoignages */
.temoignage { display: flex; flex-direction: column; height: 100%; padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--blanc); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--filet); }
.temoignage blockquote { margin: 0 0 1.4rem; font-family: var(--titre); font-size: 1.2rem; font-weight: 700; line-height: 1.45; }
.temoignage blockquote p { max-width: none; margin: 0; }
.temoignage figcaption { margin-top: auto; font-size: var(--t-petit); color: var(--encre-2); }
.notes { display: block; margin-bottom: 1rem; color: var(--bleu); font-size: 1.05rem; letter-spacing: .2em; }

/* Cartes */
.carte { position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--blanc); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--filet); transition: transform var(--transition), box-shadow var(--transition); }
.carte:hover, .carte:focus-within { transform: translateY(-5px); box-shadow: inset 0 0 0 2px var(--bleu); }
.carte h3 { margin-bottom: .55rem; }
.carte p:last-child { margin-bottom: 0; }
.carte__pied { margin-top: auto; padding-top: 1.5rem; }
.sombre .carte { background: var(--nuit-2); box-shadow: inset 0 0 0 1px var(--filet-nuit); }
.sombre .carte:hover { box-shadow: inset 0 0 0 2px var(--cyan); }

/* Carte illustrée */
.vignette { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: inset 0 0 0 1px var(--filet); transition: transform var(--transition), box-shadow var(--transition); }
.vignette:hover, .vignette:focus-within { transform: translateY(-5px); box-shadow: inset 0 0 0 2px var(--bleu); }
.vignette__image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--creme); }
.vignette__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--sortie); }
.vignette:hover .vignette__image img { transform: scale(1.06); }
.vignette__corps { display: flex; flex-direction: column; flex: 1; padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.vignette__corps p:last-of-type { margin-bottom: 0; }
.vignette__corps .fleche { margin-top: auto; padding-top: 1.5rem; align-self: flex-start; }
.vignette h3 a { text-decoration: none; color: inherit; }
.vignette h3 a::before { content: ''; position: absolute; inset: 0; z-index: 2; }

/* Événement présenté en deux volets : la photo à gauche, le texte à droite.
   Empilée, la même carte donnait une grande image surmontant un texte étroit
   — ce qui écrasait le titre et repoussait le lien de réservation très bas.
   Côte à côte, l'affiche garde sa place et le texte reste lisible d'un coup
   d'œil. Sous 44rem, la largeur ne le permet plus : on repasse en pile. */
/* Une rangée prévue pour deux blocs dont un seul s'affiche : la seconde
   colonne restait vide, et laissait un grand blanc à côté du texte. C'est le
   cas de la page Boutique dès que l'annonce d'attente s'efface. Une rangée
   qui n'a plus qu'un bloc reprend donc toute la largeur. */
.duo--seul { grid-template-columns: minmax(0, 1fr); }

.pile-evenements { grid-template-columns: minmax(0, 1fr); }
.vignette--duo { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
.vignette--duo .vignette__image { aspect-ratio: auto; height: 100%; min-height: 13rem; }
.vignette--duo .vignette__corps { justify-content: center; }
@media (max-width: 44rem) {
  .vignette--duo { grid-template-columns: minmax(0, 1fr); }
  .vignette--duo .vignette__image { aspect-ratio: 16 / 10; min-height: 0; }
}

/* Grande carte d'édition, image pleine avec texte superposé */
.edition {
  position: relative; display: block; min-height: min(60vh, 30rem);
  border-radius: var(--rayon); overflow: hidden; text-decoration: none; color: var(--blanc);
  isolation: isolate;
}
.edition img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms var(--sortie); }
.edition::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 8, 26, .12) 30%, rgba(6, 8, 26, .88) 100%); }
.edition:hover img, .edition:focus-visible img { transform: scale(1.05); }
.edition__corps { position: absolute; inset: auto 0 0 0; padding: clamp(1.6rem, 3vw, 2.6rem); }
.edition__annee { display: block; font-family: var(--titre); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.04em; color: var(--cyan); }
.edition h3 { color: var(--blanc); margin: .35rem 0 .6rem; }
.edition p { color: rgba(255, 255, 255, .85); margin-bottom: 0; max-width: 42ch; }

/* Repères en ligne (dates, lieux) */
.meta { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; margin: 0 0 .9rem; padding: 0; list-style: none; font-family: var(--titre); font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bleu); }
.meta li { max-width: none; }
.sombre .meta { color: var(--cyan); }

/* Frise des éditions */
.frise { list-style: none; margin: 0; padding: 0; }
.frise__etape { position: relative; display: grid; gap: .5rem 3rem; padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--filet); max-width: none; }
.frise__etape:last-child { border-bottom: 1px solid var(--filet); }
@media (min-width: 52rem) { .frise__etape { grid-template-columns: 12rem 1fr; } }
.frise__annee { font-family: var(--titre); font-weight: 700; font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 1; letter-spacing: -.04em; color: var(--bleu); }
.frise__etape--avenir .frise__annee { color: var(--encre-2); }
.frise__chiffres { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin: 1.2rem 0 0; padding: 0; list-style: none; font-family: var(--titre); font-weight: 700; font-size: .95rem; color: var(--bleu); }
.frise__chiffres li { max-width: none; }

/* Bandeau défilant des partenaires */
.bande-ruban { padding-block: 0; }

/* Un titre, la galerie, puis un lien : trois sections qui doivent se lire
   comme UN SEUL bloc. On resserre donc l'intérieur et on garde le rythme
   habituel sur les bords extérieurs. */
.bloc--titre-galerie { padding-block: var(--bloc) clamp(1.75rem, 3.5vw, 2.75rem); }
.bloc--pied-galerie  { padding-block: clamp(1.75rem, 3.5vw, 2.75rem) var(--bloc); }

/* Sans script, la séquence est une suite de blocs : il lui faut son propre
   rythme, sinon les étapes collent aux sections voisines. */
.voyage:not(.actif) { padding-bottom: var(--bloc); }
.ruban { position: relative; overflow: hidden; padding-block: 1.1rem; border-block: 1px solid var(--filet); }
.sombre .ruban { border-color: var(--filet-nuit); }
.ruban__piste { display: flex; width: max-content; gap: 0; will-change: transform; }
.ruban__piste span {
  display: inline-flex; align-items: center; gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--titre); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.35rem);
  white-space: nowrap; color: var(--encre);
}
.ruban__piste span::after { content: ''; width: .85rem; height: .3rem; background: var(--cyan); transform: skewX(-16deg); flex-shrink: 0; }
.sombre .ruban__piste span { color: var(--blanc); }

/* Grille des partenaires en toutes lettres */
.partenaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1px; background: var(--filet); box-shadow: 0 0 0 1px var(--filet); border-radius: var(--rayon); overflow: hidden; }
.partenaire { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 6.5rem; padding: 1.3rem 1.1rem; background: var(--blanc); color: var(--encre); text-align: center; text-decoration: none; font-family: var(--titre); font-weight: 700; font-size: .95rem; line-height: 1.35; transition: background var(--transition), color var(--transition); }
.partenaire img { max-height: 3.2rem; width: auto; filter: grayscale(1); opacity: .7; transition: filter var(--transition), opacity var(--transition); }
a.partenaire:hover, a.partenaire:focus-visible { background: var(--bleu); color: var(--blanc); }
a.partenaire:hover img, a.partenaire:focus-visible img { filter: grayscale(0) brightness(10); opacity: 1; }

/* Encadré */
.encadre { padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--creme); border-left: 4px solid var(--bleu); border-radius: 0 var(--rayon) var(--rayon) 0; }
.encadre h3 { margin-bottom: .5rem; }
.encadre p:last-child, .encadre ul:last-child { margin-bottom: 0; }
.sombre .encadre { background: var(--nuit-2); border-left-color: var(--cyan); }

/* Contenu intégré (billetterie HelloAsso) : le cadre s'adapte à la hauteur
   demandée par le service, sans jamais dépasser la largeur de la page. */
.integration {
  position: relative;
  width: 100%;
  min-height: 40rem;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--filet);
  background: var(--creme);
}
.integration iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Boutique : la mise en forme des produits vient du service, on ne pose que
   le cadre et l'espacement pour rester dans le rythme de la page. */
.boutique-shopify { min-height: 12rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.boutique-shopify .shopify-buy__product { max-width: none; }
@media (max-width: 40rem) { .integration { min-height: 46rem; } }

/* Repli quand une information n'est pas encore fournie */
.attente-site {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px dashed var(--filet);
  border-radius: var(--rayon);
  color: var(--encre-2);
}
.attente-site p:last-child { margin-bottom: 0; }

/* Bloc « information à venir » — jamais de contenu inventé */
.attente { padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px dashed var(--filet); border-radius: var(--rayon); color: var(--encre-2); }
.attente h3 { color: var(--encre); }
.attente p:last-child { margin-bottom: 0; }
.sombre .attente { border-color: var(--filet-nuit); color: rgba(255, 255, 255, .75); }

/* Fil d'Ariane */
.fil { padding-block: 1.2rem; font-size: var(--t-petit); }
.fil ol { display: flex; flex-wrap: wrap; gap: .3rem .7rem; list-style: none; margin: 0; padding: 0; }
.fil li { max-width: none; color: var(--encre-2); }
.fil li + li::before { content: '\203A'; margin-right: .7rem; }
.fil a { color: var(--encre-2); }
.fil [aria-current="page"] { color: var(--encre); font-weight: 700; }

/* Tableaux */
.tableau-defilant { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .97rem; }
caption { text-align: left; font-family: var(--titre); font-weight: 700; margin-bottom: .8rem; }
th, td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--filet); vertical-align: top; }
thead th { border-bottom: 2px solid var(--bleu); font-family: var(--titre); white-space: nowrap; }

/* Contenu rédactionnel */
.redactionnel h2 { margin-top: 3rem; }
.redactionnel h3 { margin-top: 2.2rem; }
.redactionnel > *:first-child { margin-top: 0; }
.redactionnel figure { margin: 2.5rem 0; }
.redactionnel img { border-radius: var(--rayon); }
.redactionnel figcaption { margin-top: .8rem; font-size: var(--t-petit); color: var(--encre-2); }

/* ==========================================================================
   10 bis. SÉQUENCES IMMERSIVES
   --------------------------------------------------------------------------
   Deux séquences pilotées par le défilement : « le voyage » (on traverse la
   journée, étape par étape) et la galerie horizontale.

   Principe de construction : elles reposent sur « position: sticky », JAMAIS
   sur un épinglage par script. Sans JavaScript, ou sur un petit écran, elles
   redeviennent d'elles-mêmes une simple suite de blocs empilés, parfaitement
   lisible. Rien ne peut donc rester coincé.
   ========================================================================== */

/* --- Le voyage : une journée, étape par étape -------------------------- */

.voyage { position: relative; background: var(--nuit); color: var(--blanc); }
.voyage__etapes { list-style: none; margin: 0; padding: 0; }

/* max-width: none est indispensable : les étapes sont des <li>, et la règle
   de confort de lecture appliquée à tous les <li> les empêcherait de couvrir
   l'écran. */
.etape { position: relative; max-width: none; }
.etape__image { position: relative; overflow: hidden; }
.etape__image img { width: 100%; height: 100%; object-fit: cover; }
.etape__image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 26, .42) 0%, rgba(6, 8, 26, .18) 38%, rgba(6, 8, 26, .9) 100%);
}
.etape__texte { position: relative; z-index: 2; padding-block: clamp(1.75rem, 4vw, 2.5rem); }
.etape__num {
  display: block; margin-bottom: .6rem;
  font-family: var(--titre); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .24em; color: var(--cyan);
}
.etape h3 { color: var(--blanc); font-size: var(--t-h2); margin-bottom: .5rem; }
.etape p { color: rgba(255, 255, 255, .88); max-width: 46ch; margin-bottom: 0; }

.voyage__intro { padding-block: var(--bloc) clamp(2rem, 4vw, 3rem); }
.voyage__intro h2 { color: var(--blanc); }
.voyage__rail { display: none; }

/* Grand écran : la scène se fige, les étapes se succèdent au défilement.
   La classe « actif » n'est posée QUE par le script, et les hauteurs sont
   ensuite fixées en pixels par lui : une hauteur en svh ne correspond pas
   toujours à la hauteur de fenêtre servant au calcul d'avancement, et le
   décalage laisserait apparaître du vide. Sans script, on garde donc la
   simple suite de blocs. */
@media (min-width: 62rem) {
  .voyage.actif { height: 400vh; }
  .voyage.actif .voyage__scene {
    position: sticky; top: 0;
    height: 100vh; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .voyage.actif .voyage__intro {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    padding-block: clamp(6rem, 12vh, 9rem) 0;
  }
  .voyage.actif .voyage__intro h2 { font-size: var(--t-h2); max-width: 14ch; }
  .voyage.actif .voyage__etapes { position: absolute; inset: 0; }
  /* Fond opaque obligatoire : chaque étape recouvre entièrement la précédente
     en glissant par-dessus. Sans fond, on verrait au travers. */
  .voyage.actif .etape {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: var(--nuit);
    will-change: transform;
  }
  .voyage.actif .etape__image { position: absolute; inset: 0; }
  .voyage.actif .etape__texte { padding-bottom: clamp(5rem, 12vh, 8rem); }
  .voyage.actif .etape h3 { font-size: clamp(2.2rem, 3.4vw, 3.6rem); }
  .voyage.actif .etape p { font-size: var(--t-lead); }

  /* Repères verticaux : où en est-on dans la journée */
  .voyage.actif .voyage__rail {
    display: flex; flex-direction: column; gap: .75rem;
    position: absolute; right: var(--marge); top: 50%; z-index: 4;
    transform: translateY(-50%);
  }
  .voyage__rail span {
    display: block; width: 2.5rem; height: 3px;
    background: rgba(255, 255, 255, .28);
    transform: skewX(-16deg);
    transition: background var(--transition), width var(--transition);
  }
  .voyage__rail span.actif { background: var(--cyan); width: 4rem; }
}

/* Écran large mais peu haut (portables 13-14 pouces) : le texte le plus long
   ne doit pas se faire couper par le bas de la scène. */
@media (min-width: 62rem) and (max-height: 820px) {
  .voyage.actif .etape__texte { padding-bottom: clamp(2.25rem, 5vh, 3.5rem); }
  .voyage.actif .etape h3 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
  .voyage.actif .etape p { font-size: 1rem; }
  .voyage.actif .voyage__intro h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
}

/* Petit écran : une suite de blocs, sans aucun mécanisme */
@media (max-width: 61.99rem) {
  .etape { margin-bottom: 2rem; }
  .etape__image { aspect-ratio: 4 / 3; border-radius: var(--rayon); }
  .etape__texte { padding-top: 1.25rem; }
  .voyage { padding-bottom: var(--bloc); }
}

/* --- Galerie horizontale ------------------------------------------------ */

/* Par défaut — et donc sans script, et sur petit écran — c'est une grille. */
.galerie-h__piste {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* Le script n'active le défilement latéral que s'il peut vraiment le piloter. */
.galerie-h.actif { position: relative; }
.galerie-h.actif .galerie-h__scene {
  position: sticky; top: 0;
  height: 100vh; display: flex; align-items: center; overflow: hidden;
}
.galerie-h.actif .galerie-h__piste {
  display: flex; width: max-content; gap: clamp(.75rem, 1.5vw, 1.5rem);
  padding-inline: var(--marge);
  will-change: transform;
}
/* La hauteur commande, la largeur suit le format de la photo : les images
   occupent alors vraiment l'écran pendant le défilement latéral. */
.galerie-h.actif .galerie__element {
  flex: 0 0 auto;
  height: min(68svh, 38rem);
  width: auto;
  aspect-ratio: 4 / 3;
}

/* --- Barre de progression de lecture ------------------------------------ */

.progression {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--cyan);
  pointer-events: none;
}

/* ==========================================================================
   11. GALERIE ET VISIONNEUSE
   ========================================================================== */

.galerie { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.galerie__element {
  position: relative; margin: 0; padding: 0; border: 0; background: var(--creme);
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rayon); cursor: zoom-in;
}
.galerie__element img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--sortie); }
.galerie__element::after { content: ''; position: absolute; inset: 0; background: var(--bleu); opacity: 0; transition: opacity var(--transition); }
.galerie__element:hover img, .galerie__element:focus-visible img { transform: scale(1.07); }
.galerie__element:hover::after, .galerie__element:focus-visible::after { opacity: .16; }
/* En grille, TOUTES les vignettes ont le même format : la mosaïque reste
   régulière, sans lignes qui se décalent. Le format d'origine de la photo
   reste visible en grand dans la visionneuse. */
.galerie .galerie__element,
.galerie .galerie__element--haute { aspect-ratio: 4 / 3; }

/* En défilement latéral, seule la hauteur est commune : les formats peuvent
   alors différer sans rien désaligner, tout est calé en haut et en bas. */
.galerie-h.actif .galerie__element--haute { aspect-ratio: 3 / 4; }

.visionneuse {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 8, 26, .97);
}
.visionneuse.ouverte { display: flex; }
.visionneuse img { max-width: min(100%, 80rem); max-height: 80vh; width: auto; object-fit: contain; border-radius: var(--rayon); }
.visionneuse__legende { position: absolute; left: 50%; bottom: clamp(1rem, 3vw, 2.5rem); transform: translateX(-50%); max-width: min(90%, 46rem); margin: 0; color: rgba(255, 255, 255, .85); text-align: center; font-size: var(--t-petit); }
.visionneuse__bouton {
  position: absolute; width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--filet-nuit); border-radius: var(--rayon);
  background: rgba(255, 255, 255, .06); color: var(--blanc);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.visionneuse__bouton:hover, .visionneuse__bouton:focus-visible { background: var(--cyan); color: var(--nuit); }
.visionneuse__fermer { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.visionneuse__prec { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.visionneuse__suiv { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   12. FORMULAIRES
   ========================================================================== */

.formulaire { display: grid; gap: 1.4rem; }
.champ { display: grid; gap: .45rem; }
.champ--duo { display: grid; gap: 1.4rem; }
@media (min-width: 40rem) { .champ--duo { grid-template-columns: 1fr 1fr; } }

.champ label, .legende { font-family: var(--titre); font-weight: 700; font-size: .95rem; }
.champ .indication { font-size: var(--t-petit); color: var(--encre-2); font-weight: 400; }

.champ input, .champ select, .champ textarea {
  width: 100%; padding: .9rem 1rem;
  border: 0; border-radius: var(--rayon);
  box-shadow: inset 0 0 0 1px var(--filet);
  background: var(--blanc); color: var(--encre);
  font-family: var(--corps); font-size: 1rem;
  transition: box-shadow var(--transition);
}
.champ input:hover, .champ select:hover, .champ textarea:hover { box-shadow: inset 0 0 0 1px var(--encre-2); }
.champ input:focus, .champ select:focus, .champ textarea:focus { box-shadow: inset 0 0 0 2px var(--bleu); outline-offset: 2px; }
.champ textarea { min-height: 11rem; resize: vertical; }
.champ--invalide input, .champ--invalide select, .champ--invalide textarea { box-shadow: inset 0 0 0 2px #B3001B; }
.erreur-champ { font-size: var(--t-petit); color: #B3001B; font-weight: 700; }

fieldset { margin: 0; padding: 0; border: 0; }
.choix { display: grid; gap: .65rem; margin-top: .7rem; }
.choix label { display: flex; align-items: flex-start; gap: .7rem; font-family: var(--corps); font-weight: 400; cursor: pointer; }
.choix input { width: 1.15rem; height: 1.15rem; margin-top: .3rem; flex-shrink: 0; accent-color: var(--bleu); box-shadow: none; }

.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.message { padding: 1.2rem 1.4rem; border-left: 4px solid var(--bleu); background: var(--creme); border-radius: 0 var(--rayon) var(--rayon) 0; }
.message p:last-child { margin-bottom: 0; }
.message--succes { border-left-color: #0A7B33; }
.message--erreur { border-left-color: #B3001B; }

/* ==========================================================================
   13. PIED DE PAGE
   ========================================================================== */

.pied { position: relative; background: var(--nuit); color: rgba(255, 255, 255, .72); padding-block: var(--bloc) 2.5rem; isolation: isolate; }
.pied::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; }
.pied a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; }
.pied__grille { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.pied__marque img { height: 3rem; width: auto; margin-bottom: 1.3rem; }
.pied__grille h2 { font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.2rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .6rem; max-width: none; }
.pied__bas { display: flex; flex-wrap: wrap; gap: .7rem 1.8rem; justify-content: space-between; align-items: center; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.8rem; border-top: 1px solid var(--filet-nuit); font-size: var(--t-petit); }
.pied__bas p { margin: 0; }
.pied__bas ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* Accès à l'espace d'administration : discret, mais toujours trouvable.
   Il est protégé par mot de passe et exclu des moteurs de recherche. */
.pied__prive { opacity: .55; }
.pied__prive:hover, .pied__prive:focus-visible { opacity: 1; }

/* ==========================================================================
   14. ANIMATIONS
   ========================================================================== */

/* État de départ posé en CSS pour éviter tout clignotement avant le JS.
   Si le JS ne s'exécute pas, la classe « js » n'est jamais posée et tout
   reste visible. */
.js [data-anime] { opacity: 0; }
.js [data-anime="monte"] { transform: translateY(28px); }
.js [data-anime="masque"] > * { transform: translateY(101%); }

/* Titres découpés en mots pour une apparition en cascade */
.mot { display: inline-block; overflow: hidden; vertical-align: top; }
.mot > span { display: inline-block; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-anime], .js [data-anime="monte"], .js [data-anime="masque"] > * { opacity: 1; transform: none; }
  .bouton:hover, .carte:hover, .vignette:hover { transform: none; }

  /* Les séquences au défilement redeviennent de simples blocs empilés.
     Sans cela, sur un grand écran, les quatre étapes se superposeraient. */
  .voyage { height: auto; padding-bottom: var(--bloc); }
  .voyage__scene { position: static; height: auto; display: block; }
  .voyage__intro { position: static; padding-block: var(--bloc) clamp(2rem, 4vw, 3rem); }
  .voyage__etapes { position: static; }
  .etape { position: relative; opacity: 1 !important; margin-bottom: 2.5rem; }
  .etape__image { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rayon); }
  .etape__texte { padding-block: 1.25rem 0; transform: none !important; opacity: 1 !important; }
  .voyage__rail { display: none; }
  .galerie-h__piste { display: grid; }
}

/* ==========================================================================
   15. IMPRESSION
   ========================================================================== */

@media print {
  .entete, .pied, .visionneuse, .boutons, .burger, .defilement, .ruban, .annonce { display: none !important; }
  body { color: #000; font-size: 11pt; background: #fff; }
  .sombre, .heros { background: none !important; color: #000 !important; }
  .heros__fond, .heros__voile { display: none; }
  .js [data-anime] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Code venu d'un autre service (carte, vidéo, agenda…). On ne présume rien de
   son contenu : on l'empêche seulement de déborder, et on redimensionne les
   cadres pour qu'ils tiennent sur un téléphone. */
.bloc-insere { max-width: 100%; overflow-x: auto; }
.bloc-insere iframe,
.bloc-insere video,
.bloc-insere img { max-width: 100%; border: 0; border-radius: var(--rayon); }
.bloc-insere iframe { width: 100%; min-height: 22rem; }