/* ============================================================
   TCRM — Top Chrono Design System v1.0.0 (feuille partagée)
   Portée depuis la maquette Claude Design « TCRM ».
   Base réutilisable pour la migration progressive des écrans.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
  --primary: #DC143C;
  --primary-hover: #C71236;
  --primary-active: #B0102E;
  --primary-subtle: #FCE8EC;

  --white: #FFFFFF;
  --gray-100: #F8F9FA;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #ADB5BD;
  --gray-600: #6C757D;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #212529;

  --success: #28A745;
  --success-subtle: #E6F4EA;
  --warning: #F39C12;
  --warning-subtle: #FDF3E2;
  --info: #2D7FF9;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px;

  --shadow-sm: 0 1px 2px rgba(33,37,41,.06);
  --shadow-md: 0 4px 14px rgba(33,37,41,.09);
  --shadow-lg: 0 18px 48px -12px rgba(33,37,41,.22);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); color: var(--gray-900); background: var(--gray-100); -webkit-font-smoothing: antialiased; }

/* ---------- Brand wordmark (C = pivot Chrono/Customer) ---------- */
.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand .name { font-weight: 800; font-size: 26px; letter-spacing: -.02em; line-height: 1; display: inline-flex; align-items: center; gap: 0; color: var(--gray-900); }
.brand .name .lc { display: inline; color: inherit; background: none; border: none; width: auto; height: auto; margin: 0; font-size: inherit; font-weight: inherit; border-radius: 0; box-shadow: none; }
.brand .sub { font-size: 10.5px; font-weight: 600; letter-spacing: .15em; margin-top: 7px; color: var(--gray-500); }
.brand.compact .name { font-size: 20px; }
.brand.compact .name .lc { font-size: inherit; }

/* ---------- Form pieces ---------- */
.field { position: relative; }
.field .lbl { display: block; font-size: 14px; font-weight: 600; color: var(--gray-700); margin-bottom: var(--space-2); }
.field .inp {
  width: 100%; height: 48px; border-radius: var(--radius-lg); border: 1px solid var(--gray-300);
  background: var(--white); padding: 0 var(--space-4) 0 44px; font-family: var(--font); font-size: 15px; color: var(--gray-900);
  transition: border-color .16s, box-shadow .16s;
}
.field .inp::placeholder { color: var(--gray-500); }
.field .inp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(220,20,60,.18); }
.field.error .inp { border-color: var(--primary); background: var(--primary-subtle); }
.field.error .ficon { color: var(--primary); }
.field .ficon { position: absolute; left: 14px; top: 38px; color: var(--gray-500); pointer-events: none; }
.field .toggle { position: absolute; right: 10px; top: 32px; width: 32px; height: 32px; border: none; background: none; cursor: pointer; color: var(--gray-500); border-radius: var(--radius-md); display: grid; place-items: center; }
.field .toggle:hover { background: var(--gray-100); color: var(--gray-700); }
.field .err-msg { display: none; font-size: 12.5px; font-weight: 500; color: var(--primary); margin-top: 6px; }
.field.error .err-msg { display: block; }

.ico { width: 18px; height: 18px; display: block; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 15px; height: 15px; }

.btn-primary {
  width: 100%; height: 50px; border: none; border-radius: var(--radius-lg); cursor: pointer;
  background: var(--primary); color: var(--white); font-family: var(--font); font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: background .16s, transform .1s;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); transform: translateY(1px); }
.btn-primary[disabled] { opacity: .7; cursor: progress; }
.btn-primary .ico { transition: transform .16s; }
.btn-primary:not([disabled]):hover .ico { transform: translateX(3px); }

.btn-secondary {
  width: 100%; height: 48px; border-radius: var(--radius-lg); border: 1px solid var(--gray-300); background: var(--white);
  cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--gray-700);
  display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .16s, border-color .16s;
}
.btn-secondary:hover { background: var(--gray-100); border-color: var(--gray-400); }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.row-between { display: flex; align-items: center; justify-content: space-between; }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; color: var(--gray-700); user-select: none; }
.check input { position: absolute; opacity: 0; }
.check .box { width: 18px; height: 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--gray-400); display: grid; place-items: center; transition: all .14s; }
.check .box svg { opacity: 0; stroke: var(--white); }
.check input:checked + .box { background: var(--primary); border-color: var(--primary); }
.check input:checked + .box svg { opacity: 1; }
.link { color: var(--primary); font-size: 14px; font-weight: 600; text-decoration: none; }
.link:hover { color: var(--primary-hover); text-decoration: underline; }

.badge-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding: 5px 11px; border-radius: 999px; }
.badge-status .g { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* ---------- Form-level alert ---------- */
.alert { display: none; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-lg); font-size: 13.5px; font-weight: 500; margin-top: var(--space-5); }
.alert.show { display: flex; }
.alert.danger { background: var(--primary-subtle); color: var(--primary-active); }
.alert .ico { flex: none; color: var(--primary); }