/* ═══════════════════════════════════════════════════════════════
   SECTION 6 - CABINET + CITATION LEVINE (Figma 10:891)

   Deux blocs, une feuille : la maquette les regroupe dans un meme noeud
   « picturequote » de 1257px de haut (844 pour le cabinet sur marbre,
   374 pour la bande sombre, plus le raccord).

   Releve Figma exploite ici (coordonnees absolues du canevas 1440) :
     section cabinet  y=3637  h=844
     carte photo      x=220  y=3767  w=1000  h=520   fond blanc
     zone media       x=241  y=3788  w=958   h=478   fond #e9edf0
     legende          x=540  y=4271  w=360   h=84    fond blanc
     titre legende    x=558  y=4296                  (18 de padding gauche,
                                                      25 de padding haut)
     bande Levine     y=4481 h=374

   Deux constantes en decoulent :
   - la carte est centree (220 + 1000 + 220 = 1440) et son padding vaut
     241 - 220 = 21px sur les quatre cotes (520 - 478 - 21 = 21) ;
   - la legende est elle aussi centree (540 + 360 + 540 = 1440), et son
     haut (4271) est a 16px au-dessus du bas de la carte (4287) : elle
     deborde donc de 84 - 16 = 68px sous la carte. La spec mentionne un
     x=468 relatif au bord du contenu : 72 + 468 = 540, c'est bien le
     centrage. On implemente en left:50%/translateX(-50%) plutot qu'en
     calcul de marges : c'est le seul moyen de rester centre quand la
     carte retrecit sous 1000px.
   ═══════════════════════════════════════════════════════════════ */

.vf-cabinet{
  /* 130 = 3767 - 3637 (haut de la carte moins haut de la section).
     190 en bas : la section fait 844 et la carte se termine a 520 du
     haut de son bloc, soit 844 - 130 - 520 = 194 ; on reprend 190 car la
     legende deborde de 68 et doit garder de l'air avant la bande sombre. */
  padding:130px var(--gut) 190px;
  /* Aucun overflow:hidden ici : il couperait l'ombre portee de la carte
     ET la legende qui deborde volontairement sous elle. */
}

/* ─── Carte photo ───
   Cadre blanc de 21px autour de la photo, ombre large et basse. C'est un
   <figure> : margin par defaut du navigateur a neutraliser, sinon la
   carte se decale de 40px a gauche et a droite. */
.vf-cabinet__carte{
  position:relative;         /* repere de la legende en absolu */
  width:min(1000px, 100%);
  margin:0 auto;
  padding:21px;
  box-sizing:border-box;     /* pour que le 1000px inclue les 21px */
  background:var(--blanc);
  box-shadow:var(--ombre-cabinet);
}

/* ─── Zone media ───
   Ratio verrouille sur les dimensions Figma (958 x 478) plutot que sur
   une hauteur fixe : la carte devient fluide sous 1000px et la photo
   garde sa proportion sans saut. Le fond gris-bleu sert de placeholder
   tant que l'image n'est pas chargee (ou absente en base). */
.vf-cabinet__media{
  position:relative;
  overflow:hidden;           /* les deux voiles ne debordent pas du cadre */
  aspect-ratio:958 / 478;
  background:var(--gris-photo);
}

/* PIEGE RENCONTRE (une heure de debug) : sans position/z-index, l'image
   ne se peignait PAS du tout, seul le fond --gris-photo restait visible,
   alors que l'image etait bien chargee (naturalWidth 1920, drawImage sur
   un canvas rendait les vrais pixels de la piece).
   Cause : les deux pseudo-elements ci-dessous portent un mix-blend-mode,
   ce qui cree un contexte d'empilement dans .vf-cabinet__media. Une <img>
   en position:static reste alors dans la couche de fond du conteneur et
   se fait composer SOUS les voiles au lieu d'etre le calque qu'ils
   melangent. En lui donnant sa propre couche positionnee (z-index:1,
   sous les voiles qui montent a 2), l'ordre de peinture redevient
   image → voile teinte → halo blanc. */
.vf-cabinet__image{
  position:relative;
  z-index:1;
  display:block;             /* supprime le liseré du baseline inline */
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}

/* Voile 1 (Figma #10:899, GRADIENT_LINEAR) : refroidit le coin haut
   gauche de la photo. En soft-light plutot qu'en aplat : la teinte se
   melange a l'image au lieu de la voiler uniformement, ce qui garde le
   contraste du mur gris et du parquet. */
.vf-cabinet__media::before,
.vf-cabinet__media::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  /* Pas de z-index ici : les pseudo-elements sont declares APRES l'image
     dans l'ordre du DOM et sont deja au-dessus d'elle a z-index auto. Un
     z-index explicite les promeut dans le contexte d'empilement et
     ramene le bug de peinture decrit plus haut. */
}
.vf-cabinet__media::before{
  background:linear-gradient(165deg, var(--bleu-teinte) 0%, rgba(196,214,226,0) 58%);
  mix-blend-mode:soft-light;
}

/* Voile 2 (Figma #10:900, GRADIENT_RADIAL) : halo blanc sur le bord droit,
   au meme niveau que le halo du hero. En screen pour eclaircir sans laver
   les noirs des canapes. Les coordonnees Figma (98.8% / 49.6%) sont
   reprises telles quelles : le centre du halo est presque sur le bord. */
.vf-cabinet__media::after{
  background:radial-gradient(180px 180px at 98.8% 49.6%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;
}

/* ─── Legende flottante ───
   360 x 84 dans le Figma. La hauteur n'est PAS figee : le texte reel
   (« Un espace calme, au coeur d'Uccle. ») peut passer sur deux lignes
   dans une traduction, et une hauteur fixe le couperait. 25px de padding
   haut + 13 (titre) + 5 (gap) + 18 (texte) + 23 = 84, on retombe dessus
   naturellement avec padding:25px 18px et min-height. */
.vf-cabinet__legende{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-68px;              /* 84 - 16 : chevauche le bas de la carte */
  z-index:2;                 /* au-dessus de la photo et de ses voiles */
  width:360px;
  max-width:100%;
  box-sizing:border-box;
  min-height:84px;
  padding:25px 18px;
  display:flex;
  flex-direction:column;
  gap:5px;
  background:var(--blanc);
  box-shadow:var(--ombre);
}

.vf-cabinet__legende-titre{
  margin:0;
  font-family:var(--font-ui);
  font-weight:500;
  font-size:10.5px;          /* releve Figma, hors echelle des tokens */
  line-height:12.96px;
  letter-spacing:2.31px;     /* Figma en px, pas en em */
  text-transform:uppercase;
  color:var(--ink-fort);
}

.vf-cabinet__legende-texte{
  margin:0;
  font-family:var(--font-ui);
  font-weight:400;
  font-size:12px;
  line-height:18px;
  color:var(--muted);        /* #5b6066 sur blanc = 7.1:1, conforme */
}

/* ═══ CITATION LEVINE ═══
   Bande sombre de 374px, texte centre. La section therapies (Jung) porte
   la meme classe .vf-citation-sombre et redefinit les memes regles dans sa
   propre feuille : les deux chantiers sont independants, aucune des deux
   feuilles ne peut dependre de l'autre pour son ordre de chargement. La
   duplication est volontaire et documentee des deux cotes. Les valeurs
   etant identiques, la cascade donne le meme resultat quel que soit
   l'ordre d'enregistrement. */
.vf-citation-sombre{
  min-height:374px;
  display:grid;
  place-items:center;
  padding:80px var(--gut);
  box-sizing:border-box;
}

/* La maquette ne pose PAS de grain sur cette bande (a la difference du
   bandeau sous le hero et du bloc contact) : on eteint le ::after de
   l'utilitaire .fond-sombre au lieu d'ecrire un fond concurrent. */
.fond-sombre--lisse::after{display:none}

.vf-citation-sombre__bloc{
  margin:0;
  max-width:820px;           /* largeur du blockquote dans le Figma */
  text-align:center;
}

.vf-citation-sombre__texte{
  margin:0;
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100;
  font-weight:500;
  /* 40px cible ; en clamp pour que les trois lignes du Figma ne se
     transforment pas en pave de six lignes sur tablette. */
  font-size:clamp(24px, 2.8vw, var(--fs-citation));
  line-height:1.35;          /* 54 / 40 */
  color:var(--blanc);
}

.vf-citation-sombre__auteur{
  display:block;
  margin-top:24px;           /* 4772 - 4581 - 108 - 54 ≈ 24 dans le Figma */
  font-family:var(--font-ui);
  font-style:normal;         /* <cite> est italique par defaut */
  font-weight:400;
  font-size:var(--fs-surtitre);
  letter-spacing:var(--ls-surtitre);
  text-transform:uppercase;  /* la base est saisie « Peter Levine » */
  color:var(--argent);       /* #bebebe sur le sombre = 9.8:1, conforme */
}

/* ═══ RESPONSIVE ═══ */

/* Sous 1180, la gouttiere du parent tombe a 40 : la carte peut occuper
   toute la largeur utile, on reduit simplement les respirations. */
@media (max-width:1180px){
  .vf-cabinet{padding:100px var(--gut) 150px}
}

@media (max-width:1024px){
  .vf-cabinet{padding:80px var(--gut) 140px}
  .vf-cabinet__carte{padding:16px}
}

/* Sous 768, la legende sort du flux absolu : a 360px de large sur un
   ecran de 390 elle depasserait du cadre photo et, surtout, son
   chevauchement n'a plus de sens quand la carte ne fait que quelques
   centimetres de haut. Elle repasse en flux, sous la photo. */
@media (max-width:768px){
  .vf-cabinet{padding:64px var(--gut) 120px}
  .vf-cabinet__carte{padding:12px}
  /* La legende reste en chevauchement absolu, comme dans la maquette :
     la sortir du flux « en dessous » la collerait au cadre blanc de la
     carte, les deux aplats fusionneraient et son ombre disparaitrait.
     Seul le debord est reduit (la carte est bien moins haute ici) et sa
     largeur suit la carte pour ne jamais deborder de l'ecran. */
  .vf-cabinet__legende{
    bottom:-52px;
    width:min(360px, calc(100% - 48px));
    min-height:0;
    padding:20px 18px;
  }
  .vf-citation-sombre{min-height:300px;padding:64px var(--gut)}
  .vf-citation-sombre__texte{line-height:1.3}
}

@media (max-width:480px){
  /* 48 + 46 de debord de legende : la bande sombre suivante ne doit pas
     mordre dessus. */
  .vf-cabinet{padding:48px var(--gut) 96px}
  /* La legende occupe alors presque toute la largeur de la photo : on la
     fait deborder davantage vers le bas pour degager l'image, et on
     resserre le padding, les 18px lateraux mangeant trop de place. */
  .vf-cabinet__legende{
    bottom:-58px;
    width:min(360px, calc(100% - 24px));
    padding:16px;
  }
  .vf-citation-sombre{min-height:0;padding:56px var(--gut)}
  .vf-citation-sombre__auteur{margin-top:20px}
}

/* ─── Marbre en miroir ───
   Cabinet et Articles ont presque la même hauteur (844 / 909) : avec le
   même recadrage « cover », la même veine tombait au même endroit dans
   les deux sections, à quelques centaines de pixels d'écart (retour
   d'Emmanuel du 09/09). Ici l'image est retournée horizontalement : la
   grande veine passe à GAUCHE de la carte. Un background ne se retourne
   pas en CSS, d'où le pseudo-élément qui le porte. isolation:isolate
   garde le z-index négatif à l'intérieur de la section (au-dessus de
   son fond, sous son contenu) ; pas d'overflow:hidden, l'ombre de la
   carte doit continuer à déborder. */
.vf-cabinet.fond-marbre{
  background-image:none;
  position:relative;
  isolation:isolate;
}
.vf-cabinet::before{
  content:'';
  position:absolute;
  inset:0;
  /* Chemin explicite et non var(--marbre) : un url() dans une custom
     property se résout par rapport à la feuille qui l'UTILISE, pas
     celle qui le définit. Depuis sections/, « ../img/ » tombait sur
     assets/css/img/ (404) et le marbre disparaissait purement et
     simplement. tokens.css s'en sort parce qu'il vit dans assets/css/. */
  /* Zone BASSE de la texture (auto 236% : les 551 derniers pixels,
     y > 750, donc sous le point où la grande veine meurt), ancrée en bas
     et cadrée sur la gauche de l'image (x 0..940 à 1440). Avec le
     miroir, la veine du bas-gauche entre par la DROITE à mi-hauteur et
     sort par le bas : rien ne s'arrête dans le cadre. Voir tokens.css. */
  background:url('../../img/v-marbre.png') 0% 100% / auto 236% no-repeat;
  transform:scaleX(-1);
  z-index:-1;
  pointer-events:none;
}

/* ─── Étalonnage de la photo, comme dans la maquette ───
   Mesure sur les fichiers (retour d'Emmanuel du 09/09) : l'export de
   Sébastien est quasi monochrome et plus clair que l'original de la
   médiathèque (saturation 0.09 contre 0.16, luminosité 0.59 contre
   0.55). Plutôt que d'importer son export en basse définition (958px,
   flou sur Retina), on reproduit l'étalonnage par filtre sur l'original
   en pleine définition : la cliente peut changer la photo, le rendu
   reste celui de la maquette. Valeurs ajustées par mesure du rendu. */
.vf-cabinet__media img{filter:saturate(.6) brightness(1.27) contrast(.96)}