/* ============================================================
   HÉROS — trois variantes : vidéo, image, plein
   LE HÉROS VIDÉO EST UNE PIÈCE GRAVÉE AU GATE 1. Il avait été MANQUÉ par le
   relevé automatisé (un navigateur piloté ne lance pas Vimeo : la sonde a vu la
   couche d'attente noire et conclu « fond uni »), signalé par Julien au gate,
   puis vérifié au navigateur : iframe Vimeo `895741927` (course Paris-MIPIM),
   fond plein cadre, ratio 16:9, autoplay muet en boucle, `background=1`,
   H1 blanc par-dessus, fond d'attente #111111.

   Le fond d'attente noir est l'état RÉEL avant chargement : il n'est pas un
   défaut à masquer, c'est la scène de départ. Une image de secours peut s'y
   poser (à instruire au build, avec l'opportunité d'auto-héberger le mp4 :
   perf, RGPD, dépendance Vimeo).

   Source : Direction artistique LCDI (de facto).md § Forces à graver ;
   da-releve-rapport.md § 4.2 (compensation du header transparent), § 5.3 ;
   complément § 6.2 (héros plein de l'espace adhérent, 217,3 px, H1 blanc centré).
   ============================================================ */

.lcdi-hero {
  position: relative;
  isolation: isolate;              /* le voile et le média vivent dans CE contexte
                                      d'empilement : sans lui, un `z-index: -1`
                                      décoratif se fait avaler par le fond de page */
  overflow: hidden;
  background: var(--surface-structure); /* LE fond d'attente relevé, jamais du noir pur */
  /* Le héros pose `data-theme="nuit"` : ses rôles de texte sont ceux du monde de
     nuit (blancs). Il ne consomme PAS `--text-inverse`, qui EN NUIT désigne
     l'encre du monde clair — c'est exactement le bug trouvé à l'auto-critique
     du 05/08 (titre #111111 sur fond #111111, invisible). */
  color: var(--text-body);
  display: grid;
  align-items: center;
  min-height: 78vh;
  /* compense la hauteur du header transparent posé par-dessus (relevé :
     padding-top 80 px desktop / 60 px mobile sur `.entry-hero-container-inner`) */
  padding: calc(142px + var(--space-8)) 0 var(--space-8);
}

/* --- L'AFFICHE : la scène de départ, toujours présente ------------------
   Trois raisons de la poser SOUS la vidéo plutôt que de compter sur l'iframe :
   1. PERF — la vidéo tierce ne bloque plus le premier rendu ;
   2. RGPD — aucun appel à Vimeo avant le consentement ; la scène tient sans lui ;
   3. ROBUSTESSE — constaté le 05/08 en montant cette planche :
      `player.vimeo.com` répond HTTP 401 avec une page de restriction réseau
      depuis le poste, quel que soit l'agent. Sans affiche, le héros affichait
      le message d'erreur de Vimeo derrière son H1.
   La note DA demandait déjà d'instruire « poster / état d'attente » au build :
   c'est fait ici, au design system, et non improvisé plus tard en page. */
.lcdi-hero__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.lcdi-hero__poster img { width: 100%; height: 100%; object-fit: cover; }

/* --- Le média de fond (vidéo Vimeo, posée PAR-DESSUS l'affiche) ---------
   Recette de production : l'iframe n'est injectée qu'après consentement (ou au
   clic), jamais au chargement. Tant qu'elle n'est pas là, l'affiche tient la
   scène et personne ne voit de trou. */
.lcdi-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: var(--hero-media-show);   /* `none` sous `prefers-reduced-motion` :
                                        la scène retombe sur l'affiche */
  pointer-events: none;
}
/* Le fond vidéo est plein cadre : il déborde par le côté le plus court plutôt
   que de laisser des bandes. C'est l'équivalent d'`object-fit: cover` pour une
   iframe, qui ne connaît pas cette propriété. */
.lcdi-hero__media iframe,
.lcdi-hero__media video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;            /* 16:9 */
  min-height: 100%;
  min-width: 177.78vh;        /* 16:9 inverse */
  transform: translate(-50%, -50%);
  border: 0;
}
.lcdi-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Le voile de scène (signature, en bornes remappables) --------------
   Plancher mesuré : alpha .55 est la valeur la plus légère qui garde le texte
   inverse à 4,5:1 dans le pire cas (pixel de photo blanc). Le voile par défaut
   est à .62 → .88, mesuré 8,65:1. */
.lcdi-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--signature-scene);
  pointer-events: none;
}

.lcdi-hero__inner {
  position: relative;
  z-index: 3;
  max-width: var(--container);
  margin-inline: auto;
  /* AMENDÉ AU BLOC 3 (06/08) : la même recette que `.lcdi-container`, pour que
     le titre du héros casse ses lignes exactement où le site les casse. Mesuré :
     la ligne de contenu du site fait 1242 px (1290 de conteneur moins 24 px de
     marge de chaque côté). Sans ce padding, l'intérieur du héros valait 1290 et
     le H1 se coupait un mot plus loin. */
  padding-inline: var(--page-edge);
  width: 100%;
  text-align: center;
}
.lcdi-hero__title {
  color: var(--text-strong);
  text-shadow: var(--shadow-text);
  margin-bottom: var(--space-4);
}
.lcdi-hero__lead {
  font-size: var(--type-lead);
  color: var(--text-body);
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  text-shadow: var(--shadow-text);
}

/* --- Variante IMAGE ---------------------------------------------------- */
.lcdi-hero--image { min-height: 62vh; }

/* --- Variante PLEIN ÉCRAN (l'accueil) ----------------------------------
   AMENDEMENT DU BLOC 3 (É4, 06/08). Le composant v1 posait 78vh, valeur de
   travail. La MESURE du live (sonde du 06/08) donne exactement 900 px dans une
   fenêtre de 900 : le héros de l'accueil fait 100vh, ni plus ni moins
   (`minHeight: 100`, `minHeightUnit: vh` dans le bloc d'origine). */
.lcdi-hero--plein-ecran { min-height: var(--hero-h, 100vh); }

/* ============================================================
   DEUX HAUTEURS DE PLUS — vague A2 (10/08), et ce sont des MESURES
   Le lot A1 avait relevé 100vh sur ses trois pages et en avait conclu « le
   héros de page interne fait la fenêtre ». La vague A2 mesure deux pages de
   plus, et la règle se révèle plus fine (live 1440 × 900, sonde du 10/08) :

   | page                | héros mesuré | soit  |
   |---------------------|--------------|-------|
   | Adhérer / Partenaires / Caritatif / article | 900 | 100vh |
   | **Contact**         | **720**      | 80vh  |
   | **Événements passés** | **639**    | 60vh + son contenu |

   Un seul levier, `--hero-h`, deux modificateurs qui le remplacent. Le défaut
   ne bouge pas : les pages déjà gatées ne posent aucun des deux et gardent
   leur 100vh à l'octet.
   EN TÉLÉPHONE, LES TROIS SE REJOIGNENT : le live rend 844/844 sur Contact et
   sur Événements passés comme sur les autres — le bloc mobile plus bas remet
   donc `--hero-h` à `100svh` pour toutes les variantes.
   ============================================================ */
.lcdi-hero--haute   { --hero-h: 80vh; }   /* Contact */
.lcdi-hero--moyenne { --hero-h: 60vh; }   /* Événements passés */

/* --- Variante PLEIN (héros de page interne, sans média) -----------------
   Relevé complément § 6.2 : bandeau 1440 × 217,3, fond #111111, H1 blanc
   centré à l'échelle du thème. Le header n'est PAS transparent sur ces pages
   (relevé : /tableau-de-bord/, /boutique/), la compensation disparaît. */
/* AMENDÉ AU BLOC 5a VAGUE B (13/08), ET C'EST UNE MESURE, PAS UN GOÛT.
   Le composant documentait « bandeau 1440 × 217,3 » et rendait 169 : à
   `--space-7` (48 px), 48 + 73 (le H1) + 48 = 169. Personne ne s'en était
   aperçu — jusqu'à cette vague, AUCUNE page ne posait `--plain`.
   Mesures du 13/08 sur le bandeau des pages légales du live : 200 px à 1440
   comme à 390. `--space-8` (72) rend 217 à 1440 et 182 à 390 : le cran de
   l'échelle le plus proche des deux mesures, et exactement la valeur que
   l'en-tête de ce fichier annonce depuis la DA. */
.lcdi-hero--plain {
  min-height: 0;
  padding: var(--space-8) var(--page-edge);
  background: var(--surface-structure);
}
.lcdi-hero--plain .lcdi-hero__title { margin-bottom: 0; text-shadow: none; }

@media (max-width: 767px) {
  .lcdi-hero {
    min-height: 70vh;
    padding: calc(119px + var(--space-7)) 0 var(--space-7);
  }
  .lcdi-hero__inner { padding-inline: var(--page-edge-mobile); }

  /* ============================================================
     `min-height: 0` REPRIS ICI — MÊME DÉFAUT QUE CELUI DU BLOC 5a A1, MÊME
     CAUSE, ET IL EST MESURÉ (13/08, 390 × 844) : le bandeau des pages légales
     rendait **591 px** (`min-height: 590.8`, soit 70vh) au lieu de 182.
     `.lcdi-hero--plain { min-height: 0 }` vit six lignes plus HAUT dans le
     fichier que le `.lcdi-hero { min-height: 70vh }` de ce bloc mobile ; les
     deux pèsent (0,1,0), et à poids égal c'est l'ordre qui tranche. La règle
     générique écrasait donc le modificateur, exactement comme elle écrasait
     `--plein-ecran` avant le correctif du 10/08.
     Le live rend 200 px à 390 : 72 + 38,5 (le H1) + 72 = 182,5.
     ============================================================ */
  .lcdi-hero--plain { min-height: 0; padding: var(--space-8) var(--page-edge-mobile); }

  /* ============================================================
     LE MODIFICATEUR REPREND LA MAIN — correctif du bloc 5a (10/08)
     DÉFAUT TROUVÉ À LA MESURE, pas à la lecture : à 390 × 844, le héros plein
     écran rendait **591 px** (70vh) au lieu des 844 attendus. Cause : la
     variante déclarait bien `100svh` en téléphone, mais SIX LIGNES PLUS HAUT
     dans le fichier que la règle générique `.lcdi-hero { min-height: 70vh }`.
     Les deux pèsent (0,1,0) ; à poids égal, c'est l'ordre qui tranche, et le
     bloc écrasait son propre modificateur.
     Le défaut datait du bloc 3 et portait AUSSI SUR L'ACCUEIL : mesuré le
     10/08, le live rend 844/844 (ratio 1,000) sur l'accueil comme sur les
     pages internes, notre accueil rendait 591/844 (ratio 0,700).
     La déclaration descend donc ici, DANS le même bloc et APRÈS la règle
     générique : la variante gagne sans qu'on ait à lui inventer un poids.
     `svh` et non `vh` : sur un téléphone réel, `100vh` compte la barre
     d'adresse qui se rétracte, et le héros dépasse d'un cran au chargement.
     ============================================================ */
  .lcdi-hero--plein-ecran { --hero-h: 100svh; min-height: var(--hero-h); }
}