/* Vignettes style miniature YouTube — pages de questions et accueil. */
/* ============================================================
   VIGNETTES « style miniature YouTube »
   Image + dégradé sombre + 3-5 mots énormes. Une vignette = un clic.
   ============================================================ */
.vg-grille {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vg-grille > li { margin: 0; padding: 0; border: 0; }
.vg-grille > li::before { content: none; }
.vg {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; isolation: isolate;
  background: #0f2a2e; color: #fff; text-decoration: none;
  box-shadow: 0 6px 18px rgba(15, 42, 46, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.vg-img {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transition: transform .35s ease;
}
.vg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,28,31,.05) 0%, rgba(10,28,31,.55) 45%, rgba(10,28,31,.92) 100%);
}
.vg-tag {
  position: absolute; top: .7rem; left: .7rem;
  background: #f4c430; color: #1a1a1a;
  font: 800 .68rem/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  padding: .38rem .55rem; border-radius: 5px;
}
.vg-mots {
  position: absolute; left: .85rem; right: .85rem; bottom: .75rem;
  font: 800 clamp(1.05rem, 2.6vw, 1.45rem)/1.08 var(--font-sans);
  letter-spacing: -.01em; text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.vg:hover, .vg:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 42, 46, .28); }
.vg:hover .vg-img, .vg:focus-visible .vg-img { transform: scale(1.06); }
.vg:focus-visible { outline: 3px solid #f4c430; outline-offset: 3px; }

/* Cellulaire : rangée qui glisse au doigt, comme YouTube */
@media (max-width: 599px) {
  .vg-grille {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: .8rem; padding-bottom: .5rem; margin-inline: -1rem; padding-inline: 1rem;
    scrollbar-width: none;
  }
  .vg-grille::-webkit-scrollbar { display: none; }
  .vg-grille > li, .vg-grille > .vg { flex: 0 0 78%; scroll-snap-align: start; }
  .vg-mots { font-size: 1.25rem; }
}
@media (min-width: 900px) {
  .vg-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
/* Dans la grille de l'index des questions, la liste garde son filtre */
.sj-liste.vg-grille > li[hidden] { display: none !important; }

.sj-lies-vg { margin-top: 3rem; }
.sj-lies-vg h2 { margin-bottom: 0; }

.sj-corps a.vg, .sj-page a.vg, a.vg:visited, .vg .vg-mots { color: #fff; text-decoration: none; }
.vg-rangee .vg-grille { margin-top: 1rem; }