/* ==========================================================================
   FICHE D'UN ACCOMPAGNATEUR — `/{lang}/accompagnateurs/{slug}`.

   CSS de PAGE et non de bloc : cette page n'est pas faite de blocs, elle est rendue
   par `AccompagnateurFront` comme `recit_detail` l'est par `RecitFront`.

   ⚠️⚠️ TROIS GROUPES DE RÈGLES DE LA MAQUETTE NE SONT PAS ICI, et chacun pour un
   motif différent — les reprendre ferait du dégât ou du mort :

   1. `.gp-voyages*` (`style.css:2924-2934`) — la grille des voyages rattachés.
      La SECTION n'est pas rendue : sa carte `.trip` dépend de `depart` et du typage
      (cf. `AccompagnateurFront`). Porter sa grille serait du CSS que rien n'habite.

   2. Le CARROUSEL (`.gp-gal__stage`, `.gp-gal__card`, `.gp-gal__nav`) et la visionneuse —
      ✅ portés le 2026-10-07 dans `css/blocs/galerie.css`, composant PARTAGÉ par trois
      fiches. Seule la peau de la section (`.gp-galerie`) reste ici. La grille statique
      provisoire qui les remplaçait depuis le 2026-10-06 est retirée.

   3. La part `p.vf-esprit__cta` de la règle mobile (`mobile.css:1341`), qui appartient
      à la page Sur-mesure. Règle MIXTE — septième du projet.

   Source : `style.css:2871-2923` et `2935-2937` (bornes CALCULÉES), plus deux règles
   de `mobile.css`.
   ========================================================================== */
/* ============================ FICHE ACCOMPAGNATEUR (accompagnateur.html) ============================ */
/* HERO : photo du guide en FOND pleine largeur + voile sombre, nom en serif par-dessus. */
/* HERO : réutilise la mécanique .vf-hero (parallaxe + recouvrement par .site-content) + hauteur
   .vf-hero--page (52vh, comme les autres pages intérieures). --gp-pic = taille du portrait (x1,5). */
.gp-hero{ min-height:52vh; padding-bottom:64px; align-items:flex-start; }
.gp-hero__veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(14,14,14,.9) 0%, rgba(14,14,14,.45) 50%, rgba(14,14,14,.25) 100%); }
.gp-hero__topbar{ position:relative; z-index:2; padding-top:calc(var(--header-h) + 8px); }
.gp-hero__back{ color:var(--blanc); border-color:rgba(255,255,255,.7); }   /* filet blanc (texte blanc sur le hero) */
/* RENFORT sombre en BAS du hero (demande Fix) : garantit le contraste du nom blanc meme si la photo
   est claire a cet endroit. Meme couche que le voile, sous le contenu, clippe par overflow:hidden. */
.gp-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1;
  pointer-events:none;
  background:linear-gradient(to top, rgba(14,14,14,.88) 0%, rgba(14,14,14,0) 100%); }

/* IDENTITE (portrait + nom) en tete de .site-content, donc AU-DESSUS du hero.
   ROBUSTE A TOUTE TAILLE D'ECRAN :
   - .gp-id__inner (inline-flex, largeur intrinseque) se centre horizontalement ;
   - le PORTRAIT est en position ABSOLUE, ancre a gauche du texte et centre sur le bord HAUT de .gp-id
     (= la limite hero/beige) via translateY(-50%) -> a cheval moitie/moitie PAR CONSTRUCTION, quelle
     que soit --gp-pic. Il ne compte pas dans la hauteur du flux -> ne pousse jamais le nom ;
   - le NOM (dans le flux) est remonte dans le sombre du hero par une valeur FIXE liee a SA police,
     jamais a --gp-pic -> toujours entierement lisible. */
/* .gp-id = point d'ancrage : hauteur nulle posee PILE sur la limite hero/beige (bord haut de
   .site-content). Le .gp-id__inner (portrait + texte) est ancre en absolu sur ce point, ce qui rend
   la compo INDEPENDANTE de la taille du hero et de --gp-pic. */
/* ⚠️ --gp-pic est déclarée UNE fois, sur :root — elle était recopiée sur .gp-id et .gp-bio, et le
   correctif du 2026-11-09 en avait besoin une troisième fois, sur .gp-hero (qui n'est l'ancêtre ni
   de l'une ni de l'autre). Trois copies d'une même taille divergent au premier réglage. :root est
   sans risque ici : ce fichier n'est chargé que par la fiche accompagnateur. */
:root{ --gp-pic:clamp(165px,16vw,246px); }   /* portrait agrandi x1,5 */
.gp-id{ position:relative; z-index:1; height:0; }
/* le bloc portrait+texte est ancre par sa BASE sur la limite (bottom:0) et centre horizontalement
   -> le texte est donc ENTIEREMENT au-dessus de la limite (dans le sombre du hero = nom BLANC lisible),
   quelle que soit la taille d'ecran. */
.gp-id__inner{ position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  display:flex; align-items:center; gap:clamp(20px,2.4vw,36px); white-space:nowrap;
  padding-bottom:6px; }
/* le portrait deborde sous la limite de sa moitie basse -> a cheval, sans pousser le texte. */
.gp-id__portrait{ flex:0 0 auto; width:var(--gp-pic); height:var(--gp-pic);
  border-radius:50%; background:var(--noir-50) center/cover no-repeat;
  border:4px solid var(--creme); box-shadow:0 18px 44px -14px rgba(0,0,0,.6);
  margin-bottom:calc(var(--gp-pic) / -2); }
.gp-id__txt{ display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  white-space:normal; }
.gp-id__eyebrow{ color:var(--jaune); }
.gp-id__nom{ font-size:clamp(34px,4.8vw,66px); line-height:1.02; color:var(--blanc); margin-top:4px;
  text-shadow:0 2px 20px rgba(0,0,0,.6); }
/* BIO : colonne lisible centrée. */
/* .site-content prefix : bat la regle globale section[id]{padding:clamp(70..130px)} qui gonflait l'espace.
   padding-top >= moitie du portrait (--gp-pic) qui deborde sous la limite + de l'air -> la bio ne passe
   JAMAIS sous le portrait, quelle que soit la taille d'ecran. */
.site-content .gp-bio{
  padding:calc(var(--gp-pic) / 2 + clamp(24px,3vw,44px)) 0 clamp(12px,1.6vw,22px); }
.gp-bio__inner{ max-width:1000px; margin-inline:auto; }
.gp-bio__txt p{ font-size:var(--fs-body); line-height:1.75; color:var(--noir); margin-bottom:18px; }
.gp-bio__site{ margin-top:26px; }

/* GALERIE — la PEAU de la section. Le carrousel lui-même est dans `blocs/galerie.css`. */
.gp-galerie{ padding:clamp(30px,4vw,54px) 0 clamp(60px,7vw,96px); background:var(--creme-2); }

/* ==========================================================================
   MOBILE — repris de `mobile.css`, deux règles de la même `@media (max-width:1024px)`.

   ⚠️ L'ORDRE COMPTE ET LA SECONDE GAGNE : la maquette centre `.gp-hero__topbar`
   (l. 1343) puis le MASQUE (l. 1817). Le centrage y est donc sans effet — on le garde
   pour `.gp-bio__site`, qui en a besoin, et on porte le masquage tel quel.
   ⚠️ Son motif est écrit dans la maquette : `.gp-hero__topbar` est le SEUL contenu du
   hero, le masquer ne change rien d'autre — `.gp-hero` garde son `min-height:52vh` et
   l'identité vit dans `.site-content`, en dessous.
   ========================================================================== */
@media (max-width:1024px){
  .gp-bio__site{ text-align:center; }
  .gp-hero__topbar{ display:none; }
}

/* ==========================================================================
   ÉCRAN LARGE — LE BOUTON « RETOUR » NE PEUT PLUS CHEVAUCHER LE NOM
   (sprint 2026-11-09 n° 1, signalé par la cliente sur la fiche de Vincent Beccaro).

   Mesuré avant correctif : chevauchement de 37 à 101 px dès que l'écran fait moins
   d'environ 900 px de HAUT (1440×700, 1366×768, 1280×720…). Le défaut est dans la
   maquette, repris tel quel. TROIS causes, toutes nécessaires à le corriger :

   1. DOUBLE DÉCALAGE EN HAUT. `.vf-hero` dégage déjà l'en-tête fixe
      (`padding-top: --nav-h + 40px`), et `.gp-hero__topbar` le dégageait une seconde
      fois (`--header-h + 8px`) : le bouton tombait ~270 px sous le haut de page.
      `--header-h` est de plus réécrite par le JS au défilement — le bouton bougeait.
   2. RIEN NE RÉSERVE LA PLACE DU NOM. L'identité vit dans `.site-content`, en position
      absolue, et monte DEPUIS le bas du bandeau : le bandeau ne la voit pas et ne
      grandit pas pour elle. Le `padding-bottom:64px` d'origine ne couvrait pas les
      ~90 à 125 px qu'elle occupe au-dessus de la limite.
      ⇒ le bas du bandeau réserve désormais la plus haute des deux : la moitié haute
        du portrait, ou le texte (surtitre ~26 px + nom sur UNE ligne), plus l'air
        du `padding-bottom` de `.gp-id__inner` (6 px) et 40 px d'écart.
   3. LE NOM PASSAIT À LA LIGNE SANS RAISON. `left:50%` + `translateX(-50%)` donne à
      un bloc absolu une largeur disponible de la MOITIÉ du conteneur : « Clément
      POUMEYROL » tenait sur deux lignes et montait de 165 px. Le bloc couvre
      désormais toute la largeur du conteneur et centre son contenu — même rendu
      centré, sans coupure. Sans ce point, la réserve du point 2 serait une
      estimation fausse pour tout nom long.
   ⚠️ Limité à l'écran large, et c'est voulu : sous 1024 px le bouton est masqué
      (règle ci-dessus), le défaut n'existe pas, et le téléphone garde la composition
      de la maquette telle qu'elle a été vérifiée le 2026-10-06 (encadré suivant).
   ⚠️ Si le surtitre ou le nom changent de TAILLE de police, la réserve du point 2
      est à refaire : elle reprend leurs valeurs, elle ne les lit pas.
   ========================================================================== */
@media (min-width:1025px){
  .gp-hero__topbar{ padding-top:0; }
  .gp-hero{ padding-bottom:calc(max(var(--gp-pic) / 2, 26px + 1.02 * clamp(34px,4.8vw,66px)) + 6px + 40px); }
  .gp-id__inner{ left:0; right:0; transform:none; justify-content:center; }
}

/* ==========================================================================
   TÉLÉPHONE — RIEN À AJOUTER ICI, ET C'EST UNE MESURE, PAS UNE OMISSION.

   ⚠️⚠️ UNE RÈGLE A ÉTÉ ÉCRITE PUIS RETIRÉE LE 2026-10-06, et le motif mérite
   d'être lu avant d'en réécrire une : **le défaut qu'elle corrigeait n'existait
   pas.** Il venait de l'outil de contrôle, pas de la page.

   `--headless --window-size=390,844 --screenshot` produit bien une image de
   390 px de large, mais Chrome met la page en page **plus large** puis RECADRE la
   capture. Le texte paraît donc coupé à droite — « attirée » manquait au milieu
   d'une phrase — et la composition paraît déborder. Mesuré à un VRAI viewport de
   360 et 390 px (iframe de même origine, `getBoundingClientRect` sur tous les
   éléments) : **gauche = 0, droite = largeur du viewport, dans les quatre cas,
   avant comme après**. Rien ne dépassait.
   ⚠️ Et la même capture avait servi à conclure que « la maquette déborde pareil » :
   elle était recadrée de la même façon. Deux conclusions fausses d'affilée, du
   même artefact.

   ⇒ **Pour juger une largeur, mesurer la géométrie** — pas regarder une capture
   prise à cette largeur. Une capture étroite sert à voir des COULEURS et un
   ORDRE d'éléments, jamais à décider qu'il y a débordement.
   ⇒ Et `scrollWidth` seul ne suffit pas : il ignore le débordement vers la
   GAUCHE. Comparer les extrêmes `left`/`right` de tous les éléments.

   La composition de la maquette tient donc telle quelle sous 400 px : le portrait
   garde son plancher de 165 px, le nom le sien de 34 px, et le texte passe à la
   ligne. Serré, mais juste — et c'est son intention.
   ========================================================================== */

/* ==========================================================================
   SES VOYAGES — section « Partez en safari avec … » (finitions du front, 2026-10-08)
   Reprise VERBATIM de style.css:2924-2934. Les cartes elles-mêmes (.trip) sont dans
   components.css : ici, seulement leur grille propre à cette page.
   ========================================================================== */
/* VOYAGES rattachés : même grille 3 colonnes que les prochains départs. */
.site-content .gp-voyages{ padding:clamp(12px,1.6vw,22px) 0 clamp(46px,6vw,80px); }
/* en-tete de section : marge basse reduite (60px par defaut = trop). */
.gp-voyages .sec-head{ margin-bottom:clamp(20px,2.4vw,32px); }
/* flex CENTRÉ : 1, 2 ou 3 voyages sont centrés (pas de case vide) ; 3 max par ligne (largeur de carte
   bornée pour tenir 3 de front), les suivants passent à la ligne et restent centrés. */
.gp-voyages__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,2.4vw,34px); }
.gp-voyages__grid .trip{ flex:0 0 auto;
  width:calc((100% - 2 * clamp(20px,2.4vw,34px)) / 3); }   /* 3 par ligne */
@media (max-width:900px){ .gp-voyages__grid .trip{ width:calc((100% - clamp(20px,2.4vw,34px)) / 2); } }
@media (max-width:600px){ .gp-voyages__grid .trip{ width:100%; } }