/*
 * PRESTKA V15 — Liquid Glass raffiné (4 niveaux). Charger APRÈS tokens.css.
 * Transposé du portfolio DG : subtil, crédible, hairlines, highlight spéculaire, grain léger.
 * Jamais clinquant. Le gold reste un accent rare (glass-hero uniquement).
 */

/* Le position par défaut est en spécificité NULLE (:where) : un composant
   positionné (.profile-pop, .notif-pop, .profile-menu… en position:absolute)
   doit pouvoir l'emporter quel que soit l'ordre de chargement alphabétique
   Propshaft (components < glass). Sans :where, cette règle écrasait leur
   position:absolute → popovers centrés dans le flux flex (BUG popovers 2026-07-07). */
:where(.glass-subtle, .glass-medium, .glass-strong, .glass-hero) {
  position: relative;
}

.glass-subtle, .glass-medium, .glass-strong, .glass-hero {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

.glass-subtle {
  background: linear-gradient(180deg, var(--glass-sheen-top), transparent 32%), var(--glass-subtle-bg);
  backdrop-filter: blur(var(--glass-subtle-blur)) saturate(var(--glass-subtle-sat));
  -webkit-backdrop-filter: blur(var(--glass-subtle-blur)) saturate(var(--glass-subtle-sat));
  border: 1px solid var(--glass-subtle-border);
  box-shadow: var(--shadow-md), var(--shadow-ambient), inset 0 1px 0 var(--glass-highlight), var(--glass-edge), var(--glass-inner);
}
.glass-medium {
  background: linear-gradient(180deg, var(--glass-sheen-top), transparent 30%), var(--glass-medium-bg);
  backdrop-filter: blur(var(--glass-medium-blur)) saturate(var(--glass-medium-sat));
  -webkit-backdrop-filter: blur(var(--glass-medium-blur)) saturate(var(--glass-medium-sat));
  border: 1px solid var(--glass-medium-border);
  box-shadow: var(--shadow-lg), var(--shadow-ambient), inset 0 1px 0 var(--glass-highlight), var(--glass-edge), var(--glass-inner);
}
.glass-strong {
  background: linear-gradient(180deg, var(--glass-sheen-top), transparent 28%), var(--glass-strong-bg);
  backdrop-filter: blur(var(--glass-strong-blur)) saturate(var(--glass-strong-sat));
  -webkit-backdrop-filter: blur(var(--glass-strong-blur)) saturate(var(--glass-strong-sat));
  border: 1px solid var(--glass-strong-border);
  box-shadow: var(--shadow-xl), var(--shadow-ambient), inset 0 1px 0 var(--glass-highlight), var(--glass-edge), var(--glass-inner);
}
.glass-hero {
  background: linear-gradient(180deg, var(--glass-sheen-top), transparent 34%), var(--glass-hero-bg);
  backdrop-filter: blur(var(--glass-hero-blur)) saturate(var(--glass-hero-sat));
  -webkit-backdrop-filter: blur(var(--glass-hero-blur)) saturate(var(--glass-hero-sat));
  border: 1px solid var(--glass-hero-border);
  box-shadow: var(--shadow-xl), var(--shadow-glow), var(--shadow-ambient), inset 0 1px 0 var(--glass-highlight), var(--glass-edge), var(--glass-inner);
}

/* Liseré spéculaire haut (lumière qui glisse sur le verre) — subtil */
.glass-subtle::before, .glass-medium::before, .glass-strong::before, .glass-hero::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding-top: 1px;
  background: linear-gradient(180deg, var(--glass-highlight), transparent 35%);
  -webkit-mask: linear-gradient(#000, transparent 40%);
  mask: linear-gradient(#000, transparent 40%);
  pointer-events: none;
  z-index: -1;
}

/* Fallback sans backdrop-filter (Firefox anciens) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-subtle { background: linear-gradient(135deg, color-mix(in srgb, var(--prestka-primary) 55%, transparent), color-mix(in srgb, var(--surface-tint) 92%, transparent)); }
  .glass-medium { background: linear-gradient(135deg, color-mix(in srgb, var(--prestka-primary) 65%, transparent), color-mix(in srgb, var(--surface-tint) 94%, transparent)); }
  .glass-strong { background: linear-gradient(135deg, color-mix(in srgb, var(--prestka-primary) 75%, transparent), color-mix(in srgb, var(--surface-tint) 96%, transparent)); }
  .glass-hero   { background: linear-gradient(135deg, color-mix(in srgb, var(--deep-indigo) 85%, transparent), color-mix(in srgb, var(--surface-tint) 97%, transparent)); }
}
[data-theme="light"] {
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-subtle, .glass-medium, .glass-strong, .glass-hero {
      background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(245,243,239,0.96));
    }
  }
}

/* Hairline divider */
.hairline { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }
.hairline--strong { border-top-color: var(--line-strong); }

/* ===== Grain ===== */
/* Micro-grain ponctuel sur surfaces (anti-banding, texture luxe discrète) */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(250,250,250,0.05) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .grain::after { background-image: radial-gradient(rgba(10,10,10,0.05) 0.5px, transparent 0.5px); }

/* Grain cinématique plein écran (feTurbulence) — à placer une fois dans <body> */
.film-grain {
  position: fixed; inset: -8%;
  z-index: 90;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.22;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain-drift 6s steps(5) infinite;
}
/* Grain vivant (dérive subtile) — désactivé en reduced-motion */
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2.5%, 1.5%); }
  40%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-1.5%, 2.5%); }
  80%  { transform: translate(2.5%, 1%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .film-grain { display: none; } }