/* ============================================================================ THÈME CLIENT MODERNE — applique le design du dashboard WiFi à TOUT l'espace client (dashboard + Clients + Newsletters + Connexions) via une surcouche des variables CSS de style.css. Activé par . Deux variantes : 'aurora-light' (CLAIR, défaut) et 'aurora' (SOMBRE). Non destructif : sans data-theme (pages admin), style.css inchangé. ============================================================================ */ /* polices modernes (chargées par base.html en mode client) */ html[data-theme^="aurora"]{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; } html[data-theme^="aurora"] body{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; } html[data-theme^="aurora"] h1,html[data-theme^="aurora"] h2,html[data-theme^="aurora"] h3, html[data-theme^="aurora"] .page-title,html[data-theme^="aurora"] .kpi-value, html[data-theme^="aurora"] .big{ font-family:'Plus Jakarta Sans', system-ui, sans-serif; } /* rayons plus généreux (signature moderne) */ html[data-theme^="aurora"]{ --r-sm:10px; --r-md:14px; --r-lg:20px; } /* canvas réseau (injecté par base.html) derrière tout le contenu. Masqué par défaut (thème classique) → visible uniquement en moderne. */ #aurora-net{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;} html[data-theme^="aurora"] body > *{position:relative;z-index:1;} html[data-theme^="aurora"] #aurora-net{z-index:0;display:block;} /* zone de contenu transparente → le réseau respire */ html[data-theme^="aurora"] .page, html[data-theme^="aurora"] main.page{background:transparent;} /* ── topbar / nav en verre dépoli + liens "pill" ── */ html[data-theme^="aurora"] .topbar{ background:var(--glass-nav); backdrop-filter:blur(16px) saturate(1.18);-webkit-backdrop-filter:blur(16px) saturate(1.18); border-bottom:1px solid var(--border); } html[data-theme^="aurora"] .topnav a{ border-radius:999px;padding:8px 15px;font-weight:600; transition:background .18s var(--ease-out),color .18s var(--ease-out); } @media (hover:hover){html[data-theme^="aurora"] .topnav a:not(.active):hover{background:var(--accent-soft);}} html[data-theme^="aurora"] .topnav a.active{ background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff; } html[data-theme^="aurora"] .env-pill, html[data-theme^="aurora"] .user-pill{border-radius:999px;background:var(--surface);border:1px solid var(--border);} /* ── cartes en verre ── */ /* effet "liquid glass" : translucide + flou prononcé + reflet (sheen) + liseré */ html[data-theme^="aurora"] .card, html[data-theme^="aurora"] .panel, html[data-theme^="aurora"] .kpi{ background:linear-gradient(135deg,var(--glass-sheen),transparent 42%),var(--surface-glass); backdrop-filter:blur(9px) saturate(1.35);-webkit-backdrop-filter:blur(9px) saturate(1.35); border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--shadow-md), inset 0 1px 0 var(--glass-hi), inset 0 -1px 2px rgba(0,0,0,.05); } html[data-theme^="aurora"] .card{transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out);} @media (hover:hover) and (pointer:fine){html[data-theme^="aurora"] .card:hover{transform:translateY(-2px);}} /* ── boutons tactiles + CTA dégradé ── */ html[data-theme^="aurora"] .btn, html[data-theme^="aurora"] button.btn, html[data-theme^="aurora"] .btn-primary{border-radius:999px;transition:transform .15s var(--ease-out),filter .2s,box-shadow .2s;} html[data-theme^="aurora"] .btn:active{transform:scale(.97);} html[data-theme^="aurora"] .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;border:0;box-shadow:0 6px 16px -8px var(--accent);} @media (hover:hover){html[data-theme^="aurora"] .btn-primary:hover{filter:brightness(1.06);}} /* focus visible + scrollbars + inputs */ html[data-theme^="aurora"] a:focus-visible,html[data-theme^="aurora"] button:focus-visible, html[data-theme^="aurora"] input:focus-visible,html[data-theme^="aurora"] select:focus-visible{ outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent);} html[data-theme^="aurora"] *::-webkit-scrollbar{width:10px;height:10px;} html[data-theme^="aurora"] *::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:6px;} html[data-theme^="aurora"] *::-webkit-scrollbar-track{background:transparent;} /* ── bouton de bascule de thème, intégré à la topbar (à côté des pills) ── */ .theme-fab{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px; background:var(--surface);border:1px solid var(--border);color:var(--text); font:700 12.5px/1 'Plus Jakarta Sans',sans-serif;cursor:pointer; transition:transform .14s var(--ease-out),border-color .2s,background .2s;} .theme-fab:hover{border-color:var(--border-2)} .theme-fab:active{transform:scale(.95)} .theme-fab svg{width:17px;height:17px;flex:0 0 auto} @media(max-width:680px){.theme-fab span{display:none}.theme-fab{padding:9px}} /* ── sélecteur de thème segmenté (3 choix) — global, lisible en classique ET en moderne (hérite des tokens --surface/--border/--text de chaque thème) ── */ .theme-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px; background:var(--surface-2);border:1px solid var(--border);} .theme-switch .ts-opt{display:inline-flex;align-items:center;justify-content:center;gap:6px; height:28px;min-width:32px;padding:0 11px;border:0;border-radius:999px;background:transparent; color:var(--text-2);cursor:pointer;font-weight:600;font-size:12px;line-height:1; transition:background .15s,color .15s,box-shadow .15s;} .theme-switch .ts-opt:hover{color:var(--text);} .theme-switch .ts-opt.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);} .theme-switch .ts-opt[data-set-theme="aurora"].active{color:var(--accent);} .theme-switch .ts-opt svg{width:15px;height:15px;display:block;} @media(max-width:760px){.theme-switch .ts-opt .lbl{display:none}.theme-switch .ts-opt{padding:0 9px;min-width:30px}} @media (prefers-reduced-motion:reduce){#aurora-net{display:none;}} /* ───────────────────── VARIANTE CLAIRE (défaut) ───────────────────── */ html[data-theme="aurora-light"]{ --bg:#EAF0FB; --surface:#FFFFFF; --surface-2:#F4F7FD; --surface-glass:rgba(255,255,255,.44); --glass-nav:rgba(255,255,255,.78); --glass-hi:rgba(255,255,255,.85); --glass-sheen:rgba(255,255,255,.38); --border:rgba(30,60,120,.10); --border-2:rgba(30,60,120,.20); --text:#0F1B33; --text-2:#52607A; --text-3:#8A97AE; --accent:#2563EB; --accent-2:#3B82F6; --accent-soft:rgba(37,99,235,.10); --success:#15803D; --success-soft:rgba(16,128,61,.11); --warning:#B45309; --warning-soft:rgba(245,158,11,.13); --danger:#DC2626; --danger-soft:rgba(220,38,38,.10); --shadow-sm:0 1px 2px rgba(20,40,90,.05); --shadow-md:0 12px 30px -14px rgba(30,60,120,.16); --ease-out:cubic-bezier(.23,1,.32,1); --sb-thumb:rgba(30,60,120,.18); color-scheme:light; } html[data-theme="aurora-light"] body{ background: radial-gradient(1000px 700px at 85% -10%, rgba(59,130,246,.12) 0%, transparent 55%), radial-gradient(900px 650px at -5% 106%, rgba(245,158,11,.10) 0%, transparent 52%), #EEF2FB !important; } /* ───────────────────── VARIANTE SOMBRE ───────────────────── */ html[data-theme="aurora"]{ --bg:#0B1120; --surface:#141C30; --surface-2:#1A2440; --surface-glass:rgba(18,26,47,.34); --glass-nav:rgba(11,18,38,.70); --glass-hi:rgba(255,255,255,.08); --glass-sheen:rgba(255,255,255,.10); --border:rgba(130,170,255,.16); --border-2:rgba(130,170,255,.30); --text:#EAF0FB; --text-2:#B6C5DE; --text-3:#8A99B6; --accent:#3B82F6; --accent-2:#60A5FA; --accent-soft:rgba(59,130,246,.16); --success:#34D399; --success-soft:rgba(16,185,129,.16); --warning:#FBBF24; --warning-soft:rgba(245,158,11,.16); --danger:#F87171; --danger-soft:rgba(239,68,68,.16); --shadow-sm:0 2px 6px rgba(0,0,0,.4); --shadow-md:0 12px 34px -14px rgba(0,0,0,.62); --ease-out:cubic-bezier(.23,1,.32,1); --sb-thumb:rgba(130,170,255,.22); color-scheme:dark; } html[data-theme="aurora"] body{ background: radial-gradient(1100px 760px at 82% -12%, #172a5e 0%, transparent 55%), radial-gradient(900px 680px at -8% 108%, #0d1c44 0%, transparent 52%), #060A14 !important; }