/* =============================================================================
   vf-contact.css — LE BLOC « PARLONS DE VOTRE PROJET », avec son specialiste.
   =============================================================================
   Source : `style.css` l. 1754-1769 (+ l. 1771, dans un `@media (max-width:980px)`),
   sous le titre de la fiche VOYAGE — a 900 lignes de la fiche animal qui l'emploie.
   Chercher « autour » de sa section ne l'aurait jamais trouve.

   ⚠️⚠️ POURQUOI UN FICHIER DE BLOC ET NON UNE PAGE — il a DEUX consommateurs (fiche
   espece et fiche destination) et en aura un troisieme (fiche voyage, d'ou il vient).
   Il a vecu jusqu'au 2026-10-07 dans `css/pages/animal.css`, et la fiche destination
   l'emettait donc SANS AUCUN STYLE : `animal.css` n'y est pas charge.
   ⚠️⚠️ ET AUCUN DES DEUX SCRIPTS NE POUVAIT LE VOIR. Le geste 1 demande « cette classe
   a-t-elle une regle ? » — oui, dans le fichier d'une AUTRE page. Il ne demande pas
   « sur la page qui l'emploie ? ». C'est la regle d'or du guide de decoupe (« jamais de
   styles de bloc dans un fichier page-specific ») prise en flagrant delit, et c'est la
   cinquieme famille de defaut muet relevee sur ce projet.
   ⇒ Le test qui l'attrape tient en une phrase : « si je duplique ce bloc sur une page
     vierge, s'affiche-t-il correctement ? »
   ============================================================================= */

.vf-contact{ background:var(--beige-footer); }   /* dernière section avant le footer (règle transition) */
.vf-contact__grid{ display:grid; grid-template-columns:.4fr 1fr; gap:clamp(28px,4vw,72px); align-items:center; }
.vf-contact__spec{ text-align:center; }
.vf-contact__pic{ width:min(220px,60%); aspect-ratio:1; border-radius:50%; margin:0 auto 18px;
  background:#241d12 center/cover no-repeat; border:4px solid var(--jaune); }
.vf-contact__nom{ font-size:clamp(26px,2.4vw,36px); color:var(--noir); }
.vf-contact__role{ font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--noir-50); margin-top:4px; }
/* DEUX CONSEILLERS (D176, demande de la cliente du 2026-11-10) — l'un sous l'autre, photo
   réduite. Écart VOULU avec la maquette, qui n'en prévoit qu'un : la règle ne s'applique qu'au
   conteneur `.vf-contact__duo`, posé par `partials/conseillers.php` quand ils sont deux. Avec
   un seul, le balisage et le rendu sont ceux d'avant. */
.vf-contact__duo{ display:flex; flex-direction:column; gap:clamp(18px,2vw,28px); }
.vf-contact__duo .vf-contact__pic{ width:min(140px,45%); margin-bottom:12px; }
.vf-contact__duo .vf-contact__nom{ font-size:clamp(22px,1.9vw,28px); }
.vf-contact__txt .eyebrow{ color:var(--jaune-d); }
.vf-contact__titre{ font-size:clamp(32px,3.4vw,52px); color:var(--noir); margin:10px 0 18px; }
.vf-contact__txt > p{ font-size:var(--fs-body); line-height:1.7; color:var(--noir-50); }
.vf-contact__txt strong{ color:var(--noir); }
.vf-contact__actions{ display:flex; flex-wrap:wrap; gap:16px; margin:26px 0 14px; }
.vf-contact__ghost{ color:var(--noir); }
.vf-contact__dispo{ font-size:var(--fs-label); color:var(--noir-50); }

/* ⚠️⚠️ CETTE REGLE A MANQUE, ET LA BORNE S'ARRETAIT UNE LIGNE AVANT ELLE. `style.css`
   l. 1771, dans un `@media (max-width:980px)` ouvert a la l. 1770 ; l'extraction allait
   de 1754 a 1769. Sans elle, `.vf-contact__grid` garde ses `.4fr 1fr` sur telephone : la
   photo du specialiste reste une colonne etroite a gauche et le texte se comprime a
   droite. Defaut trouve par Alexandre sur son telephone, pas par un script.
   ⚠️ REGLE MIXTE a la source : la maquette la declare pour `.vf-duo`, `.vf-sejour__grid`,
   `.vf-esprit__grid` ET `.vf-contact__grid` d'un seul tenant — les trois premieres
   appartiennent a la fiche voyage, non decoupee. Seule la notre est reprise ; les autres
   reviendront AVEC elle.
   ⚠️ 980 PX ET NON 1024 : c'est le point de rupture de la source. En choisir un autre
   « pour faire comme les voisins » est exactement l'erreur payee sur le ruban de statut
   le 2026-10-07. */
@media (max-width:980px){
  .vf-contact__grid{ grid-template-columns:1fr; }
  /* Sur une seule colonne, deux grands portraits repousseraient le texte d'un écran entier. */
  .vf-contact__duo .vf-contact__pic{ width:min(120px,40%); }
}

/* ⚠️ `min-width:0` — sans lui, une grille CSS donne a ses enfants une largeur minimale
   egale a leur contenu, et un mot long (une URL, un nom d'espece) elargit la colonne au
   lieu de s'y replier. Regle MIXTE elle aussi (`mobile.css`), partagee avec trois grilles
   de la fiche voyage ; seule la part qui nous concerne est reprise. */
@media (max-width:1024px){
  .vf-contact__grid > *{ min-width:0; }
  /* ⚠️ Revision de Fix du 22/07, capture a l'appui : la rangee de boutons se CENTRE (c'est
     le groupe qui se centre, les boutons gardent leur alignement relatif), et `flex-wrap`
     les fait passer l'un sous l'autre a 375 px plutot que d'etre rognes. Regle MIXTE a six
     selecteurs, dont cinq appartiennent a des pages non decoupees. */
  .vf-contact__actions{ justify-content:center; flex-wrap:wrap; }
}