@font-face {
  font-family: 'Limelight';
  src: url('../fonts/Limelight-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- DM Sans - texte courant --------------------------------------------- */

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* =============================================================================
   01. RESET & BASES
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* compense l'en-tête fixe lors des ancres */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

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

/* Sans cette ligne, un élément qui porte à la fois `hidden` et une classe qui
   impose un `display` (.chips, .segmented…) reste visible : c'est ce qui
   laissait la liste des années affichée dans l'onglet « par instrument ». */
[hidden] { display: none !important; }
img { height: auto; border: 0; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

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

::selection { background: var(--accent-600); color: #fff; }

/* Barre de défilement discrète (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-1); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-700); }

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--accent-600);
  color: #fff;
  padding: 12px 22px;
  font-weight: 600;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* =============================================================================
   02. DESIGN TOKENS
   ========================================================================== */

:root {
  /* LA PALETTE : CINQ ENCRES, ET RIEN D'AUTRE.
     Toutes les couleurs du site sont prises dans les cinq encres des disques
     postérisés, du cœur vers le bord. Un reflet ou une ombre peut en prendre
     une avec de la transparence, mais jamais une autre teinte. Les seules
     autres couleurs sont les neutres (fonds, textes, traits gris) plus bas.

       --encre-5  #C83C33  le rouge vif : cœur des disques, et TOUT ce qui est
                           en couleur (titres, chiffres, surtitres, icônes,
                           liens, boutons pleins, états actifs)
       --encre-4  #A41E1A  entre le rouge vif et le logo : les disques
                           seulement (disques de fond, survols, boutons)
       --encre-3  #7F0000  le rouge du logo
       --encre-2  #610303  bandelettes des cartes, fonds sombres
       --encre-1  #460404  le dernier anneau

     Les valeurs sont définies avec les disques (§ formes postérisées) ; les
     noms ci-dessous ne sont que des raccourcis vers elles. */
  --accent-900: var(--encre-1);
  --accent-800: var(--encre-1);
  --accent-700: var(--encre-2);
  --accent-600: var(--encre-3);
  --accent-500: var(--encre-5);
  --accent-400: var(--encre-5);
  --accent-300: var(--encre-5);
  --accent-2:   var(--encre-5);
  --accent-200: var(--encre-5);

  /* LA COULEUR DES MOTS ACCENTUÉS DANS LES TITRES. Le jeton est gardé : pour
     changer la couleur des mots accentués partout à la fois, c'est ici. */
  --accent-titre: var(--accent-300);

  /* LE VERRE DÉPOLI. Un seul réglage, partagé par l'en-tête, les boutons à
     contour et tous les encarts (rémunération, mentions légales, notes de la
     page « Nous rejoindre ») : un fond très sombre à peine translucide, un
     flou derrière, un contour fin. `saturate(.9)` désature légèrement ce qui
     passe dessous - sans lui, un disque rouge colore tout l'encart en rose.
     Un fond SOMBRE, à peine teinté de rouge : un essai plus clair (gris) a
     été abandonné le 27/09. Les quatre teintes ci-dessous sont les SEULS
     réglages de ce verre. */
  --verre-fond:          rgba(20, 14, 15, .55);   /* encarts et cartes (comme les boutons à contour) */
  --verre-fond-survol:   rgba(32, 23, 24, .66);   /* cartes au survol */
  --verre-bouton:        rgba(20, 14, 15, .55);   /* boutons à contour */
  --verre-entete:        rgba(20, 15, 16, .78);   /* en-tête, en haut de page */
  --verre-entete-defile: rgba(22, 17, 18, .90);   /* en-tête, page défilée */
  --verre-trait: rgba(255, 255, 255, .15);

  /* LA FORCE DU FLOU. Une seule valeur pour les vitres des sections et pour
     tout ce qui porte un fond de verre (en-tête, cartes, encarts, boutons à
     contour) : un disque vu à travers une carte est aussi flou que le même
     disque vu à travers la vitre d'une section. */
  --flou-vitre:  40px;
  --verre-flou:  blur(var(--flou-vitre)) saturate(.9);

  /* --- Neutres chauds --------------------------------------------------- */
  --bg:         #0A0708;
  --surface-1:  #150F10;   /* sections alternées - plus contrastées qu'avant */
  --surface-2:  #1D1617;
  --surface-3:  #281E1F;
  --surface-4:  #372A2B;
  --surface-deep: #060405;  /* sections « fosse », les plus sombres */

  --text:       #F7F2F0;
  --text-muted: #BDAEAE;
  --text-dim:   #A09091;
  --ombre-texte: 0 0 10px rgba(10, 7, 8, .85), 0 1px 2px rgba(10, 7, 8, .6);

  --line:        rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .18);
  --line-accent: rgba(200, 60, 51, .38);   /* encre 5 */

  /* --- Typographie ------------------------------------------------------ */
  --font-display: 'Limelight', 'Iowan Old Style', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.0625rem;  /* 17 */
  --fs-lg:   clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
  --fs-xl:   clamp(1.35rem, 0.9vw + 1.1rem, 1.75rem);
  --fs-2xl:  clamp(1.6rem, 1.6vw + 1.1rem, 2.25rem);
  --fs-3xl:  clamp(1.95rem, 2.6vw + 1.2rem, 3.1rem);
  --fs-4xl:  clamp(2.4rem, 4.6vw + 1rem, 5rem);

  /* --- Rythme vertical -------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 136px;

  /* Environ un quart de moins qu'avant (108 → 80 px au plus large) : les
     sections se suivaient avec un grand vide entre elles, qui faisait lire la
     page comme une suite de diapositives plutôt que comme une page. */
  --section-y: clamp(34px, 4.4vw, 64px);   /* resserré le 28/09 (était 42 → 80 px) */

  /* --- Formes & profondeur ---------------------------------------------- */
  /* ANGLES DROITS. Les cinq jetons valent zéro : c'est le seul endroit à
     changer si vous voulez un jour revenir à des coins arrondis (6 / 10 / 16 /
     24 / 999 px étaient les anciennes valeurs).
     Quelques objets restent ronds malgré tout, parce que leur forme EST leur
     sens - le bouton de lecture d'une vidéo, les puces du diaporama, le
     chargeur qui tourne, l'interrupteur. Chacun porte son propre
     `border-radius` et un commentaire. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-pill: 0px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, .6);
  --shadow-accent: 0 18px 50px rgba(127, 0, 0, .35);

  --header-h: 76px;
  --container: 1240px;
  --container-narrow: 760px;

  --ease: cubic-bezier(.4, .14, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* --- Langage d'interaction (voir § 19) --------------------------------- */
  --hover-ring: rgba(200, 60, 51, .45);    /* encre 5 */       /* même contour partout */
  --hover-speed: .28s;
  --zoom-speed: .6s;                           /* images : plus lent que le bloc */
}

@media (max-width: 720px) {
  :root { --header-h: 80px; }
  html { scroll-padding-top: 92px; }
}

/* =============================================================================
   03. TYPOGRAPHIE
   ========================================================================== */

/* Graisse 400 : c'est la seule que possède Limelight. Demander autre chose
   déclencherait un faux gras calculé par le navigateur.
   L'espacement passe de NÉGATIF à légèrement positif : Limelight a des lettres
   larges et très contrastées, les resserrer les empâte. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

h5, h6 { font-family: var(--font-body); font-weight: 600; line-height: 1.3; }

.h-display { font-size: var(--fs-4xl); font-weight: 400; letter-spacing: 0; }
.h-1 { font-size: var(--fs-3xl); }
.h-2 { font-size: var(--fs-2xl); }
.h-3 { font-size: var(--fs-xl); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--text-muted);
}

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.accent { color: var(--accent-titre); }

/* Sur-titre : petite étiquette au-dessus des titres de section */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

/* Titre de section avec filet */
.section-head { max-width: 780px; margin-bottom: var(--space-7); }
.section-head p { margin-top: var(--space-4); }

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--center .eyebrow::before { display: none; }

/* =============================================================================
   04. LAYOUT & UTILITAIRES
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--space-5), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--space-5), var(--container-narrow)); }

@media (max-width: 720px) {
  .container { width: calc(100% - 2 * var(--space-4)); }
}

.section {
  padding-block: var(--section-y);
  position: relative;
  /* `clip` (et non `hidden`) : rogne les lueurs décoratives sans créer de conteneur
     de défilement, ce qui casserait les colonnes en position sticky. */
  overflow: clip;
}
.section--tight { padding-block: clamp(28px, 3.6vw, 50px); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.stack > * + * { margin-top: var(--space-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Masque un élément SECONDAIRE sur téléphone. À réserver à ce qui a un
   équivalent ailleurs dans la page : sur un petit écran, on fait défiler, donc
   un élément caché ici est un élément définitivement perdu pour ce visiteur.
   `!important` parce que la règle doit gagner contre les `display: flex` et
   `display: inline-flex` posés par les composants (les boutons, notamment). */
@media (max-width: 620px) {
  .hide-mobile { display: none !important; }
}

/* -----------------------------------------------------------------------------
   LES FORMES POSTÉRISÉES
   -----------------------------------------------------------------------------
   Une seule règle gouverne tout ce bloc : LE MOTIF D'ENCRES EST ÉCRIT UNE
   FOIS, et toutes les formes le réutilisent. C'est ce qui fait qu'un disque du
   haut de page et un losange du bas ont exactement les mêmes paliers, aux
   mêmes proportions. Si vous changez `--encres`, tout le site suit d'un coup ;
   si vous écrivez des couleurs à la main dans une forme, vous cassez l'unité.

   Deuxième règle : ces formes sont ÉNORMES (1300 à 2600 px) et leur centre est
   posé près d'un bord, voire dehors. On n'en voit donc jamais qu'un morceau -
   deux ou trois paliers qui traversent la section. Une forme entièrement
   visible redeviendrait une tache décorative, exactement ce qu'on fuit.

   Emploi :
     <span class="forme forme--disque" style="--x:96%;--y:-14%"></span>
   `--x` et `--y` placent le CENTRE de la forme dans la section (0 % = bord
   gauche/haut, 100 % = bord droit/bas). `--forme-size` règle le diamètre.
   -------------------------------------------------------------------------- */

:root {
  /* -------------------------------------------------------------------------
     LES ENCRES - le rouge du logo, en cinq clartés.

     La rampe est construite autour de #7F0000 : il en est le palier du
     milieu (`--encre-3`). Au-dessus, le même rouge éclairci ; en dessous, le
     même rouge assombri jusqu'au bordeaux presque noir. Aucune autre teinte :
     pas d'orange au cœur, pas de brun sur les bords, pas de rose.

     Ce sont des couleurs PLEINES et non des transparences : c'est ce qui donne
     le bord franc entre deux paliers.
     ---------------------------------------------------------------------- */
  --encre-0: #0B0809;   /* = le fond de page, il ne bouge jamais */
  --encre-1: #460404;   /* le dernier anneau */
  --encre-2: #610303;
  --encre-3: #7F0000;   /* le logo */
  /* À mi-chemin entre le rouge vif et le logo, pour que l'anneau se
     distingue nettement du cœur. Ne sert que dans les disques. */
  --encre-4: #A41E1A;
  /* Le rouge vif, cœur de tous les disques. Plus clair que le logo pour ne pas
     se confondre avec lui, mais un peu désaturé pour ne pas être criard. */
  --encre-5: #C83C33;

  /* PLUS DE CŒUR SAUMON.
     Le palier central empruntait la couleur la plus claire du site : ça
     faisait une lampe, mais ça faisait surtout une couleur qui n'appartenait
     pas à la famille des encres - un rose dans une page d'oxblood. L'échelle
     s'arrête donc à son propre sommet, `--encre-5`.
 */

  /* Du cœur chaud vers le fond de page au bord.

     ⚠ LE DERNIER PALIER EST `transparent`, PAS UNE COULEUR.
     Tant que la rampe se terminait sur `--encre-0`, la forme se fondait
     parfaitement… mais seulement sur une section au fond de page. Dans une
     section plus sombre (`.section--deep`, #060405), ce dernier palier était
     plus CLAIR que son support : on voyait alors le CARRÉ qui porte le
     dégradé, bords nets, en travers de la section. Un dégradé radial ne
     découpe pas son élément - il le remplit jusqu'aux coins.
     `--encre-0` reste donc en avant-dernier (invisible sur le fond de page,
     et à 2 % près sur un fond plus sombre), et c'est le transparent qui
     termine. La forme n'a plus de support visible nulle part. */
  /* Cinq anneaux égaux, les mêmes que dans les survols des boutons et des
     cartes : le disque s'arrête sur l'encre 1. */
  --encres:
    var(--encre-5)   0     17.6%,
    var(--encre-4)  17.6%  35.2%,
    var(--encre-3)  35.2%  52.8%,
    var(--encre-2)  52.8%  70.4%,
    var(--encre-1)  70.4%  88%,
    transparent     88%   100%;

  /* IL N'Y A PLUS DE RAMPE INVERSE.
     Un disque dont le centre est sombre, posé sur une page sombre, ne se lit
     pas comme « l'autre sens » : il se lit comme un TROU. Et comme les deux
     familles de formes tiraient chacune leur ordre d'un côté, deux sections
     voisines pouvaient montrer le même objet à l'envers l'un de l'autre -
     ce qui ne raconte rien, sinon qu'on a varié pour varier.
     Un seul ordre, donc : le plus clair au centre, le plus sombre au bord. C'est d'ailleurs le seul
     qui corresponde à quelque chose de réel - une lumière. */
}


/* UNE SEULE TAILLE POUR TOUS LES DISQUES (et pour le halo latéral).
   Les quatre tailles précédentes (md, lg, xl, xxl) servaient à varier d'une
   section à l'autre, mais un disque plus petit que le voisin ne se lit pas
   comme « un autre disque », il se lit comme le même disque vu de plus loin
   - la page perd son échelle. Une seule taille, très grande, et c'est la
   POSITION qui varie : gauche ou droite, haut, milieu ou bas.
   Le centre est posé juste au-delà du bord de la section (voir le HTML) :
   on n'en voit qu'une petite part, les paliers balaient le reste. La taille
   suit la largeur de l'écran pour que cette « petite part » reste la même
   proportion sur un téléphone et sur un grand écran. */
:root { --disque-size: clamp(1800px, 190vw, 3000px); }

.forme {
  --forme-size: var(--disque-size);
  --x: 100%;
  --y: 0%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: var(--forme-size);
  height: var(--forme-size);
  pointer-events: none;
  z-index: 0;
  /* Pas d'opacité ici : ce sont les COULEURS qui sont sombres, pas la forme qui
     est effacée. Diluer un aplat d'encre, c'est perdre le bord franc. */
}

/* (Les modificateurs de taille ont été retirés : voir `--disque-size`.) */

/* LE DISQUE POSTÉRISÉ.
   Plus aucune lueur derrière (retirée le 30/09) : le disque s'arrête net sur
   son dernier palier, comme un aplat d'encre imprimé. La lumière diffuse est
   réservée aux halos seuls (plus bas). */
.forme--disque {
  background: radial-gradient(circle closest-side, var(--encres));
}

/* -----------------------------------------------------------------------------
   LA VITRE : LES DISQUES VUS À TRAVERS DU VERRE DÉPOLI
   -----------------------------------------------------------------------------
   Un disque n'est net que dans sa propre section. Dans les sections voisines,
   au-dessus comme en dessous, on voit le même disque, au même endroit, mais
   flouté et voilé, comme derrière une vitre. Une section peut aussi porter
   son propre disque flouté (il remplace les anciens halos).
   La vitre couvre toute la section : un trait clair marque ses bords et un
   reflet oblique très léger la traverse. Elle projette une ombre légère sur
   les blocs voisins (plus bas), mais aucune à l'intérieur.
   Le flou n'est pas un filtre : ce sont les paliers du disque qui passent
   en dégradé les uns dans les autres, sur la largeur qu'aurait le flou
   `--flou-vitre`. Même rendu, mais rien à recalculer au défilement, ce qui
   ménage les téléphones anciens.
   Le centre des disques repris d'une autre section (data-suite) est recalé
   au pixel près par js/main.js (initDisques).
   Emploi :
     <div class="verre" aria-hidden="true">
       <span class="forme forme--disque" data-suite="nom" style="--x:calc(100% + 60px);--y:60px"></span>
     </div>
   -------------------------------------------------------------------------- */
:root {
  /* Demi-largeur d'une transition : 1,25 fois le flou donne la même pente
     qu'un vrai flou gaussien au milieu du passage. js/main.js la réduit sur
     les petits disques, pour que leurs anneaux restent lisibles. */
  --flou-demi: calc(var(--flou-vitre) * 1.25);
}
.verre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.verre .forme--disque {
  --encres-floues:
    var(--encre-5) 0,
    var(--encre-5) calc(17.6% - var(--flou-demi)),
    var(--encre-4) calc(17.6% + var(--flou-demi)),
    var(--encre-4) calc(35.2% - var(--flou-demi)),
    var(--encre-3) calc(35.2% + var(--flou-demi)),
    var(--encre-3) calc(52.8% - var(--flou-demi)),
    var(--encre-2) calc(52.8% + var(--flou-demi)),
    var(--encre-2) calc(70.4% - var(--flou-demi)),
    var(--encre-1) calc(70.4% + var(--flou-demi)),
    var(--encre-1) calc(88% - var(--flou-demi)),
    transparent    calc(88% + var(--flou-demi));
  background: radial-gradient(circle closest-side, var(--encres-floues));
}
.verre::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 38%),
    rgba(14, 10, 11, .30);
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.page-hero:has(.forme--disque) { border-bottom: 0; }

/* L'ombre des vitres. Chaque vitre projette une ombre légère sur les blocs
   voisins, au-dessus et en dessous, jamais sur elle-même. Deux vitres qui se
   suivent ne se font pas d'ombre. */
:root {
  --ombre-vitre-haut: linear-gradient(to bottom, rgba(0, 0, 0, .22), rgba(0, 0, 0, .07) 9px, rgba(0, 0, 0, 0) 26px);
  --ombre-vitre-bas:  linear-gradient(to top,    rgba(0, 0, 0, .22), rgba(0, 0, 0, .07) 9px, rgba(0, 0, 0, 0) 26px);
}
/* Sous une vitre */
main > :has(> .verre) + :is(.section, .page-hero, .agenda-band):not(:has(> .verre)),
main:has(> :last-child > .verre) ~ .site-footer:not(:has(> .verre)) {
  --ombre-haut: var(--ombre-vitre-haut);
}
/* Au-dessus d'une vitre (dans la galerie, les onglets s'intercalent) */
main > :is(.section, .page-hero, .agenda-band):not(:has(> .verre)):has(+ * > .verre),
main > .page-hero--onglets,
main:has(~ .site-footer > .verre) > :is(.section, .page-hero, .agenda-band):last-child:not(:has(> .verre)) {
  --ombre-bas: var(--ombre-vitre-bas);
}
main > :has(> .verre) + :is(.section, .page-hero, .agenda-band):not(:has(> .verre))::after,
main:has(> :last-child > .verre) ~ .site-footer:not(:has(> .verre))::after,
main > :is(.section, .page-hero, .agenda-band):not(:has(> .verre)):has(+ * > .verre)::after,
main > .page-hero--onglets::after,
main:has(~ .site-footer > .verre) > :is(.section, .page-hero, .agenda-band):last-child:not(:has(> .verre))::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ombre-haut, none), var(--ombre-bas, none);
}
.agenda-band > .container { position: relative; z-index: 1; }

.section > .container,
.hero > .container,
.page-hero > .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   UN SEUL FOND POUR TOUTES LES SECTIONS
   Plus de changement de teinte ni de trait entre deux sections : ce sont les
   disques et les halos qui rythment la page. Sous un disque, la section
   suivante le prolonge derrière un verre flouté (voir .verre). Les classes
   --surface, --deep et --divided restent dans le HTML mais n'ont plus d'effet.
   ------------------------------------------------------------------------ */
.section--surface,
.section--deep { background: none; box-shadow: none; }
.section--divided { position: relative; }

/* =============================================================================
   05. BOUTONS & LIENS
   ========================================================================== */

/* -----------------------------------------------------------------------------
   BOUTONS - trois tailles, et rien d'autre.
   -----------------------------------------------------------------------------
   Le site comptait six hauteurs différentes pour des objets qui sont pourtant
   tous « une pastille sur laquelle on clique » : 41, 42, 43, 49, 53 et 62 px.
   Chacune venait d'un endroit différent (le bouton du menu avait son propre
   rembourrage, la pastille « Galerie » n'était même pas un bouton mais un lien
   de navigation déguisé, les filtres de la galerie avaient encore une autre
   mesure). Résultat : deux pastilles côte à côte dans l'en-tête, de hauteur et
   de graisse différentes.

   La hauteur est maintenant FIXÉE par `--btn-h`, pas déduite du rembourrage :
   c'est la seule façon de garantir que deux boutons voisins s'alignent, quelle
   que soit la taille de leur texte ou la présence d'une icône. Le rembourrage
   vertical ne sert plus que de filet pour un texte qui passerait à la ligne.

   Trois tailles, et on s'y tient :
     .btn--sm   42 px - dans l'en-tête, les pieds de bloc, les listes
     .btn       52 px - la taille par défaut, dans le corps des sections
     .btn--lg   60 px - les appels à l'action principaux (hero) */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--line-strong);
  --btn-h: 52px;
  --btn-pad-x: 26px;
  --btn-fs: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 11px var(--btn-pad-x);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--btn-fs);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
}
/* Le bouton ne se soulève plus au survol - il a déjà son disque d'encre, et
   deux réponses pour un même geste, c'en est une de trop. Il garde en
   revanche un ENFONCEMENT au clic : ce n'est pas de la décoration, c'est le
   seul retour qui dise « c'est parti », et il n'arrive que si on clique. */
.btn:active { transform: translateY(1px); }

.btn svg { flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
/* Sauf pour la pastille « Galerie » : son icône est un PICTOGRAMME, pas une
   flèche. Le faire glisser vers la droite ne veut rien dire - une flèche
   avance parce qu'elle montre une direction, une image ne va nulle part. */
.nav__pill:hover svg { transform: none; }

.btn--sm { --btn-h: 42px; --btn-pad-x: 20px; --btn-fs: var(--fs-xs); }
.btn--lg { --btn-h: 60px; --btn-pad-x: 32px; --btn-fs: var(--fs-base); }
.btn--block { width: 100%; }

/* -----------------------------------------------------------------------------
   LE BOUTON PLEIN, ET LE DISQUE QUI S'Y RÉPAND
   -----------------------------------------------------------------------------
   Au repos, un aplat : aucun palier. Un bouton n'est jamais le sujet d'une
   page, donc il ne raconte rien tant qu'on ne s'adresse pas à lui. Au survol,
   un disque d'encre naît dans le coin bas-gauche et se répand jusqu'au coin
   opposé - le même objet que les fonds du site, en plus petit.

   Ce geste est RÉSERVÉ aux boutons pleins. Sur un bouton à contour il faisait
   autre chose : faute de fond, le disque ne passait pas par-dessus une
   couleur, il en posait une - donc au lieu d'animer le bouton, il le
   transformait. Deux effets différents sous un même nom, c'est une règle qui
   n'en est pas une. Les boutons à contour ont donc leur propre survol, plus
   bas, et le disque ne sert plus qu'ici.

   Ce qui est animé : UNIQUEMENT `transform`. Jamais un dégradé, jamais un
   filtre, jamais une taille - ce sont les trois façons de rendre une
   animation saccadée. Le dégradé est peint une fois, puis déplacé par le
   compositeur, ce que la carte graphique fait sans effort.

   La géométrie : le carré fait 270 % de la largeur du bouton, centré sur le
   coin bas-gauche, donc son rayon vaut 135 % de cette largeur. La dernière
   bande s'arrête à 92 %, ce qui laisse un rayon PLEIN de 1,24 largeur -
   toujours plus que la diagonale du bouton, quelle que soit la taille des
   trois. Sans ce 92 %, la couleur de fin remplirait aussi les coins du carré
   et le front qui avance serait carré, pas rond. Et si le carré était plus
   grand, le bouton ne recouvrirait que le cœur du disque : on ne verrait
   qu'un seul palier au lieu de trois ou quatre.
   -------------------------------------------------------------------------- */
.btn--primary {
  --btn-bg: var(--encre-5);
  --btn-fg: #fff;
  --btn-border: var(--encre-5);
  /* Plus de lueur rouge sous le bouton (28/09) : elle se lisait comme une
     ombre portée, c'est-à-dire une élévation - ce que le reste du site a
     abandonné. Le bouton est un aplat ; le disque d'encre au survol suffit. */
  /* `isolation` fait du bouton un contexte d'empilement - sans quoi le disque
     passerait PAR-DESSUS le texte, un pseudo-élément positionné se peignant
     après le contenu en ligne. `overflow` le découpe aux bords du bouton. */
  isolation: isolate;
  overflow: hidden;
}
.btn--primary:hover,
.btn--primary:focus-visible { --btn-border: var(--encre-5); }

.btn--primary::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;                 /* au-dessus du fond du bouton, sous son texte */
  /* 235 % et non 270 % : un bouton est large et plat, donc sa diagonale vaut
     à peine plus que sa largeur. À 270 %, le bouton ne recouvrait que les
     trois quarts du rayon et la dernière bande n'apparaissait qu'en filet
     dans le coin opposé. À 235 %, elle occupe franchement ce coin. */
  width: 235%;
  min-width: 200px;
  max-width: 900px;
  aspect-ratio: 1;
  pointer-events: none;
  /* Les paliers d'un disque, en petit : le rouge vif au cœur, puis les
     encres suivantes. Le texte blanc reste lisible sur chacune. */
  background: radial-gradient(circle closest-side,
    var(--encre-5)  0    18.4%,
    var(--encre-4) 18.4% 36.8%,
    var(--encre-3) 36.8% 55.2%,
    var(--encre-2) 55.2% 73.6%,
    var(--encre-1) 73.6% 92%,
    transparent    92%  100%);
  transform: translate(-50%, 50%) scale(0);
  /* Le départ est plus lent que le retour : on regarde l'encre se répandre,
     on ne regarde pas l'encre repartir. */
  transition: transform .52s var(--ease-out);
}
.btn--primary:hover::before,
.btn--primary:focus-visible::before { transform: translate(-50%, 50%) scale(1); }
.btn--primary:not(:hover)::before { transition-duration: .3s; }

/* Le contour du bouton secondaire ne peut pas être celui des cartes : posé sur
   une photo, `--line-strong` disparaît et le bouton n'a plus l'air d'un bouton -
   c'est net sur la photo d'accueil. Il a donc son propre contour, plus franc.

   Au survol il prend EXACTEMENT l'état de la pastille « Galerie » quand on
   est déjà sur la galerie : un rouge léger, translucide, et un contour rouge
   franc. Un fond translucide plutôt qu'un aplat, parce que ces boutons se
   posent aussi sur une photo - un aplat y ferait un trou, alors qu'un voile
   laisse l'image transparaître. Et comme les deux états sont désormais le
   même, ils sont déclarés au même endroit (§ en-tête, `.nav__pill`). */
.btn--ghost {
  --btn-border: rgba(255, 255, 255, .30);
  /* Un verre dépoli sombre. Le fond seul ne suffisait pas : sur une photo
     chargée, un rectangle simplement assombri garde tous les détails de
     l'image et le texte du bouton se bat avec eux. Le flou efface ces
     détails sans effacer la photo - on voit toujours qu'il y a quelque chose
     derrière, mais plus quoi, et c'est précisément ce qu'on veut sous un
     mot à lire. Assombrir plutôt qu'éclaircir, parce que ça marche aussi
     sur une photo claire. */
  --btn-bg: var(--verre-bouton);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  --btn-bg: rgba(127, 0, 0, .28);
  --btn-border: var(--accent-500);
  --btn-fg: var(--text);
}

/* Variante neutre (aucun usage dans les pages aujourd'hui, gardée pour les
   actions secondaires d'un formulaire). Elle n'est ni rouge ni transparente,
   donc elle ne prend ni le disque ni le voile : elle s'éclaircit, point. */
.btn--solid {
  --btn-bg: var(--surface-3);
  --btn-border: transparent;
}
.btn--solid:hover,
.btn--solid:focus-visible { --btn-bg: var(--surface-4); }

/* Lien texte avec soulignement animé */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-2);
  font-weight: 600;
  position: relative;
}
.link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -3px;
  height: 1px;
  background: currentColor;
  transition: right .3s var(--ease-out);
}
.link:hover::after { right: 0; }
/* Variante claire (adresse e-mail posée sur une carte sombre) : le rouge seul
   serait trop peu contrasté pour un texte de cette taille. */
.link--clair { color: var(--text); }
.link--clair .ico { color: var(--accent-2); }

/* Lien inline dans un paragraphe */
.prose a,
a.inline-link {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-accent);
  transition: text-decoration-color .2s, color .2s;
}
.prose a:hover,
a.inline-link:hover { color: var(--text); text-decoration-color: currentColor; }

/* Étiquette / badge */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tag--accent {
  border-color: var(--line-accent);
  background: rgba(127, 0, 0, .18);
  color: var(--accent-200);
}
/* Carte générique */
.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.card:hover { border-color: var(--hover-ring); }

/* Carte d'appel en bas d'un onglet de la galerie (chaîne YouTube, photos
   d'archives) : un texte et un bouton, côte à côte puis empilés. */
.carte-appel {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
}
.carte-appel > div { flex: 1 1 320px; max-width: 72ch; }
.carte-appel .h-3 { margin-bottom: 6px; }
.carte-appel p { font-size: var(--fs-sm); }
.carte-appel .btn, .carte-appel .link { flex: none; }

/* =============================================================================
   06. EN-TÊTE + NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  transition: border-color .35s var(--ease);
}

/* ATTENTION - le voile dépoli est porté par ce ::before, et surtout PAS par
   .site-header lui-même. Un élément qui possède un `backdrop-filter` (ou un
   `filter`, ou un `transform`) devient le « bloc conteneur » de ses enfants en
   position: fixed. Le menu mobile, qui est un enfant de l'en-tête et se veut
   plein écran, se retrouvait alors enfermé dans les 72 px de l'en-tête : il
   s'ouvrait dans le vide dès que la page était défilée. En déplaçant l'effet
   sur un pseudo-élément, l'en-tête redevient un ancêtre normal. */
/* LE VERRE DÉPOLI, EN GRIS. Même traitement que les boutons à contour : un
   gris très sombre à peine translucide, un flou derrière, un contour fin.
   Ce n'est plus le fond de page qui remonte sous l'en-tête mais la page qui
   se devine à travers - ce qui donne à la barre une épaisseur qu'un aplat ne
   donne pas, et évite qu'elle se confonde avec les sections noires.
   `saturate(.9)` désature légèrement ce qui passe dessous : sans lui, un
   disque rouge qui défile derrière colore toute la barre en rose. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--verre-entete);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
  transition: background .35s var(--ease);
}
.site-header.is-scrolled::before { background: var(--verre-entete-defile); }
.site-header.is-scrolled { border-bottom-color: var(--line-strong); }

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }

/* ---------------------------------------------------------------------------
   LE LOGO
   Le fichier images/support_graphique/logo.svg est un tracé BORDEAUX sur fond
   transparent : posé tel quel sur le fond noir du site, il serait presque
   invisible. Le filtre ci-dessous le repeint en blanc sans toucher au fichier :
     brightness(0) → écrase toutes les couleurs en noir
     invert(1)     → retourne ce noir en blanc
   Comme un filtre s'applique aussi au fond de l'élément, la tuile bordeaux est
   portée par un <span> parent, en dehors du filtre.

   Pour revenir au logo dans sa couleur d'origine (sur un fond clair, par
   exemple) : supprimez la ligne `filter`.
   ------------------------------------------------------------------------ */
/* En-tête : le badge bordeaux (logo-512.png, tracé blanc sur fond bordeaux)
   suivi du nom en blanc. C'est le PNG et non le SVG, parce que c'est le seul
   des deux qui porte son propre fond bordeaux - le SVG, lui, est un tracé
   transparent qui disparaîtrait sur le fond sombre.
   Au pied de page, c'est l'inverse : le SVG, repeint en blanc (voir § 07). */
/* Le badge du logo suit lui aussi les angles droits : c'est l'objet le plus
   visible du site, un coin arrondi isolé s'y verrait tout de suite. */
.brand__mark {
  height: 52px;
  width: auto;
  border-radius: 0;
}
.brand__word {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
@media (max-width: 720px) {
  .brand__mark { height: 58px; }
  .brand__word { font-size: 1.4rem; }
}
@media (max-width: 420px) {
  .brand__mark { height: 52px; }
  .brand__word { font-size: 1.25rem; }
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--space-2); }

.nav__link {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__link:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
/* Menu sur une seule ligne jusqu'au burger (1100 px) : entre 1101 et 1260 px,
   les liens se resserrent pour que tout tienne sur une ligne. */
.nav__link, .nav__list .btn { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1260px) {
  .nav__list { gap: 2px; }
  .nav__link { padding-inline: 8px; }
  .nav__link[aria-current="page"]::after,
  .nav__link.is-active::after { left: 8px; right: 8px; }
}
.nav__link[aria-current="page"],
.nav__link.is-active { color: var(--text); }
.nav__link[aria-current="page"]::after,
.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-500);
}

.nav__cta { margin-left: var(--space-3); }

/* Bouton hamburger
   Il se détache volontairement du fond : traits de 2 px en blanc plein, fond
   légèrement éclairci et contour visible. Des traits fins et translucides
   passaient inaperçus sur les écrans très sombres ou peu lumineux - et le
   bouton se retrouve souvent posé sur une photo, pas sur un aplat. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.nav-toggle:active { background: rgba(255, 255, 255, .16); }
.nav-toggle[aria-expanded="true"] { border-color: var(--accent-400); }
.nav-toggle span {
  display: block;
  position: relative;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), background .2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Menu plein écran mobile */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--encre-0);
    padding: var(--space-6) var(--space-5) var(--space-8);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    width: min(100%, var(--container));
    margin-inline: auto;
  }
  /* Même famille que les boutons du bas et que le menu sur ordinateur :
     DM Sans, pas la police de titrage. Centré, pour que la colonne entière
     - liens, « Galerie », « Nous faire jouer » - forme un seul bloc. */
  .nav__link {
    display: block;
    padding: 17px 4px;
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
  }
  .nav__link:hover { background: none; }
  .nav__link[aria-current="page"]::after,
  .nav__link.is-active::after {
    left: 50%;
    right: auto;
    bottom: 10px;
    width: 26px;
    transform: translateX(-50%);
  }
  /* La forme commune des deux boutons du bas est définie tout en bas du
     fichier (§ 20), juste après .nav__link--page - sinon cette dernière,
     écrite plus loin, l'emporterait. */
  .nav__cta { margin: var(--space-3) 0 0; }
}

/* Bouton flottant « Nous faire jouer » (mobile, priorité n°1 du site) */
.floating-cta {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: none;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px) scale(.95);
  /* Caché = aussi hors d'atteinte du clavier (visibility), une fois le
     fondu terminé. */
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  pointer-events: none;
}
.floating-cta.is-visible {
  opacity: 1; transform: none; pointer-events: auto;
  visibility: visible;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

@media (max-width: 900px) {
  .floating-cta { display: inline-flex; }
}

/* =============================================================================
   07. PIED DE PAGE
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--bg);
  padding-block: var(--space-7) var(--space-5);
  overflow: hidden;
}
.site-footer > .container { position: relative; z-index: 1; }

/* Deux blocs depuis le 30/09 (le bloc « Naviguer » répétait le menu du
   haut) : la présentation à gauche, les coordonnées calées à droite. */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 860px) {
  .footer__grid { gap: var(--space-5); }
}
/* Sur une seule colonne, tout le pied de page est centré : aligné à gauche,
   il donnait une colonne étroite et déséquilibrée au milieu de l'écran. */
@media (max-width: 620px) {
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__brand { display: flex; flex-direction: column; align-items: center; }
  .footer__tagline { max-width: 38ch; }
  .socials { justify-content: center; }
  .footer__list { display: flex; flex-direction: column; align-items: center; }
  .footer__list li + li { margin-top: 12px; }
  .footer__list address { font-style: normal; }
  .footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
  .footer__legal { justify-content: center; }
}

/* Au pied de page, le logo est seul sur le fond sombre : blanc, sans tuile,
   et légèrement adouci pour ne pas dominer le texte. */
.footer__logo {
  height: 52px;
  width: auto;
  margin-bottom: var(--space-4);
  filter: brightness(0) invert(1);
  opacity: .9;
}
.footer__tagline { color: var(--text-muted); font-size: var(--fs-sm); max-width: 34ch; }

.footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-4);
}

.footer__list li + li { margin-top: 10px; }
.footer__list a,
.footer__list address {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-style: normal;
  transition: color .2s;
}
.footer__list a:hover { color: var(--accent-300); }

.socials { display: flex; gap: 10px; margin-top: var(--space-4); }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  transition: color .25s, border-color .25s, background .25s, transform .25s;
}
.socials a:hover {
  color: #fff;
  border-color: var(--accent-500);
  background: var(--accent-700);
}

.footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer__legal a { transition: color .2s; }
.footer__legal a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* Les petits textes du bas passent souvent devant un disque : plus clairs,
   avec un léger halo sombre pour rester lisibles sur le rouge. */
.footer__bottom { text-shadow: var(--ombre-texte); }
.site-footer:has(.forme--disque) .footer__bottom,
.site-footer:has(.forme--disque) .footer__legal a { color: var(--text); }

/* =============================================================================
   08. VIDÉOS EXTERNES (CHARGEMENT AU CLIC)
   -----------------------------------------------------------------------------
   Aucune vidéo YouTube n'est chargée tant que le visiteur ne clique pas :
   le site n'envoie donc rien à Google de son propre chef, et il n'y a plus
   besoin de bandeau de consentement. Voir frontend/cookies.html.
   ========================================================================== */

/* Affiche du bloc avant le clic : c'est notre propre décor, pas celui de YouTube. */
.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Le bloc était centré DANS SON ENSEMBLE (pastille + titre), ce qui plaçait la
   pastille au-dessus du vrai centre de l'image - l'œil le voit tout de suite.
   La pastille est donc positionnée seule, exactement au centre, et le titre
   vient se placer en-dessous sans peser sur ce centrage. */
.embed__placeholder {
  position: absolute;
  inset: 0;
  text-align: center;
  padding: var(--space-5);
  background:
    linear-gradient(rgba(11, 8, 9, .34), rgba(11, 8, 9, .72)),
    var(--embed-poster, radial-gradient(circle at 50% 40%, var(--surface-3), var(--surface-1)));
  background-size: cover;
  background-position: center;
}
/* Le titre : sous la pastille, à distance fixe de celle-ci. */
.embed__placeholder > span:not(.embed__play) {
  position: absolute;
  left: 50%; top: calc(50% + 56px);
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 2 * var(--space-5));
}
.embed__placeholder p,
.embed__placeholder span {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 46ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .85);
}
.embed__placeholder strong { color: var(--text); font-size: var(--fs-md); }
.embed__placeholder .ico--lg { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .9)); }

/* Le substitut est un vrai bouton : toute la surface est cliquable. */
button.embed__placeholder { width: 100%; cursor: pointer; }

/* Pastille de lecture : posée sur une affiche, une petite icône se perd.
   Celle-ci a la taille d'un vrai bouton de lecteur vidéo, et elle est
   maintenant POSTÉRISÉE : quatre paliers concentriques au lieu d'un aplat.
   C'est le seul endroit du site où le disque à paliers se voit en entier,
   cœur compris - partout ailleurs il est hors cadre.

   Le verre dépoli a sauté (`backdrop-filter`). Un flou et des paliers ne
   peuvent pas cohabiter sur 62 px : à cette taille, le flou ne se lit pas
   comme une matière, il se lit comme un bord raté.

   Le triangle est SOMBRE, pas blanc : le cœur du disque est la couleur la
   plus claire du site, et du blanc dessus ne se verrait tout simplement pas.
   On inverse donc, ce qui est aussi le réflexe d'un sérigraphe - on ne
   rajoute pas une encre quand il suffit de réserver le papier. */
.embed__play {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 0;
  background: var(--encre-5);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .45);
  isolation: isolate;
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
/* ⚠ spécificité : `.embed__placeholder span { color: var(--text-muted) }`
   (0,0,1,1) battait `.embed__play { color: … }` (0,0,1,0). Le triangle n'a
   donc jamais pris la couleur qu'on lui donnait - il était gris clair, même
   du temps où la règle disait `color: #fff`. */
.embed__placeholder .embed__play { color: #fff; }
.embed__play svg { width: 24px; height: 24px; margin-left: 3px; position: relative; }

/* L'encre part du CENTRE et non d'un coin : un bouton rond n'a pas de coin,
   et la lecture démarre au milieu de l'image. Pour le reste c'est le même
   geste que les boutons pleins - un disque à paliers, déplacé par le seul
   `transform`, jamais un dégradé animé. */
.embed__play::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    var(--encre-5)  0  24%,
    var(--encre-4) 24% 43%,
    var(--encre-3) 43% 62%,
    var(--encre-2) 62% 81%,
    var(--encre-1) 81% 100%);
  transform: scale(0);
  transition: transform .5s var(--ease-out);
}
button.embed__placeholder:hover .embed__play::before,
button.embed__placeholder:focus-visible .embed__play::before { transform: scale(1); }
@media (max-width: 620px) {
  .embed__play { width: 54px; height: 54px; }
  .embed__play svg { width: 21px; height: 21px; }
  .embed__placeholder > span:not(.embed__play) { top: calc(50% + 50px); }
}

/* =============================================================================
   09. HERO (ACCUEIL)
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--header-h) + var(--space-7));
  padding-bottom: var(--space-8);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--surface-1); }

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s var(--ease), transform 7s linear;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Voile resserré sur le bloc de texte : il assombrit juste ce qu'il faut
       pour que le titre reste lisible, et laisse la photo respirer autour.
       Le reste de la lisibilité est assuré par les ombres portées du texte
       (.hero__title / .hero__sub / .hero .eyebrow), qui ne coûtent rien à
       l'image. */
    /* ⚠ CE VOILE-CI RESTE CONTINU, et c'est voulu.
       J'ai d'abord essayé de le passer en paliers comme le reste. Sur une
       photo elle-même postérisée, les marches du voile se superposent à celles
       de l'image : on ne lit plus un parti pris graphique, on lit un défaut
       d'affichage - de grosses bandes horizontales en travers de la photo.
       La règle qui en découle : les paliers vont sur les fonds SANS photo
       (halos, bandes, cartes), la postérisation va sur les photos. Les deux ne
       se superposent jamais. */
    radial-gradient(50% 40% at 50% 48%, rgba(8, 5, 6, .66), transparent 76%),
    linear-gradient(180deg, rgba(11, 8, 9, .55) 0%, rgba(11, 8, 9, .20) 38%, rgba(11, 8, 9, .86) 88%, var(--bg) 100%),
    radial-gradient(110% 70% at 12% 96%, rgba(127, 0, 0, .40), transparent 62%);
}

.hero__inner { max-width: 900px; margin-inline: auto; }

/* Dans le hero, le surtitre est posé sur une photo : il reçoit une ombre
   portée. Même couleur que les autres surtitres (l'accent secondaire). */
.hero .eyebrow {
  justify-content: center;
  color: var(--accent-2);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9), 0 0 4px rgba(0, 0, 0, .7);
}
.hero .eyebrow::before,
.hero .eyebrow::after {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

.hero__title,
.hero__sub { text-shadow: 0 2px 22px rgba(0, 0, 0, .78), 0 1px 4px rgba(0, 0, 0, .55); }

/* Limelight occupe nettement plus de largeur que Playfair à taille égale : le
   titre d'accueil passait de deux à trois lignes, la dernière ne portant qu'un
   mot. On réduit donc le pas maximal de l'échelle POUR CE TITRE seulement -
   inutile de toucher au reste de la typographie. */
.hero__title {
  font-size: clamp(2.1rem, 3.4vw + .9rem, 3.8rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.02;
  margin-bottom: var(--space-4);
}
/* Limelight n'a pas d'italique. Mettre `font-style: italic` ici ferait pencher
   les lettres artificiellement - sur une police à ce point contrastée, le
   résultat est bancal, les pleins et les déliés ne suivent plus.
   L'emphase passe donc par la COULEUR seule. C'est moins appuyé qu'un italique,
   mais c'est ce que la police sait faire honnêtement. */
.hero__title em {
  font-style: normal;
  color: var(--accent-titre);
}

.hero__sub {
  font-size: var(--fs-lg);
  /* Presque blanc, et non gris : maintenant que le voile est plus léger, la
     photo derrière peut être claire. La hiérarchie avec le titre tient à la
     taille, pas à la couleur. */
  color: rgba(247, 242, 240, .94);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* Pastille « prochain événement », remplie par js/main.js */
/* Puces de navigation du diaporama */
.hero__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--space-6);
  display: flex;
  gap: 10px;
  z-index: 2;
}
/* Des TRAITS, pas des pastilles. Les puces rondes qui s'allongent en gélule
   étaient le dernier reste de l'ancien vocabulaire arrondi - deux formes
   différentes dans le même groupe, ce qui se voyait. Ce sont maintenant de
   petits filets de même hauteur : seule la LONGUEUR et la couleur distinguent
   la diapo en cours, jamais la forme. */
/* LA CIBLE N'EST PAS LE TRAIT.
   Un filet de 3 px de haut se voit très bien mais ne se vise pas : il faut
   placer le curseur au pixel près, et au doigt c'est pire. On sépare donc
   les deux : le BOUTON fait 26 px de haut et reste entièrement cliquable,
   le trait n'est qu'un pseudo-élément dessiné au milieu. Le dessin ne change
   pas, seule la surface qu'on peut atteindre change - c'est toujours comme
   ça qu'il faut agrandir une cible, jamais en épaississant le décor. */
.hero__dots { gap: 6px; }
.hero__dots button {
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: flex;
  align-items: center;
  transition: width .3s var(--ease);
}
.hero__dots button::before {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, .34);
  transition: background .3s var(--ease);
}
.hero__dots button:hover::before { background: rgba(255, 255, 255, .62); }
.hero__dots button[aria-current="true"] { width: 52px; }
.hero__dots button[aria-current="true"]::before { background: var(--encre-5); }
@media (max-width: 900px) { .hero__dots { display: none; } }

/* =============================================================================
   10. SECTIONS DE CONTENU (ACCUEIL)
   ========================================================================== */

/* --- Bandeau de chiffres ------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat { background: var(--surface-1); padding: var(--space-6) var(--space-5); text-align: center; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 400;
  color: var(--accent-300);
  line-height: 1;
}
.stat__label {
  margin-top: 8px;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- Missions ------------------------------------------------------------ */
.mission {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.mission__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-300);
  margin-bottom: var(--space-4);
}
.mission h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.mission p { font-size: var(--fs-sm); color: var(--text-muted); }
.mission__examples {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Bloc alterné texte / image ------------------------------------------ */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.feature + .feature { margin-top: var(--section-y); }
.feature--reverse .feature__media { order: -1; }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: var(--space-6); }
  .feature--reverse .feature__media { order: 0; }
}

.feature__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.feature__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}

.feature__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-5);
  background: linear-gradient(transparent, rgba(11, 8, 9, .92));
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.feature h2 { margin-bottom: var(--space-4); }
.feature p + p { margin-top: var(--space-4); }
.feature__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- Liste à puces « check » --------------------------------------------- */
.checklist { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
/* `ul[class]` remet les marges à zéro : on redonne de l'air sous le chapeau. */
.feature__text .checklist { margin-top: var(--space-5); }
.checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.checklist svg { flex: none; margin-top: 3px; color: var(--accent-2); }
.checklist strong { color: var(--text); font-weight: 600; }

/* --- Agenda -------------------------------------------------------------- */
.events { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.event {
  flex: 1 1 300px;
  max-width: 520px;
  display: flex;
  gap: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--encre-2);
  border-radius: var(--r-md);
  padding: var(--space-5);
  text-align: left;
  width: 100%;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

.event__date { flex: none; text-align: center; min-width: 54px; }
.event__day {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-300);
}
.event__month {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.event__title { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; margin-bottom: 4px; }
.event__meta { font-size: var(--fs-xs); color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.event__excerpt { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 8px; }

.events-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--space-7);
  text-align: center;
  color: var(--text-muted);
}
.events-empty p { max-width: 48ch; margin-inline: auto; }

/* --- Aperçu médias (mosaïque) -------------------------------------------- */
.media-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 170px;
  gap: var(--space-3);
}
.media-strip a {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.media-strip img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform .6s var(--ease-out); }


/* Nom de l'album écrit sur la vignette, même langage visuel que
   `.feature__caption` : un dégradé qui part du bas pour que le texte reste
   lisible quelle que soit la photo.
   Le `z-index` n'est pas décoratif : au survol l'image prend un
   `transform: scale()`, ce qui crée un contexte d'empilement et la ferait
   passer PAR-DESSUS ce bloc pourtant positionné après elle. */
.media-strip__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  /* le rembourrage haut n'est pas là pour le texte mais pour donner de la
     place au dégradé : il a ainsi le temps de s'éteindre en douceur, même
     au-dessus d'une photo très claire */
  padding: var(--space-7) var(--space-4) var(--space-4);
  background: linear-gradient(transparent, rgba(11, 8, 9, .92));
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-muted);
  transition: color .3s;
  /* deux lignes au maximum : un titre long ne doit pas manger la vignette */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.media-strip a:hover .media-strip__name { color: var(--text); }
.media-strip__year { color: var(--text-dim); }
.media-strip__year { margin-left: .5em; }
/* Placement explicite des six vignettes, pour que la grille forme un
   rectangle plein : 4 colonnes × 3 rangées = 12 cases, et les six images se
   partagent exactement ces 12 cases (4 + 1 + 2 + 1 + 2 + 2).
   Auparavant la dernière rangée n'était remplie qu'à moitié, d'où le trou.

       ┌───────────┬─────┬─────┐
       │           │  2  │     │
       │     1     ├─────┤  3  │   la colonne de droite est pleine hauteur
       │           │  4  │     │
       ├───────────┼─────┴─────┤
       │     5     │     6     │
       └───────────┴───────────┘
*/
@media (min-width: 761px) {
  .media-strip {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 170px);
    grid-auto-rows: 170px;
  }
  .media-strip a:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
  .media-strip a:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
  .media-strip a:nth-child(3) { grid-area: 1 / 4 / 3 / 5; }
  .media-strip a:nth-child(4) { grid-area: 2 / 3 / 3 / 4; }
  .media-strip a:nth-child(5) { grid-area: 3 / 1 / 4 / 3; }
  .media-strip a:nth-child(6) { grid-area: 3 / 3 / 4 / 5; }
}

@media (max-width: 760px) {
  .media-strip { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .media-strip a:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .media-strip a:nth-child(6) { grid-column: span 2; }
  /* vignettes de 130px : on resserre, sinon le dégradé mange la photo */
  .media-strip__name { padding: var(--space-6) var(--space-3) var(--space-3); }
  .media-strip__year { display: none; }
}

/* --- Équipe (aperçu accueil) --------------------------------------------- */
/* Le bandeau d'encres qui coiffait les blocs « mission » a été retiré : le
   disque d'encre qui les traverse maintenant au survol dit déjà la même
   chose, en mieux - et deux fois la même idée dans un même bloc, l'une fixe
   et l'autre au survol, c'est une de trop.
   `position: relative` reste : le disque en dépend. */
.mission { position: relative; }

/* --- Sous-titres d'une section ------------------------------------------- */
/* Une section qui traite deux sujets voisins (les photos, puis l'équipe) les
   sépare par un sous-titre plutôt que par une nouvelle section : le visiteur
   reste dans le même chapitre, « à quoi ressemble le kot pour de vrai ». */
.media-sub {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.media-sub + .media-strip { margin-bottom: var(--space-8); }
h3.media-sub:not(:first-of-type) { margin-top: var(--space-8); }

/* --- Équipe : la liste des prénoms (accueil) ------------------------------
   Pas de photos. Les prénoms, en Limelight, séparés par des points rouges,
   centrés. Au survol, le prénom passe au rouge et son instrument apparaît
   au-dessus.

   ⚠ CE QUE CE BLOC NE FAIT PAS. L'instrument n'existe qu'au survol : il n'y
   a donc PAS d'instrument sur un téléphone, et il ne faut jamais mettre là
   une information dont le visiteur a besoin. Ici c'est acceptable parce que
   la liste complète - noms, instruments, études, rôles - est à un clic, dans
   l'onglet « L'équipe » de la galerie. Le survol est un bonus, pas le
   contenu. -------------------------------------------------------------- */
.trombi-noms {
  margin-top: var(--space-5);
  /* Le rembourrage était calé sur celui d'une carte de contenu, alors que ce
     bloc n'a qu'une seule ligne de texte à trois rangs : il se lisait comme
     un cadre presque vide. Il est maintenant serré autour de ce qu'il
     contient. */
  padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2.4vw, 28px) clamp(14px, 1.8vw, 18px);
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-align: center;
}

.trombi-noms__liste {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vw, 26px);
  line-height: 1.7;
  /* 44ch centrait les noms dans une colonne bien plus étroite que le bloc :
     d'où l'impression de vide à gauche et à droite. La liste prend maintenant
     toute la largeur disponible et ne se replie qu'au-delà de 68ch, où une
     ligne deviendrait trop longue à balayer. */
  max-width: 68ch;
  margin: 0 auto;
}

/* Un prénom. `inline-block` est nécessaire : sans lui, un prénom coupé en fin
   de ligne aurait deux rectangles et l'étiquette se poserait entre les deux. */
.trombi-noms__nom {
  position: relative;
  display: inline-block;
  transition: color .25s var(--ease);
}
.trombi-noms__nom:hover,
.trombi-noms__nom:focus-visible { color: var(--encre-5); outline: none; }

/* L'ÉTIQUETTE D'INSTRUMENT - sur sa propre ligne, jamais par-dessus.
   Premier essai : une bulle posée au-dessus du prénom survolé. Elle tombait
   par-dessus la ligne du dessus et devenait illisible. Deuxième essai : la
   même bulle, mais opaque. Lisible, mais elle cachait alors un autre prénom.
   Les deux essais avaient le même défaut de départ - poser une information
   dans un espace déjà occupé.
   Elle a donc sa ligne à elle, sous la liste, de hauteur RÉSERVÉE : le bloc
   ne bouge pas d'un pixel selon qu'on survole ou non. C'est aussi ce qui la
   rend annonçable par une lecture d'écran (`aria-live`), ce qu'une bulle en
   `::after` ne peut pas être. */
.trombi-noms__inst {
  min-height: 1.6em;
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-200);
  opacity: 0;
  transition: opacity .18s var(--ease);
}
.trombi-noms__inst.is-shown { opacity: 1; }

/* Le séparateur : un point d'encre, comme dans le reste du site. Il porte
   `aria-hidden` dans le JS - une liste lue à voix haute n'a pas besoin qu'on
   lui épelle les points. */
.trombi-noms__sep {
  display: inline-block;
  width: .18em; height: .18em;
  margin: 0 .22em;
  vertical-align: .22em;
  background: var(--accent-2);
}

.trombi-noms__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-align: left;
}

@media (max-width: 620px) {
  .trombi-noms__pied { justify-content: center; text-align: center; }
}

/* Téléphone et tablette : pas de survol au doigt, donc des prénoms inertes
   (aucune réaction au toucher) et pas de ligne réservée pour l'instrument -
   elle ne se remplirait jamais et laissait un vide sous les noms. */
@media (max-width: 1024px), (hover: none) {
  .trombi-noms__nom { pointer-events: none; }
  .trombi-noms__inst { display: none; }
}

/* --- Frise chronologique (page Histoire) ---------------------------------- */
/* La frise vit dans le conteneur NORMAL, pas dans le conteneur étroit : son
   bord gauche s'aligne ainsi sur le titre de la page, juste au-dessus. C'est
   sa largeur de texte qui est bridée, pas sa position. */
.timeline { position: relative; list-style: none; padding-left: 0; max-width: 780px; }
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: clamp(20px, 3vw, 44px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
/* Le trait qui relie les jalons : un pseudo-élément, pas une bordure, pour
   qu'il s'arrête au dernier jalon au lieu de pendre dans le vide. */
.timeline__item::before {
  content: '';
  position: absolute;
  left: 147px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }

.timeline__year {
  position: relative;
  text-align: right;
  padding-right: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--accent-300);
  line-height: 1.3;
}
.timeline__year::after {
  content: '';
  position: absolute;
  right: -5px; top: 9px;
  width: 9px; height: 9px;
  border-radius: 0;
  background: var(--accent-500);
  box-shadow: 0 0 0 4px var(--bg);
}
.timeline__body { padding-top: 2px; }
.timeline__title { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.timeline__body p { color: var(--text-muted); }
.timeline__body p + p { margin-top: var(--space-3); }

/* En dessous de 720 px, la colonne des années passe au-dessus du texte : à
   cette largeur, deux colonnes donneraient des lignes de quatre mots. */
@media (max-width: 720px) {
  .timeline__item { grid-template-columns: 1fr; gap: var(--space-2); padding-left: var(--space-5); }
  .timeline__item::before { left: 0; }
  .timeline__year { text-align: left; padding-right: 0; }
  .timeline__year::after { right: auto; left: -24px; }
}

/* =============================================================================
   11. FORMULAIRE DE CONTACT
   ========================================================================== */

.contact {
  position: relative;
  overflow: clip;
}

.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 1000px) {
  .contact__layout { grid-template-columns: 1fr; row-gap: 0; }
  /* Sur une colonne, les questions fréquentes passent sous le formulaire :
     les coordonnées et la rémunération restent au-dessus. */
  .contact__aside,
  .contact__aside > div { display: contents; }
  .contact__form { order: 1; margin-top: var(--space-7); }
  .contact__aside .faq { order: 2; }
}

/* La colonne de gauche N'EST PLUS collante, et c'est ce qui règle le problème
   d'origine - on devait faire défiler tout le formulaire pour arriver au bas de
   la colonne d'à côté.
   Le raisonnement : avec les questions fréquentes, cette colonne mesure environ
   1100 px, soit plus qu'un écran. Une colonne collante plus haute que l'écran
   est un piège : son HAUT est épinglé, donc son bas ne devient jamais visible,
   quoi qu'on fasse. En la laissant défiler normalement, on lit la colonne de
   gauche en entier, tranquillement, pendant que le formulaire défile à côté.
   Si un jour cette colonne redevient courte (moins d'un écran), le collage
   reprend tout son sens : il suffira de remettre `position: sticky` ici. */
.contact__aside { align-self: start; }

.contact__channels { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.contact__channel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  transition: border-color .25s, background .25s, transform .25s;
}
.contact__channel svg { flex: none; color: var(--accent-2); }
.contact__channel span { display: block; }
.contact__channel .label { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.contact__channel .value { font-size: var(--fs-sm); font-weight: 600; }

/* LES ENCARTS - rémunération, mentions légales, notes de « Nous rejoindre ».
   Ils portaient jusqu'ici un dégradé rouge : quatre boîtes teintées à
   quatre endroits du site, sans rien de commun avec les boutons à contour ni
   avec l'en-tête. Ils prennent maintenant le même verre dépoli - ce qui
   les range dans la même famille que le reste du « mobilier » posé sur la
   page, et les distingue des cartes, qui sont pleines. */
.notice {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--r-md);
  /* Verre dépoli, comme l'en-tête et les boutons à contour : voir `.notice`. */
  background: var(--verre-fond);
  border: 1px solid var(--verre-trait);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
}
.notice h2, .notice h3 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; margin-bottom: 8px; }
.notice p { font-size: var(--fs-sm); color: var(--text-muted); }
.notice strong { color: var(--accent-200); font-weight: 600; }

/* --- Le formulaire lui-même ---------------------------------------------- */
.form {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 44px);
}

.form__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-7) 0 var(--space-5);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.form__step:first-child { margin-top: 0; }
.form__step::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.form__step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 0;
  background: var(--accent-700);
  color: #fff;
  font-size: 11px;
}

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); }
.form__row--single { grid-template-columns: 1fr; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { position: relative; display: flex; flex-direction: column; margin-bottom: var(--space-4); }

.field__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 9px;
  transition: color .25s;
}
.field:focus-within .field__label { color: var(--accent-2); }
.field__label .req { color: var(--accent-400); }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color .25s, background .25s, box-shadow .25s;
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--line-strong); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px rgba(127, 0, 0, .25);
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BCAFAC' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.field select option { background: var(--surface-3); color: var(--text); }
.field select:invalid, .field select.is-placeholder { color: var(--text-dim); }

.field__hint { margin-top: 7px; font-size: var(--fs-xs); color: var(--text-dim); }

.field__error {
  display: none;
  margin-top: 7px;
  font-size: var(--fs-xs);
  color: var(--accent-300);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--accent-400); }
.field.has-error .field__error { display: block; }

/* Info-bulle */
/* L'info-bulle est positionnée par rapport au champ (.field) et non par rapport
   à l'icône : elle ne peut donc jamais déborder horizontalement de la page. */
.hint { display: inline-flex; }
.hint__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 0;
  background: var(--surface-4);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  transition: background .2s, color .2s;
}
.hint:hover .hint__icon,
.hint:focus-within .hint__icon { background: var(--accent-600); color: #fff; }

.hint__box {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 0;
  transform: translateY(4px);
  width: 100%;
  min-width: 0;
  max-width: 340px;
  padding: 11px 14px;
  background: var(--surface-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 20;
  white-space: normal;
}
.hint:hover .hint__box,
.hint:focus-within .hint__box { opacity: 1; visibility: visible; transform: translateY(0); }

/* Consentement & envoi */
.consent {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: var(--space-5) 0;
  margin-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.consent input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--accent-600);
  cursor: pointer;
}
.consent label { font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; }

/* Petite case sous un champ (« Ma date est flexible ») et mention « facultatif » */
.field__option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.field .field__option input[type="checkbox"] {
  flex: none;
  width: 16px; height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  appearance: auto;
  -webkit-appearance: checkbox;
  accent-color: var(--accent-600);
  cursor: pointer;
}
.field__facultatif { font-weight: 400; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.consent.has-error label { color: var(--accent-300); }

.form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.form__submit .btn { min-width: 210px; }
.form__note { font-size: var(--fs-xs); color: var(--text-dim); max-width: 30ch; }

.form-status {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-1);
  text-align: center;
}
.form-status.is-visible { display: block; }
.form-status__icon {
  width: 52px; height: 52px;
  margin: 0 auto var(--space-4);
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(127, 0, 0, .2);
  color: var(--accent-300);
}
.form-status h2, .form-status h3 { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; }
.form-status p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 46ch; margin-inline: auto; }
.form-status--success .form-status__icon { background: rgba(127, 0, 0, .35); color: var(--encre-5); }
.form-status__actions { margin-top: var(--space-5); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* Champ anti-robot (invisible pour les humains) */
.hp-field {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.recaptcha-wrap { margin-top: var(--space-5); }
.recaptcha-wrap .field__error { margin-top: 10px; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { margin-top: var(--space-7); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  transition: color .2s;
}
.faq__q:hover { color: var(--accent-300); }
.faq__q svg { flex: none; transition: transform .3s var(--ease); color: var(--text-dim); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); color: var(--accent-300); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__a p { font-size: var(--fs-sm); color: var(--text-muted); padding-bottom: var(--space-5); }

/* =============================================================================
   12. PAGE MÉDIAS
   ========================================================================== */

/* --- En-tête de page ----------------------------------------------------- */
/* En-tête de la page Médias.
   Il y avait ici une photo de fond, assombrie à 36 % pour que le texte passe :
   autant dire une image qu'on ne voyait pas, téléchargée pour rien. Elle est
   remplacée par des halos, comme dans le reste du site - c'est plus cohérent,
   plus léger, et le rendu ne dépend plus de la photo qui atterrit là. */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(40px, 5.5vw, 76px));
  padding-bottom: clamp(26px, 4vw, 48px);
  overflow: clip;
  isolation: isolate;
  background: linear-gradient(180deg, var(--surface-1) 0%, #120C0D 55%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
/* Quand la page commence par un fil d'Ariane, on resserre le haut. Le fil
   d'Ariane est une ligne de SERVICE : sa place est juste sous l'en-tête, dont
   il prolonge la barre de navigation. Le laisser flotter à 104 px du haut
   creusait un trou sur les grands écrans - l'œil voyait un oubli, pas une
   respiration. L'air est reporté PLUS BAS, entre le fil et le titre : c'est le
   titre qui mérite d'être mis en valeur, pas le vide au-dessus.
   Les pages légales, elles, n'ont pas de fil d'Ariane et gardent leur marge
   d'origine - d'où le `:has()`, qui ne cible que les pages concernées. */
.page-hero:has(.breadcrumb) {
  padding-top: calc(var(--header-h) + clamp(20px, 2.6vw, 36px));
}
.page-hero .breadcrumb { margin-bottom: clamp(28px, 3.6vw, 52px); }

.page-hero h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); }
.page-hero p { max-width: 62ch; }

/* --- Onglets de la galerie ------------------------------------------------ */
/* Au repos, pas de bande : les onglets sont posés au bas de l'en-tête de page
   (marge négative), sur son fond. En défilant, ils restent collés sous
   l'en-tête du site, dans une bande du même verre que lui, pour que rien ne
   passe derrière la pastille ; le compteur s'efface. La classe .is-colle est
   posée par medias.js. */
.page-hero--onglets,
.media-nav {
  --onglets-h: 64px;
  --onglets-bas: clamp(14px, 2.4vw, 26px);
}
.media-nav {
  position: sticky;
  top: calc(var(--header-h) - 1px);
  z-index: 60;
  height: var(--onglets-h);
  margin-top: calc(-1 * (var(--onglets-h) + var(--onglets-bas)));
  margin-bottom: var(--onglets-bas);
  pointer-events: none;
}
.page-hero--onglets {
  padding-bottom: calc(var(--onglets-h) + var(--onglets-bas) + clamp(20px, 3vw, 36px));
}
.media-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.media-nav .segmented,
.media-nav__count { pointer-events: auto; }
.media-nav .segmented { transition: background-color .25s var(--ease); }
.media-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--verre-entete-defile);
  -webkit-backdrop-filter: var(--verre-flou);
          backdrop-filter: var(--verre-flou);
  border-bottom: 1px solid var(--line-strong);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.media-nav.is-colle { pointer-events: auto; }
.media-nav.is-colle::before { opacity: 1; }
.media-nav__count { transition: opacity .2s var(--ease); }
.media-nav.is-colle .media-nav__count { opacity: 0; pointer-events: none; }
.media-nav__inner::-webkit-scrollbar { display: none; }

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.segmented button {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-selected="true"] { background: var(--accent-600); color: #fff; }

.media-nav__count { margin-left: auto; font-size: var(--fs-xs); color: var(--text); white-space: nowrap; text-shadow: var(--ombre-texte); }
@media (max-width: 760px) { .media-nav__count { display: none; } }

/* --- Filtres par catégorie (chips) --------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-6); }
/* Les filtres ne sont pas des boutons d'action : ils ne mènent nulle part, ils
   trient ce qui est déjà là. Ils restent donc plus discrets - texte moins gras,
   contour plus fin. Mais ils adoptent la HAUTEUR de la petite taille de bouton
   (42 px), pour qu'une rangée de filtres s'aligne avec le reste de la page. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
  transition: all .22s var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
/* Même état « sélectionné » que la pastille Galerie du menu : fond bordeaux
   translucide, contour rouge vif, texte blanc en semi-gras. */
.chip[aria-pressed="true"] {
  background: rgba(127, 0, 0, .28);
  border-color: var(--accent-500);
  color: var(--text);
  font-weight: 600;
}
.chip small { opacity: .6; margin-left: 5px; }
/* Sur téléphone, les années défilent sur une ligne au lieu de s'empiler. */
@media (max-width: 620px) {
  .chips--defile {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
    scroll-padding-inline: var(--space-4);
  }
  .chips--defile::-webkit-scrollbar { display: none; }
  .chips--defile .chip { flex: none; }
}

/* --- Grille d'albums ------------------------------------------------------ */
/* `auto-fit` (et non `auto-fill`) : les colonnes vides sont supprimées, donc une
   année qui ne contient qu'un seul album occupe toute la largeur au lieu de
   laisser un grand trou à droite. La hauteur des couvertures est plafonnée pour
   qu'un album seul devienne un bandeau, pas une affiche géante. */
.albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 620px) {
  .albums-grid { gap: var(--space-4); }
}

.album {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  transition: border-color .35s var(--ease);
}
/* Plus de levée : c'était la dernière du site, et elle passait au-dessus du
   système commun parce qu'elle était écrite ici, après lui. */
.album:hover { border-color: var(--line-accent); }

.album__thumb {
  position: relative;
  display: block;
  width: 100%;          /* indispensable : sans largeur fixée, `max-height`
                           rétrécirait la carte au lieu de la recadrer */
  aspect-ratio: 4 / 3;
  max-height: 320px;
  overflow: hidden;
  background: var(--surface-3);
}
@media (max-width: 620px) { .album__thumb { max-height: 240px; } }
/* PLEINE LUMINOSITÉ AU REPOS. La vignette était assombrie tant qu'on ne la
   survolait pas - une photo sur deux du site s'affichait donc à 70 % de sa
   valeur, et il fallait la survoler pour la voir vraiment. C'est exactement
   l'inverse de ce qu'on attend d'une galerie. Le texte posé dessus reste
   lisible grâce au dégradé de `.album__overlay`, qui lui n'a pas bougé : un
   voile local sous le texte fait le travail mieux qu'un assombrissement de
   toute l'image. */
.album__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}

.album__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: var(--space-5);
  background: linear-gradient(transparent 35%, rgba(11, 8, 9, .92));
}
.album__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.album__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 400; }
.album__count { font-size: var(--fs-xs); color: var(--text-dim); display: flex; align-items: center; gap: 6px; }

@media (max-width: 620px) {
  .album__overlay { padding: var(--space-4); }
}

/* --- Vidéos --------------------------------------------------------------- */
.video-hero {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-align: left;
  margin-bottom: var(--space-6);
  transition: border-color .3s, transform .3s var(--ease);
}
/* La vignette peut être une vraie image OU un substitut (aucune vignette locale
   n'est disponible). Les deux doivent occuper exactement la même place, sinon
   le bloc s'effondre sur la hauteur de l'icône. */
.video-hero__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  transition: transform var(--zoom-speed) var(--ease-out);
}
@media (max-width: 720px) { .video-hero__img { aspect-ratio: 16 / 10; } }

/* Substitut de vignette : un décor maison, sans aucune requête vers YouTube. */
.thumb-fallback {
  display: grid;
  place-items: center;
  color: var(--accent-2);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(127, 0, 0, .55), transparent 60%),
    radial-gradient(90% 80% at 88% 100%, rgba(200, 60, 51, .22), transparent 65%),
    var(--surface-2);
  filter: none;
}
.video-hero .thumb-fallback { filter: none; }

.video-hero__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(20px, 4vw, 44px);
  background: linear-gradient(transparent, rgba(11, 8, 9, .93));
}
.video-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  margin: 10px 0 6px;
}
.video-hero__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.video-hero__play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-4);
  padding: 12px 24px;
  border-radius: var(--r-pill);
  background: var(--encre-5);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--space-4); }

.video {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}

.video__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
.video__img { width: 100%; height: 100%; object-fit: cover;
              transition: transform var(--zoom-speed) var(--ease-out); }

.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.video:hover .video__play { opacity: 1; }
@media (hover: none) { .video__play { opacity: .8; } }

/* Même pastille postérisée que sur l'accueil, en 54 px : les deux boutons de
   lecture du site doivent être le même objet, sinon c'est le visiteur qui
   doit apprendre deux fois la même chose. */
.video__play span {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--encre-5);
  color: #fff;
  box-shadow: var(--shadow-md);
}
/* Même pastille que sur l'accueil : l'encre part du centre. Ici elle arrive
   en même temps que le bouton lui-même, qui n'apparaît qu'au survol de la
   vignette - un seul geste, deux choses qui se passent dedans. */
.video__play span::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    var(--encre-5)  0  24%,
    var(--encre-4) 24% 43%,
    var(--encre-3) 43% 62%,
    var(--encre-2) 62% 81%,
    var(--encre-1) 81% 100%);
  transform: scale(0);
  transition: transform .45s var(--ease-out);
}
.video:hover .video__play span::before,
.video:focus-visible .video__play span::before { transform: scale(1); }
.video__play svg { position: relative; }

.video__body { padding: var(--space-4); }
.video__label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.video__title { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; margin: 5px 0 3px; line-height: 1.35; }
.video__meta { font-size: var(--fs-xs); color: var(--text-dim); }
@media (max-width: 620px) {
  .video__body { padding: 14px var(--space-4); }
}

/* --- Équipe (page médias) -------------------------------------------------- */
.team-hero {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: var(--space-6);
  background: var(--surface-2);
}
/* Photo de groupe entière, jamais rognée, sans légende (l'année est déjà
   dans les boutons au-dessus). medias.js donne à la carte les proportions de
   la photo (--ratio) : la carte prend exactement la largeur de la photo, donc
   jamais de bandes grises sur les côtés. Elle est plafonnée à 760 px de large,
   et rétrécit sur un écran peu haut pour que les portraits restent en vue
   juste en dessous. */
.team-hero {
  max-width: min(760px, calc(60vh * var(--ratio, 1.5)));
  margin-inline: auto;
}
.team-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-4);
}
@media (max-width: 620px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }

/* Les portraits de l'équipe ne réagissent PAS au survol, et c'est volontaire :
   ce sont des <figure>, on ne peut pas cliquer dessus. Une carte qui se soulève
   et dont la photo zoome promet un lien qui n'existe pas - le visiteur clique,
   il ne se passe rien, et il se demande si le site est cassé. Le mouvement est
   réservé à ce qui mène réellement quelque part : les albums, les vidéos, et la
   photo de groupe, qui s'ouvre bien dans la visionneuse. */
.team-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.team-card__photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-3); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }

.team-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-4);
  background: linear-gradient(transparent, rgba(11, 8, 9, .95) 55%);
}
.team-card__name { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; }
.team-card__inst { font-size: var(--fs-xs); color: var(--accent-200); margin-top: 2px; }
.team-card__studies { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 2px; }

.team-card__badge {
  position: absolute;
  z-index: 2;              /* l'image agrandie au survol passerait sinon par-dessus */
  top: 10px; left: 10px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-600);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Groupes par instrument */
.inst-group { margin-bottom: var(--space-7); }
.inst-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.inst-group__head h3 { font-size: var(--fs-lg); }
.inst-group__head::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* --- Lightbox ------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 4, 5, .97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
/* À l'ouverture, visible tout de suite (et non après le fondu) : sinon le
   bouton « Fermer » ne peut pas recevoir le focus du clavier. */
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.lightbox__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 400; }
.lightbox__counter { font-size: var(--fs-xs); color: var(--text-dim); margin-left: auto; font-variant-numeric: tabular-nums; }

.lightbox__icon-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--text-muted);
  transition: color .2s, border-color .2s, background .2s;
}
.lightbox__icon-btn:hover { color: var(--text); background: var(--surface-3); border-color: var(--line-strong); }

/* La photo doit tenir ENTIÈREMENT dans l'espace disponible - on vient voir la
   photo, pas un cadrage qu'on n'a pas choisi.
   La scène était une grille (`display: grid`), et c'est ce qui la cassait : dans
   une grille dont la rangée est dimensionnée automatiquement, un `max-height`
   en POURCENTAGE renvoie à une hauteur qui dépend elle-même de l'image. Le
   navigateur, face à ce raisonnement circulaire, abandonne et traite la
   consigne comme absente : l'image s'affichait donc en taille réelle et
   débordait de l'écran, haut et bas coupés.
   En `flex`, la hauteur de la scène est connue avant celle de l'image : le
   pourcentage a un sens, et la consigne est respectée. */
.lightbox__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  min-height: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  animation: lb-in .35s var(--ease-out);
}
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(26, 20, 21, .8);
  border: 1px solid var(--line);
  color: var(--text);
  transition: background .2s, transform .2s;
}
.lightbox__nav:hover { background: var(--accent-700); border-color: var(--accent-400); }
.lightbox__nav--prev { left: var(--space-4); }
.lightbox__nav--next { right: var(--space-4); }
@media (max-width: 620px) { .lightbox__nav { width: 42px; height: 42px; } }

.lightbox__caption {
  flex: none;
  padding: 0 var(--space-5) var(--space-3);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  min-height: 24px;
}

.lightbox__filmstrip {
  flex: none;
  display: flex;
  gap: 8px;
  padding: var(--space-3) var(--space-5) var(--space-5);
  overflow-x: auto;
  scrollbar-width: thin;
}
.lightbox__filmstrip button {
  flex: none;
  width: 84px; height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  opacity: .45;
  border: 1px solid transparent;
  transition: opacity .2s, border-color .2s, transform .2s;
}
.lightbox__filmstrip button:hover { opacity: .85; }
.lightbox__filmstrip button[aria-current="true"] { opacity: 1; border-color: var(--accent-400); }
.lightbox__filmstrip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) {
  .lightbox__filmstrip button { width: 60px; height: 42px; }
}

/* --- Modale vidéo ---------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: rgba(6, 4, 5, .93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.modal.is-open { opacity: 1; visibility: visible; transition: opacity .28s var(--ease), visibility 0s; }

.modal__dialog {
  width: min(100%, 980px);
  transform: scale(.97);
  transition: transform .3s var(--ease-out);
}
.modal.is-open .modal__dialog { transform: scale(1); }

.modal__close {
  margin-left: auto;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color .2s;
}
.modal__close:hover { color: var(--text); }

.modal__player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-lg); overflow: hidden; }
.modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal__caption { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }
.modal__caption strong { color: var(--text); display: block; font-size: var(--fs-md); margin-bottom: 3px; }

/* --- États de chargement / vide ------------------------------------------- */
.loader {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  padding: var(--space-9) var(--space-5);
  color: var(--text-dim);
  text-align: center;
}
.loader__spinner {
  width: 34px; height: 34px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent-400);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--text-dim);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}

/* Squelette de chargement d'image */
.ph {
  background:
    linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .05) 40%, transparent 60%),
    var(--surface-3);
  background-size: 250% 100%;
  animation: ph 1.4s ease-in-out infinite;
}
@keyframes ph { to { background-position: -180% 0; } }
img.is-loaded { animation: fade-in .4s var(--ease); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* =============================================================================
   13. PAGES LÉGALES (PROSE)
   ========================================================================== */

.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
  font-size: var(--fs-xl);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--space-6); }
.prose p, .prose li { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 10px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--accent-500); }
.prose strong { color: var(--text); font-weight: 600; }
.prose dl { display: grid; gap: var(--space-3); }
.prose dt { font-weight: 600; color: var(--text); }
.prose dd { margin: 0; color: var(--text-muted); }

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
}

.prose table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.prose th, .prose td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th { background: var(--surface-2); color: var(--text); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.prose td { color: var(--text-muted); }
.prose tr:last-child td { border-bottom: 0; }

.callout {
  padding: var(--space-5);
  border-radius: var(--r-md);
  /* Verre dépoli, comme l'en-tête et les boutons à contour : voir `.notice`. */
  background: var(--verre-fond);
  border: 1px solid var(--verre-trait);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
}
/* L'encart « en bref » des pages légales gardait un fond laiton écrit en
   dur dans le HTML. Il ne garde que son contour laiton : c'est ce qui le
   distingue des autres encarts, le reste est le même verre. */
.callout--laiton { border-color: rgba(200, 60, 51, .55); }   /* nom historique : le laiton a quitté la palette */
.callout p { color: var(--text-muted); font-size: var(--fs-sm); }

/* Sommaire latéral des pages légales */
.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  max-width: 100%;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  /* minmax(0, 1fr) : empêche un tableau large de dilater la colonne */
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Le sommaire est une carte de verre, comme les autres encarts : un contour
   net et une marge intérieure, pour qu'on voie où il commence et finit. */
.toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--verre-trait);
  border-radius: var(--r-md);
}
@media (max-width: 900px) {
  .toc { position: static; }
}
.toc__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-4);
}
.toc a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color .2s, border-color .2s;
}
.toc a:hover, .toc a.is-active { color: var(--accent-300); border-left-color: var(--accent-500); }

/* Préférences cookies : petit panneau réutilisable */
.pref-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
.pref-row:last-of-type { border-bottom: 0; }
.pref-row__text { flex: 1; }
.pref-row__text h3 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; margin-bottom: 4px; }
.pref-row__text p { font-size: var(--fs-sm); color: var(--text-muted); }

/* Interrupteur */
.switch { position: relative; flex: none; width: 46px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
/* Exception assumée : un interrupteur carré ne se lit plus comme un
   interrupteur. La piste garde sa forme de gélule. */
.switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--surface-4);
  border: 1px solid var(--line-strong);
  transition: background .25s, border-color .25s;
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .25s var(--ease), background .25s;
}
.switch input:checked + /* Exception assumée : un interrupteur carré ne se lit plus comme un
   interrupteur. La piste garde sa forme de gélule. */
.switch__track { background: var(--accent-600); border-color: var(--accent-500); }
.switch input:checked + .switch__track::after { transform: translateX(20px); background: #fff; }
.switch input:disabled + /* Exception assumée : un interrupteur carré ne se lit plus comme un
   interrupteur. La piste garde sa forme de gélule. */
.switch__track { opacity: .55; }
.switch input:focus-visible + /* Exception assumée : un interrupteur carré ne se lit plus comme un
   interrupteur. La piste garde sa forme de gélule. */
.switch__track { outline: 2px solid var(--accent-300); outline-offset: 3px; }

/* =============================================================================
   14. ANIMATIONS & PRÉFÉRENCES DE MOUVEMENT
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__slide { transform: none; }
}

@media print {
  .site-header, .site-footer, .floating-cta, .media-nav, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .prose p, .prose li { color: #222; }
}

/* =============================================================================
   15. ICÔNES SVG (sprite inline)
   ========================================================================== */

.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--solid { fill: currentColor; stroke: none; }
.ico--sm { width: 1em; height: 1em; }
.ico--lg { width: 1.5em; height: 1.5em; }
.ico--xl { width: 22px; height: 22px; }
.sprite { display: none; }

/* =============================================================================
   16. CORRECTIFS D'AFFICHAGE
   -----------------------------------------------------------------------------
   Les cartes sont construites avec des <span> (pour rester imbriquables dans un
   <a> ou un <button>) : il faut donc les passer explicitement en display:block.
   ========================================================================== */

.album__thumb,
.video__thumb,
.video__body,
.video__label,
.video__title,
.video__meta,
.video-hero__title,
.video-hero__meta,
.team-card__photo,
.team-card__name,
.team-card__inst,
.team-card__studies,
.event__day,
.event__month,
.event__title,
.event__excerpt { display: block; }

.video-hero__img { width: 100%; }
.album__thumb img,
.video__thumb img { display: block; }

/* Vignette de substitution pour une vidéo dont l'image n'est pas (encore) chargée :
   soit aucune miniature locale n'est fournie, soit les contenus externes ne sont
   pas autorisés - dans ce cas aucune requête n'est envoyée à YouTube. */
.thumb-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: var(--space-4);
  text-align: center;
  background:
    radial-gradient(120% 120% at 25% 0%, rgba(127, 0, 0, .55), transparent 60%),
    linear-gradient(145deg, var(--surface-3), var(--surface-1));
}
.thumb-fallback svg { color: var(--accent-2); opacity: .8; }

/* =============================================================================
   17. BANDEAU AGENDA (juste sous le hero)
   -----------------------------------------------------------------------------
   Les prochains événements sont la première chose que l'on voit après le hero :
   c'est l'information la plus périssable du site, donc la plus utile en haut.
   ========================================================================== */

.agenda-band {
  position: relative;
  padding-block: clamp(28px, 4vw, 44px);
  background: linear-gradient(180deg, var(--surface-deep), var(--surface-1));
  border-block: 1px solid var(--line);
  overflow: clip;
}
.agenda-band::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: min(720px, 86%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-500), transparent);
  z-index: 2;
}

.agenda-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 900px) {
  .agenda-band__inner { flex-direction: column; align-items: stretch; gap: var(--space-5); }
}

.agenda-band__head { flex: none; max-width: 230px; }
.agenda-band__head h2 {
  font-size: var(--fs-xl);
  margin-bottom: 6px;
}
.agenda-band__head p { font-size: var(--fs-xs); color: var(--text-dim); }

/* `overflow-x: auto` force aussi le rognage vertical : sans la marge intérieure
   ci-dessous, le soulèvement au survol coupait le haut des cartes. */
.agenda-band__list {
  flex: 1;
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 2px;
  margin: -8px -2px;
}
.agenda-band__list::-webkit-scrollbar { display: none; }
/* Dès que le menu passe en burger (1100 px) ou sur un écran tactile : toutes
   les dates, qui défilent latéralement et s'arrêtent proprement sur une
   carte. Au-delà, sur ordinateur : les trois prochaines. */
.agenda-band__list { scroll-snap-type: x mandatory; }
.agenda-band__list > * { scroll-snap-align: start; }
@media (min-width: 1101px) and (hover: hover) {
  .agenda-band__list > .agenda-item:nth-child(n + 4) { display: none; }
}
/* Quand la liste défile, elle va jusqu'au bord droit de l'écran : une carte
   coupée par le bord montre qu'il y en a d'autres. */
@media (max-width: 1100px), (hover: none) {
  .agenda-band__list {
    margin-right: calc((100% - 100vw) / 2);
    padding-right: calc((100vw - 100%) / 2);
  }
}
/* Sur une seule colonne, elle déborde aussi à gauche, en gardant la première
   carte alignée sur le texte (même retrait que .container). */
@media (max-width: 900px) {
  .agenda-band__list {
    margin-left: calc(-1 * var(--space-5));
    padding-left: var(--space-5);
    scroll-padding-left: var(--space-5);
  }
}
@media (max-width: 720px) {
  .agenda-band__list {
    margin-left: calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    scroll-padding-left: var(--space-4);
  }
}

.agenda-item {
  flex: 1 1 250px;
  min-width: 235px;
  max-width: 440px;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  /* Bandelette sombre (encre 2) : le chiffre en rouge vif ressort à côté. */
  border-left: 3px solid var(--encre-2);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .025);
  text-align: left;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}

.agenda-item__date { flex: none; text-align: center; min-width: 46px; }
.agenda-item__day {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-300);
}
.agenda-item__month {
  display: block;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 3px;
}
.agenda-item__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}
.agenda-item__meta {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 5px;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-muted);
  text-shadow: var(--ombre-texte);
}
.agenda-item__meta .ico { flex: none; margin-top: 1px; }

.agenda-band__empty {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.agenda-band__empty .btn { flex: none; }

/* =============================================================================
   18. AJUSTEMENTS DEMANDÉS
   ========================================================================== */

/* Bandeau de chiffres : trois colonnes, et une seule sur mobile */
.stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; }
}

/* =============================================================================
   19. LANGAGE D'INTERACTION - UN SEUL SURVOL POUR TOUT LE SITE
   -----------------------------------------------------------------------------
   Règle unique : un bloc cliquable se soulève de 4 px, son contour s'éclaire en
   bordeaux clair, son fond monte d'un cran, une ombre apparaît. Les images
   qu'il contient zooment plus lentement que le bloc ne bouge : c'est ce décalage
   qui donne l'impression de profondeur.

   Ces trois listes remplacent les survols écrits séparément bloc par bloc, qui
   n'étaient pas cohérents entre eux (contours qui apparaissaient à moitié,
   glissements horizontaux à un endroit et verticaux à l'autre).
   Pour qu'un nouveau bloc réagisse comme les autres : ajoutez son sélecteur ici.
   ========================================================================== */

.mission,
.agenda-item,
.event,
.contact__channel,
.album,
.video,
.video-hero,
.media-strip a {
  position: relative;
  transition:
    border-color var(--hover-speed) var(--ease),
    background-color var(--hover-speed) var(--ease);
}

/* LE SURVOL DE BASE : le contour, et rien d'autre.
   Plus de soulèvement, plus d'ombre portée, plus de halo. Ce n'est pas un
   appauvrissement, c'est une remise à sa place : un survol doit dire « cet
   objet répond », pas « cet objet est important ». L'importance, c'est la
   hiérarchie de la page qui la porte, pas la souris. */
.mission:hover,
.agenda-item:hover,
.event:hover,
.contact__channel:hover,
.album:hover,
.video:hover,
.video-hero:hover,
.media-strip a:hover,
.mission:focus-visible,
.agenda-item:focus-visible,
.album:focus-visible,
.video:focus-visible,
.video-hero:focus-visible,
.contact__channel:focus-visible {
  border-color: var(--hover-ring);
}

/* Les blocs à fond plein montent d'un cran de gris au survol. Pour ceux qui
   portent le disque, c'est ce qui se passe PENDANT que l'encre arrive : le
   gris s'éclaircit vite (.28 s), le disque met deux fois plus de temps à
   recouvrir - on voit donc le bloc s'allumer, puis l'encre le prendre. */
.event:hover,
.mission:hover,
.contact__channel:hover { background-color: var(--surface-3); }
.agenda-item:hover { background-color: rgba(255, 255, 255, .06); }
.agenda-item:hover,
.event:hover { border-left-color: var(--encre-3); }

/* LE DISQUE D'ENCRE, SUR LES BLOCS QUI EN VALENT LA PEINE.
   Le même geste que les boutons pleins : un disque à paliers naît dans le
   coin bas-gauche et se répand. Il est réservé aux blocs à fond plein qui
   sont des POINTS D'ENTRÉE - les trois missions et les moyens de contact. Pas sur les cartes photo (l'encre
   rentrerait en concurrence avec l'image), pas sur les lignes d'agenda
   (elles sont trop basses pour qu'un disque s'y lise).

   `isolation` fait du bloc un contexte d'empilement, sans quoi le disque
   passerait par-dessus le texte ; `overflow` le découpe au bord du bloc.
   Seul `transform` est animé : le dégradé est peint une fois, puis déplacé
   par le compositeur. */
.mission,
.contact__channel {
  isolation: isolate;
  overflow: hidden;
}
.mission::after,
.contact__channel::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  /* LA TAILLE DÉPEND DE LA FORME DU BLOC, et c'est normal.
     Le disque doit finir par recouvrir tout le bloc : il faut donc que son
     rayon plein (94 % du rayon) atteigne la DIAGONALE. Pour un bloc presque
     carré, la diagonale vaut 1,41 largeur → 300 %. Pour un bloc large et
     plat, elle vaut à peine plus que la largeur → 215 % suffisent, et
     surtout : à 300 % le bloc ne couvrirait que le cœur du disque et on ne
     verrait jamais la dernière bande. C'est exactement ce qui se passait sur
     les encarts de contact. Une seule valeur pour deux formes différentes ne
     peut pas marcher. */
  width: 300%;
  min-width: 720px;
  max-width: 1700px;
  aspect-ratio: 1;
  pointer-events: none;
  /* Les cinq encres, du rouge vif au coin jusqu'à l'encre 1. */
  background: radial-gradient(circle closest-side,
    var(--encre-5)  0  10%,
    var(--encre-4) 10% 22%,
    var(--encre-3) 22% 38%,
    var(--encre-2) 38% 60%,
    var(--encre-1) 60% 94%,
    transparent    94% 100%);
  transform: translate(-50%, 50%) scale(0);
  transition: transform .55s var(--ease-out);
}
/* Les encarts de contact sont larges et plats : voir le commentaire de la
   taille ci-dessus. À 215 %, la dernière bande occupe tout le tiers droit de
   l'encart au lieu de rester hors cadre. */
.contact__channel::after { width: 240%; min-width: 420px; max-width: 2400px; }

.mission:hover::after,
.mission:focus-within::after,
.contact__channel:hover::after,
.contact__channel:focus-visible::after { transform: translate(-50%, 50%) scale(1); }
/* Le coin passe au rouge vif sous l'encre : les étiquettes prennent un fond
   de verre et l'icône passe au blanc, pour rester lisibles. */
.mission .tag { background: var(--verre-fond); }
.contact__channel:hover svg,
.contact__channel:focus-visible svg { color: #fff; }
.contact__channel:hover .label,
.contact__channel:focus-visible .label { color: rgba(255, 255, 255, .82); }

/* LE ZOOM DANS LE CADRE. C'est la seule chose qui bouge encore au survol sur
   tout le site, et elle a une raison : le cadre ne bouge pas, c'est l'IMAGE
   qui avance à l'intérieur. Ça ne dit pas « je suis important », ça dit « il
   y a plus à voir » - ce qui est vrai d'un album, d'une vidéo, d'une photo de
   section, et faux d'une carte de texte. D'où le fait qu'aucune carte de
   texte ne l'a. */
.album:hover .album__thumb img,
.video:hover .video__img,
.video-hero:hover img,
.media-strip a:hover img { transform: scale(1.05); }
/* Et SEULEMENT sur les images cliquables. Une photo qui n'est qu'une
   illustration (« Soirée d'initiation aux instruments », la photo d'équipe)
   ne doit pas réagir : un zoom promet un clic, et une promesse qui ne mène
   nulle part est pire que pas de promesse du tout. */

@media (prefers-reduced-motion: reduce) {
  .mission, .agenda-item, .event, .contact__channel, .album, .video,
  .video-hero, .media-strip a {
    transition: border-color .2s linear, background-color .2s linear;
  }
  /* Le disque d'encre n'apparaît plus : il arrive d'un coup, donc il n'y a
     plus de mouvement du tout. Le contour, lui, reste - c'est l'information,
     pas la décoration. */
  .mission::after, .contact__channel::after {
    transition: none;
  }
}

/* =============================================================================
   20. AJOUTS DE LA SECONDE PASSE
   -----------------------------------------------------------------------------
   - lien de menu qui mène à une AUTRE page (la galerie)
   - fil d'Ariane de la page Médias
   - section « Nous rejoindre »
   - galerie regroupée par année scolaire
   - page 404
   ========================================================================== */

/* --- « Galerie » est une autre page, pas une ancre ------------------------ */
.nav__sep {
  width: 1px;
  height: 20px;
  margin: 0 var(--space-2);
  background: var(--line-strong);
}
@media (max-width: 1100px) { .nav__sep { display: none; } }

/* « Galerie » est un VRAI bouton (.btn .btn--ghost .btn--sm dans le HTML), plus
   un lien de navigation déguisé en pastille. C'est ce qui le désaccordait de
   « Nous faire jouer » juste à côté : 43 px contre 49, graisse 500 contre 600,
   rembourrage 14 px contre 22. Deux objets qui se ressemblent doivent être le
   même composant, sinon ils divergent au premier changement.
   Il ne reste ici que ce qui lui est propre : l'état « vous y êtes déjà ». */
.nav__pill svg { width: 15px; height: 15px; opacity: .85; }
.nav__pill[aria-current="page"] {
  --btn-border: var(--accent-500);
  --btn-bg: rgba(127, 0, 0, .28);
  --btn-fg: var(--text);
}

/* Dans le menu mobile, « Galerie » et « Nous faire jouer » ont exactement la même
   forme : même largeur, même hauteur, même taille de texte. Seule la couleur
   les distingue - l'un est un contour, l'autre est plein.
   ⚠ Ce seuil doit rester identique à celui du § 06 (menu plein écran). */
@media (max-width: 1100px) {
  .nav__pill,
  .nav__cta .btn {
    display: flex;
    width: 100%;
    --btn-h: 58px;
    --btn-fs: var(--fs-md);
    letter-spacing: 0;
  }
  .nav__pill { margin-top: var(--space-6); }
  .nav__pill svg { width: 19px; height: 19px; opacity: .9; }
}



/* --- Fil d'Ariane --------------------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--text-muted); transition: color .2s; }
.breadcrumb a:hover { color: var(--accent-300); }
.breadcrumb svg { width: 13px; height: 13px; opacity: .6; }
.breadcrumb [aria-current] { color: var(--text); font-weight: 600; }

/* --- Carte « la galerie est une autre page » ------------------------------ */
.page-link-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-lg);
  /* Verre dépoli, comme l'en-tête et les boutons à contour : voir `.notice`. */
  background: var(--verre-fond);
  border: 1px solid var(--verre-trait);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
}
.page-link-card__text { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.page-link-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: rgba(200, 60, 51, .14);
  color: var(--accent-2);
}
.page-link-card strong { display: block; font-size: var(--fs-md); }
.page-link-card p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }

/* --- Section « Nous rejoindre » ------------------------------------------- */
/* (Les cartes « Quand / Qui / Concrètement » de l'ancienne page « Nous rejoindre »
   ont disparu avec elle.) */

.join-note {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-lg);
  /* Verre dépoli, comme l'en-tête et les boutons à contour : voir `.notice`. */
  background: var(--verre-fond);
  border: 1px solid var(--verre-trait);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.join-note p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 62ch; }
.join-note strong { color: var(--text); }
.join-note__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* =============================================================================
   PAGE « NOUS REJOINDRE »
   ========================================================================== */

/* --- La ligne du temps d'une année ----------------------------------------
   Sur grand écran : cinq étapes côte à côte. Chaque repère carré est relié au
   suivant par un filet qui part EXACTEMENT de son bord et s'arrête EXACTEMENT
   sur le bord du repère suivant (un filet par étape, et pas une ligne tirée
   d'un bout à l'autre du bloc, qui dépassait des deux côtés). Repères et
   filets prennent les encres dans l'ordre : la ligne s'assombrit au fil de
   l'année. Les lignes de chaque étape (mois, titre, texte, photo) sont
   alignées d'une colonne à l'autre (subgrid).
   Sur tablette et mobile : la même ligne, verticale.
   Les photos ne réagissent pas au survol : elles ne mènent nulle part. */
ol.annee {
  --annee-gap: clamp(16px, 2vw, 28px);
  --annee-rgap: var(--space-7);
  --repere: 16px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--annee-gap);
  row-gap: 0;
}
.annee__etape {
  --c: var(--encre-3);
  position: relative;
  padding-top: 44px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  align-content: start;
}
.annee__etape:nth-child(1) { --c: var(--encre-5); }
.annee__etape:nth-child(2) { --c: var(--encre-4); }
.annee__etape:nth-child(3) { --c: var(--encre-3); }
.annee__etape:nth-child(4) { --c: var(--encre-2); }
.annee__etape:nth-child(5) { --c: var(--encre-1); }
/* Le repère */
.annee__etape::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0; top: 4px;
  width: var(--repere); height: var(--repere);
  background: var(--c);
}
/* Le filet jusqu'au repère suivant */
.annee__etape:not(:last-child)::after {
  content: '';
  position: absolute;
  left: var(--repere);
  top: calc(4px + var(--repere) / 2 - 1px);
  width: calc(100% + var(--annee-gap) - var(--repere));
  height: 2px;
  background: var(--c);
}
.annee__etape .annee__quand {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.annee__etape h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.annee__etape p { font-size: var(--fs-sm); color: var(--text-muted); }
.annee__etape strong { color: var(--text); }
.annee__etape img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-top: var(--space-4);
  border: 1px solid var(--line);
}

@media (max-width: 960px) {
  ol.annee { grid-template-columns: 1fr; row-gap: var(--annee-rgap); padding-left: 40px; }
  /* Texte à gauche, photo à droite. La dernière ligne (1fr) absorbe la
     hauteur de la photo : le texte reste groupé en haut. */
  .annee__etape {
    padding-top: 0;
    grid-row: auto;
    grid-template-columns: 1fr minmax(0, .9fr);
    grid-template-rows: repeat(4, auto) 1fr;
    column-gap: var(--space-6);
  }
  .annee__etape > :not(img) { grid-column: 1; }
  .annee__etape img { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  .annee__etape::before { left: -40px; top: 2px; }
  /* Filet vertical : du bas du repère au haut du repère suivant. */
  .annee__etape:not(:last-child)::after {
    left: calc(-40px + var(--repere) / 2 - 1px);
    top: calc(2px + var(--repere));
    width: 2px;
    height: calc(100% + var(--annee-rgap) - var(--repere));
  }
}
@media (max-width: 560px) {
  ol.annee { padding-left: 32px; }
  .annee__etape { display: block; }
  .annee__etape::before { left: -32px; }
  .annee__etape:not(:last-child)::after { left: calc(-32px + var(--repere) / 2 - 1px); }
  .annee__etape img { aspect-ratio: 16 / 9; margin-top: var(--space-4); }
}

/* --- Ce qui court toute l'année ------------------------------------------
   Sous la ligne du temps, sans date : un encart de verre, quatre colonnes. */
.continu {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: var(--verre-fond);
  border: 1px solid var(--verre-trait);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
}
.continu__titre {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--space-4);
}
ul.continu__liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.continu__liste li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.continu__liste li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 8px; height: 8px;
  background: var(--accent-2);
}
.continu__liste strong { display: block; color: var(--text); margin-bottom: 2px; }
@media (max-width: 960px) { ul.continu__liste { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { ul.continu__liste { grid-template-columns: 1fr; } .continu { padding: var(--space-5); } }

/* Les blocs texte + photo de la page reprennent `.feature` (accueil). */
.feature .points { margin-top: var(--space-5); }

/* Petit lexique kapiste : le terme en capitales rouges, sa définition dessous. */
.lexique { margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.lexique dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 4px;
}
.lexique dd { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }


/* Des points, pas des puces : une liste de choses à savoir, lue d'un trait. */
ul.points { margin: var(--space-5) 0 0; }
.points li {
  position: relative;
  padding: 0 0 var(--space-4) 22px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.points li::before {
  content: '';
  position: absolute;
  left: 0; top: .6em;
  width: 8px; height: 8px;
  background: var(--accent-2);
}
.points strong { color: var(--text); }

/* Une ligne discrète sous le lexique kapiste (baptême, alcool, pression) :
   une précision, pas un argument. */
.kapiste-note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* La note « Une question ? » en version courte : une ligne et deux boutons. */
.join-note--court { margin-top: var(--section-y); }

/* --- Galerie : un bloc par année scolaire --------------------------------- */
.year-block + .year-block { margin-top: var(--space-8); }

.year-block__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.year-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1;
}
.year-block__count { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; text-shadow: var(--ombre-texte); }
.year-block__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* --- Page 404 -------------------------------------------------------------- */
.error-page {
  position: relative;
  overflow: clip;
  padding-block: clamp(64px, 12vw, 140px);
  text-align: center;
}
.error-page__inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin-inline: auto;
}
.error-page__code {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: var(--space-5);
  background: linear-gradient(160deg, var(--accent-200), var(--accent-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.error-page h1 { margin-bottom: var(--space-4); }
.error-page p { color: var(--text-muted); }
.error-page .feature__actions { margin-top: var(--space-7); }
.error-page__count { margin-top: var(--space-6); font-size: var(--fs-xs); color: var(--text-dim); }
.error-page__count .link { font-size: var(--fs-xs); }


/* Le bouton « Ouvrir la galerie » sous l'équipe n'apparaît que sur téléphone.
   Sur tablette et ordinateur, la pastille « Galerie » est en permanence dans
   l'en-tête : le bouton répétait un lien visible à l'écran au même moment.
   Sur téléphone, cette pastille est rangée dans le menu - le bouton redevient
   le seul chemin visible vers la galerie. */
@media (min-width: 621px) { .seulement-mobile { display: none !important; } }

/* =============================================================================
   LES CARTES EN VERRE SOMBRE
   -----------------------------------------------------------------------------
   Comme les boutons à contour (« Galerie », « Suivre sur Facebook ») : un fond
   sombre translucide et un flou derrière. Posées sur un disque, net ou derrière
   la vitre, elles le laissent deviner sans gêner la lecture. Les cartes photo
   (albums, vidéos, portraits) gardent leur fond plein : l'image les couvre.
   ========================================================================== */
.card,
.stat,
.mission,
.event,
.trombi-noms,
.contact__channel,
.form,
.form-status,
.segmented,
.toc,
.agenda-item {
  background-color: var(--verre-fond);
  -webkit-backdrop-filter: var(--verre-flou);
          backdrop-filter: var(--verre-flou);
}
.card,
.stat,
.mission,
.trombi-noms,
.contact__channel,
.form,
.form-status,
.segmented,
.toc { border-color: var(--verre-trait); }
.event:hover,
.mission:hover,
.contact__channel:hover,
.agenda-item:hover { background-color: var(--verre-fond-survol); }

/* SANS FLOU D'ARRIÈRE-PLAN
   Un navigateur trop ancien pour flouter ce qui passe sous le verre, ou un
   appareil réglé sur « réduire la transparence » : le verre devient presque
   opaque, pour que le texte reste lisible sans le flou. Les vitres des
   sections n'en ont pas besoin (leur flou est un simple dégradé). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --verre-fond:          rgba(20, 14, 15, .88);
    --verre-fond-survol:   rgba(32, 23, 24, .92);
    --verre-bouton:        rgba(20, 14, 15, .82);
    --verre-entete:        rgba(20, 15, 16, .95);
    --verre-entete-defile: rgba(22, 17, 18, .97);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --verre-fond:          rgba(20, 14, 15, .88);
    --verre-fond-survol:   rgba(32, 23, 24, .92);
    --verre-bouton:        rgba(20, 14, 15, .82);
    --verre-entete:        rgba(20, 15, 16, .95);
    --verre-entete-defile: rgba(22, 17, 18, .97);
    --verre-flou: none;
  }
}