/* ==========================================================================
   HUNGRY JAZZ — LE HERO D'UNE PAGE INTÉRIEURE
   --------------------------------------------------------------------------
   CE FICHIER EXISTE POUR ARRÊTER UNE DUPLICATION, PAS POUR L'AUGMENTER.

   Quatre pages ont un hero quasi identique — cours, planning, tarifs, à
   propos — sous quatre préfixes différents : `.phero`, `.pplan-hero`,
   `.thero`, `.ahero`. Le fil d'Ariane, lui, est écrit TROIS fois, et chacune
   des trois copies porte le même commentaire admettant la dette (D-95).

   La cinquième page ne rajoutera pas une cinquième copie. Ce bloc est la
   forme commune, sous un préfixe neutre : la FAQ s'en sert aujourd'hui, et
   les quatre autres pourront y venir le jour où on les rouvre — ce qui ne
   peut pas se faire à l'aveugle sur des pages validées par le client.

   AUCUNE VALEUR NOUVELLE. Chaque déclaration est reprise telle quelle de
   `page-tarifs.css`, le hero le plus récent et le plus proche du besoin :
   aplat sombre, damier du logo, fil d'Ariane, surtitre, titre sur plusieurs
   lignes, chapô, actions. Pas une couleur, pas une police, pas une forme qui
   n'existe déjà.

   POURQUOI L'APLAT SOMBRE EST OBLIGATOIRE ET NON DÉCORATIF
   Au-dessus du premier écran, la navigation du header est BLANCHE sur fond
   transparent ; l'état compact ne se déclenche qu'après le hero. Un titre sur
   fond clair rendrait donc le menu invisible.
   ========================================================================== */

.pagehero {
  position: relative;
  background: var(--c-ink-surface);
  color: var(--c-on-ink);
  /* Le titre doit passer SOUS le header, qui est en surimpression. */
  padding-block: calc(var(--header-h) + var(--sp-l)) var(--sp-xl);
  overflow: hidden;
  isolation: isolate;
}

/* Damier issu du logo : même texture que les autres heros du site. */
.pagehero::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
   ========================================================================== */
.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); }

/* ==========================================================================
   TITRE ET TEXTES
   ========================================================================== */
.pagehero__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);
}

.pagehero__h1 {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.25rem, 7.5vw, 7rem);
  line-height: .88;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-bottom: var(--sp-l);
}

/* Filet de couleur sous la première ligne, à la largeur du mot. La teinte
   vient de `--c-filet`, posée par la page : le bloc ne décide pas de la
   couleur d'une page qu'il ne connaît pas. */
.pagehero__h1 .line__in { display: inline-block; padding-bottom: .08em; }
.pagehero__h1 .line:first-child .line__in::after {
  content: "";
  display: block;
  height: clamp(5px, .7vw, 10px);
  margin-top: .07em;
  background: var(--c-filet, var(--c-solo-jazz));
}

.pagehero__lead {
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: 1.4;
  font-weight: var(--fw-medium);
}
.pagehero__lead--2 {
  margin-top: var(--sp-s);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--c-on-ink-muted);
}
@media (min-width: 64em) {
  .pagehero__textes {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--sp-xl);
    align-items: start;
  }
  .pagehero__lead { max-width: none; }
  .pagehero__lead--2 { margin-top: 0; }
}

.pagehero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  margin-top: var(--sp-l);
}

/* ==========================================================================
   LES BOUTONS SUR L'APLAT SOMBRE
   --------------------------------------------------------------------------
   SIGNALÉ PAR LE CLIENT le 28/09/2026 : « quand je passe ma souris sur le CTA
   Poser une question, celle-ci devient noire donc pas visible ». Exact, et
   pire que ça : au repos déjà, l'aplat du bouton était noir sur noir. Seul le
   texte blanc se voyait, sans son cadre.

   `components.css` inverse bien le bouton principal sur fond sombre, mais la
   règle est attachée à `.chapter--ink`, `.hero` et `.drawer`. Aucun des quatre
   heros de page n'en fait partie : chacun réécrit ces quatre lignes chez lui.
   J'ai porté le hero sans porter son inversion — la cinquième copie manquante
   d'une règle déjà écrite quatre fois.

   Elle est ici, une seule fois. Les quatre autres pages pourront s'y brancher
   le jour où on les rouvre, et cette classe d'oubli disparaîtra avec elles.
   ========================================================================== */
.pagehero .btn--primary {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}
.pagehero .btn--primary:hover,
.pagehero .btn--primary:focus-visible { background: transparent; color: var(--c-paper); }
.pagehero .btn--ghost:hover,
.pagehero .btn--ghost:focus-visible { background: var(--c-paper); color: var(--c-ink); }

/* ==========================================================================
   ARRIVER SUR UNE ANCRE SANS PASSER SOUS LE HEADER
   --------------------------------------------------------------------------
   Le bandeau est en surimpression : sans cette marge, une question atteinte
   par /faq/#pack-12h se cale pile derrière lui. Même valeur que sur la page
   Tarifs, qui a le même besoin pour ses sections.
   ========================================================================== */
[id] { scroll-margin-top: calc(var(--header-h-compact) + var(--sp-s)); }