/* ============================================================
   Atomne — Design system commun de l'app (sombre + clair)
   Chargé APRÈS le <style> de chaque page → affine tout.
   Ne touche qu'à l'habillage (couleurs/bordures/ombres/typo/hover),
   jamais à la structure (grilles/positions).
   ============================================================ */

:root{
  --at-blue:#2563EB; --at-blue-soft:#3B82F6; --at-blue-lite:#60A5FA;
  --at-radius:16px; --at-radius-sm:12px;
  --at-ease:cubic-bezier(.22,1,.36,1);
}
/* --- palette par thème --- */
:root[data-theme="dark"]{
  --at-bg:#07090D; --at-bg2:#0A0C11;
  --at-card:#0F1319; --at-card2:#151922;
  --at-line:rgba(255,255,255,.075); --at-line2:rgba(255,255,255,.14);
  --at-tx:#EEF1F6; --at-tx2:#9AA2AF; --at-tx3:#5A616D;
  --at-shadow:0 24px 60px -30px rgba(0,0,0,.75);
  --at-shadow-hover:0 30px 70px -28px rgba(0,0,0,.85);
  --at-card-grad:linear-gradient(180deg,rgba(255,255,255,.014),transparent 60%);
}
:root[data-theme="light"]{
  --at-bg:#F4F6FB; --at-bg2:#EEF2F9;
  --at-card:#FFFFFF; --at-card2:#F5F7FB;
  --at-line:#E7EBF2; --at-line2:#D6DCE7;
  --at-tx:#0F172A; --at-tx2:#5B6473; --at-tx3:#98A2B3;
  --at-shadow:0 12px 34px -18px rgba(15,23,42,.16);
  --at-shadow-hover:0 20px 44px -18px rgba(15,23,42,.24);
  --at-card-grad:linear-gradient(180deg,rgba(15,23,42,.012),transparent 60%);
}

/* --- fond + halo doux global --- */
body{ background:var(--at-bg) !important; color:var(--at-tx); }
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(720px 440px at 100% -8%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(620px 420px at -6% 6%, rgba(59,130,246,.07), transparent 58%);
}
:root[data-theme="light"] body::after{
  background:
    radial-gradient(760px 460px at 100% -8%, rgba(37,99,235,.07), transparent 60%),
    radial-gradient(640px 440px at -6% 6%, rgba(59,130,246,.05), transparent 58%);
}
.app,.side,main,.main,.msgr,nav{ position:relative; z-index:1; }

/* --- scrollbars fines --- */
*{ scrollbar-width:thin; scrollbar-color:var(--at-line2) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--at-line2); border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--at-blue-soft); background-clip:padding-box; }

/* --- typo affinée --- */
h1,h2,h3,h4{ letter-spacing:-.025em; }
::selection{ background:rgba(59,130,246,.32); color:#fff; }

/* ============ BARRE LATÉRALE (identique partout, sombre dans les 2 thèmes) ============ */
.side{
  background:linear-gradient(180deg,#0B1220 0%,#0F172A 45%,#0d1a30 100%) !important;
  border-right:1px solid rgba(148,163,184,.14) !important;
  padding:20px 14px !important;
}
.side .logo,.side .userchip .nm{ color:#fff !important; }
.side .userchip{ border-color:rgba(255,255,255,.12) !important; background:rgba(255,255,255,.05) !important; }
.side .userchip .pl{ color:#94A3B8 !important; }
.side .ctx{ color:var(--at-blue-lite) !important; background:rgba(59,130,246,.14) !important; border:1px solid rgba(59,130,246,.25) !important; }
.side .logo{ letter-spacing:-.02em; }
.nav-lbl{ color:var(--at-tx3) !important; font-size:10.5px !important; letter-spacing:.13em !important; }
.nav-i{ border-radius:11px !important; font-size:13.5px !important; color:#c3cbd8 !important; padding:9px 11px !important; transition:background .18s var(--at-ease),color .18s !important; }
.nav-i svg{ color:#7a869c !important; }
.nav-i:hover{ background:rgba(255,255,255,.055) !important; color:#fff !important; }
.nav-i:hover svg{ color:#cdd6e4 !important; }
.nav-i.active{ background:linear-gradient(90deg,rgba(37,99,235,.32),rgba(37,99,235,.14)) !important; color:#fff !important; box-shadow:inset 2px 0 0 var(--at-blue-lite); }
.nav-i.active svg{ color:var(--at-blue-lite) !important; }
.nav-i .badge{ background:var(--at-blue) !important; box-shadow:0 4px 12px -4px rgba(37,99,235,.9); }

/* ============ CARTES / SURFACES ============ */
.card,.stat,.rcard,.rescard,.lcard,.near-card,.rec-card,.pipe-col,.da-item,
.panel,.setup,.chatc,.plan,.info-cell,.notif-panel,.alerts-panel,.mcard,.doc-card,
.reco-skel,.skel{
  background-color:var(--at-card) !important;
  background-image:var(--at-card-grad) !important;
  border:1px solid var(--at-line) !important;
  border-radius:var(--at-radius) !important;
  box-shadow:var(--at-shadow);
  transition:transform .3s var(--at-ease), box-shadow .3s var(--at-ease), border-color .3s var(--at-ease) !important;
}
/* survol premium pour les cartes cliquables/mises en avant */
.stat:hover,.rcard:hover,.rescard:hover,.near-card:hover,.rec-card:hover,
.da-item:hover,.plan:hover,.u-card:hover,.lcard:hover{
  transform:translateY(-3px);
  border-color:var(--at-line2) !important;
  box-shadow:var(--at-shadow-hover) !important;
}
/* liseré bleu discret en haut des cartes fortes */
.plan.featured,.plan.feat{ border-color:rgba(59,130,246,.55) !important; box-shadow:0 0 0 1px rgba(59,130,246,.4),var(--at-shadow-hover) !important; }

/* champs internes clairs (chips, cellules) */
.info-cell,.mopt,.fopt,.co-contact,.sug-chip{ background:var(--at-card2) !important; border-color:var(--at-line) !important; }

/* ============ EN-TÊTES DE PAGE ============ */
.phead h1,.mtop + .phead h1{ letter-spacing:-.03em; }
.demo-banner{ border-radius:var(--at-radius-sm) !important; }

/* ============ BOUTONS ============ */
.btn-primary,.start,.prompt-go,.gp-btn.blue{
  background:linear-gradient(135deg,var(--at-blue-soft),var(--at-blue) 60%,#1D4ED8) !important;
  box-shadow:0 12px 30px -14px rgba(37,99,235,.85) !important;
  transition:transform .2s var(--at-ease), box-shadow .2s var(--at-ease), filter .2s !important;
}
.btn-primary:hover,.start:hover,.prompt-go:hover{ transform:translateY(-1px); filter:brightness(1.06); }
/* pilule blanche premium */
.newbtn,.gp-btn,.btn-white{ box-shadow:0 0 0 1px rgba(255,255,255,.85),0 10px 26px -12px rgba(255,255,255,.35) !important; }
:root[data-theme="light"] .newbtn,:root[data-theme="light"] .gp-btn{
  background:var(--at-blue) !important; color:#fff !important; box-shadow:0 10px 24px -12px rgba(37,99,235,.7) !important;
}

/* ============ CHAMPS DE SAISIE ============ */
.field input,.field textarea,.field select,.fl input,.fl select,
.composer input,.chat-in input,.mcard input,.search input,.searchbar input{
  background:var(--at-card2) !important; border:1px solid var(--at-line2) !important;
  color:var(--at-tx) !important; border-radius:var(--at-radius-sm) !important;
  transition:border-color .2s, box-shadow .2s !important;
}
.field input:focus,.field textarea:focus,.fl input:focus,.composer input:focus,
.chat-in input:focus,.mcard input:focus,.searchbar input:focus{
  border-color:var(--at-blue) !important; box-shadow:0 0 0 3px rgba(37,99,235,.18) !important;
}

/* ============ FINITIONS THÈME CLAIR ============ */
:root[data-theme="light"] .nav-i{ color:#334155 !important; }
:root[data-theme="light"] .nav-i svg{ color:#94A3B8 !important; }
:root[data-theme="light"] .nav-i:hover{ background:#F1F4F9 !important; color:#0F172A !important; }
:root[data-theme="light"] .nav-i.active{ background:#EAF0FE !important; color:var(--at-blue) !important; box-shadow:inset 2px 0 0 var(--at-blue); }
:root[data-theme="light"] .nav-i.active svg{ color:var(--at-blue) !important; }
/* dans l'app, la barre latérale reste sombre (identité) même en clair — on garde son texte clair */
:root[data-theme="light"] .side .nav-i{ color:#c3cbd8 !important; }
:root[data-theme="light"] .side .nav-i svg{ color:#7a869c !important; }
:root[data-theme="light"] .side .nav-i:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
:root[data-theme="light"] .side .nav-i.active{ background:linear-gradient(90deg,rgba(37,99,235,.32),rgba(37,99,235,.14)) !important; color:#fff !important; }
:root[data-theme="light"] .side .nav-i.active svg{ color:var(--at-blue-lite) !important; }