/* SKLD ChromaGrid — grille de cartes où un spot révèle la carte sous le curseur.
 * Technique (portée de reactbits ChromaGrid, 100% CSS, sans GSAP) :
 *   - hors du spot, TOUTE la grille est légèrement désaturée + assombrie ;
 *   - sous le curseur, un trou radial dans ce calque « rend » la carte à sa couleur
 *     (vert sapin) et un halo lime/chrome LÉGER s'allume dans la carte survolée.
 * Le JS ne fait que : injecter les calques + poser --sk-x/--sk-y (centre du spot, px)
 * et --sk-mx/--sk-my (souris locale à la carte, px). Aucune couleur criarde. DARK & DISCRET.
 *
 * Usage :
 *   <div class="grille" data-chromagrid>
 *     <article class="sk-chip"> ... </article>
 *     <article class="sk-chip"> ... </article>
 *   </div>
 *   <link rel="stylesheet" href="/static/skld-chromagrid.css">
 *   <script src="/static/skld-chromagrid.js"></script>
 */

[data-chromagrid]{
  position: relative;              /* ancre les calques absolus (posé aussi par le JS) */
  --sk-x: 50%;                     /* centre du spot (px, piloté par le JS) */
  --sk-y: 50%;
  --sk-r: 240px;                   /* rayon du spot */
  --sk-cg-lime: 157,255,60;        /* #9dff3c — accent lime LÉGER */
  --sk-cg-chrome: 210,224,230;     /* blanc cassé froid / chrome */
}

/* ------------------------------------------------------------------ */
/*  Halo lime/chrome par carte (élément <i class="sk-chroma-halo">)   */
/* ------------------------------------------------------------------ */
[data-chromagrid] .sk-chip{ position: relative; }  /* ancre le halo interne */

.sk-chroma-halo{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .45s cubic-bezier(.32,.72,0,1);
  /* halo doux : coeur lime -> chrome -> transparent, alpha volontairement bas */
  background:
    radial-gradient(220px circle at var(--sk-mx,50%) var(--sk-my,50%),
      rgba(var(--sk-cg-lime), .12),
      rgba(var(--sk-cg-chrome), .05) 38%,
      transparent 66%);
  mix-blend-mode: screen;          /* lumineux et discret sur fond sombre */
}
@media (hover:hover) and (pointer:fine){
  [data-chromagrid] .sk-chip:hover .sk-chroma-halo{ opacity: 1; }
}

/* Liseré lime très léger sur la carte survolée (additif, ne bouge pas le layout) */
[data-chromagrid] .sk-chip{ transition: box-shadow .3s ease; }
@media (hover:hover) and (pointer:fine){
  [data-chromagrid] .sk-chip:hover{
    box-shadow:
      0 0 0 1px rgba(var(--sk-cg-lime), .16),
      0 18px 40px -22px rgba(0,0,0,.85);
  }
}

/* ------------------------------------------------------------------ */
/*  Calques de révélation (désaturation + assombrissement masqués)    */
/* ------------------------------------------------------------------ */
.sk-chroma-overlay,
.sk-chroma-fade{
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: rgba(0,0,0,.001);    /* quasi-transparent : le filtre fait le travail */
  -webkit-backdrop-filter: grayscale(.9) brightness(.82);
  backdrop-filter: grayscale(.9) brightness(.82);
}

/* Calque permanent : trou net au niveau du spot, désaturé sur les bords */
.sk-chroma-overlay{
  z-index: 5;
  -webkit-mask-image: radial-gradient(circle var(--sk-r) at var(--sk-x) var(--sk-y),
     transparent 0%, transparent 16%,
     rgba(0,0,0,.12) 34%, rgba(0,0,0,.28) 52%,
     rgba(0,0,0,.46) 70%, rgba(0,0,0,.66) 86%, #000 100%);
          mask-image: radial-gradient(circle var(--sk-r) at var(--sk-x) var(--sk-y),
     transparent 0%, transparent 16%,
     rgba(0,0,0,.12) 34%, rgba(0,0,0,.28) 52%,
     rgba(0,0,0,.46) 70%, rgba(0,0,0,.66) 86%, #000 100%);
}

/* Calque « fondu » : masque inversé (plein au centre) dont on pilote l'opacité.
   Pointeur absent -> opacity 1 -> TOUTE la grille assombrie.
   Pointeur présent ([data-sk-active]) -> opacity 0 -> le spot révèle. */
.sk-chroma-fade{
  z-index: 6;
  opacity: 1;
  transition: opacity .55s cubic-bezier(.32,.72,0,1);
  -webkit-mask-image: radial-gradient(circle var(--sk-r) at var(--sk-x) var(--sk-y),
     #000 0%, #000 16%,
     rgba(0,0,0,.88) 34%, rgba(0,0,0,.72) 52%,
     rgba(0,0,0,.54) 70%, rgba(0,0,0,.34) 86%, transparent 100%);
          mask-image: radial-gradient(circle var(--sk-r) at var(--sk-x) var(--sk-y),
     #000 0%, #000 16%,
     rgba(0,0,0,.88) 34%, rgba(0,0,0,.72) 52%,
     rgba(0,0,0,.54) 70%, rgba(0,0,0,.34) 86%, transparent 100%);
}
[data-chromagrid][data-sk-active] .sk-chroma-fade{
  opacity: 0;
  transition: opacity .25s cubic-bezier(.32,.72,0,1);
}

/* Repli sans backdrop-filter (vieux navigateurs) : assombrir via une couleur charbon */
[data-chromagrid].sk-chroma--nobd .sk-chroma-overlay,
[data-chromagrid].sk-chroma--nobd .sk-chroma-fade{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(8,12,10,.60);   /* charbon très sombre, légère teinte sapin */
}

/* ------------------------------------------------------------------ */
/*  Mode statique : fx=off / prefers-reduced-motion / tactile          */
/*  -> aucun calque, aucun halo, cartes pleines et lisibles.           */
/* ------------------------------------------------------------------ */
[data-chromagrid][data-sk-static] .sk-chroma-overlay,
[data-chromagrid][data-sk-static] .sk-chroma-fade,
[data-chromagrid][data-sk-static] .sk-chroma-halo{ display: none; }

@media (prefers-reduced-motion: reduce){
  .sk-chroma-halo,
  .sk-chroma-fade{ transition: none; }
}