/* ═══════════════════════════════════════════════════════════════
   SECTION 4 - À PROPOS (nœud Figma 10:976)
   Carte crème de 1200 de large, en chevauchement sur la bande citation
   sombre qui la precede. Marbre sous la carte, 88px de respiration en bas.

   Repères Figma exploités ici (canevas 1440) :
     carte      x=123  w=1200  h=551.3   (donc padding 64 : 187 - 123)
     colonne g. x=187  w=300            gap = 567 - (187+300) = 80
     colonne d. x=567  w=692
     surtitre   y=1353.3   h2 y=1389.32 (nœud TEXTE 10:983, pas le
                            frame 10:982 a 1393.3)
     fonction   y=1489.3  filet y=1554.4
     lead y=1355.3  texte y=1548.6  lien y=1643.1  filet y=1710.1  pied y=1739.1
   ═══════════════════════════════════════════════════════════════ */

.vf-apropos{
  /* Fond de la carte : dégradé radial relevé dans le Figma (10:978).
     Absent des tokens (il ne sert que dans cette carte), donc declare en
     custom property LOCALE, comme l'autorise la règle d'intégration. */
  --vf-apropos-fond:radial-gradient(farthest-corner at 24% 15%, #fff 0%, #f8f7f3 66%, #f0f0ee 97%);

  /* La carte déborde de 100px sur la bande sombre : la section elle-meme
     n'a donc AUCUN padding haut, c'est le margin-top négatif de la carte
     qui crée le chevauchement. */
  padding:0 var(--gut) 88px;
}

.vf-apropos__carte{
  position:relative;      /* + z-index : sans quoi la carte passe SOUS la */
  z-index:2;              /* bande sombre précédente et disparaît. */
  box-sizing:border-box;
  width:min(var(--encart), 100%);
  margin:-100px auto 0;   /* les 100px mordus sur la bande citation */
  padding:64px;
  background:var(--vf-apropos-fond);
  box-shadow:var(--ombre);

  /* 300px fixes à gauche (largeur du bloc identité dans le Figma), le
     reste à droite. minmax(0,1fr) et non 1fr : sans le minimum à 0, un
     mot long du texte impose sa largeur à la colonne et fait déborder. */
  display:grid;
  grid-template-columns:300px minmax(0, 1fr);
  gap:80px;
}

/* ─── Colonne gauche : identité ─────────────────────────────── */

.vf-apropos__identite{min-width:0}

/* Le surtitre générique (tokens.css) est en Schibsted 11.5/2.53 ; ici le
   Figma passe en DM Sans 12/2.88. On surcharge donc localement la fonte,
   la taille et l'interlettrage, en gardant le filet de 28px de l'utilitaire.
   Le numéro est en --argent, le libellé en --muted (cf. FINAL-SPEC) : le
   Figma les met en doré #cab27a, mais ce doré tombe à 2.3:1 sur la carte
   claire, sous le seuil WCAG, et la spec tranche pour les gris. */
.vf-apropos__surtitre{
  font-family:var(--font-text);
  font-size:12px;
  letter-spacing:2.88px;
  color:var(--muted);

  /* PIÈGE : l'utilitaire .surtitre de tokens.css pose gap:14px, et la
     valeur posée ici était 12px alors que le Figma en demande 8. Le filet
     part du bord interne de la carte (x=187, soit 64 de padding) et fait
     28px : il finit à 215. Le texte 10:980 est à x=223, donc 8px d'écart
     et non 12. Avec 12 le libellé tombait à dx=104 au lieu de 100.

     La remontée de 4.5px cale la BOÎTE DE GLYPHES sur le Figma : le texte
     10:980 y est posé à y=1353.32, soit dy=62 sous le haut de carte, alors
     que le rendu navigateur (line-height 21 pose a 64 de padding) centre
     ses 15.5px de glyphes à 66.5. On remonte donc le bloc de 4.5px ; la
     compensation est reprise sur la marge du titre juste dessous pour que
     le h2 reste à dy=98 (valeur déjà juste, à ne pas casser). */
  gap:8px;
  margin-top:-4.5px;
}
/* Le « 01 » fait partie du libellé lu (« 01 - À propos ») : c'est du texte
   informatif, il doit donc tenir 4.5:1. --argent-2 (#919292) ne donne que
   2.73:1 sur le fond crème de la carte, on le laisse au seul séparateur,
   qui est décoratif et aria-hidden. Le numéro prend --muted (5.56:1). */
.vf-apropos__num{color:var(--muted)}
.vf-apropos__num-sep{color:var(--argent-2)}

/* PIÈGE DE RÉFÉRENCE : le h2 existe en DEUX nœuds dans le Figma, un FRAME
   conteneur 10:982 (y=1393.3) et le nœud TEXTE réel 10:983 (y=1389.32).
   C'est le TEXTE qui donne la position vue à l'écran ; calculer la marge
   depuis le frame ajoutait 4px parasites. Référence retenue : 10:983.

   Le titre doit donc commencer à 1389.32 - 1291.32 = 98 sous le haut de
   la carte. Le surtitre rendu occupe 21px (line-height 21) et non les 16
   de la boîte Figma : posé à 64 il finirait à 85, d'où 98 - 85 = 13. Mais
   il est désormais remonté de 4.5px pour caler ses glyphes sur le Figma
   (cf. .vf-apropos__surtitre), donc il finit à 80.5 : la marge devient
   98 - 80.5 = 17.5. Le h2 reste bien à dy=98, seule la marge change.
   Ne PAS remettre 24 : cette valeur cumulait deux erreurs (frame au lieu
   du texte, boîte 16 au lieu du rendu 21) et poussait toute la colonne
   gauche de 11px vers le bas, la colonne droite restant juste.

   Le h2 est en 38/39 : quasi sans interligne, deux lignes serrées
   « Vanessa / Bokanowski » exactement comme dans la maquette.
   max-width 238 (Figma) pour forcer ce retour à la ligne.

   PIÈGE 1 : base.css pose « body.vf h1, body.vf h2, body.vf h3, body.vf h4
   { margin-top:0 } » (spécificité 0,1,2, cf. base.css l.26-33) qui bat une
   classe simple (0,1,0). La marge déclarée ici était donc annulée en
   silence : le titre remontait coller le surtitre et TOUTE la colonne
   gauche suivait.

   PIÈGE 2 (introduit par le correctif du piège 1) : on avait redoublé la
   classe (.vf-apropos__titre.vf-apropos__titre, 0,2,0). Cela repassait bien
   devant base.css, mais TUAIT du même coup les media queries ci-dessous,
   qui ciblent la classe simple (0,1,0) : ni le max-width:none de 1024, ni
   le font-size:32px de 480 ne s'appliquaient plus. Le titre restait en
   38px à 320px, où « Bokanowski » mesure 232px pour 232px disponibles :
   zéro marge, le moindre allongement du champ ACF faisait déborder.

   Solution retenue : préfixer par body.vf. On obtient exactement la même
   spécificité que base.css (0,1,2) mais apropos.css est chargée APRÈS base
   (cf. functions.php, ordre fonts > tokens > base > ... > sections), donc
   c'est cette règle qui gagne. Contrepartie : les media queries qui
   surchargent le titre plus bas doivent reprendre le MÊME préfixe
   body.vf, sinon elles restent muettes (une classe simple à 0,1,0 ne bat
   pas 0,1,2, quelle que soit sa position dans le fichier). */
body.vf .vf-apropos__titre{
  /* 13 de base + 4.5 rendus par la remontée du surtitre = 17.5, pour que
     le h2 reste à dy=98 sous le haut de carte comme dans le Figma. */
  margin:17.5px 0 0;
  max-width:238px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-h2-apropos);
  line-height:39px;
  letter-spacing:0;
  color:var(--ink);
}

/* Même piège de référence que pour le titre : le calcul partait du frame
   10:982 (1393.3) au lieu du nœud texte 10:983 (1389.32), d'où un 18 qui
   ne compensait que parce que le titre était lui-même 11px trop bas.
   Chaîne recalculée sur le rendu réel : le titre commence à 98 et sa boîte
   fait 78 (deux lignes de 39), la fonction doit démarrer à 198 (1489.32 -
   1291.32), donc 198 - (98 + 78) = 22.
   NB : Figma donne h=100 au nœud texte du h2 là où le navigateur rend 78 ;
   c'est de la garde de jambages propre à Figma, il faut donc caler sur la
   hauteur RENDUE et non sur celle annoncée dans l'arbre. */
.vf-apropos__fonction{
  margin:22px 0 0;
  max-width:300px;
  font-family:var(--font-text);
  font-weight:400;
  font-size:17px;
  line-height:19.6px;
  color:var(--texte-doux);
}

/* Filet 60 x 1 (Figma 10:985). Cible 263.1 sous le haut de la carte
   (1554.42 - 1291.32) ; la fonction finit à 198 + 39.2 = 237.2, soit 25.9.
   On garde 25 (entier) : le filet tombe à 262.2, à 0.9px du Figma. */
.vf-apropos__filet{
  width:60px;
  height:1px;
  margin-top:25px;
  background:var(--argent);
}

/* ─── Colonne droite : biographie ───────────────────────────── */

.vf-apropos__bio{min-width:0}

/* Chapô en DM Sans 700 : c'est bien du gras de texte et non un titre,
   il ne doit donc pas passer en Instrument Sans. */
.vf-apropos__lead{
  margin:0;
  font-family:var(--font-text);
  font-weight:700;
  font-size:var(--fs-apropos-lead);
  line-height:28.9px;
  color:var(--ink);
}

/* 1548.6 - (1355.3 + 173.3) = 20 sous le chapô. */
.vf-apropos__texte{
  margin:20px 0 0;
  font-family:var(--font-text);
  font-weight:400;
  font-size:var(--fs-apropos-texte);
  line-height:25.5px;
  color:var(--texte-doux);
}

/* 1643.1 - (1548.6 + 76.5) = 18 ; le cadre du lien ajoute 5px de marge
   interne haute dans le Figma (1648.1), d'où 22 au total avant le texte.
   line-height:1 est indispensable : sans lui le <p> hérite du 1.75 de
   base.css, sa boîte monte à 24.5 au lieu de 21 et tout ce qui suit
   (filet scindé, pied) descend de 3.5px, cumulé avec le décalage du
   pied cela faisait 35px de trop sur la hauteur de carte. */
.vf-apropos__suite{
  margin:18px 0 0;
  /* Le cadre du lien fait 21px de haut dans le Figma (10:989) pour un
     texte de 11.5 : les 9.5px restants sont répartis autour, d'où une
     boîte fixée à 21 et le lien centré dedans. Sans hauteur explicite le
     <p> héritait du line-height 1.75 de base.css (24.5px) et décalait de
     3.5px tout ce qui suit. */
  display:flex;
  align-items:center;
  height:21px;
  line-height:1;
}

.vf-apropos__lien{
  display:inline-flex;
  align-items:center;
  gap:10px;               /* 678.2 - (567 + 101.2) = 10 */
  font-family:var(--font-text);
  font-weight:500;
  font-size:var(--fs-surtitre);
  letter-spacing:2.185px;
  text-transform:uppercase;
  text-decoration:none;
  /* base.css pose body.vf a{color:inherit} (spécificité 0,1,1) qui bat une
     classe simple : le lien héritait de --texte au lieu de --ink. On
     redouble la classe pour repasser devant sans toucher à base.css. */
  transition:opacity .25s var(--ease);
}
.vf-apropos__lien.vf-apropos__lien{color:var(--ink)}
.vf-apropos__lien:hover,
.vf-apropos__lien:focus-visible{opacity:.7}
.vf-apropos__lien:hover .vf-apropos__fleche{transform:translateX(4px)}

/* Flèche 30 x 6.2 dessinée en CSS (l'export PNG du thème est vide, cf. le
   commentaire du gabarit). Le trait est la bordure haute du span, la
   pointe un chevron en ::after tourné à 45 degrés. currentColor : la
   flèche suit l'encre du lien et son survol sans règle supplémentaire. */
.vf-apropos__fleche{
  position:relative;
  display:block;
  width:30px;
  height:6.2px;
  flex:0 0 auto;
  transition:transform .25s var(--ease);
}
.vf-apropos__fleche::before{
  content:'';
  position:absolute;
  left:0;
  right:1px;
  top:50%;
  height:1px;
  background:currentColor;
}
.vf-apropos__fleche::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  width:5px;
  height:5px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
  transform-origin:center;
}

/* Filet scindé : deux segments de calc(50% - 9px) séparés de 18px.
   1710.1 - (1643.1 + 21) = 46 sous le bloc du lien. */
.vf-apropos__filet-scinde{
  display:flex;
  gap:18px;
  margin-top:46px;
}
.vf-apropos__filet-scinde span{
  flex:1 1 0;
  height:1px;
  background:var(--filet-doux);
}

/* ─── Pied de carte : badge + mentions légales ──────────────── */

/* 1739.1 - 1710.1 = 29, arrondi à 28 (cf. FINAL-SPEC). */
.vf-apropos__pied{
  display:flex;
  align-items:flex-start;
  gap:26px;               /* 791 - (567 + 198) = 26 */
  margin-top:28px;
}

/* Le badge est un PNG couleur posé sur un fond crème : luminosity le
   désature pour qu'il se fonde dans la carte, exactement comme le
   montre la maquette (le badge y apparaît en gris, pas en couleur). */
.vf-apropos__badge{
  width:198px;
  height:auto;
  flex:0 0 auto;
  mix-blend-mode:luminosity;
}

.vf-apropos__mentions{
  margin:0;
  min-width:0;
  font-family:var(--font-text);
  font-size:12.5px;
  color:var(--texte-doux);
}

/* dt et dd sur une même ligne (le Figma les pose côte à côte) : flex avec
   wrap pour que la longue liste « Patientèle » puisse passer à la ligne
   sur les petites largeurs sans déborder.

   PIÈGE : le style de texte du Figma annonce line-height 22.5, mais les
   trois lignes y sont posées à 1739.3 / 1757.3 / 1775.3, soit un pas de
   18px. Les 22.5 sont l'interligne du glyphe, pas la hauteur de rangée ;
   appliquer 22.5 donnait un <dl> de 67.5 au lieu de 58 et rallongeait la
   carte d'autant. On pose donc 18 sur la rangée. */
.vf-apropos__mention{
  display:flex;
  flex-wrap:wrap;
  column-gap:4px;
  line-height:18px;
}
.vf-apropos__mention dt{font-weight:600}
.vf-apropos__mention dd{margin:0;font-weight:400}

/* ═══ Responsive ═══════════════════════════════════════════════
   La maquette n'existe qu'en 1440 : les paliers ci-dessous sont
   déduits, en conservant l'ordre de lecture identité -> biographie. */

/* Sous 1180 la gouttière du parent tombe à 40 : la carte se resserre,
   on réduit le padding interne et l'écart entre colonnes en même temps
   pour que la colonne de texte garde une longueur de ligne lisible. */
@media (max-width:1180px){
  .vf-apropos__carte{padding:56px;gap:56px}
}

/* Sous 1024, la colonne de 300px ne laisse plus assez de place au texte :
   on empile. Le titre perd son max-width de 238 (calibré pour deux lignes
   à 38px) car sur une seule colonne il tiendrait alors sur trois lignes.

   PIÈGE (vérifié à l'écran, ne pas simplifier) : la règle de base du titre
   doit être préfixée body.vf (0,1,2) pour battre le margin-top:0 de
   base.css. Une media query en classe simple (0,1,0) ne peut donc PAS la
   surcharger, même posée plus bas : la spécificité prime sur l'ordre.
   Toutes les surcharges du titre reprennent donc le même préfixe. */
@media (max-width:1024px){
  .vf-apropos__carte{
    grid-template-columns:minmax(0, 1fr);
    gap:40px;
    padding:40px;
  }
  body.vf .vf-apropos__titre{max-width:none}
  .vf-apropos__fonction{max-width:none}
}

/* Sous 768 le chevauchement n'a plus de sens : la bande citation est
   elle-même empilée et la carte remonterait sur son texte. On la remet
   dans le flux et on ajoute la respiration correspondante. */
@media (max-width:768px){
  .vf-apropos{padding-bottom:64px}
  .vf-apropos__carte{
    margin-top:0;
    padding:28px;
  }
  /* Le badge (198px) et les mentions ne tiennent plus côte à côte :
     empilés, sinon la ligne « Patientèle » se casse mot à mot. */
  .vf-apropos__pied{
    flex-direction:column;
    gap:20px;
  }
}

/* Sous 480 la gouttière passe à 24 (parent). À 320px la carte n'offre plus
   que 232px utiles : « Bokanowski » en 38px les remplit EXACTEMENT, sans
   marge pour un champ ACF plus long ou une fonte de repli plus large. On
   descend donc le titre à 32/34, et on allège le chapô de 17 à 16px
   (sans descendre plus bas : lisibilité sur mobile). */
@media (max-width:480px){
  .vf-apropos__carte{padding:24px 20px}
  body.vf .vf-apropos__titre{font-size:32px;line-height:34px}
  .vf-apropos__lead{font-size:16px;line-height:27px}
  .vf-apropos__badge{width:min(198px, 100%)}
}