/* ============================================================
   ASSOROCK 100% — DESIGN SYSTÈME PREMIUM
   Noir & Or · Glassmorphism · SaaS Grade
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
    --gold: #D4AF37;
    --gold-light: #F0D060;
    --gold-pale: #F4E5B2;
    --gold-dark: #A07820;
    --gold-muted: rgba(212,175,55,0.12);
    --gold-border: rgba(212,175,55,0.22);
    --bg-void: #050507;
    --bg-base: #080810;
    --bg-surface: #0F0F18;
    --bg-elevated: #16161F;
    --bg-card: #1A1A26;
    --bg-hover: #20202E;
    --text-primary: #EFECF8;
    --text-secondary: #7B7890;
    --text-muted: #42405A;
    --text-inverse: #080810;
    --success: #22C55E; --success-bg: rgba(34,197,94,0.1);
    --danger: #EF4444;  --danger-bg: rgba(239,68,68,0.1);
    --warning: #F59E0B; --warning-bg: rgba(245,158,11,0.1);
    --info: #6C8EFF;    --info-bg: rgba(108,142,255,0.1);
    --grad-gold: linear-gradient(135deg,#906010 0%,#D4AF37 40%,#F0D060 70%,#D4AF37 100%);
    --grad-gold-btn: linear-gradient(135deg,#B8941D 0%,#D4AF37 100%);
    --grad-card: linear-gradient(145deg,#1A1A26 0%,#1E1E2C 100%);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.7);
    --shadow-gold: 0 4px 24px rgba(212,175,55,0.18);
    --shadow-gold-lg: 0 8px 40px rgba(212,175,55,0.28);
    --glow-gold: 0 0 40px rgba(212,175,55,0.15);
    --sidebar-w: 260px;
    --topbar-h: 62px;
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;
    --ease: cubic-bezier(0.4,0,0.2,1);
    --t-fast: 140ms; --t-base: 240ms; --t-slow: 380ms;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body {
    font-family:'DM Sans',system-ui,sans-serif;
    background:var(--bg-base);
    color:var(--text-primary);
    line-height:1.6;
    display:flex;
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

/* ===== ORBES FLOTTANTS ===== */
body::before,body::after {
    content:'';position:fixed;border-radius:50%;pointer-events:none;z-index:0;
}
body::before {
    width:700px;height:700px;
    background:radial-gradient(circle,rgba(212,175,55,0.055) 0%,transparent 65%);
    top:-250px;right:-150px;
    animation:orb1 22s ease-in-out infinite alternate;
}
body::after {
    width:500px;height:500px;
    background:radial-gradient(circle,rgba(108,142,255,0.04) 0%,transparent 65%);
    bottom:-200px;left:100px;
    animation:orb2 28s ease-in-out infinite alternate;
}
@keyframes orb1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-50px) scale(1.06)}100%{transform:translate(-20px,30px) scale(0.96)}}
@keyframes orb2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.08)}100%{transform:translate(50px,-20px) scale(0.94)}}

.main-content::before {
    content:'';position:fixed;width:350px;height:350px;
    background:radial-gradient(circle,rgba(212,175,55,0.04) 0%,transparent 65%);
    bottom:80px;right:200px;border-radius:50%;pointer-events:none;z-index:0;
    animation:orb2 32s ease-in-out infinite alternate;animation-delay:-10s;
}

/* ============================================================
   SIDEBAR — THÈME ROCK / VINYLE / OR
   ============================================================ */

.sidebar {
    width: var(--sidebar-w);
    background: #080808;
    height: 100vh;
    position: fixed;
    left: 0; top: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    border-right: 1px solid rgba(212,175,55,0.15);
    box-shadow: 4px 0 30px rgba(0,0,0,0.8);
    transition: transform var(--t-base) var(--ease);
}

/* Texture lignes subtiles */
.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(212,175,55,0.012) 2px,
            rgba(212,175,55,0.012) 4px
        );
    pointer-events: none;
    z-index: 0;
}

/* ── Header logo ── */
.sidebar-header {
    position: relative;
    z-index: 1;
    padding: 1.4rem 1.2rem 1rem;
    border-bottom: 1px solid rgba(212,175,55,0.18);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(212,175,55,0.07) 0%, transparent 100%);
}

.sidebar-logo-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.65rem;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #D4AF37 0%, #F4E5B2 50%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
}

.sidebar-logo-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 4px;
    color: rgba(212,175,55,0.45);
    text-transform: uppercase;
    margin-top: 5px;
    display: block;
}

.sidebar-header::after {
    content: '';
    display: block;
    margin-top: 1rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.6), transparent);
}

/* ── Zone scrollable ── */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.6rem 0 0.6rem;
    position: relative;
    z-index: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,0.25) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.25); border-radius: 2px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.5); }

/* ── Labels de groupe ── */
.nav-group-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 3px;
    color: rgba(212,175,55,0.3);
    text-transform: uppercase;
    padding: 0.9rem 1.3rem 0.25rem;
    display: block;
}

/* ── Séparateur ── */
.nav-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.12), transparent);
    margin: 0.4rem 1rem;
}

/* ── Item navigation ── */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1.3rem;
    cursor: pointer;
    position: relative;
    transition: all 0.22s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: rgba(255,255,255,0.4);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    margin: 1px 0;
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Barre latérale animée */
.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 55%;
    background: var(--gold);
    border-radius: 0 2px 2px 0;
    transition: transform 0.22s ease;
}

.nav-item:hover {
    color: rgba(255,255,255,0.82);
    background: rgba(212,175,55,0.055);
    padding-left: 1.6rem;
}

.nav-item:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* ── Item actif ── */
.nav-item.active {
    color: var(--gold);
    background: rgba(212,175,55,0.09);
    border-left-color: var(--gold);
    font-weight: 700;
    padding-left: 1.6rem;
}

.nav-item.active::before {
    transform: translateY(-50%) scaleY(1);
    background: var(--gold-pale);
    box-shadow: 0 0 8px rgba(212,175,55,0.7);
}

.nav-item.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(212,175,55,0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Icône ── */
.nav-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.22s ease;
    filter: grayscale(0.3);
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
    transform: scale(1.18);
    filter: grayscale(0);
}

.nav-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Footer sidebar ── */
.sidebar-footer {
    position: relative;
    z-index: 1;
    padding: 0.9rem 1.1rem;
    border-top: 1px solid rgba(212,175,55,0.13);
    flex-shrink: 0;
    background: linear-gradient(0deg, rgba(212,175,55,0.05) 0%, transparent 100%);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D4AF37, #8B6914);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #080808;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(212,175,55,0.3);
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-username {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.sidebar-role {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
    display: block;
}

/* ── Animations entrée ── */
@keyframes navFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.nav-item { animation: navFadeIn 0.35s ease-out both; }
.nav-item:nth-child(1)  { animation-delay: 0.04s; }
.nav-item:nth-child(2)  { animation-delay: 0.08s; }
.nav-item:nth-child(3)  { animation-delay: 0.12s; }
.nav-item:nth-child(4)  { animation-delay: 0.16s; }
.nav-item:nth-child(5)  { animation-delay: 0.20s; }
.nav-item:nth-child(6)  { animation-delay: 0.24s; }
.nav-item:nth-child(7)  { animation-delay: 0.28s; }
.nav-item:nth-child(8)  { animation-delay: 0.32s; }
.nav-item:nth-child(9)  { animation-delay: 0.36s; }
.nav-item:nth-child(10) { animation-delay: 0.40s; }
.nav-item:nth-child(11) { animation-delay: 0.44s; }
.nav-item:nth-child(12) { animation-delay: 0.48s; }
.nav-item:nth-child(13) { animation-delay: 0.52s; }
.nav-item:nth-child(14) { animation-delay: 0.56s; }
.nav-item:nth-child(15) { animation-delay: 0.60s; }

/* ===== HAMBURGER ===== */
.sidebar-toggle-mobile {
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:36px;height:36px;background:var(--bg-elevated);
    border:1px solid var(--gold-border);border-radius:var(--r-sm);
    cursor:pointer;padding:8px;z-index:1001;
    transition:all var(--t-fast) var(--ease);
}
.sidebar-toggle-mobile span{display:block;width:100%;height:2px;background:var(--gold);border-radius:2px}
.sidebar-toggle-mobile:hover{background:var(--gold-muted);border-color:var(--gold)}
.sidebar-toggle{display:none}

.sidebar-overlay {
    display:none;position:fixed;inset:0;
    background:rgba(5,5,7,0.85);backdrop-filter:blur(8px);z-index:999;
}
.sidebar-overlay.active{display:block;animation:fadeIn var(--t-base) var(--ease)}

/* ── Bouton déconnexion ── */
#btnLogout {
    background: none;
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 6px;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 5px 7px;
    font-size: 0.85rem;
    transition: all 0.2s;
    flex-shrink: 0;
}
#btnLogout:hover {
    border-color: #EF4444;
    color: #EF4444;
    background: rgba(239,68,68,0.08);
}

/* ===== MAIN ===== */
.main-content {
    flex:1;margin-left:var(--sidebar-w);
    min-width:0;max-width:calc(100vw - var(--sidebar-w));
    display:flex;flex-direction:column;min-height:100vh;
    position:relative;z-index:1;
}

/* ===== TOP BAR ===== */
.top-bar {
    height:var(--topbar-h);
    background:rgba(15,15,24,0.88);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--gold-border);
    display:flex;align-items:center;gap:14px;
    padding:0 24px;position:sticky;top:0;z-index:100;flex-shrink:0;
}
.search-bar{flex:1;max-width:380px}
.search-bar input {
    width:100%;padding:9px 18px;
    background:var(--bg-elevated);border:1px solid var(--gold-border);
    border-radius:var(--r-full);color:var(--text-primary);
    font-family:'DM Sans',sans-serif;font-size:.83rem;outline:none;
    transition:all var(--t-fast) var(--ease);
}
.search-bar input::placeholder{color:var(--text-muted)}
.search-bar input:focus{border-color:var(--gold);background:var(--bg-card);box-shadow:0 0 0 3px var(--gold-muted)}
.user-menu{display:flex;align-items:center;gap:12px;margin-left:auto}
.user-name{font-size:.8rem;font-weight:500;color:var(--gold)}
.btn-logout-top {
    padding:8px 18px;background:var(--grad-gold-btn);color:var(--text-inverse);
    border:none;border-radius:var(--r-full);cursor:pointer;
    font-family:'DM Sans',sans-serif;font-size:.79rem;font-weight:700;
    white-space:nowrap;transition:all var(--t-fast) var(--ease);
}
.btn-logout-top:hover{transform:translateY(-1px);box-shadow:var(--shadow-gold);filter:brightness(1.08)}

/* ===== CONTENT AREA ===== */
.content-area{flex:1;padding:24px;overflow-x:hidden}
.content-section{display:none}
.content-section.active{display:block;animation:slideUp var(--t-slow) var(--ease)}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ===== SECTION HEADER ===== */
.section-header {
    display:flex;justify-content:space-between;align-items:flex-start;
    gap:14px;margin-bottom:24px;padding-bottom:20px;
    border-bottom:1px solid var(--gold-border);flex-wrap:wrap;
}
.section-header h2,.content-section > h2 {
    font-family:'Syne',sans-serif;font-size:1.55rem;font-weight:700;
    background:var(--grad-gold);-webkit-background-clip:text;
    -webkit-text-fill-color:transparent;background-clip:text;line-height:1.2;
}
.section-header > div,.section-header-actions{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}

/* ===== BOUTONS ===== */
.btn-primary {
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 20px;background:var(--grad-gold-btn);
    color:var(--text-inverse);border:none;border-radius:var(--r-full);
    cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:700;
    white-space:nowrap;flex-shrink:0;transition:all var(--t-fast) var(--ease);
    box-shadow:var(--shadow-gold);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold-lg);filter:brightness(1.08)}
.btn-secondary {
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 18px;background:var(--bg-elevated);color:var(--gold);
    border:1px solid var(--gold-border);border-radius:var(--r-full);
    cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:500;
    white-space:nowrap;flex-shrink:0;transition:all var(--t-fast) var(--ease);
}
.btn-secondary:hover{background:var(--gold-muted);border-color:var(--gold);transform:translateY(-1px)}
.btn-danger {
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 18px;background:linear-gradient(135deg,#7F1D1D,#DC2626);
    color:white;border:none;border-radius:var(--r-full);cursor:pointer;
    font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:600;
    white-space:nowrap;flex-shrink:0;transition:all var(--t-fast) var(--ease);
}
.btn-danger:hover{transform:translateY(-1px);filter:brightness(1.1)}
.btn-success {
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 18px;background:linear-gradient(135deg,#14532D,#16A34A);
    color:white;border:none;border-radius:var(--r-full);cursor:pointer;
    font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:600;
    white-space:nowrap;flex-shrink:0;transition:all var(--t-fast) var(--ease);
}
.btn-success:hover{transform:translateY(-1px);filter:brightness(1.1)}
button:disabled,input:disabled,select:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ===== STATS GRID ===== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card {
    background:var(--grad-card);border:1px solid var(--gold-border);
    border-radius:var(--r-lg);padding:20px;
    display:flex;align-items:center;gap:16px;
    transition:all var(--t-base) var(--ease);position:relative;overflow:hidden;
}
.stat-card::after {
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--grad-gold);opacity:0;transition:opacity var(--t-base) var(--ease);
}
.stat-card:hover{border-color:rgba(212,175,55,.38);box-shadow:var(--shadow-gold);transform:translateY(-3px)}
.stat-card:hover::after{opacity:1}
.stat-icon {
    font-size:1.7rem;width:50px;height:50px;background:var(--gold-muted);
    border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stat-content{flex:1;min-width:0}
.stat-content h3{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;font-weight:500;margin-bottom:4px}
.stat-number{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}

/* ===== DASHBOARD GRID ===== */
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.dashboard-widget{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:20px;transition:all var(--t-base) var(--ease)}
.dashboard-widget:hover{border-color:rgba(212,175,55,.32);box-shadow:var(--shadow-gold)}
.dashboard-widget h3{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--gold);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--gold-border)}

/* ===== FILTERS ===== */
.filters {
    display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;align-items:center;
    background:var(--bg-elevated);border:1px solid var(--gold-border);
    border-radius:var(--r-lg);padding:12px;
}
.filters input,.filters select {
    padding:8px 16px;background:var(--bg-card);border:1px solid var(--gold-border);
    border-radius:var(--r-full);color:var(--text-primary);
    font-family:'DM Sans',sans-serif;font-size:.81rem;outline:none;
    transition:all var(--t-fast) var(--ease);min-width:140px;
}
.filters input{flex:1}
.filters input:focus,.filters select:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-muted)}
.filters input::placeholder{color:var(--text-muted)}
.filters select{
    appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23D4AF37' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:9px;padding-right:32px;
}
.filters select option{background:var(--bg-card)}

/* ===== TABLE SYSTÈME ===== */
.table-container {
    width:100%;
    background:var(--bg-surface);
    border:1px solid var(--gold-border);
    border-radius:var(--r-lg);
    overflow:hidden;
    margin-bottom:20px;
}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll::-webkit-scrollbar{height:4px}
.table-scroll::-webkit-scrollbar-track{background:var(--bg-elevated)}
.table-scroll::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:2px}
div[style*="overflow-x"]{width:100%!important;background:var(--bg-surface);border:1px solid var(--gold-border);border-radius:var(--r-lg);overflow:hidden;}
.data-table{width:100%;border-collapse:collapse;min-width:580px}
.data-table thead{background:linear-gradient(135deg,rgba(212,175,55,.1) 0%,rgba(212,175,55,.04) 100%);position:sticky;top:0;z-index:5}
.data-table th {padding:14px 16px;text-align:left;font-family:'Syne',sans-serif;font-size:.69rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;border-bottom:1px solid var(--gold-border);}
.data-table th:last-child{width:1%;white-space:nowrap}
.data-table td {padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-secondary);font-size:.83rem;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
.data-table td:last-child{white-space:nowrap;width:1%;max-width:none;overflow:visible}
.data-table tbody tr{transition:background var(--t-fast) var(--ease)}
.data-table tbody tr:hover{background:rgba(212,175,55,.04)}
.data-table tbody tr:last-child td{border-bottom:none}

/* ===== ACTION BUTTONS ===== */
.action-buttons{display:flex;gap:6px;align-items:center}
.btn-icon {width:31px;height:31px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-sm);cursor:pointer;font-size:.83rem;color:var(--text-secondary);transition:all var(--t-fast) var(--ease);flex-shrink:0;text-decoration:none;}
.btn-icon:hover{background:var(--gold);color:var(--text-inverse);border-color:var(--gold);transform:scale(1.08)}
.btn-icon.btn-delete{border-color:rgba(239,68,68,.55);color:var(--danger);background:rgba(239,68,68,.12)}
.btn-icon.btn-delete:hover{background:var(--danger);color:white;border-color:var(--danger);transform:scale(1.1)}

/* ===== DROPDOWN ===== */
.dropdown-actions{position:relative;display:inline-flex}
.btn-more {width:31px;height:31px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-sm);cursor:pointer;color:var(--gold);font-size:1rem;font-weight:900;letter-spacing:-1px;line-height:.8;transition:all var(--t-fast) var(--ease);flex-shrink:0;}
.btn-more:hover{background:var(--gold-muted);border-color:var(--gold)}
.dropdown-menu {display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:500;background:var(--bg-card);border:1px solid var(--gold-border);border-radius:var(--r-md);min-width:165px;box-shadow:var(--shadow-xl);overflow:hidden;backdrop-filter:blur(20px);}
.dropdown-menu.active{display:block;animation:dropDown .14s var(--ease)}
@keyframes dropDown{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.dropdown-menu button {display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.81rem;cursor:pointer;white-space:nowrap;transition:all var(--t-fast) var(--ease);text-align:left;}
.dropdown-menu button:last-child{border-bottom:none}
.dropdown-menu button:hover{background:var(--gold-muted);color:var(--gold);padding-left:20px}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-full);font-size:.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.badge-success{background:var(--success-bg);color:var(--success);border:1px solid rgba(34,197,94,.22)}
.badge-warning{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(245,158,11,.22)}
.badge-danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(239,68,68,.22)}
.badge-info{background:var(--info-bg);color:var(--info);border:1px solid rgba(108,142,255,.22)}
.badge-brouillon{background:rgba(100,100,120,.12);color:#8885A0;border:1px solid rgba(136,133,160,.2)}
.badge-envoyee,.badge-envoye{background:var(--info-bg);color:var(--info);border:1px solid rgba(108,142,255,.22)}
.badge-payee,.badge-accepte{background:var(--success-bg);color:var(--success);border:1px solid rgba(34,197,94,.22)}
.badge-en_retard,.badge-refuse{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(239,68,68,.22)}
.badge-annulee,.badge-expire{background:rgba(100,100,120,.08);color:var(--text-muted);border:1px solid rgba(100,100,120,.18)}

/* ===== COMPTA ===== */
.compta-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.compta-card{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:20px;text-align:center;transition:all var(--t-base) var(--ease)}
.compta-card:hover{border-color:rgba(212,175,55,.38);box-shadow:var(--shadow-gold);transform:translateY(-2px)}
.compta-card h3{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}
.compta-card .amount{font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:700}
.compta-card.recettes .amount{color:var(--success)}
.compta-card.depenses .amount{color:var(--danger)}
.compta-card.solde .amount{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== EVENTS ===== */
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.event-card{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);overflow:hidden;transition:all var(--t-base) var(--ease)}
.event-card:hover{border-color:rgba(212,175,55,.4);box-shadow:var(--shadow-gold);transform:translateY(-3px)}
.event-header{padding:20px;background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(212,175,55,.05));border-bottom:1px solid var(--gold-border)}
.event-header h3{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--gold);margin-bottom:4px}
.event-date{font-size:.78rem;color:var(--text-secondary)}
.event-body{padding:20px}
.event-info{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--text-secondary);font-size:.82rem}
.event-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}

/* ===== DOCUMENTS ===== */
.documents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:16px}
.document-card{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:20px;text-align:center;cursor:pointer;transition:all var(--t-base) var(--ease)}
.document-card:hover{border-color:var(--gold);box-shadow:var(--shadow-gold);transform:translateY(-3px)}
.document-icon{font-size:2rem;margin-bottom:12px}
.document-name{font-weight:600;font-size:.81rem;color:var(--text-primary);margin-bottom:4px;word-break:break-word}
.document-size{font-size:.7rem;color:var(--text-muted)}

/* ===== COMMUNICATIONS ===== */
.communications-list{display:flex;flex-direction:column;gap:12px}
.communication-item{background:var(--grad-card);border:1px solid var(--gold-border);border-left:3px solid var(--gold-dark);border-radius:var(--r-lg);padding:20px;transition:all var(--t-base) var(--ease)}
.communication-item:hover{border-left-color:var(--gold);box-shadow:var(--shadow-gold);transform:translateX(4px)}
.communication-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:12px;flex-wrap:wrap}
.communication-title{font-weight:600;color:var(--gold);font-size:.88rem}
.communication-date{font-size:.76rem;color:var(--text-muted);white-space:nowrap}
.communication-preview{color:var(--text-secondary);font-size:.82rem;line-height:1.5}

/* ===== FORMS ===== */
.settings-form{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:32px;max-width:680px}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;font-size:.76rem;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:.6px}
.form-group input,.form-group select,.form-group textarea {width:100%;padding:11px 16px;background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-md);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.86rem;outline:none;transition:all var(--t-fast) var(--ease);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold);background:var(--bg-card);box-shadow:0 0 0 3px var(--gold-muted)}
.form-group textarea{resize:vertical;min-height:100px}
.form-group select option{background:var(--bg-card)}

/* ===== MODAL ===== */
.modal{display:none;position:fixed;inset:0;z-index:2000;background:rgba(5,5,7,.9);backdrop-filter:blur(16px);padding:16px;overflow-y:auto}
.modal.active{display:flex;justify-content:center;align-items:flex-start;padding-top:5vh}
.modal-content{background:var(--bg-card);border:1px solid var(--gold-border);border-radius:var(--r-xl);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-xl),var(--glow-gold);animation:modalIn var(--t-base) var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(-20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--gold-border);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(212,175,55,.04));border-radius:var(--r-xl) var(--r-xl) 0 0;gap:12px}
.modal-header h3{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--gold)}
.modal-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--gold-border);border-radius:var(--r-sm);cursor:pointer;color:var(--text-secondary);font-size:.95rem;transition:all var(--t-fast) var(--ease);flex-shrink:0}
.modal-close:hover{background:var(--danger-bg);color:var(--danger);border-color:rgba(239,68,68,.3)}
.modal-body{padding:24px}

/* ===== TABS ===== */
.rh-menu,.compta-menu,.commercial-menu,.projets-menu,.caisse-menu {display:flex;gap:4px;margin-bottom:24px;background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:6px;flex-wrap:wrap;}
.rh-tab,.compta-tab,.commercial-tab,.projets-tab,.caisse-tab {padding:9px 16px;background:transparent;border:none;border-radius:var(--r-md);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.79rem;font-weight:500;color:var(--text-secondary);transition:all var(--t-fast) var(--ease);white-space:nowrap;flex-shrink:0;}
.rh-tab:hover,.compta-tab:hover,.commercial-tab:hover,.projets-tab:hover,.caisse-tab:hover{color:var(--gold);background:var(--gold-muted)}
.rh-tab.active,.compta-tab.active,.commercial-tab.active,.projets-tab.active,.caisse-tab.active{background:var(--grad-gold-btn);color:var(--text-inverse);font-weight:700;box-shadow:0 2px 10px rgba(212,175,55,.22)}
.rh-content,.compta-content,.commercial-content,.projets-content,.caisse-content{display:none}
.rh-content.active,.compta-content.active,.commercial-content.active,.projets-content.active,.caisse-content.active{display:block;animation:slideUp var(--t-base) var(--ease)}
.facturation-menu{display:flex;gap:4px;margin-bottom:24px;background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.facturation-tab{padding:9px 20px;background:transparent;border:none;border-radius:var(--r-md);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:500;color:var(--text-secondary);transition:all var(--t-fast) var(--ease);white-space:nowrap;flex-shrink:0;}
.facturation-tab:hover{color:var(--info);background:var(--info-bg)}
.facturation-tab.active{background:var(--info);color:white;font-weight:700}
.sub-tabs{display:flex;gap:8px;margin:20px 0;flex-wrap:wrap}
.sub-tab{padding:7px 16px;background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-full);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.79rem;font-weight:500;color:var(--text-secondary);transition:all var(--t-fast) var(--ease)}
.sub-tab:hover{border-color:var(--gold);color:var(--gold)}
.sub-tab.active{background:var(--gold);color:var(--text-inverse);border-color:var(--gold);font-weight:700}
.subtab-content{display:none}
.subtab-content.active{display:block;animation:slideUp var(--t-base) var(--ease)}

/* ===== CHARTS ===== */
.stats-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:24px;margin-top:20px}
.chart-card{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:24px;transition:all var(--t-base) var(--ease)}
.chart-card:hover{border-color:rgba(212,175,55,.32);box-shadow:var(--shadow-gold)}
.chart-card {
    background: var(--grad-card);
    border: 1px solid var(--gold-border);
    border-radius: var(--r-lg);
    padding: 24px;
    transition: all var(--t-base) var(--ease);
    height: 380px;           /* ← hauteur fixe */
    display: flex;
    flex-direction: column;
}
.chart-card canvas {
    width: 100% !important;
    height: 280px !important;
    max-height: 280px;
}

.chart-card h3 {
    flex-shrink: 0;
}

/* ===== JOURNAUX & EXPORTS ===== */
.journaux-grid,.export-container,.rapports-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px;margin:20px 0}
.journal-card,.export-card,.rapport-card{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:20px;text-align:center;transition:all var(--t-base) var(--ease);min-width:0;overflow:hidden}
.journal-card{border-top:3px solid var(--gold-dark)}
.export-card{border-top:3px solid var(--info)}
.rapport-card{border-top:3px solid var(--gold)}
.journal-card:hover,.export-card:hover,.rapport-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-gold)}
.journal-total{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:700;color:var(--gold);margin:12px 0}
.rapport-icon{font-size:2rem;margin:12px 0}

/* ===== COMMERCIAL ===== */
.clients-list,.propositions-list,.commandes-list,.projets-list{display:flex;flex-direction:column;gap:8px}
.client-item,.proposition-item,.commande-item,.projet-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--bg-elevated);border-radius:var(--r-md);border-left:3px solid var(--gold-dark);transition:all var(--t-fast) var(--ease);gap:12px}
.client-item:hover,.proposition-item:hover,.commande-item:hover,.projet-item:hover{background:var(--gold-muted);border-left-color:var(--gold);transform:translateX(4px)}
.contrats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-bottom:20px}
.contrat-card{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:24px;border-top:3px solid var(--gold);transition:all var(--t-base) var(--ease)}
.contrat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-gold)}

/* ===== POSTES & FORMATIONS ===== */
.postes-grid,.formations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.poste-card{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:20px;transition:all var(--t-base) var(--ease)}
.poste-card:hover{border-color:rgba(212,175,55,.38);box-shadow:var(--shadow-gold);transform:translateY(-2px)}
.poste-titre{font-family:'Syne',sans-serif;font-size:.98rem;font-weight:700;color:var(--gold);margin:0}
.poste-body{color:var(--text-secondary);font-size:.83rem}
.poste-info{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.82rem}
.poste-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.formation-card{background:linear-gradient(135deg,rgba(212,175,55,.13),rgba(212,175,55,.05));border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:20px;transition:all var(--t-base) var(--ease)}
.formation-card:hover{box-shadow:var(--shadow-gold);transform:translateY(-3px)}
.formation-titre{font-family:'Syne',sans-serif;font-size:.98rem;font-weight:700;color:var(--gold);margin:0 0 12px 0}
.formation-info{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.82rem;color:var(--text-secondary)}

/* ===== TAGS ===== */
.tags-grid,.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:16px}
.tag-item,.categorie-card{padding:10px 16px;background:var(--gold-muted);border:1px solid var(--gold-border);border-radius:var(--r-md);text-align:center;font-weight:600;font-size:.81rem;color:var(--gold);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.tag-item:hover,.categorie-card:hover{background:var(--gold);color:var(--text-inverse);transform:translateY(-2px);box-shadow:var(--shadow-gold)}

/* ===== CAISSE POS ===== */
.pos-container{display:grid;grid-template-columns:2fr 1fr;gap:20px;height:calc(100vh - var(--topbar-h) - 48px);min-height:560px}
.pos-produits{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.pos-header{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.pos-search{flex:1;padding:10px 16px;background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-full);color:var(--text-primary);font-size:.83rem;outline:none;min-width:0}
.pos-search:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-muted)}
.pos-filter{padding:10px 14px;background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-full);color:var(--text-primary);font-size:.83rem;outline:none;cursor:pointer}
.produits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;overflow-y:auto;align-content:start;flex:1}
.produit-card{background:linear-gradient(135deg,rgba(212,175,55,.13),rgba(212,175,55,.05));border:1px solid var(--gold-border);border-radius:var(--r-md);padding:14px;cursor:pointer;transition:all var(--t-fast) var(--ease);text-align:center}
.produit-card:hover{border-color:var(--gold);background:var(--gold-muted);transform:translateY(-3px);box-shadow:var(--shadow-gold)}
.produit-nom{font-weight:600;font-size:.79rem;color:var(--text-primary);margin-bottom:4px;word-break:break-word}
.produit-prix{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--gold)}
.produit-stock{font-size:.68rem;color:var(--text-muted);margin-top:4px}
.pos-panier{background:var(--grad-card);border:1px solid rgba(212,175,55,.35);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.pos-info{flex-shrink:0}
.pos-info h3{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--gold)}
.pos-date,.pos-vendeur{font-size:.75rem;color:var(--text-muted)}
.pos-client{flex-shrink:0}
.pos-select-client{width:100%;padding:9px 14px;background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-md);color:var(--text-primary);font-size:.83rem;outline:none}
.pos-articles{flex:1;overflow-y:auto;min-height:100px}
.panier-vide{text-align:center;padding:32px 16px;color:var(--text-muted);font-size:.83rem}
.article-ligne{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,.04)}
.article-nom{font-size:.8rem;font-weight:500;color:var(--text-primary)}
.article-quantite{display:flex;align-items:center;gap:4px}
.btn-qte{width:25px;height:25px;border:none;background:var(--gold-muted);border-radius:6px;cursor:pointer;font-weight:700;color:var(--gold);transition:all var(--t-fast) var(--ease);display:flex;align-items:center;justify-content:center}
.btn-qte:hover{background:var(--gold);color:var(--text-inverse)}
.article-prix{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;color:var(--gold);text-align:right}
.btn-supprimer{width:27px;height:27px;border:none;background:var(--danger-bg);border-radius:6px;cursor:pointer;color:var(--danger);display:flex;align-items:center;justify-content:center;transition:all var(--t-fast) var(--ease)}
.btn-supprimer:hover{background:var(--danger);color:white}
.pos-scanner{flex-shrink:0}
.scanner-input{width:100%;padding:9px 14px;background:rgba(212,175,55,.07);border:1px solid var(--gold-border);border-radius:var(--r-md);color:var(--text-primary);font-size:.83rem;outline:none}
.scanner-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-muted)}
.pos-totaux{background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-md);padding:14px;flex-shrink:0}
.total-ligne{display:flex;justify-content:space-between;padding:3px 0;font-size:.81rem;color:var(--text-secondary)}
.total-principal{border-top:1px solid var(--gold-border);margin-top:8px;padding-top:8px;font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:700;color:var(--gold)}
.pos-actions{display:grid;grid-template-columns:1fr 1fr 2fr;gap:8px;flex-shrink:0}
.btn-pos{padding:12px;border:none;border-radius:var(--r-md);font-family:'DM Sans',sans-serif;font-weight:700;font-size:.79rem;cursor:pointer;transition:all var(--t-fast) var(--ease);text-transform:uppercase;letter-spacing:.4px}
.btn-annuler{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(239,68,68,.25)}
.btn-annuler:hover{background:var(--danger);color:white}
.btn-suspendre{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(245,158,11,.25)}
.btn-suspendre:hover{background:var(--warning);color:white}
.btn-payer{background:var(--grad-gold-btn);color:var(--text-inverse);box-shadow:var(--shadow-gold)}
.btn-payer:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* ============================================================
   AJOUTEZ CES STYLES À LA FIN DE VOTRE style.css
   ============================================================ */

/* ── Section caisse : seulement quand active ── */
#section-caisse {
    display: none;
}

#section-caisse.active {
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - 70px);
    overflow: hidden;
    padding-bottom: 0;
}

#section-caisse > div:first-child {
    flex-shrink: 0;
}

/* Onglets caisse compacts */
.caisse-menu {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: transparent;
    border: none;
    padding: 0;
}

.caisse-tab {
    padding: 7px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 20px;
    color: #7B7890;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}

.caisse-tab:hover {
    border-color: rgba(212,175,55,0.4);
    color: #D4AF37;
}

.caisse-tab.active {
    background: linear-gradient(135deg,#B8941D,#D4AF37);
    color: #080810;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(212,175,55,0.3);
}

/* Contenu caisse prend toute la hauteur restante */
.caisse-content {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.caisse-content.active {
    display: flex;
    flex-direction: column;
}

/* ── POS Container : occupe tout l'espace ── */
.pos-container {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 14px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Colonne produits */
.pos-produits {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--grad-card);
    border: 1px solid var(--gold-border);
    border-radius: 16px;
    padding: 14px;
}

/* Grille produits scrollable */
.produits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 4px 2px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,0.2) transparent;
}

.produits-grid::-webkit-scrollbar { width: 4px; }
.produits-grid::-webkit-scrollbar-track { background: transparent; }
.produits-grid::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.2); border-radius: 2px; }

/* ── Carte produit ── */
.produit-card {
    background: linear-gradient(145deg, #1A1A26, #1E1E2C);
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 14px;
    padding: 14px 10px 12px;
    cursor: pointer;
    transition: all .18s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.produit-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212,175,55,0.5);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.produit-card:active { transform: scale(0.93); }

.produit-card.rupture    { opacity: .4; cursor: not-allowed; pointer-events: none; }
.produit-card.alerte-stock { border-color: rgba(245,158,11,0.35); }

.produit-emoji      { font-size: 1.5rem; margin-bottom: 5px; display: block; }
.produit-nom        { font-size: .7rem; font-weight: 600; color: #EFECF8; line-height: 1.3; margin-bottom: 5px; word-break: break-word; }
.produit-prix       { font-family: 'Syne',sans-serif; font-size: .95rem; font-weight: 800; color: #D4AF37; }

.produit-stock-badge {
    position: absolute; top: 5px; right: 5px;
    font-size: .55rem; font-weight: 700;
    padding: 1px 5px; border-radius: 6px;
    background: rgba(34,197,94,0.18); color: #22C55E;
}
.produit-card.alerte-stock .produit-stock-badge {
    background: rgba(245,158,11,0.18); color: #F59E0B;
}

@keyframes addedPulse {
    0%   { box-shadow: 0 0 0 0 rgba(212,175,55,.6); }
    100% { box-shadow: 0 0 0 14px rgba(212,175,55,0); }
}
.produit-card.added { animation: addedPulse .35s ease-out; }

/* ── Panier ── */
.pos-panier {
    display: flex;
    flex-direction: column;
    background: #0D0D18;
    border: 1px solid rgba(212,175,55,0.22);
    border-radius: 16px;
    overflow: hidden;
    min-height: 0;
}

.panier-header {
    padding: 12px 14px;
    background: linear-gradient(135deg,rgba(212,175,55,.1),rgba(212,175,55,.03));
    border-bottom: 1px solid rgba(212,175,55,.12);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.panier-header h3 {
    font-family: 'Syne',sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: #D4AF37;
    margin: 0 0 2px;
}

.panier-client {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    flex-shrink: 0;
}

/* Articles scrollable */
.pos-articles {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,.15) transparent;
}

.pos-articles::-webkit-scrollbar { width: 3px; }
.pos-articles::-webkit-scrollbar-thumb { background: rgba(212,175,55,.2); border-radius: 2px; }

/* Article ligne */
.article-ligne {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .12s;
    animation: slideIn .18s ease-out;
}

@keyframes slideIn { from { opacity:0;transform:translateX(8px); } to { opacity:1;transform:none; } }

.article-ligne:hover { background: rgba(212,175,55,.04); }

.article-nom  { flex:1; font-size:.75rem; font-weight:500; color:#EFECF8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.article-prix { font-family:'Syne',sans-serif; font-size:.82rem; font-weight:700; color:#D4AF37; white-space:nowrap; flex-shrink:0; }

.qte-control { display:flex; align-items:center; gap:3px; flex-shrink:0; }
.btn-qte {
    width:24px; height:24px;
    border:1px solid rgba(212,175,55,.25);
    background:rgba(212,175,55,.08);
    color:#D4AF37; border-radius:6px; cursor:pointer;
    font-weight:700; font-size:.85rem;
    display:flex; align-items:center; justify-content:center;
    transition:all .12s; flex-shrink:0;
}
.btn-qte:hover { background:#D4AF37; color:#080808; }
.qte-val {
    font-family:'Syne',sans-serif; font-size:.8rem; font-weight:700;
    color:#EFECF8; min-width:18px; text-align:center;
}
.btn-supprimer {
    width:24px; height:24px;
    border:1px solid rgba(239,68,68,.25);
    background:rgba(239,68,68,.08);
    color:#EF4444; border-radius:6px; cursor:pointer;
    font-size:.7rem;
    display:flex; align-items:center; justify-content:center;
    transition:all .12s; flex-shrink:0;
}
.btn-supprimer:hover { background:#EF4444; color:white; }

/* Panier vide */
.panier-vide {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px 12px; color:#42405A; text-align:center; height:100%; min-height:80px;
}
.panier-vide-icon { font-size:2.5rem; opacity:.18; margin-bottom:8px; }
.panier-vide p { font-size:.75rem; margin:0; }

/* Scanner */
.panier-scanner {
    padding: 7px 12px;
    border-top: 1px solid rgba(255,255,255,.04);
    flex-shrink: 0;
}
.scanner-input {
    width:100%; padding:7px 11px;
    background:rgba(212,175,55,.05);
    border:1px solid rgba(212,175,55,.18);
    border-radius:7px; color:#EFECF8; font-size:.76rem;
    outline:none; transition:border-color .15s; box-sizing:border-box;
}
.scanner-input:focus { border-color:#D4AF37; }

/* Totaux */
.pos-totaux {
    padding: 10px 14px;
    background: rgba(0,0,0,.25);
    border-top: 1px solid rgba(212,175,55,.12);
    flex-shrink: 0;
}
.total-row {
    display:flex; justify-content:space-between;
    padding:2px 0; font-size:.76rem; color:#7B7890;
}
.total-row.principal {
    border-top: 1px solid rgba(212,175,55,.18);
    margin-top:6px; padding-top:8px;
    font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:800; color:#D4AF37;
}

/* ── Bouton PAYER moderne ── */
.pos-actions {
    padding: 10px 12px 12px;
    display: grid;
    grid-template-columns: 44px 44px 1fr;
    gap: 8px;
    flex-shrink: 0;
    background: rgba(0,0,0,.2);
}

.btn-pos {
    border: none; border-radius: 12px; cursor: pointer;
    font-family:'DM Sans',sans-serif; font-weight:700;
    transition: all .18s; display:flex; align-items:center; justify-content:center;
    gap:6px;
}

.btn-annuler {
    width:44px; height:44px; border-radius:12px;
    background:rgba(239,68,68,.12);
    border:1px solid rgba(239,68,68,.25);
    color:#EF4444; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
}
.btn-annuler:hover { background:#EF4444; color:white; }

.btn-suspendre {
    width:44px; height:44px; border-radius:12px;
    background:rgba(245,158,11,.1);
    border:1px solid rgba(245,158,11,.22);
    color:#F59E0B; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
}
.btn-suspendre:hover { background:#F59E0B; color:white; }

.btn-payer {
    height:44px; border-radius:12px;
    background: linear-gradient(135deg,#8B6914,#D4AF37,#F0D060);
    color:#080810; font-size:.85rem; font-weight:800;
    letter-spacing:.5px; text-transform:uppercase;
    box-shadow: 0 4px 16px rgba(212,175,55,.35);
    padding: 0 16px;
}
.btn-payer:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(212,175,55,.45);
}
.btn-payer:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }

/* ── Pills catégories ── */
.cat-pills {
    display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; flex-shrink:0;
}
.cat-pill {
    padding:4px 11px; border-radius:16px; font-size:.7rem; font-weight:600;
    cursor:pointer; border:1px solid rgba(212,175,55,.2);
    background:transparent; color:#7B7890; transition:all .14s;
    white-space:nowrap;
}
.cat-pill.active { background:#D4AF37; color:#080808; border-color:#D4AF37; }
.cat-pill:hover:not(.active) { border-color:#D4AF37; color:#D4AF37; }

/* ── Client search ── */
.client-search-wrap { position:relative; }
.client-search-input {
    width:100%; padding:8px 11px 8px 30px;
    background:#14141E; border:1px solid rgba(212,175,55,.18);
    border-radius:8px; color:#EFECF8; font-size:.76rem; outline:none;
    transition:border-color .14s; box-sizing:border-box;
}
.client-search-input:focus { border-color:#D4AF37; }
.client-search-input::placeholder { color:#42405A; }

.client-results {
    display:none; position:absolute; top:calc(100% + 3px); left:0; right:0;
    background:#1A1A26; border:1px solid rgba(212,175,55,.22);
    border-radius:10px; max-height:220px; overflow-y:auto; z-index:600;
    box-shadow:0 10px 28px rgba(0,0,0,.55);
}
.client-result-item {
    padding:9px 12px; cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,.04); transition:background .13s;
}
.client-result-item:last-child { border-bottom:none; }
.client-result-item:hover { background:rgba(212,175,55,.07); }
.client-result-nom { font-size:.79rem; font-weight:600; color:#EFECF8; }
.client-result-sub { font-size:.68rem; color:#7B7890; margin-top:1px; }

/* ── Modal paiement ── */
.modal-paiement {
    display:none; position:fixed; inset:0; z-index:2000;
    background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
    align-items:center; justify-content:center;
}
.modal-paiement.active { display:flex; }

.modal-paiement-content {
    background:#12121E; border:1px solid rgba(212,175,55,.3);
    border-radius:20px; width:90%; max-width:480px;
    box-shadow:0 24px 60px rgba(0,0,0,.7);
    overflow:hidden;
}
.modal-paiement-header {
    padding:16px 20px; background:rgba(212,175,55,.07);
    border-bottom:1px solid rgba(212,175,55,.15);
    display:flex; justify-content:space-between; align-items:center;
}
.modal-paiement-header h2 { font-family:'Syne',sans-serif; font-size:1.1rem; color:#D4AF37; margin:0; }
.modal-paiement-body { padding:20px; }

.total-a-payer { text-align:center; margin-bottom:18px; }
.total-a-payer h3 { font-size:.78rem; color:#7B7890; text-transform:uppercase; letter-spacing:.8px; margin-bottom:6px; }
.montant-paiement {
    font-family:'Syne',sans-serif; font-size:2.4rem; font-weight:800; color:#D4AF37;
    text-shadow:0 0 30px rgba(212,175,55,.3);
}

.modes-paiement {
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px;
}
.mode-paiement-btn {
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:12px 6px; background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08); border-radius:12px;
    cursor:pointer; transition:all .16s; color:#EFECF8;
}
.mode-paiement-btn:hover {
    border-color:rgba(212,175,55,.35); background:rgba(212,175,55,.07);
}
.mode-paiement-btn.active {
    border-color:#D4AF37; background:rgba(212,175,55,.15);
    box-shadow:0 0 12px rgba(212,175,55,.2);
}
.mode-icon { font-size:1.4rem; }
.mode-nom  { font-size:.68rem; font-weight:600; color:#7B7890; }
.mode-paiement-btn.active .mode-nom { color:#D4AF37; }

.input-montant {
    width:100%; padding:12px 14px;
    background:#0D0D18; border:1px solid rgba(212,175,55,.25);
    border-radius:10px; color:#EFECF8;
    font-family:'Syne',sans-serif; font-size:1.3rem; font-weight:700;
    text-align:center; outline:none; box-sizing:border-box;
    transition:border-color .14s;
}
.input-montant:focus { border-color:#D4AF37; }

/* ── Catégories grid ── */
.categories-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; padding:4px;
}

/* ── Responsive caisse ── */
@media (max-width: 960px) {
    .pos-container {
        grid-template-columns: 1fr;
        overflow-y: auto;
        height: auto;
    }
    #section-caisse { height: auto; overflow: visible; }
    .caisse-content.active { overflow: visible; }
    .pos-produits { min-height: 320px; max-height: 50vh; }
    .pos-panier   { max-height: 520px; }
    .pos-actions  { grid-template-columns: 44px 44px 1fr; }
}

@media (max-width: 600px) {
    .produits-grid { grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap:8px; }
    .produit-card  { padding:10px 7px; }
    .produit-prix  { font-size:.85rem; }
    .caisse-tab    { padding:5px 10px; font-size:.72rem; }
    .modes-paiement { grid-template-columns:repeat(2,1fr); }
}

/* ===== MODAL PAIEMENT ===== */
.modal-paiement{display:none;position:fixed;inset:0;background:rgba(5,5,7,.92);backdrop-filter:blur(16px);z-index:2000;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.modal-paiement.active{display:flex}
.modal-paiement-content{background:var(--bg-card);border:1px solid var(--gold-border);border-radius:var(--r-xl);width:90%;max-width:580px;max-height:95vh;overflow-y:auto;box-shadow:var(--shadow-xl),var(--glow-gold);animation:modalIn var(--t-base) var(--ease)}
.modal-paiement-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--gold-border);background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(212,175,55,.04));border-radius:var(--r-xl) var(--r-xl) 0 0}
.modal-paiement-header h2{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;color:var(--gold);margin:0}
.modal-paiement-body{padding:24px}
.total-a-payer{text-align:center;margin-bottom:24px;padding:24px;background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(212,175,55,.05));border:1px solid var(--gold-border);border-radius:var(--r-lg)}
.total-a-payer h3{font-size:.76rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:8px}
.montant-paiement{font-family:'Syne',sans-serif;font-size:2.4rem;font-weight:800;color:var(--gold)}
.modes-paiement{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}
.mode-paiement-btn{padding:20px;border:1px solid var(--gold-border);border-radius:var(--r-lg);background:var(--bg-elevated);cursor:pointer;transition:all var(--t-fast) var(--ease);text-align:center}
.mode-paiement-btn:hover{border-color:var(--gold);background:var(--gold-muted);transform:translateY(-2px)}
.mode-paiement-btn.active{border-color:var(--gold);background:var(--gold-muted);box-shadow:var(--shadow-gold)}
.mode-icon{font-size:1.8rem;margin-bottom:8px}
.mode-nom{font-weight:700;font-size:.78rem;text-transform:uppercase;color:var(--text-primary)}
.input-montant{width:100%;padding:16px;font-family:'Syne',sans-serif;font-size:1.5rem;text-align:center;border:1px solid var(--gold-border);border-radius:var(--r-md);font-weight:700;background:var(--bg-elevated);color:var(--gold);outline:none}
.input-montant:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-muted)}
.raccourcis-montants{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.raccourcis-montants button{padding:8px;border:1px solid var(--gold-border);border-radius:var(--r-sm);background:var(--bg-elevated);cursor:pointer;font-weight:700;font-size:.8rem;color:var(--gold);transition:all var(--t-fast) var(--ease)}
.raccourcis-montants button:hover{background:var(--gold);color:var(--text-inverse)}
.modal-paiement-actions{display:flex;gap:12px;margin-top:24px}
.modal-paiement-actions button{flex:1;padding:13px;font-size:.85rem;font-family:'DM Sans',sans-serif;font-weight:700;border-radius:var(--r-md);text-transform:uppercase;cursor:pointer;transition:all var(--t-fast) var(--ease);border:none}

/* ===== CAISSE STATS ===== */
.caisse-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:20px 0}
.caisse-stats .stat-card{flex-direction:column;text-align:center}
.caisse-stats h4{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}

/* ===== ALERTS ===== */
.alert{padding:14px 16px;border-radius:var(--r-md);margin-bottom:20px;border-left:3px solid;font-size:.84rem;line-height:1.5}
.alert-info{background:var(--info-bg);border-left-color:var(--info);color:var(--info)}
.alert-success{background:var(--success-bg);border-left-color:var(--success);color:var(--success)}
.alert-warning{background:var(--warning-bg);border-left-color:var(--warning);color:var(--warning)}
.alert-danger{background:var(--danger-bg);border-left-color:var(--danger);color:var(--danger)}

/* ===== CLOTURE ===== */
.cloture-container{display:grid;gap:20px;margin:20px 0}
.cloture-card{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:24px}
.cloture-card h4{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--gold);margin:0 0 16px 0;padding-bottom:12px;border-bottom:1px solid var(--gold-border)}

/* ===== RECENTS ===== */
.propositions-recentes,.projets-recents,.projets-brouillon{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:20px;margin-bottom:20px}
.propositions-recentes h3,.projets-recents h3,.projets-brouillon h3{font-family:'Syne',sans-serif;font-size:.92rem;font-weight:700;color:var(--gold);margin:0 0 16px 0;padding-bottom:12px;border-bottom:1px solid var(--gold-border)}

/* ===== EMPTY STATES ===== */
.empty-state{text-align:center;padding:32px!important;color:var(--text-muted);font-size:.83rem;font-style:italic}
.empty-state-large{text-align:center;padding:48px 24px;background:var(--bg-elevated);border:1px dashed var(--gold-border);border-radius:var(--r-lg);color:var(--text-muted);font-size:.88rem}

/* ===== ACTIVITY LIST ===== */
.activity-list,.events-list{list-style:none}
.activity-list li,.events-list li{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-secondary);font-size:.82rem;transition:all var(--t-fast) var(--ease);border-radius:var(--r-sm)}
.activity-list li:hover,.events-list li:hover{background:var(--gold-muted);color:var(--text-primary);padding-left:16px}
.activity-list li:last-child,.events-list li:last-child{border-bottom:none}

/* Masquer colonne ID dans tableau membres */
#tableMembres th:first-child,#tableMembres td:first-child { display: none; }

.rapport-container{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:24px}

/* ===== MODAL FORMS ===== */
.modal-body input,.modal-body select,.modal-body textarea{background:var(--bg-elevated)!important;border:1px solid var(--gold-border)!important;border-radius:var(--r-md)!important;color:var(--text-primary)!important;font-family:'DM Sans',sans-serif!important}
.modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px var(--gold-muted)!important;outline:none!important}
.modal-body input[readonly]{background:var(--bg-surface)!important;opacity:.6;cursor:not-allowed}
.modal-body input::placeholder,.modal-body textarea::placeholder{color:var(--text-muted)!important}
.ligne-devis,.ligne-facture{background:var(--bg-elevated)!important;border:1px solid var(--gold-border)!important;border-radius:var(--r-md)!important;padding:12px!important;margin-bottom:10px!important}
.modal-body select option{background:var(--bg-card)!important;color:var(--text-primary)!important}

/* ===== AUTOCOMPLETE ===== */
.membre-search-wrapper{position:relative}
.membre-search-input{width:100%;padding:11px 16px!important;background:var(--bg-elevated)!important;border:1px solid var(--gold-border)!important;border-radius:var(--r-md)!important;color:var(--text-primary)!important;font-size:.87rem;font-family:'DM Sans',sans-serif!important;outline:none;transition:all var(--t-fast) var(--ease)}
.membre-search-input:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px var(--gold-muted)!important}
.membre-search-results{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-card);border:1px solid var(--gold-border);border-radius:var(--r-md);max-height:260px;overflow-y:auto;z-index:3000;box-shadow:var(--shadow-xl)}
.membre-result-item{padding:11px 16px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:all var(--t-fast) var(--ease)}
.membre-result-item:last-child{border-bottom:none}
.membre-result-item:hover{background:var(--gold-muted)}
.membre-result-item .nom{font-weight:600;color:var(--text-primary);font-size:.87rem}
.membre-result-item .detail{font-size:.75rem;color:var(--text-muted);margin-top:2px}
.membre-result-empty{padding:16px;text-align:center;color:var(--text-muted);font-size:.83rem}
#modalBody label:has(input[type=checkbox]):hover{background:var(--gold-muted)!important;border-color:var(--gold)!important}

/* ===== LIGNES PRODUIT ===== */
.ligne-produit-row{background:var(--bg-elevated)!important;border:1px solid var(--gold-border)!important;border-radius:var(--r-md)!important;padding:12px!important;margin-bottom:10px!important;display:flex!important;flex-direction:column!important;gap:10px!important}
.ligne-produit-search-wrap{position:relative;width:100%}
.ligne-produit-input{width:100%!important;padding:10px 14px!important;background:var(--bg-card)!important;border:1px solid var(--gold-border)!important;border-radius:var(--r-md)!important;color:var(--text-primary)!important;font-size:.87rem!important;font-family:'DM Sans',sans-serif!important;outline:none;transition:border-color var(--t-fast) var(--ease)}
.ligne-produit-input:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px var(--gold-muted)!important}
.ligne-produit-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-card);border:1px solid var(--gold-border);border-radius:var(--r-md);max-height:300px;overflow-y:auto;z-index:3000;box-shadow:var(--shadow-xl)}
.produit-group-label{padding:6px 14px 4px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);background:var(--bg-elevated);position:sticky;top:0}
.produit-result-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:all var(--t-fast) var(--ease);gap:12px}
.produit-result-item:hover{background:var(--gold-muted)}
.produit-result-item:last-child{border-bottom:none}
.produit-result-main{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.produit-result-nom{font-weight:500;color:var(--text-primary);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.produit-badge-caisse{font-size:.66rem;background:var(--info-bg);color:var(--info);border:1px solid rgba(108,142,255,.22);border-radius:var(--r-full);padding:2px 8px;white-space:nowrap;flex-shrink:0}
.produit-result-stock{font-size:.7rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.produit-result-prix{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--gold);white-space:nowrap;flex-shrink:0}
.produit-result-tva{font-size:.7rem;color:var(--text-muted);background:var(--bg-elevated);padding:2px 6px;border-radius:var(--r-sm)}
.produit-result-empty{padding:16px 14px;color:var(--text-muted);font-size:.82rem;font-style:italic;text-align:center}
.ligne-produit-fields{display:grid;grid-template-columns:80px 110px 70px 110px 36px;gap:8px;align-items:end}
.ligne-field-label{display:block;font-size:.68rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.ligne-produit-fields input{width:100%;padding:8px 10px!important;background:var(--bg-card)!important;border:1px solid var(--gold-border)!important;border-radius:var(--r-sm)!important;color:var(--text-primary)!important;font-size:.82rem!important;text-align:right;outline:none}
.ligne-produit-fields input:focus{border-color:var(--gold)!important;box-shadow:0 0 0 2px var(--gold-muted)!important}
.ligne-produit-fields input[readonly]{background:var(--bg-surface)!important;color:var(--gold)!important;font-weight:700;cursor:default}
.ligne-suppr-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--danger-bg);border:1px solid rgba(239,68,68,.25);border-radius:var(--r-sm);cursor:pointer;color:var(--danger);transition:all var(--t-fast) var(--ease);align-self:end;flex-shrink:0}
.ligne-suppr-btn:hover{background:var(--danger);color:white;border-color:var(--danger);transform:scale(1.08)}

/* ===== FILE INPUT ===== */
input[type="file"]{display:none}
.file-input-label{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:var(--bg-elevated);border:1px dashed var(--gold-border);border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast) var(--ease);font-size:.82rem;color:var(--text-secondary);text-align:left}
.file-input-label:hover{border-color:var(--gold);background:var(--gold-muted);color:var(--gold)}
.file-input-icon{font-size:1.1rem;flex-shrink:0}
.file-input-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.file-input-label.has-file{border-style:solid;border-color:var(--success);color:var(--success);background:var(--success-bg)}
.export-card{display:flex;flex-direction:column;align-items:center;gap:0}
.export-card .form-group{width:100%;text-align:left}
.export-card .btn-primary,.export-card .btn-secondary{width:100%;justify-content:center}

/* ===== PARAMÈTRES ===== */
.settings-form{max-width:840px}
.param-section-title{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--gold);margin:24px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--gold-border);display:flex;align-items:center;gap:8px}
.param-card{background:var(--bg-elevated);border:1px solid var(--gold-border);border-radius:var(--r-md);padding:18px;margin-bottom:18px}
.param-card h4{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;color:var(--gold);margin:0 0 14px}
.danger-zone{background:var(--danger-bg);border:1px solid rgba(239,68,68,.3);border-radius:var(--r-md);padding:18px;margin-top:24px}
.danger-zone h4{color:var(--danger)}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-base)}
::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ===== GLOBAL ===== */
::selection{background:rgba(212,175,55,.28);color:var(--text-primary)}
*:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{position:relative;pointer-events:none;opacity:.6}
.loading::after{content:'';position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(212,175,55,.2);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;z-index:10}

/* ===== UTILITIES ===== */
.text-center{text-align:center}.text-right{text-align:right}
.d-none{display:none!important}.d-flex{display:flex}.d-grid{display:grid}.d-block{display:block}
.flex-wrap{flex-wrap:wrap}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.align-center{align-items:center}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}
.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.divider{height:1px;background:var(--gold-border);margin:20px 0}
.card-elegant{background:var(--grad-card);border:1px solid var(--gold-border);border-radius:var(--r-lg);padding:20px;transition:all var(--t-base) var(--ease)}
.card-elegant:hover{border-color:rgba(212,175,55,.35);box-shadow:var(--shadow-gold);transform:translateY(-2px)}

/* ===== RESPONSIVE ===== */
@media(max-width:1200px){
    .pos-container{grid-template-columns:1fr;height:auto;min-height:auto}
    .pos-produits{min-height:380px}
    .stats-container{grid-template-columns:1fr}
    .ligne-produit-fields{grid-template-columns:1fr 1fr 1fr}
    .ligne-suppr-btn{grid-column:3}
}
@media(max-width:992px){
    .sidebar{transform:translateX(-100%);width:min(82vw,280px);box-shadow:var(--shadow-xl)}
    .sidebar.active{transform:translateX(0)}
    .main-content{margin-left:0;max-width:100vw}
    .sidebar-toggle-mobile{display:flex}
    .content-area{padding:16px}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .modes-paiement{grid-template-columns:repeat(2,1fr)}
    .raccourcis-montants{grid-template-columns:repeat(3,1fr)}
    .export-container{grid-template-columns:repeat(2,1fr)}
    .rapports-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    html{font-size:14px}
    .content-area{padding:12px}
    .section-header{flex-direction:column;align-items:stretch}
    .section-header h2,.content-section > h2{font-size:1.25rem}
    .filters{padding:10px;gap:8px}
    .filters input,.filters select{min-width:0;width:100%}
    .stats-grid{gap:10px}
    .dashboard-grid{grid-template-columns:1fr}
    .events-grid{grid-template-columns:1fr}
    .compta-summary{grid-template-columns:repeat(2,1fr)}
    .pos-actions{grid-template-columns:1fr 1fr}
    .btn-payer{grid-column:1 / -1}
    .rh-menu,.compta-menu,.commercial-menu,.projets-menu,.caisse-menu{gap:2px;padding:4px}
    .rh-tab,.compta-tab,.commercial-tab,.projets-tab,.caisse-tab{padding:8px 12px;font-size:.74rem}
    .modal.active{padding:12px;padding-top:12px;align-items:flex-end}
    .modal-content{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92vh}
    .montant-paiement{font-size:1.9rem}
    .user-name{display:none}
    .journaux-grid,.export-container,.rapports-grid{grid-template-columns:repeat(2,1fr)}
    .top-bar{padding:0 16px;gap:10px}
    .search-bar{max-width:180px}
    .ligne-produit-fields{grid-template-columns:1fr 1fr}
    .ligne-suppr-btn{grid-column:2;justify-self:end}
}
@media(max-width:576px){
    html{font-size:13px}
    .content-area{padding:8px}
    .stat-card{flex-direction:column;text-align:center;padding:14px;gap:10px}
    .stat-icon{width:44px;height:44px;font-size:1.4rem}
    .stat-number{font-size:1.25rem}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
    .documents-grid{grid-template-columns:repeat(2,1fr)}
    .modes-paiement{grid-template-columns:repeat(2,1fr)}
    .raccourcis-montants{grid-template-columns:repeat(3,1fr)}
    .compta-summary{grid-template-columns:1fr}
    .journaux-grid,.export-container,.rapports-grid{grid-template-columns:1fr}
    .postes-grid,.formations-grid{grid-template-columns:1fr}
    .sub-tab{padding:6px 12px;font-size:.74rem}
    .search-bar{display:none}
    .btn-primary,.btn-secondary,.btn-danger,.btn-success{padding:8px 14px;font-size:.77rem}
    .top-bar{padding:0 12px}
}

/* ===== PRINT ===== */
@media print{
    body{background:white;color:black}
    .sidebar,.top-bar,.btn-primary,.btn-secondary,.btn-danger,.btn-success,
    .filters,.action-buttons,.dropdown-actions,.modal,.modal-paiement,
    body::before,body::after,.main-content::before{display:none!important}
    .main-content{margin-left:0!important;max-width:100%!important}
    .content-area{padding:0!important}
    *{box-shadow:none!important}
    .data-table th,.data-table td{border:1px solid #ccc;color:black;background:white}
    .data-table thead{background:#f5f5f5}
}