/* ═══════════════════════════════════════════════════════════════
   SECTION 5 - THÉRAPIES + CITATION DE JUNG
   Figma nœuds 10:913 (grille des quatre cartes) et 10:960 (Jung).

   Repères relevés dans l'arbre Figma (canevas 1440, contenu 1296) :
     section  y=1843
     surtitre y=1963  → 120px de padding haut
     h2       y=1999  → 22px sous le surtitre (1999 - 1963 - 14)
       La spec écrit « → 36 → » : ce 36 se mesure depuis le HAUT du
       surtitre (1999 - 1963), pas depuis son bas. Le Figma empile bien
       14 + 22. Même famille d'erreur que le 72 ci-dessous.
     grille   y=2156  → 89px sous le h2 (2156 - 1999 - 68)
       La spec annonce 72 (313 - 120 - 121) : son terme 121 est la hauteur
       du bloc conteneur 10:915, pas celle du seul h2 (68). L'arbre Figma
       fait foi, on garde 89.
     cartes   628 de large, gouttière 39 (742 - 703), gouttière verticale
              41 (2635 - 2594)
     Jung     y=3217, hauteur 416
   ═══════════════════════════════════════════════════════════════ */

.vf-therapies{
  /* Le bas est à zéro : c'est la grille qui porte le padding-bas, pour
     que ses ombres ne soient pas coupées par le bord de la section. */
  padding:120px 0 0;
}

/* ─── En-tête ─────────────────────────────────────────────────── */

.vf-therapies__surtitre{
  /* .surtitre pose déjà fonte, graisse, capitales et le filet de 28px.
     Rien à surcharger ici : le Figma donne exactement Schibsted 500,
     11.5/14.2, ls 2.53, #5b6066, soit les valeurs du token.

     Seule exception : l'interligne. Sans lui, le <p> hérite du 1.75 de
     body.vf et sa boîte de ligne monte à 20.1px alors que le Figma
     mesure 14px (nœud 10:918, h=14). Les ~3px de demi-interligne de
     chaque côté repoussaient le h2 à 176 au lieu de 156 depuis le haut
     de section : le titre démarrait 20px trop bas, car son margin-top
     de 36 se pose sous la BOÎTE DE LIGNE, pas sous la boîte de texte
     que le Figma mesure. On force donc la valeur Figma exacte. */
  margin:0;
  line-height:14.1953125px;   /* Figma 11.5/14.1953125, soit 1.2343 */
}

/* Sélecteur compound obligatoire : base.css pose « body.vf h2{margin-top:0} »
   (spécificité 0,1,1), qui écrasait un simple .vf-therapies__titre (0,1,0)
   et collait le titre sur le surtitre. On monte à (0,2,0). */
.vf-therapies .vf-therapies__titre{
  /* Instrument Sans 600, 56/68.32 → 1.22. Aligné à gauche (le seul
     grand titre de la page qui ne soit pas centré). Le clamp évite que
     56px ne pousse la ligne hors du contenu sur les petites largeurs.

     22 et non 36 : le 36 de la spec est la distance entre les deux
     origines Figma (1999 - 1963), or le surtitre occupe déjà 14px de
     cette distance. Avec 36 le h2 tombait à 170 du haut de section au
     lieu des 156 mesurés (10:919 y=1999, section y=1843). */
  margin:22px 0 0;
  font-size:clamp(34px, 4.6vw, var(--fs-h2));
  font-weight:600;
  line-height:1.22;
  color:var(--ink-fort);
  text-align:left;
}

/* ─── Grille des quatre cartes ────────────────────────────────── */

.vf-therapies__grille{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  /* minmax(0,1fr) et non 1fr : un mot long dans un titre (« Séance de
     respiration consciente connectée ») imposerait sinon un minimum de
     contenu à la colonne et ferait déborder la page sous 1180. */
  column-gap:var(--gap-therapie);
  row-gap:41px;
  align-items:stretch;      /* cartes d'une même rangée de hauteur égale */
  /* 89 et non 72 : grille (10:922) y=2156, h2 (10:919) y=1999 h=68, donc
     2156 - (1999 + 68) = 89. Le 72 de la spec vient d'un calcul appuyé
     sur la hauteur du conteneur 10:915 (121) et non sur celle du h2. */
  margin-top:89px;
  /* 144 dans le Figma, ramené à 110 : l'ombre des cartes du bas porte
     déjà une trentaine de pixels sous leur bordure, l'écart optique
     avec la bande sombre de Jung est identique. */
  padding-bottom:110px;
}

.vf-therapie{
  display:flex;
  flex-direction:column;
  gap:18px;                 /* écart titre → corps, uniformisé à 18
                               partout (la maquette hésite entre 18 et 44) */
  /* Le dégradé part d'un blanc à 92 % pour laisser transparaître un
     soupçon de marbre en haut de carte, comme dans le Figma. */
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, #fff 30%);
  border:1px solid var(--argent);
  box-shadow:var(--ombre);
  padding:35px 41px;        /* 2192-2156=36 en haut, 117-75=42 à gauche */
  box-sizing:border-box;
}

.vf-therapie__num{
  margin:0;
  /* Britannic Bold (10/09, demande d'Emmanuel) à la place d'Instrument
     Sans. Repli sur la fonte de titre si le fichier ne charge pas. */
  font-family:'Britannic Bold', var(--font-display);
  font-weight:400;
  font-size:32px;           /* 44 dans la maquette, 32 demandé le 10/09 */
  line-height:1;
  color:var(--ink-fort);    /* gris dans la maquette, noir demandé le 10/09 */
}

.vf-therapie__tete{
  display:flex;
  flex-direction:column;
  gap:6px;                  /* 2292.4 - 2254 - 32.4 = 6 */
}

.vf-therapie__titre{
  margin:0;
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100;
  font-weight:500;
  font-size:var(--fs-carte-titre);
  line-height:1.2;          /* 32.4 / 27 */
  color:var(--ink-fort);
}

.vf-therapie__accroche{
  margin:0;
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100;
  font-weight:400;
  font-size:var(--fs-carte-accroche);
  line-height:1.4526;       /* 27.6 / 19 */
  color:var(--ink-fort);
}

.vf-therapie__corps{
  /* Absorbe la hauteur libre : sans ce flex:1, la carte la plus courte
     d'une rangée collerait son tarif juste sous son texte alors que sa
     voisine le pousse plus bas, et les deux filets ne s'aligneraient
     plus (le Figma les aligne rangée par rangée). */
  flex:1 1 auto;
  min-width:0;              /* garde-fou contre un mot long en flex */
}

.vf-therapie__texte{
  margin:0;
  font-family:var(--font-ui);
  font-weight:400;
  font-size:var(--fs-corps);
  line-height:1.75;         /* 24.5 / 14 */
  color:var(--texte);
}

/* wpautop produit un <p> par paragraphe : l'écart de 12 se met entre
   eux, jamais avant le premier ni après le dernier (sinon le filet du
   tarif décrocherait de 12px par rapport au Figma). */
.vf-therapie__texte + .vf-therapie__texte{margin-top:12px}

.vf-therapie__tarif{
  margin:0;
  border-top:1px solid var(--argent);
  padding-top:13px;         /* 2517 - 2503 - 1 */
  font-family:var(--font-ui);
  font-weight:500;
  font-size:var(--fs-etiquette);
  letter-spacing:var(--ls-etiquette);
  line-height:1.2345;       /* 13.578 / 11 */
  text-transform:uppercase;
  color:var(--muted);
}

/* ─── Citation de Jung ────────────────────────────────────────────
   La maquette n'applique PAS le grain ici (contrairement au bandeau du
   hero et au bloc contact) : le modificateur éteint le ::after posé par
   l'utilitaire .fond-sombre plutôt que de dupliquer le dégradé.

   Les règles .vf-citation-sombre sont volontairement dupliquées dans
   cabinet.css (citation de Levine) : les deux feuilles sont chargées
   indépendamment l'une de l'autre et doivent rester autonomes. Quinze
   lignes en double valent mieux qu'une dépendance implicite entre deux
   sections écrites séparément. */

.vf-jung.fond-sombre--lisse::after{display:none}

/* Compound .vf-jung.vf-citation-sombre (0,2,0) et non .vf-jung seul :
   cabinet.css est chargée APRÈS therapies.css et pose min-height:374px sur
   .vf-citation-sombre (0,1,0), la hauteur de la citation de Levine. À
   spécificité égale c'est la dernière feuille qui gagne, et Jung héritait
   des 374 de Levine au lieu de ses 416. Les deux bandes n'ont PAS la même
   hauteur dans la maquette (Figma : Jung 416, Levine 374), la duplication
   annoncée dans cabinet.css n'est donc pas à valeurs identiques. */
.vf-jung.vf-citation-sombre{
  min-height:416px;
  display:grid;
  place-items:center;
  padding:80px var(--gut);
  box-sizing:border-box;
}

.vf-jung .vf-citation-sombre__bloc{
  margin:0;
  max-width:820px;
  text-align:center;
}

.vf-jung .vf-citation-sombre__texte{
  margin:0;
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100;
  font-weight:500;
  /* 40px au canevas ; le clamp évite qu'une citation de trois lignes ne
     devienne un pavé de sept sur mobile. */
  font-size:clamp(24px, 2.8vw, var(--fs-citation));
  line-height:1.35;         /* 54 / 40 */
  color:var(--blanc);
}

.vf-jung .vf-citation-sombre__auteur{
  display:block;
  margin-top:24px;          /* 3529 - 3338 - 108 - 54 (dernière ligne) ≈ 24 */
  font-family:var(--font-ui);
  font-weight:400;
  font-size:var(--fs-surtitre);
  letter-spacing:var(--ls-surtitre);
  line-height:1.2343;
  text-transform:uppercase;
  font-style:normal;        /* <cite> est italique par défaut, pas ici */
  color:var(--argent);      /* #bebebe sur le sombre ≈ 9.8:1 */
}

/* ─── Paliers ─────────────────────────────────────────────────────
   1180 : le parent abaisse --gut à 40, rien à faire de plus, les cartes
   se resserrent d'elles-mêmes.
   1024 : deux colonnes de 628 ne tiennent plus, on passe à une.
   768  : cartes moins rembourrées, titres réduits. */

@media (max-width:1024px){
  .vf-therapies{padding-top:88px}
  .vf-therapies__grille{
    grid-template-columns:minmax(0, 1fr);
    row-gap:32px;
    margin-top:48px;
    padding-bottom:80px;
  }
  /* Même compound qu'au-dessus : body.vf h2 de base.css reste prioritaire
     sur une classe seule, y compris dans un media query. */
  .vf-therapies .vf-therapies__titre{margin-top:18px}
  /* Même compound qu'en desktop, cabinet.css redéfinit aussi ces paliers. */
  .vf-jung.vf-citation-sombre{min-height:340px;padding:64px var(--gut)}
}

@media (max-width:768px){
  .vf-therapies{padding-top:72px}
  .vf-therapie{padding:28px 24px;gap:16px}
  .vf-therapie__titre{font-size:22px;line-height:1.25}
  .vf-therapie__accroche{font-size:17px;line-height:1.45}
  /* Sous 768 le surtitre passe sur deux lignes : l'interligne Figma de
     14.2px (calé sur une ligne unique au canevas 1440) collerait alors
     les deux lignes l'une contre l'autre. On rend la main au navigateur
     dès que la contrainte de position du h2 ne s'applique plus. */
  .vf-therapies__surtitre{line-height:1.5}
  .vf-jung.vf-citation-sombre{min-height:0;padding:56px var(--gut)}
  .vf-jung .vf-citation-sombre__auteur{margin-top:20px}
}