/* ==========================================================================
   HUNGRY JAZZ — PAGE PLANNING
   --------------------------------------------------------------------------
   Feuille chargée UNIQUEMENT par /planning/. Les pages validées ne peuvent
   pas être atteintes par ce fichier.

   PRINCIPE DE LA PAGE
   Le visiteur vient ici pour savoir quand et où : le hero reste court, et le
   planning arrive haut dans la page.

   SÉPARATION DU HERO ET DU PLANNING
   Par le FOND, comme partout ailleurs sur le site — pas par un motif ajouté.
   Le hero est sombre, le titre de section est posé sur du papier, le planning
   revient sur l'encre :

       hero ENCRE → titre PAPIER → planning ENCRE → lieux PAPIER → appel ORANGE

   C'est exactement le rythme de la homepage, où la section planning est un
   aplat encre pris entre deux sections claires. Deux essais l'ont confirmé
   par l'absurde : un filet de 4 px ne séparait pas deux noirs, il les
   soulignait ; une bande de damier ajoutait un motif décoratif étranger au
   reste du site.

   Le composant de planning est celui de l'accueil, à l'identique — mêmes
   accroches `[data-schedule]`, même `schedule.js`, mêmes données `HJ_DATA`.
   Aucun horaire n'est réécrit ici (brief §12).
   ========================================================================== */

[id] { scroll-margin-top: calc(var(--header-h-compact) + var(--sp-s)); }

/* ==========================================================================
   HERO DE PAGE
   --------------------------------------------------------------------------
   Sombre, comme les heros des autres pages intérieures, et pour une raison
   qui n'est pas esthétique : au-dessus du premier écran le header est
   transparent et sa navigation est BLANCHE. Un hero clair la rendrait
   illisible tant que l'état compact n'est pas déclenché.

   C'est la section suivante, sur papier, qui crée la séparation.
   ========================================================================== */
.pplan-hero {
  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 du logo, à la limite du perceptible — la même texture que les
   autres heros du site. */
.pplan-hero::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);
}

/* ---- Fil d'Ariane ------------------------------------------------------
   DETTE ASSUMÉE, identique à celle notée dans page-tarifs.css : ce bloc est
   le même que dans page-cours.css. Le mutualiser dans layout.css toucherait
   une feuille chargée par les pages validées. En Phase 2, les heros de page
   deviennent un seul `template part` PHP. Voir docs/DECISIONS.md D-95. */
.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 à 27 px (WCAG 2.2 · 2.5.8) */
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--c-on-ink); }
.breadcrumb [aria-current="page"] { color: var(--c-on-ink); }

.pplan-hero__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-on-ink-muted);
  margin-bottom: var(--sp-s);
}

/* Le contenu textuel du H1 vaut exactement
   « Planning des cours Hungry Jazz à Paris » (CLAUDE.md §7). Le découpage en
   deux lignes ne sert qu'à la composition et à la révélation par masque. */
.pplan-hero__h1 {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 6.5vw, 6rem);
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-bottom: var(--sp-m);
}

.pplan-hero__h1 .line__in { display: inline-block; padding-bottom: .08em; }
/* Filet de couleur sous la première ligne, à la largeur du mot. */
.pplan-hero__h1 .line:first-child .line__in::after {
  content: "";
  display: block;
  height: clamp(5px, .7vw, 10px);
  margin-top: .07em;
  background: var(--c-solo-jazz);
}

.pplan-hero__lead {
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: 1.4;
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-l);
}

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

/* Fond sombre : le bouton principal s'inverse, comme partout ailleurs. */
.pplan-hero .btn--primary {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}
.pplan-hero .btn--primary:hover,
.pplan-hero .btn--primary:focus-visible { background: transparent; color: var(--c-paper); }
.pplan-hero .btn--ghost:hover,
.pplan-hero .btn--ghost:focus-visible { background: var(--c-paper); color: var(--c-ink); }

/* ==========================================================================
   LE PLANNING — deux surfaces
   --------------------------------------------------------------------------
   Le titre de section sur le papier, le planning sur l'encre. Le passage du
   sombre au clair puis au sombre est ce qui détache ce bloc du hero.

   `chapter--ink` est portée par le PANNEAU et non par la section : elle
   fournit la surface sombre attendue par tout le composant, et l'inversion
   des boutons des créneaux dépliés (`.chapter--ink .btn--primary`, dans
   components.css). Sans elle ces boutons seraient noirs sur noir.
   ========================================================================== */
.pplan {
  background: var(--c-paper);
  color: var(--c-ink);
}

.pplan__intro { padding-block: var(--sp-chapter) var(--sp-l); }
.pplan__intro .chapter-title { margin-bottom: 0; }

.pplan__panneau { padding-block: var(--sp-xl); }

/* ==========================================================================
   LES LIEUX
   --------------------------------------------------------------------------
   Rendus depuis HJ_DATA par assets/js/lieux.js, y compris la liste des cours
   de chaque salle, déduite des séances. Rien n'est écrit dans le gabarit.
   ========================================================================== */
.lieux {
  display: grid;
  gap: var(--sp-l);
  border-top: var(--bd-rule) solid var(--c-ink);
  padding-top: var(--sp-l);
}
@media (min-width: 64em) {
  .lieux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-xl); }
}

.lieu__nom {
  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;
  margin-bottom: var(--sp-s);
}

.lieu__faits { display: grid; margin: 0 0 var(--sp-s); }

.lieu__fait {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--sp-s);
  padding-block: var(--sp-3xs);
  border-bottom: var(--bd-hair) solid var(--c-rule-soft);
}
.lieu__fait dt {
  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);
}
.lieu__fait dd {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}

.lieu__lien { margin-top: var(--sp-s); }