/* =============================================================================
   vf-info.css — LA CARTE A PICTO `.vf-info` (pastille jaune, titre, texte).
   =============================================================================
   Source : `style.css` l. 1777-1789 (« infos pratiques en BLOCS a picto ») et l. 1793,
   sous le titre de la fiche VOYAGE.

   ⚠️⚠️ POURQUOI UN FICHIER DE BLOC — DEUX consommateurs : la fiche DESTINATION (ses quatre
   jalons « bien preparer son depart », `#infos-pratiques`) et la fiche VOYAGE (ses infos
   pratiques et ses conseils photo). Elle a vecu jusqu'au 2026-10-07 dans `pages/pays.css`,
   et la fiche voyage l'aurait donc emise SANS STYLE — exactement le defaut que D141 a
   corrige sur `vf-contact`. Test : « si je duplique ce bloc sur une page vierge,
   s'affiche-t-il correctement ? »
   ⚠️ Ce fichier ne porte que la BASE. Les variantes restent chez leur page :
   · `#infos-pratiques .vf-info__ico svg` (pictos au trait) — `pages/pays.css` ;
   · la grille a deux colonnes et « Lire la suite » (`.vf-infos__grid--pratiques`) et
     `.voy-conseil` — `blocs/voy-photo.css` (deux consommateurs depuis le 2026-10-07).
   ============================================================================= */

.vf-infos__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:clamp(16px,1.8vw,28px); }
.vf-info{ background:var(--blanc); border-radius:18px; padding:30px 24px 28px; text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.07);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.vf-info:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.12); }
.vf-info__ico{ width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  display:grid; place-items:center; background:var(--jaune); color:var(--noir); }
.vf-info__ico svg{ width:30px; height:30px; fill:currentColor; }
.vf-info h3{ font-family:var(--serif); font-weight:400; font-size:var(--fs-h3); color:var(--noir); margin-bottom:10px; }
.vf-info p{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); }
.vf-info strong{ color:var(--noir); }
.vf-info-col{ display:flex; flex-direction:column; gap:clamp(16px,1.8vw,28px); }

/* `style.css` n'a pas cette regle : elle vient de `mobile.css`, dans un `@media (hover:none)`.
   Au doigt, la carte ne doit pas rester soulevee apres un appui. */
@media (hover:none){
  .vf-info:hover{ transform:none; box-shadow:0 14px 40px rgba(0,0,0,.07); }
}