/* ============================================================
   theme.css — design tokens + base styles
   ============================================================ */
:root {
  /* Couleurs — palette */
  --c-primary:        #4F46E5;
  --c-primary-dark:   #4338CA;
  --c-primary-light:  #EEF0FE;
  --c-bg:             #f0f2f5;
  --c-surface:        #ffffff;
  --c-surface-2:      #fafafa;
  --c-border:         #e5e7eb;
  --c-text:           #1a1a1a;
  --c-text-muted:     #6b7280;
  --c-text-soft:      #9ca3af;

  /* Couleurs — sémantiques */
  --c-success:        #16a34a;
  --c-success-bg:     #dcfce7;
  --c-success-text:   #166534;
  --c-warn:           #ea580c;
  --c-warn-bg:        #ffedd5;
  --c-warn-text:      #9a3412;
  --c-danger:         #dc2626;
  --c-danger-bg:      #fee2e2;
  --c-danger-text:    #991b1b;
  --c-info:           #2563eb;
  --c-info-bg:        #dbeafe;
  --c-info-text:      #1e40af;

  /* Signature manuscrite (canvas) : encre et papier. Ce ne sont pas des couleurs de
     thème mais celles du document — la signature part telle quelle dans le PDF signé. */
  --c-sig-bg:         #ffffff;
  --c-sig-ink:        #111111;

  /* Espacement (échelle 4px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;

  /* Radius */
  --r-1: 4px;  --r-2: 6px;  --r-3: 10px; --r-4: 14px;

  /* Ombres */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-3: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-4: 0 10px 30px rgba(0,0,0,0.20);

  /* Typographie */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Tailles texte */
  --t-xs: 0.75rem;  /* 12 */
  --t-sm: 0.85rem;  /* ~14 */
  --t-base: 0.95rem;
  --t-lg: 1.05rem;
  --t-xl: 1.25rem;
  --t-2xl: 1.5rem;

  /* Touch / contrôles */
  --control-h: 40px;       /* desktop */
  --control-h-mobile: 44px; /* WCAG/HIG */
}

/* Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); background: var(--c-bg); color: var(--c-text); -webkit-font-smoothing: antialiased; }

/* Boutons utilitaires (override des .btn existants si on les utilise) */
.btn-base {
  min-height: var(--control-h);
  padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-2);
  font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; transition: background .15s, transform .05s;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: inherit;
}
.btn-base:active { transform: scale(0.98); }
.btn-base:disabled { opacity: 0.5; cursor: not-allowed; }

/* Touch min sur mobile pour TOUS les boutons des templates */
@media (max-width: 700px) {
  button, .btn, .btn-base, input[type=button], input[type=submit], a.btn, a.btn-pdf, a.btn-add, a.btn-edit, a.btn-arch {
    min-height: var(--control-h-mobile);
  }
}

/* Pastilles statut sémantiques (override les .b1/b2/b3 existants par classes plus claires) */
.pill { display: inline-block; padding: 2px var(--s-2); border-radius: 12px; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
.pill-success { background: var(--c-success-bg); color: var(--c-success-text); }
.pill-warn    { background: var(--c-warn-bg);    color: var(--c-warn-text); }
.pill-danger  { background: var(--c-danger-bg);  color: var(--c-danger-text); }
.pill-info    { background: var(--c-info-bg);    color: var(--c-info-text); }
.pill-neutral { background: var(--panel-3, #eceff1); color: var(--muted, #455a64); }

/* Toasts */
#toasts {
  position: fixed; bottom: var(--s-5); right: var(--s-5); z-index: 9999;
  display: flex; flex-direction: column; gap: var(--s-2); max-width: calc(100vw - var(--s-5)*2);
}
.toast {
  background: var(--c-surface); border-left: 4px solid var(--c-info);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-2); box-shadow: var(--shadow-3);
  font-size: var(--t-sm); color: var(--c-text); min-width: 240px; max-width: 420px;
  animation: toast-in .25s ease-out;
  display: flex; align-items: center; gap: var(--s-3);
}
.toast.success { border-color: var(--c-success); }
.toast.warn    { border-color: var(--c-warn); }
.toast.danger  { border-color: var(--c-danger); }
.toast .close { background: transparent; border: 0; color: var(--c-text-muted); cursor: pointer; padding: 0 var(--s-1); font-size: 1.1rem; line-height: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.toast.removing { animation: toast-out .2s ease-in forwards; }

/* Skeleton loader */
.skel { display: inline-block; height: 1em; background: linear-gradient(90deg, var(--panel-2, #e5e7eb) 0%, var(--line, #f3f4f6) 50%, var(--panel-2, #e5e7eb) 100%); background-size: 200% 100%; border-radius: var(--r-1); animation: skel 1.4s ease-in-out infinite; }
.skel-line { display: block; height: 12px; margin: 6px 0; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Empty state */
.empty-state { text-align: center; padding: var(--s-7) var(--s-4); color: var(--c-text-muted); }
.empty-state svg { width: 48px; height: 48px; margin-bottom: var(--s-3); opacity: 0.4; }
.empty-state h3 { font-size: var(--t-base); color: var(--c-text); margin-bottom: var(--s-1); }
.empty-state p { font-size: var(--t-sm); margin-bottom: var(--s-4); }

/* Icônes Lucide inline */
.icon { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; flex-shrink: 0; }
.icon-sm { width: 0.9em; height: 0.9em; }
.icon-lg { width: 1.5em; height: 1.5em; }

/* ── Variantes de boutons (sur .btn-base) ─────────────────────── */
.btn-base { text-decoration: none; justify-content: center; }
.btn-primary         { background: var(--c-primary);  color: var(--on-accent, #fff); }
.btn-primary:hover   { background: var(--c-primary-dark); }
.btn-secondary       { background: var(--panel-3, #eceff1); color: var(--text, #374151); border: 1px solid var(--line, transparent); }
.btn-secondary:hover { background: var(--line, #dfe3e7); }
.btn-success         { background: var(--c-success);   color: var(--on-accent, #fff); }
.btn-info            { background: var(--c-info);      color: var(--on-accent, #fff); }
.btn-danger          { background: var(--c-danger);    color: var(--on-accent, #fff); }
.btn-block           { display: flex; width: 100%; }

/* Bouton-icône (ex. corbeille) */
.btn-icon        { background: none; border: 0; cursor: pointer; padding: var(--s-1); line-height: 1; font-family: inherit; font-size: 0.85rem; }
.btn-icon-danger { color: var(--c-danger); }

/* Déconnexion sur en-tête coloré */
.hdr-logout { background: rgba(255,255,255,0.2); color: #fff; padding: 6px 12px; border-radius: var(--r-2); font-size: var(--t-xs); font-weight: 700; text-decoration: none; }

/* Liens-texte (actions secondaires) */
.btn-link        { background: none; border: 0; cursor: pointer; font-weight: 700; font-family: inherit; text-decoration: none; padding: var(--s-2); font-size: var(--t-sm); }
.btn-link-info   { color: var(--c-info); }
.btn-link-muted  { color: var(--c-text-muted); }
.btn-link-danger { color: var(--c-danger); }

/* Icône inline (SVG à hauteur de texte) */
.ic { width: 1em; height: 1em; vertical-align: -0.14em; flex: 0 0 auto; }

/* ── Tokens module briefing (ajout 06.07.2026 — SPEC briefing §7) ── */
:root {
  /* Anneau de focus (jusqu'ici improvisé par navigateur) */
  --c-focus: var(--c-primary);

  /* Accent « Dispositif de sécurité » — ambre, distinct du warn sémantique
     (le warn signale un problème ; le Dispo est un état d'attention permanent) */
  --c-dispo:      #b45309;
  --c-dispo-bg:   #fef3c7;
  --c-dispo-text: #92400e;

  /* Accents des sections briefing — alias des tokens sémantiques existants */
  --c-brief-mandat: var(--c-warn);
  --c-brief-logi:   var(--c-info);
  --c-brief-secu:   var(--c-success);
  --c-brief-deb:    var(--c-primary);
}