:root { --noir:#0A0A0A; --or:#C9A86A; --or-clair:#e6d3a8; --gris:#f7f5f0; --texte:#222; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Arial,sans-serif; background:var(--gris); color:var(--texte); font-size:14px; }
header { background:var(--noir); color:#fff; padding:12px 24px; display:flex; justify-content:space-between; align-items:center; }
header .logo { font-weight:700; letter-spacing:1px; color:var(--or); font-size:17px; }
header nav a { color:#ccc; text-decoration:none; margin-left:16px; font-size:13px; }
header nav a:hover { color:var(--or); }
main { max-width:1200px; margin:24px auto; padding:0 20px; }
h1 { font-size:22px; color:var(--noir); margin-bottom:18px; border-bottom:2px solid var(--or); padding-bottom:8px; }
h2 { font-size:16px; margin:18px 0 10px; color:var(--noir); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:22px; }
.card { background:#fff; border:1px solid #e5e0d5; border-top:3px solid var(--or); border-radius:6px; padding:14px 16px; }
.card .n { font-size:22px; font-weight:700; color:var(--noir); }
.card .l { font-size:11px; color:#888; text-transform:uppercase; letter-spacing:.5px; }
table { width:100%; border-collapse:collapse; background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); }
th { background:var(--noir); color:#fff; text-align:left; padding:9px 10px; font-size:12px; }
td { padding:8px 10px; border-bottom:1px solid #eee; font-size:13px; }
tr:hover td { background:#faf6ec; }
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.b-creee{background:#f1f1f1;color:#555}.b-preparation{background:#fff3d6;color:#8a6d1f}
.b-expediee{background:#dbeafe;color:#1d4ed8}.b-livree{background:#dcfce7;color:#15803d}
.b-annulee,.b-retournee{background:#fee2e2;color:#b91c1c}
.b-en_attente{background:#fff3d6;color:#8a6d1f}.b-validee{background:#dcfce7;color:#15803d}
.b-payee{background:#dcfce7;color:#15803d;border:1px solid #15803d}
.b-annulee{background:#fee2e2;color:#b91c1c}
.btn { display:inline-block; padding:5px 12px; border-radius:4px; text-decoration:none; font-size:12px; border:none; cursor:pointer; }
.btn-or { background:var(--or); color:#fff; } .btn-or:hover{background:#b8934f;}
.btn-noir { background:var(--noir); color:var(--or); } .btn-noir:hover{background:#222;}
.btn-vert{background:#15803d;color:#fff}.btn-rouge{background:#b91c1c;color:#fff}
.btn-gris{background:#e5e5e5;color:#444}
form.ajout { background:#fff; border:1px solid #e5e0d5; padding:16px; border-radius:6px; margin-bottom:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
form.ajout input, form.ajout select { padding:8px; border:1px solid #ddd; border-radius:4px; font-size:13px; width:100%; }
form.ajout button { grid-column:1/-1; justify-self:start; }
.flash { padding:10px 14px; border-radius:5px; margin-bottom:14px; font-size:13px; }
.flash.ok{background:#dcfce7;color:#15803d;border:1px solid #86efac}
.flash.erreur{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
.login-box { max-width:380px; margin:60px auto; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.12); }
.login-box .tete { background:var(--noir); color:var(--or); text-align:center; padding:22px; font-weight:700; font-size:19px; }
.login-box form { padding:26px; display:flex; flex-direction:column; gap:12px; }
.login-box input { padding:11px; border:1px solid #ddd; border-radius:5px; font-size:14px; }
.login-box button { background:var(--or); color:#fff; border:none; padding:12px; border-radius:5px; font-size:15px; font-weight:600; cursor:pointer; }
.lien-espace { display:block; text-align:center; margin-top:14px; font-size:12px; color:#888; text-decoration:none; }
footer { text-align:center; color:#aaa; font-size:11px; padding:24px; }
.filtres { margin-bottom:14px; } .filtres a { margin-right:8px; font-size:12px; }