/* Forge IA · composants · à charger après forge-tokens.css
   Sans framework. Noms de classes courts, préfixe « f- ». États via attributs ARIA quand ils existent. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: var(--fs-md)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.f-num { font-family: var(--num); font-variant-numeric: tabular-nums; }
code, kbd, .f-mono { font-family: var(--mono); font-size: .92em; }
.f-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Titres */
.f-h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; }
.f-h2 { font-size: var(--fs-lg); font-weight: 650; }
.f-sub { color: var(--muted); max-width: 72ch; text-wrap: pretty; }
.f-eyebrow { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Boutons */
.f-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ctrl-h); padding: 0 14px; font: inherit; font-weight: 600; white-space: nowrap; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.f-btn:hover { border-color: var(--ink-2); }
.f-btn--primary { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--btn-primary-ink); }
.f-btn--primary:hover { background: var(--btn-primary-hover); }
.f-btn--danger { background: var(--surface); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.f-btn--ghost { border-color: transparent; background: transparent; }
.f-btn--sm { height: var(--ctrl-h-sm); padding: 0 10px; font-size: var(--fs-sm); }
.f-btn:disabled, .f-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.f-btn[aria-busy="true"]::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: forge-spin .7s linear infinite; }
@keyframes forge-spin { to { transform: rotate(360deg); } }
.f-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Champs */
.f-field { display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.f-input, .f-select, .f-textarea { font: inherit; font-size: var(--fs-md); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); height: var(--ctrl-h); padding: 0 10px; width: 100%; min-width: 0; }
.f-textarea { height: auto; padding: 8px 10px; resize: vertical; }
.f-input:focus, .f-select:focus, .f-textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.f-input[aria-invalid="true"] { border-color: var(--bad); }
.f-help { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.f-error { font-size: var(--fs-xs); color: var(--bad); font-weight: 500; }
.f-check { display: inline-flex; gap: 8px; align-items: center; }
.f-check input { width: 16px; height: 16px; accent-color: var(--btn-primary); }

/* Contrôle segmenté */
.f-seg { display: inline-flex; padding: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-sm); }
.f-seg button { border: 0; background: none; font: inherit; color: var(--muted); padding: 3px 10px; border-radius: calc(var(--radius) - 2px); cursor: pointer; }
.f-seg button[aria-pressed="true"], .f-seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }

/* Pastilles de statut : toujours icône + texte, jamais la couleur seule */
.f-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; padding: 1px 9px; border-radius: var(--radius-full); white-space: nowrap; background: var(--info-soft); color: var(--info); }
.f-chip--ok { background: var(--ok-soft); color: var(--ok); }
.f-chip--run { background: var(--run-soft); color: var(--run); }
.f-chip--run::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--run-dot); animation: forge-pulse 1.6s ease-in-out infinite; }
.f-chip--warn { background: var(--warn-soft); color: var(--warn); }
.f-chip--bad { background: var(--bad-soft); color: var(--bad); }

/* Cartes */
.f-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.f-card__body { padding: var(--card-pad); display: grid; gap: var(--s-3); }
.f-card__foot { padding: var(--s-3) var(--card-pad); border-top: 1px solid var(--line-soft); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Chiffre clé avec tendance */
.f-kpi { padding: 14px 16px; display: grid; gap: 2px; }
.f-kpi__label { font-size: var(--fs-sm); color: var(--muted); }
.f-kpi__value { font-family: var(--num); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.f-kpi__unit { font-size: var(--fs-md); color: var(--muted); font-weight: 500; margin-left: 3px; }
.f-trend { font-size: var(--fs-sm); font-weight: 600; }
.f-trend--good { color: var(--ok); } .f-trend--bad { color: var(--warn); }
.f-trend small { color: var(--muted); font-weight: 400; font-size: inherit; }

/* Barres de comparaison et de progression */
.f-compare { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; }
.f-track { height: 18px; background: var(--surface-sunk); border-radius: var(--radius-sm); overflow: hidden; }
.f-track > i { display: block; height: 100%; background: var(--btn-primary); }
.f-track--base > i { background: var(--bar-base); }
.f-progress { height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.f-progress > i { display: block; height: 100%; background: var(--run-dot); transition: width .6s ease; }

/* Jauge circulaire : <svg class="f-gauge" viewBox="0 0 36 36"><circle class="f-gauge__t" …/><circle class="f-gauge__v" stroke-dasharray="65 100" …/></svg> */
.f-gauge { width: 64px; height: 64px; transform: rotate(-90deg); }
.f-gauge circle { fill: none; stroke-width: 3.5; }
.f-gauge__t { stroke: var(--surface-sunk); } .f-gauge__v { stroke: var(--ink); stroke-linecap: round; }

/* Tableaux denses */
.f-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.f-table th { position: sticky; top: 0; text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--surface-2); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.f-table td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.f-table tr:hover td { background: var(--surface-2); }
.f-table .num { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.f-pager { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 10px 12px; font-size: var(--fs-sm); color: var(--muted); }

/* Bannières et toasts */
.f-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--info-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent); }
.f-banner--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.f-banner--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.f-banner--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.f-toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 60; }
.f-toast { display: flex; gap: 10px; align-items: center; min-width: 320px; max-width: 420px; padding: 12px 14px; background: var(--ink); color: var(--page); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }

/* Modale */
.f-modal-back { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; z-index: 50; padding: 20px; }
.f-modal { width: min(520px, 100%); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); display: grid; }
.f-modal__head { padding: 18px 20px 6px; } .f-modal__body { padding: 6px 20px 18px; color: var(--ink-2); }
.f-modal__foot { padding: 12px 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Zone de dépôt */
.f-drop { position: relative; display: grid; gap: 6px; place-items: center; text-align: center; padding: 24px; border: 1.5px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.f-drop:hover, .f-drop[data-over] { border-color: var(--accent); background: var(--accent-soft); }
.f-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Squelettes */
.f-skel { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--skeleton) 0, var(--skeleton-hi) 40%, var(--skeleton) 80%) 0 0 / 800px 100%; animation: forge-shimmer 1.4s linear infinite; }

/* Vue document + formulaire */
.f-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); min-height: 0; }
.f-review__doc { background: var(--surface-2); overflow: auto; display: flex; justify-content: center; padding: 24px; }
.f-review__field { display: grid; grid-template-columns: 150px minmax(0, 1fr) 20px; gap: 6px 10px; align-items: center; padding: 8px; border-radius: var(--radius); }
.f-review__field[data-state="alert"] { background: var(--bad-soft); }
.f-review__field[data-state="diff"] { background: var(--warn-soft); }
@media (max-width: 1100px) { .f-review { grid-template-columns: 1fr; } }

/* Structure applicative */
.f-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.f-side { background: var(--side-bg); color: var(--side-ink); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--side-hover) transparent; scrollbar-gutter: stable; }
.f-side::-webkit-scrollbar { width: 6px; } .f-side::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; } .f-side:hover::-webkit-scrollbar-thumb { background: var(--side-active); }
.f-side a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius); color: var(--side-ink); font-weight: 500; }
.f-side a:hover { background: var(--side-hover); text-decoration: none; }
.f-side a[aria-current="page"] { background: var(--side-active); color: var(--side-active-ink); font-weight: 600; }
.f-top { height: 52px; display: flex; align-items: center; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; }
.f-main { padding: 28px 40px 64px; display: grid; gap: var(--s-4); align-content: start; }
@media (max-width: 1180px) { .f-shell { grid-template-columns: 60px minmax(0, 1fr); } .f-side .f-label { display: none; } .f-main { padding: 24px; } }
@media (max-width: 700px) { .f-shell { grid-template-columns: 1fr; } .f-side { position: fixed; inset: auto 0 0 0; height: 60px; flex-direction: row; justify-content: space-around; padding: 6px; z-index: 20; } .f-main { padding: 16px 16px 84px; } }

/* Palette de commandes */
.f-cmdk { width: min(640px, 100%); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); overflow: hidden; }
.f-cmdk__input { height: 52px; border: 0; border-bottom: 1px solid var(--line); padding: 0 18px; font: inherit; font-size: var(--fs-lg); width: 100%; background: none; color: var(--ink); }
.f-cmdk__item[aria-selected="true"] { background: var(--accent-soft); }