:root{
  --ink:#0A0A0A;
  --ink-2:#141412;
  --ink-3:#1D1C19;
  --paper:#F3F1EA;
  --orange:#E8763A;
  --orange-deep:#C85E27;
  --green:#2F9E44;
  --steel:#8C8C86;
  --steel-2:#5B5B56;
  --line:rgba(255,255,255,0.10);
  --line-dark:rgba(10,10,10,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Manrope',sans-serif; font-size:15px; line-height:1.6;
  background:#EFEDE6; color:var(--ink);
  display:flex; min-height:100vh;
}
a{color:inherit;text-decoration:none;}
h1{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:28px;letter-spacing:0.03em;margin-bottom:22px;}
h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:18px;margin:26px 0 14px;}

/* ---------- Sidebar ---------- */
.sidebar{
  width:230px; flex-shrink:0; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.side-brand{padding:26px 22px;border-bottom:1px solid var(--line);}
.side-brand img{height:44px;}
.sidebar nav{flex:1;display:flex;flex-direction:column;padding:14px 0;}
.sidebar nav a{
  padding:12px 22px; font-family:'Oswald',sans-serif; text-transform:uppercase;
  font-size:13px; letter-spacing:0.08em; opacity:0.7; border-left:3px solid transparent;
  display:flex; align-items:center; justify-content:space-between;
  transition:opacity .15s ease, background .15s ease;
}
.sidebar nav a:hover{opacity:1;background:var(--ink-2);}
.sidebar nav a.active{opacity:1;border-left-color:var(--orange);background:var(--ink-2);}
.badge{
  background:var(--orange); color:var(--ink); font-family:'IBM Plex Mono',monospace;
  font-size:11px; padding:1px 8px; border-radius:10px;
}
.side-bottom{padding:18px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;}
.side-bottom a{font-size:13px;opacity:0.7;}
.side-bottom a:hover{opacity:1;}
.side-bottom .logout{color:#E8763A;}

/* ---------- Contenu ---------- */
.content{flex:1;padding:38px 44px;max-width:1100px;}
.flash{
  background:#E4F3E4; border:1px solid var(--green); color:#1D5F28;
  padding:12px 16px; margin-bottom:20px; font-weight:600;
}

/* ---------- Cartes / stats ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:30px;}
.card{background:#fff;border:1px solid var(--line-dark);padding:22px;}
.card .num{font-family:'Oswald',sans-serif;font-size:38px;font-weight:600;color:var(--orange-deep);}
.card .lbl{font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;color:var(--steel-2);letter-spacing:0.06em;}

/* ---------- Tableaux ---------- */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line-dark);}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-dark);vertical-align:top;}
th{font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--steel-2);background:#FAF9F5;}
tr:last-child td{border-bottom:none;}
tr.non-lu td{background:#FFF6EF;font-weight:600;}
td.actions{white-space:nowrap;text-align:right;}
.thumb{width:80px;height:56px;object-fit:cover;display:block;}
.svg-cell svg{width:38px;height:38px;}

/* ---------- Formulaires ---------- */
form.panel{background:#fff;border:1px solid var(--line-dark);padding:26px;max-width:720px;}
.f-group{margin-bottom:18px;display:flex;flex-direction:column;gap:6px;}
.f-group label{font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--steel-2);}
.f-group input,.f-group textarea,.f-group select{
  border:1px solid rgba(10,10,10,0.22); padding:10px 12px; font-family:'Manrope';
  font-size:14.5px; outline:none; background:#FDFCFA; width:100%;
  transition:border-color .15s ease;
}
.f-group input:focus,.f-group textarea:focus{border-color:var(--orange-deep);}
.f-group textarea{resize:vertical;min-height:80px;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.hint{font-size:12px;color:var(--steel);}

/* ---------- Galerie des réalisations ---------- */
.galerie-panel{background:#fff;border:1px solid var(--line-dark);padding:26px;max-width:720px;}
.galerie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.galerie-item{border:1px solid var(--line-dark);padding:8px;background:#FAF9F5;display:flex;flex-direction:column;gap:8px;}
.galerie-item img{width:100%;height:100px;object-fit:cover;display:block;}
.galerie-item .btn{width:100%;text-align:center;}
.galerie-actuelle{display:flex;align-items:center;gap:14px;margin-bottom:16px;}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block; padding:10px 22px; font-family:'Oswald',sans-serif;
  font-size:13px; text-transform:uppercase; letter-spacing:0.07em;
  border:1px solid transparent; cursor:pointer; background:var(--ink); color:var(--paper);
  transition:background .15s ease;
}
.btn:hover{background:#2A2A26;}
.btn-orange{background:var(--orange);color:var(--ink);}
.btn-orange:hover{background:#F0894F;}
.btn-small{padding:5px 12px;font-size:11.5px;}
.btn-danger{background:transparent;border-color:#C0392B;color:#C0392B;}
.btn-danger:hover{background:#C0392B;color:#fff;}
.btn-ghost{background:transparent;border-color:rgba(10,10,10,0.25);color:var(--ink);}
.btn-ghost:hover{background:rgba(10,10,10,0.06);}
.toolbar{margin-bottom:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
form.inline{display:inline;}

/* ---------- Login ---------- */
body.login-page{align-items:center;justify-content:center;background:var(--ink);}
.login-box{background:var(--paper);padding:44px 40px;width:380px;max-width:92vw;}
.login-box img{height:52px;margin:0 auto 26px;}
.login-box h1{text-align:center;font-size:20px;}
.login-error{background:#FDE8E4;border:1px solid #C0392B;color:#8E2A1D;padding:10px 14px;margin-bottom:16px;font-size:13.5px;}
.login-box .btn{width:100%;margin-top:6px;}
.login-note{margin-top:18px;font-size:12px;color:var(--steel-2);text-align:center;}

@media (max-width:860px){
  body{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:static;}
  .content{padding:24px 18px;}
}