/* ═══ LEX DESIGN — glass.css : la matière Liquid Glass ═══
   .lg = surface en verre. lex-glass.js remplace le flou par la
   vraie réfraction (carte de lentille) sur Chrome/Edge/Electron ;
   ce fichier fournit le rendu de base + fallback Safari/Firefox. */
.lg{
  position:relative;isolation:isolate;
  background:var(--glass-bg);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(var(--fallback-blur)) saturate(170%);
  backdrop-filter:blur(var(--fallback-blur)) saturate(170%);
  box-shadow:var(--glass-shadow);
}
/* rim lumineux : double liseré façon verre épais */
.lg::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:
    inset 0 1.5px 1px -0.5px var(--hl-top),
    inset 1px 0 1px -0.5px var(--hl-low),
    inset -1px 0 1px -0.5px var(--hl-low),
    inset 0 -1.5px 1px -0.5px var(--hl-low),
    inset 0 0 0 1px rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
}
/* reflet spéculaire qui suit le pointeur (--mx/--my via lex-glass.js) */
.lg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(200px circle at var(--mx,25%) var(--my,-30%),rgba(255,255,255,.14),transparent 65%);
  opacity:0;transition:opacity .35s;
}
.lg:hover::after{opacity:1}
.lg>*{position:relative;z-index:3}
.lg-strong{background:var(--glass-bg-strong)}
.lg-pill{border-radius:999px}
/* verre plein sans réfraction (surfaces très denses : tableaux, modales longues) */
.lg-flat{-webkit-backdrop-filter:blur(var(--fallback-blur)) saturate(160%);backdrop-filter:blur(var(--fallback-blur)) saturate(160%)}

/* ── LA BULLE D'EAU (sélection flottante, gérée par lex-glass.js) ── */
.has-bubble{position:relative}
.nav-bubble{position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  transition:transform .6s cubic-bezier(.32,1.55,.35,1),width .35s ease,height .35s ease}
.nav-bubble-skin{position:absolute;inset:0;border-radius:999px;
  background:color-mix(in srgb,var(--accent-app) 22%,rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(6px) saturate(180%) brightness(1.08);
  backdrop-filter:blur(6px) saturate(180%) brightness(1.08);
  box-shadow:
    0 6px 20px color-mix(in srgb,var(--accent-app) 35%,rgba(0,0,0,.25)),
    inset 0 1.5px 1.5px -0.5px rgba(255,255,255,.75),
    inset 0 -2px 3px -1px color-mix(in srgb,var(--accent-app) 40%,rgba(255,255,255,.18)),
    inset -1px 0 2px -1px rgba(255,255,255,.3),
    inset 0 0 0 1px color-mix(in srgb,var(--accent-app) 35%,rgba(255,255,255,.25));
  animation:bubble-float 3.4s ease-in-out infinite alternate}
.nav-bubble-skin::after{content:"";position:absolute;top:12%;left:9%;width:32%;height:36%;
  border-radius:50%;background:radial-gradient(ellipse at 40% 35%,rgba(255,255,255,.55),transparent 70%);
  filter:blur(1px);transform:rotate(-18deg)}
@keyframes bubble-float{from{transform:translateY(-.8px) scale(1.005,.995)}to{transform:translateY(.8px) scale(.995,1.005)}}
@media (prefers-reduced-motion: reduce){.nav-bubble-skin{animation:none}.nav-bubble{transition:none}}