/* ========================================
   VIGNETTES / CARDS — version clean (visuel inchangé)
   Dépend de :root (—bg, —bg-soft, —text, —text-soft, —primary,
   —border, —shadow, —shadow-sm, —shadow-xs, —radius, —radius-sm, —gap)
   ======================================== */

/* ------- Variables globales spécifiques ------- */
:root{
  --thumb-ratio: 2 / 3;  /* ex. 3/4, 16/9, 4/5… */
  --fav-hit: 6px;        /* 36px + 2*hit = cible de clic */
}

/* ------- Grilles ------- */
.vignette-grid{
  display:grid;
  gap: var(--gap, clamp(12px, 2vw, 24px));
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width:640px){  .vignette-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:768px){  .vignette-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1024px){ .vignette-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width:1280px){ .vignette-grid{ grid-template-columns: repeat(5, 1fr); } }

/* Variante articles (1 → 4 colonnes) */
.vignette-grid.articles{ grid-template-columns: 1fr; }
@media (min-width:640px){  .vignette-grid.articles{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:768px){  .vignette-grid.articles{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1024px){ .vignette-grid.articles{ grid-template-columns: repeat(4, 1fr); } }

/* ------- Carte ------- */
.vignette-card{
  position:relative;
  display:flex; flex-direction:column;
  background: var(--bg, #fff);
  color: var(--text, #1f2937);
  border:1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-xs, 0 2px 6px rgba(0,0,0,.05));
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  z-index:0;
}
.vignette-card:hover{
  /* fallback d’abord (vieux moteurs) */
  border-color: #bfd2fe;
  /* version moderne ensuite */
  border-color: color-mix(in srgb, var(--primary, #2563eb) 40%, var(--border, #e5e7eb) 60%);
  transform: translateY(-2px);
  box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.08));
  z-index:1;
}

/* Lien interne (zone cliquable) */
.vignette-link{
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  height:100%;
}

/* ------- Zone image (full-bleed, ratio fixe) ------- */
.vignette-thumb{
  position: relative;
  aspect-ratio: var(--thumb-ratio);
  border-radius: var(--radius-sm, 12px);
  overflow: hidden;
  background: transparent !important;
  /* ✅ pas de padding ici : le ratio ne doit pas être réduit */
  padding: 0 !important;
}

/* Wrapper interne : marge visuelle contrôlée ici */
.vignette-thumb-inner{
  position: absolute;
  inset: 0;
  padding: 10px !important;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm, 12px);
  background: transparent !important;
}

/* L’image remplit totalement la zone (cover) */
.vignette-thumb img{
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
  border-radius: var(--radius-sm, 12px);
}

/* Supprime tout pseudo-élément résiduel */
.vignette-thumb::before,
.vignette-thumb::after{ content: none !important; }

/* Badges posés SUR l’image (mêmes offsets) */
.vg-badges{
  position:absolute; top:15px; left:15px; right:15px;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  pointer-events:none; z-index:6; /* au-dessus du cœur */
}
.vignette-thumb .vg-badges{ top:10px; left:10px; right:10px; }

/* ------- Badges ------- */
.vg-badge{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 8px; border-radius: var(--radius-sm, 10px);
  background: color-mix(in srgb, var(--bg, #fff) 92%, transparent);
  color: var(--text, #1f2937);
  border: 1px solid var(--border, #e5e7eb);
  box-shadow: var(--shadow-xs, 0 2px 6px rgba(0,0,0,.08));
  font-size:.78rem; font-weight:700; line-height:1.1;
  backdrop-filter: blur(4px);
}
.vg-badge.is-new{
  background:#16a34a; color:#fff;
  border-color: color-mix(in srgb, #16a34a 60%, #0b1220 40%);
  box-shadow: 0 6px 18px rgba(22,163,74,.25);
}
.vg-badge.is-coming{
  background:#fee2e2; color:#b91c1c;
  border-color:#fecaca;
  box-shadow: 0 6px 18px rgba(185,28,28,.12);
}

/* ------- Titre & Tags ------- */
.vignette-title{
  margin: 1rem;
  font-size: 1rem;
  line-height:1.3; font-weight:800;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  /* Fallback clamp FF : ~2 lignes */
  max-height: calc(1.3em * 2 + 2px);
}
.vignette-tags{
  display:flex; flex-wrap:wrap; gap:6px;
  margin: .2rem 1rem 1rem;
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; font-size:.78rem; font-weight:700;
  background: var(--bg-soft, #f7f8fb);
  color: var(--text, #1f2937);
  border:1px solid var(--border, #e5e7eb);
  border-radius:999px;
}
.tag-plateforme{ background:#c7d2fe; color:#3730a3; }
.tag-genre{ background:#fcd34d; color:#78350f; }

/* ------- Ratios spécifiques ------- */
.vignette-grid.articles .vignette-thumb{ --thumb-ratio: 16 / 9; }
.carousel.is-blog .vignette-thumb{ --thumb-ratio: 16 / 9; }

/* ------- Note / étoiles ------- */
.vignette-meta{
  display:flex; align-items:center; gap:8px;
  color: var(--text-soft, #475569);
  font-size:.9rem;
  margin:0 1rem .75rem;
}
.vg-stars{ display:inline-flex; gap:2px; }
.vg-star{ position:relative; width:16px; height:16px; display:inline-block; }
.vg-star svg{ width:100%; height:100%; display:block; fill:#cbd5e1; }          /* gris vide */
.vg-star.full svg{ fill: var(--primary, #2563eb); }                             /* bleu rempli */
.vg-star.half::after{
  content:""; position:absolute; inset:0; background: var(--primary, #2563eb);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.86L18.18 22 12 18.56 5.82 22 7 14.13l-5-4.86 6.91-1.01L12 2z'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.86L18.18 22 12 18.56 5.82 22 7 14.13l-5-4.86 6.91-1.01L12 2z'/></svg>") no-repeat center/contain;
  clip-path: inset(0 50% 0 0);
}
@supports not (mask: url(#dummy)) {
  .vg-star.half::after{ display: none; }
}
.vg-score{ font-weight:700; color: var(--text, #1f2937); }
.vg-votes{ color: var(--text-soft, #475569); font-size:.6em; }

/* =========================================================
   ❤ Scope Favori — UNIQUEMENT dans les vignettes
   (aucun style global .fav-float-btn/.vg-fav en dehors)
   ========================================================= */

/* Position du conteneur cœur : il est dans .vignette-thumb */
.vignette-card .vignette-thumb .vg-fav{
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  pointer-events: auto;
}

/* Bouton cœur : scope strict aux vignettes */
.vignette-card .vignette-thumb .vg-fav .fav-float-btn{
  position: relative;
  display: inline-grid; place-items:center;
  width: calc(36px + var(--fav-hit,6px)*2);
  height: calc(36px + var(--fav-hit,6px)*2);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Hit-area circulaire (scope) */
.vignette-card .vignette-thumb .vg-fav .fav-float-btn::after{
  content: "";
  position: absolute;
  inset: var(--fav-hit,6px);
  border-radius: 999px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  box-shadow: var(--shadow-xs, 0 2px 6px rgba(0,0,0,.05));
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s, color .15s;
  pointer-events: none;
}
.vignette-card .vignette-thumb .vg-fav .fav-float-btn .ba-ico{ position: relative; z-index: 1; }
.vignette-card .vignette-thumb .vg-fav .fav-float-btn .ba-ico svg{ width:18px; height:18px; display:block; fill: currentColor; }

.vignette-card .vignette-thumb .vg-fav .fav-float-btn:hover::after{
  transform: translateY(-1px);
  border-color: var(--primary, #2563eb);
}
.vignette-card .vignette-thumb .vg-fav .fav-float-btn:focus-visible{
  outline: 3px solid var(--ring, #93c5fd);
  outline-offset: 2px;
}

/* États (scope) */
.vignette-card .vignette-thumb .vg-fav .fav-float-btn.is-fav{
  color:#ef4444; background:transparent;
}
.vignette-card .vignette-thumb .vg-fav .fav-float-btn.is-fav::after{
  border-color: rgba(239,68,68,.35);
  background: var(--bg, #fff);
}
.vignette-card .vignette-thumb .vg-fav .fav-float-btn.is-fav:hover{ color:#dc2626; }
.vignette-card .vignette-thumb .vg-fav .fav-float-btn.is-fav:hover::after{ border-color:#f87171; }

.vignette-card .vignette-thumb .vg-fav .fav-float-btn.not-logged{
  color: var(--primary, #2563eb);
  border-color: color-mix(in srgb, var(--primary, #2563eb) 30%, var(--border, #e5e7eb) 70%);
}
.vignette-card .vignette-thumb .vg-fav .fav-float-btn.not-logged:hover{
  border-color: var(--primary, #2563eb);
  box-shadow: 0 6px 18px rgba(37,99,235,.18);
}

/* Bouton supprimer (page favoris) — scope vignette */
.vignette-card .remove-fav-btn{
  position:absolute; top:10px; right:10px; z-index:6;
  width:32px; height:32px; border-radius:50%; border:0;
  display:grid; place-items:center; cursor:pointer;
  background:#ef4444; color:#fff; font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition: transform .2s ease, background .2s ease;
}
.vignette-card .remove-fav-btn:hover{ background:#dc2626; transform: scale(1.08); }

/* =========================
   PATCH COMPAT VIGNETTES
   ========================= */

/* Fallback ratio pour navigateurs sans aspect-ratio (ancien Edge/IE) */
@supports not (aspect-ratio: 1) {
  .vignette-thumb{
    position: relative;
    height: 0;
    padding-top: 150%; /* 2/3 => 66.666..% (w/h) ; ici inverse */
  }
  .vignette-thumb-inner,
  .vignette-thumb img{
    position: absolute;
    inset: 0;
  }
}