/* ============================================================================
   Orbit — Liquid Glass
   Surface verre enrichie, pilotée par tokens, UNIQUEMENT pour le thème « glass ».
   Stratégie 2 niveaux :
     - Niveau 1 (ce fichier, §1) : glassmorphism enrichi en CSS pur — socle, tous
       navigateurs. Doit être impeccable seul.
     - Niveau 2 (réfraction SVG) : ajouté plus loin, derrière @supports, Chromium.

   ISOLATION REXORA (garde-fou dur, cf. bas de fichier) : toutes les surfaces et
   pseudo-éléments .orbit-glass sont neutralisés sous html[data-design="rexora"]
   (backdrop-filter:none, fond plein, pseudos masqués). Aucune fuite hors du glass.

   Tout est en var(--token) : accent (var(--acc)/--acc-rgb) et typo (var(--fd)/--f)
   sont lus dans les tokens Orbit du dépôt — aucune valeur en dur.
   ============================================================================ */

/* ---- Tokens Niveau 1 (dark par défaut) ---------------------------------- */
:root {
  /* Saturation = ingrédient clé Apple (fait « ressortir » les couleurs derrière
     le verre). Brightness ajoute la luminosité « verre éclairé ». */
  --glass-saturate: 180%;
  --glass-brightness: 1.06;

  /* Rim spéculaire : lumière rasante claire en haut-gauche -> arête sombre en
     bas-droite. */
  --glass-rim-hi: rgba(255, 255, 255, 0.55);
  --glass-rim-lo: rgba(255, 255, 255, 0.04);

  /* Profondeur de verre : lumière qui entre par le bord haut (inset clair),
     ombre interne discrète en bas, et ombre portée externe douce (élévation). */
  --glass-inset-hi: inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
  --glass-inset-lo: inset 0 -1px 1px 0 rgba(0, 0, 0, 0.22);
  --glass-elev: 0 10px 30px -8px rgba(0, 0, 0, 0.38);

  /* Reflet réactif au pointeur (position par défaut = haut-centre si pas de JS). */
  --glass-mx: 50%;
  --glass-my: -10%;
  --glass-reflect: rgba(255, 255, 255, 0.10);

  /* Glow d'accent (états actifs / CTA) — toujours via l'accent du dépôt. */
  --glass-accent-glow: 0 0 0 1px rgba(var(--acc-rgb), 0.35),
                       0 8px 26px -10px rgba(var(--acc-rgb), 0.45);

  /* Grain anti-banding : bruit fractal SVG inline (data-URI), DÉSATURÉ
     (feColorMatrix saturate 0 -> monochrome, pas de speckles colorés) et baké
     à ~5% via l'opacité du rect. Discret : casse juste les aplats de flou. */
  --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
}

[data-theme="light"] {
  --glass-rim-hi: rgba(255, 255, 255, 0.9);
  --glass-rim-lo: rgba(15, 23, 42, 0.06);
  --glass-inset-hi: inset 0 1px 0 0 rgba(255, 255, 255, 0.75);
  --glass-inset-lo: inset 0 -1px 1px 0 rgba(15, 23, 42, 0.06);
  --glass-elev: 0 10px 30px -8px rgba(15, 23, 42, 0.12);
  --glass-reflect: rgba(255, 255, 255, 0.5);
}

/* ---- Surface de base ----------------------------------------------------- */
.orbit-glass {
  position: relative;
  isolation: isolate;                 /* contient les pseudos sans fuir le z-index */
  background-color: var(--glass-bg-strong, rgba(255, 255, 255, 0.05));
  background-image: var(--glass-grain);   /* grain ~5% monochrome, tuilé */
  background-size: 120px 120px;
  -webkit-backdrop-filter: var(--glass-blur, blur(30px)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  backdrop-filter: var(--glass-blur, blur(30px)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  border: 1px solid transparent;      /* le contour visible est le rim (::before) */
  border-radius: var(--r-xl, 16px);
  box-shadow: var(--glass-inset-hi), var(--glass-inset-lo), var(--glass-elev);
  color: var(--t1);
}

/* Rim spéculaire : bordure 1px en dégradé via masque (on ne garde que le contour). */
.orbit-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--glass-rim-hi) 0%, var(--glass-rim-lo) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Grain anti-banding + reflet (réactif au pointeur en Niveau 2/Commit reflet). */
.orbit-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  /* Reflet doux (statique ici ; rendu réactif au pointeur au commit suivant via
     --glass-mx/--glass-my). Le grain n'est PLUS ici : il est sur le fond de
     l'élément, à sa propre opacité (évite l'amplification + les speckles). */
  background: radial-gradient(180px 130px at var(--glass-mx) var(--glass-my),
                              var(--glass-reflect), transparent 65%);
}

/* Le contenu posé sur la surface doit passer au-dessus des pseudos. */
.orbit-glass > * { position: relative; z-index: 3; }

/* ---- Variantes ----------------------------------------------------------- */
/* Élevée : plus opaque + élévation renforcée (modales, panneaux signature). */
.orbit-glass--elevated {
  background-color: var(--glass-bg-strong, rgba(255, 255, 255, 0.07));
  box-shadow: var(--glass-inset-hi), var(--glass-inset-lo),
              0 18px 50px -12px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .orbit-glass--elevated {
  box-shadow: var(--glass-inset-hi), var(--glass-inset-lo),
              0 18px 50px -12px rgba(15, 23, 42, 0.16);
}

/* Subtile : verre plus discret (surfaces secondaires, hovers). */
.orbit-glass--subtle {
  background-color: var(--glass-bg-soft, rgba(255, 255, 255, 0.02));
  box-shadow: var(--glass-inset-hi), var(--glass-elev);
}
.orbit-glass--subtle::after { opacity: 0.6; }

/* Accent : touche d'accent Orbit sur le rim + glow (états actifs, CTA). Jamais
   criard : l'accent ne sert qu'au rim et à un halo doux. */
.orbit-glass--accent {
  box-shadow: var(--glass-inset-hi), var(--glass-inset-lo), var(--glass-accent-glow);
}
.orbit-glass--accent::before {
  background: linear-gradient(135deg,
              rgba(var(--acc-rgb), 0.75) 0%,
              var(--glass-rim-lo) 60%);
}

/* ============================================================================
   NIVEAU 2 — Réfraction SVG réelle (Chromium uniquement).
   Surface SIGNATURE = TOP-BAR DE BUREAU seulement (taille stable). La sidebar se
   collapse (190 <-> 64 px) -> exclue (une displacement map se déformerait à
   chaque collapse). @supports détecte url() dans backdrop-filter (vrai sur
   Chromium / faux sur Safari + Firefox) -> FALLBACK AUTOMATIQUE sur le Niveau 1
   (la topbar garde son blur + saturate d'auraos.css, surface impeccable). Jamais
   sous rexora (:not). Mobile exclu (la topbar mobile est une capsule fixe à part).
   ============================================================================ */
@supports (backdrop-filter: url(#orbit-glass-refraction)) or (-webkit-backdrop-filter: url(#orbit-glass-refraction)) {
  @media (min-width: 769px) {
    html:not([data-design="rexora"]) .topbar {
      /* !important pour battre auraos.css [data-theme] .topbar (lui-même
         !important) ; spécificité (0,2,1) >= (0,2,0) -> on gagne, mais jamais
         sous rexora (cf. :not + design-rexora.css en dernier). */
      -webkit-backdrop-filter: url(#orbit-glass-refraction) !important;
              backdrop-filter: url(#orbit-glass-refraction) !important;
    }
  }
}

/* ============================================================================
   GARDE-FOUS ACCESSIBILITÉ & PERFORMANCE (non négociables).
   ============================================================================ */

/* Transparence réduite -> surfaces OPAQUES : plus de flou ni de translucidité,
   fonds pleins lisibles. Couvre .orbit-glass (+ son grain/reflet) ET la topbar
   (réfraction Niveau 2 désactivée). N'agit jamais sous rexora (déjà opaque). */
@media (prefers-reduced-transparency: reduce) {
  html:not([data-design="rexora"]) .orbit-glass {
    background-color: var(--card) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  html:not([data-design="rexora"]) .orbit-glass::after { display: none !important; }
  html:not([data-design="rexora"]) .topbar {
    background: var(--bg2, var(--card)) !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
}

/* Mouvement réduit -> le reflet ne suit plus le pointeur. Le JS est déjà
   neutralisé (early-return) ; ici on fige aussi la position CSS par défaut
   (ceinture + bretelles, et couvre un changement de réglage après chargement). */
@media (prefers-reduced-motion: reduce) {
  .orbit-glass { --glass-mx: 50% !important; --glass-my: -10% !important; }
}

/* Performance : confiner la peinture du backdrop-filter (coûteux GPU) à la
   surface, éviter le repaint de la page entière au scroll. Limité aux surfaces
   verre flottantes (jamais formulaires/tableaux denses : on n'y met pas .orbit-glass). */
.orbit-glass { contain: paint; }

/* ============================================================================
   GARDE-FOU REXORA (dur) — neutralisation totale du Liquid Glass.
   Rexora ne doit JAMAIS recevoir le verre. design-rexora.css annule déjà
   .card/.sidebar/.topbar ; ici on couvre explicitement .orbit-glass et SES
   pseudo-éléments (qui, eux, échapperaient sinon aux overrides existants).
   ============================================================================ */
html[data-design="rexora"] .orbit-glass {
  background: var(--card) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: 1px solid var(--brd) !important;
  box-shadow: none !important;
}
html[data-design="rexora"] .orbit-glass::before,
html[data-design="rexora"] .orbit-glass::after {
  display: none !important;
  content: none !important;
}