/* ══════════════════════════════════════════════════════════════════════
   L'ARDOISE — le décor commun à tout le site
   ──────────────────────────────────────────────────────────────────────
   Une seule pierre, deux doses.

   PLEINE — pages de seuil (accueil, filières, examens, tarifs, à-propos,
   connexion, inscription, 404). L'élève arrive : la matière l'accueille.

   EN BANDE — pages de travail (leçon, quiz, exercice, fiche, parcours,
   profil…). La pierre signe l'en-tête, puis se retire. Personne ne lit
   vingt minutes de cours sur une texture.

   Ce fichier est lié en fin de <head>, donc APRÈS les <style> inline des
   pages : à spécificité égale, c'est lui qui l'emporte. C'est ce qui
   permet de reprendre les décors existants sans réécrire 26 pages.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Pages de seuil : la bande d'en-tête porte la pierre ─────────── */
.page-hero,
.exam-hero {
  position: relative;
  background: var(--ardoise, #091a09) url('/assets/hero/hero-fond.webp') center / cover no-repeat !important;
  isolation: isolate;
}

/* Voile de lisibilité — un APLAT, pas un dégradé (cf. DESIGN.md).
   0,52 n'est pas un réglage d'œil : c'est la valeur mesurée qui tient
   le 4,5:1 sur le corps de texte au 98ᵉ centile de luminance. */
.page-hero::after,
.exam-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(9, 26, 9, 0.52);
  z-index: 0;
  pointer-events: none;
}

.page-hero > *,
.exam-hero > * { position: relative; z-index: 1; }

/* Le halo doré en radial-gradient des six heros : supprimé.
   DESIGN.md l'interdit, et sur une vraie pierre il n'a plus rien à
   simuler — la lumière est dans la photo. */
.page-hero::before,
.exam-hero::before { display: none !important; }

/* ── 2. Pages de travail : la pierre en bande, le corps en aplat ────── */
header.pageTop,
.topSticky {
  background: var(--ardoise, #091a09) url('/assets/hero/hero-fond.webp') center 30% / cover no-repeat !important;
  position: relative;
  isolation: isolate;
}

header.pageTop::after,
.topSticky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(9, 26, 9, 0.62);
  z-index: 0;
  pointer-events: none;
}

header.pageTop > *,
.topSticky > * { position: relative; z-index: 1; }

/* ── 3. Sur téléphone, le cadrage portrait ──────────────────────────── */
@media (max-width: 767px) {
  .page-hero,
  .exam-hero,
  header.pageTop,
  .topSticky { background-image: url('/assets/hero/hero-fond-m.webp') !important; }
}

/* ── 4. Économie de données : la couleur seule suffit ───────────────── */
@media (prefers-reduced-data: reduce) {
  .page-hero, .exam-hero, header.pageTop, .topSticky { background-image: none !important; }
}
