:root{
  --bg:#000;--surface:#121212;--text:#fff;--muted:#a1a1aa;
  --accent:#00E5FF;--glass:rgba(255,255,255,.06);
  --radius:20px;--blur:20px;--shadow:0 10px 40px rgba(0,0,0,.5);
  --font-body:'Manrope',system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{background:radial-gradient(1200px 800px at 20% 0%,#0a0a0a 0%,#000 60%),var(--bg);color:var(--text);font-family:var(--font-body)}
/* Typography */
.font-heading{font-family:'Unbounded',system-ui,Segoe UI,Roboto,Arial,sans-serif}
.font-body, body{font-family:var(--font-body)}

/* Glass & glow */
.glass{background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid color-mix(in oklab, var(--accent) 40%, transparent);box-shadow:var(--shadow);}
.glow-hover{transition:transform .22s ease, box-shadow .22s ease}
.glow-hover:hover{transform:scale(1.02);box-shadow:0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent),0 10px 50px color-mix(in oklab, var(--accent) 20%, transparent)}
.glow-text{text-shadow:0 0 20px color-mix(in oklab, var(--accent) 20%, transparent)}

/* Hero */
.hero{height:64vh;}
.hero-overlay{background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85));}
.logo-dot{width:10px;height:10px;border-radius:9999px;background:var(--accent);box-shadow:0 0 12px var(--accent)}

/* Cards */
.card{background:var(--glass);border:1px solid color-mix(in oklab, var(--accent) 35%, transparent);border-radius:var(--radius);box-shadow:var(--shadow)}
.stat{padding:20px}
.stat-value{font:800 32px 'Unbounded',sans-serif;letter-spacing:.08em}
.stat-label{color:var(--muted);margin-top:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;padding:10px 16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:all .22s ease;font-family:var(--font-body)}
.btn-primary{color:#000;background:var(--accent);box-shadow:0 0 20px color-mix(in oklab, var(--accent) 40%, transparent)}
.btn-primary:hover{transform:scale(1.02);box-shadow:0 0 30px color-mix(in oklab, var(--accent) 60%, transparent)}
.btn-outline{color:#fff;background:transparent;border:1px solid color-mix(in oklab, var(--accent) 40%, transparent)}
.btn-outline:hover{background:color-mix(in oklab, var(--accent) 10%, transparent);}
.btn-link{color:var(--accent);text-decoration:none;font-family:var(--font-body)}
.btn-link:hover{opacity:.85}

/* Inputs */
.input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff;padding:10px 12px;border-radius:12px;outline:none;transition:border .2s ease, box-shadow .2s ease;font-family:var(--font-body)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent)}
.input-search{width:240px}

/* Table */
.ui-table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--font-body)}
.ui-table th,.ui-table td{padding:14px 16px;text-align:left}
.ui-table thead th{font:700 12px 'Unbounded',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.04)}
.ui-table tbody tr{border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);transition:background .2s ease}
.ui-table tbody tr:hover{background:rgba(255,255,255,.05)}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);font-family:var(--font-body)}

/* Accent switcher */
.accent-chip{width:16px;height:16px;border-radius:9999px;border:1px solid rgba(255,255,255,.25);background:var(--chip);box-shadow:0 0 12px var(--chip)}

/* Footer */
footer{opacity:.8}

.navbar{position:sticky;top:0;height:64px;z-index:50;background:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.6));backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in oklab, var(--accent) 25%, transparent)}
.nav-link{position:relative;color:#e5e7eb;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}
.nav-link:after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);box-shadow:0 0 14px color-mix(in oklab, var(--accent) 60%, transparent);transition:width .2s ease}
.nav-link:hover:after{width:100%}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9999px;overflow:hidden;border:1px solid rgba(255,255,255,.15);box-shadow:0 0 20px color-mix(in oklab, var(--accent) 25%, transparent)}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}

/* Navbar strict sizing to éviter les déformations */
.navbar-card .avatar{width:34px;height:34px;flex:0 0 34px}
.navbar-card .avatar-img{width:34px;height:34px;object-fit:cover;display:block}
.navbar-card .h-14{height:56px;align-items:center}

/* refine search input in navbar */
.input-search{height:36px;border-radius:9999px;padding:8px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.input-search::placeholder{color:#9ca3af}

/* NAVBAR CARD */
.navbar-card{border:1px solid color-mix(in oklab, var(--accent) 18%, transparent); background:rgba(18,18,18,.60); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:20px; box-shadow:0 10px 40px rgba(0,0,0,.45)}
.navbar-card.is-scrolled{background:rgba(18,18,18,.88); border-color:color-mix(in oklab, var(--accent) 35%, transparent); box-shadow:0 12px 50px rgba(0,0,0,.6)}
.pill-link{display:inline-block; padding:6px 10px; border-radius:10px; color:#e5e7eb; font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; transition:background .18s ease, color .18s ease, box-shadow .18s ease; font-family:var(--font-body)}
.pill-link:hover{background:rgba(255,255,255,.06); box-shadow:0 0 18px color-mix(in oklab, var(--accent) 35%, transparent)}

/* Bouton nav (déconnexion) — taille constante */
.navbar-card .btn-nav{display:inline-flex;align-items:center;justify-content:center;min-height:36px;line-height:1;padding:8px 12px;border-radius:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:transparent;border:1px solid color-mix(in oklab, var(--accent) 40%, transparent)}
.navbar-card .btn-nav:hover{background:rgba(255,255,255,.06)}

/* Switch / CGU */
.switch{display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; font-family:var(--font-body)}
.switch .track{width:44px; height:24px; border-radius:9999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); position:relative; transition:all .2s ease}
.switch .thumb{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:9999px; background:#cbd5e1; transition:transform .2s ease, background .2s ease, box-shadow .2s ease}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch input:checked + .track{background:color-mix(in oklab, var(--accent) 20%, transparent); border-color:color-mix(in oklab, var(--accent) 40%, transparent)}
.switch input:checked + .track .thumb{transform:translateX(20px); background:var(--accent); box-shadow:0 0 14px color-mix(in oklab, var(--accent) 50%, transparent)}
.switch .label{color:#d1d5db}
.switch .label a{color:var(--accent)}

/* Minor */
.card p{line-height:1.7}

/* Select dark fix */
select.input{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:rgba(255,255,255,.06);
  color:#fff;
  padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px;
}
select.input option{background:#121212;color:#fff}
select.input optgroup{background:#121212;color:#cbd5e1}

.modal-center{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);z-index:60}
@media (max-width: 640px){
  .modal-card{width:96vw !important;padding:12px !important}
}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:60}
.modal.active{display:flex}
.modal-card{background:var(--glass);backdrop-filter:blur(16px);border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.modal-body{padding:16px}
.textarea{width:100%;min-height:120px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#fff;padding:10px;border-radius:12px;outline:none}
.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent)}

/* === Animations === */
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes revealUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes glow{0%,100%{box-shadow:0 0 20px var(--accent)}50%{box-shadow:0 0 40px var(--accent)}}

/* Scroll reveal */
.reveal-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .6s ease, transform .6s ease}
.reveal-on-scroll.revealed{opacity:1;transform:translateY(0)}

/* Pulse animation */
.pulse-animate{animation:pulse 2s ease-in-out infinite}

/* Loading spinner */
.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Skeleton loader */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Progress bar */
.progress-bar{width:100%;height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#60a5fa);transition:width .3s ease;border-radius:999px}

/* CTA Sticky */
.cta-sticky{position:fixed;bottom:20px;right:20px;z-index:50;animation:fadeIn .5s ease}
@media(max-width:768px){.cta-sticky{left:20px;right:20px;bottom:10px}}