/* ==========================================================================
   teliau-base.css — Téliau Design System · composants de base
   --------------------------------------------------------------------------
   Boutons, champs, badges, cartes, tableaux, modales, toasts, en-têtes de
   page. Conforme à la charte (sentence case, 4pt grid, radius modulés,
   bordure subtile + élévation). Consomme UNIQUEMENT les jetons sémantiques
   de teliau-tokens.css (--surface-*, --fg-*, --accent-*, …).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--surface-page);
  color: var(--fg-primary);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}

/* ── Topbar (56px, compact app) ─────────────────────────────────────────── */
.topbar {
  height: 56px; display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-6); background: var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 40;
}
.topbar-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.topbar-logo {
  width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--accent-500);
  display: grid; place-items: center; color: #fff; font-weight: var(--weight-heavy); font-size: 15px; letter-spacing: -0.04em; flex-shrink: 0;
}
.topbar-app  { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); }
.topbar-sep  { width: 1px; height: 22px; background: var(--border-default); }
.topbar-page { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); color: var(--fg-primary); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.topbar-link { color: var(--accent-fg); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.topbar-link:hover { text-decoration: underline; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 38px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 16px; height: 16px; stroke-width: 1.75; }
.btn-primary   { background: var(--accent-bg); color: var(--fg-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-bg-hover); }
.btn-primary:active:not(:disabled) { transform: scale(0.98); }
.btn-secondary { background: var(--surface-base); color: var(--fg-primary); border-color: var(--border-default); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-sunken); }
.btn-ghost     { background: transparent; color: var(--fg-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--state-hover); color: var(--fg-primary); }
.btn-danger    { background: var(--danger-bg); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger-600); }
.btn-sm { height: 32px; padding: 0 var(--space-3); }
.btn-md { height: 38px; }
.btn-lg { height: 44px; padding: 0 var(--space-5); font-size: var(--text-base); }
.btn-block { width: 100%; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--surface-base);
  color: var(--fg-secondary); cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--fg-primary); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.75; }
.btn-icon { width: 34px; height: 34px; border: none; background: transparent; }
.btn-icon:hover { background: var(--state-hover); }

/* ── Contrôle segmenté ──────────────────────────────────────────────────── */
.seg { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.seg-btn {
  padding: 7px 13px; font-size: var(--text-sm); font-weight: var(--weight-medium); font-family: var(--font-sans);
  background: var(--surface-base); color: var(--fg-secondary); border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border-default); }
.seg-btn:hover:not(.active) { background: var(--surface-sunken); color: var(--fg-primary); }
.seg-btn.active { background: var(--accent-500); color: #fff; }
.seg-btn svg { width: 15px; height: 15px; }

/* ── Champs de formulaire ───────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--fg-tertiary); font-family: var(--font-mono);
}
.field-hint { font-size: var(--text-xs); color: var(--fg-tertiary); }
.input, .field-input, .select, .textarea {
  width: 100%; padding: 0 var(--space-3); height: 38px;
  background: var(--surface-base); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  color: var(--fg-primary); font-family: var(--font-sans); font-size: var(--text-sm);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.textarea { height: auto; min-height: 80px; padding: 9px var(--space-3); line-height: 1.5; resize: vertical; }
.input:focus, .field-input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-bg-subtle);
}
.input::placeholder, .field-input::placeholder, .textarea::placeholder { color: var(--fg-disabled); }
.input[type=number]::-webkit-inner-spin-button, .input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input[type=number] { -moz-appearance: textfield; }
.select { -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767e8b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
.checkbox { width: 16px; height: 16px; accent-color: var(--accent-500); cursor: pointer; }

/* ── Bascule (toggle) ───────────────────────────────────────────────────── */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.toggle { position: relative; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; display: inline-block; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--radius-full); transition: background var(--duration-fast); }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform var(--duration-fast) var(--ease-out); box-shadow: var(--elevation-1); }
.toggle input:checked + .toggle-track { background: var(--accent-500); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }
.toggle-label { font-size: var(--text-sm); color: var(--fg-primary); }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.4; }
.badge-pill { border-radius: var(--radius-full); }
.badge-accent  { background: var(--accent-bg-subtle);  color: var(--accent-fg-strong); }
.badge-neutral { background: var(--surface-sunken);    color: var(--fg-secondary); }
.badge-success { background: var(--success-bg-subtle); color: var(--success-fg); }
.badge-warning { background: var(--warning-bg-subtle); color: var(--warning-fg); }
.badge-danger  { background: var(--danger-bg-subtle);  color: var(--danger-fg); }

/* ── Cartes ─────────────────────────────────────────────────────────────── */
.card { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.card-header, .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.card-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); margin: 0; }
.card-body { }

.stat-card { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.stat-label { font-size: var(--text-sm); color: var(--fg-secondary); margin-bottom: var(--space-2); }
.stat-value { font-size: var(--text-4xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-heading); line-height: 1; font-feature-settings:'tnum'; }
.stat-change { font-size: var(--text-sm); margin-top: var(--space-2); display: flex; align-items: center; gap: 4px; }
.stat-change.up { color: var(--success-fg); } .stat-change.down { color: var(--danger-fg); }

/* ── Tableaux ───────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-tertiary); padding: var(--space-3); border-bottom: 1px solid var(--border-default); }
.table td { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); color: var(--fg-secondary); }
.table tr:hover td { background: var(--state-hover); }

/* ── En-tête de page ────────────────────────────────────────────────────── */
.page { padding: var(--space-6); max-width: 1280px; }
.page-header { margin-bottom: var(--space-6); }
.page-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-fg); margin-bottom: var(--space-2); font-family: var(--font-mono); }
.page-title { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-heading); margin: 0; }
.page-subtitle { font-size: var(--text-base); color: var(--fg-secondary); margin-top: var(--space-2); max-width: 70ch; }
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.page-footer { margin-top: var(--space-12); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-tertiary); }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { margin-bottom: var(--space-8); }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.section-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); margin: 0; }
.section-sub { font-size: var(--text-sm); color: var(--fg-secondary); margin-top: 4px; }

/* ── Texte utilitaire ───────────────────────────────────────────────────── */
.body-sm { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-secondary); }
.font-mono { font-family: var(--font-mono); }

/* ── Modale ─────────────────────────────────────────────────────────────── */
#overlay, .modal-backdrop { display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(12,14,18,.5); padding: var(--space-6); align-items: center; justify-content: center; }
#overlay.show { display: flex; }
.modal { position: relative; width: 480px; max-width: calc(100vw - 48px);
  background: var(--surface-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--elevation-3); }
.modal-sm { width: 380px; }
.modal-title { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-heading); margin: 0 0 6px; }
.modal-sub   { font-size: var(--text-sm); color: var(--fg-secondary); margin: 0 0 var(--space-5); }
.modal-head  { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.modal-body  { }
.modal-actions, .modal-foot { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-6); }
.modal-close { position: absolute; top: var(--space-4); right: var(--space-4); }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.toast-wrap { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 300;
  display: flex; flex-direction: column; gap: var(--space-2); }
.toast, #toast {
  background: var(--surface-inverse); color: var(--fg-inverse); padding: 10px 16px; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--weight-medium); box-shadow: var(--elevation-3);
  display: inline-flex; align-items: center; gap: 7px; transition: opacity var(--duration-base) var(--ease-out);
}