/* ══════════════════════════════════════════════════════════════
   LA VIGNETTE DE RECETTE des listes - lot vignettes et onglets,
   mockup validé le 28/09 :
   .claude/design-drafts/2026-09-28-toutes-recettes-vignettes-onglets.html

   La carte est .hn-card (editorial.css, chargé avant) : fond, filet,
   photo 4/3, titre Fraunces, lien étiré sur toute la carte. Cette
   feuille n'ajoute que ce que l'accueil n'a pas : le badge de rubrique,
   « De saison », le favori, la signature, Planifier et, chez l'auteur,
   le statut et les actions. Chargée par les cinq listes et le profil
   (après public_profile.css).
   ══════════════════════════════════════════════════════════════ */

.hn-card.vg {
  /* Fond verrouillé volontairement (verre sombre sur la photo : ni le
     fond ni la photo ne suivent le thème) - texte clair forcé OK */
  --vg-verre: rgba(8, 13, 10, .62);
  --vg-sur-verre: #f2efe6;
  /* La méta se règle sur la largeur de la carte, pas de l'écran. */
  container-type: inline-size;
}
/* Les pictogrammes sont au trait ; ceux qui portent fill="currentColor"
   (étoile, feuille) gardent leur remplissage. */
.vg svg:not([fill]) {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Au doigt, un survol reste collé après le toucher : la carte ne se soulève
   qu'à la souris. */
@media (hover: none) {
  .hn-card.vg:hover { transform: none; border-color: var(--ard-rule); background: var(--ard-bg-2); }
  .hn-card.vg:hover .hn-card-ph img { transform: none; }
  .hn-card.vg:hover .hn-card-t { color: var(--ard-ink); }
}
.vg .hn-card-ph::after { pointer-events: none; }
.vg .hn-card-body { gap: 10px; padding: 22px 24px 20px; }
.vg .hn-card-t {
  margin: 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.24;
  color: var(--ard-ink);
}
.vg .hn-card-t a { color: inherit; text-decoration: none; }
.vg .hn-card-t a::after { z-index: 1; }

/* Le badge nomme le niveau juste sous la sélection (core/cartes.py). */
.vg-badge {
  position: absolute; z-index: 2; top: 14px; left: 14px;
  max-width: calc(100% - 76px);
  display: inline-block; height: 28px; line-height: 28px; padding: 0 13px;
  border-radius: 999px;
  background: var(--ard-gold-text); color: var(--hn-on-gold);
  font-family: var(--ard-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Étiquette, pas une commande : un toucher doit ouvrir la recette
     (le lien étiré du titre) plutôt que d'être capté ici. */
  pointer-events: none;
}
/* Fond verrouillé volontairement (verre sombre sur photo) - texte clair forcé OK */
.vg-saison {
  position: absolute; z-index: 2; left: 14px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px; border-radius: 999px;
  background: var(--vg-verre);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--vg-sur-verre);
  font-family: var(--ard-sans); font-size: 12px; font-weight: 600;
  /* Étiquette, pas une commande : un toucher doit ouvrir la recette. */
  pointer-events: none;
}
.vg-saison svg { width: 12px; height: 12px; }
/* Fond verrouillé volontairement (verre sombre sur photo) - icône claire forcée OK */
.vg-fav {
  position: absolute; z-index: 3; top: 10px; right: 10px;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--vg-verre);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--vg-sur-verre);
  transition: transform var(--ard-tr);
}
/* Cible tactile de 48 px sans grossir le rond. */
.vg-fav::before { content: ""; position: absolute; inset: -4px; }
.vg-fav svg { width: 18px; height: 18px; stroke-width: 2; }
/* Spécificité forte volontaire (.hn-card.vg .vg-fav...) : bat toute règle
   plus courte posée par une page qui charge cette feuille après la sienne
   (le profil, public_profile.css, en Task 5). */
.hn-card.vg .vg-fav[aria-pressed="true"] svg { fill: currentColor; }
.vg-fav:hover { transform: scale(1.06); }
.vg-fav[data-busy] { cursor: progress; }

/* ── La signature : Par, Suivi, note ; chez l'auteur, le statut ── */
.vg-par {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0;
  font-family: var(--ard-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ard-ink-3);
}
.vg-auteur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-suivi, .vg-statut { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.vg-suivi { color: var(--ard-gold-text); }
.vg-suivi svg { width: 11px; height: 11px; stroke-width: 2.6; }
.vg-statut svg { width: 11px; height: 11px; stroke-width: 2.4; }
.vg-statut--secret { color: var(--ard-ink-2); }
.vg-statut--attente { color: var(--ard-gold-text); }
.vg-note {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; letter-spacing: 0; color: var(--ard-gold-text);
}
.vg-note svg { width: 13px; height: 13px; }

/* ── La méta : durée · parts, Planifier ── */
/* 6 px d'écart et Planifier à 11 px (mockup : 8 et 13) : « N personnes »
   tient en entier sur la carte de 314 px, là où « 4 parts » tenait. */
.vg .vg-meta { flex-wrap: nowrap; gap: 6px; white-space: nowrap; font-family: var(--ard-sans); }
.vg-m { display: inline-flex; align-items: center; gap: 6px; }
.vg-m svg { width: 14px; height: 14px; color: var(--ard-gold-text); stroke-width: 2; }
/* Les parts réelles (« 10 personnes ») sont plus longues que le « 4 parts »
   du mockup : elles seules cèdent, jamais la durée ni Planifier. Sous
   314 px de carte (312 px de contenu, filets ôtés : 4 colonnes sous
   1440 px, profil) elles s'effacent ; au-dessus, un cas extrême finit en
   ellipse. */
.vg .vg-meta > .vg-m:not(.vg-opt), .vg-plan { flex-shrink: 0; }
@media (min-width: 700px) {
  @container (min-width: 312px) {
    .vg-m.vg-opt { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  }
}
@container (max-width: 311.98px) {
  .vg-opt { display: none; }
}

/* Planifier et les actions de l'auteur : une pilule à filet d'encre. */
.vg-plan, .vg-act {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px;
  border: 1px solid var(--ard-rule-strong); border-radius: 999px;
  background: none; cursor: pointer;
  font-family: var(--ard-sans); font-size: 13px; font-weight: 600;
  color: var(--ard-ink); text-decoration: none;
  transition: border-color var(--ard-tr), color var(--ard-tr);
}
.vg-plan { margin-left: auto; padding: 0 11px; }
/* Cible tactile de 44 px sans épaissir la pilule. */
.vg-plan::before, .vg-act::before { content: ""; position: absolute; inset: -5px; }
.vg-plan svg, .vg-act svg { width: 14px; height: 14px; stroke-width: 2; }
.vg-plan:hover, .vg-act:hover { border-color: var(--ard-gold-text); color: var(--ard-gold-text); }
/* --red (#f87171) tombe sous 3:1 sur le fond clair : le survol de Supprimer
   ne rougit qu'en thème sombre, il reste à l'encre en thème clair. */
.vg-act--supprimer:hover { border-color: var(--ard-ink); color: var(--ard-ink); }
[data-theme="dark"] .vg-act--supprimer:hover { border-color: var(--red); color: var(--red); }
.vg-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }

.vg-fav:focus-visible, .vg-plan:focus-visible, .vg-act:focus-visible {
  outline: 2px solid var(--ard-gold-text); outline-offset: 3px;
}
/* Chrome et Edge donnent le focus au bouton cliqué (souris) : sans ça,
   .hn-card:focus-within (editorial.css) encadre toute la carte d'or à
   chaque clic sur le cœur, Planifier ou une action. Le bouton garde son
   propre anneau ci-dessus ; seul le lien du titre garde celui de la carte. */
.hn-card.vg:has(.vg-fav:focus, .vg-plan:focus, .vg-act:focus) {
  outline: none; border-color: var(--ard-rule);
}

/* ── Mobile : deux colonnes resserrées ──
   La signature et les parts s'effacent (pas chez l'auteur : le statut
   compte), le titre tient en trois lignes, Planifier et les actions
   passent en icône. */
@media (max-width: 699px) {
  .hn-card.vg { border-radius: 12px; }
  .vg .hn-card-body { gap: 8px; padding: 12px; }
  .vg:not(.vg--edition) .vg-par { display: none; }
  .vg .hn-card-t {
    font-size: 16px; line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
  .vg .vg-meta { gap: 6px; padding-top: 10px; font-size: 13px; }
  .vg-opt { display: none; }
  .vg-plan, .vg-act { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .vg-plan-t, .vg-act-t { display: none; }
  /* Le libellé passe à la ligne plutôt que d'être coupé par une ellipse.
     overflow-wrap : secours si la césure n'a pas de dictionnaire pour ce
     mot. Trois lignes, pas deux : « Légumes & Accompagnements » (jeu
     d'essai Air Fryer) restait tronqué en 2 lignes malgré la césure -
     aucune coupure ne doit rester cachée par le clamp. */
  .vg-badge {
    top: 8px; left: 8px; max-width: calc(100% - 56px);
    height: auto; line-height: 1.25; padding: 4px 9px; border-radius: 11px;
    letter-spacing: .4px;
    white-space: normal; text-overflow: clip;
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3;
  }
  .vg-saison { left: 8px; bottom: 8px; height: 22px; padding: 0 8px; font-size: 11px; }
  .vg-fav { top: 6px; right: 6px; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .vg-fav, .vg-plan, .vg-act { transition: none; }
}