/* ─────────────────────────────────────────────────────────────────────────────
   PIXICASA — Design System
   Toutes les pages admin importent ce fichier en premier.
───────────────────────────────────────────────────────────────────────────── */

/* ─── Reset ─────────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── Tokens ─────────────────────────────────────────────────────────────────*/
:root {
  /* Couleurs */
  --black:      #0D0D0D;
  --white:      #FAFAFA;

  --gray-50:    #F6F5F3;
  --gray-100:   #EEEDE9;
  --gray-200:   #DDDBD4;
  --gray-400:   #9C9A92;
  --gray-600:   #6B6962;
  --gray-800:   #2E2D2A;
  --gray-900:   #1A1917;

  --accent:          #1A1917;
  --accent-light:    #2E2D2A;

  --success:    #1F6B42;
  --success-bg: #EBF5EF;
  --warning:    #92500A;
  --warning-bg: #FEF3E2;
  --danger:     #B91C1C;
  --danger-bg:  #FEF2F2;
  --info:       #1E5FA4;
  --info-bg:    #EFF6FF;

  /* Typographie */
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;

  /* Échelle de texte */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   28px;

  /* Espacements */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s8:  32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  /* Rayons */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow:    0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);

  /* Transitions */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);

  /* Layout admin */
  --sidebar-width: 220px;
}

/* ─── Base ───────────────────────────────────────────────────────────────────*/
body {
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--gray-900);
  background: var(--gray-50);
  line-height: 1.6;
}

/* ─── Typographie ────────────────────────────────────────────────────────────*/
h1 { font-size: var(--text-xl); font-weight: 500; letter-spacing: -.02em; }
h2 { font-size: var(--text-lg); font-weight: 500; letter-spacing: -.01em; }
h3 { font-size: var(--text-md); font-weight: 500; }
h4 { font-size: var(--text-base); font-weight: 600; }

/* ─── Boutons ────────────────────────────────────────────────────────────────*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 9px var(--s5);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .04em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) { opacity: .82; }

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--gray-200);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--gray-200);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger);
}

.btn-sm { padding: 6px var(--s3); font-size: var(--text-xs); }
.btn-lg { padding: 12px var(--s8); font-size: var(--text-base); }

/* ─── Formulaires ────────────────────────────────────────────────────────────*/
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-800);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px var(--s3);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  color: var(--gray-900);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  appearance: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26,25,23,.08);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--gray-400); }

.field .hint {
  font-size: var(--text-xs);
  color: var(--gray-400);
}

.field .error-msg {
  font-size: var(--text-xs);
  color: var(--danger);
}

/* ─── Alertes / Toasts ───────────────────────────────────────────────────────*/
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.alert-error   { background: var(--danger-bg);  color: var(--danger);  border: 1px solid #FCA5A5; }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid #6EE7B7; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid #FCD34D; }
.alert-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid #93C5FD; }

/* ─── Badges ─────────────────────────────────────────────────────────────────*/
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s2);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-draft     { background: var(--gray-100); color: var(--gray-600); }
.badge-published { background: var(--success-bg); color: var(--success); }
.badge-archived  { background: var(--warning-bg); color: var(--warning); }

/* ─── Cards ──────────────────────────────────────────────────────────────────*/
.card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-sm);
}

/* ─── Table ──────────────────────────────────────────────────────────────────*/
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th {
  text-align: left;
  padding: var(--s2) var(--s4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
  border-bottom: 1px solid var(--gray-100);
}
.table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--gray-50); }

/* ─── Utilitaires ────────────────────────────────────────────────────────────*/
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-muted { color: var(--gray-400); }
.text-sm    { font-size: var(--text-sm); }
.text-right { text-align: right; }
.flex       { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-2 { gap: var(--s2); }
.gap-4 { gap: var(--s4); }
.mt-4  { margin-top: var(--s4); }
.mt-6  { margin-top: var(--s6); }
.mb-4  { margin-bottom: var(--s4); }