/* === VIGNETTES CARRÉES (pictogrammes / stickers) ===
   Utilisation type :
   <section class="vc-grid">
     <a class="vc-card" href="..." style="--bg: url('../img/mon_picto.png')" aria-label="Automne">
       <div class="vc-media" role="img" aria-label="Aperçu : Automne"></div>
       <div class="vc-footer"><span class="vc-title">Automne</span></div>
     </a>
   </section>
   Placer ce fichier dans /assets/ et lier :
   <link rel="stylesheet" href="../assets/vignettesCarre.css">
*/

:root{
  --vc-radius: 18px;
  --vc-shadow: 0 10px 22px rgba(0,0,0,.10);
  --vc-shadow-hover: 0 16px 30px rgba(0,0,0,.14);
  --vc-border: #e6ece9;
  --vc-footer-bg: #ffffff;
  --vc-footer-text: #1f3d36; /* vert foncé lisible */
}

/* Grille responsive : cartes centrées */
.vc-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(148px, 220px));
  justify-content:center;
}

/* La carte entière est cliquable */
.vc-card{
  display:grid;
  grid-template-rows: 1fr auto; /* image + titre */
  text-decoration:none;
  border-radius:var(--vc-radius);
  overflow:hidden;
  border:2px solid var(--vc-border);
  background:var(--vc-footer-bg);
  box-shadow:var(--vc-shadow);
  transform:translateY(0);
  transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.vc-card:hover, .vc-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--vc-shadow-hover);
  border-color:#cfe1da;
  outline:none;
}

/* Zone média carrée */
.vc-media{
  aspect-ratio:1 / 1;             /* carré */
  background-image:var(--bg);
  background-size:contain;        /* pas de troncature du picto */
  background-position:center;
  background-repeat:no-repeat;
  background-color:#fff;          /* fond neutre si transparence */
}

/* Pied uniquement avec un titre court */
.vc-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  background:var(--vc-footer-bg);
}
.vc-title{
  font-weight:800;
  color:var(--vc-footer-text);
  text-align:center;
  line-height:1.1;
}

/* Variantes utiles ------------------------------------ */
/* Picto bord à bord (plein cadre) */
.vc-card.vc-fill .vc-media{ background-size:cover; }

/* Carte compacte (petits stickers) */
.vc-grid.vc-compact{ gap:12px; }
.vc-grid.vc-compact .vc-card{ border-radius:14px; }
.vc-grid.vc-compact{ grid-template-columns:repeat(auto-fit,minmax(120px, 160px)); }

/* Accent de catégorie (optionnel) */
.vc-saison .vc-title{ color:#1c7c59; }    /* exemple : saisons */
.vc-evenement .vc-title{ color:#224e96; } /* exemple : évènements */

/* Accessibilité : focus clavier visible pour les navigateurs sans :focus-visible */
.vc-card:focus{ outline: 3px solid #89c2b6; outline-offset: 2px; }