.glass{
  --mx:50%;--my:0%;
  position:relative;isolation:isolate;
  /* pas de backdrop-filter ici : sur ce fond sombre il ne se voyait presque pas, mais chaque
     carte recalculait un flou de l'arrière-plan à chaque image du défilement. Le verre
     « flouté » reste réservé à ce qui passe au-dessus du contenu (en-tête, menus). */
  background:var(--glass-fill),rgba(12,12,18,.38);
  border-radius:var(--radius);
  box-shadow:var(--glass-shadow);
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(160deg,var(--glass-edge),rgba(255,255,255,.04) 38%,rgba(255,255,255,.02) 62%,rgba(192,132,252,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.09),transparent 60%);
  opacity:var(--spec,0);transition:opacity var(--dur) var(--ease-lux);
}
.glass:hover{--spec:1}
.glass > *{position:relative;z-index:2}

.glass-l{border-radius:var(--radius-l)}
.glass-pill{border-radius:var(--radius-pill)}
.glass-strong{background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035))}
.glass-iris::before{background:linear-gradient(140deg,#C084FC,rgba(244,114,182,.55) 30%,rgba(255,255,255,.08) 60%,#F5E1FF)}

@media (hover:none){ .glass::after{display:none} }