/* =====================================================================
   APG · liquid-glass.css — design system « Liquid Glass »
   Accent bordeaux · typographies Fraunces (titres) + Manrope (texte).
   Réf §2/§3 (design system) et §8.8 (UI validée).

   Composants : .lg-surface (+ --strong/--subtle/--pill/--sm/--refract),
   .lg-btn, .lg-chip, .lg-segmented. Tokens --lg-* clair/sombre automatiques.
   Accessibilité : prefers-reduced-transparency, prefers-reduced-motion,
   @supports not (backdrop-filter), contraste WCAG AA.
   ===================================================================== */

:root {
  /* Accent bordeaux + dérivés (alignés sur la maquette validée demo-situation-bulles). */
  --lg-accent:        #9d2f52;
  --lg-accent-strong: #75203c;
  --lg-accent-soft:   #f4e1e8;
  --lg-accent-contrast: #ffffff;

  /* Surfaces de verre (clair). */
  --lg-glass-bg:      rgba(255, 255, 255, 0.60);
  --lg-glass-strong:  rgba(255, 255, 255, 0.88);
  --lg-glass-subtle:  rgba(255, 255, 255, 0.42);
  --lg-glass-border:  rgba(255, 255, 255, 0.72);
  --lg-shadow:        0 18px 50px -16px rgba(60, 20, 40, 0.45);
  --lg-blur:          18px;

  /* Texte. */
  --lg-text:          #2c2630;
  --lg-text-soft:     #6f6873;

  /* Lignes / séparateurs (maquette). */
  --lg-line:          rgba(60, 40, 55, 0.12);

  /* Rayons & espacements. */
  --lg-radius:        20px;
  --lg-radius-sm:     12px;
  --lg-gap:           14px;
  --lg-tab-h:         66px;

  /* Polices. */
  --lg-font-title: "Fraunces", Georgia, "Times New Roman", serif;
  --lg-font-body:  "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --lg-transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Thème sombre -----
   Piloté par l'attribut html[data-theme] (réglage utilisateur, réf §8.6 : réglage > capteur > heure) :
   - data-theme="dark"  → toujours sombre,
   - data-theme="light" → toujours clair (valeurs :root par défaut),
   - data-theme="auto" (ou absent) → suit le système (prefers-color-scheme). */
:root[data-theme="dark"] {
  --lg-accent:        #c98aa0;
  --lg-accent-strong: #e0a9bb;
  --lg-accent-soft:   #3a1f29;
  --lg-accent-contrast: #1a0d13;
  --lg-glass-bg:      rgba(28, 18, 24, 0.55);
  --lg-glass-strong:  rgba(34, 22, 29, 0.78);
  --lg-glass-subtle:  rgba(28, 18, 24, 0.36);
  --lg-glass-border:  rgba(255, 255, 255, 0.14);
  --lg-line:          rgba(255, 255, 255, 0.12);
  --lg-shadow:        0 18px 50px -16px rgba(0, 0, 0, 0.6);
  --lg-text:          #f4ecef;
  --lg-text-soft:     #c9b8c0;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --lg-accent:        #c98aa0;
    --lg-accent-strong: #e0a9bb;
    --lg-accent-soft:   #3a1f29;
    --lg-accent-contrast: #1a0d13;
    --lg-glass-bg:      rgba(28, 18, 24, 0.55);
    --lg-glass-strong:  rgba(34, 22, 29, 0.78);
    --lg-glass-subtle:  rgba(28, 18, 24, 0.36);
    --lg-glass-border:  rgba(255, 255, 255, 0.14);
    --lg-line:          rgba(255, 255, 255, 0.12);
    --lg-shadow:        0 18px 50px -16px rgba(0, 0, 0, 0.6);
    --lg-text:          #f4ecef;
    --lg-text-soft:     #c9b8c0;
  }
}

/* ----- Surface de verre ----- */
.lg-surface {
  background: var(--lg-glass-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(140%);
  backdrop-filter: blur(var(--lg-blur)) saturate(140%);
  border: 1px solid var(--lg-glass-border);
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow);
  color: var(--lg-text);
}

.lg-surface--strong { background: var(--lg-glass-strong); }
.lg-surface--subtle { background: var(--lg-glass-subtle); }
.lg-surface--sm     { border-radius: var(--lg-radius-sm); }
.lg-surface--pill   { border-radius: 999px; }
.lg-surface--refract { filter: url("#lgDistort"); }

/* ----- Boutons ----- */
.lg-btn {
  font-family: var(--lg-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--lg-glass-border);
  background: var(--lg-glass-strong);
  color: var(--lg-text);
  cursor: pointer;
  transition: transform var(--lg-transition), background var(--lg-transition);
  -webkit-backdrop-filter: blur(var(--lg-blur));
  backdrop-filter: blur(var(--lg-blur));
}
.lg-btn:hover  { transform: translateY(-1px); }
.lg-btn:active { transform: translateY(0); }
.lg-btn--accent {
  background: var(--lg-accent);
  color: var(--lg-accent-contrast);
  border-color: transparent;
}
.lg-btn:focus-visible { outline: 3px solid var(--lg-accent); outline-offset: 2px; }

/* ----- Chips (sélections) ----- */
.lg-chip {
  font-family: var(--lg-font-body);
  font-size: 0.88rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--lg-glass-border);
  background: var(--lg-glass-subtle);
  color: var(--lg-text);
  cursor: pointer;
  transition: background var(--lg-transition);
}
.lg-chip[aria-pressed="true"] {
  background: var(--lg-accent);
  color: var(--lg-accent-contrast);
  border-color: transparent;
}
.lg-chip:focus-visible { outline: 3px solid var(--lg-accent); outline-offset: 2px; }

/* ----- Contrôle segmenté ----- */
.lg-segmented {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: var(--lg-glass-subtle);
  border: 1px solid var(--lg-glass-border);
}
.lg-segmented > button {
  border: 0;
  background: transparent;
  color: var(--lg-text-soft);
  font-family: var(--lg-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
}
.lg-segmented > button[aria-pressed="true"] {
  background: var(--lg-accent);
  color: var(--lg-accent-contrast);
}

/* ----- Typographie ----- */
.lg-title {
  font-family: var(--lg-font-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lg-text);
  margin: 0;
}
.lg-text { font-family: var(--lg-font-body); color: var(--lg-text); }
.lg-muted { color: var(--lg-text-soft); }

/* =====================================================================
   Accessibilité & performance (réf §3 design system)
   ===================================================================== */

/* Transparence réduite → fonds opaques. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --lg-glass-bg:     #ffffff;
    --lg-glass-strong: #ffffff;
    --lg-glass-subtle: #f1ebed;
  }
  .lg-surface, .lg-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-theme="dark"] { --lg-glass-bg: #1c1218; --lg-glass-strong: #241620; --lg-glass-subtle: #1c1218; }
  @media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] { --lg-glass-bg: #1c1218; --lg-glass-strong: #241620; --lg-glass-subtle: #1c1218; }
  }
}

/* Repli si backdrop-filter non supporté → fonds opaques. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --lg-glass-bg:     #ffffffee;
    --lg-glass-strong: #fffffff7;
    --lg-glass-subtle: #ffffffdd;
  }
  @media (prefers-color-scheme: dark) {
    :root { --lg-glass-bg: #1c1218ee; --lg-glass-strong: #241620f7; --lg-glass-subtle: #1c1218dd; }
  }
}

/* Mouvement réduit → pas d'animations. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}