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

:root {
    --bleu-1: #1a5fd6; --bleu-2: #3f9bff; --bleu-3: #7ecbff;
    --fond: #070a12; --carte: #0d1526; --carte-2: #101c33;
    --bordure: rgba(90,160,255,.16); --texte: #eef3fb; --texte-att: #93a5bf;
    --vert:#33d17a; --rouge:#ff5c5c; --orange:#ffb545; --radius:14px;
}
* { box-sizing: border-box; }
body {
    margin:0; background: var(--fond); color: var(--texte);
    font-family:'Inter',sans-serif; font-size: 14.5px;
}
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family:'Montserrat',sans-serif; font-weight:800; margin:0 0 .4em; }

.admin-shell { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
    width: 250px; flex-shrink:0; background: #060910; border-right:1px solid var(--bordure);
    display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar .brand { display:flex; align-items:center; gap:10px; padding: 22px 20px; border-bottom:1px solid var(--bordure); }
.sidebar .brand img { width:38px; height:38px; border-radius:50%; }
.sidebar .brand b { font-family:'Montserrat',sans-serif; font-size:16px; }
.sidebar .brand b span { color: var(--bleu-3); }
.sidebar nav { flex:1; padding: 16px 12px; display:flex; flex-direction:column; gap:4px; }
.sidebar nav a { display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius:10px; color: var(--texte-att); font-weight:600; }
.sidebar nav a:hover { background: rgba(255,255,255,.05); color:#fff; }
.sidebar nav a.actif { background: linear-gradient(135deg, rgba(63,155,255,.2), rgba(26,95,214,.08)); color:#fff; border:1px solid var(--bordure); }
.sidebar .bas { padding: 16px; border-top:1px solid var(--bordure); }
.sidebar .bas a { color: var(--texte-att); font-size:13.5px; }
.sidebar .bas a:hover{ color: var(--rouge); }

.contenu { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 18px 30px; border-bottom:1px solid var(--bordure); position:sticky; top:0; background: rgba(7,10,18,.85); backdrop-filter: blur(10px); z-index:5;}
.topbar h1 { font-size: 20px; }
.zone { padding: 30px; }

@media (max-width: 900px) {
    .admin-shell { flex-direction:column; }
    .sidebar { position:relative; width:100%; height:auto; flex-direction:row; overflow-x:auto; }
    .sidebar .brand{ display:none; }
    .sidebar nav{ flex-direction:row; padding:10px; }
    .sidebar .bas{ display:none; }
}

/* Cards & tables */
.grille-stats { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom: 30px; }
@media (max-width: 900px){ .grille-stats{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .grille-stats{ grid-template-columns: 1fr;} }
.stat-card { background: var(--carte); border:1px solid var(--bordure); border-radius: var(--radius); padding: 22px; }
.stat-card .val { font-family:'Montserrat',sans-serif; font-size:28px; font-weight:800; color:#fff; }
.stat-card .lbl { color: var(--texte-att); font-size:13px; text-transform:uppercase; letter-spacing:.05em; }

.carte { background: var(--carte); border:1px solid var(--bordure); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.carte-tete { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }

table.tableau { width:100%; border-collapse: collapse; }
table.tableau th { text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--texte-att); padding: 10px 12px; border-bottom:1px solid var(--bordure); }
table.tableau td { padding: 13px 12px; border-bottom:1px solid var(--bordure); vertical-align: middle; }
table.tableau tr:last-child td { border-bottom:none; }
table.tableau tr:hover td { background: rgba(255,255,255,.02); }

.tag { display:inline-block; padding: 4px 12px; border-radius:100px; font-size:12px; font-weight:700; }
.tag-attente { background: rgba(255,181,69,.15); color: var(--orange); }
.tag-confirme { background: rgba(63,155,255,.15); color: var(--bleu-3); }
.tag-termine { background: rgba(51,209,122,.15); color: var(--vert); }
.tag-annule { background: rgba(255,92,92,.15); color: var(--rouge); }
.tag-brouillon { background: rgba(147,165,191,.15); color: var(--texte-att); }
.tag-envoyee { background: rgba(63,155,255,.15); color: var(--bleu-3); }
.tag-payee { background: rgba(51,209,122,.15); color: var(--vert); }

.btn { display:inline-flex; align-items:center; gap:6px; padding: 10px 18px; border-radius:10px; font-weight:700; font-size:13.5px; border:none; cursor:pointer; font-family:'Inter',sans-serif; }
.btn-primaire { background: linear-gradient(135deg, var(--bleu-2), var(--bleu-1)); color:#fff; }
.btn-ghost { background: rgba(255,255,255,.05); border:1px solid var(--bordure); color:#fff; }
.btn-danger { background: rgba(255,92,92,.14); color: var(--rouge); border:1px solid rgba(255,92,92,.3); }
.btn-vert { background: rgba(51,209,122,.14); color: var(--vert); border:1px solid rgba(51,209,122,.3); }
.btn-xs { padding: 6px 12px; font-size:12.5px; }
.btn-bloc { width:100%; justify-content:center; }

.champ { margin-bottom:16px; }
.champ label { display:block; font-size:13px; font-weight:700; color: var(--texte-att); margin-bottom:6px; }
.champ input, .champ select, .champ textarea {
    width:100%; padding: 11px 13px; border-radius:9px; background: rgba(255,255,255,.04);
    border:1px solid var(--bordure); color:#fff; font-family:'Inter',sans-serif; font-size:14px;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline:none; border-color: var(--bleu-2); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.full { grid-column: 1/-1; }

.alerte { padding: 14px 18px; border-radius:10px; margin-bottom:20px; font-size:14px; border:1px solid; }
.alerte.succes { background: rgba(51,209,122,.1); border-color: rgba(51,209,122,.4); color:#8ff2bb; }
.alerte.erreur { background: rgba(255,92,92,.1); border-color: rgba(255,92,92,.4); color:#ffb3b3; }

.login-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-carte { width:100%; max-width:400px; background: var(--carte); border:1px solid var(--bordure); border-radius:18px; padding: 40px 34px; }
.login-carte .brand { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom: 26px; }
.login-carte .brand img { width:60px; height:60px; border-radius:50%; margin-bottom:12px; }

.vide { text-align:center; padding: 50px 20px; color: var(--texte-att); }
.vide .ic { font-size:38px; margin-bottom:14px; }

.pastille-badge { font-size:11px; padding:2px 9px; border-radius:100px; background: rgba(255,181,69,.18); color:var(--orange); font-weight:800; margin-left:6px; }

select.select-statut { padding: 6px 10px; font-size: 12.5px; border-radius:8px; background: rgba(255,255,255,.05); border:1px solid var(--bordure); color:#fff; }

.lignes-facture { width:100%; border-collapse:collapse; margin-bottom: 14px; }
.lignes-facture th { text-align:left; font-size:12px; color:var(--texte-att); padding:6px; }
.lignes-facture td { padding:6px; }
.lignes-facture input { width:100%; }
.btn-suppr-ligne { background:none; border:none; color:var(--rouge); cursor:pointer; font-size:18px; }