/* Vedette — le n°1 d'un classement, mis en avant SANS couleur ajoutée (DESIGN.md › Components).
 *
 * Validée le 2026-09-24 sur la page d'accueil (qui garde sa copie en ligne, pré-rendue),
 * reprise ici en feuille partagée pour les autres classements : top d'un set, /market,
 * /indices. Le halo est la carte elle-même floutée : la couleur vient du sujet, jamais d'un
 * dégradé décoratif. Le doré n'y apparaît pas (réservé à l'action principale).
 *
 * Balisage attendu (Jinja ou /vedette.js) :
 *   <a class="vedette" href="/carte/…">
 *     <span class="halo" style="background-image:url('…')"></span>
 *     <img src="…" alt="…" width="220" height="307">
 *     <div class="t"><span class="rang">…</span><div class="nom">…</div><div class="meta">…</div>
 *       <div class="cote">235,98 €<span class="v-badge up">+12,4 % en 7 jours</span></div>
 *       <div class="detail">la ligne qui dit POURQUOI elle est là</div></div>
 *   </a>
 *
 * Variante `.vedette.grande` : dans une GRILLE sur ordinateur, elle occupe 2 × 2 cases,
 * visuel au-dessus, texte centré.
 * ⚠ L'image porte `height: auto` en plus du ratio 63/88 : sans lui l'attribut `height`
 *   étire la carte (DESIGN.md › Hero).
 */
.vedette{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:16px;
  background:var(--surface,#1d1d1d);border-radius:18px;padding:14px;margin:0 0 10px;
  color:var(--text,#f4eee1);text-decoration:none;min-width:0}
.vedette:hover{background:var(--surface2,#272727)}
.vedette .halo{position:absolute;inset:-30%;z-index:-1;background-size:cover;background-position:center;
  filter:blur(40px) saturate(1.4);opacity:.3;pointer-events:none}
.vedette img{width:96px;max-width:none;aspect-ratio:63/88;height:auto;border-radius:9px;object-fit:cover;flex:none;
  background:var(--surface2,#272727);box-shadow:0 12px 30px rgba(0,0,0,.55);display:block}
.vedette .t{min-width:0;flex:1}
.vedette .rang{display:inline-block;background:rgba(20,20,20,.72);color:var(--text,#f4eee1);
  font:700 11px 'Poppins',sans-serif;border-radius:99px;padding:3px 10px;margin-bottom:8px}
.vedette .nom{font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;line-height:1.2;
  overflow-wrap:anywhere}
.vedette .meta{font-size:12.5px;color:var(--muted,#a59a86);margin-top:2px}
.vedette .cote{font-family:'Poppins',sans-serif;font-weight:800;font-size:26px;font-variant-numeric:tabular-nums;
  margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.15}
.vedette .cote.absent{font:500 13px 'Inter',sans-serif;color:var(--muted,#a59a86)}
.vedette .detail{font-size:12.5px;color:var(--muted,#a59a86);margin-top:4px;line-height:1.45}
/* Badge de variation (modèle Tonal) : vert = hausse, rouge = baisse, neutre sinon */
.vedette .v-badge{display:inline-block;font:700 13px 'Poppins',sans-serif;border-radius:99px;padding:2px 10px;
  color:var(--muted,#a59a86);background:var(--surface2,#272727)}
.vedette .v-badge.up{color:var(--badge-green,#8ed09c);background:var(--badge-green-bg,#1a2b1d)}
.vedette .v-badge.down{color:var(--badge-red,#f8a59a);background:var(--badge-red-bg,#36201d)}
@media(min-width:700px){
  .vedette{padding:18px;gap:22px}
  .vedette img{width:120px}
  .vedette .cote{font-size:30px}
}
@media(min-width:900px){
  .vedette.grande{grid-column:span 2;grid-row:span 2;flex-direction:column;justify-content:center;
    text-align:center;margin:0;padding:22px}
  .vedette.grande img{width:min(62%,220px)}
  .vedette.grande .cote{justify-content:center}
}