/* studio-ui-kit-20260804 — kit CSS commun du Studio.
   But : mêmes boutons / cases / cartes / badges / inputs PARTOUT (fini le
   « on dirait que c'est différent »). Sur STAGING d'abord.
   Utilisation dans un patch :
     <button class="ui-btn ui-btn-pri">…</button>
     <input class="ui-input" …>
     <div class="ui-card">…</div>
     <span class="ui-badge ui-badge-on">Actif</span> / .ui-badge-off = Coupé
     <div class="ui-eyebrow">DÉJÀ BLACKLISTÉS</div>
     <p class="ui-muted">petit texte gris</p>
   Aucune règle globale sur <button>/<input> pour ne rien casser dans le bundle React
   ni dans les patchs existants — tout est opt-in via `.ui-*`. */

:root {
  --ui-cognac: #c8813c;
  --ui-cognac-hi: #e39d55;
  --ui-cognac-dim: #7a4f24;
  --ui-bg-0: #0a0a0a;
  --ui-bg-1: #131313;
  --ui-bg-2: #1a1a1a;
  --ui-bg-3: #232323;
  --ui-line: #262626;
  --ui-line-2: #333333;
  --ui-tx: #fafafa;
  --ui-tx-dim: #a3a3a3;
  --ui-tx-faint: #7a7a7a;
  --ui-tx-ghost: #525252;
  --ui-ok: #30d158;
  --ui-warn: #f5b451;
  --ui-danger: #ff453a;
  --ui-r: 2px;
  --ui-sans: "Segoe UI Variable Text","Bricolage Grotesque","Segoe UI","Inter",system-ui,-apple-system,sans-serif;
  --ui-mono: "Cascadia Code",Consolas,ui-monospace,monospace;
}

/* ---- BUTTONS ---- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--ui-sans); font-size: 12.5px; font-weight: 600;
  padding: 9px 14px; border-radius: var(--ui-r);
  background: var(--ui-bg-2); border: 1px solid var(--ui-line);
  color: var(--ui-tx); cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.ui-btn:hover  { background: var(--ui-bg-3); border-color: var(--ui-line-2); }
.ui-btn:disabled { opacity: .45; cursor: default; }
.ui-btn svg { width: 14px; height: 14px; flex: none; }

.ui-btn-pri { background: var(--ui-cognac); border-color: var(--ui-cognac); color: #1a1206; }
.ui-btn-pri:hover { background: var(--ui-cognac-hi); border-color: var(--ui-cognac-hi); }

.ui-btn-ghost { background: transparent; border-color: transparent; color: var(--ui-tx-dim); }
.ui-btn-ghost:hover { background: var(--ui-bg-2); color: var(--ui-tx); }

.ui-btn-danger { color: var(--ui-danger); }
.ui-btn-danger:hover { background: var(--ui-bg-2); border-color: var(--ui-danger); color: var(--ui-danger); }

.ui-btn-sm { padding: 5px 10px; font-size: 11.5px; }

/* ---- INPUTS ---- */
.ui-input, .ui-textarea, .ui-select {
  width: 100%; box-sizing: border-box;
  background: var(--ui-bg-0); border: 1px solid var(--ui-line); border-radius: var(--ui-r);
  color: var(--ui-tx); font-family: var(--ui-sans); font-size: 13px;
  padding: 10px 12px; outline: none;
  transition: border-color .12s;
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-tx-ghost); }
.ui-input:focus, .ui-textarea:focus, .ui-select:focus { border-color: var(--ui-cognac); }
.ui-textarea { min-height: 88px; resize: vertical; line-height: 1.45; }

/* ---- CARDS ---- */
.ui-card {
  background: var(--ui-bg-1); border: 1px solid var(--ui-line); border-radius: var(--ui-r);
  padding: 12px 14px; transition: border-color .12s, background .12s;
}
.ui-card-hover { cursor: pointer; }
.ui-card-hover:hover { background: #171717; border-color: var(--ui-line-2); }
.ui-card-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--ui-bg-1); border: 1px solid var(--ui-line); border-radius: var(--ui-r);
  padding: 11px 12px; transition: border-color .12s, background .12s;
}
.ui-card-row:hover { background: #171717; border-color: var(--ui-line-2); }

/* ---- BADGES ---- */
.ui-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ui-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 20px;
  background: var(--ui-bg-3); color: var(--ui-tx-dim); border: 1px solid var(--ui-line);
  cursor: default; white-space: nowrap;
}
.ui-badge.clickable { cursor: pointer; transition: border-color .12s, color .12s; }
.ui-badge.clickable:hover { color: var(--ui-tx); border-color: var(--ui-line-2); }
.ui-badge-on  { color: var(--ui-ok);     background: rgba(48,209,88,.1);   border-color: rgba(48,209,88,.35); }
.ui-badge-off { color: var(--ui-tx-ghost); }
.ui-badge-warn{ color: var(--ui-warn);   background: rgba(245,180,81,.1);  border-color: rgba(245,180,81,.3); }
.ui-badge-gold{ color: var(--ui-cognac); background: rgba(200,129,60,.1);  border-color: rgba(200,129,60,.35); }

/* ---- TYPOGRAPHIE UTILITAIRE ---- */
.ui-eyebrow {
  font-family: var(--ui-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ui-tx-faint);
}
.ui-muted { color: var(--ui-tx-dim); font-size: 12px; line-height: 1.5; }
.ui-muted b { color: var(--ui-tx); }

/* ---- LAYOUT HELPERS ---- */
.ui-stack   { display: flex; flex-direction: column; gap: 10px; }
.ui-stack-sm{ display: flex; flex-direction: column; gap: 6px; }
.ui-row     { display: flex; align-items: center; gap: 10px; }
.ui-grow    { flex: 1 1 auto; min-width: 0; }
.ui-truncate{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- CHEVRON / ICONE STANDARD ---- */
.ui-chev { color: var(--ui-tx-ghost); flex: none; display: inline-flex; }
.ui-chev svg { width: 14px; height: 14px; }

/* ---- PILL (le bouton « insérer une variable/tag » — pattern unique du Studio) ----
   C'est le style de `.rl-ins` (onglet Relance) qui sert de RÉFÉRENCE, à réutiliser
   partout pour « ＋ {prenom} », « + {tag} », etc. Petit, arrondi (pill), cognac soft.  */
.ui-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(200,129,60,.14);
  border: 1px solid rgba(200,129,60,.35);
  color: var(--ui-cognac-hi);
  font-family: var(--ui-sans); font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.ui-pill:hover { background: rgba(200,129,60,.22); }
.ui-pill-hint  { color: var(--ui-tx-faint); font-size: 11px; margin-left: 4px; }