/* =====================================================================================================================
   Verre liquide (glassEffect d'iOS 26) et matériau givré (.ultraThinMaterial), en CSS.
   Recette calibrée sur les captures de l'app (pixels mesurés à 3x, fond sombre ≈ #0C0B0A / #07090C) :
     - CarteVerre / Carte, Bilan     : le fond remonte de ≈ +13 par canal, neutre       → voile blanc ≈ 5,5 %
     - CarteVerre / Carte, Moniteur  : (7,9,12) → (19,31,35)                              → blanc 4 % + #0F4A52 à 18 %
     - Groupe (givré), Bilan         : (12,11,9) → (37,37,35), désaturé                   → blanc ≈ 10 %
     - Groupe (givré), Moniteur      : (7,9,12) → (32,40,42)                              → blanc ≈ 9 % + #0F4A52 à 10 %
     - BoutonRond / pilules          : (12,11,10) → (23,21,20), liseré ≈ blanc 14 %
   Règles (relevé 05 § 1.4) : jamais de verre dans du verre (utiliser .ak-dans-verre), jamais de filter / opacity animée /
   mask / will-change:opacity sur un PARENT d'un élément en verre ; l'appui (.interactive()) ne joue que sur transform.
   Réfraction SVG : bonus Chromium de bureau, seulement si <html class="ak-refraction"> (posée par activerRefraction()).
   ===================================================================================================================== */

/* ---------- verre liquide : glassEffect(.regular) ---------- */
.ak-verre {
  position: relative;
  isolation: isolate;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(var(--voile-verre), var(--voile-verre));
  -webkit-backdrop-filter: blur(14px) saturate(1.5) brightness(0.86);
  backdrop-filter: blur(14px) saturate(1.5) brightness(0.86);
  border: var(--trait-fin) solid var(--lisere-verre-espace);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.10),       /* reflet du bord haut */
    0 8px 28px rgba(0, 0, 0, 0.22);                   /* ombre portée douce */
}
[data-espace="moniteur"] .ak-verre { background-color: rgba(255, 255, 255, 0.055); }

/* Reflet spéculaire : liseré plus clair en haut à gauche et en bas à droite (masque en anneau, pas de fond). */
.ak-verre::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.75px;
  background: linear-gradient(140deg,
    rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.04) 28%,
    rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.10) 100%);
  -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);
  pointer-events: none;
  z-index: -1;   /* backdrop-filter crée un contexte d'empilement : le reflet passe sous le contenu, sur le fond */
}

/* .interactive() : léger gonflement et éclat sous le doigt (transform + fond seulement, jamais filter : bug WebKit 322849) */
.ak-verre--interactif {
  transition:
    transform var(--duree-doux) var(--ressort),
    background-color 160ms ease-out;
  transform: translateZ(0);
}
.ak-verre--interactif:active,
.ak-verre--interactif.ak-presse {
  transform: scale(1.04);
  background-color: rgba(255, 255, 255, 0.11);
}
@media (hover: hover) and (pointer: fine) {
  .ak-verre--interactif:hover { background-color: rgba(255, 255, 255, 0.08); }
  [data-espace="moniteur"] .ak-verre--interactif:hover { background-color: rgba(255, 255, 255, 0.07); }
}

/* Voile de teinte (puces de filtre actives : teinte à 42 %, texte blanc) */
.ak-verre--teinte {
  background-image: linear-gradient(
    color-mix(in srgb, var(--couleur-teinte) 42%, transparent),
    color-mix(in srgb, var(--couleur-teinte) 42%, transparent));
}

/* Verre sans ombre portée (pilules posées sur une image, segments) */
.ak-verre--plat { box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.10); }

/* ---------- formes ---------- */
/* RoundedRectangle(style: .continuous) : squircle d'Apple ; border-radius standard (corner-shape indisponible sur Safari). */
.ak-forme-capsule { border-radius: var(--rayon-capsule); }
.ak-forme-rond    { border-radius: 50%; aspect-ratio: 1; }
.ak-forme-10 { border-radius: var(--rayon-md); }
.ak-forme-16 { border-radius: var(--rayon-lg); }
.ak-forme-20 { border-radius: var(--rayon-xl); }
.ak-forme-30 { border-radius: var(--rayon-bulle); }

/* ---------- matériau givré : .ultraThinMaterial (Groupe, Login) ---------- */
.ak-givre {
  position: relative;
  background-color: rgba(255, 255, 255, 0.115);
  background-image: linear-gradient(var(--voile-givre), var(--voile-givre));
  -webkit-backdrop-filter: blur(24px) saturate(1.15) brightness(0.8);
  backdrop-filter: blur(24px) saturate(1.15) brightness(0.8);
  border: var(--trait-fin) solid var(--couleur-lisere-verre);
}
[data-espace="moniteur"] .ak-givre { background-color: rgba(255, 255, 255, 0.11); }

/* ---------- panneau dans une feuille (\.feuille == true) : aucun fond, liseré blanc 10 % ---------- */
.ak-panneau-feuille { background: none; border: var(--trait-fin) solid var(--couleur-lisere-verre); }

/* ---------- élément « verre » posé DANS du verre : pas de second backdrop-filter ---------- */
.ak-dans-verre {
  background-color: rgba(255, 255, 255, 0.07);
  border: var(--trait-fin) solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.10);
}

/* ---------- surface opaque (fiches du bilan du soir) ---------- */
.ak-opaque { background: var(--couleur-surface); }

/* ---------- transparence réduite : verre remplacé par une surface opaque ---------- */
@media (prefers-reduced-transparency: reduce) {
  .ak-verre, .ak-givre {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background-color: var(--couleur-surface-2);
  }
}

/* ---------- réfraction (bonus Chromium de bureau ; filtre #ak-lentille injecté par activerRefraction()) ----------
   Réservée aux petites surfaces interactives (boutons, bulles, capsules) : jamais sur un grand panneau. */
html.ak-refraction .ak-verre--interactif {
  backdrop-filter: blur(10px) saturate(1.5) brightness(0.86) url(#ak-lentille);
}