/* ══════════════════════════════════════════════════════════════════════════════
   One'Bot Dashboard — core.css
   Design System : Glassmorphism · Aurora · Space Grotesk / Inter / Space Mono
══════════════════════════════════════════════════════════════════════════════ */

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

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — palette aurora dark + violet/rose/cyan
══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Backgrounds */
    --bg-void:       #06060B;
    --bg-base:       #0B0B14;
    --bg-surface:    rgba(255, 255, 255, 0.055);
    --bg-elevated:   rgba(255, 255, 255, 0.09);
    --bg-hover:      rgba(255, 255, 255, 0.13);

    /* Verre / Glassmorphism */
    --glass:           rgba(255, 255, 255, 0.06);
    --glass-strong:    rgba(255, 255, 255, 0.10);
    --glass-border:    rgba(255, 255, 255, 0.14);
    --glass-separator: rgba(255, 255, 255, 0.09);

    /* Aurora — palette signature */
    --violet:        #7C5CFF;
    --pink:           #FF5CA8;
    --cyan:           #35E7FF;
    --aurora-gradient: linear-gradient(135deg, var(--violet) 0%, var(--pink) 55%, var(--cyan) 100%);

    /* Accent — mappé sur le violet aurora (compat. avec l'ancien système) */
    --accent:        var(--violet);
    --accent-hover:  #9781FF;
    --accent-dim:    #5F45D9;
    --accent-glow:   rgba(124, 92, 255, 0.32);
    --accent-subtle: rgba(124, 92, 255, 0.16);
    --accent-gradient: linear-gradient(135deg, var(--violet) 0%, var(--pink) 100%);

    /* Statuts */
    --success:       #35E7B0;
    --success-glow:  rgba(53, 231, 176, 0.18);
    --danger:        #FF5C7A;
    --danger-glow:   rgba(255, 92, 122, 0.18);
    --warning:       #FFC93C;
    --warning-glow:  rgba(255, 201, 60, 0.18);

    /* Texte */
    --text-primary:   #F5F5FA;
    --text-secondary: rgba(245, 245, 250, 0.64);
    --text-muted:     rgba(245, 245, 250, 0.38);

    /* Bordures & Ombres */
    --border:        rgba(124, 92, 255, 0.35);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --shadow:        0 2px 20px rgba(0, 0, 0, 0.35), 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-lg:     0 12px 44px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-glow:   0 0 28px rgba(124, 92, 255, 0.22);

    /* Layout */
    --sidebar-w:     266px;
    --navbar-h:      52px;
    --bottom-nav-h:  64px;

    /* Border radius */
    --radius-xs:     10px;
    --radius-sm:     12px;
    --radius:        16px;
    --radius-lg:     20px;
    --radius-xl:     26px;

    /* Transitions */
    --transition:    0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Typographie */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-main:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:    'Space Mono', ui-monospace, Menlo, monospace;

    /* Blur glassmorphism */
    --blur-sm:  saturate(180%) blur(14px);
    --blur-md:  saturate(180%) blur(24px);
    --blur-lg:  saturate(200%) blur(40px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 1.47;
    letter-spacing: -0.01em;
    background: var(--bg-void);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation: fadeIn 0.5s ease-out;
    position: relative;
}

/* ── Aurora — fond signature animé, visible en filigrane derrière le verre ── */
body::before {
    content: '';
    position: fixed;
    inset: -10%;
    background:
        radial-gradient(ellipse 55% 40% at 12% 8%,  rgba(124, 92, 255, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 92% 18%,  rgba(255, 92, 168, 0.22) 0%, transparent 58%),
        radial-gradient(ellipse 45% 38% at 35% 92%,  rgba(53, 231, 255, 0.16) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
    animation: auroraDrift 26s ease-in-out infinite;
}
@keyframes auroraDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(2%, -2%) scale(1.05); }
}

a {
    color: var(--accent-hover);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--cyan); }

.skip-link {
    position: fixed;
    top: -60px;
    left: 12px;
    z-index: 10001;
    padding: 10px 18px;
    background: var(--aurora-gradient);
    color: #08060f;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR — carte de verre flottante
══════════════════════════════════════════════════════════════════════════════ */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 4, 10, 0.55);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    z-index: 998;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition);
}
.sidebar-overlay.visible { visibility: visible; display: block; opacity: 1; }

aside.sidebar {
    width: var(--sidebar-w);
    background: var(--glass);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 999;
    transition: transform var(--transition-slow);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: slideInLeft 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sidebar-brand {
    height: calc(var(--navbar-h) + 8px);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 12px;
    border-bottom: 1px solid var(--glass-separator);
    flex-shrink: 0;
    text-decoration: none;
}

.sidebar-logo {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    object-fit: cover;
    box-shadow: 0 2px 10px rgba(124, 92, 255, 0.35);
    transition: transform var(--transition);
}
.sidebar-brand:hover .sidebar-logo { transform: scale(1.05) rotate(-2deg); }

.sidebar-brand-text { display: flex; flex-direction: column; gap: 2px; }

.sidebar-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.bot-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cyan);
}

.bot-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
    animation: statusPulse 2.5s ease-in-out infinite;
}

/* ── NAVIGATION ───────────────────────────────────────────────────────────── */
.sidebar-nav {
    flex: 1;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-nav-group { display: flex; flex-direction: column; gap: 3px; }
.sidebar-nav-group + .sidebar-nav-group { margin-top: 10px; }
.sidebar-nav-group-dev {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--glass-separator);
}

.sidebar-nav-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 8px 10px 6px;
}
.sidebar-nav-group:first-child .sidebar-nav-label { padding-top: 0; }

.sidebar-nav-label-danger {
    color: rgba(255, 92, 122, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 10px;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    position: relative;
    border: 1px solid transparent;
}

.sidebar-link i {
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.9;
    transition: color var(--transition);
}

.sidebar-link:hover { background: var(--glass-strong); color: var(--text-primary); }
.sidebar-link:hover i { color: var(--cyan); }

.sidebar-link.active {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.26), rgba(255, 92, 168, 0.16));
    border-color: rgba(124, 92, 255, 0.4);
    color: var(--text-primary);
    font-weight: 600;
}
.sidebar-link.active i { color: var(--violet); opacity: 1; }

.sidebar-link-dev { color: rgba(255, 92, 122, 0.8); }
.sidebar-link-dev i { color: inherit; opacity: 0.9; }
.sidebar-link-dev:hover { background: var(--danger-glow); color: var(--danger); }
.sidebar-link-dev.active {
    background: var(--danger-glow);
    border-color: rgba(255, 92, 122, 0.4);
    color: var(--danger);
}

.sidebar-nav-divider { height: 1px; background: var(--glass-separator); margin: 8px 10px; }

/* ── PROFIL UTILISATEUR ───────────────────────────────────────────────────── */
.sidebar-profile {
    border-top: 1px solid var(--glass-separator);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.15);
    margin-top: auto;
    position: relative;
    z-index: 5;
}

.profile-banner {
    height: 52px;
    background-color: var(--bg-surface);
    background-size: cover;
    background-position: center;
    position: relative;
}
.profile-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 10%, rgba(11, 11, 20, 0.9) 100%);
}

.profile-body { padding: 0 14px 14px; position: relative; }

.profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    padding: 2px 6px 2px 0;
    margin: 0 -6px 10px 0;
    transition: background var(--transition);
}
.profile-card:hover { background: var(--glass-strong); }
.profile-card:hover .profile-chevron { color: var(--cyan); transform: translateX(2px); }

.profile-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color var(--transition), transform var(--transition);
}

.profile-avatar-wrap { width: 46px; height: 46px; flex-shrink: 0; margin-top: -20px; position: relative; z-index: 2; }
.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2.5px solid var(--bg-base);
    object-fit: cover;
    background: var(--bg-surface);
}
.profile-decoration { position: absolute; top: -6px; left: -6px; width: 58px; height: 58px; pointer-events: none; }

.profile-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.profile-name {
    font-size: 0.9rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-tag { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.profile-stats { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.stat-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--glass-strong); border: 1px solid var(--glass-border);
    font-size: 0.75rem; font-weight: 500; color: var(--text-secondary);
    font-family: var(--font-mono);
}
.stat-pill .icon-gold { color: var(--warning); }
.stat-pill.vip { background: rgba(255, 92, 168, 0.16); color: var(--pink); }

.profile-actions { display: flex; gap: 8px; }
.profile-action-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; background: var(--glass-strong); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-primary);
    font-size: 0.8125rem; font-weight: 500;
    transition: background var(--transition);
}
.profile-action-btn:hover { background: var(--bg-hover); }
.profile-logout {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--danger-glow); border: 1px solid rgba(255, 92, 122, 0.3);
    border-radius: var(--radius-sm); color: var(--danger);
    transition: background var(--transition);
}
.profile-logout:hover { background: rgba(255, 92, 122, 0.28); }

.sidebar-login-btn { width: 100%; justify-content: center; margin-top: 10px; }

.sidebar-footer { padding: 16px; border-top: 1px solid var(--glass-separator); }
.sidebar-footer-hint { font-size: 0.8125rem; color: var(--text-muted); text-align: center; line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════════════════════
   NAVBAR — pilule de verre flottante
══════════════════════════════════════════════════════════════════════════════ */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: calc(var(--sidebar-w) + 32px);
    min-height: 100vh;
    padding: 16px 20px 20px 0;
    z-index: 1;
}

header.navbar {
    min-height: var(--navbar-h);
    padding: 8px 16px;
    margin-bottom: 16px;
    background: var(--glass);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 16px;
    z-index: 90;
}

.sidebar-toggle {
    width: 36px; height: 36px;
    background: var(--glass-strong); border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs); color: var(--violet);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; transition: background var(--transition);
}
.sidebar-toggle:hover { background: var(--bg-hover); }

.navbar-center { flex: 1; display: flex; align-items: center; min-width: 0; }

.navbar-page-title {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em;
}
.navbar-page-title i { color: var(--violet); }
.navbar-title { font: inherit; letter-spacing: inherit; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.navbar-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; }
.navbar-breadcrumb a { color: var(--violet); font-weight: 500; display: flex; gap: 6px; }
.navbar-breadcrumb a:hover { color: var(--accent-hover); }
.navbar-breadcrumb i.fa-chevron-right { font-size: 0.625rem; color: var(--text-muted); }
.navbar-breadcrumb .breadcrumb-current { color: var(--text-primary); font-weight: 600; }

.navbar-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }

.flash-banner {
    position: relative; overflow: hidden;
    margin: 0 20px 18px; padding: 14px 18px;
    background: linear-gradient(90deg, rgba(124, 92, 255, 0.14), var(--glass));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
    box-shadow: var(--shadow);
}
.flash-banner-track { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; column-gap: 26px; position: relative; }
.flash-banner-track.is-marquee { flex-wrap: nowrap; white-space: nowrap; width: max-content; animation: flashMarquee 18s linear infinite; }
.flash-banner:has(.flash-banner-track.is-marquee) { overflow: hidden; }
.flash-banner-item { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); font-size: 0.95rem; line-height: 1.3; }
.flash-banner-item span { display: inline-block; }
.flash-banner-item-info { color: var(--violet); }
.flash-banner-item-success { color: var(--success); }
.flash-banner-item-warning { color: var(--warning); }
.flash-banner-item-danger { color: var(--danger); }
@keyframes flashMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Recherche ────────────────────────────────────────────────────────────── */
.navbar-search { display: flex; max-width: 320px; min-width: 180px; }
.navbar-search-form {
    display: flex; align-items: center; width: 100%; height: 36px;
    background: var(--glass-strong); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); overflow: hidden; transition: background var(--transition);
}
.navbar-search-form:focus-within { background: var(--bg-hover); box-shadow: 0 0 0 3px var(--accent-glow); }
.navbar-search-input {
    flex: 1; padding: 0 12px; height: 100%; background: transparent; border: none;
    color: var(--text-primary); font-family: var(--font-main); font-size: 0.9375rem; outline: none;
}
.navbar-search-input::placeholder { color: var(--text-muted); }
.navbar-search-button { width: 36px; height: 100%; background: transparent; border: none; color: var(--text-muted); cursor: pointer; transition: color var(--transition); }
.navbar-search-button:hover { color: var(--violet); }

.navbar-search-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border); background: var(--glass-strong);
    color: var(--text-secondary); text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.navbar-search-pill:hover { color: var(--text-primary); background: var(--bg-hover); }
.navbar-search-hint {
    font-size: 0.6875rem; padding: 2px 6px; border-radius: 5px;
    background: rgba(124, 92, 255, 0.22); color: var(--violet); font-weight: 700;
    font-family: var(--font-mono);
}

/* ── Boutons Icônes & Notifications ───────────────────────────────────────── */
.navbar-notifications-button {
    width: 36px; height: 36px; background: var(--glass-strong); border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs); color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    position: relative; transition: background var(--transition);
}
.navbar-notifications-button:hover { background: var(--bg-hover); color: var(--text-primary); }
.navbar-notifications-count {
    position: absolute; top: -4px; right: -4px; background: var(--pink); color: #1a0a12;
    font-size: 0.625rem; font-weight: 800; min-width: 17px; height: 17px;
    border-radius: 999px; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-base);
}

/* ── Dropdowns ────────────────────────────────────────────────────────────── */
.navbar-user {
    position: relative; cursor: pointer; display: flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px; border-radius: 999px;
    border: 1px solid var(--glass-border); background: var(--glass-strong);
    transition: background var(--transition);
}
.navbar-user:hover, .navbar-user.open { background: var(--bg-hover); }
.navbar-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; transition: box-shadow var(--transition); }
.navbar-user:hover .navbar-avatar-img, .navbar-user.open .navbar-avatar-img { box-shadow: 0 0 0 2px var(--violet); }
.navbar-username { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }

.navbar-user-dropdown, .navbar-notifications-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: rgba(20, 18, 32, 0.92);
    backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    z-index: 1000; opacity: 0; transform: translateY(-8px) scale(0.96); pointer-events: none;
    transition: opacity var(--transition), transform var(--transition); overflow: hidden;
}
.navbar-user-dropdown { min-width: 240px; }
.navbar-notifications-dropdown { min-width: 300px; max-height: 400px; overflow-y: auto; }
.navbar-user.open .navbar-user-dropdown,
.navbar-notifications-button[aria-expanded="true"] ~ .navbar-notifications-dropdown {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}

.dropdown-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(0,0,0,0.18); border-bottom: 1px solid var(--glass-separator); }
.dropdown-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.dropdown-user-info { display: flex; flex-direction: column; gap: 1px; }
.dropdown-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.dropdown-tag { font-size: 0.8125rem; color: var(--text-muted); }
.dropdown-balance {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    font-size: 0.875rem; font-weight: 500; color: var(--text-secondary);
    background: var(--warning-glow); border-bottom: 1px solid var(--glass-separator);
    font-family: var(--font-mono);
}
.dropdown-balance i { color: var(--warning); }
.dropdown-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: none;
    background: transparent; color: var(--text-primary); font-size: 0.9375rem; font-family: var(--font-main);
    cursor: pointer; width: 100%; text-align: left; transition: background var(--transition); text-decoration: none;
}
.dropdown-item i { width: 20px; text-align: center; color: var(--text-secondary); }
.dropdown-item:hover { background: var(--glass-strong); }
.dropdown-item-danger { color: var(--danger); }
.dropdown-item-danger i { color: var(--danger); }
.dropdown-item-danger:hover { background: var(--danger-glow); }
.dropdown-divider { height: 1px; background: var(--glass-separator); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   NAV MOBILE — barre basse type app (corrige la nav mobile cachée)
══════════════════════════════════════════════════════════════════════════════ */
.bottom-nav { display: none; }

@media (max-width: 1024px) {
    .bottom-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        left: 12px; right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        height: var(--bottom-nav-h);
        padding: 6px;
        background: rgba(20, 18, 32, 0.85);
        backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        z-index: 997;
    }
    .bottom-nav-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; flex: 1; height: 100%; min-width: 44px; border-radius: var(--radius);
        color: var(--text-muted); font-size: 0.625rem; font-weight: 600;
        transition: color var(--transition), background var(--transition);
    }
    .bottom-nav-item i { font-size: 1.125rem; }
    .bottom-nav-item.active { color: var(--violet); background: rgba(124, 92, 255, 0.14); }
    .main-wrapper { padding-bottom: calc(var(--bottom-nav-h) + 28px + env(safe-area-inset-bottom)); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   COMPOSANTS COMMUNS
══════════════════════════════════════════════════════════════════════════════ */
main.content { flex: 1; padding: 0; animation: contentFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.content-shell { display: flex; flex-direction: column; gap: 20px; }

.card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(124, 92, 255, 0.3); }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px; font-family: var(--font-main); font-size: 0.9375rem; font-weight: 600;
    letter-spacing: -0.01em; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
    transition: opacity var(--transition), transform var(--transition), background var(--transition), border-color var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 7px 14px; font-size: 0.8125rem; border-radius: var(--radius-xs); }
.btn-lg { padding: 13px 26px; font-size: 1rem; border-radius: var(--radius); }
.btn-block { width: 100%; }

.btn-primary { background: var(--aurora-gradient); color: #08060f; box-shadow: 0 4px 18px rgba(124, 92, 255, 0.35); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 24px rgba(124, 92, 255, 0.45); }

.btn-secondary { background: var(--glass-strong); border-color: var(--glass-border); color: var(--text-primary); }
.btn-secondary:hover { background: var(--bg-hover); }

.btn-danger { background: var(--danger-glow); border-color: rgba(255, 92, 122, 0.3); color: var(--danger); }
.btn-danger:hover { background: rgba(255, 92, 122, 0.25); }

.btn-discord { background: #5865f2; color: #fff; }
.btn-discord:hover { background: #6b76f5; }

.btn-outline-danger { background: transparent; border-color: rgba(255, 92, 122, 0.4); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger-glow); }

.btn-ghost { background: transparent; border-color: var(--glass-border); color: var(--text-secondary); }
.btn-ghost:hover { background: var(--glass-strong); color: var(--text-primary); }

.btn-vote-cta { background: linear-gradient(135deg, var(--pink), var(--violet)); color: #fff; }
.btn-vote-cta:hover { filter: brightness(1.1); }

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); }
.form-control {
    width: 100%; padding: 11px 14px; background: var(--glass-strong); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-main);
    font-size: 0.9375rem; outline: none; transition: box-shadow var(--transition), background var(--transition), border-color var(--transition);
    -webkit-appearance: none; appearance: none;
}
.form-control:focus { background: var(--bg-hover); border-color: var(--violet); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-control::placeholder { color: var(--text-muted); }

/* ── Badges pill ──────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-accent  { background: var(--accent-subtle); color: var(--violet); border: 1px solid rgba(124, 92, 255, 0.3); }
.badge-success { background: var(--success-glow); color: var(--success); border: 1px solid rgba(53, 231, 176, 0.3); }
.badge-danger  { background: var(--danger-glow); color: var(--danger); border: 1px solid rgba(255, 92, 122, 0.3); }
.badge-warning { background: var(--warning-glow); color: var(--warning); border: 1px solid rgba(255, 201, 60, 0.3); }
.badge-premium { background: linear-gradient(135deg, rgba(255, 201, 60, 0.25), rgba(255, 92, 168, 0.2)); color: var(--warning); border: 1px solid rgba(255, 201, 60, 0.35); }

/* ── En-tête de page ──────────────────────────────────────────────────────── */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.page-header-icon {
    width: 44px; height: 44px; border-radius: var(--radius); background: var(--accent-subtle);
    color: var(--violet); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0;
    border: 1px solid rgba(124, 92, 255, 0.3);
}
.page-header-heading { display: flex; gap: 14px; align-items: center; min-width: 0; }
.page-header-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); }
.page-header-subtitle { margin-top: 4px; font-size: 0.9375rem; color: var(--text-secondary); max-width: 60ch; }
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section { display: flex; flex-direction: column; gap: 14px; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.section-title i { color: var(--violet); font-size: 0.9375rem; }
.section-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }
.section-actions { display: flex; align-items: center; gap: 8px; }
.section-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--violet); margin-bottom: 8px;
}

.divider { height: 1px; background: var(--glass-separator); border: none; margin: 4px 0; }

/* ── Typographie de contenu ───────────────────────────────────────────────── */
main.content p { color: var(--text-secondary); line-height: 1.6; max-width: 72ch; }
main.content strong { color: var(--text-primary); font-weight: 600; }
main.content ul, main.content ol { color: var(--text-secondary); line-height: 1.6; padding-left: 1.25em; display: flex; flex-direction: column; gap: 4px; }
main.content blockquote { border-left: 3px solid var(--violet); padding: 4px 0 4px 16px; color: var(--text-secondary); font-style: italic; }
main.content code { font-family: var(--font-mono); font-size: 0.875em; background: var(--glass-strong); padding: 2px 6px; border-radius: 5px; color: var(--cyan); }
main.content pre { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 14px 16px; overflow-x: auto; box-shadow: var(--shadow); }
main.content pre code { background: none; padding: 0; color: var(--text-primary); }

/* ── Grilles ──────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-card {
    background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
    padding: 18px 20px; backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow); display: flex; align-items: center; gap: 14px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(124, 92, 255, 0.3); }
.stat-card-icon {
    width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--accent-subtle);
    color: var(--violet); display: flex; align-items: center; justify-content: center; font-size: 1.0625rem; flex-shrink: 0;
    border: 1px solid rgba(124, 92, 255, 0.3);
}
.stat-card-icon.success { background: var(--success-glow); color: var(--success); border-color: rgba(53, 231, 176, 0.3); }
.stat-card-icon.warning { background: var(--warning-glow); color: var(--warning); border-color: rgba(255, 201, 60, 0.3); }
.stat-card-icon.danger  { background: var(--danger-glow);  color: var(--danger); border-color: rgba(255, 92, 122, 0.3); }
.stat-card-info { display: flex; flex-direction: column; min-width: 0; }
.stat-card-value {
    font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em;
    background: var(--aurora-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1.2;
}
.stat-card-label { font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Alertes ──────────────────────────────────────────────────────────────── */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius); font-size: 0.9375rem; line-height: 1.5; border: 1px solid transparent; }
.alert i { font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.alert-title { font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
.alert-info    { background: var(--accent-subtle);  color: var(--text-secondary); border-color: rgba(124, 92, 255, 0.25); }
.alert-info i  { color: var(--violet); }
.alert-success { background: var(--success-glow);   color: var(--text-secondary); border-color: rgba(53, 231, 176, 0.25); }
.alert-success i { color: var(--success); }
.alert-warning { background: var(--warning-glow);   color: var(--text-secondary); border-color: rgba(255, 201, 60, 0.25); }
.alert-warning i { color: var(--warning); }
.alert-danger  { background: var(--danger-glow);    color: var(--text-secondary); border-color: rgba(255, 92, 122, 0.25); }
.alert-danger i { color: var(--danger); }

/* ── Tableaux ─────────────────────────────────────────────────────────────── */
.table-wrap { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); }
table.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.table thead th { text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 12px 16px; background: rgba(0, 0, 0, 0.18); white-space: nowrap; }
table.table tbody td { padding: 12px 16px; border-top: 1px solid var(--glass-separator); color: var(--text-secondary); vertical-align: middle; }
table.table tbody tr:hover td { background: var(--glass-strong); }
table.table tbody td:first-child { color: var(--text-primary); font-weight: 500; }

/* ── Onglets ──────────────────────────────────────────────────────────────── */
.tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); max-width: 100%; overflow-x: auto; }
.tab { padding: 8px 16px; border: none; background: transparent; color: var(--text-secondary); font-family: var(--font-main); font-size: 0.875rem; font-weight: 600; border-radius: var(--radius-xs); cursor: pointer; white-space: nowrap; transition: background var(--transition), color var(--transition); }
.tab:hover { color: var(--text-primary); }
.tab.active { background: var(--aurora-gradient); color: #08060f; }

/* ── État vide ────────────────────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 24px; color: var(--text-muted); }
.empty-state-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text-muted); margin-bottom: 6px; }
.empty-state-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.empty-state-text { font-size: 0.875rem; max-width: 38ch; }

/* ── Squelettes de chargement ─────────────────────────────────────────────── */
.skeleton { position: relative; overflow: hidden; background: var(--glass-strong); border-radius: var(--radius-sm); }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); animation: skeletonShimmer 1.6s ease-in-out infinite; }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text:last-child { width: 70%; margin-bottom: 0; }
.skeleton-title { height: 20px; width: 40%; margin-bottom: 14px; }
.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }
@keyframes skeletonShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════════════════ */
.footer { padding: 16px 20px; margin-top: 8px; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); box-shadow: var(--shadow); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-logo { border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.footer-copy { font-size: 0.8125rem; color: var(--text-muted); }
.footer-links { display: flex; gap: 16px; }
.footer-links a { font-size: 0.8125rem; color: var(--violet); }
.footer-links a:hover { color: var(--accent-hover); }
.footer-status { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); }
.footer-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: statusPulse 2.5s ease-in-out infinite; }

main.content a:not(.btn):not(.sidebar-link):not(.dropdown-item):not(.bottom-nav-item) { background-image: none; color: var(--violet); }
main.content a:not(.btn):not(.sidebar-link):not(.dropdown-item):not(.bottom-nav-item):hover { color: var(--cyan); }

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    :root { --sidebar-w: min(260px, 85vw); }
    aside.sidebar { transform: translateX(calc(-100% - 32px)); z-index: 1000; }
    aside.sidebar.open { transform: translateX(0); }
    .sidebar-overlay.visible { display: block; opacity: 1; }
    .main-wrapper { margin-left: 0; padding-left: 16px; }
    .sidebar-toggle { display: flex; width: 44px; height: 44px; }
    main.content { padding: 0; }
    .sidebar-profile { padding-bottom: env(safe-area-inset-bottom); }
    .profile-action-btn, .profile-logout { height: 44px; }
}

@media (max-width: 768px) {
    :root { --sidebar-w: min(280px, 88vw); --navbar-h: 48px; }
    .navbar-search { display: none; }
    .navbar-breadcrumb { display: none; }

    /* Avant : flex:1 faisait lutter le bloc de droite (traduction, recherche…)
       à parts égales avec le titre pour la largeur disponible, ce qui
       écrasait le titre et le faisait toucher les icônes. Le bloc de
       droite ne doit prendre que la largeur de son contenu ; c'est le
       titre (.navbar-center, déjà flex:1) qui doit récupérer l'espace
       restant et tronquer proprement avec l'ellipse déjà en place. */
    .navbar-right { flex: 0 0 auto; justify-content: flex-end; gap: 8px; }
    .navbar-center { padding-right: 8px; }

    /* Le sélecteur de langue Google Translate est masqué sur mobile plus
       bas dans ce fichier, juste après sa déclaration de base — voir
       la section "INTEGRATION DESIGN SYSTEM - GOOGLE TRANSLATE".
       (Le mettre ici ne fonctionnait pas : cette dernière règle utilise
       elle aussi !important et arrive après dans le fichier, donc c'est
       elle qui gagnait le conflit.) */

    header.navbar { padding: 6px 12px; border-radius: var(--radius); }
    .page-header { flex-direction: column; }
    .page-header-actions { width: 100%; }
    .page-header-actions .btn { flex: 1; }
    .stat-card { padding: 16px; }
    .navbar-search-hint { display: none; }
    .navbar-search-pill { min-height: 44px; }

    /* Empêche le zoom automatique de Safari iOS au focus d'un champ
       (déclenché dès qu'un input a un font-size < 16px). On force 16px
       ici uniquement sur mobile pour ne pas changer le design desktop. */
    input, select, textarea,
    .form-control, .form-select { font-size: 16px !important; }
}

@media (max-width: 480px) {
    .footer-inner { flex-direction: column; text-align: center; }
    main.content { padding: 0; }
    .page-header-heading { gap: 10px; }
    .page-header-icon { width: 38px; height: 38px; font-size: 1rem; }
    .page-header-title { font-size: 1.25rem; }
    .stat-card { flex-direction: column; align-items: flex-start; }
    .navbar-user-dropdown, .navbar-notifications-dropdown { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; max-width: none; }
    .spotlight-overlay { padding: 8vh 12px 12px; }
    .spotlight-kbd-hint { display: none; }
    .navbar-search-label { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SPOTLIGHT (Ctrl+K)
══════════════════════════════════════════════════════════════════════════════ */
.spotlight-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(4, 4, 10, 0.6); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
    display: none; opacity: 0; transition: opacity var(--transition); padding: 10vh 20px 20px; overflow-y: auto;
}
.spotlight-overlay.visible { opacity: 1; }
.spotlight-modal {
    width: 100%; max-width: 560px; margin: 0 auto;
    background: rgba(20, 18, 32, 0.92);
    backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    overflow: hidden; transform: translateY(-12px) scale(0.97); transition: transform var(--transition);
}
.spotlight-overlay.visible .spotlight-modal { transform: translateY(0) scale(1); }
.spotlight-input-wrap { display: flex; align-items: center; gap: 12px; padding: 4px 16px; border-bottom: 1px solid var(--glass-separator); }
.spotlight-input-wrap i.fa-magnifying-glass { color: var(--text-muted); font-size: 1rem; }
.spotlight-input { width: 100%; padding: 16px 0; border: none; background: transparent; color: var(--text-primary); font-family: var(--font-main); font-size: 1.0625rem; outline: none; letter-spacing: -0.01em; }
.spotlight-input::placeholder { color: var(--text-muted); }
.spotlight-kbd-hint { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 5px; padding: 3px 7px; flex-shrink: 0; }
.spotlight-results { max-height: 50vh; overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent; }
.spotlight-results:empty { padding: 0; }
.spotlight-results .search-category-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 10px 12px 4px; }
.spotlight-results .search-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; color: var(--text-muted); text-align: center; }
.spotlight-results .search-state i { font-size: 1.5rem; opacity: 0.4; }
.spotlight-results .search-state p { font-size: 0.9375rem; }
.spotlight-results .result-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; border: none; transition: background var(--transition); }
.spotlight-results .result-item:hover, .spotlight-results .result-item.active, .result-item:hover, .result-item.selected { background: var(--accent-subtle); color: var(--text-primary); }
.spotlight-results .result-item.active .result-arrow { opacity: 1; transform: translateX(0); }
.spotlight-results .result-icon { width: 32px; height: 32px; border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; background: var(--glass-strong); color: var(--violet); flex-shrink: 0; }
.spotlight-results .result-text { flex: 1; min-width: 0; }
.spotlight-results .result-title { font-size: 0.9375rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotlight-results .result-subtitle { font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotlight-results .result-arrow { color: var(--text-muted); font-size: 0.75rem; opacity: 0; transform: translateX(-4px); transition: all var(--transition); flex-shrink: 0; }
.spotlight-footer { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--glass-separator); font-size: 0.75rem; color: var(--text-muted); }
.spotlight-footer span { display: flex; align-items: center; gap: 6px; }
.spotlight-footer kbd { background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 4px; padding: 1px 6px; font-size: 0.6875rem; color: var(--text-secondary); font-family: var(--font-mono); }

/* ══════════════════════════════════════════════════════════════════════════════
   CURSEUR PERSONNALISÉ — halo aurora
══════════════════════════════════════════════════════════════════════════════ */
.cursor-glow-enabled, .cursor-glow-enabled a, .cursor-glow-enabled button, .cursor-glow-enabled input,
.cursor-glow-enabled select, .cursor-glow-enabled textarea, .cursor-glow-enabled [role="button"], .cursor-glow-enabled label { cursor: none; }

#cursorGlow {
    position: fixed; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%;
    pointer-events: none; z-index: 10000;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.9) 0%, rgba(255, 92, 168, 0.35) 45%, transparent 75%);
    box-shadow: 0 0 18px 3px rgba(124, 92, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease;
    opacity: 0;
}
#cursorGlow.visible { opacity: 1; }
#cursorGlow.hover { width: 36px; height: 36px; box-shadow: 0 0 26px 5px rgba(124, 92, 255, 0.45); }
#cursorGlow.click { width: 14px; height: 14px; }

@media (hover: none), (pointer: coarse) {
    #cursorGlow { display: none !important; }
    .cursor-glow-enabled, .cursor-glow-enabled a, .cursor-glow-enabled button { cursor: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BARRE DE PROGRESSION DE SCROLL
══════════════════════════════════════════════════════════════════════════════ */
.scroll-progress-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--aurora-gradient); z-index: 9998; transition: width 0.1s ease-out; }

/* ══════════════════════════════════════════════════════════════════════════════
   POLISH — Scrollbar, sélection
══════════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124, 92, 255, 0.28); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124, 92, 255, 0.42); }
* { scrollbar-width: thin; scrollbar-color: rgba(124, 92, 255, 0.28) transparent; }
::selection { background: rgba(124, 92, 255, 0.4); color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════════════════════════
   ANIMATIONS & ACCESSIBILITÉ
══════════════════════════════════════════════════════════════════════════════ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes statusPulse { 0% { box-shadow: 0 0 0 0 rgba(53, 231, 176, 0.45); } 50% { box-shadow: 0 0 0 4px rgba(53, 231, 176, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 231, 176, 0); } }
@keyframes contentFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

*:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto !important; }
    body::before { animation: none !important; }
    #cursorGlow { display: none !important; }
    .cursor-glow-enabled, .cursor-glow-enabled a, .cursor-glow-enabled button { cursor: auto !important; }
}


/* ==========================================================================
   INTEGRATION DESIGN SYSTEM - GOOGLE TRANSLATE
   ========================================================================== */

#google_translate_element {
    display: flex !important;
    align-items: center;
    background: rgba(255, 255, 255, 0.055) !important; /* var(--bg-surface) */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* var(--glass-border) */
    border-radius: 12px !important;
    padding: 0 10px !important;
    height: 38px !important;
    margin-right: 12px;
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Sur mobile, ce widget n'a plus sa place à côté du titre de page : il
   chevauchait le texte (cf. capture d'écran). Cette règle doit rester
   placée APRÈS la déclaration ci-dessus dans le fichier : les deux
   utilisent !important sur le même sélecteur, donc c'est l'ordre dans
   le fichier qui décide laquelle s'applique — cette position garantit
   que le masquage l'emporte. */
@media (max-width: 768px) {
    #google_translate_element { display: none !important; }
}

/* Icône de secours (pur CSS, pas de JS) : affichée tant que Google n'a pas
   injecté son contenu réel dans le conteneur — :empty ne matche plus dès
   que le widget ajoute ses propres éléments enfants, donc l'icône
   disparaît automatiquement une fois prêt. */
#google_translate_element:empty::before {
    content: '\f1ab'; /* fa-language */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    min-width: 90px;
    text-align: center;
}

#google_translate_element:hover {
    background: rgba(255, 255, 255, 0.13) !important; /* var(--bg-hover) */
    border-color: rgba(124, 92, 255, 0.3) !important;
}

/* Personnalisation du conteneur interne Google */
.goog-te-gadget-simple {
    background-color: transparent !important;
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer;
}

/* Couleur du texte de la langue */
.goog-te-gadget-simple span {
    color: rgba(255, 255, 255, 0.7) !important; /* var(--text-secondary) */
    font-weight: 500 !important;
}

#google_translate_element:hover .goog-te-gadget-simple span {
    color: #ffffff !important; /* var(--text-primary) */
}

/* Masquer le logo Google et les bordures séparatrices inutiles */
.goog-te-gadget-simple img {
    display: none !important;
}
.goog-te-gadget-simple .goog-te-menu-value span:nth-child(3) {
    border-left: none !important;
}

/* Recolore la flèche du menu déroulant (rendue par Google via un triangle
   CSS en bordure) pour matcher le thème. Best-effort : Google ne documente
   pas la structure exacte de son widget, donc ce sélecteur peut ne plus
   correspondre si Google modifie son balisage interne. */
.goog-te-menu-value span:last-child {
    border-top-color: rgba(255, 255, 255, 0.5) !important;
}

/* ── NETTOYAGE DES LAYERS SUPERIEURS DE GOOGLE ── */

/* Masque la barre d'outils supérieure originale de Google */
.goog-te-banner-frame.skiptranslate, .goog-te-banner-frame {
    display: none !important;
}
body {
    top: 0px !important;
}

/* Désactive les popups jaunes d'origine au survol */
#goog-gt-tt, .goog-te-balloon-frame { 
    display: none !important; 
}
.goog-text-highlight { 
    background-color: transparent !important; 
    box-shadow: none !important; 
}
/* ══════════════════════════════════════════════════════════════════════════
   TOAST GLOBAL (main.js → showToast) — utilisé sur toutes les pages du dashboard
══════════════════════════════════════════════════════════════════════════ */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    left: auto;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 380px;
    padding: 13px 16px;
    background: rgba(20, 18, 32, 0.97);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--text-muted);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.86rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition), transform var(--transition), bottom var(--transition);
    pointer-events: none;
}
.toast.toast-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.toast i { font-size: 1.05rem; flex-shrink: 0; }
.toast span { flex: 1; }

.toast-success { border-left-color: var(--success); }
.toast-success i { color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error i { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning i { color: var(--warning); }
.toast-info { border-left-color: var(--violet); }
.toast-info i { color: var(--violet); }

.toast-action {
    flex-shrink: 0;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.toast-action:hover { background: var(--aurora-gradient); color: #08060f; }

@media (max-width: 1024px) {
    /* En bas d'écran, la bottom-nav est toujours présente et la save-bar
       peut aussi être visible en même temps (cas d'une erreur de sauvegarde,
       où elle ne se referme pas) : plutôt que d'empiler des calculs de
       hauteur fragiles, le toast passe en haut d'écran sur mobile/tablette
       — il n'entre alors en collision avec rien. Le décalage réutilise
       --navbar-h comme simple marge de sécurité (encoche/île dynamique
       incluse via env(safe-area-inset-top)), la navbar n'étant pas fixed. */
    .toast {
        top: calc(var(--navbar-h) + 12px + env(safe-area-inset-top));
        bottom: auto;
        left: 12px;
        right: 12px;
        max-width: none;
        transform: translateY(-10px);
    }
    .toast.toast-visible { transform: translateY(0); }
}