/* ============================================================
   Atrium — Design tokens
   Source : atrium-style-guide-v1.html
   ============================================================ */

@import url('https://cdn.jsdelivr.net/npm/@fontsource/anton@5.0.21/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/spectral@5.0.21/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/spectral@5.0.21/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/spectral@5.0.21/400-italic.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/bricolage-grotesque@5.0.20/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/bricolage-grotesque@5.0.20/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/bricolage-grotesque@5.0.20/700.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.0.20/400.css');

:root {
  /* ─── Palette F (Atrium + extensions composants UI) ──────── */
  --noyer:         #2D2823;
  --papier:        #EFE9DA;
  --papier-pur:    #F7F3E8;
  --cuivre:        #B26834;
  --cuivre-hover:  #9A5A2C;
  --cuivre-active: #82491F;
  --mousse:        #5A6850;
  --mousse-light:  #E8EDE3;
  --pierre:        #6F6A5E;
  --pierre-light:  #B8B3A6;
  --encre:         #18181B;
  --brique:        #A04B2D;
  --brique-light:  #F7E4DC;
  --ardoise:       #4A5560;
  --ardoise-light: #E5E8EC;
  --warning:       #C49640;
  --warning-light: #F7EFDC;

  /* ─── États / sémantique audit ───────────────────────────── */
  --etat-draft:        #6F6A5E;
  --etat-v1-review:    #B26834;
  --etat-v2-review:    #A04B2D;
  --etat-delivered:    #5A6850;
  --etat-generating:   #18181B;

  /* ─── Niveaux maturité (sémantique de contenu, conserve brique pour N1) ── */
  --niveau-n1: var(--brique);
  --niveau-n2: var(--pierre);
  --niveau-n3: var(--cuivre);
  --niveau-n4: var(--mousse);

  /* ─── Familles de typo ───────────────────────────────────── */
  --ff-display: 'Anton', Impact, sans-serif;
  --ff-body:    'Spectral', Georgia, serif;
  --ff-ui:      'Bricolage Grotesque', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', Menlo, monospace;

  /* ─── Spacing (baseline 8px stricte) ────────────────────── */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;
  --space-128: 128px;

  /* ─── Radius (subtil pour Roomly UI fonctionnel — pas Atrium éditorial) ── */
  --radius-0:    0px;
  --radius-2:    2px;
  --radius-4:    4px;
  --radius-full: 9999px;

  /* ─── Shadows (fonctionnel uniquement) ──────────────────── */
  --shadow-focus:        0 0 0 2px var(--cuivre);
  --shadow-card-hover:   0 1px 3px rgba(45,40,35,0.06), 0 2px 8px rgba(45,40,35,0.04);

  /* ─── Transitions ───────────────────────────────────────── */
  --duration: 150ms;
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: light;
  background: #EFE9DA;
}

html, body {
  background: var(--papier);
  color: var(--noyer);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Classes utilitaires typo */
.display { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: 0.03em; line-height: 0.95; }
.ui      { font-family: var(--ff-ui); font-weight: 500; }
.italic  { font-style: italic; }

/* Filets décoratifs Atrium */
.rule-thin   { border-top: 0.5px solid var(--noyer); margin: 16px 0; }
.rule-medium { border-top: 1px solid var(--noyer); margin: 24px 0; }
.rule-thick  { border-top: 2px solid var(--noyer); margin: 24px 0; }
.rule-asym {
  margin: 24px 0;
  border-top: 2px solid var(--noyer);
  position: relative;
}
.rule-asym::after {
  content: ''; display: block;
  border-top: 0.5px solid var(--cuivre);
  margin-top: 2px;
}

/* Notations / labels */
.notation {
  font-family: var(--ff-ui); font-weight: 500;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cuivre);
}
.notation-neutral {
  font-family: var(--ff-ui); font-weight: 500;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pierre);
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-ui); font-weight: 500;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 16px 24px; border-radius: 0; cursor: pointer;
  border: none; background: none;
  transition: background 150ms ease-out, opacity 150ms ease-out;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--cuivre); color: var(--papier); }
.btn-primary:hover:not(:disabled) { background: #9A5A2C; }
.btn-secondary { background: transparent; color: var(--noyer); border: 1px solid var(--noyer); }
.btn-secondary:hover:not(:disabled) { background: rgba(45, 40, 35, 0.08); }
.btn-ghost { background: transparent; color: var(--noyer); }
.btn-ghost:hover:not(:disabled) { background: rgba(45, 40, 35, 0.06); }
.btn-sm { padding: 8px 16px; font-size: 11px; }

/* Inputs */
.input {
  width: 100%;
  font-family: var(--ff-body); font-size: 15px;
  color: var(--noyer); background: transparent;
  padding: 8px 0;
  border: none; border-bottom: 1px solid var(--noyer);
  outline: none;
  border-radius: 0;
}
.input:focus { border-bottom-color: var(--cuivre); }
.input::placeholder { color: var(--pierre); opacity: 0.7; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.field-label {
  font-family: var(--ff-ui); font-weight: 500;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pierre);
}
textarea.input {
  resize: vertical; min-height: 100px;
  border: 1px solid var(--noyer);
  padding: 12px;
}

/* Badges statut audit — tous border-only, color sémantique discrète */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-ui); font-weight: 500;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid currentColor;
  color: var(--pierre);
}
.badge-draft       { color: var(--pierre); }
.badge-v1-review   { color: var(--cuivre); }
.badge-v2-review   { color: var(--cuivre); }
.badge-delivered   { color: var(--mousse); }
.badge-generating  { color: var(--noyer); }
.badge-generating::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px;
  background: var(--cuivre);
  animation: badgePulse 1.2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 48px; }

/* Indicateur de chargement — carré qui pulse, pas de rotation, pas de cercle */
.spinner {
  display: inline-block;
  width: 8px; height: 16px;
  background: currentColor;
  animation: spinPulse 1.2s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes spinPulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.5); }
  50%      { opacity: 1;    transform: scaleY(1); }
}

/* États message d'erreur */
.error-text {
  font-family: var(--ff-ui); font-weight: 500;
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--brique);
  margin-top: 8px;
}

/* Liens */
a { color: var(--cuivre); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms; }
a:hover { border-bottom-color: var(--cuivre); }
a.ghost { color: var(--noyer); }
a.ghost:hover { border-bottom-color: var(--noyer); }

/* ============================================================
   Composants composants-ui-v1 — Roomly UI fonctionnel
   ============================================================ */

/* ─── KPI Card ──────────────────────────────────────────── */
.kpi-card {
  background: var(--papier-pur);
  border-top: 2px solid var(--noyer);
  border-bottom: 0.5px solid var(--cuivre);
  padding: var(--space-16) var(--space-24);
  display: flex; flex-direction: column;
  gap: var(--space-4);
}
.kpi-card .kpi-label {
  font-family: var(--ff-ui); font-weight: 500;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pierre);
}
.kpi-card .kpi-value {
  font-family: var(--ff-display);
  font-size: 40px; letter-spacing: 0.03em;
  color: var(--noyer);
  line-height: 1;
}
.kpi-card .kpi-value small {
  font-family: var(--ff-ui);
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pierre);
  margin-left: var(--space-4);
}
.kpi-card .kpi-trend {
  font-family: var(--ff-ui); font-weight: 500;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.trend-up   { color: var(--mousse); }
.trend-down { color: var(--brique); }
.trend-flat { color: var(--pierre); }

/* ─── Niveau badges (N1-N4) ─────────────────────────────── */
.niveau-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-ui); font-weight: 700;
  font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 7px;
  color: var(--papier);
  line-height: 1.3;
}
.n1-chip { background: var(--niveau-n1); color: var(--papier); }
.n2-chip { background: var(--niveau-n2); color: var(--papier); }
.n3-chip { background: var(--niveau-n3); color: var(--papier); }
.n4-chip { background: var(--niveau-n4); color: var(--papier); }
.n1-text { color: var(--niveau-n1); }
.n2-text { color: var(--niveau-n2); }
.n3-text { color: var(--niveau-n3); }
.n4-text { color: var(--niveau-n4); }

/* ─── Priority pills (plan d'action) ────────────────────── */
.priority-pill {
  display: inline-flex; align-items: center;
  font-family: var(--ff-ui); font-weight: 700;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 6px;
  color: var(--papier);
}
.prio-1 { background: var(--brique); }
.prio-2 { background: var(--cuivre); }
.prio-3 { background: var(--mousse); }

/* ─── Status (dot + label) ──────────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-family: var(--ff-ui); font-weight: 500;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.status-dot {
  width: 8px; height: 8px; flex-shrink: 0;
}
.status-open .status-dot     { background: var(--cuivre); }
.status-open                 { color: var(--cuivre); }
.status-progress .status-dot { background: var(--ardoise); }
.status-progress             { color: var(--ardoise); }
.status-done .status-dot     { background: var(--mousse); }
.status-done                 { color: var(--mousse); }
.status-archived .status-dot { background: var(--pierre); }
.status-archived             { color: var(--pierre); }

/* ─── AI Card (suggestion Atrium) ───────────────────────── */
.ai-card {
  background: var(--papier-pur);
  border: 0.5px solid var(--cuivre);
  border-left: 3px solid var(--cuivre);
  padding: var(--space-24);
  position: relative;
}
.ai-card-badge {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-family: var(--ff-ui); font-weight: 500;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cuivre);
  margin-bottom: var(--space-8);
}
.ai-card-badge::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px;
  background: var(--cuivre);
}
.ai-card-title {
  font-family: var(--ff-body); font-weight: 500;
  font-size: 16px; color: var(--noyer);
  margin-bottom: var(--space-8); line-height: 1.4;
}
.ai-card-text {
  font-family: var(--ff-body);
  font-size: 14px; color: var(--noyer);
  line-height: 1.6;
}

/* ─── Filet S1 (utilitaire) ─────────────────────────────── */
.rule-s1 {
  border: none;
  height: 4px;
  margin: var(--space-32) 0;
  position: relative;
}
.rule-s1::before {
  content: ''; display: block;
  border-top: 2px solid var(--noyer);
}
.rule-s1::after {
  content: ''; display: block;
  border-top: 0.5px solid var(--cuivre);
  margin-top: 2px;
}