:root {
      --brand: #E63946; --brand-dark: #c1121f; --brand-light: #ffeaec; --gold: #F4A261;
      --dark: #1a1a2e; --dark2: #16213e; --surface: #f8f7f4; --surface2: #ffffff;
      --border: #e8e6e1; --text: #1a1a2e; --text2: #6b7280; --text3: #9ca3af;
      --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6;
      --radius: 14px; --radius-sm: 8px; --shadow: 0 2px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    [hidden] { display: none !important; }
    body { min-height: 100vh; background: var(--surface); color: var(--text); font-family: "Inter", sans-serif; line-height: 1.6; }
    h1,h2,h3,h4 { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: 0; }
    button,input,textarea,select { font: inherit; } button { cursor: pointer; } img { display:block; max-width:100%; }
    .login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, var(--dark), var(--dark2) 64%, #0f3460); }
    .login-card { width: min(430px, 100%); background: white; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-lg); }
    .brand { display:flex; align-items:center; gap:10px; margin-bottom:18px; font-family:"Plus Jakarta Sans"; font-weight:800; font-size:22px; }
    .brand img { width:40px; height:40px; border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,0.18); background:white; }
    .brand-mark { width:40px; height:40px; border-radius:12px; background:var(--brand); color:white; display:grid; place-items:center; }
    .field { display:grid; gap:7px; margin-top:14px; }
    .field label { font-size:13px; font-weight:800; color:var(--dark); }
    .field input,.field textarea,.field select { width:100%; border:1.5px solid var(--border); border-radius:10px; padding:12px; outline:none; background:white; }
    .field textarea { min-height:88px; resize:vertical; }
    .field input:focus,.field textarea:focus,.field select:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(230,57,70,0.08); }
    .btn-primary,.btn-soft,.btn-danger,.btn-ghost { border:0; border-radius:10px; padding:11px 15px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; transition:.2s ease; }
    .btn-primary { background:var(--brand); color:white; } .btn-primary:hover { background:var(--brand-dark); }
    .btn-soft { background:var(--brand-light); color:var(--brand); }
    .btn-danger { background:#fee2e2; color:var(--danger); }
    .btn-ghost { background:white; color:var(--text2); border:1.5px solid var(--border); }
    .error-text { min-height:18px; margin-top:10px; color:var(--danger); font-size:13px; font-weight:800; }
    .app-shell { display:block; min-height:100vh; }
    .sidebar { position:fixed; inset:0 auto 0 0; width:270px; background:var(--dark); color:white; padding:20px; display:flex; flex-direction:column; gap:18px; }
    .side-brand { color:white; } .side-brand .brand-mark { background:var(--brand); }
    .admin-tabs { display:grid; gap:8px; }
    .admin-tab { border:0; border-radius:10px; background:transparent; color:rgba(255,255,255,.68); padding:12px; text-align:left; font-weight:800; display:flex; align-items:center; gap:10px; }
    .admin-tab:hover,.admin-tab.active { background:rgba(255,255,255,.08); color:white; }
    .sidebar-footer { margin-top:auto; display:grid; gap:8px; }
    .content { margin-left:270px; padding:24px; }
    .topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
    .topbar h1 { font-size:28px; }
    .muted { color:var(--text2); font-size:14px; }
    .stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
    .stat-card,.panel { background:white; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
    .stat-card { padding:18px; } .stat-card i { color:var(--brand); } .stat-card strong { display:block; font-family:"Plus Jakarta Sans"; font-size:28px; }
    .panel { padding:18px; margin-bottom:18px; }
    .panel-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
    .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    .field.full { grid-column:1/-1; }
    .actions-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
    .table-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm); }
    .color-chip { display:inline-flex; align-items:center; gap:8px; background:var(--surface,#f8f7f4); border:1px solid var(--border); border-radius:999px; padding:6px 10px 6px 8px; font-size:13px; font-weight:700; }
    .color-chip-dot { width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,0.15); flex:0 0 auto; }
    .color-chip-remove { border:0; background:transparent; color:var(--danger,#ef4444); font-weight:800; cursor:pointer; padding:0; }
    table { width:100%; border-collapse:collapse; min-width:760px; background:white; }
    th,td { padding:12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; font-size:14px; }
    th { background:var(--surface); font-weight:800; color:var(--dark); }
    tr:last-child td { border-bottom:0; }
    .thumb { width:48px; height:48px; border-radius:10px; object-fit:cover; background:var(--surface); border:1px solid var(--border); }
    .status-pill { border-radius:999px; padding:4px 10px; font-size:12px; font-weight:800; display:inline-flex; }
    .status-pill.pending { background:#fef3c7; color:#b45309; }
    .status-pill.validated { background:#dbeafe; color:#1e40af; }
    .status-pill.shipping { background:#fce7f3; color:#be185d; }
    .status-pill.delivered { background:#dcfce7; color:#166534; }
    .status-pill.cancelled { background:#f3f4f6; color:#6b7280; }
    .status-pill.payment-pending { background:#fef3c7; color:#b45309; }
    .status-pill.payment-succeeded { background:#dcfce7; color:#166534; }
    .status-pill.payment-failed { background:#fee2e2; color:#b91c1c; }
    .status-pill.payment-cancelled { background:#f3f4f6; color:#6b7280; }
    .modal-body img.proof-img { max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0; }
    .view { display:none; } .view.active { display:block; }
    .notice { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:10px; padding:12px; margin-bottom:14px; font-weight:700; }
    .color-picker-wrap { display:flex; gap:10px; align-items:center; }
    .color-input { width:60px; height:42px; border:1.5px solid var(--border); border-radius:8px; cursor:pointer; }
    .logo-preview { width:80px; height:80px; border:1px solid var(--border); border-radius:10px; object-fit:contain; background:var(--surface); }
    .payment-method { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:10px; }
    .payment-method strong { font-size:15px; display:block; }
    .payment-method .muted { font-size:13px; }
    .sub-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
    .sub-tab { border:1.5px solid var(--border); background:white; border-radius:8px; padding:10px; font-weight:700; text-align:center; cursor:pointer; }
    .sub-tab.active { background:var(--brand-light); border-color:var(--brand); color:var(--brand); }
    .badge { display:inline-flex; background:var(--brand-light); color:var(--brand); padding:4px 8px; border-radius:6px; font-size:12px; font-weight:800; }
    .audit-entry { background:var(--surface); border-left:3px solid var(--brand); padding:10px; margin-bottom:8px; border-radius:4px; font-size:13px; }
    .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:99; opacity:0; pointer-events:none; transition:opacity 0.2s ease; }
    .modal-overlay.open { opacity:1; pointer-events:all; }
    .modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.95); z-index:100; background:white; border-radius:var(--radius); width:min(680px, 90vw); max-height:90vh; overflow:auto; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:0.25s ease; }
    .modal.open { opacity:1; pointer-events:all; transform:translate(-50%,-50%) scale(1); }
    .modal-header { padding:18px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
    .modal-body { padding:20px; }
    .close-btn { width:36px; height:36px; border:0; border-radius:50%; background:var(--surface); color:var(--text2); cursor:pointer; }
    .expense-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; align-items:center; padding:10px; background:white; border-radius:8px; margin-bottom:8px; }
    @media (max-width:960px) {
      .sidebar { position:fixed; left:0; top:0; width:250px; height:100vh; z-index:1000; border-right:1px solid var(--border); overflow-y:auto; }
      .app-shell { display:flex; }
      .app-shell.authenticated .sidebar { transform:translateX(0); }
      .content { margin-left:250px; padding:16px; }
      .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .form-grid { grid-template-columns:1fr; }
      .table-wrap { overflow-x:auto; }
      table { font-size:13px; }
      .sub-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media (max-width:768px) {
      .sidebar { width:200px; }
      .content { margin-left:200px; padding:12px; }
      .stats-grid { grid-template-columns:1fr; }
      .modal { width:min(90vw, 500px); }
      .topbar { flex-direction:column; gap:10px; }
      table th, table td { padding:6px 8px; font-size:12px; }
      .admin-tabs { flex-direction:column; }
      .admin-tab { padding:8px 12px; text-align:left; }
    }
    @media (max-width:560px) {
      .sidebar { width:180px; position:fixed; }
      .content { margin-left:180px; padding:8px; }
      .form-grid { grid-template-columns:1fr !important; }
      .stats-grid { grid-template-columns:1fr; }
      .topbar { align-items:flex-start; flex-direction:column; gap:8px; }
      .brand { font-size:16px; }
      .panel-header h2, .panel-header h3 { font-size:16px; }
      .btn { padding:8px 12px; font-size:12px; }
      .modal { width:95vw; }
      table { width:100%; font-size:11px; overflow-x:auto; display:block; }
      thead, tbody, th, td, tr { display:block; }
      th, td { text-align:left; padding:8px 4px; }
      tr { border-bottom:1px solid var(--border); margin-bottom:4px; }
      th { display:none; }
      td::before { content:attr(data-label); font-weight:700; display:block; margin-bottom:4px; }
      .expense-row { grid-template-columns:1fr; }
      .color-picker-wrap { flex-direction:column; align-items:flex-start; }
      .sub-tabs { grid-template-columns:1fr; }
    }
  
/* ===== Icones Lucide (SVG inline) ===== */
.lucide { width: 17px; height: 17px; flex: none; vertical-align: -3px; }
.lucide.spin { animation: lucide-spin 0.9s linear infinite; }
@keyframes lucide-spin { to { transform: rotate(360deg); } }
.stat-card .lucide { width: 22px; height: 22px; color: var(--brand); }
.admin-tab .lucide { width: 17px; height: 17px; margin-right: 4px; }

/* ===== Logos des moyens de paiement ===== */
.pay-method-logo { height: 30px; max-width: 110px; object-fit: contain; border-radius: 6px; background: #fff; padding: 2px 6px; border: 1px solid var(--border); }
.pay-method-head { display: flex; align-items: center; gap: 10px; }
.pay-method-logo-preview { height: 44px; max-width: 140px; object-fit: contain; border-radius: 8px; background: #fff; padding: 4px 8px; border: 1px solid var(--border, #e2e5ec); }
.pay-method-logo-placeholder { width: 56px; height: 44px; border-radius: 8px; border: 1.5px dashed var(--border, #e2e5ec); display: grid; place-items: center; color: var(--text2, #888); }
.pay-method-logo-placeholder .lucide { width: 20px; height: 20px; }

/* Tailles icones contextuelles */
.btn-primary .lucide, .btn-soft .lucide, .btn-ghost .lucide, .btn-danger .lucide { width: 16px; height: 16px; }

.tab-badge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger, #ef4444); color: #fff; font-size: 11px; font-weight: 800; text-align: center; margin-left: 4px; }
.orders-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.orders-filter-bar .filter-btn .lucide { width: 14px; height: 14px; }