/* ==========================================================================
   HUNGRY JAZZ — MISE EN PAGE : conteneurs, rythme, header, footer
   ========================================================================== */

/* ---- CONTENEURS -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Grille éditoriale 12 colonnes. L asymétrie vient du placement,
   pas d une grille exotique. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 48em) {
  .grid12 { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 64em) {
  .grid12 { grid-template-columns: repeat(var(--grid-cols), 1fr); }
}

/* ---- RYTHME DES CHAPITRES (brief 3.4 / 11) ----------------------------- */
/* Chaque section est vécue comme un nouveau chapitre : le vide fait partie
   du design. On ne remplit pas l écran en permanence. */
.chapter {
  padding-block: var(--sp-chapter);
  position: relative;
}

.chapter--tight { padding-block: calc(var(--sp-chapter) * .62); }
.chapter--ink   { background: var(--c-ink-surface); color: var(--c-on-ink); }

/* Deux chapitres clairs qui se suivent additionnaient leurs marges :
   137 px + 137 px = 274 px de vide entre la FAQ et les actualités.
   Le second reprend au ras : l'intervalle vaut alors exactement une unité
   de rythme. On ne touche pas au cas d'un chapitre sombre suivi d'un clair,
   où la marge haute est nécessaire pour décoller du bord de l'aplat. */
.chapter:not(.chapter--ink) + .chapter:not(.chapter--ink) { padding-top: 0; }

/* En-tête de chapitre : numéro + titre de section en condensé */
.chapter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-s);
  margin-bottom: var(--sp-l);
}

.chapter-head__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: .55;
}

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

/* ==========================================================================
   TITRE DE CHAPITRE VISIBLE
   --------------------------------------------------------------------------
   Sur la homepage, le H2 d'une section est le petit label condensé de
   l'en-tête. Sur les pages intérieures, plusieurs H2 sont de vrais titres de
   lecture (« Nos cours de Solo Jazz », « Une approche centrée sur le
   mouvement ») : ils méritent leur taille. L'en-tête numéroté reste, en
   surtitre, et se resserre pour ne pas doubler la respiration.

   Ces deux classes ne sont utilisées par aucune section de la homepage.
   ========================================================================== */
.chapter-head--tight { margin-bottom: var(--sp-s); }

.chapter-title {
  font-family: var(--f-display);
  font-size: clamp(1.875rem, 4.4vw, 3.75rem);
  font-weight: var(--fw-black);
  line-height: .96;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  max-width: 22ch;
  margin-bottom: var(--sp-l);
}

/* Filet éditorial */
.rule {
  height: var(--bd-hair);
  background: var(--c-rule-soft);
  border: 0;
  margin: 0;
}
.chapter--ink .rule { background: var(--c-rule-soft-inv); }

/* ==========================================================================
   HEADER — logo réellement centré (brief 4)
   ========================================================================== */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  color: var(--c-on-ink);              /* superposé au hero sombre */
  transition: background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}

/* `minmax(0, 1fr)` et non `1fr` : `1fr` vaut `minmax(auto, 1fr)`, dont le
   minimum suit le contenu — la piste la plus chargée grossirait et pousserait
   la colonne centrale hors de l'axe. Avec un minimum à 0, les deux pistes
   latérales restent strictement égales. */
.header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-s);
  height: var(--header-h);
  transition: height var(--t-base) var(--ease);
}

.nav--left  { justify-self: start; }
.nav--right { justify-self: end; }
/* Les groupes peuvent déborder dans la gouttière sans jamais déplacer le logo. */
.nav--left, .nav--right { min-width: 0; }

/* Le CTA du header n'existe qu'en desktop (en mobile il est dans la barre). */
.header__cta { display: none; }

/* ==========================================================================
   ÉQUILIBRE DU HEADER — une impossibilité, donc un choix
   --------------------------------------------------------------------------
   Trois symétries sont souhaitables :
     (a) le logo sur l'axe de la fenêtre ;
     (b) des écarts logo↔menu égaux ;
     (c) des marges extérieures égales (bord → 1er item = dernier item → bord).

   Le bouton « S'inscrire » n'existe qu'à droite. En notant S l'espace vide à
   gauche et S' celui à droite :
     (a) impose  S = bouton + S'
     (c) impose  S + gouttière = S'
   En combinant : 0 = bouton + gouttière — ce qui est impossible.
   Les trois ne peuvent donc jamais être vraies ensemble. Il faut en choisir deux.

   Un contrepoids invisible de la largeur du bouton donnait (a) et (b), mais
   laissait 215 px de vide à gauche contre 0 à droite : c'est le déséquilibre
   signalé. On retient donc (b) et (c) :

   La sortie choisie n'est aucune des deux : on supprime la cause. « À propos »
   rejoint le groupe de gauche, de sorte que ce groupe pèse à peu près autant
   que le bloc de droite (menu + bouton) :

     COURS PLANNING TARIFS À PROPOS | LOGO | ACTUALITÉS CONTACT  [S'INSCRIRE]
     |<------- 397 px ------->|              |<------- 407 px ------->|

   Les trois symétries redeviennent alors vraies simultanément, à ~10 px près.
   ========================================================================== */
@media (min-width: 64em) {
  /* Trois colonnes : les deux latérales sont strictement égales (`1fr`), donc
     la colonne du logo tombe exactement sur l'axe de la fenêtre.
     Le menu de gauche se cale au bord gauche, le bloc de droite (menu + bouton)
     au bord droit : les marges extérieures valent zéro des deux côtés.
     Les écarts logo↔menu ne sont alors égaux que si le groupe de gauche pèse
     autant que le bloc de droite — d'où le déplacement de « À propos ». */
  .header__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(1rem, 2.2vw, 2.5rem);
  }

  .nav--left  { justify-self: stretch; display: flex; justify-content: flex-start; }
  .nav--right {
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1rem, 2.2vw, 2.5rem);
  }

  .header__cta { display: block; }
}

/* Le CTA du header est posé soit sur la vidéo sombre, soit sur le bandeau noir
   compact : il est donc toujours inversé, sinon l aplat noir devient invisible. */
.header .btn--primary {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}
.header .btn--primary:hover,
.header .btn--primary:focus-visible {
  background: transparent;
  color: var(--c-paper);
}

.header__logo {
  justify-self: center;
  display: block;
  /* Correction optique : le lockup est diagonal, son centre de masse
     n est pas son centre de boîte. */
  transform: translateX(var(--logo-optical-x));
}

.header__logo img {
  height: var(--logo-h);
  width: auto;
  transition: height var(--t-base) var(--ease);
}

/* État compact après le hero — voir docs/DECISIONS.md D-03 */
.header.is-compact {
  background: var(--c-ink-surface);
  border-bottom: var(--bd-hair) solid var(--c-rule-soft-inv);
}
.header.is-compact .header__inner { height: var(--header-h-compact); }
.header.is-compact .header__logo img { height: var(--logo-h-compact); }

/* ---- Navigation desktop ------------------------------------------------ */
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
}

.nav__link {
  font-family: var(--f-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  padding-block: var(--sp-3xs);
  position: relative;
  white-space: nowrap;
}

/* Soulignement animé — neutralisé en reduced-motion */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--bd-rule);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav--desktop { display: none; }
@media (min-width: 64em) {
  .nav--desktop { display: block; }
}

/* ---- Barre mobile : burger + CTA --------------------------------------- */
.header__mobile-left,
.header__mobile-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
}
@media (min-width: 64em) {
  .header__mobile-left,
  .header__mobile-right { display: none; }
}

/* Sur petit écran le CTA prenait trop de largeur et écrasait le logo :
   on le resserre sans jamais passer sous la cible tactile de 44 px. */
@media (max-width: 63.999em) {
  .header__mobile-right .btn {
    padding-inline: var(--sp-2xs);
    font-size: var(--fs-micro);
    letter-spacing: .08em;
  }
}

.burger {
  width: var(--tap-min);
  height: var(--tap-min);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 24px;
  height: var(--bd-rule);
  background: currentColor;
  transition: transform var(--t-base) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Tiroir mobile ----------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  color: var(--c-on-ink);
  /* Le damier du logo, celui des heros : le menu s'ouvre sur la même
     matière que la page qu'il recouvre. Aucune valeur nouvelle — les deux
     teintes viennent de `hero-page.css`. Le contraste du texte n'en souffre
     pas : #0A0A0A contre #000 ne se voit qu'en grand. */
  background-color: var(--c-ink-surface);
  background-image: repeating-conic-gradient(#0A0A0A 0% 25%, #000 0% 50%);
  background-size: clamp(64px, 9vw, 128px) clamp(64px, 9vw, 128px);
  display: grid;
  /* Petit écran, ou texte agrandi par la personne : tout reste atteignable,
     et le défilement ne fuit pas vers la page dessous. */
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease-out),
              visibility 0s linear var(--t-slow);
}
.drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-slow) var(--ease-out), visibility 0s;
}

/* `display: grid` L'EMPORTE SUR L'ATTRIBUT `hidden` — le même piège que les
   formules de l'inscription et la note du tarif solidaire. Sans cette ligne,
   le tiroir rétabli en `hidden` resterait affiché. */
.drawer[hidden] { display: none; }

/* ---- La mise en page --------------------------------------------------
   Trois étages : la barre (alignée sur le header), le menu (centré dans la
   hauteur disponible), le pied. Le menu et le pied ont une largeur de
   lecture : sur une tablette, des tuiles de 380 px de large ne seraient
   plus des tuiles mais des bandeaux. */
.drawer__inner {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-block-end: max(var(--sp-m), env(safe-area-inset-bottom));
}

.drawer__nav,
.drawer__foot {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- La barre : le header, recopié -------------------------------------
   Même hauteur, même marge, même grille : la croix tombe EXACTEMENT là où
   était le burger, le logo là où il était. */
.drawer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding-inline: var(--gutter);
}

.drawer__close { justify-self: start; }

/* Les trois barres du burger, figées dans leur position « ouvert ». */
.burger--croix span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger--croix span:nth-child(2) { opacity: 0; }
.burger--croix span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer__logo {
  display: block;
  transform: translateX(var(--logo-optical-x));
}
.drawer__logo img {
  height: var(--logo-h);
  width: auto;
}

/* ---- Le menu ------------------------------------------------------------ */
.drawer__nav {
  align-self: center;
  padding-block: var(--sp-s) var(--sp-m);
}

.drawer__label {
  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-block-end: var(--sp-2xs);
}

/* ---- Les cours : quatre aplats ------------------------------------------
   La couleur de chaque tuile est celle de son univers, lue sur la page du
   cours — la règle de tout le site. Une page sans univers (les cours
   particuliers) reste papier : elle n'emprunte pas la couleur d'un autre.

   Des aplats et non des cartes : bords francs, aucun arrondi, aucune ombre,
   et un joint de 4 px entre eux, comme des affiches collées côte à côte. */
.drawer__univers {
  list-style: none;
  margin: 0 0 var(--sp-m);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Les deux rangées à la même hauteur : un bloc de quatre aplats égaux se
     lit comme UNE affiche, pas comme deux lignes qui ne s'accordent pas. */
  grid-auto-rows: 1fr;
  gap: 4px;
}

/* Les deux tuiles d'une rangée ont la même hauteur, même quand l'une passe
   sur deux lignes : c'est la cellule de grille qui s'étire, et la tuile
   doit la remplir. */
.drawer__univers > li { display: flex; }

.drawer__tuile {
  --tuile: var(--c-paper);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-2xs);
  min-height: clamp(5rem, 22vw, 6.75rem);
  padding: var(--sp-2xs) var(--sp-xs) var(--sp-xs);
  background: var(--tuile);
  /* Noir sur les couleurs de la marque : 5,1:1 sur le bleu, 5,8:1 sur
     l'orange, davantage sur le rose et le papier. */
  color: var(--c-on-color);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.drawer__tuile[data-universe] { --tuile: var(--c-accent); }

.drawer__tuile-nom {
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 4.8vw, 1.5rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  /* « Cours particuliers » passe sur deux lignes : on coupe entre les mots,
     jamais dans un mot. */
  overflow-wrap: normal;
  hyphens: none;
}

.drawer__tuile-fleche {
  align-self: flex-end;
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: transform var(--t-base) var(--ease);
}

/* Au survol, l'aplat s'inverse : fond noir, texte et filet à la couleur de
   l'univers. Le changement tient à la FORME autant qu'à la couleur. */
.drawer__tuile:hover,
.drawer__tuile:focus-visible {
  background: var(--c-ink);
  color: var(--tuile);
  box-shadow: inset 0 0 0 2px var(--tuile);
}
.drawer__tuile:hover .drawer__tuile-fleche,
.drawer__tuile:focus-visible .drawer__tuile-fleche { transform: translateX(4px); }

.drawer__tuile:focus-visible {
  outline: 3px solid var(--c-paper);
  outline-offset: 3px;
}

/* La page où l'on se trouve : un cadre noir épais DANS l'aplat. */
.drawer__tuile[aria-current] { box-shadow: inset 0 0 0 4px var(--c-ink); }

/* ---- Les pages : un index numéroté -------------------------------------
   La grammaire des chapitres du site — un numéro en condensé, un titre en
   capitales — appliquée au menu. Toutes les entrées ont la même taille :
   une seule hiérarchie, celle de l'ordre. */
.drawer__index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: var(--bd-hair) solid var(--c-rule-soft-inv);
}

.drawer__entree {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: clamp(3.25rem, 13.5vw, 4.25rem);
  border-block-end: var(--bd-hair) solid var(--c-rule-soft-inv);
}

.drawer__num {
  justify-self: start;
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--c-on-ink-muted);
  padding: 2px 4px;
}

.drawer__nom {
  font-family: var(--f-display);
  font-size: clamp(1.625rem, 7.4vw, 2.5rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  transition: transform var(--t-base) var(--ease);
}

.drawer__fleche {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--c-on-ink-muted);
  transition: transform var(--t-base) var(--ease), color var(--t-fast) var(--ease);
}

.drawer__entree:hover .drawer__nom,
.drawer__entree:focus-visible .drawer__nom { transform: translateX(6px); }
.drawer__entree:hover .drawer__fleche,
.drawer__entree:focus-visible .drawer__fleche {
  transform: translateX(4px);
  color: var(--c-on-ink);
}

.drawer__entree:focus-visible {
  outline: 3px solid var(--c-paper);
  outline-offset: -3px;
}

/* La page où l'on se trouve : le numéro passe en pastille blanche. Une
   forme, pas seulement une couleur. */
.drawer__entree[aria-current] .drawer__num {
  background: var(--c-paper);
  color: var(--c-ink);
}

/* ---- Le pied ------------------------------------------------------------ */
.drawer__foot {
  display: grid;
  gap: var(--sp-2xs);
}

.drawer__cta {
  width: 100%;
  justify-content: center;
}

.drawer__suivre {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: var(--tap-min);
  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);
  transition: color var(--t-fast) var(--ease);
}
.drawer__suivre-nom { color: var(--c-on-ink); }
.drawer__suivre:hover,
.drawer__suivre:focus-visible { color: var(--c-on-ink); }

/* ---- L'entrée en scène ---------------------------------------------------
   Le panneau descend, puis son contenu se pose, une entrée après l'autre —
   comme la suite du même mouvement, dans le même sens. Quarante
   millisecondes d'écart : assez pour qu'on lise un ordre, trop peu pour
   qu'on attende. Rien de tout cela en mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
  .drawer.is-open .drawer__anim {
    animation: drawer-entree 520ms var(--ease-out) both;
    animation-delay: calc(140ms + var(--i, 0) * 40ms);
  }
}

@keyframes drawer-entree {
  from { opacity: 0; transform: translateY(-12px); }
}

/* ---- Écrans courts (iPhone SE, téléphone à l'horizontale) -------------
   On resserre plutôt que de faire défiler : un menu qu'il faut parcourir
   pour trouver « Contact » est un menu qui cache quelque chose. Les cibles
   restent au-dessus de 44 px. */
@media (max-height: 44rem) {
  .drawer__top { height: var(--header-h-compact); }
  .drawer__nav { padding-block: var(--sp-2xs) var(--sp-s); }
  .drawer__univers { margin-block-end: var(--sp-s); }
  .drawer__tuile {
    min-height: 4.25rem;
    /* La rangée prend la hauteur de la tuile la plus haute — « Cours
       particuliers », sur deux lignes. C'est son remplissage qu'il faut
       resserrer, pas sa hauteur minimale. */
    padding: var(--sp-2xs);
    gap: var(--sp-3xs);
  }
  .drawer__entree { min-height: var(--tap-min); }
  .drawer__nom { font-size: clamp(1.375rem, 6.2vw, 2rem); }
}

body.is-locked { overflow: hidden; }

/* ==========================================================================
   FOOTER — fond papier, logo noir (utilise le second SVG fourni)
   ========================================================================== */

.footer {
  padding-block: var(--sp-xl) var(--sp-l);
  border-top: var(--bd-rule) solid var(--c-ink);
}

.footer__grid {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .footer__grid {
    grid-template-columns: auto repeat(2, minmax(0, 1fr));
    gap: var(--sp-l) var(--sp-xl);
  }
}
@media (min-width: 64em) {
  /* Quatre colonnes : logo, Cours, Infos, Suivre. */
  .footer__grid { grid-template-columns: auto repeat(3, minmax(0, 1fr)); }
}

.footer__logo img { height: clamp(5rem, 9vw, 7.5rem); width: auto; }

.footer__col-title {
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: var(--sp-s);
}

.footer__list { display: grid; gap: var(--sp-3xs); }

.footer__link {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-block;
  padding-block: var(--sp-4xs);
}
.footer__link:hover,
.footer__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: .28em;
}

.footer__bottom {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-s);
  border-top: var(--bd-hair) solid var(--c-rule-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2xs) var(--sp-l);
  justify-content: space-between;
  font-family: var(--f-cond);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-on-paper-muted);
}

/* Pages légales : obligatoires en France, et requises par le RGPD.
   Elles restent discrètes mais leurs cibles gardent une hauteur suffisante. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-s);
}
.footer__legal .footer__link { font-size: var(--fs-micro); letter-spacing: .08em; }

/* ==========================================================================
   MENU DÉROULANT « COURS »
   --------------------------------------------------------------------------
   « Cours » n'ouvre aucune page : il n'y a pas de page éditoriale /cours/.
   C'est un bouton natif (et non un lien) parce qu'il ne mène nulle part —
   `aria-expanded` + `aria-controls` suffisent alors au clavier et aux
   lecteurs d'écran, sans rôle ARIA supplémentaire.
   Déclenchement au clic, jamais au seul survol : un menu qui ne s'ouvre qu'au
   survol est inatteignable au tactile et au clavier.
   ========================================================================== */
.nav__item--drop { position: relative; }

/* Le bouton reprend très exactement l'apparence des autres entrées. */
.nav__link--drop {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}

.nav__chev {
  width: .4em;
  height: .4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  transition: transform var(--t-base) var(--ease);
}
.nav__link--drop[aria-expanded="true"] .nav__chev {
  transform: translateY(.08em) rotate(-135deg);
}

.nav__drop {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(100% + var(--sp-2xs));
  min-width: 14rem;
  background: var(--c-ink-surface);
  border: var(--bd-hair) solid var(--c-rule-soft-inv);
  padding-block: var(--sp-3xs);
  z-index: var(--z-header);
}
.nav__drop[hidden] { display: none; }

.nav__drop-link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--sp-s);
  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-on-ink);
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.nav__drop-link:hover,
.nav__drop-link:focus-visible {
  background: var(--c-paper);
  color: var(--c-ink);
}