/* ============================================================================
   TRANSCOURRIER — Plateforme de gestion
   Design System — tokens & composants réutilisables
   Source : Design-Plateforme-Gestion.md (charte Transcourrier)
   CSS pur, sans dépendance. Intégration Symfony/Twig : ce fichier est global.
   ============================================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Marque */
  --orange-500:#EE7721;  --orange-600:#E55A1A;  --orange-700:#D44C10;  --orange-300:#F49B5A;
  --navy-900:#06122D;    --navy-700:#0C2A54;    --navy-500:#1E3A5F;

  /* Neutres */
  --ink-900:#111827;  --gray-600:#6F6F6F;  --gray-400:#9CA3AF;
  --border:#E5E5E5;   --surface:#FFFFFF;   --bg:#F7F8FA;  --cream:#FFF1E4;

  /* Statuts (fonctionnels) */
  --info-600:#2563EB;    --info-bg:#E8EFFD;
  --success-600:#16A34A; --success-bg:#E9F7EE;
  --danger-600:#DC2626;  --danger-bg:#FDECEC;
  --warning-600:#D97706; --warning-bg:#FBF1E3;
  --neutral-600:#6B7280; --neutral-bg:#EEF0F3;

  /* Typographie */
  --font-head:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rayons & ombres */
  --radius-sm:6px; --radius:10px; --radius-lg:14px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 1px 3px rgba(16,24,40,.08), 0 8px 24px rgba(16,24,40,.05);

  /* Espacements (échelle dense) */
  --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px; --sp-xl:24px; --sp-2xl:32px; --sp-3xl:48px;

  /* Chrome applicatif */
  --topbar-h:56px;
  --sidebar-w:248px;
  --sidebar-w-collapsed:64px;
  --content-max:1440px;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink-900);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-head); margin:0; color:var(--navy-700); font-weight:600}
a{color:var(--orange-700); text-decoration:none}
button{font-family:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--orange-500); outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* ---------- 3. TYPOGRAPHIE ---------- */
.h1{font-family:var(--font-head); font-size:26px; font-weight:600; color:var(--navy-700); line-height:1.15}
.h2{font-family:var(--font-head); font-size:19px; font-weight:600; color:var(--navy-700)}
.h3{font-family:var(--font-head); font-size:15px; font-weight:600; color:var(--ink-900)}
.eyebrow{font-family:var(--font-head); text-transform:uppercase; letter-spacing:.08em;
  font-size:11px; font-weight:600; color:var(--gray-600)}
.muted{color:var(--gray-600)}
.help{font-size:12.5px; color:var(--gray-600)}

/* ---------- 4. BOUTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-weight:600; font-size:14px; line-height:1;
  height:40px; padding:0 16px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, color .15s;
}
.btn svg{width:18px; height:18px}
.btn--primary{background:var(--orange-500); color:#fff}
.btn--primary:hover{background:var(--orange-600)}
.btn--primary:active{background:var(--orange-700)}
.btn--secondary{background:#fff; color:var(--navy-700); border-color:#cdd6e4}
.btn--secondary:hover{background:#f2f5fa}
.btn--tertiary{background:transparent; color:var(--navy-700)}
.btn--tertiary:hover{background:#eef1f5}
.btn--danger{background:var(--danger-600); color:#fff}
.btn--danger:hover{filter:brightness(.95)}
.btn--sm{height:32px; padding:0 12px; font-size:13px}
.btn--icon{width:40px; padding:0}
.btn--icon.btn--sm{width:32px}

/* ---------- 5. BADGES / PILLS (statuts) ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-head); font-weight:600; font-size:11px;
  padding:3px 10px; border-radius:var(--radius-pill); white-space:nowrap;
}
.badge svg{width:13px; height:13px}
.badge--info{background:var(--info-bg); color:#1e3a8a}
.badge--success{background:var(--success-bg); color:#166534}
.badge--danger{background:var(--danger-bg); color:#9b1c1c}
.badge--warning{background:var(--warning-bg); color:#92590a}
.badge--neutral{background:var(--neutral-bg); color:#475569}

/* ---------- 6. CARTES ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:var(--sp-xl);
}
.card--pad-sm{padding:var(--sp-lg)}
.card__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-lg)}

/* ---------- 7. FORMULAIRES ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--sp-lg)}
.label{font-family:var(--font-head); font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--gray-600)}
.label .req{color:var(--danger-600)}
.input,.select,.textarea{
  height:40px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:#fff; font-family:var(--font-body); font-size:14px; color:var(--ink-900); width:100%;
}
.textarea{height:auto; padding:10px 12px; min-height:88px; resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--orange-500);
  box-shadow:0 0 0 3px rgba(238,119,33,.15)}
.input--error{border-color:var(--danger-600)}
.error-text{color:var(--danger-600); font-size:12.5px}

/* ---------- 8. TABLEAUX ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:#fff}
.table{width:100%; border-collapse:collapse; font-size:13.5px}
.table th{
  position:sticky; top:0; background:var(--bg); text-align:left; font-family:var(--font-head);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-600);
  padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.table td{padding:12px; border-bottom:1px solid var(--border); vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#fafbfc}
.table .num{text-align:right}

/* ---------- 9. UTILITAIRES ---------- */
.stack{display:flex; flex-direction:column}
.row{display:flex; align-items:center}
.gap-sm{gap:var(--sp-sm)} .gap-md{gap:var(--sp-md)} .gap-lg{gap:var(--sp-lg)}
.grid{display:grid; gap:var(--sp-lg)}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.mt-lg{margin-top:var(--sp-lg)} .mt-xl{margin-top:var(--sp-xl)}
.icon{width:18px; height:18px; flex:none}