/* ============================================================
   03-COMPONENTS — les composants fm-*. Propriétaire : C0 (gelé),
   purgé par R6 (patron div .fm-sheet, .fm-panel sans cible,
   infobulle ::after morte — layer.tip() est l'infobulle unique).
   Aucune position, aucune coordonnée d'écran (→ 04-layout.css).
   Cf. docs/interface/sim-ui-design-system.md §4.
   ============================================================ */

/* ---------- 4.1 .fm-scroll ---------- */

.fm-scroll { scrollbar-width: thin; scrollbar-color: var(--fm-ink-4) transparent; overscroll-behavior: contain; }
.fm-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.fm-scroll::-webkit-scrollbar-thumb { background: var(--fm-ink-4); border-radius: var(--fm-r-pill); }
.fm-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- 4.2 .fm-drawer ---------- */

.fm-drawer { border-top: 1px dashed var(--fm-line-1); }
.fm-drawer__sum {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: var(--fm-sp-1);
  padding: var(--fm-sp-2) 0 var(--fm-sp-1);
  font-size: var(--fm-fs-100); letter-spacing: var(--fm-tr-2);
  text-transform: uppercase; color: var(--fm-ink-3);
  transition: color var(--fm-dur-1) var(--fm-ease);
}
.fm-drawer__sum::-webkit-details-marker { display: none; }
.fm-drawer__sum::before { content: "▸"; font-size: var(--fm-fs-200); color: var(--fm-ink-4); }
.fm-drawer[open] > .fm-drawer__sum::before { content: "▾"; color: var(--fm-accent); }
.fm-drawer__sum:hover { color: var(--fm-accent); }
.fm-drawer__sum:focus-visible { outline: none; box-shadow: var(--fm-focus); border-radius: var(--fm-r-1); }
.fm-drawer__body { padding: var(--fm-sp-1) 0 var(--fm-sp-2); }

/* ---------- 4.3 .fm-badge ---------- */

.fm-badge {
  display: inline-flex; align-items: center; gap: var(--fm-sp-1);
  padding: 1px var(--fm-sp-2);
  font-size: var(--fm-fs-100); line-height: var(--fm-lh-2);
  color: var(--fm-ink-2);
  border: 1px solid var(--fm-line-2); border-radius: var(--fm-r-pill);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fm-badge em { font-style: normal; color: var(--fm-ink-4); }
.fm-badge--dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--fm-c, var(--fm-accent)); box-shadow: 0 0 6px var(--fm-c, var(--fm-accent));
}
.fm-badge--ok     { color: var(--fm-ok);     border-color: var(--fm-ok);     background: var(--fm-ok-soft); }
.fm-badge--warn   { color: var(--fm-warn);   border-color: var(--fm-warn);   background: var(--fm-warn-soft); }
.fm-badge--danger { color: var(--fm-danger); border-color: var(--fm-danger); background: var(--fm-danger-soft); }
.fm-badge--info   { color: var(--fm-info);   border-color: var(--fm-info);   background: var(--fm-info-soft); }
.fm-badge--accent { color: var(--fm-accent); border-color: var(--fm-accent-line); background: var(--fm-accent-soft); }

/* ---------- 4.4 .fm-gauge ---------- */

.fm-gauge { display: flex; align-items: center; gap: var(--fm-sp-2); margin: var(--fm-sp-0) 0; }
.fm-gauge__label {
  flex: 0 0 58px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fm-fs-100); letter-spacing: var(--fm-tr-1);
  text-transform: uppercase; color: var(--fm-ink-3);
}
.fm-gauge__track {
  flex: 1 1 auto; min-width: 16px; height: 4px; border-radius: var(--fm-r-pill);
  background: rgba(255, 255, 255, 0.07); overflow: hidden;
}
.fm-gauge__fill {
  display: block; height: 100%; width: 0;
  background: var(--fm-c, var(--fm-accent)); box-shadow: 0 0 6px var(--fm-c, var(--fm-accent));
  border-radius: var(--fm-r-pill); transition: width var(--fm-dur-3) var(--fm-ease);
}
.fm-gauge__value {
  flex: 0 0 auto; min-width: 34px; text-align: right;
  font-size: var(--fm-fs-200); color: var(--fm-ink-2); font-variant-numeric: tabular-nums;
}
.fm-gauge--over .fm-gauge__fill { background: var(--fm-danger); box-shadow: 0 0 6px var(--fm-danger); }
.fm-gauge--stack { flex-direction: column; align-items: stretch; gap: var(--fm-sp-0); }
.fm-gauge--stack .fm-gauge__label { flex: none; }
.fm-gauge--bare .fm-gauge__label, .fm-gauge--bare .fm-gauge__value { display: none; }

/* ---------- 4.5 .fm-toggle ---------- */

.fm-toggle {
  padding: var(--fm-sp-1) var(--fm-sp-4);
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-200);
  color: var(--fm-ink-3); background: transparent;
  border: 1px solid var(--fm-line-1); border-radius: var(--fm-r-pill);
  cursor: pointer; transition: color var(--fm-dur-1), border-color var(--fm-dur-1), background var(--fm-dur-1);
}
.fm-toggle:hover { color: var(--fm-ink-1); border-color: var(--fm-line-3); }
.fm-toggle[aria-pressed="true"] {
  color: var(--fm-accent); border-color: var(--fm-accent-line);
  background: var(--fm-accent-soft); box-shadow: 0 0 12px var(--fm-accent-glow);
}
.fm-toggle:focus-visible { outline: none; box-shadow: var(--fm-focus); }

.fm-toggle--tri[data-level="0"] { opacity: 0.55; }
.fm-toggle--tri[data-level="1"] { background: color-mix(in srgb, var(--fm-accent-soft) 55%, transparent); }
.fm-toggle--tri[data-level="2"] { background: var(--fm-accent-soft); }
.fm-toggle--tri::after {
  content: ""; margin-left: var(--fm-sp-1); width: 22px; height: 3px; border-radius: var(--fm-r-pill);
  background: linear-gradient(90deg, var(--fm-accent) var(--fm-lvl, 0%), rgba(255, 255, 255, 0.10) var(--fm-lvl, 0%));
}

/* ---------- 4.6 .fm-slider ---------- */

.fm-slider {
  display: grid; grid-template-columns: 1fr auto; gap: var(--fm-sp-0) var(--fm-sp-2);
  align-items: baseline; margin: var(--fm-sp-2) 0; cursor: pointer;
}
.fm-slider__label {
  font-size: var(--fm-fs-100); letter-spacing: var(--fm-tr-2);
  text-transform: uppercase; color: var(--fm-ink-3);
}
.fm-slider__value { font-size: var(--fm-fs-200); color: var(--fm-accent); font-variant-numeric: tabular-nums; }
.fm-slider__input { grid-column: 1 / -1; }

/* ---------- 4.7 .fm-tabs ---------- */

.fm-tabs {
  display: flex; gap: var(--fm-sp-0); padding: var(--fm-sp-0);
  background: var(--fm-surface-2); border-radius: var(--fm-r-1);
}
.fm-tab {
  flex: 1 1 0; min-width: 0; padding: var(--fm-sp-1) var(--fm-sp-2);
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-200);
  color: var(--fm-ink-3); background: transparent; border: none;
  border-radius: calc(var(--fm-r-1) - 2px); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--fm-dur-1), background var(--fm-dur-1);
}
.fm-tab:hover { color: var(--fm-ink-1); }
.fm-tab[aria-selected="true"] { color: var(--fm-accent); background: var(--fm-accent-soft); font-weight: 600; }
.fm-tab:focus-visible { outline: none; box-shadow: var(--fm-focus); }
.fm-tabpanel[hidden] { display: none; }

/* ---------- 4.8 .fm-btn ---------- */

.fm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fm-sp-1);
  height: var(--fm-ctl-h);
  padding: var(--fm-sp-2) var(--fm-sp-4);
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-200); letter-spacing: var(--fm-tr-1);
  color: var(--fm-ink-2); background: transparent;
  border: 1px solid var(--fm-line-1); border-radius: var(--fm-r-1);
  cursor: pointer; white-space: nowrap;
  transition: color var(--fm-dur-1), border-color var(--fm-dur-1), background var(--fm-dur-1), transform var(--fm-dur-1);
}
.fm-btn:hover { color: var(--fm-ink-1); border-color: var(--fm-line-3); background: var(--fm-surface-3); }
.fm-btn:active { transform: translateY(1px); }
.fm-btn:focus-visible { outline: none; box-shadow: var(--fm-focus); }
.fm-btn[disabled] { color: var(--fm-ink-4); border-color: var(--fm-line-1); cursor: default; opacity: 0.6; }

.fm-btn--primary { color: var(--fm-accent); border-color: var(--fm-accent-line); background: var(--fm-accent-soft); }
.fm-btn--danger  { color: var(--fm-danger); border-color: var(--fm-danger); background: var(--fm-danger-soft); }
.fm-btn--ghost   { border-color: transparent; }
.fm-btn--icon    { --icon: 24px; width: var(--icon); height: var(--icon); padding: 0; }
.fm-btn--sm      { padding: var(--fm-sp-1) var(--fm-sp-2); font-size: var(--fm-fs-200); }
.fm-btn--lg      { padding: var(--fm-sp-3) var(--fm-sp-5); font-size: var(--fm-fs-400); }
.fm-btn--tool    { flex-direction: column; gap: var(--fm-sp-0); padding: var(--fm-sp-2) var(--fm-sp-1); }
.fm-btn--tool svg  { width: 19px; height: 19px; }
.fm-btn--tool span { font-size: var(--fm-fs-100); letter-spacing: var(--fm-tr-1); text-transform: uppercase; }
.fm-btn[aria-pressed="true"], .fm-btn.is-active {
  color: var(--fm-accent); border-color: var(--fm-accent-line); background: var(--fm-accent-soft);
}

/* ---------- 4.9 infobulle : portée par layer.tip (#fm-tip, popover manual).
   Le patron ::after CSS est purge (R6) ; on garde l'ancrage position:relative
   dont dépendent les décorations ::before des boutons (séparateur #btn-help). ---------- */

[data-fm-tip] { position: relative; }

/* ---------- 4.10 .fm-kv ---------- */

.fm-kv {
  display: grid; grid-template-columns: auto 1fr; gap: var(--fm-sp-0) var(--fm-sp-4);
  font-size: var(--fm-fs-200); margin: 0;
}
.fm-kv dt { color: var(--fm-ink-3); white-space: nowrap; }
.fm-kv dd { margin: 0; text-align: right; color: var(--fm-ink-1); font-variant-numeric: tabular-nums; }
.fm-kv dd.is-warn { color: var(--fm-warn); }
.fm-kv dd.is-danger { color: var(--fm-danger); }
.fm-kv--wide { grid-template-columns: 1fr auto; }

/* ---------- 4.11 .fm-stat ---------- */

.fm-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: var(--fm-lh-1); }
.fm-stat__label {
  font-size: var(--fm-fs-100); letter-spacing: var(--fm-tr-2);
  text-transform: uppercase; color: var(--fm-ink-4);
}
.fm-stat__value {
  font-size: var(--fm-fs-500); font-weight: 600; color: var(--fm-ink-1);
  font-variant-numeric: tabular-nums;
}
.fm-stat--hero .fm-stat__value { font-size: var(--fm-fs-600); }

/* ---------- 4.12 .fm-sheet : fiche <dialog> native (R5). Le patron div
   (overlay + __card) est purge (R6) ; la géométrie de dialog.fm-sheet
   vit dans 02-base.css. ---------- */

.fm-sheet__actions { display: flex; justify-content: flex-end; gap: var(--fm-sp-3); margin-top: var(--fm-sp-6); }

/* ---------- 4.13 .fm-zone (refonte R2 : surface unique des zones de grille) ---------- */

.fm-zone {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--fm-surface-1);
  -webkit-backdrop-filter: var(--fm-blur); backdrop-filter: var(--fm-blur);
  border: 1px solid var(--fm-line-2);
  border-radius: var(--fm-r-2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--fm-ink-2);
  contain: layout paint;
}
.fm-zone__head {
  display: flex; align-items: center; gap: var(--fm-sp-2);
  height: 28px; padding: 0 var(--fm-sp-3);
  border-bottom: 1px solid var(--fm-line-1);
  flex: none; min-width: 0;
}
.fm-zone__title {
  font-family: var(--fm-font-display); font-weight: 800;
  font-size: var(--fm-fs-100); letter-spacing: var(--fm-tr-3);
  text-transform: uppercase; color: var(--fm-ink-3); margin: 0;
}
.fm-zone__meta { font-size: var(--fm-fs-100); color: var(--fm-ink-4); }

/* ---------- 4.14 .fm-menu (menu en couche supérieure, [popover]) ---------- */

.fm-menu { padding: var(--fm-sp-1); background: var(--fm-surface-3); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65); }
[popover].fm-pop:popover-open { display: flex; flex-direction: column; gap: 1px; }
.fm-menu.fm-pop:popover-open { border-radius: var(--fm-r-2); }
.fm-menu__item {
  display: flex; align-items: center; gap: var(--fm-sp-2);
  height: 26px; padding: 0 var(--fm-sp-2);
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-200);
  color: var(--fm-ink-1); text-align: left; white-space: nowrap;
  background: none; border: none; border-radius: var(--fm-r-1); cursor: pointer;
}
.fm-menu__item:hover { background: var(--fm-accent-soft); color: var(--fm-accent); }
.fm-menu__item:focus-visible { outline: none; box-shadow: var(--fm-focus); }
.fm-menu__item kbd {
  margin-left: auto; font-family: var(--fm-font-mono); font-size: var(--fm-fs-100);
  color: var(--fm-ink-4); background: none; border: 0; padding: 0;
}
.fm-menu__item--danger { color: var(--fm-danger); }
.fm-menu__item--danger:hover { background: var(--fm-danger-soft); color: var(--fm-danger); }
.fm-menu__sep { height: 1px; margin: var(--fm-sp-1) var(--fm-sp-0); background: var(--fm-line-1); flex: none; }

/* ---------- 4.15 .fm-tip (l'infobulle unique, [popover=manual] #fm-tip) ---------- */

.fm-tip {
  margin: 0; padding: var(--fm-sp-1) var(--fm-sp-2);
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-200); line-height: var(--fm-lh-2);
  color: var(--fm-ink-1); background: var(--fm-surface-3);
  border: 1px solid var(--fm-line-2); border-radius: var(--fm-r-1);
  box-shadow: var(--fm-el-2);
  max-width: min(92vw, 420px); width: max-content;
  pointer-events: none;
}
.fm-tip:popover-open { display: flex; align-items: center; gap: var(--fm-sp-2); }
.fm-tip kbd {
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-100);
  color: var(--fm-accent); background: none; border: 1px solid var(--fm-line-2);
  border-radius: var(--fm-r-1); padding: 0 var(--fm-sp-1);
}

/* ---------- 4.16 .fm-layer (ligne de calque) ---------- */

.fm-layer {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 14px;
  align-items: center; gap: var(--fm-sp-2);
  height: var(--fm-row-h); padding: 0 var(--fm-sp-3);
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-200);
  color: var(--fm-ink-1); background: none; border: none; cursor: pointer;
}
.fm-layer:hover { background: var(--fm-surface-2); }
.fm-layer:focus-visible { outline: none; box-shadow: var(--fm-focus); border-radius: var(--fm-r-1); }
.fm-layer[data-level="0"] { color: var(--fm-ink-3); }
.fm-layer__sw { width: 10px; height: 10px; border-radius: 2px; background: var(--fm-c, var(--fm-accent)); }
.fm-layer[data-level="0"] .fm-layer__sw { opacity: 0.3; }
.fm-layer__tri { display: flex; gap: 2px; }
.fm-layer__tri i { width: 10px; height: 4px; border-radius: 1px; background: var(--fm-line-2); }
.fm-layer[data-level="1"] .fm-layer__tri i:first-child,
.fm-layer[data-level="2"] .fm-layer__tri i { background: var(--fm-accent); }
.fm-layer kbd {
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-100);
  color: var(--fm-ink-4); background: none; border: 1px solid var(--fm-line-1);
  border-radius: var(--fm-r-1); padding: 0 2px; text-align: center;
}

/* ---------- 4.17 .fm-read (lecture chiffrée valeur-d'abord) ---------- */

.fm-read {
  display: flex; align-items: baseline; gap: var(--fm-sp-1);
  white-space: nowrap;
}
.fm-read b {
  font-size: var(--fm-fs-400); font-weight: 600; color: var(--fm-ink-1);
  font-variant-numeric: tabular-nums;
  min-width: var(--fm-read-w, 0); text-align: right;
}
.fm-read__u { font-size: var(--fm-fs-100); color: var(--fm-ink-3); }


.fm-dd {
  display: inline-flex; align-items: center; gap: var(--fm-sp-2);
  min-width: 0; max-width: 100%; height: 20px;
  padding: 0 var(--fm-sp-2);
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-100);
  color: var(--fm-ink-2); white-space: nowrap;
  background: transparent; border: 1px solid var(--fm-line-1); border-radius: var(--fm-r-1);
  cursor: pointer;
  transition: color var(--fm-dur-1) var(--fm-ease), border-color var(--fm-dur-1) var(--fm-ease), background var(--fm-dur-1) var(--fm-ease);
}
.fm-dd:hover { color: var(--fm-ink-1); border-color: var(--fm-line-3); background: var(--fm-surface-3); }
.fm-dd:focus-visible { outline: none; box-shadow: var(--fm-focus); }
.fm-dd[aria-expanded="true"] { color: var(--fm-ink-1); border-color: var(--fm-accent-line); background: var(--fm-surface-3); }
.fm-dd__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fm-dd__chev {
  flex: none; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.75;
  transition: transform var(--fm-dur-1) var(--fm-ease);
}
.fm-dd[aria-expanded="true"] .fm-dd__chev { margin-top: 3px; transform: rotate(-135deg); color: var(--fm-accent); opacity: 1; }
.fm-dd__list { max-height: 50vh; overflow: hidden auto; border: 1px solid var(--fm-line-2); scrollbar-width: thin; }
.fm-dd__opt { justify-content: space-between; user-select: none; }
.fm-dd__opt:focus { outline: none; }
.fm-dd__opt.is-active { background: var(--fm-accent-soft); color: var(--fm-accent); }
.fm-dd__opt[aria-selected="true"] { color: var(--fm-accent); }
.fm-dd__opt[aria-selected="true"]::after {
  content: ""; flex: none; width: 5px; height: 5px; margin-left: var(--fm-sp-4);
  border-radius: var(--fm-r-pill); background: currentColor; box-shadow: 0 0 6px var(--fm-accent-glow);
}