/* =============================================
   NuanceCouleur — Admin CSS
   Palette : Blanc, Vert Émeraude, Anthracite
   ============================================= */
:root {
  --emerald:   #10B981;
  --emerald-d: #059669;
  --emerald-l: #D1FAE5;
  --dark:      #111827;
  --anthracite:#1F2937;
  --mid:       #6B7280;
  --light:     #F9FAFB;
  --border:    #E5E7EB;
  --white:     #FFFFFF;
  --red:       #EF4444;
  --red-l:     #FEE2E2;
  --blue:      #3B82F6;
  --blue-l:    #DBEAFE;
  --amber:     #F59E0B;
  --purple:    #8B5CF6;
  --sidebar-w: 240px;
  --font:      'Plus Jakarta Sans', sans-serif;
  --ease:      cubic-bezier(.25,.46,.45,.94);
  --r:         8px;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font); font-size:14px; background:var(--light); color:var(--dark); }

/* ── LOGIN ── */
.login-page { background:linear-gradient(135deg,var(--dark) 0%,#1a2e24 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-wrap { width:100%; max-width:420px; }
.login-card { background:var(--white); border-radius:16px; padding:48px 40px; box-shadow:0 24px 64px rgba(0,0,0,.3); }
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo img { height:52px; }
.login-title { font-size:24px; font-weight:800; color:var(--dark); text-align:center; margin-bottom:6px; }
.login-sub { font-size:14px; color:var(--mid); text-align:center; margin-bottom:28px; }
.login-form { display:flex; flex-direction:column; gap:16px; }
.login-form .field label { display:block; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--mid); margin-bottom:6px; }
.login-form .field input { width:100%; padding:12px 16px; border:1.5px solid var(--border); border-radius:var(--r); font-family:var(--font); font-size:14px; outline:none; transition:border-color .2s; }
.login-form .field input:focus { border-color:var(--emerald); box-shadow:0 0 0 3px rgba(16,185,129,.1); }
.btn-login { background:linear-gradient(135deg,var(--emerald),var(--emerald-d)); color:var(--white); border:none; padding:14px; border-radius:var(--r); font-family:var(--font); font-size:15px; font-weight:700; cursor:pointer; transition:all .25s; margin-top:8px; }
.btn-login:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,185,129,.4); }
.back-link { display:block; text-align:center; margin-top:20px; font-size:13px; color:var(--mid); text-decoration:none; }
.back-link:hover { color:var(--emerald); }

/* ── LAYOUT ADMIN ── */
.admin-body { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar-admin {
  width:var(--sidebar-w); background:var(--dark); display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:50; padding:0 0 24px;
}
.sa-logo { padding:24px 20px 20px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px; }
.sa-logo img { height:36px; filter:brightness(0) invert(1); opacity:.9; }
.sa-badge { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; background:rgba(16,185,129,.2); color:var(--emerald); padding:3px 8px; border-radius:4px; }
.sa-nav { flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.sa-link {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:var(--r); text-decoration:none;
  font-size:14px; font-weight:500; color:rgba(255,255,255,.55); transition:all .2s;
}
.sa-link span { font-size:18px; }
.sa-link:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.9); }
.sa-link.active { background:rgba(16,185,129,.15); color:var(--emerald); font-weight:700; }
.sa-link--danger:hover { background:rgba(239,68,68,.1); color:#FCA5A5; }
.sa-sep { border:none; border-top:1px solid rgba(255,255,255,.07); margin:8px 0; }
.sa-user { padding:16px 20px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px; }
.sa-avatar { width:32px; height:32px; border-radius:50%; background:var(--emerald); color:var(--white); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.sa-user span { font-size:13px; color:rgba(255,255,255,.6); }

/* Main */
.admin-main { margin-left:var(--sidebar-w); flex:1; padding:32px; max-width:calc(100vw - var(--sidebar-w)); }

/* ── COMPOSANTS ── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.page-header h1 { font-size:26px; font-weight:800; color:var(--dark); }

.btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--emerald); color:var(--white); border:none; padding:10px 20px; border-radius:var(--r); font-family:var(--font); font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; transition:all .2s; }
.btn-primary:hover { background:var(--emerald-d); transform:translateY(-1px); box-shadow:0 4px 12px rgba(16,185,129,.3); }
.btn-secondary { display:inline-flex; align-items:center; gap:8px; background:var(--white); color:var(--mid); border:1.5px solid var(--border); padding:9px 18px; border-radius:var(--r); font-family:var(--font); font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; transition:all .2s; }
.btn-secondary:hover { border-color:var(--mid); color:var(--dark); }
.btn-sm { font-size:12px; color:var(--emerald); text-decoration:none; font-weight:700; }
.btn-sm:hover { text-decoration:underline; }

.alert { padding:12px 16px; border-radius:var(--r); margin-bottom:20px; font-size:14px; font-weight:500; }
.alert-success { background:var(--emerald-l); color:var(--emerald-d); border:1px solid #A7F3D0; }
.alert-error   { background:var(--red-l);    color:#991B1B;           border:1px solid #FECACA; }

.panel { background:var(--white); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:24px; }
.panel-head { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.panel-head h2 { font-size:16px; font-weight:700; }

/* Stats dashboard */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:28px; }
.stat-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:24px; display:flex; align-items:center; gap:16px; box-shadow:var(--shadow); }
.stat-icon { font-size:32px; }
.stat-num { font-size:36px; font-weight:800; line-height:1; }
.stat-lbl { font-size:13px; color:var(--mid); font-weight:500; margin-top:4px; }
.stat-card--green .stat-num { color:var(--emerald); }
.stat-card--blue .stat-num  { color:var(--blue); }
.stat-card--purple .stat-num{ color:var(--purple); }

.quick-links { display:flex; gap:16px; margin-top:24px; }
.qlink { display:flex; align-items:center; gap:10px; padding:16px 24px; border-radius:12px; text-decoration:none; font-size:14px; font-weight:700; transition:all .25s; flex:1; justify-content:center; }
.qlink-icon { font-size:20px; }
.qlink--green  { background:var(--emerald-l); color:var(--emerald-d); border:1.5px solid #A7F3D0; }
.qlink--blue   { background:var(--blue-l);    color:#1D4ED8;          border:1.5px solid #BFDBFE; }
.qlink--gray   { background:var(--light);     color:var(--mid);       border:1.5px solid var(--border); }
.qlink:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* Table */
.table { width:100%; border-collapse:collapse; }
.table thead { background:var(--light); }
.table th { padding:12px 16px; text-align:left; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--mid); border-bottom:1px solid var(--border); }
.table td { padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:#FAFAFA; }
.td-bold { font-weight:700; color:var(--dark); }
.td-muted { font-size:12px; color:var(--mid); }
.td-actions { display:flex; gap:8px; align-items:center; }

.tag { display:inline-block; background:var(--light); border:1px solid var(--border); font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; color:var(--mid); }
.tag--auto   { background:#DBEAFE; color:#1D4ED8; border-color:#BFDBFE; }
.tag--moto   { background:#FEF3C7; color:#92400E; border-color:#FDE68A; }
.tag--universel { background:var(--emerald-l); color:var(--emerald-d); border-color:#A7F3D0; }
.tag--badge  { background:#EDE9FE; color:#5B21B6; border-color:#C4B5FD; }

.badge-on  { display:inline-block; background:var(--emerald-l); color:var(--emerald-d); font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; }
.badge-off { display:inline-block; background:var(--red-l); color:#991B1B; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; }

.btn-icon-edit,.btn-icon-del { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r); text-decoration:none; transition:all .2s; font-size:16px; border:1.5px solid transparent; }
.btn-icon-edit:hover { background:var(--blue-l); border-color:#BFDBFE; }
.btn-icon-del:hover  { background:var(--red-l);  border-color:#FECACA; }

.color-dot { width:28px; height:28px; border-radius:50%; border:2px solid rgba(0,0,0,.08); box-shadow:0 1px 4px rgba(0,0,0,.15); }
.color-dot--empty { background:var(--border); }
.status-toggle { text-decoration:none; }

/* Filtres liste */
.list-filters { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.filter-form { display:flex; gap:10px; flex-wrap:wrap; }
.filter-input,.filter-select { padding:9px 14px; border:1.5px solid var(--border); border-radius:var(--r); font-family:var(--font); font-size:13px; outline:none; transition:border-color .2s; }
.filter-input { min-width:200px; }
.filter-input:focus,.filter-select:focus { border-color:var(--emerald); }
.result-info { font-size:13px; color:var(--mid); font-weight:600; }

/* ── FORMULAIRE ── */
.form-grid { display:flex; flex-direction:column; gap:20px; padding:28px; }
.form-section-title { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--emerald); padding-bottom:10px; border-bottom:2px solid var(--emerald-l); margin-top:8px; }
.field-group { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.field--lg { grid-column:span 2; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:12px; font-weight:700; color:var(--dark); }
.req { color:var(--red); }
.field input[type=text],.field input[type=number],.field select,.field textarea {
  padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--r);
  font-family:var(--font); font-size:14px; color:var(--dark); outline:none; transition:all .2s;
  background:var(--white); width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--emerald); box-shadow:0 0 0 3px rgba(16,185,129,.08); }
.field textarea { resize:vertical; line-height:1.6; }
.hint { font-size:11px; color:var(--mid); }
.field--check { justify-content:flex-end; padding-bottom:2px; }
.check-label { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; font-weight:500; }
.check-label input[type=checkbox] { width:18px; height:18px; accent-color:var(--emerald); cursor:pointer; }
.color-input-wrap { display:flex; gap:10px; align-items:center; }
.color-input-wrap input[type=color] { width:48px; height:42px; border:1.5px solid var(--border); border-radius:var(--r); cursor:pointer; padding:4px; background:var(--white); }
.color-input-wrap input[type=text] { flex:1; }
.current-img { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.current-img img { width:60px; height:60px; object-fit:cover; border-radius:var(--r); border:1px solid var(--border); }
.current-img span { font-size:12px; color:var(--mid); }
.form-actions { display:flex; justify-content:flex-end; gap:12px; padding-top:8px; border-top:1px solid var(--border); margin-top:8px; }