:root{
  --bg:#080C1A; --bg2:#101733; --primary:#7C5CFC; --accent:#22D3EE; --lagon:#34E0C8;
  --dawn:#FFB37A;
  --ink:#EEF1FB; --muted:#97A2C4; --border:rgba(255,255,255,.10);
}

html,body{ background:var(--bg); }
body{ overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Typo : titres serrés et équilibrés */
.font-display{ letter-spacing:-0.02em; }
h1,h2{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* Halos d'ambiance en fond — "Atea", l'expanse du Pacifique */
.bg-halo{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70rem 46rem at 78% -12%, rgba(124,92,252,.26), transparent 60%),
    radial-gradient(52rem 40rem at 6% 4%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(44rem 32rem at 52% 116%, rgba(52,224,200,.12), transparent 60%),
    radial-gradient(30rem 22rem at 92% 70%, rgba(255,179,122,.08), transparent 60%);
}

/* Grain subtil pour la profondeur (très discret) */
.bg-halo::after{
  content:""; position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Glassmorphism — finition plus douce */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.glass-2{ background:linear-gradient(180deg,rgba(16,23,51,.9),rgba(11,16,32,.92)); border:1px solid var(--border); }

/* Boutons dégradé */
.btn-grad{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; color:#fff; letter-spacing:-0.01em;
  background:linear-gradient(120deg,#7C5CFC 0%,#6E7BFB 42%,#22D3EE 100%);
  box-shadow:0 10px 26px -8px rgba(124,92,252,.6), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, filter .2s ease;
}
.btn-grad:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -8px rgba(34,211,238,.55), inset 0 1px 0 rgba(255,255,255,.25); filter:brightness(1.05); }
.btn-grad:active{ transform:translateY(0); }
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; color:var(--ink); letter-spacing:-0.01em;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.btn-outline:hover{ border-color:rgba(34,211,238,.5); background:rgba(255,255,255,.07); transform:translateY(-1px); }

/* Texte dégradé */
.text-grad{
  background:linear-gradient(120deg,#B7A7FF,#7C5CFC 38%,#22D3EE 78%,#34E0C8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Bordure dégradée (carte populaire / accents) */
.ring-grad{ position:relative; }
.ring-grad::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,#7C5CFC,#22D3EE,#34E0C8);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* Carte avec halo de survol cohérent */
.card-hover{ transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease; }
.card-hover:hover{ transform:translateY(-4px); border-color:rgba(34,211,238,.28); box-shadow:0 24px 60px -28px rgba(34,211,238,.4); }

/* Reveal pour GSAP (état initial avant animation) */
.gsap-ready .reveal{ opacity:0; transform:translateY(24px); }

/* Scrollbar discrète */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.2); }

/* Badges statut facture */
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; }
.badge-success{ background:rgba(52,211,153,.14); color:#34D399; }
.badge-primary{ background:rgba(124,92,252,.18); color:#B7A7FF; }
.badge-danger{ background:rgba(251,113,133,.14); color:#FB7185; }
.badge-muted{ background:rgba(151,162,196,.14); color:#97A2C4; }

/* Liens app sidebar actif */
.app-link.active{ background:linear-gradient(90deg,rgba(124,92,252,.24),rgba(34,211,238,.08)); color:#fff; }
.app-link.active::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(#7C5CFC,#22D3EE); }

/* Leaflet sur fond sombre */
.leaflet-container{ background:#101733; }

/* Toggle pricing */
.toggle-pill{ transition:transform .28s cubic-bezier(.4,0,.2,1); }

/* Hairline séparatrice dégradée */
.hairline{ height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); border:0; }

/* Étoiles / scintillement discret du hero */
.starfield{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 68% 14%, rgba(183,167,255,.7), transparent),
    radial-gradient(1px 1px at 84% 48%, rgba(52,224,200,.6), transparent),
    radial-gradient(1.5px 1.5px at 38% 64%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 24% 82%, rgba(34,211,238,.6), transparent);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .gsap-ready .reveal{ opacity:1; transform:none; }
}