/* ═══════════════════════════════════════════════════════════════
   SECTION ARTICLES (Journal) - nœud Figma 10:843
   Canevas 1440, section y=4820 h=909, contenu à x=72 (gouttière 72).

   Grille de 9 cartes sur 3 colonnes : titre en Brygada 1918 (la seule
   section du site qui utilise cette fonte) et un libellé « Lire la
   suite ». Ni vignette ni extrait : la maquette validée n'en montre pas.
   ═══════════════════════════════════════════════════════════════ */

.vf-articles{
  /* 110 en haut (4930 − 4820 = début du surtitre), 120 en bas : le Figma
     donne 909 − 5605 + 4820 = 124, arrondi à 120 car l'ombre des cartes
     de la dernière rangée déborde et comble visuellement l'écart. */
  padding:110px 0 120px;
}

/* ─── Titre de section masqué ───
   La maquette n'affiche pas de titre de niveau 2 pour le Journal (le bloc
   est annoncé par le seul surtitre « 03 - Journal », qui reste un simple
   paragraphe décoratif). La spec impose pourtant une hiérarchie h2 par
   section et h3 par carte : le h2 existe donc dans le DOM et c'est ici
   qu'on le retire du rendu, sans le retirer de l'arbre d'accessibilité.

   Technique du clip et non display:none / visibility:hidden, qui
   supprimeraient l'élément de cet arbre et rendraient le h2 inutile.
   Le triplet clip + clip-path est volontaire : clip est déprécié mais
   reste le seul reconnu par quelques anciens moteurs, clip-path prend le
   relais partout ailleurs. white-space:nowrap empêche le titre, réduit à
   1px de large, de se replier en une colonne de lettres qui rallongerait
   la page ; margin:-1px annule le pixel résiduel qui, cumulé, décalait la
   grille de l'en-tête. */
.vf-articles__titre-a11y{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ─── En-tête ───
   Surtitre à gauche, lien à droite, tous deux calés sur la même ligne de
   base. align-items:baseline plutôt que flex-start : les deux textes
   n'ont pas la même hauteur de boîte (le surtitre porte un filet de 28px
   via ::before) et un alignement en haut les décalait de 2px, visible
   dans la maquette où les deux lignes de texte sont bien alignées. */
.vf-articles__entete{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px 40px;
  flex-wrap:wrap;
}

/* Le lien « Voir tous les articles → » : même graisse et même chasse que
   le surtitre, mais en encre forte (c'est un lien, il doit primer) et
   souligné par un filet argent posé à 4px sous la ligne de base.

   PIÈGE (même mécanisme que pour .vf-article__titre plus bas) : base.css
   pose « body.vf a{color:inherit} », de spécificité (0,1,1). La classe
   seule (0,1,0) perdait, le lien héritait donc de la couleur de corps de
   la section (--texte #3d4247) et s'affichait au même gris que le
   surtitre voisin, alors que le Figma le veut nettement plus foncé
   (--ink-fort #0e0f11). On qualifie par la section parente pour remonter
   à (0,2,0), sans !important ni retouche de base.css. */
.vf-articles .vf-articles__tous{
  font-family:var(--font-ui);
  font-weight:500;
  font-size:var(--fs-surtitre);
  letter-spacing:var(--ls-surtitre);
  /* line-height explicite (valeur Figma du TEXT 10:850, 11.5/14.195) : sans
     lui le lien herite du 1.75 de base.css, sa boite passe de 19 a 25.13px
     et, comme c'est le plus haut des deux enfants du flex .vf-articles__entete,
     c'est LUI qui dicte la hauteur de l'en-tete. La grille, posee 48px plus
     bas, demarrait alors a 183 au lieu des 177 du Figma (10:853 y=4997). */
  line-height:14.195px;
  text-transform:uppercase;
  color:var(--ink-fort);
  text-decoration:none;
  border-bottom:1px solid var(--argent-2);
  padding-bottom:4px;
  transition:border-color .25s var(--ease), opacity .25s var(--ease);
}
/* On qualifie aussi l'état de survol par la section : ces deux règles ne
   posent que border-color et opacity, que base.css ne dispute pas, mais
   garder le même préfixe que la règle de repos évite qu'une future
   déclaration de couleur ajoutée ici retombe dans le piège ci-dessus. */
.vf-articles .vf-articles__tous:hover,
.vf-articles .vf-articles__tous:focus-visible{
  border-bottom-color:var(--ink-fort);
  opacity:.75;
}

/* ─── Grille ───
   3 colonnes de 405.3 avec une gouttière de 40 (relevé : cartes à x=72,
   517.3 et 963 → 517.3 − 72 − 405.3 = 40).

   row-gap 82 et non 42 : le token --gap-article-v décrit l'espacement des
   FRAMES Figma (déclarées 184/170/170 de haut alors que la carte n'en fait
   que 144.5), pas l'espace visible entre deux cartes. Mesuré au pixel sur
   la capture de référence : cartes à y 178→321, 404→547, 616→759, soit
   83px de blanc entre deux rangées. On pose 82 (l'ombre portée mange le
   dernier pixel). Écart assumé avec la lettre de la spec, conforme au rendu.

   minmax(0,1fr) et non 1fr : sans le minimum à 0, un titre long sans
   espace sécable impose sa largeur à la colonne et fait déborder la page. */
.vf-articles__grille{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:var(--gap-article);
  row-gap:82px;
  margin-top:48px;  /* 4997 − 4949 (bas du surtitre) */
}

/* ─── Carte ───
   La carte entière est le lien. min-height 145 (relevé Figma) pour que les
   cartes à titre court gardent la même hauteur que les autres ; le titre
   étant plafonné à deux lignes, toutes les cartes d'une rangée finissent
   à la même hauteur sans avoir besoin de align-items:stretch. */
.vf-article{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:145px;
  box-sizing:border-box;
  padding:27px 26px;
  background:var(--blanc);
  border-top:1px solid var(--argent-2);
  box-shadow:var(--ombre-carte);
  text-decoration:none;
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.vf-article:hover,
.vf-article:focus-visible{
  transform:translateY(-2px);
  border-top-color:var(--ink-fort);
}

/* Brygada 1918 : réservée aux titres d'articles dans toute la maquette.
   line-clamp à 2 lignes, comme dans le Figma où aucun titre ne dépasse
   57.5px de haut (2 × 28.8). Sans le plafond, un titre de 3 lignes
   décalerait le « Lire la suite » et casserait l'alignement de la rangée.

   PIÈGE : base.css pose « body.vf h3{font-family:var(--font-display)} ».
   Une simple classe (0,1,0) perd contre ce sélecteur (0,1,1) et le titre
   repassait en Instrument Sans. On qualifie donc par la carte parente pour
   remonter à (0,2,0). Même raison pour font-variation-settings : base.css
   fixe l'axe wdth d'Instrument Sans sur tous les h1-h4, or Brygada 1918
   n'a pas cet axe - on remet la valeur par défaut plutôt que de lui
   transmettre un axe qu'elle ne connaît pas. */
.vf-article .vf-article__titre{
  margin:0;
  font-family:var(--font-article);
  font-variation-settings:normal;
  font-stretch:normal;
  font-weight:600;
  font-size:var(--fs-article-titre);
  line-height:28.8px;
  color:var(--ink-fort);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* margin-top:auto colle le libellé au bas de la carte : c'est lui qui
   tient la hauteur minimale quand le titre ne fait qu'une ligne. */
.vf-article__lire{
  margin-top:auto;
  font-family:var(--font-ui);
  font-weight:500;
  font-size:var(--fs-etiquette);
  /* line-height explicite (valeur Figma du TEXT 10:856, 11/13.578) : hérité,
     le 1.75 de base.css donnait 19.25px au lieu de 13.578 et gonflait chaque
     carte de 5.3px (149.8 au lieu des 144.5 du FRAME 10:853). La carte n'était
     alors plus tenue par min-height:145px mais par son contenu, et l'écart se
     cumulait sur chaque rangée. */
  line-height:13.578px;
  letter-spacing:var(--ls-etiquette);
  text-transform:uppercase;
  color:var(--ink-fort);
}

/* ─── Pourquoi AUCUN masquage de carte ici ───
   Tentation écartée en recette (09/09) : la maquette montre 3 rangées
   PLEINES de 3 cartes, alors que la base ne contient que 4 articles publiés
   en français (les 4 autres publiés sont les traductions anglaises, 14
   restent en brouillon). La grille rend donc une rangée complète puis une
   carte seule, et il était tentant de masquer cette carte orpheline par des
   sélecteurs de type
   « .vf-article:first-child:nth-last-child(3n+1) ~ .vf-article:nth-last-child(1) »
   afin de retrouver le rythme régulier du Figma.

   C'est INTERDIT et la règle a été retirée, pour trois raisons :
   1. cela rend invisible sur la page d'accueil un article réellement publié
      (« La psychothérapie : de la survivance à la vie ») : du contenu que la
      cliente a mis en ligne disparaît sans qu'elle en soit informée ;
   2. le comportement changerait silencieusement avec le nombre d'articles
      publiés ET avec la largeur d'écran (3 / 2 / 1 colonnes), ce qui donne un
      affichage imprévisible et impossible à expliquer à la cliente ;
   3. la spec ne demande rien de tel : elle impose seulement une requête de 9
      articles et une grille de 3 colonnes. Et les 3 rangées du Figma sont un
      remplissage : l'arbre (nœuds 10:853 à 10:890) ne contient que 3 titres
      réels répétés trois fois. La maquette ne prouve donc pas un besoin de
      rangées pleines, elle montre un jeu de données factice.

   Conséquence assumée : tant que le nombre d'articles publiés n'est pas un
   multiple du nombre de colonnes, la dernière rangée est partielle. C'est le
   comportement normal d'une grille alimentée par le contenu, et il se
   résorbera de lui-même dès la publication des brouillons en attente. */

/* ═══ Paliers responsive ═══ */

/* Sous 1024 : 2 colonnes. La 3e colonne à 405px ne tient plus sous la
   gouttière réduite du parent (40px) sans écraser les titres. */
@media (max-width:1024px){
  .vf-articles{padding:88px 0 96px}
  .vf-articles__grille{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    row-gap:56px;
    margin-top:40px;
  }
}

/* Sous 640 : une colonne, et l'en-tête s'empile (le lien passe sous le
   surtitre plutôt que de se serrer contre lui). */
@media (max-width:640px){
  .vf-articles{padding:72px 0 80px}
  .vf-articles__entete{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .vf-articles__grille{
    grid-template-columns:minmax(0, 1fr);
    row-gap:32px;
    margin-top:32px;
  }
  .vf-article{padding:24px 22px;min-height:0}

  /* PLAFOND PORTÉ À 3 LIGNES sous 640 (relevé par le vérificateur).
     Le clamp à 2 lignes est calibré sur la carte de 405px du Figma, où
     aucun titre ne dépasse 57.5px de haut. Sur les titres RÉELS du site,
     la colonne se resserre bien plus vite que le texte ne raccourcit :
     « La psychothérapie : de la survivance à la vie » et « Faut-il aller
     mal pour consulter un psychologue ? » passent à 3 lignes dès que la
     carte descend sous ~300px de large, et la 3e ligne était coupée en
     plein milieu d'un mot, sans ellipse lisible - le titre devenait
     amputé plutôt que tronqué proprement.
     À une seule colonne le risque de désalignement qui justifiait le
     plafond n'existe plus (il n'y a plus de rangée à aligner) : on peut
     donc laisser respirer d'une ligne. On garde malgré tout un plafond
     et non `none`, pour qu'un titre anormalement long ne fasse pas
     dérailler la hauteur de la carte. */
  .vf-article .vf-article__titre{
    -webkit-line-clamp:3;
    line-clamp:3;
  }
}

/* ─── Marbre : zone HAUTE, fenêtre décalée, veine à bord perdu ───
   Retour d'Emmanuel du 09/09 : ne pas répéter le cadrage du cabinet, et
   aucune veine ne doit s'arrêter dans le cadre. auto 232% ne montre que
   les 560 premiers pixels de l'image (avant la mort de la grande veine,
   y≈700) ; position 20% cadre x≈110..1000 : la grande veine entre par
   le haut vers le centre et sort par la DROITE, à mi-hauteur des
   cartes. Le hero montre la même zone mais plus large (veine du coin
   en plus), le cabinet montre la zone basse en miroir. Voir tokens.css. */
.vf-articles.fond-marbre{
  background-size:auto 232%;
  background-position:20% 0%;
}