/* ═══════════════════════════════════════════════════════════════
   HERO - accueil (Figma 10:1009)

   Géométrie relevée au pixel dans le nœud :
     section 1440 x 855, marbre plein cadre + halo blanc radial ;
     contenu utile 748 de haut, centré verticalement ;
     colonne texte x=70..720 (650 de large) ; photo x=855..1185 (330x430)
     avec un cadre blanc de 10px tracé À L'EXTÉRIEUR, soit un cadre hors
     tout de 350x450 posé en x=845..1195, y=258..708 ;
     bandeau sombre y=856.6, hauteur 118 mais clippé par le bas de la
     section : ~107px visibles, c'est cette valeur qu'on pose.

   Rappel de la règle d'intégration : cette feuille ne définit QUE des
   sélecteurs .vf-hero*. Les couleurs, fontes, ombres et textures viennent
   des tokens ; les deux seules valeurs absentes des tokens (le halo et le
   letter-spacing du bandeau) sont déclarées en custom properties locales
   sur .vf-hero, juste en dessous.
   ═══════════════════════════════════════════════════════════════ */

.vf-hero{
  /* Custom properties locales : valeurs propres au hero, absentes de
     tokens.css parce qu'aucune autre section ne s'en sert. */

  /* Halo blanc du Figma : un radial de 360x360 centré en (1483, 416) sur
     un canevas de 1440. Le centre déborde donc de 43px À DROITE du cadre,
     c'est voulu : on ne voit que la moitié gauche du halo, qui éclaircit
     le marbre derrière le portrait. Exprimé en px pour rester fidèle au
     relevé ; en %, le centre se déplacerait avec la largeur du viewport
     et le halo passerait derrière le texte sur écran large. */
  --vf-hero-halo:radial-gradient(360px 360px at 1483px 416px, rgba(255,255,255,.8), rgba(255,255,255,0) 70%);

  /* Le bandeau a son propre interlettrage (2.76px sur 11.5), plus large
     que --ls-surtitre (2.53) utilisé partout ailleurs. */
  --vf-hero-ls-bandeau:2.76px;

  /* Hauteur du bandeau : 118px dans le Figma, mais il dépasse du bas de
     la section, ~107px sont réellement visibles. On pose 107 plutôt que
     118 + overflow:hidden, sans quoi le halo (::before) serait rogné lui
     aussi et la section ne pourrait plus s'étendre sous 1024. */
  --vf-hero-bandeau-h:107px;

  position:relative;
  /* min-height et non height : le contenu prime si la traduction anglaise
     ou une accroche plus longue dépasse les 748px du Figma. */
  min-height:855px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* Le bandeau étant en position absolue, on réserve sa hauteur en bas
     pour que le contenu reste centré dans l'espace réellement libre. */
  padding-bottom:var(--vf-hero-bandeau-h);
  box-sizing:border-box;
}

/* Halo posé en ::before plutôt qu'en background-image supplémentaire sur
   .vf-hero : .fond-marbre pose déjà background-image, et une seconde
   déclaration l'écraserait. z-index:0 + contenu à 1 (voir plus bas) pour
   que le halo reste sous le texte. */
.vf-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--vf-hero-halo);
  pointer-events:none;
  z-index:0;
}

/* ─── Grille : texte 650 + portrait 350 hors tout, gouttière 125 ───
   Figma : texte de x=70 à 720 ; le portrait est le RECTANGLE 10:1041
   (x=855, w=330) dont le STROKE blanc de 10px est tracé À L'EXTÉRIEUR.
   Le cadre hors tout part donc de x=845 et mesure 350 de large, la PHOTO
   gardant ses 330. D'où la colonne de 350 et la gouttière 845-720 = 125.
   PIÈGE corrigé : en posant 330 de colonne et 135 de gouttière (mesures
   de la PHOTO, pas du cadre), toute la colonne droite se retrouvait
   décalée de 12px et la photo amputée de 20px dans chaque axe.
   Total 650 + 125 + 350 = 1125, largement dans les 1296 du .vf-shell.

   La colonne texte est en minmax(0, 650px) : le 0 comme minimum est
   indispensable, sinon un mot long (« psychanalytique ») impose une
   largeur plancher à la grille et fait déborder la page en dessous de
   500px. Même raison pour le 1fr du palier mobile. */
.vf-hero__grille{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 650px) 350px;
  gap:125px;
  align-items:center;
}

/* Colonne texte : les écarts verticaux de la maquette (19 / 28 / 48 / 19,
   relevés sur les y du nœud) sont posés en margin-top sur chaque bloc
   plutôt qu'en gap de flex, car ils sont tous différents. */
.vf-hero__texte{min-width:0}

.vf-hero__surtitre{
  margin:0;
  font-family:var(--font-ui);
  font-weight:400;
  font-size:var(--fs-surtitre);
  line-height:1.2345;              /* 14.2 / 11.5 : relevé Figma */
  letter-spacing:var(--ls-surtitre);
  text-transform:uppercase;
  color:var(--muted);
}

/* H1 : Instrument Sans 600, 48/53. Le Figma affiche « Bodoni Moda » dans
   l'arbre exporté, mais c'est un résidu de la variante précédente : la
   maquette validée (capture figma-hero.png) est bien en Instrument Sans,
   graisse 600. Le clamp prend le relais sous 1180 pour que les trois
   lignes ne deviennent pas six sur un portable.

   PIÈGE de spécificité (même famille que celui des boutons, plus bas) :
   base.css pose « body.vf h1,h2,h3,h4{margin-top:0} », spécificité (0,1,2),
   qui bat un simple .vf-hero__titre (0,1,0). L'écart de 19px entre le
   surtitre et le H1 exigé par le Figma (surtitre bas y=269.5, H1 haut
   y=288.5) était donc écrasé et le titre venait se coller au surtitre,
   remontant toute la colonne texte de 19px. On préfixe par body.vf pour
   repasser devant (0,2,1), sans toucher à base.css qui est partagé.

   PAS de letter-spacing : le nœud 10:1031 pose explicitement « ls=0 ».
   Un interlettrage négatif de -.01em raccourcissait chaque ligne d'environ
   12px et désalignait la composition par rapport à la capture (ligne 1
   mesurée à 585px dans le Figma, 586px sans letter-spacing). */
body.vf .vf-hero__titre{
  margin:19px 0 0;
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100;
  font-weight:600;
  font-size:var(--fs-h1);
  line-height:1.1042;              /* 53 / 48 */
  letter-spacing:normal;           /* Figma 10:1031 : ls=0 */
  color:var(--ink-fort);
  max-width:650px;
}

.vf-hero__chapo{
  margin:28px 0 0;
  font-family:var(--font-ui);
  font-weight:400;
  font-size:var(--fs-lead);
  line-height:1.75;                /* 28 / 16 */
  color:var(--texte);
  max-width:470px;                 /* Figma : le chapô casse plus tôt que le H1 */
}

/* Boutons : 275x49 puis 194.5x49, séparés de 16 (Figma : 361 - 345).
   flex-wrap pour que le second passe à la ligne sur écran étroit plutôt
   que de rogner son libellé.

   ÉCART ASSUMÉ avec le texte de FINAL-SPEC § 2, qui annonce la séquence
   « chapô -> 30 -> boutons » : les coordonnées du nœud disent 48, et ce
   sont elles qui font foi (l'arbre est fourni pour cela). Chapô 10:1032
   y=484.5 h=112, donc bas 596.5 ; rangée de boutons 10:1034 y=644.5 :
   644.5 - 596.5 = 48. Les quatre autres écarts de la séquence (19 / 28 /
   19) sont eux confirmés par l'arbre, ce qui isole le 30 comme la seule
   valeur erronée du texte de la spec. Avec 30, boutons et mention
   remontaient de 31.5px par rapport à la capture Figma. */
.vf-hero__actions{
  margin:48px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

/* Le bouton WhatsApp : icône à 34px du bord gauche, texte à 59 → padding
   gauche 34 et gap 10 (34 + 15 d'icône + 10 = 59). Le padding droit est
   ajusté pour retomber sur les 275px de large du Figma.

   PIÈGE rencontré (mesuré : contraste 1.89:1 sur le bouton plein) :
   base.css pose « body.vf a{color:inherit} », dont la spécificité (0,2,1)
   bat celle de .btn-plein (0,1,0) des tokens. Les deux boutons héritaient
   donc du gris de body (--texte) au lieu du crème et de l'encre du Figma,
   et le libellé du bouton noir devenait illisible. On ne corrige ni
   tokens.css ni base.css (fichiers partagés) : on rétablit la couleur ici
   en préfixant par body.vf pour repasser devant, et sur le <span> lui-même
   qui, sinon, hérite à son tour de la couleur de l'ancre. */
.vf-hero__cta{
  width:275px;
  justify-content:flex-start;
  padding:0 34px;
  gap:10px;
}
.vf-hero__secondaire{
  width:194.5px;
  justify-content:center;
  padding:0 20px;
}
body.vf .vf-hero__cta,
body.vf .vf-hero__cta span{color:var(--page)}
body.vf .vf-hero__secondaire{color:var(--ink-fort)}
/* Le survol du bouton contour inverse le fond : le libellé doit repasser
   en crème, sinon il devient illisible sur l'aplat d'encre. */
body.vf .vf-hero__secondaire:hover,
body.vf .vf-hero__secondaire:focus-visible{color:var(--page)}

.vf-hero__mention{
  margin:19px 0 0;
  font-family:var(--font-ui);
  font-weight:400;
  font-size:var(--fs-mention);
  line-height:1.2344;              /* 16 / 13 : relevé Figma */
  color:var(--muted);
}

/* ─── Portrait ───
   La PHOTO fait 330x430 et le cadre blanc de 10px s'ajoute autour :
   dans Figma le stroke du rectangle 10:1041 est en position « outside »,
   le cadre mesure donc 350x450 hors tout (x=845..1195, y=258..708).
   D'où box-sizing:content-box EXPLICITE (base.css pose border-box en
   universel) : les 330x430 déclarés sont la boîte de contenu, la bordure
   vient en plus. Avec border-box, la bordure rognait la photo à 310x410
   et rentrait le cadre de 20px : écart immédiatement visible en
   superposant la capture Figma. */
.vf-hero__portrait{
  margin:0;
  width:330px;
  height:430px;
  box-sizing:content-box;
  border:10px solid var(--blanc);
  box-shadow:var(--ombre-photo);
  background:var(--gris-photo);    /* évite un flash blanc avant le décodage */
}
.vf-hero__photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* 50% 20% : le cadrage 3:4 du Figma remonte sur le visage ; un centrage
     par défaut couperait le haut de la tête. */
  object-position:50% 20%;
}

/* ─── Bandeau sombre ───
   Ancré en bas de la section, pleine largeur. Il vient au contact de la
   bande citation de la section suivante (fond --sombre) : ni marge, ni
   bordure, ni translation, sinon un liseré clair d'1px apparaît à la
   jonction sur les écrans à densité fractionnaire. */
.vf-hero__bandeau{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;                       /* au-dessus du halo */
  height:var(--vf-hero-bandeau-h);
  display:flex;
  align-items:center;
}
.vf-hero__bandeau-texte{
  margin:0;
  font-family:var(--font-ui);
  font-weight:500;
  font-size:var(--fs-surtitre);
  line-height:1.2345;
  letter-spacing:var(--vf-hero-ls-bandeau);
  text-transform:uppercase;
  color:var(--gris-bd);
}

/* ═══ Responsive ═══════════════════════════════════════════════════════
   Paliers communs du projet : 1180 (gouttière du parent à 40), 1024
   (empilement), 768, 480 (gouttière 24).

   Les bornes 1180 et 480 sont écrites EXACTEMENT comme dans le parent
   (style.css l. 1630 et 1972 : max-width:1180px et max-width:480px).
   PIÈGE corrigé : elles étaient posées à 1179 et 479, ce qui créait deux
   largeurs charnières où la gouttière du parent avait déjà changé mais
   pas la mise en page du hero. À 1180 pile, la gouttière valait 40 alors
   que la gouttière de grille valait encore 135 : la colonne texte tombait
   à 635 au lieu des 650 imposés. À 480 pile, le bandeau gardait sa
   hauteur et son interlettrage desktop et son libellé passait sur deux
   lignes hors du palier prévu pour cela.
   Les bornes 1023 et 767, elles, sont propres à cette section (elles ne
   correspondent à aucune bascule du parent) : on ne les touche pas. */

/* ─── < 1180 : la gouttière du parent tombe à 40, la colonne texte n'a
   plus la place de tenir ses 650px à côté d'un portrait de 330. On
   resserre l'entre-colonne et on met le H1 en clamp. ─── */
@media (max-width:1180px){
  .vf-hero__grille{gap:64px}
  body.vf .vf-hero__titre{font-size:clamp(30px, 3.4vw, 48px)}
}

/* ─── < 1024 : une seule colonne, portrait sous le texte, centré.
   PIÈGE (rencontré sur la variante précédente) : garder width:330px sur
   la figure dans une grille à une colonne impose un minimum de 330px au
   conteneur, et la page déborde à 320-390px. D'où min(330px, 100%) et une
   hauteur qui suit le ratio 33:43 plutôt qu'une valeur fixe. ─── */
@media (max-width:1023px){
  .vf-hero{
    min-height:0;                  /* la hauteur suit désormais le contenu */
    padding-top:72px;
    padding-bottom:calc(72px + var(--vf-hero-bandeau-h));
  }
  .vf-hero__grille{
    grid-template-columns:minmax(0, 1fr);
    gap:48px;
    justify-items:center;
  }
  .vf-hero__texte{
    width:100%;
    max-width:650px;
  }
  /* La figure reprend ici les 350x450 HORS TOUT, mais en box-sizing:
     border-box : aspect-ratio raisonne sur la boîte de bordure, et avec
     content-box la hauteur calculée n'inclurait pas les 20px de cadre,
     ce qui déformerait la photo. Sous 1024 on privilégie donc l'absence
     de débordement et un rapport juste sur le cadre entier, quitte à
     rogner la photo de 20px : le stroke extérieur du Figma n'a plus de
     sens dès que la largeur devient fluide. */
  .vf-hero__portrait{
    width:min(350px, 100%);
    height:auto;
    box-sizing:border-box;
    aspect-ratio:35 / 45;          /* 350x450 hors tout, en proportion */
  }
}

/* ─── < 768 : plus de place pour deux boutons côte à côte ni pour des
   largeurs fixes. Les boutons passent en pleine largeur de leur ligne
   (plafonnés à 275, la valeur Figma, pour ne pas s'étirer sur tablette). */
@media (max-width:767px){
  .vf-hero{padding-top:56px}
  /* Même préfixe body.vf que sur le bloc desktop : sans lui, le
     margin-top:0 de base.css reprend le dessus à ce palier aussi. */
  body.vf .vf-hero__titre{margin-top:16px}
  .vf-hero__chapo{margin-top:22px}
  .vf-hero__actions{margin-top:26px}
  .vf-hero__cta,
  .vf-hero__secondaire{
    width:100%;
    max-width:275px;
    justify-content:center;
  }
  /* Le CTA WhatsApp centre alors son couple icône+texte : son padding
     asymétrique de 34px n'a plus de sens hors de la largeur fixe. */
  .vf-hero__cta{padding:0 24px}
}

/* ─── < 480 : la gouttière du parent tombe à 24. Le bandeau perd 20px de
   haut pour ne pas manger l'écran, et son libellé (48 caractères) est
   autorisé à passer sur deux lignes plutôt que de déborder. ─── */
@media (max-width:480px){
  .vf-hero{--vf-hero-bandeau-h:88px}
  .vf-hero__bandeau-texte{
    line-height:1.5;
    letter-spacing:2px;            /* 2.76 sur 320px de large ferait déborder */
  }
}


/* ─── Marbre : zone HAUTE de la texture, veines à bord perdu ───
   auto 232% : la section (855px) ne montre que les 560 premiers pixels
   de l'image (1301/2.32), soit AVANT le point où la grande veine meurt
   (y≈700). Position 77% : la fenêtre cadre x≈380..1327 de l'image, la
   grande veine entre par le haut et sort par le bas (sous le bandeau
   sombre), la veine du coin supérieur droit sort par la droite.
   Voir la note « veines à bord perdu » dans tokens.css. */
.vf-hero.fond-marbre{
  background-size:auto 232%;
  background-position:77% 0%;
}

/* ─── Étalonnage du portrait ───
   L'export Figma du portrait est un peu moins saturé que l'original de
   la médiathèque (0.22 contre 0.29, mesuré) ; même luminosité. Filtre
   léger pour retrouver la carnation de la maquette sans toucher au
   fichier de la cliente. */
.vf-hero__portrait img,
img.vf-hero__portrait{filter:saturate(.62) brightness(1.07)}