*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f5f4f0;--surface: #ffffff;--border: #e8e6e0;--text: #1a1a18;--muted: #6b6b67;--accent: #1a1a18;--alcool: #378ADD;--soft: #1D9E75;--resto: #EF9F27;--boutique: #D4537E;--danger: #E24B4A;--success: #1D9E75;--sidebar-w: 220px}body{font-family:Inter,system-ui,sans-serif;font-size:14px;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}.app{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-w);background:var(--text);color:#fff;display:flex;flex-direction:column;padding:1.25rem 0;position:fixed;top:0;left:0;bottom:0;z-index:10}.logo{display:flex;align-items:center;gap:8px;padding:0 1.25rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:1rem}.logo-icon{font-size:20px}.logo-text{font-size:16px;font-weight:600;letter-spacing:-.3px}.periode-select{display:flex;gap:6px;padding:0 1rem .75rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:.75rem}.periode-select select{flex:1;background:#ffffff1a;border:none;color:#fff;border-radius:6px;padding:5px 6px;font-size:12px;cursor:pointer;outline:none}.periode-select select option{background:#2a2a28}nav{flex:1;padding:0 .75rem}.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;border-radius:8px;background:transparent;color:#ffffffa6;font-size:13px;cursor:pointer;text-align:left;margin-bottom:2px;transition:background .15s,color .15s}.nav-item:hover{background:#ffffff14;color:#fff}.nav-item.active{background:#ffffff26;color:#fff;font-weight:500}.nav-icon{font-size:15px}.sidebar-footer{padding:.75rem 1.25rem 0;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:#ffffff59}.main{margin-left:var(--sidebar-w);flex:1;padding:1.75rem 2rem;min-height:100vh}.page-header{margin-bottom:1.5rem}.page-title{font-size:20px;font-weight:600;letter-spacing:-.3px}.page-subtitle{font-size:13px;color:var(--muted);margin-top:2px}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:1.5rem}.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem}.metric-card.primary{background:var(--text);color:#fff}.metric-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}.metric-card.primary .metric-label{color:#ffffff8c}.metric-value{font-size:24px;font-weight:600;letter-spacing:-.5px}.metric-value.success{color:var(--success)}.metric-value.danger{color:var(--danger)}.metric-sub{font-size:11px;color:var(--muted);margin-top:3px}.metric-card.primary .metric-sub{color:#fff6}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.25rem;margin-bottom:1rem}.card-title{font-size:13px;font-weight:600;margin-bottom:1rem;color:var(--text)}.cat-bars{display:flex;flex-direction:column;gap:12px}.cat-bar-row{display:flex;align-items:center;gap:12px}.cat-bar-label{width:120px;font-size:13px;display:flex;align-items:center;gap:6px}.cat-bar-track{flex:1;height:24px;background:#f0ede8;border-radius:6px;overflow:hidden}.cat-bar-fill{height:100%;border-radius:6px;transition:width .4s ease}.cat-bar-vals{width:140px;display:flex;gap:6px;justify-content:flex-end;font-size:12px}.taux-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600}.taux-good{background:#e8f5ee;color:#0d6e45}.taux-medium{background:#fef3dc;color:#8a5a00}.taux-bad{background:#fdeaea;color:#9a2525}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}thead th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--border);text-align:left}tbody td{padding:10px;border-bottom:1px solid var(--border);font-size:13px}tbody tr:last-child td{border-bottom:none}tbody tr:hover{background:#fafaf8}.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:background .15s}.btn:hover{background:var(--bg)}.btn-primary{background:var(--text);color:#fff;border-color:var(--text)}.btn-primary:hover{opacity:.85}.btn-sm{padding:5px 10px;font-size:12px}input[type=text],input[type=number],input[type=email],select,textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s}input:focus,select:focus,textarea:focus{border-color:#aaa}label{font-size:12px;font-weight:500;color:var(--muted);display:block;margin-bottom:4px}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:12px}.drop-zone{border:2px dashed var(--border);border-radius:12px;padding:2.5rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.drop-zone:hover,.drop-zone.drag-over{border-color:#aaa;background:var(--bg)}.drop-zone-icon{font-size:32px;margin-bottom:8px}.drop-zone p{font-size:14px;font-weight:500;margin-bottom:4px}.drop-zone small{color:var(--muted);font-size:12px}.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600}.badge-alcool{background:#deedf9;color:#1a5a9a}.badge-soft{background:#d8f5eb;color:#0d6e45}.badge-resto{background:#fdefd4;color:#7a4a00}.badge-boutique{background:#fde0ec;color:#8a2050}.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:1rem}.alert-info{background:#e6f1fb;color:#185fa5}.alert-success{background:#eaf3de;color:#27500a}.alert-warning{background:#faeeda;color:#633806}.alert-error{background:#fcebeb;color:#a32d2d}.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}.empty-state-icon{font-size:40px;margin-bottom:10px}.empty-state p{font-size:14px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media (max-width: 900px){.grid-2{grid-template-columns:1fr}}.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--text);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}
