/* =========================================================================
   Liquid Glass — CSS réutilisable (réfraction SVG + repli frosted glass)
   Technique : displacement map SVG en backdrop-filter (Snell-Descartes).
   La réfraction réelle nécessite Chromium ; sinon repli flou automatique.
   À coupler avec liquid-glass.js (génère les filtres SVG par élément).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Variables réglables — surchargeables par élément :
     inline style  : style="--lg-radius: 40px"
     classe utilitaire : voir variantes ci-dessous
     data-attribute : data-lg-bezel="20" (lu par liquid-glass.js)
   ------------------------------------------------------------------------- */
.lg {
  /* Géométrie optique (lues par liquid-glass.js pour la displacement map) */
  --lg-radius:    28px;   /* rayon des coins — doit matcher border-radius     */
  --lg-bezel:     16px;   /* largeur du biseau réfractant depuis le bord      */
  --lg-thickness: 28px;   /* épaisseur optique du verre (force de courbure)   */
  --lg-ior:        1.5;   /* indice de réfraction (1.0 = air, 1.5 = verre)    */

  /* Aspect visuel (CSS pur, cross-browser) */
  --lg-blur:      1px;    /* flou du fond (remplacé par le filtre SVG si dispo)*/
  --lg-saturate:  1.6;    /* saturation du fond (effet "vivant")              */
  --lg-tint:      rgba(255, 255, 255, 0.08); /* teinte de surface             */
  --lg-specular:  0.55;   /* intensité des reflets/bords lumineux (0–1)       */
  --lg-shadow:    0.18;   /* intensité de l'ombre portée (0–1)                */

  position:         relative;
  border-radius:    var(--lg-radius);
  background-color: var(--lg-tint);
  isolation:        isolate;  /* empêche le ::before screen de fuiter hors du composant */

  /* Repli universel — remplacé par le filtre SVG sur Chromium */
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
          backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));

  /* Transition douce pour le toggle dark/light */
  transition: background-color 0.4s ease, box-shadow 0.4s ease;

  /* Reflets internes + ombre portée (la bordure dégradée est gérée par ::after) */
  box-shadow:
    inset 0  1px 1.5px rgba(255, 255, 255, calc(0.75 * var(--lg-specular))),
    inset 0 -1px 1px   rgba(255, 255, 255, calc(0.30 * var(--lg-specular))),
    0  6px 22px        rgba(0,   0,   0,   calc(0.90 * var(--lg-shadow))),
    0  2px  6px        rgba(0,   0,   0,   calc(0.70 * var(--lg-shadow)));
}

/* Reflet spéculaire : arc lumineux en haut + voile diagonal
   Pseudo-élément non interactif, placé sous le contenu via z-index: -1.    */
.lg::before {
  content: "";
  position:       absolute;
  inset:          0;
  border-radius:  inherit;
  pointer-events: none;
  z-index:        -1;
  background:
    radial-gradient(
      120% 80% at 30% 0%,
      rgba(255, 255, 255, calc(0.45 * var(--lg-specular))) 0%,
      rgba(255, 255, 255, 0) 45%
    ),
    linear-gradient(
      130deg,
      rgba(255, 255, 255, calc(0.18 * var(--lg-specular))) 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, calc(0.10 * var(--lg-specular))) 100%
    );
  mix-blend-mode: screen;
}

/* Bordure dégradée — simule le liseré en verre (plus clair en haut, plus sombre en bas) */
.lg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, calc(0.55 * var(--lg-specular))) 0%,
    rgba(255, 255, 255, calc(0.20 * var(--lg-specular))) 35%,
    rgba(255, 255, 255, calc(0.04 * var(--lg-specular))) 65%,
    rgba(0,   0,   0,   calc(0.20 * var(--lg-shadow)))   100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Les enfants directs restent au-dessus des reflets */
.lg > * {
  position: relative;
  z-index:  1;
}

/* -------------------------------------------------------------------------
   Mode light — adapte la teinte et les ombres sur fond clair
   ------------------------------------------------------------------------- */
[data-theme="light"] .lg {
  --lg-tint:     rgba(255, 255, 255, 0.45);
  --lg-shadow:   0.08;
  --lg-specular: 0.40;
}

[data-theme="light"] .lg--dark {
  --lg-tint: rgba(20, 20, 24, 0.12);
}

/* -------------------------------------------------------------------------
   Variantes de surface — le nom de la classe est lu par liquid-glass.js
   pour choisir la fonction de courbure de la displacement map.
   convex   : dôme — réfraction douce, effet "loupe" sur les bords (défaut)
   squircle : transition flat→courbe très douce (idéal pour rectangles)
   concave  : creux — diverge la lumière vers l'extérieur
   lip      : rebord relevé + centre légèrement creusé (style "Switch")
   (pas de .lg--convex : convex est le comportement par défaut du moteur JS)
   ------------------------------------------------------------------------- */
.lg--squircle { --lg-surface: squircle; }
.lg--concave  { --lg-surface: concave;  }
.lg--lip      { --lg-surface: lip;      }

/* -------------------------------------------------------------------------
   Préréglages de forme / contexte
   ------------------------------------------------------------------------- */

/* Pilule — bouton ou badge */
.lg--pill {
  --lg-radius:    999px;
  --lg-bezel:     12px;
  --lg-thickness: 22px;
  padding:        0.7em 1.4em;
  display:        inline-flex;
  align-items:    center;
  gap:            0.5em;
  overflow:       hidden; /* empêche le contenu de déborder les coins arrondis */
}

/* Carte */
.lg--card {
  --lg-radius:    24px;
  --lg-bezel:     20px;
  --lg-thickness: 34px;
  padding:        1.5rem;
}

/* Barre — navbar, toolbar */
.lg--bar {
  --lg-radius:    20px;
  --lg-bezel:     14px;
  --lg-thickness: 24px;
  overflow:       hidden;
}

/* Item de navigation — lien dans une barre ou une pilule */
.lg--nav-item {
  --lg-radius:    999px;
  --lg-bezel:     10px;
  --lg-thickness: 18px;
  --lg-shadow:    0.10;
  padding:        0.45em 1.1em;
  display:        inline-flex;
  align-items:    center;
  cursor:         pointer;
  text-decoration: none;
  transition:     background-color 0.2s ease, box-shadow 0.2s ease;
}
.lg--nav-item:hover {
  --lg-tint: rgba(255, 255, 255, 0.14);
}

/* ── Pilule dont le fond passe en couleur accent au survol ────────
   À combiner avec "lg lg--pill" (le glass reste pour l'état de repos,
   le fond bascule en accent plein au hover — même logique que le
   bouton d'envoi des formulaires). !important nécessaire : Kadence
   (thème parent) réinitialise le fond des liens/boutons au survol
   avec une règle plus spécifique que celle-ci sinon.
   Usage Gutenberg : "lg lg--pill lg--pill-accent-hover" sur un bouton. */
.lg--pill-accent-hover {
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.lg--pill-accent-hover:hover {
  background-color: var(--color-accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--color-accent) 50%, transparent);
}

/* -------------------------------------------------------------------------
   Modificateurs de RÉFRACTION — agissent uniquement sur la displacement map
   (thickness, bezel, ior). N'affectent pas le blur ni la saturation.
   Combinables librement avec les modificateurs de blur ci-dessous.
   ------------------------------------------------------------------------- */

.lg--subtle {
  --lg-thickness: 16px;
  --lg-bezel:     10px;
  --lg-ior:       1.35;
}

.lg--strong {
  --lg-thickness: 48px;
  --lg-bezel:     22px;
  --lg-ior:       1.6;
}

.lg--extreme {
  --lg-thickness: 72px;
  --lg-bezel:     32px;
  --lg-ior:       1.8;
  --lg-specular:  0.80;  /* reflets renforcés cohérents avec la réfraction max */
}

/* -------------------------------------------------------------------------
   Modificateurs de BLUR — agissent uniquement sur le flou et la saturation.
   Combinables librement avec les modificateurs de réfraction ci-dessus.

   Exemples :
     lg--extreme lg--blur-subtle  → réfraction max, verre quasi transparent
     lg--subtle  lg--blur-strong  → légère distorsion, fond très flouté
     lg--extreme                  → réfraction max, blur par défaut (1px)
   ------------------------------------------------------------------------- */

.lg--blur-subtle {
  --lg-blur:     4px;
  --lg-saturate: 1.3;
}

.lg--blur-strong {
  --lg-blur:     8px;
  --lg-saturate: 1.8;
}

.lg--blur-extreme {
  --lg-blur:     12px;
  --lg-saturate: 2.0;
}

/* -------------------------------------------------------------------------
   Modificateurs de TEINTE
   S'appuient sur les variables --color-* globales (menu.css) pour suivre
   automatiquement le dark/light mode.
   Surcharge possible par inline style : style="--lg-tint: rgba(...)"
   ------------------------------------------------------------------------- */

/* Sombre neutre */
.lg--dark {
  --lg-tint: rgba(20, 20, 24, 0.18);
}

/* Cyan / bleu électrique — accent primaire LDNR */
.lg--tint-cyan {
  --lg-tint: rgba(0, 194, 255, 0.08);
}
[data-theme="light"] .lg--tint-cyan {
  --lg-tint: rgba(0, 194, 255, 0.14);
}

/* Violet / purple — accent secondaire LDNR */
.lg--tint-purple {
  --lg-tint: rgba(155, 48, 255, 0.10);
}
[data-theme="light"] .lg--tint-purple {
  --lg-tint: rgba(155, 48, 255, 0.12);
}

/* Teal / vert-bleu */
.lg--tint-teal {
  --lg-tint: rgba(0, 212, 176, 0.08);
}
[data-theme="light"] .lg--tint-teal {
  --lg-tint: rgba(0, 212, 176, 0.12);
}

/* Neutre blanc — surface légère (défaut light) */
.lg--tint-neutral {
  --lg-tint: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .lg--tint-neutral {
  --lg-tint: rgba(255, 255, 255, 0.55);
}

/* -------------------------------------------------------------------------
   Repli CSS — ajouté par liquid-glass.js sur les navigateurs sans support
   de url() en backdrop-filter (Firefox, Safari < 18…).
   Monte le blur pour compenser visuellement l'absence de réfraction SVG.
   ------------------------------------------------------------------------- */
.lg.lg--no-refraction              { --lg-blur: 8px;  }
.lg.lg--no-refraction.lg--subtle   { --lg-blur: 5px;  }
.lg.lg--no-refraction.lg--strong   { --lg-blur: 12px; }
.lg.lg--no-refraction.lg--extreme  { --lg-blur: 16px; }

/* -------------------------------------------------------------------------
   Accessibilité
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lg,
  .lg--nav-item {
    transition: none !important;
  }
}