/* ==========================================================================
   HUNGRY JAZZ — GABARIT DES PAGES DE COURS
   --------------------------------------------------------------------------
   Feuille chargée UNIQUEMENT par les pages /cours/… : la homepage validée
   n'est jamais impactée, aucune de ses règles n'est modifiée ici.

   Elle s'appuie entièrement sur les tokens et les composants existants
   (.container, .chapter, .btn, .price, .faq, .person, .cta-band…) et
   n'ajoute que ce qui est propre à une page de cours.

   L'univers est passé par `data-universe` sur <body> : la variable
   `--c-accent` en découle, et tout le gabarit s'y accroche. Décliner la page
   Danse Afro revient donc à changer cet attribut, pas la feuille de style.
   ========================================================================== */

/* La couleur de l'univers est « capturée » une fois sur <body> sous un nom
   qui lui est propre. Indispensable : certains composants réutilisés
   redéfinissent `--c-accent` localement (les cartes de tarifs, par exemple),
   et un accent posé dessus deviendrait invisible. `--c-univers` traverse
   toute la page sans jamais être masqué.
   Décliner la page Danse Afro = changer `data-universe` sur <body>. */
body[data-universe] { --c-univers: var(--c-accent); }

/* Contraste mesuré sur fond noir : bleu 5,07:1 · orange 5,76:1 · rose 12,1:1.
   Tous conformes AA en texte normal. Aucune exception à prévoir ici. */

/* ==========================================================================
   ANCRES — le header est fixe, une ancre ne doit jamais masquer son titre
   --------------------------------------------------------------------------
   Au moment d'un saut d'ancre la page est toujours défilée : le header est
   donc dans son état compact. On réserve sa hauteur compacte, plus une
   respiration, pour que le titre de section arrive sous le bandeau et non
   derrière lui.
   ========================================================================== */
[id] { scroll-margin-top: calc(var(--header-h-compact) + var(--sp-s)); }

/* ==========================================================================
   HERO DE PAGE
   --------------------------------------------------------------------------
   Ce n'est PAS le hero de la homepage : pas de vidéo, pas de 100svh, pas
   d'accroche artistique séparée. Ici le H1 EST l'affiche — la plus grande
   chose de la page est aussi son titre sémantique, ce qui supprime la
   dualité titre visible / titre SEO.
   Fond encre : le header, blanc et transparent au-dessus du premier écran,
   reste lisible sans qu'aucune règle globale ne soit touchée.
   ========================================================================== */
.phero {
  position: relative;
  background: var(--c-ink-surface);
  color: var(--c-on-ink);
  padding-block: calc(var(--header-h) + var(--sp-l)) var(--sp-xl);
  overflow: hidden;
  isolation: isolate;
}

/* Damier très discret : rappel de la texture du logo, jamais un motif
   « image manquante ». Même valeur que le hero d'accueil. */
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-conic-gradient(#0A0A0A 0% 25%, #000 0% 50%);
  background-size: clamp(64px, 9vw, 128px) clamp(64px, 9vw, 128px);
}

/* Aplat de couleur en biais, ancré au bord droit : la signature « affiche »
   de la page. Décoratif, il ne porte aucune information et reste sous le
   texte. Masqué en dessous de 64em, où la composition devient verticale. */
.phero__field {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-end: 0;
  /* Largeur en `vw`, comme la taille du titre : le rapport entre l'aplat et
     le mot « SOLO JAZZ » reste constant à toutes les largeurs, et l'aplat ne
     vient jamais passer derrière le titre — du bleu sur du bleu serait
     illisible. Vérifié par mesure à 1024, 1280, 1440 et 1920 px. */
  width: 15vw;
  background: var(--c-univers);
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  display: none;
}
@media (min-width: 64em) { .phero__field { display: block; } }

/* ---- Fil d'Ariane ------------------------------------------------------ */
.breadcrumb {
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-ink-muted);
  margin-bottom: var(--sp-m);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: var(--sp-3xs);
  opacity: .5;
}
.breadcrumb a {
  text-decoration: underline;
  text-underline-offset: .3em;
  padding-block: 6px;    /* cible portée de 23 à 27 px */
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--c-on-ink); }
.breadcrumb [aria-current="page"] { color: var(--c-on-ink); }

/* ---- Surtitre ---------------------------------------------------------- */
.phero__kicker {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-univers);
  margin-bottom: var(--sp-s);
}

/* ---- H1 : l'affiche elle-même ------------------------------------------
   Le contenu textuel du H1 est exactement « Cours de Solo Jazz à Paris ».
   Le découpage en lignes ne sert qu'à la révélation par masque : aucun mot
   n'est masqué aux lecteurs d'écran, aucun texte n'est dupliqué. */
.phero__h1 {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.25rem, 5.4vw, 5rem);
  line-height: .96;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: var(--sp-m);
}

/* La ligne centrale porte le mot-clé : elle est deux fois plus grande et
   prend la couleur de l'univers. Le reste du titre reste blanc. */
.phero__h1-big {
  display: block;
  /* La borne basse d'un `clamp()` cesse de suivre la largeur : à 320 px, un
     minimum de 3,5 rem faisait déborder « SOLO JAZZ » hors de la colonne.
     La borne est abaissée et la part variable relevée d'autant : le mot
     occupe toujours la pleine largeur, sans jamais la dépasser.
     Mesuré à 320, 360, 375, 768, 1024, 1440 et 1920 px. */
  font-size: clamp(2.5rem, 13vw, 11rem);
  line-height: .84;
  color: var(--c-univers);
}

/* ---- Chapô ------------------------------------------------------------- */
.phero__lead {
  font-size: var(--fs-lead);
  line-height: 1.4;
  font-weight: var(--fw-medium);
  max-width: 46ch;
  margin-bottom: var(--sp-m);
}

.phero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
}

/* Le hero est sombre : le CTA principal s'inverse, comme sur la homepage. */
.phero .btn--primary {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}
.phero .btn--primary:hover,
.phero .btn--primary:focus-visible { background: transparent; color: var(--c-paper); }
.phero .btn--ghost:hover,
.phero .btn--ghost:focus-visible { background: var(--c-paper); color: var(--c-ink); }

/* ==========================================================================
   INTRO ÉDITORIALE
   ========================================================================== */
.pintro { display: grid; gap: var(--sp-l); }
@media (min-width: 64em) {
  .pintro { grid-template-columns: 5fr 6fr; gap: var(--sp-xl); align-items: start; }
}

.pintro__lead {
  font-size: var(--fs-lead);
  line-height: 1.35;
  font-weight: var(--fw-medium);
  max-width: 26ch;
}

.pintro__body { max-width: var(--container-text); }
.pintro__body p + p { margin-top: var(--sp-s); }

/* ==========================================================================
   LES TROIS COURS — bandes pleine largeur
   --------------------------------------------------------------------------
   Trois blocs de même structure, différenciés par leur fond : couleur de
   l'univers, encre, papier. Ils appartiennent visiblement à la même famille
   tout en se distinguant au premier coup d'œil, et la page ne devient ni
   entièrement blanche ni une succession de cartes.
   ========================================================================== */
.cours {
  padding-block: var(--sp-xl);
  border-top: var(--bd-rule) solid var(--c-ink);
}

.cours--accent { background: var(--c-univers); color: var(--c-on-color); }
.cours--ink    { background: var(--c-ink-surface); color: var(--c-on-ink); border-top-color: var(--c-ink-surface); }
.cours--paper  { background: var(--c-paper); color: var(--c-ink); }

.cours__inner { display: grid; gap: var(--sp-l); }
@media (min-width: 64em) {
  .cours__inner { grid-template-columns: 7fr 5fr; gap: var(--sp-xl); align-items: start; }
}

.cours__index {
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: .68;
  margin-bottom: var(--sp-2xs);
}
.cours--ink .cours__index { color: var(--c-univers); opacity: 1; }
.cours--paper .cours__index { color: var(--c-univers); opacity: 1; }

.cours__name {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 6.4vw, 5.5rem);
  font-weight: var(--fw-black);
  line-height: .9;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: var(--sp-s);
}

/* Niveau : la première information utile, donc traitée en titre secondaire
   et non en pastille. */
.cours__level {
  font-family: var(--f-cond);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-top: var(--bd-rule) solid currentColor;
  border-bottom: var(--bd-hair) solid currentColor;
  padding-block: var(--sp-2xs);
  margin-bottom: var(--sp-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2xs) var(--sp-s);
  justify-content: space-between;
}

/* Glyphe de durée : demi-cercle = 1 h, cercle plein = 1 h 30.
   Même clé que le Pack 12 h et que le planning. La durée reste écrite à
   côté : le glyphe ne porte jamais seul l'information. */
.cours__dur {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  white-space: nowrap;
}
.cours__dur svg { width: 15px; height: 15px; flex: none; }
.cours--ink .cours__dur { color: var(--c-univers); }
.cours--paper .cours__dur { color: var(--c-univers); }

.cours__desc { max-width: 54ch; margin-bottom: var(--sp-m); }
.cours__desc p + p { margin-top: var(--sp-2xs); }

.cours__actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); }

/* Le CTA s'adapte au fond du bloc, sans jamais perdre son aplat. */
.cours--accent .btn--primary,
.cours--paper .btn--primary {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
}
.cours--accent .btn--primary:hover,
.cours--accent .btn--primary:focus-visible,
.cours--paper .btn--primary:hover,
.cours--paper .btn--primary:focus-visible { background: transparent; color: var(--c-ink); }

.cours--ink .btn--primary {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}
.cours--ink .btn--primary:hover,
.cours--ink .btn--primary:focus-visible { background: transparent; color: var(--c-paper); }
.cours--ink .btn--ghost:hover,
.cours--ink .btn--ghost:focus-visible { background: var(--c-paper); color: var(--c-ink); }

/* ---- Colonne de faits --------------------------------------------------
   Remplie depuis window.HJ_DATA : jour, horaire et lieu ne sont JAMAIS
   écrits en dur dans le HTML, sans quoi ils divergeraient du planning. */
.cours__facts {
  display: grid;
  gap: 0;
  align-content: start;
  border-top: var(--bd-rule) solid currentColor;
  margin: 0;
}

.cours__fact {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--sp-s);
  padding-block: var(--sp-2xs);
  border-bottom: var(--bd-hair) solid currentColor;
}
.cours--accent .cours__fact { border-bottom-color: rgba(0, 0, 0, .3); }
.cours--paper .cours__fact  { border-bottom-color: var(--c-rule-soft); }
.cours--ink .cours__fact    { border-bottom-color: var(--c-rule-soft-inv); }

.cours__fact dt {
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: .68;
}
.cours__fact dd {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}

/* Lien vers Google Maps, identique au planning.
   Élément `inline` et non `inline-flex` : le rembourrage vertical agrandit
   alors la zone cliquable sans déplacer quoi que ce soit dans la mise en
   page. Le soulignement passe en `text-decoration`, qui reste collé au texte
   malgré ce rembourrage — une bordure basse, elle, s'en serait décollée.
   Cible mesurée : 15 px de haut avant, 25 px après (WCAG 2.2 · 2.5.8). */
.cours__lieu {
  text-decoration: underline;
  text-underline-offset: .22em;
  padding-block: 5px;
}
.lieu-ico { font-size: .8em; transition: transform var(--t-base) var(--ease); }
.cours__lieu:hover .lieu-ico,
.cours__lieu:focus-visible .lieu-ico,
.apercu__lieu:hover .lieu-ico,
.apercu__lieu:focus-visible .lieu-ico { transform: translate(.15em, -.15em); }

/* ==========================================================================
   ÉCHELLE DE NIVEAUX — « Quel cours choisir ? »
   --------------------------------------------------------------------------
   Une échelle, pas trois cartes : la barre s'allonge avec le niveau, ce qui
   rend la progression lisible d'un seul regard. La largeur est un appui
   visuel, jamais le seul indice — le niveau est écrit en toutes lettres.
   ========================================================================== */
.ladder {
  display: grid;
  border-top: var(--bd-rule) solid var(--c-ink);
}

.ladder__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2xs);
  padding-block: var(--sp-s);
  border-bottom: var(--bd-hair) solid var(--c-rule-soft);
  position: relative;
}
@media (min-width: 48em) {
  .ladder__row {
    grid-template-columns: 12rem 1fr auto;
    align-items: center;
    gap: var(--sp-s);
  }
}

.ladder__lvl {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-univers);
}

.ladder__name {
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 2.6vw, 2.25rem);
  font-weight: var(--fw-black);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.ladder__row:hover .ladder__name,
.ladder__link:focus-visible .ladder__name { text-decoration: underline; text-underline-offset: .18em; }

/* La barre est décorative : `aria-hidden` côté HTML. */
.ladder__bar {
  display: block;               /* un <span> reste inline : la hauteur serait ignorée */
  height: var(--bd-block);
  background: var(--c-univers);
  transform: scaleX(var(--w, 1));
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-expo);
}
.ladder__bar-track { display: block; }
@media (min-width: 48em) {
  .ladder__bar-track { grid-column: 2; }
}

.ladder__link {
  position: absolute;
  inset: 0;
  /* Le lien couvre la ligne entière : cible confortable, et un seul lien
     par ligne plutôt que deux liens vers la même ancre. */
}
.ladder__go {
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-paper-muted);
  white-space: nowrap;
}

.ladder__note {
  margin-top: var(--sp-m);
  max-width: 62ch;
}
.ladder__note p + p { margin-top: var(--sp-2xs); }

/* ==========================================================================
   APERÇU DU PLANNING
   --------------------------------------------------------------------------
   Vue compacte et non dépliable : la page reste éditoriale, le composant
   complet vit sur /planning/. Les lignes sont rendues depuis HJ_DATA par
   assets/js/schedule-apercu.js — aucune donnée d'horaire n'est écrite dans
   ce gabarit.
   ========================================================================== */
.apercu__day {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-univers);
  margin-bottom: var(--sp-s);
}

.apercu__list { border-top: var(--bd-hair) solid var(--c-rule-soft-inv); }

.apercu__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4xs) var(--sp-s);
  padding-block: var(--sp-s);
  border-bottom: var(--bd-hair) solid var(--c-rule-soft-inv);
  align-items: baseline;
}
@media (min-width: 48em) {
  .apercu__row { grid-template-columns: auto 1fr auto auto; }
}

.apercu__time {
  font-family: var(--f-cond);
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--c-univers);
}

.apercu__name {
  /* Élément inline : le rembourrage agrandit la cible (21 → 27 px en 375 px)
     sans toucher à la mise en page de la ligne. */
  padding-block: 3px;
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.apercu__name:hover,
.apercu__name:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

.apercu__meta,
.apercu__dur {
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-ink-muted);
}
@media (min-width: 48em) {
  .apercu__meta { justify-self: end; text-align: right; }
}
.apercu__dur {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  color: var(--c-univers);
  white-space: nowrap;
}
.apercu__dur svg { width: 14px; height: 14px; flex: none; }

.apercu__lieu {
  text-decoration: underline;
  text-underline-offset: .22em;
  padding-block: 5px;
  transition: color var(--t-fast) var(--ease);
}
.apercu__lieu:hover,
.apercu__lieu:focus-visible { color: var(--c-univers); }

/* ==========================================================================
   TARIFS — le composant de la homepage, resserré à un seul univers
   ========================================================================== */
.pricing--duo { grid-template-columns: 1fr; }
@media (min-width: 64em) {
  .pricing--duo .price--unit   { grid-column: 1 / span 4; }
  .pricing--duo .price--pack   { grid-column: 5 / span 4; }
  .pricing--duo .price--annual { grid-column: 9 / span 4; }
}

/* Le grand chiffre reprend la couleur de l'univers de la page. */
.price__row--accent .price__row-value { color: var(--c-univers); }

/* Version compacte : mêmes cartes, même identité, moins de rembourrage.
   La hauteur baisse sans qu'aucun corps de texte ni aucun aplat ne change. */
.pricing--compact .price { padding: var(--sp-s); }
.pricing--compact .price__title { margin-bottom: var(--sp-2xs); }
.pricing--compact .price__note { padding-top: var(--sp-2xs); }

/* ==========================================================================
   PROFESSEURS — variante compacte
   --------------------------------------------------------------------------
   Même composant que la homepage. Seul le fond du second panneau change :
   sur une page dont l'univers est le bleu, le rose de la homepage
   introduirait une couleur qui n'a rien à y faire. Modificateur porté par le
   conteneur : la homepage n'est pas touchée.
   ========================================================================== */
.people--duo .person { padding-block: var(--sp-l); }

.people--duo .person--karl {
  background: var(--c-univers);
  color: var(--c-on-color);
}
.people--duo .person--vivian {
  background: var(--c-ink-surface);
  color: var(--c-on-ink);
}
/* Sur fond noir, un filet noir translucide serait invisible. */
.people--duo .person--vivian .person__disciplines {
  border-bottom-color: var(--c-rule-soft-inv);
}
.people--duo .person--vivian .person__role { color: var(--c-univers); opacity: 1; }

/* Version compacte : portrait plus petit, bio courte. */
.people--duo .person__media { max-width: clamp(140px, 18vw, 200px); }
.people--duo .person__name { font-size: clamp(1.875rem, 4vw, 3rem); margin-bottom: var(--sp-s); }

/* ==========================================================================
   BANDEAU CTA FINAL — couleur de l'univers plutôt que l'orange de l'accueil
   ========================================================================== */
.cta-band--univers { background: var(--c-univers); }

/* ==========================================================================
   MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ladder__bar { transition: none; }
}

/* `.chapter-head--tight` et `.chapter-title` vivent désormais dans
   layout.css : la page À propos s'en sert aussi, et une seule définition
   vaut mieux que deux copies qui finiraient par diverger. */

/* Les trois blocs de cours sont pleine largeur : ils ne peuvent pas vivre
   dans un `.chapter`, dont le rembourrage les décollerait de leur aplat.
   Leur en-tête porte donc son propre intervalle, et la respiration haute
   vient du chapitre précédent. */
.cours-section__head { padding-block-end: var(--sp-l); }
.cours-section__head .chapter-title { margin-bottom: 0; }

/* Rangée de glyphes du Pack 12 h, à la couleur de l'univers. */
.pack-row--univers { color: var(--c-univers); }

/* Deux chapitres clairs qui se suivent SANS être frères directs (l'un est
   enveloppé dans sa propre <section>) échappent à la règle de layout.css et
   additionnent leurs marges — 222 px de blanc mesurés entre les tarifs et
   les professeurs. Ce modificateur rétablit un intervalle d'une seule unité. */
.chapter--flush { padding-top: 0; }

/* ==========================================================================
   CONTRASTES — corrections mesurées
   --------------------------------------------------------------------------
   Deux situations tombaient sous le seuil AA (4,5:1 en texte courant).

   1. Du noir ATTÉNUÉ sur l'aplat bleu.
      #000 à 68 % sur #4080C0 mesure 3,58:1. Il faudrait monter à 88 %
      d'opacité pour atteindre 4,62:1 — autant dire supprimer l'atténuation.
      Sur l'aplat bleu, les micro-libellés passent donc en noir plein ; la
      hiérarchie reste tenue par la taille (12 px condensé contre 88 px).
      Sur fond noir (9,4:1) et sur fond blanc (7,7:1) l'atténuation est
      conservée : elle y est confortable.

   2. Du BLEU en petit corps sur fond blanc.
      #4080C0 sur blanc mesure 3,42:1 : suffisant pour du très grand texte
      (seuil 3:1), insuffisant en dessous de 18,66 px gras. Règle retenue :
      le bleu est réservé aux grands caractères et aux fonds sombres, où il
      mesure 5,07:1. En petit corps sur fond clair, on repasse en noir.
      Aucune nouvelle couleur n'est introduite pour contourner le problème.
   ========================================================================== */

/* 1 — aplat bleu : l'atténuation des micro-libellés remonte à .88, la
   valeur retenue pour tout le projet (D-82). Le panneau professeur en bleu
   n'a plus besoin d'exception : la règle est désormais globale. */
.cours--accent .cours__index,
.cours--accent .cours__fact dt { opacity: .88; }

/* 2 — fond clair : le bleu cède la place au noir en petit corps */
.cours--paper .cours__index,
.cours--paper .cours__dur { color: var(--c-ink); }
.ladder__lvl { color: var(--c-ink); }

/* ==========================================================================
   SOMMAIRE DE LA SECTION DES COURS
   --------------------------------------------------------------------------
   Trois ancres posées sous le titre de section. Un filet, du texte, une
   flèche : ni carte, ni encadré, ni angle arrondi, ni ombre. La flèche
   pointe vers le BAS parce que le lien descend dans la page — elle dit où
   l'on va, elle ne décore pas.
   Ce composant est propre à une page qui présente plusieurs cours : la page
   Danse Afro, qui n'en a qu'un, ne l'utilisera pas.
   ========================================================================== */
.sommaire {
  display: grid;
  gap: 0;
  border-top: var(--bd-hair) solid var(--c-rule-soft);
  margin-top: var(--sp-l);
}
@media (min-width: 48em) {
  .sommaire { grid-template-columns: repeat(3, 1fr); }
}

.sommaire__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-s);
  min-height: var(--tap-min);
  padding-block: var(--sp-2xs);
  padding-inline-end: var(--sp-s);
  border-bottom: var(--bd-hair) solid var(--c-rule-soft);
  transition: color var(--t-fast) var(--ease);
}
@media (min-width: 48em) {
  .sommaire__link { border-bottom: 0; }
  .sommaire__link + .sommaire__link {
    border-inline-start: var(--bd-hair) solid var(--c-rule-soft);
    padding-inline-start: var(--sp-s);
  }
}

.sommaire__texte { display: grid; gap: 2px; }

.sommaire__name {
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.sommaire__link:hover .sommaire__name,
.sommaire__link:focus-visible .sommaire__name {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.sommaire__lvl {
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-paper-muted);
}

.sommaire__ico {
  margin-inline-start: auto;
  color: var(--c-univers);
  transition: transform var(--t-base) var(--ease);
}
.sommaire__link:hover .sommaire__ico,
.sommaire__link:focus-visible .sommaire__ico { transform: translateY(.25em); }

/* ==========================================================================
   PROFESSEURS — lien commun vers /a-propos/
   Les biographies complètes vivent là-bas : un seul endroit à tenir à jour.
   ========================================================================== */
.people__more { padding-block: var(--sp-l); }