/* ============================================================================
 * FEB Admin V1 - stylesheet. Variant B "FEB native", arbitrated by Maxime
 * 2026-09-01: "on prend le couleur B (natif) ; les composants, typo etc tu
 * reprends exactement ceux du site actuel".
 *
 * Tokens below are copied VERBATIM from the authoritative source file
 * customers/feb/design/2026-09-01/tokens/feb-tokens-variant-b.css
 * (identical to bundle/tokens/variant-b.css, diffed byte for byte 2026-09-02).
 * Do not hand-edit a value here without also updating that source file.
 *
 * Drive charter reconciliation (2026-09-02): the client's brand folder was
 * reachable and contains ZERO files - created 2026-07-09, never populated. A second search
 * across the whole connected Drive for "charte"/"brand"/"identite" found no
 * FEB brand document anywhere else either. There is nothing to reconcile
 * against; the live-site harvest below stands as the only source of truth.
 *
 * Component patterns are informed by the specimen previews/screen-s03-pipeline-b.html,
 * but that file is STALE relative to the tokens (built 15:03, corrected tokens
 * landed 15:27-15:31): it still uses Syne Extrabold and rounded 16/14/10 radii.
 * Both were explicitly reversed by the later, better-sourced token file and by
 * guidelines/brand.md ("No Syne anywhere: it is not an FEB face" / "Corners:
 * Square, radius 0"). This stylesheet follows the corrected, canonical tokens:
 * Space Grotesk only, radius 0 everywhere including chips (the specimen used a
 * pill radius on chips; the canonical --feb-c-chip-radius resolves to
 * --feb-p-radius-sm = 0, so chips are square here too).
 * ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- TIER 1 - PRIMITIVES (verbatim, tokens/feb-tokens-variant-b.css) ---- */
  --feb-p-blue-700:    #000baa;
  --feb-p-blue-050:    #e6e7f7;
  --feb-p-periwinkle:  #8088ff;
  --feb-p-magenta:     #f621d0;
  --feb-p-magenta-700: #a4168b;
  --feb-p-pink-300:    #f98de6;
  --feb-p-pink-050:    #fed8ff;
  --feb-p-cyan-050:    #dbffff;
  --feb-p-ink-900:  #000000;
  --feb-p-ink-700:  #2b2b2b;
  --feb-p-ink-500:  #4f4f4f;
  --feb-p-ink-300:  #949494;
  --feb-p-paper-bg:    #ffffff;
  --feb-p-paper-card:  #ffffff;
  --feb-p-paper-sep:   #eeeeee;
  --feb-p-paper-hair:  #eeeeee;
  --feb-p-paper-quiet: #f4f4f4;
  --feb-p-olive-700:   #4a5500;
  --feb-p-olive-050:   #f4ffaa;
  --feb-p-red-700:     #c11a1a;
  --feb-p-red-050:     #fbe7e7;
  --feb-p-ff-body:    'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --feb-p-ff-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --feb-p-ff-num:     'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --feb-p-radius-lg: 0;
  --feb-p-radius-md: 0;
  --feb-p-radius-sm: 0;
  --feb-p-radius-pill: 999px;
  --feb-p-shadow-soft: none;
  --feb-p-shadow-card: none;
  --feb-p-shadow-overlay: 0 8px 24px rgba(0,0,0,0.12);
  --feb-p-space-1: 4px;
  --feb-p-space-2: 8px;
  --feb-p-space-3: 12px;
  --feb-p-space-4: 16px;
  --feb-p-space-5: 20px;
  --feb-p-space-6: 24px;
  --feb-p-space-8: 32px;
  --feb-p-space-10: 40px;
  --feb-p-space-14: 56px;
  --feb-p-space-18: 72px;
  --feb-p-ease: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --feb-p-dur-fast: 140ms;
  --feb-p-dur-base: 220ms;
  --feb-p-dur-slow: 320ms;

  /* ---- TIER 2 - SEMANTIC (verbatim) ---- */
  --feb-bg:            var(--feb-p-paper-bg);
  --feb-surface:       var(--feb-p-paper-card);
  --feb-surface-quiet: var(--feb-p-paper-quiet);
  --feb-border:        var(--feb-p-paper-sep);
  --feb-hairline:      var(--feb-p-paper-hair);
  --feb-band-pink: var(--feb-p-pink-050);
  --feb-band-cyan: var(--feb-p-cyan-050);
  --feb-ink-1: var(--feb-p-ink-900);
  --feb-ink-2: var(--feb-p-ink-700);
  --feb-ink-3: var(--feb-p-ink-500);
  --feb-ink-disabled: var(--feb-p-ink-300);
  --feb-icon-quiet:   var(--feb-p-ink-300);
  --feb-ornament:   var(--feb-p-ink-900);
  --feb-brand-ink:  var(--feb-p-blue-700);
  --feb-accent-txt: var(--feb-p-magenta-700);
  --feb-primary:    var(--feb-p-blue-700);
  --feb-primary-on: #ffffff;
  --feb-signature:  var(--feb-p-magenta);
  --feb-tone-idle-fg:   var(--feb-p-ink-500);      --feb-tone-idle-bg:   var(--feb-p-paper-quiet);
  --feb-tone-wait-fg:   var(--feb-p-blue-700);     --feb-tone-wait-bg:   var(--feb-p-blue-050);
  --feb-tone-act-fg:    var(--feb-p-magenta-700);  --feb-tone-act-bg:    var(--feb-p-pink-050);
  --feb-tone-ok-fg:     var(--feb-p-olive-700);    --feb-tone-ok-bg:     var(--feb-p-olive-050);
  --feb-tone-alert-fg:  var(--feb-p-red-700);      --feb-tone-alert-bg:  var(--feb-p-red-050);
  --feb-tone-closed-fg: var(--feb-p-ink-500);      --feb-tone-closed-bg: var(--feb-p-paper-quiet);
  --feb-focus-ring: 2px solid var(--feb-p-blue-700);
  --feb-focus-offset: 2px;

  /* ---- TIER 3 - COMPONENT (verbatim) ---- */
  --feb-c-card-bg:      var(--feb-surface);
  --feb-c-card-border:  1px solid var(--feb-border);
  --feb-c-card-radius:  var(--feb-p-radius-lg);
  --feb-c-card-shadow:  var(--feb-p-shadow-soft);
  --feb-c-card-pad:     var(--feb-p-space-5);
  --feb-c-card-mark-width:  24px;
  /* Token source says 1.5px (an SVG-arrow stroke-width comment, not a bar height).
     guidelines/brand.md section 5 prose and the specimen's own working CSS
     (.card-b::before, --feb-c-card-rule-weight) both specify 3px for the actual
     rendered bar. Using 3px here: it is the value that was built and reviewed,
     the 1.5px looks like leftover SVG-arrow phrasing not updated for the bar
     shape. Flagged for the design source, not silently reconciled. */
  --feb-c-card-mark-weight: 3px;
  --feb-c-card-mark-color:  var(--feb-ornament);
  --feb-c-display-ff: var(--feb-p-ff-display);
  --feb-c-display-transform: uppercase;
  --feb-c-display-tracking: 0.2em;
  --feb-c-display-lh: 1;
  --feb-c-display-weight: 400;
  --feb-c-eyebrow-size: 11px;
  --feb-c-eyebrow-weight: 700;
  --feb-c-eyebrow-tracking: 0.2em;
  --feb-c-eyebrow-color: var(--feb-brand-ink);
  --feb-c-kpi-value-size: 28px;
  --feb-c-kpi-value-weight: 700;
  --feb-c-kpi-value-ff: var(--feb-p-ff-num);
  --feb-c-kpi-label-size: 11px;
  --feb-c-chip-radius: var(--feb-p-radius-sm);
  --feb-c-chip-pad: 3px 10px;
  --feb-c-chip-size: 12px;
  --feb-c-chip-weight: 600;
  --feb-c-row-height: 52px;
  --feb-c-row-divider: 1px solid var(--feb-hairline);
  --feb-c-row-hover: var(--feb-p-paper-quiet);
  --feb-c-btn-height: 44px;
  --feb-c-btn-radius: var(--feb-p-radius-sm);
  --feb-c-btn-weight: 700;
  --feb-c-btn-tracking: 0.02em;
  --feb-c-btn-primary-bg: var(--feb-primary);
  --feb-c-btn-primary-fg: var(--feb-primary-on);
  --feb-c-btn-ghost-border: 1px solid var(--feb-p-blue-700);
  --feb-c-btn-ghost-fg: var(--feb-p-blue-700);
  --feb-c-btn-signature-bg: var(--feb-signature);
  --feb-c-btn-signature-fg: var(--feb-p-ink-900);
  --feb-c-btn-danger-fg: var(--feb-p-red-700);
  --feb-c-input-height: 44px;
  --feb-c-input-radius: var(--feb-p-radius-sm);
  --feb-c-input-border: 1px solid var(--feb-p-ink-300);
  --feb-c-input-bg: var(--feb-surface);
}

@media (min-width: 900px) {
  :root {
    --feb-c-card-pad: var(--feb-p-space-6);
    --feb-c-kpi-value-size: 34px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --feb-p-dur-fast: 0ms; --feb-p-dur-base: 0ms; --feb-p-dur-slow: 0ms; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================================
 * BASE
 * ========================================================================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--feb-bg);
  color: var(--feb-ink-2);
  font-family: var(--feb-p-ff-body);
  font-size: 14px;
  line-height: 20px;
  word-break: break-word;
}
a { color: var(--feb-primary); }
:focus-visible { outline: var(--feb-focus-ring); outline-offset: var(--feb-focus-offset); }
.hidden { display: none !important; }

h2 { font-size: 20px; line-height: 26px; font-weight: 700; margin: 0 0 var(--feb-p-space-4); color: var(--feb-ink-1); }

button {
  font: inherit;
  cursor: pointer;
  height: var(--feb-c-btn-height);
  border-radius: var(--feb-c-btn-radius);
  padding: 0 var(--feb-p-space-5);
  font-weight: var(--feb-c-btn-weight);
  letter-spacing: var(--feb-c-btn-tracking);
  border: var(--feb-c-btn-ghost-border);
  background: transparent;
  color: var(--feb-ink-1);
}
button.primary { background: var(--feb-c-btn-primary-bg); border-color: var(--feb-c-btn-primary-bg); color: var(--feb-c-btn-primary-fg); }
button.ghost { background: transparent; border-color: var(--feb-border); color: var(--feb-ink-2); }
button.sm { height: 36px; padding: 0 var(--feb-p-space-3); font-size: 13px; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font: inherit;
  height: var(--feb-c-input-height);
  background: var(--feb-c-input-bg);
  border: var(--feb-c-input-border);
  border-radius: var(--feb-c-input-radius);
  color: var(--feb-ink-1);
  padding: 0 var(--feb-p-space-3);
  width: 100%;
}
/* QA fix (BLOQUANT 1): checkbox/radio were stretched to 100% width x 44px height by the rule above */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  height: auto;
  vertical-align: middle;
  margin-right: var(--feb-p-space-2);
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
}
select { height: 40px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--feb-ink-1); margin: 0 0 var(--feb-p-space-2); }

main { max-width: 1100px; margin: 0 auto; padding: var(--feb-p-space-6) var(--feb-p-space-4) var(--feb-p-space-14); }
@media (min-width: 900px) { main { padding: var(--feb-p-space-8) var(--feb-p-space-6) var(--feb-p-space-14); } }

/* ============================================================================
 * HEADER (persistent rail equivalent for a single-page admin)
 * ========================================================================== */
header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--feb-p-space-2) var(--feb-p-space-3);
  padding: var(--feb-p-space-3) var(--feb-p-space-4);
  border-bottom: 1px solid var(--feb-border);
  background: var(--feb-surface);
}
@media (min-width: 900px) { header { padding: var(--feb-p-space-4) var(--feb-p-space-6); flex-wrap: nowrap; } }
header .brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--feb-p-ff-display);
  font-weight: 700; font-size: 16px; color: var(--feb-ink-1);
  white-space: nowrap;
}
header .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--feb-signature); flex: 0 0 auto; }
header .brand b { font-weight: 700; }
header .brand .muted { display: none; }
@media (min-width: 480px) { header .brand .muted { display: inline; } }
header .spacer { flex: 1; }
header .who { color: var(--feb-ink-3); font-size: 13px; display: none; white-space: nowrap; }
@media (min-width: 620px) { header .who { display: inline; } }

/* ============================================================================
 * LOGIN
 * ========================================================================== */
.login-wrap {
  max-width: 360px; margin: 12vh var(--feb-p-space-4);
  background: var(--feb-surface);
  border: 1px solid var(--feb-border);
  border-radius: var(--feb-c-card-radius);
  padding: var(--feb-p-space-6);
  position: relative;
}
@media (min-width: 640px) { .login-wrap { margin: 12vh auto; } }
.login-wrap::before { content: ""; position: absolute; top: 0; left: 0; width: var(--feb-c-card-mark-width); height: var(--feb-c-card-mark-weight); background: var(--feb-c-card-mark-color); }
.login-wrap h1 {
  font-family: var(--feb-p-ff-display); text-transform: var(--feb-c-display-transform);
  letter-spacing: var(--feb-c-display-tracking); line-height: var(--feb-c-display-lh);
  font-weight: var(--feb-c-display-weight); font-size: 28px; color: var(--feb-ink-1);
  margin: var(--feb-p-space-2) 0 4px;
}
.login-wrap h1 span { color: var(--feb-primary); }
.login-wrap p { color: var(--feb-ink-3); margin: 0 0 var(--feb-p-space-6); font-size: 13px; }
.err { color: var(--feb-tone-alert-fg); font-size: 13px; min-height: 18px; }

/* ============================================================================
 * KPI CARDS
 * ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--feb-p-space-3); margin-bottom: var(--feb-p-space-2); }
.card {
  position: relative;
  background: var(--feb-c-card-bg);
  border: var(--feb-c-card-border);
  border-radius: var(--feb-c-card-radius);
  box-shadow: var(--feb-c-card-shadow);
  padding: var(--feb-c-card-pad);
}
.card::before { content: ""; position: absolute; top: 0; left: 0; width: var(--feb-c-card-mark-width); height: var(--feb-c-card-mark-weight); background: var(--feb-c-card-mark-color); }
.card .n { font-family: var(--feb-c-kpi-value-ff); font-size: var(--feb-c-kpi-value-size); font-weight: var(--feb-c-kpi-value-weight); color: var(--feb-ink-1); line-height: 1.1; display: block; }
.card .l { color: var(--feb-ink-3); font-size: var(--feb-c-kpi-label-size); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; display: block; }
.card.alert .n { color: var(--feb-tone-alert-fg); }
.statusbar { font-size: 13px; color: var(--feb-ink-3); margin-bottom: var(--feb-p-space-6); }

/* ============================================================================
 * SECTIONS
 * ========================================================================== */
section.block {
  position: relative;
  background: var(--feb-surface);
  border: var(--feb-c-card-border);
  border-radius: var(--feb-c-card-radius);
  padding: var(--feb-c-card-pad);
  margin-top: var(--feb-p-space-6);
}
section.block::before { content: ""; position: absolute; top: 0; left: 0; width: var(--feb-c-card-mark-width); height: var(--feb-c-card-mark-weight); background: var(--feb-c-card-mark-color); }

/* ============================================================================
 * TABLES - >=900px real table, <=899px stacked cards (structurally different,
 * per guidelines/brand.md section 4, not a shrink of the same markup).
 * ========================================================================== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--feb-p-space-3) var(--feb-p-space-2); border-bottom: var(--feb-c-row-divider); vertical-align: top; }
th { color: var(--feb-ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
td { font-size: 13.5px; color: var(--feb-ink-2); }
td b { color: var(--feb-ink-1); }
tbody tr:hover td { background: var(--feb-c-row-hover); }
.muted { color: var(--feb-ink-3); }

@media (max-width: 899px) {
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap tr {
    border: var(--feb-c-card-border);
    border-radius: var(--feb-c-card-radius);
    background: var(--feb-surface);
    margin-bottom: var(--feb-p-space-3);
    padding: var(--feb-p-space-2) var(--feb-p-space-4);
  }
  .table-wrap td {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: var(--feb-p-space-2) 0;
    border-bottom: 1px dashed var(--feb-hairline);
    text-align: left;
  }
  .table-wrap td:last-child { border-bottom: 0; }
  .table-wrap td::before {
    content: attr(data-th);
    font-weight: 600; color: var(--feb-ink-3); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .table-wrap td:empty::before { content: none; }
  .table-wrap td[colspan] { border-bottom: 0; }
  .table-wrap td[colspan]::before { content: none; }
}

/* ============================================================================
 * STATUS CHIPS (priority pills, six-tone system - square, per canonical tokens)
 * ========================================================================== */
.pill {
  display: inline-flex; align-items: center;
  border-radius: var(--feb-c-chip-radius);
  padding: var(--feb-c-chip-pad);
  font-size: var(--feb-c-chip-size);
  font-weight: var(--feb-c-chip-weight);
  line-height: 1;
  color: var(--feb-tone-idle-fg); background: var(--feb-tone-idle-bg);
}
.pill.high { color: var(--feb-tone-act-fg); background: var(--feb-tone-act-bg); }
.pill.urgent { color: var(--feb-tone-alert-fg); background: var(--feb-tone-alert-bg); }

/* ============================================================================
 * FORM ROW (add prospect / suggestions)
 * ========================================================================== */
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--feb-p-space-3); align-items: end; }

/* ============================================================================
 * TOAST
 * ========================================================================== */
.toast {
  position: fixed; bottom: var(--feb-p-space-5); left: 50%; transform: translateX(-50%);
  background: var(--feb-ink-1); color: #fff;
  padding: var(--feb-p-space-3) var(--feb-p-space-5);
  border-radius: var(--feb-c-btn-radius);
  font-weight: 600; font-size: 13px;
  opacity: 0; transition: opacity var(--feb-p-dur-base) var(--feb-p-ease);
  pointer-events: none;
}
.toast.show { opacity: 1; }