/* ==========================================================================
   Atelier du Mouvement — feuille de style unique

   Applique le design system de Mozaïk Ballet' : palette relevée sur celle de
   l'Opéra national de Paris, sept valeurs, AUCUNE couleur d'accent. La
   hiérarchie repose sur le contraste et la typographie, pas sur la teinte.
   Les blocs noirs servent de contrepoint au papier.

   L'école et la compagnie partagent la même direction : c'est volontaire,
   Alexandra Gérard dirige les deux.
   ========================================================================== */

:root {
  /* — Palette : 7 valeurs, pas une de plus — */
  --paper:     #ffffff;  /* fond de page */
  --smoke:     #f5f5f5;  /* encarts, sections alternées */
  --ink:       #050505;  /* texte courant, aplats */
  --pitch:     #000000;  /* blocs noirs, pied de page */
  --graphite:  #6a6a6a;  /* texte secondaire (contraste AA sûr, y compris sur --smoke) */
  --line:      #d9d9d9;  /* filets, bordures */
  --line-soft: #ebebeb;  /* séparations discrètes */

  --ease-stage: cubic-bezier(0.22, 1, 0.36, 1);
  --duree: 500ms;

  /* — Rôles — */
  --bg:       var(--paper);
  --bg-alt:   var(--smoke);
  --fg:       var(--ink);
  --fg-dim:   var(--graphite);
  --rule:     var(--line);
  --rule-soft: var(--line-soft);

  /* Le bloc noir est un choix de composition, pas un thème : en clair il est
     pitch, en sombre il devient le gris le plus foncé — sinon il disparaîtrait
     dans le fond. */
  --bloc:     var(--pitch);
  --bloc-fg:  #ffffff;
  --bloc-dim: rgba(255, 255, 255, 0.66);
  --bloc-rule: rgba(255, 255, 255, 0.22);

  /* — Typographie : une seule famille — */
  --sans: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* Titres : Fira Sans (Roboto en repli le temps du chargement). */
  --titre: 'Fira Sans', 'Roboto', system-ui, -apple-system, sans-serif;

  /* Échelle relevée du design system. Aux grands corps, Roboto exige une
     approche resserrée — sans quoi les lettres flottent. */
  --t-112: clamp(2.75rem, 7vw, 7rem);
  --t-96:  clamp(2.5rem, 6vw, 6rem);
  --t-48:  clamp(1.75rem, 3.5vw, 3rem);
  --t-30:  clamp(1.5rem, 2.2vw, 1.875rem);
  --t-20:  1.25rem;
  --t-16:  1rem;
  --t-14:  0.875rem;
  --t-11:  0.6875rem;

  /* — Rythme — */
  --largeur: 1400px;
  --pad-x: 1.5rem;          /* px-6 */
  --pad-x-lg: 2.5rem;       /* lg:px-10 */
  --py: 4.5rem;             /* py-28 en mobile réduit */
  --py-lg: 7rem;            /* lg:py-28 */
  --py-fort: 8rem;          /* lg:py-32 — temps forts */
  --gap-grille: 4rem;       /* gap-16 */

  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --e-6: 6rem;

  /* — Formes — */
  --r-pastille: 999px;      /* rounded-full */
  --r-carte: 1rem;          /* rounded-2xl */

  --h-entete: 88px;
}

/* Le site est un système clair, à fond blanc — y compris quand le système
   d'exploitation est en thème sombre (décision : les pages restent blanches,
   le noir est réservé aux héros et au pied de page). color-scheme: only light
   empêche en plus les navigateurs d'assombrir d'office les contrôles. */
:root { color-scheme: only light; }

/* --------------------------------------------------------------- Réinit -- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-16);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { font-family: var(--titre); margin: 0 0 var(--e-3); text-wrap: balance; }

h1 {
  font-size: var(--t-96);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

h2 {
  font-size: var(--t-48);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

h3 {
  font-size: var(--t-20);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p { margin: 0 0 var(--e-2); text-wrap: pretty; }

a { color: inherit; }

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

/* Réservé aux lecteurs d'écran : présent dans l'arbre d'accessibilité,
   invisible à l'écran. `display:none` le retirerait aussi de l'annonce. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--fg);
  color: var(--bg);
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-14);
}
.skip:focus { left: 0; }

/* --------------------------------------------------------- Utilitaires -- */

.contenu {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
@media (min-width: 1024px) { .contenu { padding-inline: var(--pad-x-lg); } }

.section { padding-block: var(--py); }
@media (min-width: 1024px) { .section { padding-block: var(--py-lg); } }



/* Bloc noir : contrepoint du papier. */
.section--noir {
  background: var(--bloc);
  color: var(--bloc-fg);
}
.section--noir h1, .section--noir h2, .section--noir h3 { color: var(--bloc-fg); }

/* Les fonds d'attente des vignettes (visibles le temps que la photo charge)
   sont en gris clair : sur une section noire, ça produit un flash blanc.
   On les fait suivre le contexte. */
.section--noir .photo,
.section--noir .galerie__item,
.section--noir .insta__vignette { background: rgba(255, 255, 255, 0.06); }

.mesure { max-width: 62ch; }

/* Surtitre — l'approche large cite le mot-symbole du logo. */
.surtitre {
  font-size: var(--t-11);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 var(--e-2);
}
.section--noir .surtitre { color: var(--bloc-dim); }

.plomb {
  font-size: var(--t-20);
  font-weight: 300;
  line-height: 1.6;
  max-width: 62ch;
  color: var(--fg-dim);
}
.section--noir .plomb { color: var(--bloc-dim); }


/* Trait épais — signature du système. Posé sous chaque grand titre. */
.filet {
  display: block;
  width: 4.5rem;
  height: 5px;
  border: 0;
  margin: 1.75rem 0 var(--e-3);
  background: var(--fg);
}
.section--noir .filet { background: var(--bloc-fg); }

.liste-acces { margin: var(--e-3) 0; padding-left: 1.2em; line-height: 1.7; }
.liste-acces li { margin-bottom: var(--e-1); }

/* Lien « Alexandra Gérard » : s'adapte à son contexte (héros sombre, pied de
   page, corps clair) en héritant la couleur, avec un soulignement discret. */
.lien-ag { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: currentColor; transition: opacity .2s; }
.lien-ag:hover { opacity: 0.7; }

/* ------------------------------------------------------------ Jeux & tests -- */
.jeu { max-width: 42rem; margin: 0 auto; }
.jeu__eyebrow { font-size: var(--t-11); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 var(--e-2); }
.jeu__texte { font-size: var(--t-20); font-weight: 300; line-height: 1.6; margin: 0 0 var(--e-3); }
.jeu__progres { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: var(--e-2); }
.jeu__progres span { display: block; height: 100%; background: var(--fg); transition: width .3s var(--ease-stage); }
.jeu__compteur { font-size: var(--t-11); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 var(--e-1); }
.jeu__question { font-family: var(--titre); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 500; margin: 0 0 var(--e-3); text-wrap: balance; }
.jeu__media { margin: 0 0 var(--e-3); border-radius: var(--r-carte); overflow: hidden; }
.jeu__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.jeu__options { display: grid; gap: 0.75rem; }
@media (min-width: 620px) { .jeu__options { grid-template-columns: 1fr 1fr; } }
.jeu__option { position: relative; text-align: left; padding: 1rem 2.6rem 1rem 1.15rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--fg); font: inherit; font-size: var(--t-16); cursor: pointer; transition: border-color .2s, background .25s, color .25s, transform .12s, box-shadow .2s; animation: jeu-option .4s var(--ease-stage) both; }
.jeu__option:hover:not(:disabled) { border-color: var(--fg); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .07); }
.jeu__option:active:not(:disabled) { transform: translateY(0) scale(.99); }
.jeu__option:disabled { cursor: default; }
.jeu__option--bon { background: var(--ink); color: #fff; border-color: var(--ink); }
.jeu__option--mauvais { opacity: .55; }
.jeu__option--bon::after, .jeu__option--mauvais::after { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.05em; font-weight: 700; }
.jeu__option--bon::after { content: '✓'; }
.jeu__option--mauvais::after { content: '✗'; }
@keyframes jeu-option { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jeu__option { animation: none; } }
.jeu__feedback { margin-top: var(--e-3); }
.jeu__verdict { font-family: var(--titre); font-weight: 600; margin: 0 0 var(--e-1); }
.jeu__verdict--ko { color: var(--fg-dim); }
.jeu__explication { color: var(--fg-dim); line-height: 1.55; margin: 0 0 var(--e-3); }
.jeu__resultat { text-align: center; }
.jeu__resultat-titre { font-family: var(--titre); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 500; margin: 0 0 var(--e-2); text-wrap: balance; }
.jeu__score { font-family: var(--titre); font-size: clamp(3rem, 9vw, 5rem); font-weight: 600; line-height: 1; margin: 0 0 var(--e-1); }
.jeu__score span { font-size: 0.4em; color: var(--fg-dim); }
.jeu__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: var(--e-3); }
.jeu__partage { margin-top: var(--e-4); text-align: center; }
.jeu__partage--gagne { padding: var(--e-3) var(--e-3) var(--e-4); border: 1px solid var(--line); border-radius: var(--r-carte); background: var(--smoke); animation: jeu-pop .5s var(--ease-stage) both; }
.jeu__partage-titre { display: block; font-family: var(--titre); font-size: var(--t-20); font-weight: 600; color: var(--fg); margin-bottom: 0.25rem; }
.jeu__partage-incite { color: var(--fg-dim); font-size: var(--t-14); margin: 0 0 var(--e-2); }
.jeu__part-liens { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.jeu__part-lien { display: inline-block; padding: 0.5rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--fg); font: inherit; font-size: var(--t-14); text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.jeu__part-lien:hover { border-color: var(--fg); }
.jeu__part-lien--fort { background: var(--ink); color: #fff; border-color: var(--ink); }
.jeu__part-lien--fort:hover { border-color: var(--ink); }
.jeu__part-btn { display: inline-block; margin-top: var(--e-3); background: none; border: 0; color: var(--fg-dim); font: inherit; font-size: var(--t-14); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.jeu__part-btn:hover { color: var(--fg); }
.jeu__part-info { text-align: center; color: var(--fg-dim); font-size: var(--t-14); margin-top: var(--e-2); }

/* Grille de la page Jeux */
.jeux-grille { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-3); }
@media (min-width: 720px) { .jeux-grille { grid-template-columns: 1fr 1fr; } }
.jeu-carte { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--r-carte); overflow: hidden; text-decoration: none; color: var(--fg); background: var(--paper); transition: border-color .2s, transform .2s; }
.jeu-carte:hover { border-color: var(--fg); transform: translateY(-2px); }
.jeu-carte__img { aspect-ratio: 16 / 9; background: var(--smoke); overflow: hidden; }
.jeu-carte__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-stage); }
.jeu-carte:hover .jeu-carte__img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .jeu-carte:hover .jeu-carte__img img { transform: none; } }
.jeu-carte__corps { padding: var(--e-3); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.jeu-carte__eyebrow { font-size: var(--t-11); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); margin: 0; }
.jeu-carte__titre { font-family: var(--titre); font-size: var(--t-20); font-weight: 500; margin: 0; }
.jeu-carte__resume { color: var(--fg-dim); line-height: 1.5; margin: 0; font-size: var(--t-14); }
.jeu-carte__duree { margin-top: auto; padding-top: var(--e-2); font-size: var(--t-11); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); }

/* ----------------------------------------------------- Sélecteur de langue -- */
.langue { display: inline-flex; align-items: center; gap: 0.15rem; font-size: var(--t-11); letter-spacing: 0.04em; white-space: nowrap; }
.langue__lien { color: var(--fg-dim); text-decoration: none; padding: 0.2rem 0.4rem; border-radius: 6px; transition: color .2s, background .2s; }
.langue__lien:hover { color: var(--fg); }
.langue__lien--actif { color: var(--fg); font-weight: 600; }

/* Animations et gamification des jeux */
.jeu__ecran { animation: jeu-entre .35s var(--ease-stage) both; }
@keyframes jeu-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.jeu__hud { font-weight: 600; color: var(--fg); text-transform: none; letter-spacing: 0; margin-left: 0.4rem; }
.jeu__gain { font-family: var(--titre); font-weight: 600; margin: 0 0 var(--e-1); }
.jeu__points { font-size: var(--t-14); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 var(--e-2); }
@media (prefers-reduced-motion: reduce) { .jeu__ecran { animation: none; } }

/* Confettis de victoire (fin de jeu) */
.jeu__resultat { position: relative; }
.jeu__fete { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.jeu__confetti { position: absolute; top: -6%; width: 9px; height: 9px; opacity: 0; animation-name: confetti; animation-timing-function: cubic-bezier(.35,.2,.25,1); animation-fill-mode: forwards; }
@keyframes confetti { 0% { opacity: 0; transform: translateY(-24px) rotate(0); } 8% { opacity: 1; } 100% { opacity: 0; transform: translateY(360px) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .jeu__fete { display: none; } }
.jeu__eclat { position: absolute; left: 50%; top: 28%; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 185, 66, .55), rgba(232, 115, 143, .25) 45%, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; z-index: 0; animation: jeu-eclat 1s var(--ease-stage) forwards; }
@keyframes jeu-eclat { from { opacity: .85; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(26); } }
.jeu__resultat > :not(.jeu__eclat):not(.jeu__fete) { position: relative; z-index: 1; }
@keyframes jeu-pop { 0% { opacity: 0; transform: scale(.92); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }
.jeu__resultat-titre { animation: jeu-pop .55s var(--ease-stage) both; }
@media (prefers-reduced-motion: reduce) { .jeu__eclat { display: none; } .jeu__partage--gagne, .jeu__resultat-titre { animation: none; } }

/* ------------------------------------------------------------ Lexique -- */
.lexique { max-width: 54rem; }
.lexique__controles { padding: var(--e-3) 0; margin-top: var(--e-3); border-bottom: 1px solid var(--line-soft); }
.lexique__recherche { position: relative; display: flex; align-items: center; }
.lexique__loupe { position: absolute; left: 0.95rem; color: var(--fg-dim); pointer-events: none; }
.lexique__champ { width: 100%; padding: 0.8rem 1.1rem 0.8rem 2.8rem; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: var(--t-16); background: var(--paper); color: var(--fg); }
.lexique__champ:focus { outline: none; border-color: var(--fg); }
.lexique__filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.lexique__chip { padding: 0.4rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--fg-dim); font: inherit; font-size: var(--t-14); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.lexique__chip:hover { border-color: var(--fg); color: var(--fg); }
.lexique__chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.lexique__alpha { display: flex; flex-wrap: wrap; gap: 0.1rem 0.45rem; margin: var(--e-3) 0; font-size: var(--t-14); }
.lexique__alpha a { color: var(--fg-dim); text-decoration: none; padding: 0.1rem 0.3rem; border-radius: 4px; }
.lexique__alpha a:hover { color: var(--fg); background: var(--smoke); }
.lexique__vide { color: var(--fg-dim); margin: var(--e-4) 0; }
.lexique__groupe { margin-top: var(--e-4); }
.lexique__lettre { font-family: var(--titre); font-size: var(--t-48); font-weight: 300; color: var(--fg-dim); margin: 0 0 var(--e-2); border-bottom: 1px solid var(--line-soft); padding-bottom: 0.3rem; scroll-margin-top: 110px; }
.lexique__liste { margin: 0; }
.lexique__item { padding: var(--e-3) 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 110px; }
.lexique__terme { font-family: var(--titre); font-size: var(--t-20); font-weight: 500; margin: 0 0 0.45rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.lexique__tag { font-family: var(--sans); font-size: var(--t-11); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-dim); border: 1px solid var(--line); border-radius: 999px; padding: 0.12rem 0.6rem; white-space: nowrap; }
.lexique__def { margin: 0; color: var(--fg); line-height: 1.6; }
.lexique__voir { margin: 0.55rem 0 0; font-size: var(--t-14); color: var(--fg-dim); }
.lexique__voir a { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 2px; }
.lexique__voir a:hover { color: var(--fg); }

/* ------------------------------------------------------------- Boutons -- */

/* Pastille : rayon complet, toujours. Pleine pour l'action principale,
   contour pour la secondaire. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--r-pastille);
  padding: 0.85rem 1.75rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
  transition: background-color var(--duree) var(--ease-stage),
              color var(--duree) var(--ease-stage),
              border-color var(--duree) var(--ease-stage),
              opacity var(--duree) var(--ease-stage);
}
.btn:hover { opacity: 0.85; }

/* ------------------------------------- Guide « trouver mon cours » -- */

/* Module d'appel sur l'accueil : panneau noir (le contrepoint du design
   system), texte à gauche, pastilles-liens par âge à droite. Le noir le
   détache nettement du reste de la page et le fait lire comme un module
   interactif — contraste blanc sur noir, donc parfaitement lisible. */
.guide-appel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--e-3);
  background: var(--pitch);
  color: var(--bloc-fg);
  border-radius: var(--r-carte);
  padding: var(--e-4);
}
/* Aurore colorée qui respire doucement en fond du panneau. */
.guide-appel::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -2;
  background:
    radial-gradient(38% 48% at 24% 30%, rgba(233, 120, 150, 0.46), transparent 70%),
    radial-gradient(42% 48% at 80% 28%, rgba(245, 175, 95, 0.44), transparent 70%),
    radial-gradient(48% 52% at 60% 86%, rgba(196, 52, 70, 0.42), transparent 70%);
  filter: blur(26px) saturate(115%);
  animation: guide-aurore 22s ease-in-out infinite alternate;
  will-change: transform;
}
/* Halo clair qui suit le curseur (variables posées par site.js). */
.guide-appel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle 20rem at var(--gx, 50%) var(--gy, 42%),
    rgba(255, 222, 184, 0.16), transparent 60%);
  opacity: 0.6;
  transition: opacity var(--duree) var(--ease-stage);
}
.guide-appel:hover::after { opacity: 1; }
/* Le contenu passe au-dessus des couches colorées. */
.guide-appel > * { position: relative; z-index: 1; }
@keyframes guide-aurore {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  50%  { transform: translate3d(3%, 2%, 0)  scale(1.14); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .guide-appel::before { animation: none; }
}
@media (min-width: 800px) {
  .guide-appel { grid-template-columns: 1fr auto; align-items: center; gap: var(--e-5); padding: var(--e-5); }
}
.guide-appel .surtitre { color: rgba(255, 255, 255, 0.72); }
.guide-appel h2 { color: #fff; }
.guide-appel .plomb { color: rgba(255, 255, 255, 0.88); }
.guide-appel__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); }
/* Pastilles sur fond noir : contour clair au repos, inversion au survol. */
.guide-appel .pilule-lien {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.guide-appel .pilule-lien:hover { background: #fff; color: #000; border-color: #fff; }
.guide-appel__tout {
  display: inline-block;
  margin-top: var(--e-1);
  font-size: var(--t-14);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--duree) var(--ease-stage);
}
.guide-appel__tout:hover { color: #fff; }

/* Raccourci mince en haut de l'accueil : bande discrète, intitulé + pastilles
   sur une seule ligne (elle passe à la ligne sur mobile). */
.section--mince { padding-block: var(--e-3); }
@media (min-width: 1024px) { .section--mince { padding-block: var(--e-4); } }
.raccourci-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-2) 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.raccourci-guide__label { font-size: var(--t-16); margin-right: auto; }
.raccourci-guide__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); }
.raccourci-guide__tout {
  font-size: var(--t-14);
  text-decoration: none;
  color: var(--fg-dim);
  white-space: nowrap;
  transition: color var(--duree) var(--ease-stage);
}
.raccourci-guide__tout:hover { color: var(--fg); }

/* Pastilles cliquables — lien (accueil) et bouton (page guide) partagent
   l'aspect, seul l'état actif diffère (aria-pressed sur le bouton). */
.pilule-lien,
.pilule-choix {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-14);
  padding: 0.5rem 1.15rem;
  border-radius: var(--r-pastille);
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree) var(--ease-stage),
              border-color var(--duree) var(--ease-stage),
              color var(--duree) var(--ease-stage);
}
.pilule-lien:hover,
.pilule-choix:hover { border-color: var(--fg); }
.pilule-lien:hover { background: var(--fg); color: var(--bg); }
.pilule-choix[aria-pressed='true'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Le sélecteur du guide : deux groupes de pastilles. */
.guide { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); margin-bottom: var(--e-4); }
.guide__label {
  font-size: var(--t-11);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 var(--e-1);
}
.guide__choix { display: flex; flex-wrap: wrap; gap: var(--e-1); }

/* Panneaux de résultat : cachés par défaut, révélés par le JS via data-actif.
   Sans JS, le sélecteur disparaît et tous les panneaux s'affichent (repli
   lisible) — voir le bloc .no-js plus bas. */
.guide__panneau { display: none; }
.guide__panneau[data-actif] { display: block; }
.guide__intro { font-size: var(--t-20); font-weight: 300; max-width: 62ch; margin: 0 0 var(--e-3); }
.guide__invite { color: var(--fg-dim); }

.no-js .guide { display: none; }
.no-js .guide__invite { display: none; }
.no-js .guide__panneau { display: block; margin-bottom: var(--e-5); }

/* ------------------------------------------------------------ Journal -- */

.journal-grille {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.article-carte {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-carte);
  overflow: hidden;
  transition: border-color var(--duree) var(--ease-stage),
              transform var(--duree) var(--ease-stage);
}
.article-carte:hover { border-color: var(--rule); transform: translateY(-3px); }
.article-carte__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-alt); }
.article-carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duree) var(--ease-stage); }
.article-carte:hover .article-carte__media img { transform: scale(1.04); }
.article-carte__corps { padding: var(--e-3); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.article-carte__date { font-size: var(--t-11); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); margin: 0; }
.article-carte__titre { font-size: var(--t-20); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.article-carte__chapo { font-size: var(--t-14); color: var(--fg-dim); line-height: 1.55; margin: 0; }
.article-carte .lien-fleche { margin-top: auto; padding-top: var(--e-1); }

/* Page d'un article : colonne centrée, image en tête, façon Opéra de Paris. */
.article-page { padding-block: var(--py); }
@media (min-width: 1024px) { .article-page { padding-block: var(--py-lg); } }

.article-page__retour { max-width: 54rem; margin: 0 auto var(--e-3); font-size: var(--t-14); }
.article-page__retour a { color: var(--fg-dim); text-decoration: none; transition: color var(--duree) var(--ease-stage); }
.article-page__retour a:hover { color: var(--fg); }

.article-page__media {
  max-width: 54rem;
  margin: 0 auto var(--e-4);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-carte);
  background: var(--bg-alt);
}
.article-page__media img { width: 100%; height: 100%; object-fit: cover; }

/* En-tête centré : catégorie, titre, méta, partage. */
.article-page__entete { max-width: 46rem; margin: 0 auto var(--e-5); text-align: center; }
.article-page__titre { font-size: var(--t-48); font-weight: 300; letter-spacing: -0.02em; margin: var(--e-1) 0 var(--e-2); }
.article-page__meta { font-size: var(--t-14); color: var(--fg-dim); }
.article-page__meta a { color: inherit; }

/* Boutons de partage : pastilles rondes contour. */
.partage { display: flex; justify-content: center; gap: 0.6rem; margin-top: var(--e-3); }
.partage__lien {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: none;
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duree) var(--ease-stage),
              color var(--duree) var(--ease-stage),
              border-color var(--duree) var(--ease-stage);
}
.partage__lien:hover,
.partage__lien[data-copie='oui'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.partage__lien svg { width: 1rem; height: 1rem; fill: currentColor; }

/* Corps de lecture : colonne étroite centrée, chapô en tête. */
.article-page__corps { max-width: 40rem; margin: 0 auto; }
.article-page__chapo { font-size: var(--t-20); font-weight: 300; line-height: 1.65; color: var(--fg); margin: 0 0 var(--e-3); }
.article-page__corps h3 { font-size: var(--t-20); font-weight: 400; letter-spacing: 0; margin: var(--e-4) 0 var(--e-1); }
.article-page__corps p { margin: 0 0 var(--e-2); line-height: 1.8; }
.article-page__corps a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); transition: text-decoration-color var(--duree) var(--ease-stage); }
.article-page__corps a:hover { text-decoration-color: var(--fg); }

/* Liste éditoriale du journal (façon « communiqués » de l'Opéra de Paris) :
   image à gauche, date + titre à droite, filet entre chaque billet. */
.journal-liste { display: grid; }
.communique {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4) 0;
  border-top: 1px solid var(--rule-soft);
  text-decoration: none;
  color: inherit;
  align-items: center;
}
.journal-liste .communique:last-child { border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 700px) {
  .communique { grid-template-columns: 20rem 1fr; gap: var(--e-5); }
}
.communique__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-carte); background: var(--bg-alt); }
.communique__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duree) var(--ease-stage); }
.communique:hover .communique__media img { transform: scale(1.04); }
.communique__date { font-size: var(--t-11); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 0.5rem; }
.communique__titre { font-size: var(--t-30); font-weight: 300; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.communique:hover .communique__titre { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.communique__chapo { color: var(--fg-dim); line-height: 1.6; margin: 0; max-width: 58ch; }

/* ---------------------------------------------------------------- FAQ -- */

/* Onglets (façon Opéra de Paris). */
.onglets__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--e-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--e-4);
}
.onglets__tab {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--fg-dim);
  padding: 0.6rem 0.2rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--duree) var(--ease-stage), border-color var(--duree) var(--ease-stage);
}
.onglets__tab:hover { color: var(--fg); }
.onglets__tab[aria-selected='true'] { color: var(--fg); border-bottom-color: var(--fg); }

/* Titre de repli : visible seulement sans JS (les onglets sont alors masqués
   et tous les panneaux affichés). */
.onglets__repli { display: none; }
.no-js .onglets__liste { display: none; }
.no-js .onglets__panneau[hidden] { display: block; }
.no-js .onglets__repli {
  display: block;
  font-size: var(--t-30);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: var(--e-4) 0 var(--e-2);
}

/* Un item = un <details> natif : ouverture/fermeture sans JS, chaque bloc
   possède une ancre pour le lien direct. */
.faq__item { border-top: 1px solid var(--rule-soft); }
.onglets__panneau .faq__item:last-of-type { border-bottom: 1px solid var(--rule-soft); }
/* léger décalage pour que l'en-tête collant ne masque pas la question ciblée */
.faq__item { scroll-margin-top: calc(var(--h-entete) + 1rem); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-3) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-20);
  font-weight: 400;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--fg-dim); }
.faq__chevron {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: var(--fg-dim);
  transition: transform var(--duree) var(--ease-stage);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }

.faq__r { padding: 0 0 var(--e-3); max-width: 66ch; }
.faq__r p { margin: 0 0 var(--e-2); line-height: 1.7; color: var(--fg-dim); }
.faq__r a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); transition: text-decoration-color var(--duree) var(--ease-stage); }
.faq__r a:hover { text-decoration-color: var(--fg); }
.faq__ancre {
  display: inline-block;
  margin-top: var(--e-1);
  font-size: var(--t-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
}
.faq__ancre::before { content: '# '; }
.faq__ancre:hover { color: var(--fg); }

/* Action secondaire sur fond clair : contour, pas de fond. Sans elle, un
   bouton secondaire retomberait sur .btn — une pastille noire pleine, donc
   le même poids que l'action principale. */
.btn--fantome {
  background: none;
  color: var(--fg);
  border-color: var(--rule);
}
.btn--fantome:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); opacity: 1; }

/* Sur bloc noir, les rôles s'inversent. */
.section--noir .btn,
.heros .btn {
  background: #fff;
  color: #000;
}
/* Avec l'alternance stricte, un bouton secondaire peut tomber sur blanc comme
   sur noir : il lui faut les deux variantes. Sans celle-ci, `.section--noir
   .btn` (spécificité supérieure) l'emporterait et le bouton secondaire
   deviendrait une pastille blanche pleine — le poids de l'action principale. */
.section--noir .btn--fantome,
.heros .btn--clair {
  background: none;
  color: #fff;
  border-color: var(--bloc-rule);
}
.section--noir .btn--fantome:hover,
.heros .btn--clair:hover { background: #fff; color: #000; border-color: #fff; opacity: 1; }

/* Lien fléché */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-14);
  font-weight: 400;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--duree) var(--ease-stage), gap var(--duree) var(--ease-stage);
}
.lien-fleche:hover { border-bottom-color: currentColor; gap: 0.7rem; }
.lien-fleche::after { content: '\2192'; }
.section--noir .lien-fleche { color: var(--bloc-fg); border-bottom-color: var(--bloc-rule); }

/* ------------------------------------------------------------ En-tête -- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  /* Ombre douce et diffuse sous le menu, révélée au défilement — elle
     détache la barre du contenu sans trait dur. Absente en haut de page. */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow var(--duree) var(--ease-stage);
}
.entete[data-defile='oui'] {
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--h-entete);
}

/* Groupe de droite : navigation + loupe + burger. */
.entete__droite { display: flex; align-items: center; gap: var(--e-2); }

/* ------------------------------------------------------- Recherche -- */

/* Bouton loupe cerclé : lisible comme un bouton (et non un simple picto),
   il s'inverse au survol, à l'image des autres actions du site. */
.recherche-declencheur {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--rule);
  padding: 0;
  cursor: pointer;
  color: var(--fg);
  border-radius: 50%;
  transition: background-color var(--duree) var(--ease-stage),
              color var(--duree) var(--ease-stage),
              border-color var(--duree) var(--ease-stage);
}
.recherche-declencheur:hover,
.recherche-declencheur:focus-visible {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.no-js .recherche-declencheur { display: none; }

.recherche[hidden] { display: none; }
.recherche {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.recherche__voile { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.recherche__panneau {
  position: relative;
  width: min(680px, 92vw);
  margin-top: 12vh;
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-carte);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.recherche__barre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.recherche__loupe { color: var(--fg-dim); flex-shrink: 0; }
.recherche__champ {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0.9rem 0;
  font-family: var(--sans);
  font-size: var(--t-20);
  font-weight: 300;
  color: var(--fg);
}
.recherche__champ:focus { outline: none; }
.recherche__champ::placeholder { color: var(--fg-dim); }
.recherche__fermer {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--fg-dim);
  padding: 0 0.3rem;
  transition: color var(--duree) var(--ease-stage);
}
.recherche__fermer:hover { color: var(--fg); }
.recherche__resultats { max-height: min(60vh, 30rem); overflow-y: auto; }
.recherche__item {
  display: block;
  padding: 0.8rem 1.15rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--rule-soft);
  transition: background-color var(--duree) var(--ease-stage);
}
.recherche__item:last-child { border-bottom: 0; }
.recherche__item:hover,
.recherche__item:focus-visible { background: var(--bg-alt); }
.recherche__item-titre { display: block; font-size: var(--t-16); }
.recherche__item-desc {
  display: block;
  font-size: var(--t-14);
  color: var(--fg-dim);
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recherche__vide { padding: 1.15rem; margin: 0; color: var(--fg-dim); }

/* ---------------------------------------------------------------- Logo -- */

/* Le logo d'origine, non retouché. Le fichier est blanc sur transparence :
   sur l'en-tête clair on l'inverse en CSS pour qu'il soit visible, sur le
   pied noir on le laisse tel quel. Le PNG lui-même n'est jamais modifié.

   Il contient le nom de l'école en petites capitales : en dessous de ~60px
   de haut, ce texte devient illisible — d'où la hauteur généreuse. */
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { height: 64px; width: auto; filter: invert(1); }
@media (max-width: 480px) { .logo img { height: 52px; } }

.nav__liste {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item { position: relative; }
.nav__tete { display: flex; align-items: center; gap: 0.15rem; }

.nav__lien {
  position: relative;
  font-size: var(--t-14);
  font-weight: 400;
  text-decoration: none;
  color: var(--fg);
  padding: 0.4rem 0;
  white-space: nowrap;
}

/* Lien sortant vers le site de la compagnie. */
.nav__lien--externe { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav__ext { width: 0.5rem; height: 0.5rem; opacity: 0.55; flex-shrink: 0; }
.nav__lien--externe:hover .nav__ext { opacity: 1; }

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
  color: var(--fg);
}
.burger svg { display: block; }

/* --------------------------------------------------------- Déroulants -- */

.nav__chevron {
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0.35rem;
  cursor: pointer;
  color: var(--fg-dim);
  transition: transform var(--duree) var(--ease-stage), color var(--duree) var(--ease-stage);
}
.nav__chevron svg { width: 0.7rem; height: 0.7rem; display: block; }
.nav__chevron[aria-expanded='true'] { transform: rotate(180deg); color: var(--fg); }

.sous-menu { list-style: none; margin: 0; padding: 0; }

.sous-menu__lien {
  display: block;
  font-size: var(--t-14);
  font-weight: 300;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
  transition: background-color var(--duree) var(--ease-stage);
}

.sous-menu__date {
  display: block;
  font-size: var(--t-11);
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}

/* Sous-menu « riche » : nom + une ligne de description. Styles de base
   (raffinés pour le déroulant desktop, compactés sur mobile plus bas). */
.sous-menu__carte { display: block; text-decoration: none; color: var(--fg); }
.sous-menu__nom { display: block; }
.sous-menu__accroche { display: block; color: var(--fg-dim); }
.sous-menu__entete {
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.sous-menu__pied a { display: block; text-decoration: none; color: var(--fg); }

/* ─────────────────────────────────────────────────────────────────────────
   POINT DE BASCULE DE LA NAVIGATION : 1200px.

   La barre porte 9 liens + 2 pastilles d'action (« Trouver mon cours » et
   Contact), soit ~1065px de contenu. Avec le logo et les marges, il faut
   ~1150px pour l'afficher sans débordement. On bascule donc à 1200px : au-delà,
   la barre complète ; en dessous, le burger.

   Une media query ne peut pas lire une variable CSS : cette valeur est
   répétée ici, dans le bloc max-width plus bas, et dans assets/js/site.js
   (BASCULE_NAV). Les trois DOIVENT rester synchronisés.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  /* Barre déployée : petites capitales espacées — la voix typographique des
     pastilles du design system — et soulignement qui se déploie de la gauche
     au survol. Le trait reste plein sous la page courante. */
  .nav__lien {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.5rem 0;
  }
  .nav__lien::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1rem;
    height: 1px;
    background: var(--fg);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duree) var(--ease-stage);
  }
  .nav__lien:hover::after,
  .nav__lien:focus-visible::after,
  .nav__lien[aria-current='page']::after { transform: scaleX(1); }

  /* Contact : seule action directe de la barre, montée en pastille. */
  .nav__lien--cta {
    border: 1px solid var(--fg);
    border-radius: var(--r-pastille);
    padding: 0.55rem 1.15rem;
    transition: background-color var(--duree) var(--ease-stage),
                color var(--duree) var(--ease-stage);
  }
  .nav__lien--cta::after { content: none; }
  .nav__lien--cta:hover,
  .nav__lien--cta:focus-visible {
    background: var(--fg);
    color: var(--bg);
  }

  /* « Trouver mon cours » : pastille pleine (action mise en avant). Elle
     s'inverse au survol — miroir du bouton Contact, qui se remplit. */
  .nav__lien--cta-plein { background: var(--fg); color: var(--bg); }
  .nav__lien--cta-plein:hover,
  .nav__lien--cta-plein:focus-visible { background: transparent; color: var(--fg); }

  .sous-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: -1.1rem;
    min-width: 17.5rem;
    background: var(--bg);
    border: 1px solid var(--rule-soft);
    border-radius: 1.15rem;
    padding: 0.5rem;
    /* Seule ombre du site : un panneau flottant a besoin d'une élévation,
       même dans un système plat — sans elle, il se confond avec la page sur
       fond blanc. Trois couches douces et descendantes, pas de halo :
       un contact net, une pénombre proche, une portée lointaine. */
    box-shadow:
      0 1px 1px rgba(5, 5, 5, 0.04),
      0 10px 22px -10px rgba(5, 5, 5, 0.14),
      0 26px 50px -20px rgba(5, 5, 5, 0.12);
    /* visibility plutôt que display : display ne s'anime pas, et visibility
       retire quand même l'élément du parcours clavier une fois fermé. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.24s var(--ease-stage),
                transform 0.24s var(--ease-stage),
                visibility 0.24s var(--ease-stage);
  }

  /* Pont invisible entre l'entrée et le panneau : le panneau est décollé de
     0.5rem, sans ce pont le survol se casse en traversant l'interstice et le
     menu se referme au milieu du geste. */
  .nav__item--deroulant::after {
    content: '';
    position: absolute;
    inset: 100% 0 -0.6rem 0;
  }

  /* focus-within ouvre le déroulant à la tabulation, data-ouvert au clic sur
     le chevron. Sans focus-within, le menu ne serait accessible qu'à la
     souris ; sans data-ouvert, il serait inaccessible au doigt. */
  .nav__item--deroulant:focus-within .sous-menu,
  .sous-menu[data-ouvert='oui'] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Lien simple (Stages) : même pastille arrondie que les cartes riches. */
  .sous-menu__lien {
    padding: 0.6rem 0.85rem;
    border-radius: 0.8rem;
    transition: background-color 0.2s var(--ease-stage);
  }

  .sous-menu__date { margin-top: 0.1rem; }

  /* ---- Déroulants riches (Cours, Ressources) ---- */
  .sous-menu--riche { min-width: 23rem; }

  /* Intitulé de section : petite étiquette, filet fin dessous pour asseoir
     la liste. */
  .sous-menu__entete {
    padding: 0.5rem 0.85rem 0.55rem;
    margin: 0 0.2rem 0.35rem;
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--t-11);
    letter-spacing: 0.18em;
  }

  /* Carte : nom + accroche, avec une flèche qui glisse à droite au survol. */
  .sous-menu__carte {
    position: relative;
    padding: 0.6rem 2.1rem 0.64rem 0.85rem;
    border-radius: 0.8rem;
    transition: background-color 0.2s var(--ease-stage);
  }
  .sous-menu__carte::after {
    content: '→';
    position: absolute;
    right: 0.9rem;
    top: 0.72rem;
    color: var(--fg-dim);
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity 0.2s var(--ease-stage), transform 0.2s var(--ease-stage);
  }
  .sous-menu__carte:hover,
  .sous-menu__carte:focus-visible { background: var(--bg-alt); }
  .sous-menu__carte:hover::after,
  .sous-menu__carte:focus-visible::after {
    opacity: 1;
    transform: none;
    color: var(--fg);
  }
  .sous-menu__nom { font-size: var(--t-16); font-weight: 500; letter-spacing: -0.01em; }
  .sous-menu__accroche { font-size: var(--t-14); line-height: 1.42; margin-top: 0.12rem; }

  /* Lien de pied : « Toutes les disciplines → », séparé par un filet, avec
     une flèche qui s'écarte au survol. */
  .sous-menu__pied { margin-top: 0.35rem; padding-top: 0.15rem; border-top: 1px solid var(--rule-soft); }
  .sous-menu__pied a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 0.85rem;
    border-radius: 0.8rem;
    font-size: var(--t-14);
    font-weight: 500;
    transition: gap 0.24s var(--ease-stage), background-color 0.2s var(--ease-stage);
  }
  .sous-menu__pied a:hover { gap: 0.75rem; background: var(--bg-alt); }
}

/* L'ouverture au survol n'a de sens que là où le survol existe. Sur une
   tablette tactile large, il n'y a pas de :hover — le chevron doit donc
   rester cliquable, sinon les déroulants sont tout simplement inatteignables.
   On sépare la mise en page (largeur) de l'interaction (capacité du pointeur). */
@media (min-width: 1280px) and (hover: hover) {
  .nav__item--deroulant:hover .sous-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sous-menu__lien:hover { background: var(--bg-alt); }

  /* Ici seulement, le chevron n'est qu'un repère : survol et focus suffisent
     à ouvrir, on le sort du parcours clavier pour ne pas imposer une
     tabulation de plus par entrée. */
  .nav__chevron { pointer-events: none; }
}

/* Miroir du seuil ci-dessus : 1279 = 1280 − 1. */
@media (max-width: 1279px) {
  .burger { display: block; }

  .nav {
    position: fixed;
    inset: var(--h-entete) 0 0;
    background: var(--bg);
    padding: var(--e-4) var(--pad-x);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--duree) var(--ease-stage);
    visibility: hidden;
  }
  .nav[data-ouvert='oui'] { transform: translateX(0); visibility: visible; }

  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste > li { border-bottom: 1px solid var(--rule-soft); }
  .nav__lien {
    display: block;
    padding: var(--e-2) 0;
    font-size: var(--t-30);
    font-weight: 300;
    letter-spacing: -0.02em;
  }
  /* Page courante : estompée plutôt que soulignée — dans une liste plein
     écran, c'est « vous êtes ici », pas un lien à re-cliquer. */
  .nav__lien[aria-current='page'] { color: var(--fg-dim); }

  /* Au doigt, un déroulant au survol n'existe pas : le sous-menu devient un
     accordéon que le chevron ouvre et ferme.
     Pas d'animation de hauteur : l'astuce grid-template-rows 0fr→1fr ne
     dimensionne que la PREMIÈRE rangée, or ce sous-menu a 8 <li> — les sept
     autres resteraient dépliés. */
  .nav__tete { justify-content: space-between; }
  .nav__tete .nav__lien { flex: 1; }
  .nav__chevron { padding: var(--e-2) 0 var(--e-2) var(--e-2); color: var(--fg); }
  .nav__chevron svg { width: 0.9rem; height: 0.9rem; }

  .sous-menu { display: none; }
  .sous-menu[data-ouvert='oui'] { display: block; }
  .sous-menu__lien { padding: 0.55rem 0 0.55rem var(--e-2); font-size: var(--t-16); }
  .sous-menu > li:last-child .sous-menu__lien { padding-bottom: var(--e-2); }

  /* Accordéon mobile : version compacte des sous-menus riches — juste les
     noms, ni description ni en-tête, pour ne pas gonfler le menu plein écran. */
  .sous-menu__entete { display: none; }
  .sous-menu__accroche { display: none; }
  .sous-menu__carte { padding: 0.55rem 0 0.55rem var(--e-2); font-size: var(--t-16); }
  .sous-menu__pied a { padding: 0.55rem 0 0.7rem var(--e-2); font-size: var(--t-16); font-weight: 400; }
}

/* --------------------------------------------------------------- Héros -- */

.heros {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
  background: var(--pitch);
  overflow: hidden;
}
.heros__media { position: absolute; inset: 0; }
.heros__media img { width: 100%; height: 100%; object-fit: cover; }
.heros__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    rgba(0, 0, 0, 0.18) 70%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* La vidéo recouvre l'image, et n'apparaît qu'une fois la lecture lancée :
   sans ce fondu, on verrait un carré noir le temps du premier décodage. */
.heros__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms var(--ease-stage);
}
.heros__video[data-actif='oui'] { opacity: 1; }

/* Le wrapper .contenu du héros porte la grille (mêmes marges que les
   sections du dessous) ; .heros__texte, à l'intérieur, ne fait que limiter
   la largeur de lecture. Avant, les deux rôles étaient sur le même élément :
   margin-inline auto + max-width 46rem CENTRAIT la boîte — le titre flottait
   ~300px plus à droite que le contenu des sections suivantes. */
.heros > .contenu {
  position: relative;
  z-index: 1;
}

.heros__texte {
  color: #fff;
  padding-block: var(--e-5);
  max-width: 46rem;
}
.heros h1 { font-size: clamp(2.1rem, 5vw, 4.75rem); color: #fff; margin-bottom: var(--e-2); }
.heros .surtitre { color: rgba(255, 255, 255, 0.66); }
.heros__plomb {
  font-size: var(--t-20);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 34rem;
  margin-bottom: var(--e-3);
}
.heros__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--e-3); }

.heros--page { min-height: min(52vh, 440px); }
.heros--page h1 { font-size: clamp(1.9rem, 4.4vw, 4rem); }

/* ------------------------------------------------------------ Grilles -- */

.grille { display: grid; gap: var(--e-3); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--e-4); }

/* Colonnes fixes plutôt qu'auto-fit : les 8 disciplines doivent tomber en
   4+4 ou 2+2+2+2, jamais en 5+3 — une ligne orpheline casse la composition.
   Seuls 2 et 4 divisent 8 proprement : on ne passe jamais par 3 colonnes. */
.grille--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .grille--4 { grid-template-columns: repeat(4, 1fr); } }

/* Texte sur 7 colonnes, latérale sur 4 — la grille du design system. */
.duo { display: grid; gap: var(--e-4); align-items: center; }

/* Quand la colonne latérale est un tableau d'infos et non une photo, le
   centrage vertical creuse un trou sous le texte : on cale les deux en haut. */
.duo--haut { align-items: start; }
@media (min-width: 900px) {
  .duo {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap-grille);
  }
  .duo > *:first-child { grid-column: span 7; }
  .duo > *:last-child { grid-column: span 5; }
  .duo--inverse > *:first-child { grid-column: 6 / span 7; grid-row: 1; }
  .duo--inverse > *:last-child { grid-column: 1 / span 5; grid-row: 1; }
}

/* ------------------------------------------------- Carte discipline -- */

.discipline {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--pitch);
  border-radius: var(--r-carte);
  overflow: hidden;
}
.discipline__media { aspect-ratio: 4 / 5; overflow: hidden; }
.discipline__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: transform var(--duree) var(--ease-stage), opacity var(--duree) var(--ease-stage);
}
.discipline:hover .discipline__media img { transform: scale(1.05); opacity: 1; }

/* Sur une section noire, la carte est noire elle aussi : là où la photo est
   sombre (une danseuse sur fond de scène, par exemple), le bord de la carte
   s'évapore et la grille se désagrège. On rend les photos à pleine opacité —
   l'atténuation ne servait qu'à les adoucir sur du blanc — et on pose un
   filet discret pour tenir la forme. */
.section--noir .discipline { outline: 1px solid rgba(255, 255, 255, 0.14); outline-offset: -1px; }
.section--noir .discipline__media img { opacity: 1; }

.discipline__texte {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--e-3);
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
.discipline__titre {
  font-size: var(--t-20);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

/* ------------------------------------------------------------- Photos -- */

.photo { overflow: hidden; background: var(--bg-alt); border-radius: var(--r-carte); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--large { aspect-ratio: 3 / 2; }
.photo--portrait { aspect-ratio: 3 / 4; }

/* Bandeau panoramique : conçu pour des sources très larges (≈ 1920 × 350).
   On garde le ratio natif en desktop ; en dessous de 900 px, un 5,5:1 ferait
   à peine 70 px de haut — on recadre en 3:1, la source étant assez large
   pour que object-fit: cover coupe sur les côtés sans zoomer. */
.photo--bandeau { aspect-ratio: 1920 / 350; }
@media (max-width: 899px) { .photo--bandeau { aspect-ratio: 3 / 1; } }


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

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--e-2);
}

/* Aperçu d'accueil : exactement 6 photos → 3+3, jamais 4+2. */
.galerie--apercu { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galerie--apercu { grid-template-columns: repeat(3, 1fr); } }

.galerie__item {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-alt);
  border: 0;
  border-radius: var(--r-carte);
  padding: 0;
  cursor: zoom-in;
}
.galerie__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duree) var(--ease-stage);
}
.galerie__item:hover img { transform: scale(1.05); }

/* Visionneuse */
.visionneuse {
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.96);
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
}
.visionneuse::backdrop { background: rgba(0, 0, 0, 0.96); }
.visionneuse__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--e-4);
}
.visionneuse img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: var(--r-carte); }
.visionneuse__fermer {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  background: none;
  border: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  padding: var(--e-2);
  cursor: pointer;
}
.visionneuse__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  padding: var(--e-2);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duree) var(--ease-stage);
}
.visionneuse__nav:hover { opacity: 1; }
.visionneuse__nav--prec { left: 0; }
.visionneuse__nav--suiv { right: 0; }

/* ------------------------------------------------------- Liste stages -- */

.stages { list-style: none; margin: 0; padding: 0; }
.stage {
  display: grid;
  gap: var(--e-2);
  padding-block: var(--e-3);
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
@media (min-width: 700px) {
  .stage { grid-template-columns: 11rem 1fr auto; gap: var(--e-3); }
}
.stage:last-child { border-bottom: 1px solid var(--rule-soft); }
.section--noir .stage { border-color: rgba(255, 255, 255, 0.16); }

.stage__date {
  font-size: var(--t-30);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stage__titre { font-weight: 400; margin: 0 0 0.15rem; }
.stage__detail { font-size: var(--t-14); color: var(--fg-dim); margin: 0; }
.section--noir .stage__detail { color: var(--bloc-dim); }
.stage__prix {
  font-size: var(--t-30);
  font-weight: 300;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* --------------------------------------------------------- Infos clés -- */

.infos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.info {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  padding-block: 0.85rem;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-14);
}
.info:first-child { border-top: 0; }
.info__cle { color: var(--fg-dim); }
.info__valeur { text-align: right; }

/* ------------------------------------------------------------ Contact -- */

.coord { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.coord a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.coord a:hover { border-bottom-color: currentColor; }
.coord__label {
  display: block;
  font-size: var(--t-11);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 0.35rem;
}
.coord__valeur { font-size: var(--t-30); font-weight: 300; letter-spacing: -0.02em; }

/* Formulaire */
.champ { margin-bottom: var(--e-3); }
.champ label {
  display: block;
  font-size: var(--t-11);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: var(--e-1);
}
.champ input,
.champ textarea,
.champ select {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--t-16);
  font-weight: 300;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-carte);
  padding: 0.8rem 1rem;
  transition: border-color var(--duree) var(--ease-stage);
}
.champ input:focus,
.champ textarea:focus,
.champ select:focus { border-color: var(--fg); outline: none; }
.champ textarea { resize: vertical; min-height: 8rem; }
.champ--requis label::after { content: ' *'; }

/* Pot de miel anti-robot : sorti de l'écran, jamais vu ni tabulé. */
.champ-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bandeau de confirmation / erreur après envoi du formulaire (piloté par
   site.js selon le paramètre ?envoi= renvoyé par contact.php). Monochrome,
   dans l'esprit du reste : un filet à gauche distingue succès et échec. */
.form-etat {
  padding: var(--e-2) var(--e-3);
  margin-bottom: var(--e-3);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-carte);
  background: var(--smoke);
  font-size: var(--t-14);
  line-height: 1.5;
}
.form-etat--ok  { border-left-color: var(--fg); }
.form-etat--err { border-left-color: var(--fg-dim); }

/* ------------------------------------------------------ Plan d'accès -- */

.acces { display: grid; gap: var(--e-4); align-items: start; }
@media (min-width: 900px) { .acces { grid-template-columns: 1fr 1fr; gap: var(--gap-grille); } }

.acces__plan { margin: 0; }

/* Cadre de la carte : porte la bordure, le rayon et le recadrage. C'est lui
   qui reçoit les surimpressions (épingle, étiquette). */
.acces__carte-cadre {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r-carte);
  overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.35);
}

.acces__carte {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  /* Désaturée au repos pour tenir avec le noir et blanc du site ; la couleur
     revient au survol / focus, quand on s'en sert vraiment. */
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--duree) var(--ease-stage);
}
@media (max-width: 899px) { .acces__carte { aspect-ratio: 3 / 2; } }
.acces__carte-cadre:hover .acces__carte,
.acces__carte-cadre:focus-within .acces__carte { filter: none; }

/* Épingle dessinée, centrée sur le marqueur OSM (le cadrage est centré
   dessus). translate -100% en Y : la pointe touche le centre exact. */
.acces__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  color: var(--ink);
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
}
.acces__pin svg { display: block; }

/* Étiquette d'adresse flottante, coin bas-gauche. */
.acces__etiquette {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  max-width: calc(100% - 1.7rem);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--t-11);
  letter-spacing: 0.04em;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pastille);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

/* Sous la carte : attribution à gauche, bouton Google Maps à droite. */
.acces__sous-carte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.acces__credit { font-size: var(--t-11); color: var(--fg-dim); letter-spacing: 0.04em; margin: 0; }
.acces__credit a { color: inherit; }
.acces__sous-carte .btn svg { flex-shrink: 0; }

/* Ligne de transport : intitulé du mode | pastille(s) de ligne | détail.
   Le grille aligne verticalement les trois colonnes d'une ligne à l'autre. */
.acces__ligne {
  display: grid;
  grid-template-columns: 3rem auto 1fr;
  gap: var(--e-2);
  align-items: center;
  padding: var(--e-2) 0;
  border-top: 1px solid var(--rule-soft);
}
.acces__ligne:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.acces__lignes { display: flex; gap: 0.35rem; }

/* Pastille de numéro de ligne (façon plan de transport) : contour par
   défaut, pleine pour le tram. */
.ligne-num {
  display: inline-grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.45rem;
  border-radius: var(--r-pastille);
  border: 1px solid var(--rule);
  font-size: var(--t-14);
  font-weight: 400;
  line-height: 1;
}
.ligne-num--plein { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.acces__titre { font-size: var(--t-20); font-weight: 400; margin: 0 0 var(--e-1); }
.acces__adresse { margin-bottom: var(--e-4); }

.acces__sous-titre { font-size: var(--t-16); font-weight: 400; letter-spacing: 0; margin: var(--e-4) 0 var(--e-2); }
.acces__sous-titre:first-of-type { margin-top: 0; }

.acces__mode { margin-bottom: var(--e-2); }
.acces__mode-titre { color: var(--fg-dim); margin: 0 0 0.1rem; font-size: var(--t-14); }
.acces__mode-detail { margin: 0; }

/* Marque ce qui reste à confirmer avec l'école. Volontairement visible :
   un « à confirmer » qu'on ne voit pas est un « à confirmer » qu'on oublie. */
.acces__todo {
  font-size: var(--t-11);
  letter-spacing: 0.06em;
  color: var(--bg);
  background: var(--fg);
  border-radius: var(--r-pastille);
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------- Instagram -- */

.insta { display: grid; gap: var(--e-4); align-items: center; }
@media (min-width: 900px) { .insta { grid-template-columns: 20rem 1fr; gap: var(--gap-grille); } }

/* Le dégradé signature d'Instagram — SEULE couleur du site en dehors du
   noir et blanc. Elle est ici justifiée : c'est ce qui rend le réseau
   reconnaissable au premier regard. Réservée à l'avatar et au bouton. */
:root { --insta-degrade: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); }

/* Carte façon profil Instagram. */
.insta-carte {
  border: 1px solid var(--rule);
  border-radius: var(--r-carte);
  overflow: hidden;
  background: var(--bg);
}

.insta-carte__tete {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
/* Avatar : anneau dégradé Instagram, logo blanc sur pastille noire. */
.insta-carte__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  padding: 2px;
  background: var(--insta-degrade);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.insta-carte__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #000;
  padding: 6px;
  object-fit: contain;
}
.insta-carte__id { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.insta-carte__pseudo { font-weight: 500; font-size: var(--t-14); }
.insta-carte__nom { font-size: var(--t-11); color: var(--fg-dim); }
/* Bouton « Suivre » : le bleu d'Instagram, autre repère du réseau. */
.insta-carte__suivre {
  font-size: var(--t-14);
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  background: #0095f6;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: opacity var(--duree) var(--ease-stage);
}
.insta-carte__suivre:hover { opacity: 0.88; }

/* Grille carrée, comme un profil. 3 colonnes fixes : convention du réseau,
   et ça évite les lignes orphelines. */
.insta__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }

.insta__vignette {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-alt);
  text-decoration: none;
  display: block;
}
.insta__vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duree) var(--ease-stage), opacity var(--duree) var(--ease-stage);
}
.insta__vignette:hover img { transform: scale(1.06); opacity: 0.9; }
/* Petit glyphe Instagram au coin de chaque vignette : rappelle que ce sont
   des publications du réseau. */
.insta__glyphe {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 17px;
  height: 17px;
  color: #fff;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.insta__glyphe svg { width: 100%; height: 100%; fill: currentColor; }

/* Bouton pleine largeur au dégradé Instagram : l'appel à l'action final. */
.insta-carte__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem;
  text-decoration: none;
  font-size: var(--t-14);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--insta-degrade);
  transition: opacity var(--duree) var(--ease-stage);
}
.insta-carte__cta:hover { opacity: 0.9; }
.insta-carte__cta svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* ------------------------------------------------------- Pied de page -- */

.pied {
  background: var(--pitch);
  color: rgba(255, 255, 255, 0.66);
  padding-block: var(--e-5) var(--e-3);
  font-size: var(--t-14);
}
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { color: #fff; }
/* Cinq colonnes structurées : la marque (plus large), puis Les cours,
   L'école, Ressources, Contact — dans l'ordre de la navigation. Sur les
   écrans étroits, elles se replient d'elles-mêmes. */
.pied__grille {
  display: grid;
  gap: var(--e-4) var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
@media (min-width: 1024px) {
  .pied__grille {
    grid-template-columns: 1.7fr 1fr 1fr 1fr 1.1fr;
    gap: var(--gap-grille);
  }
}
.pied__titre {
  font-size: var(--t-11);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--e-2);
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

/* Phrase de présentation sous le logo, dans la colonne de marque. */
.pied__accroche {
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--t-14);
  line-height: 1.55;
  max-width: 26ch;
  margin: var(--e-2) 0 0;
}

/* Le logo est blanc à l'origine et le pied est noir : aucun filtre. */
.pied__logo img { height: 72px; width: auto; }

/* Intitulé « Suivez-nous » au-dessus des icônes : espacé du logo, collé aux
   réseaux qu'il coiffe. */
.pied__titre--reseaux { margin-top: var(--e-3); margin-bottom: 0; }
.reseaux { display: flex; gap: var(--e-2); margin-top: var(--e-1); }

/* Adresse dans la colonne Contact : détachée du téléphone/email par un léger
   espace, interlignage aéré pour les deux lignes. */
.pied__adresse-li {
  margin-top: 0.35rem;
  line-height: 1.5;
}
.reseaux a {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pastille);
  transition: background-color var(--duree) var(--ease-stage), color var(--duree) var(--ease-stage);
}
.reseaux a:hover { background: #fff; color: #000; }
.reseaux svg { width: 1rem; height: 1rem; fill: currentColor; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2);
  padding-top: var(--e-3);
  font-size: var(--t-11);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------ Apparition au défilement -- */

/* Apparition au défilement : glissement seul, SANS fondu.

   Le fondu a été retiré volontairement. graphite (#767676) donne 4,54:1 sur
   paper — le design system le signale lui-même comme « le seul point de
   vigilance », il passe le seuil de 4,5 de justesse. Un fondu compose le
   texte avec le fond : à 97 % d'opacité on tombe à 4,36:1, sous le seuil.
   L'audit d'accessibilité passait ou échouait selon l'instant où il mesurait.

   Cette animation ne fait pas partie du design system, qui ne définit le
   mouvement que pour « survols et changements d'état ». Entre une décoration
   et un contraste déterministe, on garde le contraste. */
.apparait {
  transform: translateY(18px);
  transition: transform 700ms var(--ease-stage);
}
.apparait[data-vu='oui'] { transform: none; }

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

/* Pas de JS : tout doit rester en place */
.no-js .apparait { transform: none; }

/* Le bloc spectacle a deux variantes (« à venir » / « passé »), toutes deux
   marquées hidden dans le HTML : c'est le JS qui révèle la bonne selon la date.
   Sans JS, aucune ne s'afficherait et la section serait vide. On révèle donc
   la variante « passé » — le message pérenne, juste en toute circonstance. */
.no-js [data-si='passe'][hidden] { display: revert; }