/* ============================================================
   theme.css — Thème partagé "Glassmorphism + Aurora"
   Appliqué à toutes les pages du portail (web.noip.ovh).
   Calqué sur la refonte du dashboard (2026-06-20).

   Principe : surchargé APRÈS le <style> inline de chaque page
   (lien placé juste avant </head>), il redéfinit les tokens
   communs (--bg-a, --surface, --text, --accent1…) déjà utilisés
   par les pages → recoloration cohérente sans toucher au layout.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── TOKENS : THÈME SOMBRE ── */
:root,
[data-theme="dark"] {
  --bg-a:        #070b16;
  --bg-b:        #0a1124;
  --bg-c:        #091528;
  --bg:          #070b16;
  --surface:     rgba(16,26,48,0.62);
  --surface-2:   rgba(23,36,62,0.74);
  --surface2:    rgba(23,36,62,0.74);
  --border:      rgba(255,255,255,0.09);
  --text:        #eef2f9;
  --text-2:      #8a99b5;

  --neo-l:       rgba(255,255,255,0.04);
  --neo-d:       rgba(0,0,0,0.45);
  --neo-light:   rgba(255,255,255,0.04);
  --neo-dark:    rgba(0,0,0,0.45);
  --shadow:      0 18px 40px -18px rgba(0,0,0,0.65);

  --aurora-1:    rgba(79,142,247,0.28);
  --aurora-2:    rgba(157,108,255,0.24);
  --aurora-3:    rgba(45,212,191,0.18);
}

/* ── TOKENS : THÈME CLAIR ── */
[data-theme="light"] {
  --bg-a:        #eef2fa;
  --bg-b:        #e3eaf6;
  --bg-c:        #e8eef8;
  --bg:          #eef2fa;
  --surface:     rgba(255,255,255,0.62);
  --surface-2:   rgba(255,255,255,0.80);
  --surface2:    rgba(255,255,255,0.80);
  --border:      rgba(120,140,175,0.20);
  --text:        #18233f;
  --text-2:      #56627d;

  --neo-l:       rgba(255,255,255,0.80);
  --neo-d:       rgba(160,175,200,0.45);
  --neo-light:   rgba(255,255,255,0.80);
  --neo-dark:    rgba(160,175,200,0.45);
  --shadow:      0 18px 40px -22px rgba(40,60,100,0.40);

  --aurora-1:    rgba(46,114,232,0.20);
  --aurora-2:    rgba(124,58,237,0.14);
  --aurora-3:    rgba(13,148,136,0.14);
}

/* ── FOND AURORA (sans pseudo-élément → aucun conflit) ── */
body {
  background: var(--bg-a) !important;
  background-image:
    radial-gradient(46vw 46vw at 8% -8%,  var(--aurora-1) 0%, transparent 60%),
    radial-gradient(50vw 50vw at 100% 108%, var(--aurora-2) 0%, transparent 60%),
    radial-gradient(40vw 40vw at 70% 100%, var(--aurora-3) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
}
/* NB : la police n'est PAS imposée ici — chaque page garde la sienne
   (pages PHP basculées en Inter ; budget/planning/wallet gardent Syne/DM Mono). */

/* ── EFFET VERRE sur les surfaces translucides ──
   Ajoute le flou d'arrière-plan aux conteneurs qui s'appuient sur
   les tokens de surface, pour le rendu "frosted glass". */
[data-theme="dark"] .neo,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .glass {
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}

/* Utilitaire glass réutilisable */
.glass-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}