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

   Page transversale : elle ne porte pas d'univers, mais elle CITE les deux
   disciplines. Le bleu et l'orange n'y sont donc pas décoratifs — ils
   identifient le Solo Jazz et la Danse Afro ligne par ligne, via
   `data-universe` posé sur chaque ligne de tarif. Le mécanisme est celui des
   tokens, aucun hex n'est écrit ici.

   Rythme des fonds :
     hero NOIR → à l'unité BLANC → Pack 12 h JAUNE → annuel NOIR
     → solidaire BLANC → questions BLANC → appel ORANGE
   ========================================================================== */

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

/* ==========================================================================
   HERO DE PAGE
   --------------------------------------------------------------------------
   Purement typographique. Aucune forme de couleur flottante : on ne répète
   pas l'essai écarté sur la page À propos. Les chiffres commencent juste en
   dessous — les redoubler ici en « résumé » ne ferait que dupliquer la
   donnée, avec le risque qu'une des deux copies dérive.
   ========================================================================== */
.thero {
  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 issu du logo : même texture que les autres heros du site. */
.thero::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 : ce bloc est identique à celui de `page-cours.css`. Le
   déplacer dans `layout.css` toucherait une feuille chargée par les pages
   validées — inutile de prendre ce risque pour une maquette. En Phase 2 les
   trois heros de page (cours, à propos, tarifs) deviennent un seul
   `template part` PHP et un seul bloc CSS. 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); }

.thero__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 « Tarifs & formules Hungry Jazz ».
   Le découpage en deux lignes ne sert qu'à la composition et à la révélation
   par masque. */
.thero__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. */
.thero__h1 .line__in { display: inline-block; padding-bottom: .08em; }
.thero__h1 .line:first-child .line__in::after {
  content: "";
  display: block;
  height: clamp(5px, .7vw, 10px);
  margin-top: .07em;
  background: var(--c-solo-jazz);
}

.thero__lead {
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: 1.4;
  font-weight: var(--fw-medium);
}
.thero__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) {
  .thero__textes {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--sp-xl);
    align-items: start;
  }
  .thero__lead { max-width: none; }
  .thero__lead--2 { margin-top: 0; }
}

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

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

/* ==========================================================================
   LIGNES DE TARIF
   --------------------------------------------------------------------------
   Ni cartes, ni tableau : des lignes éditoriales, nom à gauche, prix en très
   grand à droite. Le prix prend la couleur de sa discipline, héritée de
   `data-universe` posé sur la ligne — donc du système de tokens, jamais d'un
   hex écrit ici.

   Contrastes mesurés du prix, très grand caractère (seuil 3:1) :
     sur papier   bleu 4,14:1 · orange 3,64:1
     sur encre    bleu 5,07:1 · orange 5,76:1
   ========================================================================== */
.tarifs { border-top: var(--bd-rule) solid currentColor; }

.tarif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-2xs) var(--sp-s);
  padding-block: var(--sp-m);
  border-bottom: var(--bd-hair) solid var(--c-rule-soft);
}
.chapter--ink .tarif { border-bottom-color: var(--c-rule-soft-inv); }

.tarif__nom {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: var(--sp-4xs);
}

.tarif__meta {
  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-paper-muted);
}
.chapter--ink .tarif__meta { color: var(--c-on-ink-muted); }

.tarif__prix {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--c-accent, currentColor);
  justify-self: end;
}

/* Second prix d'une même ligne — le solidaire, sous le tarif plein. */
.tarif__second {
  grid-column: 2;
  justify-self: end;
  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);
  white-space: nowrap;
}
.chapter:not(.chapter--ink) .tarif__second { color: var(--c-on-paper-muted); }

/* Ligne dont le prix n'est pas un montant mais une modalité — « Sur devis ».
   Corps réduit, parce qu'un mot n'a pas à peser autant qu'un chiffre de
   72 px, mais AUCUNE atténuation : ce n'est pas une mention en attente,
   c'est l'information elle-même. Noir plein sur papier, 21:1. */
.tarif--devis .tarif__prix { font-size: var(--fs-h3); color: currentColor; }

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

/* ==========================================================================
   PACK 12 H — le moment fort de la page
   --------------------------------------------------------------------------
   La règle « 12 heures de crédit, pas 12 cours » est la source d'erreur la
   plus probable de toute la grille tarifaire. Elle est donc expliquée en
   image, avec la clé visuelle du client : demi-cercle = 1 h, cercle plein
   = 1 h 30. Les mêmes 12 heures sont montrées deux fois — douze cours d'1 h
   OU huit cours d'1 h 30 — parce que 12 × 1 h et 8 × 1 h 30 font l'un et
   l'autre douze heures. C'est de l'arithmétique, pas une promesse.

   Glyphes en NOIR et non aux couleurs des univers : sur ce jaune, l'orange
   ne mesure que 2,98:1, sous le seuil des éléments graphiques porteurs de
   sens. En noir, 17,19:1 — et la clé du client repose de toute façon sur la
   FORME, pas sur la couleur.
   ========================================================================== */
.pack12 {
  background: var(--p-yellow);
  color: var(--c-ink);
  padding-block: var(--sp-xl);
}

.pack12__tete {
  display: grid;
  gap: var(--sp-s);
  align-items: baseline;
  border-bottom: var(--bd-rule) solid currentColor;
  padding-bottom: var(--sp-s);
  margin-bottom: var(--sp-l);
}
@media (min-width: 48em) {
  .pack12__tete { grid-template-columns: minmax(0, 1fr) auto; }
}

.pack12__prix {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -.02em;
  justify-self: end;
}

/* LES CONDITIONS, CONTRE LE PRIX. Frais de dossier et validité changent ce
   que l'on paie et ce que l'on obtient : elles se lisent juste sous le
   montant, avant la règle des heures — pas en note de bas de section. Un
   filet épais plutôt qu'un fond : elles se distinguent sans ressembler à une
   alerte. */
.pack12__conditions {
  max-width: 62ch;
  margin-top: calc(var(--sp-l) * -1 + var(--sp-s));
  margin-bottom: var(--sp-l);
  padding-left: var(--sp-xs);
  border-left: 4px solid currentColor;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.pack12__regle {
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 2.8vw, 2.25rem);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  max-width: 24ch;
  margin-bottom: var(--sp-l);
}

.pack12__grille { display: grid; gap: var(--sp-l); }
@media (min-width: 64em) {
  .pack12__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-xl); }
}

.pack12__lecture-titre {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--sp-2xs);
}

.pack12__glyphes {
  display: flex;
  flex-wrap: wrap;
  /* 8 px et non 4 : a 4 px les douze demi-cercles se lisaient comme une
     bande continue au lieu de douze unites comptables. */
  gap: var(--sp-3xs);
  margin-bottom: var(--sp-2xs);
}
.pack12__glyphes svg {
  width: clamp(20px, 2.2vw, 30px);
  height: clamp(20px, 2.2vw, 30px);
  flex: none;
}

.pack12__total {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-top: var(--bd-hair) solid currentColor;
  padding-top: var(--sp-3xs);
}

.pack12__note { margin-top: var(--sp-l); max-width: 56ch; }

/* Sur cet aplat clair, le bouton principal reprend l'encre. */
.pack12 .btn--primary {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
}
.pack12 .btn--primary:hover,
.pack12 .btn--primary:focus-visible { background: transparent; color: var(--c-ink); }

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

/* ==========================================================================
   TARIF SOLIDAIRE
   ========================================================================== */
.solidaire { display: grid; gap: var(--sp-l); }
@media (min-width: 64em) {
  .solidaire { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-xl); align-items: start; }
}

.solidaire__prix {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: var(--fw-black);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  border-top: var(--bd-block) solid var(--c-solo-jazz);
  padding-top: var(--sp-s);
}

.solidaire__corps { max-width: 56ch; }
.solidaire__corps p + p { margin-top: var(--sp-s); }

.solidaire__liste {
  list-style: none;
  margin: var(--sp-s) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4xs);
}
.solidaire__liste li {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-bottom: var(--bd-hair) solid var(--c-rule-soft);
  padding-block: var(--sp-3xs);
}

/* ==========================================================================
   MOUVEMENT RÉDUIT — rien de spécifique ici, tout passe par les composants
   partagés. Ce commentaire évite qu'on croie à un oubli.
   ========================================================================== */