/* ==========================================================================
   HUNGRY JAZZ — PAGES SANS DESSIN VALIDÉ  (feuille PROVISOIRE)
   --------------------------------------------------------------------------
   Chargée uniquement par page.php et 404.php. Aucune page validée ne peut
   l'atteindre.

   CE QU'ELLE EST : le minimum lisible pour les pages dont la maquette n'existe
   pas encore — les trois pages légales, et la 404. Rien de plus.

   CE QU'ELLE N'EST PAS : une proposition graphique. Aucune couleur nouvelle,
   aucune police nouvelle, aucune forme nouvelle : uniquement des jetons
   existants de tokens.css. Quand ces pages seront dessinées, cette feuille
   disparaîtra au profit de gabarits dédiés.

   POURQUOI UN BANDEAU SOMBRE EN HAUT
   Au-dessus du premier écran, la navigation du header est blanche sur fond
   transparent ; l'état compact (bandeau noir) ne se déclenche qu'après un
   hero. Un titre sur fond clair rendrait donc le menu invisible. Même
   contrainte, même réponse que dans page-planning.css.
   ========================================================================== */

.pgen-hero {
  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-m)) var(--sp-l);
}

.pgen-hero__h1 {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: .95;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
  max-width: 22ch;
}

/* ==========================================================================
   CONTENU D'ÉDITEUR
   --------------------------------------------------------------------------
   Ces pages sont rédigées dans l'éditeur WordPress : on ne maîtrise pas le
   balisage produit. Les règles portent donc sur les ÉLÉMENTS, pas sur des
   classes — c'est le seul moyen de styler un contenu qu'on n'a pas écrit.

   Largeur limitée à 70 caractères : au-delà, l'œil perd sa ligne en revenant
   à la marge gauche. C'est la seule mesure qui compte pour un texte long.
   ========================================================================== */
.pgen-contenu {
  max-width: 70ch;
  font-size: var(--fs-body);
  line-height: 1.6;
}

.pgen-contenu > * + * { margin-top: var(--sp-s); }

.pgen-contenu h2 {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-top: var(--sp-l);
}

.pgen-contenu h3 {
  font-family: var(--f-cond);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-top: var(--sp-m);
}

.pgen-contenu a {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.pgen-contenu ul,
.pgen-contenu ol { padding-left: var(--sp-s); }
.pgen-contenu li + li { margin-top: var(--sp-4xs); }

.pgen-contenu table {
  width: 100%;
  border-collapse: collapse;
}
.pgen-contenu th,
.pgen-contenu td {
  text-align: left;
  padding: var(--sp-3xs) 0;
  border-bottom: var(--bd-hair) solid var(--c-rule-soft);
}

/* ==========================================================================
   404
   --------------------------------------------------------------------------
   Une page d'erreur qui ne propose rien est un cul-de-sac. Celle-ci renvoie
   vers les destinations réelles du site.
   ========================================================================== */
.pgen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  margin-top: var(--sp-m);
}