/* === VIGNETTES UNIVERSELLES (cartes cliquables 16:9) ===
   Utilisation :
   <section class="vk-grid">
     <a class="vk-card" href="..." style="--bg: url('../img/mon_image.png')" aria-label="Titre de la vignette">
       <div class="vk-media" role="img" aria-label="Aperçu : Titre de la vignette"></div>
       <div class="vk-footer">
         <span class="vk-title">Titre court</span>
         <span class="vk-sub">Texte court</span>
       </div>
     </a>
   </section>
*/
:root{
  --vk-radius: 16px;
  --vk-shadow: 0 10px 24px rgba(0,0,0,.10);
  --vk-shadow-hover: 0 16px 36px rgba(0,0,0,.14);
  --vk-border: #e4ece7;
  --vk-footer-bg: #ffffff;
  --vk-footer-text: #215044;
  --vk-footer-sub: #3f3b37;
}

/* responsive grid */
.vk-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
  justify-content: center;
}


/* whole card is the link */
.vk-card{
  display: grid;
  grid-template-rows: 1fr auto;
  aspect-ratio: auto; /* the media controls the ratio */
  text-decoration: none;
  border-radius: var(--vk-radius);
  overflow: hidden;
  border: 2px solid var(--vk-border);
  box-shadow: var(--vk-shadow);
  background: var(--vk-footer-bg);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.vk-card:hover, .vk-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: var(--vk-shadow-hover);
  outline: none;
  border-color: #cfe4db;
}

/* media area with 16:9 */
.vk-media{
  aspect-ratio: 16 / 9;
  background-image: var(--bg);
  background-size: contain;          /* plus de troncature */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;            /* bandes neutres si besoin */
}


/* footer */
.vk-footer{
  display: block;           /* plus de flex : le titre et le sous-titre se placent en colonne */
  padding: 10px 14px;
  overflow: hidden;         /* protège le rayon droit de la carte */
  box-sizing: border-box;   /* calcule bien le padding */
}

.vk-title{
  font-weight: 800;
  display: block;          /* toujours sur sa propre ligne */
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vk-sub{
  font-size: .92rem;
  color: var(--vk-footer-sub);
  opacity: .9;
  display: block;          /* toujours sur une nouvelle ligne */
  width: 100%;
  white-space: nowrap;     /* une seule ligne */
  overflow: hidden;
  text-overflow: ellipsis;
}


/* optional color accents per category (add class on .vk-card) */
.vk-app .vk-title{ color:#1c7c59; }      /* Applications (vert Taokini) */
.vk-miaam .vk-title{ color:#b9721a; }    /* Accent Miaam cuivre */
.vk-tests .vk-title{ color:#224e96; }    /* Tests & avis (bleu) */
.vk-blog .vk-title{ color:#7a257a; }     /* Blog (prune) */
.vk-ress .vk-title{ color:#215044; }     /* Ressources Taokini */

/* --- Fix: éviter la coupure du sous-titre dans le footer --- */


.vk-footer .vk-title{
  font-weight: 800;
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vk-footer .vk-sub{
  font-size: .92rem;
  color: var(--vk-footer-sub);
  opacity: .9;
  width: 100%;
  display: block;
  white-space: nowrap;       /* une seule ligne */
  overflow: hidden;
  text-overflow: ellipsis;
}