/* Halo — la vignette de carte prend la couleur de SA carte (DESIGN.md › Components ›
 * « Vignette de carte (modèle Halo) » et « Ligne de carte » ; validé le 2026-10-12).
 *
 * La teinte vient de `cards.teinte` ('#rrggbb', calculée une fois par
 * scripts/calcul_teintes.py) et se pose en attribut sur l'élément :
 *   Jinja : {% from "_halo.html" import teinte %}   <div class="halo-ligne"{{ teinte(c.teinte) }}>
 *   JS    : '<div class="halo-ligne"' + MapTCGHalo.style(c.teinte) + '>'      (/halo.js)
 * Sans teinte valide, la couleur neutre #3a3530 (jamais une teinte choisie à la main).
 *
 * Trois pièces, utilisables séparément :
 *
 * 1. LIGNE DE CARTE — une ligne qui porte UNE carte et SON prix.
 *      <a class="halo-ligne …">
 *        <img class="halo-lueur" …>            la vignette, avec la lueur de sa couleur
 *        <div>nom · numéro · série · contexte en TEXTE</div>
 *        <div class="prix-bloc">…</div>         voir 3.
 *      </a>
 *    Le halo part de la vignette sur une largeur FIXE (250 px) : en pourcentage, une ligne
 *    de 1 000 px sur ordinateur devenait une bande de couleur.
 *
 * 2. VIGNETTE (grille) — tuile dont le fond prend la teinte, la carte flotte dessus.
 *      <a class="halo-vignette …"><img class="halo-carte" …> nom, numéro · série, prix + UN signal</a>
 *
 * 3. BLOC DE PRIX — au même endroit sur chaque ligne : les prix se comparent en descendant.
 *      <div class="prix-bloc">
 *        <span class="prix-lib">sur eBay</span>         ce que désigne le prix (au-dessus)
 *        <strong class="prix-montant">177,54 €</strong>
 *        <span class="prix-signal bon">−35 % / cote</span>   UN signal : bon, mauvais, urgent, neutre
 *      </div>
 *    `.prix-lib.partenaire` (doré) pour « sur CardNexus » : le doré marque le partenaire.
 *    Les petites lignes reviennent à la ligne ; seul le montant reste d'un tenant — un
 *    libellé long (« cote Reverse 59,16 € ») sortait du bloc (relevé sur /direct).
 *
 * Pas de pastille pour la source, l'état ou la cote (du texte) ; pas de chevron ; pas de
 * flou d'image (seule la vedette floute sa carte, /vedette.css).
 */

/* La lueur se calcule SUR l'élément teinté (là où `--teinte` est posée), puis s'hérite :
   une page dont les vignettes ont leur propre classe l'applique par `box-shadow:var(--halo-lueur)`. */
.halo-ligne,.halo-vignette{
  --halo-lueur:0 6px 18px color-mix(in srgb,var(--teinte,#3a3530) 50%,transparent),0 4px 10px rgba(0,0,0,.45);
  --halo-lueur-carte:0 14px 34px color-mix(in srgb,var(--teinte,#3a3530) 55%,transparent),0 6px 16px rgba(0,0,0,.45);
}

/* 1. Ligne de carte
   ⚠ Classe DOUBLÉE (.halo-ligne.halo-ligne) : une page qui pose son propre fond sur ses
   lignes (`.rel{background}`, `.rel:hover{background}` sur /direct) l'emporterait sinon,
   selon l'ordre de chargement des feuilles — et le survol effacerait le halo. */
.halo-ligne.halo-ligne,.halo-ligne.halo-ligne:hover{
  background:linear-gradient(90deg,color-mix(in srgb,var(--teinte,#3a3530) 70%,transparent) 0,
    color-mix(in srgb,var(--teinte,#3a3530) 22%,transparent) 120px,transparent 250px),var(--surface,#1d1d1d);
}
.halo-ligne:hover,.halo-vignette:hover{filter:brightness(1.1)}
.halo-lueur{box-shadow:var(--halo-lueur)}

/* 2. Vignette de grille (classe doublée : même raison que la ligne) */
.halo-vignette.halo-vignette,.halo-vignette.halo-vignette:hover{
  background:radial-gradient(140% 90% at 50% 8%,color-mix(in srgb,var(--teinte,#3a3530) 92%,transparent) 0%,
      color-mix(in srgb,var(--teinte,#3a3530) 42%,transparent) 46%,transparent 88%),
    linear-gradient(180deg,color-mix(in srgb,var(--teinte,#3a3530) 24%,var(--surface,#1d1d1d)) 0%,var(--surface,#1d1d1d) 100%);
}
.halo-vignette .halo-carte{box-shadow:var(--halo-lueur-carte)}

/* 3. Bloc de prix */
.prix-bloc{flex:none;align-self:stretch;width:116px;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:1px;background:var(--surface2,#272727);border-radius:10px;padding:7px 10px;text-align:right}
.prix-bloc .prix-lib{font-size:10.5px;line-height:1.3;color:var(--muted,#a59a86)}
.prix-bloc .prix-lib.partenaire{color:var(--accent,#e5a93d)}
.prix-bloc .prix-montant{font-family:Poppins,sans-serif;font-weight:800;font-size:16px;line-height:1.3;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.prix-bloc .prix-signal{font-family:Poppins,sans-serif;font-weight:600;font-size:12px;line-height:1.25;font-variant-numeric:tabular-nums}
.prix-signal.bon{color:var(--b-green,#8ed09c)}
.prix-signal.mauvais{color:var(--b-red,#f8a59a)}
.prix-signal.urgent{color:var(--b-orange,#f0ad7f)}
.prix-signal.neutre{color:var(--muted,#a59a86)}
@media (max-width:519px){
  .prix-bloc{width:102px;padding:6px 8px}
  .prix-bloc .prix-montant{font-size:15px}
}