/* =============================================================================
   pg-dest.css — grille de destinations en pastilles rondes
   =============================================================================
   Repris de la maquette figee : style.css l. 1845-1853, plus la regle tactile de
   mobile.css l. 809. Les commentaires d'origine sont conserves.

   ⚠️ TOUT le CSS de ce type de bloc vit ici — y compris ses @media. Rien dans
   le CSS d'une page : un bloc duplique vers une page vierge doit rester correct.

   ⚠️ La grille est en `auto-fit, minmax(150px, 1fr)` : elle ne suppose JAMAIS six
   elements. Retirer ou ajouter une destination au backoffice se replace tout seul,
   sans valeur de coupure ecrite en dur.
   ============================================================================= */

/* grille des 6 premières destinations */
.pg-dest{ background:var(--blanc); }
.pg-dest__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:clamp(14px,1.6vw,24px); }
.pg-dest__item{ text-align:center; font-size:var(--fs-small); font-weight:600; color:var(--noir);
  transition:transform .3s var(--ease); }
.pg-dest__item:hover{ transform:translateY(-6px); }
.pg-dest__pic{ display:block; aspect-ratio:1; border-radius:50%; margin-bottom:12px;
  background:#241d12 center/cover no-repeat; border:3px solid var(--jaune);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.35); }

/* Ecran tactile : le survol ne doit pas rester « colle » apres un tap.
   @media (hover:none) ne matche jamais une souris -> le bureau reste intact. */
@media (hover:none){
  .pg-dest__item:hover{ transform:none; }
}