/* ═══════════════════════════════════════════════════════════════
   CONTACT + FOOTER - Figma 10:807 (section 8 de FINAL-SPEC.md)

   Un seul bloc sombre de 759px : appel a l'action puis pied de page.
   Chargee sur TOUTES les pages (le bloc est rendu par footer.php), d'ou
   sa place dans assets/css/ et non dans assets/css/sections/.

   Reperes verticaux releves dans le Figma (origine section y=5729) :
     110  padding haut          → surtitre     (y 5847.5 = 5839 + 8.5)
      +31 surtitre → h2         (y 5883.5)
      +27 h2 → bouton           (y 5970.9, h 47)
      +38 bouton → adresse      (y 6055.9)
     +188 fin de l'adresse → cadre du footer (78 de vide + 110)
      +56 cadre → rangee logo/nav/adresse  (y 6316.3)
      +40 rangee → filet legal  (y 6408.9)
   ═══════════════════════════════════════════════════════════════ */

.vf-contact{
  /* Le texte d'adresse de la maquette est un blanc casse a 72% : absent
     des tokens (qui ne portent que des couleurs opaques), donc declare
     ici en propriete locale plutot qu'en hex en dur dans les regles. */
  --vf-contact-attenue:rgba(245,244,241,.72);

  padding:110px 0 0;
  /* La section precedente (articles, marbre) et celle-ci se touchent :
     un enfant qui deborderait lateralement casserait le raccord et
     ferait grandir scrollWidth. overflow-x:clip plutot que hidden : il
     ne cree pas de contexte de defilement et n'empeche donc pas le
     position:sticky d'un eventuel parent. */
  overflow-x:clip;
}

/* ── Bloc d'appel a l'action ─────────────────────────────────── */

.vf-contact__appel{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* .surtitre est un flex (filet de 28px + libelle) aligne a gauche par
   defaut : ici il est centre dans la colonne, on ne change donc que
   l'alignement interne, pas la composition. */
.vf-contact__surtitre{justify-content:center}

body.vf .vf-contact__titre{
  /* Instrument Sans 500 44/53.68. En clamp sous 1180 : a 390px le titre
     tenait sur deux lignes trop serrees, la borne basse a 30px le garde
     sur deux lignes lisibles.

     PIEGE (le meme que sur le bouton) : base.css pose
     « body.vf h2{margin-top:0} », plus specifique qu'une classe seule.
     Sans « body.vf » devant, la marge haute etait ecrasee et le titre
     collait au surtitre. */
  margin:31px 0 0;
  font-weight:500;
  font-size:clamp(30px, 3.1vw, var(--fs-h2-contact));
  line-height:1.22;
  color:var(--page);
}

/* 27 et non les 20 de la spec : dans le Figma le cadre du h2 fait 68 de
   haut pour un texte de 53.7 (7.15 de fond perdu haut et bas). Le CSS ne
   reproduit pas ce fond perdu, il faut donc le rendre a la marge pour que
   le bouton retombe a sa cote reelle (241.9 depuis le haut de section). */
.vf-contact__action{margin:27px 0 0}

/* Le bouton inverse (fond creme, texte noir) vient de tokens.css : on ne
   fixe ici que la largeur relevee (275) et le retrait du soulignement.
   min-width plutot que width : le libelle traduit en anglais est plus
   long et ne doit pas deborder du fond.

   PIEGE : base.css pose « body.vf a{color:inherit} », plus specifique que
   le « .btn-plein--inverse{color:#000} » de tokens.css. Sans le selecteur
   qualifie ci-dessous, le libelle heritait du creme de la section sombre
   et devenait invisible sur le fond creme du bouton. */
body.vf .vf-contact__bouton{
  min-width:275px;
  justify-content:center;
  padding:0 24px;
  color:#000;
}
/* L'icone WhatsApp est noire sur le bouton inverse (currentColor) : la
   maquette la montre a 85% d'opacite, valeur deja posee par le token. */

/* Canal et numero, sous le bouton (10/09). Meme typographie que
   l'adresse plus bas, pour que les deux lignes de coordonnees forment un
   ensemble et non deux blocs concurrents. Le libelle est attenue, le
   numero en pleine clarte : c'est lui que le visiteur cherche. */
.vf-contact__canal{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:6px 12px;
  margin:22px 0 0;
  font-family:var(--font-ui);
  font-size:var(--fs-mention);
  line-height:1.4;
}
.vf-contact__canal-libelle{color:var(--vf-contact-attenue)}

/* body.vf : base.css pose « body.vf a{color:inherit} », qui gagnerait sur
   un simple .vf-contact__tel et laisserait le numero attenue comme le
   reste du bloc. Meme piege que le bouton juste au-dessus. */
body.vf .vf-contact__tel{
  color:var(--page);
  font-weight:500;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;      /* un numero coupe en deux lignes est illisible */
}
body.vf .vf-contact__tel:hover,
body.vf .vf-contact__tel:focus-visible{text-decoration:underline;text-underline-offset:3px}

.vf-contact__adresse{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:18px;
  /* 38px quand cette ligne suivait le bouton ; le canal s'intercale
     desormais entre les deux, on resserre pour ne pas etirer le bloc. */
  margin:22px 0 0;
  font-family:var(--font-ui);
  font-weight:400;
  font-size:var(--fs-mention);
  line-height:1.235;
  color:var(--vf-contact-attenue);
}

.vf-contact__sep{
  width:26px;
  height:1px;
  background:var(--argent-2);
  flex:0 0 auto;
}

/* Meme piege de specificite que sur le bouton et le h2 : base.css pose
   « body.vf a{color:inherit} » (0,1,2). Sans body.vf devant, ces trois
   liens heritaient de la couleur de leur parent au lieu de la leur. */
body.vf .vf-contact__maps{
  color:var(--page);
  text-decoration:none;
  border-bottom:1px solid var(--argent-2);
  padding-bottom:3px;
  transition:border-color .25s var(--ease);
}
body.vf .vf-contact__maps:hover,
body.vf .vf-contact__maps:focus-visible{border-bottom-color:var(--page)}

/* ── Pied de page ────────────────────────────────────────────── */

.vf-footer{
  /* Le bloc contact du Figma (div 10:829) mesure 311.3 de haut alors que
     sa derniere ligne de texte s'arrete a 78 du bas : ce vide fait partie
     de la respiration voulue. 78 + les 110 qui separent le bloc du cadre
     du footer = 188. Puis 56 de padding interne avant la rangee
     logo/nav/adresse (Figma 6260.3 puis 6316.3). */
  margin-top:184px;
  padding-top:56px;
}

/* Grille auto | 1fr | auto : la nav est centree dans l'espace RESTANT
   entre le logo et l'adresse, pas dans la page. Dans le Figma son centre
   tombe a 735.95 alors que le centre du contenu est a 720 : c'est bien
   la colonne souple qui la centre, et non un centrage absolu. */
.vf-footer__rangee{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:start;
  gap:32px;
}

/* Enveloppe aria-hidden du logo (voir le commentaire de
   parts/section-contact.php) : elle devient l'element de grille a la place
   de l'<img>. display:block la sort du contexte en ligne, sinon la
   line-height du parent ajoutait ~5px sous le logo et decalait l'alignement
   haut de la rangee ; width:220px lui donne la largeur que portait l'image,
   pour que justify-items:center (palier 1024) la centre au bon gabarit. */
.vf-footer__logo-hote{
  display:block;
  width:220px;
}

.vf-footer__logo{
  width:220px;
  height:auto;
  /* Le SVG du logo est noir : sur ce fond sombre il faut l'inverser.
     brightness(1.15) compense le gris que donne invert(1) sur un noir
     pur non absolu, l'opacite .9 evite le blanc trop dur de la maquette. */
  filter:invert(1) brightness(1.15);
  opacity:.9;
  display:block;
}

.vf-footer__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:30px;
  /* La nav fait 19px de haut dans le Figma et s'aligne sur le haut du
     logo : aucune correction verticale, align-items:start suffit. */
}

body.vf .vf-footer__lien{
  font-family:var(--font-ui);
  font-weight:400;
  font-size:var(--fs-surtitre);
  letter-spacing:var(--ls-surtitre);
  text-transform:uppercase;
  color:rgba(245,244,241,.82);
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
/* Page courante : soulignement discret (Figma, « Accueil » sur l'accueil).
   Le « body.vf » est indispensable ici aussi : la regle de base ci-dessus
   l'a acquis pour battre base.css, cet etat doit rester au-dessus d'elle. */
body.vf .vf-footer__lien.is-courant{border-bottom-color:var(--argent-2)}
body.vf .vf-footer__lien:hover,
body.vf .vf-footer__lien:focus-visible{color:var(--page);border-bottom-color:var(--argent-2)}

.vf-footer__adresse{
  margin:0;
  font-family:var(--font-ui);
  font-style:normal;   /* <address> est italique par defaut */
  font-weight:400;
  font-size:var(--fs-mention);
  line-height:22.1px;  /* releve Figma, pas un ratio */
  color:var(--gris-clair);
  /* Le Figma donne bien un alignement a GAUCHE (arbre : LEFT) : le bloc
     est cale a droite de la rangee, mais ses trois lignes restent
     ferrees a gauche, d'ou le drapeau visible sur la capture. */
  text-align:left;
  justify-self:end;
  /* 188.1px dans le Figma : a cette largeur « 1180 Uccle (Bruxelles),
     Belgique » ne tient plus et « Belgique » passe seule sur une
     troisieme ligne, exactement comme sur la capture de reference.
     A 190 le pli disparaissait : la valeur est critique, pas indicative. */
  max-width:188px;
}

/* ── Rangee legale ───────────────────────────────────────────── */

.vf-footer__legal{
  margin-top:40px;
  border-top:1px solid var(--filet-footer);
  padding:25px 0 40px;
}

.vf-footer__legal-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:30px;
}

body.vf .vf-footer__legal-nav a{
  font-family:var(--font-ui);
  font-weight:400;
  font-size:var(--fs-etiquette);
  letter-spacing:1.76px;  /* Figma : 1.76 sur 11px, plus serre que --ls-etiquette */
  text-transform:uppercase;
  color:var(--gris-clair);
  text-decoration:none;
  transition:color .25s var(--ease);
}
body.vf .vf-footer__legal-nav a:hover,
body.vf .vf-footer__legal-nav a:focus-visible{color:var(--page)}

/* ── Paliers ─────────────────────────────────────────────────── */

/* 1180 : la gouttiere du parent tombe a 40. Le grand vide de 184 entre
   l'adresse et le footer est une respiration voulue du canevas 1440 ;
   sur un ecran plus etroit il se lit comme un trou, on le resserre. */
@media (max-width:1180px){
  .vf-footer{margin-top:128px}
  .vf-footer__nav{gap:14px 22px}
  .vf-footer__rangee{gap:24px}
}

/* 1024 et non le palier burger 900 : la rangee a trois colonnes demande
   220 (logo) + ~470 (nav) + 188 (adresse) + deux gouttieres, soit environ
   1130 de contenu. Sous 1180 elle tenait encore grace au gap resserre,
   sous ~1060 « Contact » repartait seul sur une deuxieme ligne, decentre.
   On empile donc des 1024 plutot que d'accepter cette nav bancale. */
@media (max-width:1024px){
  .vf-contact{padding-top:88px}
  .vf-footer{margin-top:96px;padding-top:44px}
  .vf-footer__rangee{
    grid-template-columns:1fr;
    justify-items:center;
    gap:28px;
  }
  .vf-footer__adresse{text-align:center;justify-self:center;max-width:none}
}

/* 480 : gouttiere a 24 chez le parent. Les liens legaux, cumules, font
   plus de 300px de large meme replies : on les empile pour garantir
   scrollWidth === clientWidth a 320px. */
@media (max-width:480px){
  .vf-contact{padding-top:72px}
  .vf-contact__adresse{gap:12px}
  /* Le filet de 26px entre l'adresse et le lien Maps n'a plus de sens
     quand les deux passent l'un sous l'autre : on le masque. */
  .vf-contact__sep{display:none}
  /* body.vf obligatoire : la regle de base du bouton l'a acquis pour
     battre base.css, cette surcharge doit rester au-dessus d'elle. */
  body.vf .vf-contact__bouton{
    min-width:0;
    width:100%;
    max-width:275px;
  }
  .vf-footer{margin-top:76px}
  .vf-footer__nav{gap:18px 22px}
  .vf-footer__legal{padding:22px 0 32px}
  .vf-footer__legal-nav{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
}