/* === VIGNETTES PORTRAIT (calendriers) — mêmes principes que vignettes.css ===
   Objectif : afficher une image ENTÈRE en format portrait (sans recadrage),
   avec le même style de carte/hover/typographies que les vignettes 16:9.

   Usage type :
   <section class="vp-grid">
     <a class="vp-card vp-ress" href="calendrier/novembre.pdf" target="_blank" style="--bg: url('../ressources/calendrier/nov.png')" aria-label="Calendrier Novembre">
       <div class="vp-media" role="img" aria-label="Aperçu Novembre"></div>
       <div class="vp-footer">
         <span class="vp-title">Novembre</span>
         <span class="vp-sub">A3 & A4 PDF</span>
       </div>
     </a>
   </section>

   Variante format A‑series (A3/A4) : ajouter .vp-a pour respecter ~1:√2
   <div class="vp-media vp-a"></div>
*/

:root{
  --vp-radius: 16px;
  --vp-shadow: 0 10px 24px rgba(0,0,0,.10);
  --vp-shadow-hover: 0 16px 36px rgba(0,0,0,.14);
  --vp-border: #e4ece7;
  --vp-footer-bg: #ffffff;
  --vp-footer-text: #215044;
  --vp-footer-sub: #3f3b37;
}

/* Grille responsive (centrée) */
.vp-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px, 300px));
  justify-content:center;
}

/* Carte cliquable */
.vp-card{
  display:grid;
  grid-template-rows: 1fr auto; /* média + footer */
  text-decoration:none;
  border-radius:var(--vp-radius);
  overflow:hidden;
  border:2px solid var(--vp-border);
  box-shadow:var(--vp-shadow);
  background:var(--vp-footer-bg);
  transform:translateY(0);
  transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.vp-card:hover, .vp-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--vp-shadow-hover);
  outline:none;
  border-color:#cfe4db;
}

/* Zone média PORTRAIT — image entière */
.vp-media{
  aspect-ratio: 3 / 4;            /* portrait standard */
  background-image: var(--bg);
  background-size: contain;        /* image entière, pas de crop */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;          /* bandes neutres si besoin */
}
/* Variante A-series (A3/A4 ~ 0.707) */
.vp-media.vp-a{ aspect-ratio: 707 / 1000; }

/* Footer (mêmes principes que vignettes.css) */
.vp-footer{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; padding:10px 12px; background:var(--vp-footer-bg); color:var(--vp-footer-text);
}
.vp-title{ font-weight:800; }
.vp-sub{ font-size:.92rem; color:var(--vp-footer-sub); opacity:.9; }

/* Accents de catégorie (optionnels) */
.vp-app .vp-title{ color:#1c7c59; }
.vp-miaam .vp-title{ color:#b9721a; }
.vp-tests .vp-title{ color:#224e96; }
.vp-blog .vp-title{ color:#7a257a; }
.vp-ress .vp-title{ color:#215044; }

/* Variante couverture plein cadre (si souhaité, recadre l'image) */
.vp-fill .vp-media{ background-size: cover; }

/* Accessibilité focus */
.vp-card:focus{ outline:3px solid #89c2b6; outline-offset:2px; }