/* ═══════════════════════════════════════════════════════════════
   3. BANDE CITATION + PRESTATIONS - Figma 10:967
   Section sombre pleine largeur, 427.8px de haut sur le canevas 1440.

   Repères relevés dans l'arbre Figma (y absolus du canevas) :
     section .......... y=963   h=427.83   fill #0e0f10
     citation <p> ..... y=1037  w=565   Instrument Sans 600 30/39  #f4f4f2
     <cite> ........... y=1129            DM Sans 500 11/14.3 ls 2.86 #bebebe
     bloc liste ....... y=1042  x=784  w=533  filet gauche #bebebe
     items ............ x=822, pas de 27px  DM Sans 500 11.5 ls 2.53 #fff

   D'où : padding haut 1037−963 = 74 ; écart texte→auteur 1129−1115 = 14 ;
   filet à 784−72 = 712 du bord de contenu ; texte à 822−784 = 38 du filet
   (arrondi à 37 dans la spec, l'écart d'un pixel n'est pas mesurable).
   ═══════════════════════════════════════════════════════════════ */

.vf-bande{
  /* Aplat, PAS .fond-sombre. Le bandeau du hero qui précède utilise le
     dégradé radial + grain : si on posait le même dégradé ici, son centre
     retomberait en haut de CETTE section et créerait une cassure nette au
     raccord des deux blocs. Un aplat #0e0f10 se fond au contraire dans le
     bas du bandeau, qui y arrive déjà. C'est la seule section sombre du
     site sans texture, la maquette est formelle là-dessus. */
  background-color:var(--sombre);

  /* 74 en haut ; 248 en bas, dont les 100 derniers seront recouverts par
     .vf-apropos__carte (margin-top:-100px).
     ATTENTION : la spec annonce « padding:74px 0 174px » mais ce chiffre
     contredit la hauteur qu'elle donne elle-même dans la même phrase
     (427.8). Vérification faite sur les deux sources de vérité :
       - arbre Figma : section y=963 h=427.83, citation y=1037 h=106,
         donc réserve basse = 427.83 − 74 − 106 = 247.8 ;
       - capture de référence figma-bande-apropos.png (recadrée sur le haut
         de la section) : l'aplat sombre s'arrête à y=427 aux colonnes 20 et
         1420, et la carte À propos commence à y=327 en colonne 700.
     427 − 327 = 100, le chevauchement attendu. Avec 174 la bande serait
     trop courte de 74px et la carte remonterait d'autant. On retient donc
     248, qui reproduit la capture. 74 + 106 + 248 = 428. */
  padding:74px 0 248px;

  /* La carte À propos remonte par-dessus : sans contexte d'empilement
     explicite ici, l'ordre du flux suffit (la carte vient après et porte
     son propre z-index), mais on garde la section en position:relative
     pour que rien ne puisse passer DERRIÈRE l'aplat sombre par accident. */
  position:relative;
}

.vf-bande__shell{
  display:grid;
  /* Colonnes en dur plutôt qu'en 1fr : dans le Figma le filet de la liste
     tombe à x=784, soit 712 du bord de contenu, et la liste fait 533 de
     large. 712 = 632 (colonne texte) + 80 (gouttière). Les deux colonnes
     n'occupent donc que 1245 des 1296 disponibles : les 51px restants à
     droite sont VOLONTAIREMENT vides dans la maquette.
     Un `minmax(0,1fr) auto` avec justify-self:end rejetait la liste à
     x=907, soit 123px trop à droite : c'est le premier écart qu'a montré
     la comparaison avec la capture de référence.
     Le minmax(0, …) reste indispensable sur les deux colonnes : sans le
     minimum à 0, un libellé long et insécable (les prestations sont en
     capitales et très espacées) imposerait sa largeur et ferait déborder
     la page. */
  grid-template-columns:minmax(0,632px) minmax(0,533px);
  justify-content:start;
  align-items:start;
  gap:80px;
}

/* ─── Citation (colonne gauche) ─────────────────────────────── */

.vf-bande__citation{
  /* L'agent utilisateur pose 1em/40px de marge sur blockquote : sans ce
     reset, la citation ne serait plus alignée sur la gouttière. */
  margin:0;
}

.vf-bande__texte{
  margin:0;
  max-width:565px;              /* largeur du bloc de texte dans le Figma */
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-bande);    /* 30px */
  line-height:39px;             /* 1.3, relevé en absolu dans le Figma */
  color:var(--cream);           /* #f4f4f2, pas --page : nuance de la maquette */
}

.vf-bande__auteur{
  display:block;
  margin-top:14px;              /* 1129 − (1037 + 78) */
  font-family:var(--font-text); /* DM Sans ici, pas la fonte interface */
  font-weight:500;
  font-size:11px;
  line-height:14.32px;
  /* Letter-spacing en px dans le Figma (2.86 sur 11px) : le convertir en
     em donnerait une valeur différente à chaque palier de taille. */
  letter-spacing:2.86px;
  text-transform:uppercase;
  color:var(--argent);          /* #bebebe ; ratio ≈ 9,8:1 sur --sombre */
  font-style:normal;            /* <cite> est italique par défaut */
}

/* ─── Liste des prestations (colonne droite) ────────────────── */

.vf-bande__liste{
  margin:0;
  list-style:none;
  /* La largeur vient de la colonne de grille (minmax 0-533), pas d'une
     width fixe : une largeur en dur imposerait un minimum au conteneur et
     ferait déborder la page à 320-390px (piège rencontré sur le hero). */
  box-sizing:border-box;

  /* Filet vertical à gauche + 37px avant le texte. padding-right identique
     pour que les libellés longs (« Séance de respiration consciente
     connectée », plus long que dans la maquette) ne collent pas au bord. */
  border-left:1px solid var(--argent);
  padding:0 37px;

  display:flex;
  flex-direction:column;
  gap:12px;                     /* 27 de pas − 15 de hauteur de ligne */
}

.vf-bande__item{
  font-family:var(--font-text);
  font-weight:500;
  font-size:var(--fs-surtitre); /* 11.5px */
  line-height:14.97px;
  letter-spacing:var(--ls-surtitre); /* 2.53px, valeur Figma en px */
  text-transform:uppercase;
  color:var(--blanc);           /* ratio ≈ 19:1 sur --sombre */
}

/* ═══ Responsive ═══════════════════════════════════════════════
   La maquette n'existe qu'en 1440 : les paliers ci-dessous suivent ceux
   du parent (1180, 1024, 768, 480) pour que toutes les sections cassent
   au même endroit. */

/* Sous 1180 le gap de 80 est trop large une fois la gouttière passée à
   40 : la citation se compresse avant la liste (colonne `auto`). */
@media (max-width:1180px){
  /* Sous 1180 la gouttière du parent tombe à 40 : le contenu utile n'est
     plus assez large pour 632+80+533. On garde le rapport des colonnes
     (632/533) en fr pour que la composition reste reconnaissable. */
  .vf-bande__shell{
    grid-template-columns:minmax(0,632fr) minmax(0,533fr);
    gap:48px;
  }
  .vf-bande{padding:64px 0 216px}
}

/* Sous 1024, la liste garde son filet mais rétrécit : les libellés longs
   passent sur deux lignes plutôt que d'écraser la citation. */
@media (max-width:1024px){
  /* Les colonnes fixes ne tiennent plus (632+80+533 = 1245 > contenu) :
     on repasse en proportionnel, la liste garde son filet et sa place à
     droite mais rétrécit avec la fenêtre. */
  .vf-bande__shell{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
  .vf-bande__texte{font-size:26px;line-height:34px}
}

/* Sous 768 : une seule colonne. Le filet vertical n'a plus de sens en
   pleine largeur, il devient un filet horizontal de séparation.
   Le padding bas retombe à une valeur normale : c'est le palier où la
   carte À propos abandonne son margin-top:-100px (spec § 4). Sans cette
   remise à plat, la réserve de 190px n'est plus recouverte par rien et
   laisse un grand aplat noir vide sous les prestations. */
@media (max-width:768px){
  .vf-bande{padding:56px 0 64px}
  .vf-bande__shell{
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }
  .vf-bande__liste{
    border-left:0;
    border-top:1px solid var(--argent);
    padding:24px 0 0;
  }
  .vf-bande__texte{font-size:24px;line-height:32px}
}

/* Sous 480 la citation doit rester lisible sans casser tous les deux mots :
   on descend d'un cran et on resserre l'interligne. */
@media (max-width:480px){
  .vf-bande{padding:48px 0 56px}
  .vf-bande__texte{font-size:22px;line-height:30px}
}