/* =============================================================================
   hero-page.css — bandeau de titre des pages interieures
   =============================================================================
   Repris de la maquette figee (style.css l. 1607-1616 et 1824). Les commentaires d'origine sont
   conserves : ils portent des motifs de conception qu'aucune autre source ne
   documente.

   ⚠️ TOUT le CSS de ce type de bloc vit ici — y compris ses @media. Rien dans
   le CSS d'une page : un bloc duplique vers une page vierge doit rester correct.
   ============================================================================= */

/* ⚠️ PIEGE DE SPECIFICITE, NE PAS RETIRER LE `[id]`.
   `common.css` pose `section[id]{ padding:clamp(70px,9vw,130px) 0 }` pour donner le
   meme rythme vertical a toutes les sections. Dans la MAQUETTE, le hero echappait a
   cette regle : il etait le seul `<section>` SANS id. Notre convention de decoupe, elle,
   en donne un a TOUS les blocs (`id="section-<id>"`) — donc `section[id]` (0,1,1) prend
   le pas sur `.vf-hero` (0,1,0) et ecrase le padding haut calcule pour degager l'en-tete
   fixe, qui passerait alors par-dessus le titre.
   `[id]` remonte la specificite a (0,2,0) et rend au hero son propre calage.

   ⚠️⚠️ ET LE PIEGE QUE CE COMMENTAIRE ANNONCAIT A MORDU — pas sur un bloc, sur une
   PAGE. Mesure du 2026-10-06, apres signalement d'Alexandre. Toute la regle etait
   portee par `.vf-hero[id]`, alors que `section[id]` ne pose QUE du `padding`
   (`common.css:117`). La fiche d'un accompagnateur est un hero de PAGE : elle n'a
   aucun `id` a porter — notre convention `id="section-<id>"` est celle des BLOCS.
   Son `<section class="gp-hero vf-hero">` ne matchait donc PAS, et perdait d'un coup
   `position:relative`, `display:flex`, `overflow:hidden`, `min-height` et le padding.
   **Deux defauts visibles pour une seule cause**, et aucun des cinq gestes ne les a
   vus : (a) sans ancetre positionne, le `.gp-hero__veil{position:absolute;inset:0}`
   se calait sur le bloc conteneur initial — un **voile gris sur TOUTE la page** ;
   (b) sans `display:flex; justify-content:center`, le `.container` du bouton de retour
   redevenait un bloc pleine largeur et le bouton se collait a gauche au lieu d'etre
   **centre**.
   ⇒ **La geometrie est donc sur `.vf-hero` NU** (elle doit s'appliquer avec ou sans
   `id`), et `[id]` ne garde QUE le padding — la seule propriete que `section[id]`
   dispute. Separer les deux est ce qui rend la regle vraie dans les deux cas.
   ⚠️ Ne pas « reparer » un futur hero sans id en lui inventant un `id` pour satisfaire
   le selecteur : ce serait traiter le symptome, et un `id` de bloc sur une page n'a
   aucun sens. */
/* --- hero photo + titre CENTRÉ --- */
.vf-hero{ position:relative; min-height:62vh; overflow:hidden; display:flex; align-items:center;
  justify-content:center; text-align:center; color:var(--blanc); background:#241d12;
  padding:calc(var(--nav-h) + 40px) 0 120px; }
/* Le padding SEUL remonte en (0,2,0) : c'est la seule propriete que `section[id]` dispute. */
.vf-hero[id]{ padding:calc(var(--nav-h) + 40px) 0 120px; }
.vf-hero__bg{ position:absolute; inset:-30% 0 0 0; background:#241d12 center/cover no-repeat;
  will-change:transform; }   /* déborde en haut : la parallaxe (translateY) ne découvre jamais de bord */
.vf-hero__veil{ position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(14,14,14,.45) 0%, rgba(14,14,14,.25) 45%, rgba(14,14,14,.72) 100%); }
.vf-hero__inner{ position:relative; z-index:1; }
.vf-hero__eyebrow{ color:var(--jaune); }
.vf-hero__title{ font-size:var(--fs-title); line-height:1.02; margin-top:14px; color:var(--blanc); }

/* Variante PAGE INTERIEURE : plus courte que le hero d'une fiche. */
.vf-hero--page{ min-height:52vh; padding-bottom:40px; }   /* hero de page intérieure, plus court */
/* Meme separation que ci-dessus : seul le padding a besoin de la specificite. Sans cette
   ligne, un hero de page PORTANT un id perdrait son padding-bottom au profit de
   `section[id]` — le piege reste arme sur les deux regles, pas sur une seule. */
.vf-hero--page[id]{ padding-bottom:40px; }

/* --- Responsive : heros de page « titre seul », <=1024px (mobile.css l. 1623-1657) ---
   ⚠️ Ce titre se refermait ICI jusqu'au 2026-10-07 : le paragraphe suivant, hors commentaire,
   emportait la `@media` qui divise par deux la hauteur des bandeaux de page sur téléphone.
   14. HEROS DE PAGE "TITRE SEUL" - hauteur divisée par deux (<=1024px)
   Demande Fix (22/07) : .vf-hero--page ne porte qu'un eyebrow + un H1 (+ la
   pilule "prochains départs" sur offres.html) - le calage en 52vh (≈347px à
   667 de haut) est donc presque entièrement du vide. Les heros à contenu réel
   (voyage/pays/animal/accompagnateur/récit) n'ont PAS cette classe, ils ne
   sont donc jamais concernés.
   On abandonne le vh au profit d'un calage sur le CONTENU réel : header fixe
   + petit surplus, puis le bloc titre, puis petit surplus bas - ce qui donne
   ~une division par deux SANS jamais écraser un titre sur 2-3 lignes (la
   hauteur suit le texte au lieu de forcer une valeur fixe).
   ========================================================================== */
@media (max-width:1024px){
  .vf-hero--page{
    min-height:0;
    padding:calc(var(--nav-h) + 20px) 0 28px;
  }
  /* hero offres : la pilule "prochains départs" est poussée en bas par
     margin-top:auto DANS un inner à min-height:calc(52vh - 80px) (style.css) -
     sans ce min-height forcé, la même règle rendrait le hero à nouveau grand.
     On repasse en flux normal (petit écart fixe sous le titre). */
  .vf-hero--page .vf-hero__inner:has(.of-toggle){ min-height:0; }
  .vf-hero--page .of-toggle{ margin-top:24px; }
}

/* Retour Fix (LOT 10, 23/07) : même défaut que le hero d'accueil (§13 ci-dessus) sur TOUS
   les héros de page qui partagent .vf-hero__inner (accompagnateurs/actions-nature/charte/
   equipe/offres/presentation/recits/sur-mesure/voyage) - texte collé à --gutter (16px).
   Un seul point de correction pour 9 gabarits (composant partagé). Contenu déjà centré/
   auto-largeur dans tous ces héros (vérifié) : resserrer le conteneur ne casse rien. */
@media (max-width:640px){
  .vf-hero__inner{ padding-inline:24px; }
}