/* ============================================================================
   Zodiac Intelligence — MOTEUR D'AFFICHAGE « Liquid Glass » (verre lumineux, recette B)
   ----------------------------------------------------------------------------
   STANDARD DE PLATEFORME. Source UNIQUE du design « verre » de toute l'app.
   Inclus dans : wireframe-pro / wireframe-settings / wireframe-new-client / wireframe-ephemerides.

   ┌─ COMMENT S'EN SERVIR ────────────────────────────────────────────────────┐
   │ • Toute fenêtre de survol / menu / popover  →  class="glass-pop"          │
   │ • Toute fenêtre flottante (draggable)       →  class="glass-float"        │
   │ • Tout bouton/pastille en verre             →  class="glass-btn"          │
   │ • Le fond flou derrière une modale          →  class="glass-scrim"        │
   │ • Teinte accent d'une surface               →  + class="glass-tint"       │
   │   (ou poser --vc:<couleur> sur l'élément)                                 │
   └──────────────────────────────────────────────────────────────────────────┘

   CHANGER LE DESIGN PARTOUT = modifier UNIQUEMENT les tokens --glass-* ci-dessous.
   Les composants existants (`.ksv-float`, `.wheel-menu`, `.zi-sel-*`, modales…)
   consomment ces MÊMES tokens → une modif racine se propage à toute la plateforme.

   ⚠️ Sur fond clair (l'app est crème/blanche), le verre est volontairement SUBTIL :
   la signature visuelle vient du sheen + liseré spéculaire + brightness, PAS d'une
   grosse transparence (qui rendrait le texte illisible sur la roue dense).
   ============================================================================ */

:root{
  /* ── Remplissage (fond translucide du verre) ───────────────────────────── */
  --glass-fill-hi:rgba(255,255,255,.95);   /* haut-gauche du dégradé (quasi opaque → lisibilité max au-dessus de la roue) */
  --glass-fill-lo:rgba(255,255,255,.86);   /* bas-droite du dégradé */

  /* ── Optique du verre lumineux ─────────────────────────────────────────── */
  --glass-sat:1.9;                          /* saturation du backdrop */
  --glass-bright:1.11;                      /* lift de luminosité du backdrop (renforcé juin 2026) */
  --glass-edge:rgba(255,255,255,.70);       /* liseré clair du contour (plus net) */
  --glass-rim:                              /* reflet spéculaire interne (arête Apple, renforcé) */
    inset 0 1px 1.5px rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.32);
  --glass-sheen:                            /* voile lumineux haut-gauche (posé en ::before) */
    linear-gradient(150deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.16) 30%,transparent 58%);

  /* ── Flous par rôle (intensité du dépoli selon la taille de la surface) ─── */
  --glass-blur-btn:13px;                     /* petits boutons / pastilles */
  --glass-blur-pop:20px;                     /* menus, popovers, panneaux de survol */
  --glass-blur-float:24px;                   /* grandes fenêtres flottantes */

  /* ── Ombres portées par rôle (profondeur flottante) ────────────────────── */
  --glass-shadow-btn:0 6px 18px -6px rgba(30,28,55,.34),0 1px 3px rgba(30,28,55,.16);
  --glass-shadow-pop:0 18px 46px -16px rgba(30,28,55,.44);
  --glass-shadow-float:0 24px 60px -16px rgba(30,28,55,.50);

  /* ── Scrim (fond sombre flouté derrière une modale) ────────────────────── */
  --glass-scrim-bg:rgba(30,28,55,.32);
  --glass-scrim-blur:3px;

  /* ── Fonds prêts à l'emploi (boutons/panneaux/tooltips) ─────────────────── */
  /* Plus opaques que les fenêtres → lisibilité du texte sur fond clair crème.
     Le « gloss » vient du liseré --glass-rim (inset, pas de ::before → OK sur texte brut). */
  --glass-btn-bg:linear-gradient(150deg,rgba(255,255,255,.88),rgba(255,255,255,.72));
  --glass-btn-bg-hover:linear-gradient(150deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  --glass-accent-bg:linear-gradient(150deg,color-mix(in srgb,#fff 16%,var(--accent)),var(--accent));
  --glass-accent-bg-hover:linear-gradient(150deg,color-mix(in srgb,#fff 10%,var(--accent-deep)),var(--accent-deep));
  --glass-panel-bg:linear-gradient(150deg,rgba(255,255,255,.94),rgba(255,255,255,.84));
  --glass-tip-bg:linear-gradient(150deg,rgba(36,40,58,.88),rgba(26,28,42,.80));  /* tooltips sombres « givrés » */
}

/* ── Boutons en verre (texte brut → gloss par liseré, pas de pseudo-élément) ── */
.glass-btn-surface{
  background:var(--glass-btn-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur-btn)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter:blur(var(--glass-blur-btn)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow-btn),var(--glass-rim);
}
.glass-btn-surface:hover{background:var(--glass-btn-bg-hover)}
.glass-btn-accent{
  background:var(--glass-accent-bg);color:#fff;border:1px solid color-mix(in srgb,var(--accent) 55%,rgba(255,255,255,.5));
  box-shadow:var(--glass-shadow-btn),var(--glass-rim);
}
.glass-btn-accent:hover{background:var(--glass-accent-bg-hover)}
/* ── Panneau/carte en verre (plus opaque, lisible) ── */
.glass-panel{position:relative;
  background:var(--glass-panel-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur-pop)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter:blur(var(--glass-blur-pop)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow-pop),var(--glass-rim);
}
/* ── Tooltip sombre en verre ── */
.glass-tip{
  background:var(--glass-tip-bg);color:#fff;
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18);
}

/* ============================================================================
   CLASSES STANDARD — à poser sur tout NOUVEAU composant en verre.
   (Les composants historiques consomment les tokens directement ; voir CLAUDE.md.)
   ============================================================================ */

/* Socle commun : dégradé + backdrop éclairci + liseré + ombre + reflet spéculaire */
.glass-pop,
.glass-float,
.glass-btn{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(150deg,var(--glass-fill-hi),var(--glass-fill-lo));
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(var(--gb)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter:blur(var(--gb)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  box-shadow:var(--gs),var(--glass-rim);
}
/* Voile lumineux (sheen) — sous le contenu */
.glass-pop::before,
.glass-float::before,
.glass-btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:var(--glass-sheen);
}
/* Le contenu passe au-dessus du sheen */
.glass-pop>*,
.glass-float>*,
.glass-btn>*{position:relative;z-index:1}

/* Rôles : choisissent le flou + l'ombre adaptés */
.glass-btn{--gb:var(--glass-blur-btn);--gs:var(--glass-shadow-btn);border-radius:13px}
.glass-pop{--gb:var(--glass-blur-pop);--gs:var(--glass-shadow-pop);border-radius:14px}
.glass-float{--gb:var(--glass-blur-float);--gs:var(--glass-shadow-float);border-radius:18px}

/* Teinte accent (par défaut --accent ; surcharger --vc pour une autre teinte) */
.glass-tint{
  --vc:var(--accent);
  --glass-fill-hi:color-mix(in srgb,var(--vc) 14%,rgba(255,255,255,.67));
  --glass-fill-lo:color-mix(in srgb,var(--vc) 6%,rgba(255,255,255,.47));
  --glass-edge:color-mix(in srgb,var(--vc) 22%,rgba(255,255,255,.55));
}

/* Scrim : fond sombre flouté derrière une modale */
.glass-scrim{
  background:var(--glass-scrim-bg);
  -webkit-backdrop-filter:blur(var(--glass-scrim-blur));
  backdrop-filter:blur(var(--glass-scrim-blur));
}