/* ---- polices auto-hébergées (web/fonts, licence OFL : web/fonts/OFL.txt) : la classe peut être hors ligne ----
   Atkinson Hyperlegible Next : interface (distingue 1/l/I, 0/O, 5/S — ce qu'on lit dans une mesure, et au fond d'une salle)
   IBM Plex Mono : valeurs, formules, tableur (chiffres de même largeur, qui ne dansent pas pendant l'acquisition) */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ahn-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ahn-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700 900; font-display: swap; src: url(fonts/ahn-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ahn-400-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ahn-600-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700 900; font-display: swap; src: url(fonts/ahn-700-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plexmono-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500 900; font-display: swap; src: url(fonts/plexmono-500.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plexmono-400-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500 900; font-display: swap; src: url(fonts/plexmono-500-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- jetons. Neutres d'instrument : gris teintés vers le bleu encre de l'accent ; un seul accent ; sémantiques à part ---- */
:root {
  --font-ui: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --bg: #f1f4f8; --panel: #ffffff; --ink: #111a2b; --muted: #526077; --line: #dce2eb;
  --accent: #1559a8; --accent-ink: #fff; --ok: #0d7a3b; --warn: #a65703; --bad: #c0262d;
  --ok-ink: #0e6237; --warn-ink: #81480d;   /* texte des pastilles sur fond teinté (≥ 5,1:1 ; --ok/--warn purs = 4,2-4,3:1) */
  --i2c: #2563eb; --out: #7c3aed; --chip: #eaeef4;
  --hover: #e4ebf5;                /* survol d'un élément sans cadre (ligne, voie, menu) */
  /* papier millimétré : ligne majeure, ligne mineure (5 subdivisions), cadre et graduations */
  --grid-major: #c9d3e2; --grid-minor: #e7ecf3; --grid: var(--grid-major); --axis: #1b2840;
  --plotbg: #ffffff; --shadow: 0 1px 3px rgba(0,0,0,.12);
  --line-field: #7a879b;           /* bordure des champs, listes et boutons (≥ 3:1) ; --line reste pour les séparateurs */
  /* espacement : échelle de 4 px */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  /* 4 tailles de police, en rem : elles suivent la racine, donc le mode projection */
  --fs-xs: .75rem;   /* 12 px : pastilles, légendes, kbd */
  --fs-s: .875rem;   /* 14 px : tous les contrôles, libellés, onglets, tableaux */
  --fs-m: 1rem;      /* 16 px : texte courant, valeurs */
  --fs-l: 1.25rem;   /* 20 px : titres de dialogue, résultat principal */
  /* 2 hauteurs de contrôle */
  --h: 2rem; --h-c: 1.625rem;
  /* 1 rayon, petit (instrument, pas application grand public) ; la forme « pastille » est réservée aux ÉTATS */
  --r: 4px; --r-pill: 99px;
  /* ombre : seulement pour ce qui flotte (menu, dialogue, toast, infobulle) */
  --pop: 0 6px 20px rgba(15,26,43,.18);
  /* mouvement : court et amorti, seulement pour dire d'où vient ce qui apparaît (jamais sur le graphe) */
  --ease: cubic-bezier(.22, 1, .36, 1); --dur: 280ms; --dur-s: 180ms;
  --on-fill: #fff;                 /* texte posé sur un aplat --ok / --bad / --warn */
  --danger: var(--bad);
  --vec-v: #22c55e; --vec-a: #d946ef;   /* vecteurs v et a (mêmes valeurs que ui_video.js / ui_calc.js) */
  font-size: 16px;
}
:root[data-theme="dark"] {
  --bg: #0d1117; --panel: #151b24; --ink: #e7ecf3; --muted: #97a3b6; --line: #273142; --hover: #1e2836;
  --accent: #5ca2f2; --accent-ink: #06121f; --ok: #3ccf6a; --warn: #f0a33a; --bad: #ff6b6b; --ok-ink: var(--ok); --warn-ink: var(--warn);
  --i2c: #6aa2ff; --out: #b18cff; --chip: #1f2734;
  --grid-major: #2d3a4e; --grid-minor: #1c2430; --axis: #c3cddb;
  --plotbg: #10151d; --shadow: none; --on-fill: #0b0f16; --pop: 0 6px 20px rgba(0,0,0,.5); --line-field: #66748a;
}
/* thème de l'OS suivi tant que l'utilisateur n'a rien choisi (Fichier → Thème) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117; --panel: #151b24; --ink: #e7ecf3; --muted: #97a3b6; --line: #273142; --hover: #1e2836;
    --accent: #5ca2f2; --accent-ink: #06121f; --ok: #3ccf6a; --warn: #f0a33a; --bad: #ff6b6b; --ok-ink: var(--ok); --warn-ink: var(--warn);
    --i2c: #6aa2ff; --out: #b18cff; --chip: #1f2734;
    --grid-major: #2d3a4e; --grid-minor: #1c2430; --axis: #c3cddb;
    --plotbg: #10151d; --shadow: none; --on-fill: #0b0f16; --pop: 0 6px 20px rgba(0,0,0,.5); --line-field: #66748a;
  }
}
/* projection : on agrandit la RACINE (les rem ignoraient body.proj) et on renforce le quadrillage ;
   classe posée sur <html> par toggleProj() pour que css() (lu sur documentElement) voie ces valeurs */
:root.proj { font-size: 18px; --grid-major: #b3bfd2; --grid-minor: #dce3ed; --axis: #0b1220; --line-field: #5f6c81; }
:root.proj[data-theme="dark"] { --grid-major: #3d4b62; --grid-minor: #263041; --axis: #ffffff; --line-field: #7b889d; }
@media (prefers-color-scheme: dark) { :root.proj:not([data-theme="light"]) { --grid-major: #3d4b62; --grid-minor: #263041; --axis: #ffffff; --line-field: #7b889d; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); line-height: 1.4;
  display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; }
/* chiffres : valeurs, formules, tableur, infobulle du graphe en Plex Mono (largeur fixe : rien ne bouge pendant l'acquisition) */
code, kbd, .sheet td:not(.rn), .ch .val, .big .v, #measure, #tip, .live, .pmv { font-family: var(--font-mono); }
.sheet td:not(.rn), #tip { font-size: .8125rem; }
button, select, input { font: inherit; color: inherit; }
input, select, textarea { background: var(--panel); border: 1px solid var(--line-field); border-radius: var(--r); padding: 0 var(--s2); }
input[type=range] { border: 0; background: none; padding: 0; }
/* champs et listes : même hauteur et même police que les boutons */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select { height: var(--h); font-size: var(--fs-s); }
textarea { font-size: var(--fs-s); border-radius: var(--r); }
input[type=number] { width: 5em; }
.w-s { width: 4.5em; } .w-m { width: 5.5em; } .w-l { width: 7em; }
kbd { border: 1px solid var(--line-field); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; font-size: .8em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.top { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--panel);
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; white-space: nowrap; display: inline-flex; align-items: center; }
/* marque : « µ » en aplat d'accent, carré net (même dessin que l'icône d'onglet) */
.brand .logo { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; background: var(--accent);
  color: var(--accent-ink); border-radius: 3px; margin-right: 3px; font-weight: 700; }
.brand small { font-weight: 500; color: var(--muted); font-size: .7em; }
/* pastille = ÉTAT (connexion, REC, sans fil) : une recette, 3 couleurs */
.pill { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 var(--s3); border-radius: var(--r-pill); font-weight: 600;
  font-size: var(--fs-s); background: var(--chip); white-space: nowrap; border: 0; }
/* état long tronqué (phrase complète en infobulle) ; avec un bouton d'action dedans, rien n'est coupé */
#status { min-width: 0; flex: 0 1 auto; }
#status:has(button) { flex: none; }
.top:has(#status button) { flex-wrap: wrap; }
#status:not(:has(button)) { max-width: 18em; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.75rem; }
.pill.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok-ink); }
.pill.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.pill.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink); }
.pill button { margin-left: 8px; }
.acq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; justify-content: flex-start; }
.acq > span { display: contents; }
.fld { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: var(--fs-s); white-space: nowrap; }
.fld input, .fld select { color: var(--ink); }
/* contrôle verrouillé (pendant une acquisition : lockAcq) */
label.fld:has(input:disabled, select:disabled, textarea:disabled) { opacity: .55; cursor: not-allowed; }   /* pas :disabled seul : une option désactivée grisait tout le champ */
#addPt::after { content: attr(data-n); display: inline-block; min-width: 2.2ch; margin-left: 4px; font-size: var(--fs-xs); color: var(--muted); text-align: left; }
.tools { display: flex; gap: 8px; }
a.btn { text-decoration: none; color: inherit; }
/* bouton secondaire (défaut) ; .primary = UN par zone ; .small/.compact = hauteur compacte */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); height: var(--h); padding: 0 var(--s3);
  background: var(--panel); border: 1px solid var(--line-field); border-radius: var(--r); font-size: var(--fs-s); line-height: 1;
  font-weight: 600; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.btn:hover { border-color: var(--accent); background: var(--hover); }
.btn.primary:hover, .btn.on:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.small, .btn.compact { height: var(--h-c); padding: 0 var(--s2); font-size: var(--fs-s); }
.btn.icon { min-width: var(--h); padding: 0 var(--s2); }
.btn svg, .ico svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.btn:disabled, #runSel:disabled { opacity: .45; cursor: not-allowed; }
/* Lancer : même hauteur que le reste ; se distingue par la couleur, la largeur et la graisse */
.go { display: inline-flex; align-items: center; justify-content: center; height: var(--h); padding: 0 var(--s4);
  background: var(--ok); color: var(--on-fill); border: 0; border-radius: var(--r); font-size: var(--fs-m);
  font-weight: 700; cursor: pointer; min-width: 8.5em; flex: none; white-space: nowrap; }
.go.stop { background: var(--bad); }
.go.wait { background: var(--warn); }
.acq > #go { margin-left: auto; }          /* ancré à droite, largeur fixe : ne bouge pas d'un mode à l'autre */
.go[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }   /* sans carte prête : le survol et le clic disent pourquoi */
.menu { position: relative; }
.menu-pop { display: none; position: absolute; right: 0; top: 110%; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--pop); z-index: 20; min-width: 300px; padding: var(--s1); font-size: var(--fs-s); }
.menu-pop.open { display: block; }
.menu-pop button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 3px; cursor: pointer; }
.menu-pop button:hover { background: var(--hover); }
.menu-pop button.danger { color: var(--bad); }
.menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

#progress { height: 4px; background: transparent; }
#progress div { height: 100%; width: 0; background: var(--ok); transition: width .2s; }

main { flex: 1; display: flex; min-height: 0; }
#side { width: 310px; flex: none; overflow-y: auto; padding: 10px; border-right: 1px solid var(--line); }
.side-empty { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.side-empty p { margin: 0; }
.side-empty .se-h { margin-top: 10px; color: var(--muted); font-size: var(--fs-s); font-weight: 600; }
.side-empty p:has(> .btn) { display: flex; flex-wrap: wrap; gap: 6px; }
#center { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 8px 12px 0; }

.group h3 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 14px 2px 2px;
  display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; padding: 3px 4px; border-radius: 6px; }
.group h3:hover { background: var(--chip); }
.group h3 .fa { width: .9em; flex: none; }
.group h3 .gt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group h3 .cnt { flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0; padding: 0 7px; border-radius: 99px; border: 1px solid var(--line); }
.group h3 .cnt:hover { border-color: var(--accent); color: var(--accent); }
.group h3 .btn.small { padding: 1px 6px; text-transform: none; }
.group .idle { font-size: .82rem; color: var(--muted); padding: 2px 8px 6px 22px; }
/* voie = une ligne, pas une carte : trait de couleur de la courbe devant le nom, case à la couleur de la courbe,
   séparateur fin ; la hiérarchie vient du poids (nom 600, valeur en chiffres fixes), pas d'un cadre */
.ch { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 8px; background: none;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 7px 6px; margin: 0; cursor: pointer; }
.ch:hover { background: var(--hover); }
.ch.off { opacity: .5; }
.ch.absent { opacity: .45; border-bottom-style: dashed; }
.ch input { width: 1.1em; height: 1.1em; margin: 0; accent-color: var(--c, var(--accent)); }
.ch .nm { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch .nm::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--c, var(--line)); vertical-align: middle; margin: -2px 7px 0 0; }
.ch .sub { grid-column: 2 / 4; font-size: .78rem; color: var(--muted); }
.ch .val { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 1.05rem; text-align: right; white-space: nowrap; letter-spacing: -.02em; }
.ch .val small { font-family: var(--font-ui); letter-spacing: 0; font-weight: 400; color: var(--muted); font-size: .8rem; margin-left: 3px; }
.ch .tag { font-size: var(--fs-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--r-pill); background: var(--chip); color: var(--muted); }
.ch .tag.new { background: var(--ok); color: var(--on-fill); }

.graphbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: nowrap; min-width: 0; padding-bottom: 6px; }
.graphbar > .btn.small { height: var(--h); min-width: var(--h); }
@media (max-width: 1279px) { .graphbar { flex-wrap: wrap; } }
.grow { flex: 1; }
/* segment = choix exclusif visible (2 à 5 options) */
.seg { display: inline-flex; flex: none; height: var(--h); border: 1px solid var(--line-field); border-radius: var(--r); overflow: hidden; }
.seg button { background: var(--panel); border: 0; padding: 0 var(--s3); cursor: pointer; font-size: var(--fs-s); font-weight: 600; white-space: nowrap; }
.seg button:not(.on):hover { background: var(--hover); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--fs-s); white-space: nowrap; }
#seriesChips { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; min-height: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: var(--chip);
  border: 2px solid transparent; cursor: pointer; font-size: var(--fs-s); user-select: none; }
.chip i { width: 14px; height: 4px; border-radius: 2px; background: var(--c); }
/* courbe masquée : contour pointillé, texte gris barré (lisible, pas un fantôme) */
.chip.off:not(.more) { background: transparent; border: 1px dashed var(--line); padding: 4px 11px; color: var(--muted); text-decoration: line-through; }
.chip.off:not(.more) i { opacity: .35; }
.chip.model { border-style: dashed; border-color: var(--c); }
#plotWrap { flex: 1; position: relative; min-height: 160px; background: var(--plotbg); border: 0; border-radius: 0; }
#plot { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
#plotOv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px 9px; font-size: var(--fs-s); box-shadow: var(--pop); display: none; white-space: nowrap; z-index: 5;
  font-variant-numeric: tabular-nums; }
#tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
#waitMsg { position: absolute; inset: 0; display: none; place-items: center; font-size: 1.6rem; font-weight: 700; color: var(--warn);
  pointer-events: none; text-align: center; }
/* note écrite sur le graphe : résultat du modèle en projection (l'onglet Modélisation y est masqué) */
.plotnote { position: absolute; z-index: 2; top: 10px; max-width: calc(100% - 140px); padding: 3px 8px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); font-size: var(--fs-s); color: var(--ink); }
.plotnote[hidden] { display: none; }

#projNote { right: 22px; line-height: 1.35; }
#projNote .pn-eq { font-weight: 700; font-size: var(--fs-m); }
#projNote .pn-warn { color: var(--warn); }
#projNote .pn-eq:not(:first-child) { margin-top: 6px; }
#measure { min-height: 0; font-variant-numeric: tabular-nums; padding: 4px 2px; display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--fs-m); }
#measure:empty { display: none; }
#measure b { color: var(--accent); }
#measure .cur-mode { height: var(--h-c); align-self: center; font-family: var(--font-ui); }
#measure .cur-mode button { padding: 0 var(--s2); }

/* panneau du bas : 280 px, moins sur un écran bas (1366×768 avec la barre du navigateur = ~625 px utiles) */
#bottom { display: flex; flex-direction: column; height: min(280px, 38vh); flex: none; margin-top: 8px; border-top: 1px solid var(--line); }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 4px; }   /* à la ligne plutôt que coupés (1024 px) */
.tabs button { flex: none; }
.tabs button { height: var(--h); background: none; border: 0; border-bottom: 3px solid transparent; padding: 0 var(--s2); cursor: pointer; color: var(--muted);
  font-weight: 600; font-size: var(--fs-s); white-space: nowrap; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
.tabs button:not(.on):hover { color: var(--ink); }
@media (max-width: 1500px) { .tabs button { padding: 0 var(--s1); } }
.tab { display: none; flex: 1; overflow: auto; padding: 8px 2px; }
.tab.on { display: block; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.hint { color: var(--muted); font-size: var(--fs-s); }
/* tableur : le tableau prend toute la hauteur restante de l'onglet (pas de hauteur fixe à deviner) */
#tab-table.on { display: flex; flex-direction: column; }
#tab-table > .row { flex: none; }
#tableWrap { flex: 0 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--fs-s); width: max-content; min-width: 100%; }
th, td { padding: 3px 10px; border-bottom: 1px solid var(--line); text-align: right; }
th { position: sticky; top: 0; background: var(--panel); border-bottom: 2px solid var(--c, var(--line)); }
th .x { cursor: pointer; color: var(--bad); margin-left: 4px; }
#mResult table { margin-top: 6px; width: auto; min-width: 0; }
#mResult th, #mResult td { white-space: nowrap; }
#mResult td:first-child { text-align: left; font-weight: 600; }
#mZone { margin: 2px 0 6px; }
.outgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; }
/* groupe de réglages : un filet et un titre, pas une boîte */
fieldset { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; padding: var(--s2) 0 var(--s3); min-width: 0; }
/* contrôles dans un tableau ou une barre secondaire : hauteur compacte */
td input:not([type=checkbox]):not([type=radio]):not([type=range]), td select, .vecbar select { height: var(--h-c); }
legend { font-weight: 700; padding: 0 6px 0 0; }
.icons .btn, .notes .btn { min-width: 2.6em; font-size: var(--fs-m); }
.boardgrid { display: grid; grid-template-columns: minmax(300px, 1.5fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.boardgrid h4 { margin: 4px 0 6px; }
body.esp32 .boardgrid, body.arduino .boardgrid, body.jeulin .boardgrid { grid-template-columns: 1fr; }
.devcard { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 0 14px; background: none; min-width: 0; }
.devcard h4 { margin-top: 14px; }
.devtitle { margin: 0 0 10px; font-size: 1.02rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.devtitle .ico { font-size: 1.1rem; }
.devtitle small { font-weight: 500; color: var(--muted); font-size: .82rem; }
.wlcard { border-top-color: var(--i2c); }
#rboard { display: grid; grid-template-columns: repeat(5, minmax(56px, 76px)); gap: 4px; }
.wlstat { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: var(--r);
  background: var(--chip); border: 1px solid var(--line); margin-bottom: 8px; }
.wlstat .dot { grid-row: 1 / 3; font-size: 1.6rem; line-height: 1; }
.wlstat b { font-size: 1rem; }
.wlstat .meta { color: var(--muted); font-size: .85rem; display: flex; gap: 14px; flex-wrap: wrap; }
.wlstat.ok { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.wlstat.ok .dot, .wlstat.ok b { color: var(--ok); }
.wlstat.warn { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.wlstat.warn .dot, .wlstat.warn b { color: var(--warn); }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; height: .9em; vertical-align: -1px; margin-right: 4px; }
.bars i { width: 4px; background: var(--line); border-radius: 1px; }
.bars i:nth-child(1) { height: 30%; } .bars i:nth-child(2) { height: 55%; } .bars i:nth-child(3) { height: 80%; } .bars i:nth-child(4) { height: 100%; }
.bars i.on { background: currentColor; }
#rdHow { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
#rdHow summary { cursor: pointer; }
#rdHow ol { margin: 6px 0; padding-left: 20px; font-size: .9rem; }
.group.wl { margin-top: 14px; padding-top: 2px; border-top: 1px dashed var(--line); }
.wlpill { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); font-weight: 600; padding: 1px 8px; border-radius: var(--r-pill); background: var(--chip); }
.wlpill.ok { color: var(--ok-ink); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.wlpill.warn { color: var(--warn-ink); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.boardgrid .chk, .boardgrid .fld { margin: 3px 12px 3px 0; }
#board { display: grid; grid-template-columns: repeat(11, minmax(40px, 1fr)); gap: 4px; }
.pin { border: 2px solid var(--line); border-radius: var(--r); padding: 4px 2px; text-align: center; font-size: .78rem; cursor: pointer; background: var(--panel); line-height: 1.15; }
.pin b { display: block; font-size: .95rem; }
.pin.st-on, .legend .st-on { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--panel)); }
.pin.st-i2c, .legend .st-i2c { border-color: var(--i2c); background: color-mix(in srgb, var(--i2c) 12%, var(--panel)); cursor: default; }
.pin.st-res, .legend .st-res { border-color: var(--line); background: var(--chip); color: var(--muted); cursor: default; }
.pin.st-out, .legend .st-out { border-color: var(--out); background: color-mix(in srgb, var(--out) 14%, var(--panel)); }
.pin.pwr { border-color: var(--bad); color: var(--bad); cursor: default; }
.legend { margin-top: 8px; font-size: .82rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--line); margin-right: -6px; }
.legend .st-free { background: var(--panel); }
.help { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: var(--fs-s); }
.help h4 { margin: 4px 0; }
.help p, .help ol { margin: 4px 0 10px; }

dialog { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); padding: 0;
  width: min(760px, 94vw); max-height: 90vh; box-shadow: var(--pop); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog form { padding: var(--s4) var(--s6); }
dialog h2 { margin: 0 0 4px; font-size: var(--fs-l); }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 10px 0; }
.gal button { border: 2px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 8px 4px; cursor: pointer; font-size: var(--fs-xs); }
.gal button span { display: block; font-size: 1.6rem; }
.gal button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.params { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.params .fld { color: var(--ink); }
.dlg-foot { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }
.live { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* toasts : 2 au plus, en bas à gauche du graphe (position posée par toast()) ; ils laissent passer les clics sauf s'ils ont un bouton */
#toasts { position: fixed; bottom: 18px; left: 16px; z-index: 50; display: flex; flex-direction: column;
  align-items: flex-start; gap: 6px; max-width: min(26em, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: var(--s2) var(--s4); border-radius: var(--r); font-weight: 600; font-size: var(--fs-s); opacity: .95; pointer-events: none;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--pop); }
.toast.act { pointer-events: auto; cursor: pointer; }
.toast.err { background: var(--bad); color: var(--on-fill); }
.toast button { background: none; border: 1px solid currentColor; color: inherit; border-radius: var(--r); padding: 2px 10px; font-weight: 700; cursor: pointer; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
dialog.ask { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); padding: var(--s4) var(--s4); max-width: min(460px, 92vw); }
dialog.ask::backdrop { background: rgba(0,0,0,.35); }
dialog.ask p { margin: 0 0 14px; font-size: 1rem; line-height: 1.4; }
.btn.danger.strong { background: var(--bad); color: var(--on-fill); border-color: var(--bad); }

/* grands afficheurs du mode projection : hauteur réglable (--bigH), le chiffre suit la hauteur et la largeur */
#bigvals { display: none; gap: 12px; padding: 4px 0 4px; height: var(--bigH, 150px); flex-shrink: 0; }
.big { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--panel); border: 0;
  border-radius: var(--r); padding: 6px 16px; container-type: size; overflow: hidden; }
.big .bhead::before { content: ""; flex: none; width: clamp(14px, 10cqh, 28px); height: clamp(3px, 2.2cqh, 6px); border-radius: 2px; background: var(--c); }
.big .bhead { display: flex; align-items: center; gap: 10px; min-height: 1.6em; }
.big .n { color: var(--muted); font-weight: 600; font-size: clamp(1rem, 9cqh, 2.4rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big .stab { font-weight: 700; font-size: clamp(.85rem, 6cqh, 1.6rem); white-space: nowrap; }
.big .stab.ok { color: var(--ok); }
.big .stab.move { color: var(--warn); }
.big .stab.held { color: var(--accent); }
/* réglages en superposition (visibles au survol) : invisibles, ils ne doivent pas tronquer le nom de la voie */
.big { position: relative; }
.big .bctl { position: absolute; top: 8px; right: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; pointer-events: none;
  background: var(--panel); padding: 3px; border-radius: var(--r); box-shadow: var(--pop); }
.big:hover .bctl, .big.held .bctl, .big:focus-within .bctl { opacity: 1; pointer-events: auto; }
.big .bctl button { font: inherit; font-size: .85rem; padding: 2px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); cursor: pointer; }
.big .v { flex: 1; display: flex; align-items: center; min-height: 0; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.03em;
  font-size: min(48cqh, 15cqw); white-space: nowrap; }
.big .v small { font-family: var(--font-ui); letter-spacing: 0; font-size: .38em; color: var(--muted); font-weight: 600; margin-left: .25em; }
.big .bfoot { display: flex; align-items: center; gap: 10px; height: 18cqh; min-height: 18px; }
.big .spark { flex: 1; height: 100%; min-width: 0; }
.big .mm { color: var(--muted); font-size: clamp(.8rem, 6cqh, 1.4rem); white-space: nowrap; font-variant-numeric: tabular-nums; }
.big.held { background: repeating-linear-gradient(135deg, var(--panel) 0 14px, color-mix(in srgb, var(--accent) 7%, var(--panel)) 14px 28px); }
#bigResize { display: none; height: 9px; margin: 0 0 4px; cursor: ns-resize; border-radius: 4px; flex-shrink: 0;
  background: linear-gradient(var(--line), var(--line)) center / 48px 3px no-repeat; }
#bigResize:hover, #bigResize.drag { background-color: color-mix(in srgb, var(--accent) 35%, transparent); }

/* mode projection (taille et contraste : voir :root.proj en tête de fichier) */
body.proj #side, body.proj #bottom, body.proj .chk { display: none; }
body.proj #runRen, body.proj #runDel { display: none; }      /* choix de l'essai et de l'abscisse gardés */
body.proj #bigvals, body.proj #bigResize { display: flex; }
body.proj #bigvals:empty, body.proj #bigvals:empty + #bigResize { display: none; }
body.proj #rescanBtn { display: none; }
body.proj #status:not(:has(button)) { max-width: 12em; }
body.proj #plotWrap { min-height: 120px; }
body.proj .acq .m-step .fld, body.proj .acq .m-burst .fld { display: inline-flex; }

/* visibilité des champs selon le mode */
body:not(.mode-time) .m-time > *, body:not(.mode-step) .m-step > *, body:not(.mode-burst) .m-burst > * { display: none !important; }
body.mode-step #trigBtn { display: none; }        /* pas de déclenchement sur seuil en pas à pas */
.m-usr, .m-ode, .m-tit { display: none; }
:is(.m-usr, .m-ode, .m-tit).show { display: inline-flex; }
.m-tit { flex-wrap: wrap; gap: var(--s2); align-items: center; }

@media (max-width: 900px) {
  body { overflow: auto; }
  main { flex-direction: column; }
  #side { width: auto; border-right: 0; max-height: 40vh; }
  #plotWrap { min-height: 300px; }
  #bottom { height: auto; min-height: 340px; }
  #bottomToggle { display: none; }
  .boardgrid, .help { grid-template-columns: 1fr; }
  #board { grid-template-columns: repeat(6, 1fr); }
  .top { padding: 8px 16px; }
}

/* spectre */
.specres { border: 0; border-bottom: 1px solid var(--line); background: none; border-radius: 0; padding: 8px 0; margin-bottom: 4px; color: var(--ink); font-size: var(--fs-s); }
.specres > b:first-child::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--c); vertical-align: middle; margin: -2px 7px 0 0; }
.specres table { margin-top: 6px; width: auto; min-width: 0; }
.specres .big1 { font-size: var(--fs-l); font-weight: 800; color: var(--accent); }
.warnx { color: var(--warn); font-weight: 600; }

/* incertitudes */
.modelgrid { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(260px, 1fr); gap: 14px; align-items: start; }   /* au moins la largeur du tableau des paramètres */
.statsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; }
.minicv { width: 100%; height: 170px; display: block; background: var(--plotbg); border: 0; border-radius: 0; margin-top: 6px; }
.minicv[hidden] { display: none; }
.mctab { width: 100%; min-width: 0; }
.mctab input, .mctab select { width: 100%; }
.mctab td { padding: 2px 4px; }
.pmv { font-weight: 700; font-variant-numeric: tabular-nums; }
.verdict { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-weight: 700; margin: 0; }
.verdict.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok-ink); }
.verdict.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.verdict.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink); }
@media (max-width: 1279px) { .modelgrid { grid-template-columns: 1fr; } }   /* résidus sous le tableau */
.mctab { table-layout: fixed; }
.mctab th:nth-child(1) { width: 22%; } .mctab th:nth-child(4) { width: 24%; } .mctab th:nth-child(5) { width: 42px; }
.mctab input, .mctab select { min-width: 0; padding: 3px 4px; }
.statsgrid { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.statsgrid fieldset { min-width: 0; }
fieldset.wide { grid-column: 1 / -1; }
.sy-mp { display: none; } .sy-mp.show { display: inline-flex; }
#syRuns table { width: auto; min-width: 0; }
#syRuns input { width: 6em; }
#mSliders .slider { display: grid; grid-template-columns: 3em 1fr 7em; gap: 8px; align-items: center; margin: 4px 0; }
#mSliders input[type=range] { width: 100%; }

/* ---- lot 4 : en-tête compact, panneaux ajustables ---- */
.top { gap: 10px; padding: 6px 12px; }
.acq { gap: 8px; }
.brand small { display: none; }
@media (min-width: 1360px) { .acq { flex-wrap: nowrap; } }
@media (max-width: 1900px) { .top .lbl, .graphbar .lbl { display: none; } }
body.noside #side { display: none; }
#bottomResize { height: 7px; margin: -4px 0 0; cursor: ns-resize; border-radius: 4px; }
#bottomResize:hover, #bottomResize.drag { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.ch[draggable=true] { cursor: grab; }
#plotWrap.dropping { outline: 3px dashed var(--accent); outline-offset: -6px; }
/* visite guidée */
#tourMask { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#tourHole { position: fixed; border-radius: var(--r); box-shadow: 0 0 0 9999px rgba(10, 14, 22, .55); transition: all .25s; z-index: 61; pointer-events: none; }
#tourBox { position: fixed; z-index: 62; background: var(--panel); color: var(--ink); border-radius: var(--r); padding: var(--s3) var(--s4); width: min(360px, 90vw);
  box-shadow: var(--pop); border: 1px solid var(--line); }
#tourBox p { margin: 6px 0 10px; }
#tourBox .row { justify-content: flex-end; margin: 0; }
#bottom.min { height: 42px !important; }
/* une ligne si tout tient ; sinon les réglages passent à la ligne (jamais de chevauchement avec les boutons de droite) */
/* dès 1280 px : en-tête sur une ligne (la pastille d'état se tronque, phrase complète au survol) */
@media (min-width: 1280px) { .top { flex-wrap: nowrap; } .acq { min-width: max-content; flex: 1 1 auto; } .tools { flex: none; } }
#recPill { max-width: 15em; overflow: hidden; text-overflow: ellipsis; }
.acq select:not(.autosize) { max-width: 11em; }
.acq > * { flex: none; }
/* ---- champs à la largeur de leur contenu (« concentration » entier) : field-sizing natif, sinon largeur posée en ligne
   par autosize() (app.js). Bornes par champ via --as-min / --as-max. :is(input, select) = même poids que input[type=number]. */
:is(input, select).autosize, #calcUnit, #gUnit, #bdName, #bdUnit, #srUnit, #syName, #syUnit, #syMP, #mFix, #mType, #mSeries,
input[data-i=m], input[data-i=g], input[data-k=name], input[name=unit] { min-width: var(--as-min, 4ch); max-width: var(--as-max, 18ch); }
@supports (field-sizing: content) {
  :is(input, select).autosize, #calcUnit, #gUnit, #bdName, #bdUnit, #srUnit, #syName, #syUnit, #syMP, #mFix, #mType, #mSeries,
  input[data-i=m], input[data-i=g], input[data-k=name], input[name=unit] { field-sizing: content; width: auto; }
}
#calcUnit, #gUnit, #bdUnit, #srUnit, input[name=unit] { --as-min: 6ch; --as-max: 12ch; }
#mFix { --as-min: 12ch; --as-max: 24ch; }
select.autosize, #mType, #mSeries { --as-min: 0px; }
#mSeries { --as-max: 16em; }
#mType { --as-max: 22em; }
input[type=number].autosize { --as-min: 5ch; --as-max: 10ch; }
#stepName { --as-max: 24ch; }
#stepUnit { --as-min: 3.5ch; --as-max: 10ch; }
#dur { --as-max: 9ch; }
#runSel { --as-max: 16em; }
#xSel { --as-max: 13em; }
#vidStep { --as-max: 16em; }
/* repli < 1280 px : en-tête sur 2 lignes nettes (1 : marque, état… outils à droite ; 2 : mode, réglages, Lancer à droite),
   barre de vue aussi (1 : vues + curseurs/tout voir ; 2 : essai, superposer, abscisse). Lancer et le mode jamais cachés. */
@media (max-width: 1279px) {
  .top { flex-wrap: wrap; row-gap: var(--s2); }
  .top > .tools { margin-left: auto; }
  .top > .acq { order: 10; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: var(--s2); }
  .graphbar { flex-wrap: wrap; row-gap: 0; }
  .graphbar::after { content: ""; order: 9; flex: 0 0 100%; height: var(--s2); }
  .graphbar > #runSel, .graphbar > #runRen, .graphbar > #runDel, .graphbar > .chk, .graphbar > label.fld { order: 10; }
  .graphbar > .grow { order: 5; }
  .graphbar > #curBtn, .graphbar > #zoomReset { order: 6; }
  #runSel { --as-max: 24em; }                 /* seul sur sa ligne : le nom de l'essai a la place */
}
/* même repli de la barre de vue quand c'est la ZONE DU GRAPHE qui manque de place (écran 1280-1440 px avec le panneau
   des voies, assistant ouvert) : avant, le choix de l'essai s'écrasait et ✏ / Supprimer / superposer se chevauchaient */
#center { container: center / inline-size; }
.graphbar > #runSel { min-width: 7em; }
.graphbar > .btn, .graphbar > .chk, .graphbar > .seg { flex: none; }
@container center (max-width: 1100px) {
  .graphbar { flex-wrap: wrap; row-gap: 0; }
  .graphbar::after { content: ""; order: 9; flex: 0 0 100%; height: var(--s2); }
  .graphbar > #runSel, .graphbar > #runRen, .graphbar > #runDel, .graphbar > .chk, .graphbar > label.fld { order: 10; }
  .graphbar > .grow { order: 5; }
  .graphbar > #curBtn, .graphbar > #zoomReset { order: 6; }
  #runSel { --as-max: 24em; }
}
.pill.rec { border: 0; cursor: pointer; background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
#notify { position: fixed; right: 16px; bottom: 16px; z-index: 55; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, 92vw); }
#notify .nt { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); box-shadow: var(--pop); }
#notify .nt .row { margin: 6px 0 0; justify-content: flex-end; }
.loglist td, .loglist th { text-align: left; }

/* incertitudes v2 */
.useg { margin-bottom: 8px; flex-wrap: wrap; }
.upanel { display: none; }
.upanel.on { display: block; }
.ugrid { display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(260px, 1fr); gap: 12px; align-items: start; }
.ugrid .minicv { margin-top: 0; }
.ugrid + .ugrid { margin-top: 6px; }
.fld.col { flex-direction: column; align-items: stretch; }
.fld.col textarea { width: 100%; font: var(--fs-s) var(--font-mono); color: var(--ink); padding: 6px; }
.uhelp { margin-top: 10px; background: var(--chip); border-radius: var(--r); padding: 6px 12px; font-size: var(--fs-s); }
.uhelp summary { cursor: pointer; font-weight: 700; }
.uhelp p { margin: 6px 0; }
.budtab { width: 100%; min-width: 0; table-layout: fixed; }
.budtab th:nth-child(1) { width: 24%; } .budtab th:nth-child(2) { width: 6%; } .budtab th:nth-child(3) { width: 22%; }
.budtab th:nth-child(10) { width: 34px; }
.budtab input, .budtab select { width: 100%; min-width: 0; padding: 2px 4px; }
.budtab td { padding: 2px 4px; }
.budtab th, .budtab td.hint[colspan] { text-align: left; }
/* encadrés de message : une recette (bordure gauche 3 px + fond teinté), 4 couleurs ; .warn seul reste un modificateur
   de pastille (.pill/.verdict/.wlpill/.wlstat) */
/* fond teinté seul (ni cadre, ni barre de bord) ; le mot clé du message porte la couleur via <b> */
.warnbox, .okbox, .badbox, .hintbox { border: 0; background: color-mix(in srgb, var(--c-box) 11%, var(--panel));
  padding: var(--s2) var(--s3); border-radius: var(--r); margin: var(--s2) 0; font-size: var(--fs-s); }
.warnbox b:first-child, .okbox b:first-child, .badbox b:first-child, .hintbox b:first-child { color: color-mix(in srgb, var(--c-box) 80%, var(--ink)); }
.warnbox { --c-box: var(--warn); }
.okbox { --c-box: var(--ok); }
.badbox { --c-box: var(--bad); }
.hintbox { --c-box: var(--accent); }
@media (max-width: 900px) { .ugrid { grid-template-columns: 1fr; } }
.uwiz { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.uwiz b { margin-right: 6px; }
.final { font-size: var(--fs-l); margin: 8px 0; }
.final .pmv { color: var(--accent); }
[hidden], .nouse { display: none !important; }

/* cartes : éléments propres au micro:bit / à l'ESP32 / à l'Arduino, sélecteur de carte */
body.esp32 .mb-only, body.arduino .mb-only { display: none !important; }
body:not(.esp32) .esp-only { display: none !important; }
body:not(.arduino) .ard-only, body.arduino .no-ard { display: none !important; }
body.jeulin .mb-only, body.jeulin .board-only { display: none !important; }   /* appareil Jeulin : ni broches, ni sorties, ni rafale */
body.jeulin.esao #mode option.board-only { display: revert !important; }
body.jeulin.esao #tabs [data-t="tab-out"] { display: revert !important; }     /* console ESAO : sorties S1 / S2 */
body.jeulin.pico #mode option.board-only { display: revert !important; }   /* PicoScope : rafale = oscilloscope */
body:not(.pico) .pico-only { display: none !important; }
body.jeulin.pico #tabs [data-t="tab-out"] { display: revert !important; }     /* PicoScope : générateur AWG */
body.pico #tab-out .pin-out { display: none; }
.esao-only { display: none; }
body.esao .esao-only { display: block; }
body.esao #tab-out .pin-out { display: none; }
/* carte en direct (carte_direct.js), sous la liste des voies */
#devLive.folded #devBoard { display: none; }
#devBoard { padding: var(--s1, 4px) var(--s2, 8px); }
#devBoard svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
#devBoard .slot, #devBoard .pad.click { cursor: pointer; }
#devBoard .pad.click:hover rect { stroke: var(--accent, #4aa3ff); stroke-width: 2; }
#devBoard .pulse rect { animation: dvPulse 1.3s ease-out 1; }
@keyframes dvPulse { 0% { filter: none; } 35% { filter: drop-shadow(0 0 5px #3ddc84) brightness(1.3); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { #devBoard .pulse rect { animation: none; } }
.dv-sum { font-size: var(--fs-xs, 12px); color: var(--muted); text-align: center; margin-top: var(--s1, 4px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-sum:not(.none) { color: var(--ink); }
#devBoard .slot:hover .slotbox { stroke: var(--accent, #4aa3ff); stroke-width: 3; }   /* console ESAO : rafale */
#boardSel button { padding: 4px 10px; }
#tableWrap tr.excl td:not(.rn) { color: var(--muted); text-decoration: line-through; }
/* tableur : n° de ligne (sélection, actions au survol), lignes sélectionnées, cellules corrigées */
.sheet th.rn, .sheet td.rn { position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: center; width: 4.2em; min-width: 4.2em;
  color: var(--muted); border-right: 1px solid var(--line); cursor: pointer; user-select: none; padding: 3px 4px; }
.sheet th.rn { z-index: 2; }
.sheet td.rn .ra { display: none; gap: 6px; justify-content: center; }
.sheet td.rn .ra b { cursor: pointer; font-weight: 700; padding: 0 2px; border-radius: 4px; }
.sheet td.rn .ra b[data-rd] { color: var(--bad); }
.sheet td.rn .ra b:hover { background: var(--chip); }
.sheet tr:hover td.rn .no { display: none; }
.sheet tr:hover td.rn .ra { display: inline-flex; }
.sheet tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.sheet tr.sel td, .sheet tr.sel td.rn { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.sheet tr.sel td.rn { color: var(--accent); font-weight: 700; }
.sheet td[data-c] { cursor: cell; }
.sheet td.ed { position: relative; }
.sheet td.ed::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--warn); }
.sheet input.cell { width: 7em; height: 1.45em; text-align: right; padding: 0 4px; font: inherit; border-color: var(--accent); }   /* même hauteur que la ligne */
/* tableur virtualisé : hauteur de ligne constante, lignes de remplissage invisibles */
.sheet tbody td { white-space: nowrap; }
.sheet tr.tvpad td { padding: 0; border: 0; background: none; }
.sheet tr.justadded td:not(.rn) { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.tsbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; margin-bottom: 6px; border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
#wlTop { cursor: pointer; }
.rmods { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rmod { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--chip); }
.rmod.ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }
/* infobulle unique (ux.js) et pictogrammes ⓘ */
#tipbox { position: fixed; z-index: 1000; max-width: min(360px, 90vw); padding: 7px 11px; border-radius: var(--r); pointer-events: none;
  background: var(--ink); color: var(--bg); font-size: var(--fs-s); line-height: 1.35; box-shadow: var(--pop); }
#tipbox kbd { background: var(--bg); color: var(--ink); border-color: transparent; margin-left: 4px; }
body.proj #tipbox { max-width: min(520px, 90vw); }
.tip { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; cursor: help; vertical-align: 1px;
  color: var(--accent); font-size: .95em; font-weight: 700; user-select: none; }
.tip:hover, .tip:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); outline: none; }
.tshelp { margin-left: auto; font-size: var(--fs-xs); }
kbd.kp { font-size: .7em; margin-left: 6px; padding: 0 4px; opacity: .7; }
/* QR code de la page téléphone : toujours noir sur blanc, pour être lu par l'appareil photo */
.phqr { background: #fff; border-radius: var(--r); width: min(16rem, 70vw); margin: var(--s2) auto; }
.phqr svg { display: block; width: 100%; height: auto; }
#phDlg { max-width: min(30rem, 94vw); }
#phUrl { overflow-wrap: anywhere; text-align: center; }
/* tableau d'avancement */
dialog.av { max-width: 94vw; }
dialog.av table.avt { width: auto; margin: var(--s3) 0 var(--s2); border-collapse: collapse; }
dialog.av .avt th, dialog.av .avt td { padding: var(--s1) var(--s3); text-align: center; white-space: nowrap; position: static; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
dialog.av .avt td:first-child, dialog.av .avt th:first-child { text-align: left; color: var(--muted); }
dialog.av .avt input[data-n] { width: 5.5em; text-align: center; }
dialog.av .avt input[type=range] { width: 9em; vertical-align: middle; }
dialog.av .av-arrow { color: var(--muted); margin-right: var(--s2); }
/* palette de commandes (Ctrl-K) */
dialog.pal { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); padding: var(--s2); width: min(34rem, 92vw); margin-top: 14vh; box-shadow: var(--pop); }
dialog.pal::backdrop { background: rgba(0,0,0,.25); }
dialog.pal input { width: 100%; box-sizing: border-box; height: var(--h); font: inherit; }
dialog.pal ul { list-style: none; margin: var(--s2) 0 0; padding: 0; }
dialog.pal li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s1) var(--s2); border-radius: var(--r); cursor: pointer; }
dialog.pal li.on, dialog.pal li[data-i]:hover { background: var(--hover); }
dialog.pal li small, dialog.pal li.none { color: var(--muted); font-size: var(--fs-s); white-space: nowrap; }
dialog.pal li.none { cursor: default; }
dialog.keys { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); padding: var(--s4); min-width: 300px; width: fit-content; }
dialog.keys::backdrop { background: rgba(0,0,0,.35); }
dialog.keys h3 { margin: 0 0 8px; font-size: var(--fs-l); }
dialog.keys table { width: 100%; margin-bottom: 10px; }
dialog.keys td { border: 0; padding: 4px 6px; text-align: left; }
dialog.keys td:first-child { white-space: nowrap; color: var(--muted); }
dialog.keys th { text-align: left; padding: 8px 6px 2px; border: 0; position: static; font-size: var(--fs-s); }
dialog.keys .keycols { display: grid; grid-template-columns: auto auto; gap: 0 28px; }
dialog.keys .keycols td { padding-block: 2px; }
dialog.keys .keycols table { width: auto; min-width: 0; }
@media (max-width: 760px) { dialog.keys .keycols { grid-template-columns: auto; } }
.empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r);
  color: var(--muted); font-size: var(--fs-s); }
.empty .eico { display: none; }   /* états vides : pas d'emoji décoratif */
details.adv { margin: 8px 0; }
details.adv > summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 3px 0; }
details.adv[open] > summary { margin-bottom: 4px; }

/* ---- pointage vidéo ---- */
#vidTools, #videoWrap, #vidNav { display: none; }
body.v-video #plotWrap, body.v-video #seriesChips, body.v-video #vecBar, body.v-video label.chk:has(#overlay),
body.v-video #xSel, body.v-video label.fld:has(#xSel), body.v-video #curBtn, body.v-video #zoomReset { display: none; }
body.v-video #vidTools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 6px; }
body.v-video #videoWrap { display: block; flex: 1; position: relative; min-height: 180px; background: #0b0d11; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; }
body.v-video #vidNav { display: flex; align-items: center; gap: 6px; padding: 6px 0 0; }
/* vue Vidéo < 1280 px : pas de bande vide pour la ligne d'acquisition (masquée) ; les outils de pointage gardent une
   ligne en perdant leurs libellés secondaires (icône + infobulle) */
@media (max-width: 1279px) {
  body.v-video .top > .acq { display: none; }
  #vidTools .vlbl { display: none; }
  body.v-video #vidTools { gap: var(--s2); }
}
/* vue Vidéo : l'en-tête d'acquisition garde sa place (pas de saut), la vidéo récupère la largeur du panneau des voies */
body.v-video .acq { visibility: hidden; }
body.v-video #side, body.v-video #sideBtn { display: none; }
#vidGo { min-width: 6.5em; }
#videoWrap video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#vidCv, #vidOv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#vidOv { cursor: crosshair; }
#vidOv.own:not(.pan) { cursor: none; }     /* croix dessinée par µLab, visible sur fond sombre */
#vidOv.pan { cursor: grab; }
#vidOv.ro:not(.pan) { cursor: default; }   /* fiche de séance : étape sans pointage, vidéo en lecture seule */
#videoWrap.dropping { outline: 3px dashed var(--accent); outline-offset: -6px; }
#vidEmpty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
#vidEmpty .empty { pointer-events: auto; background: var(--panel); }
#vidEmpty.off { display: none; }
#vidCamBar { position: absolute; left: 10px; top: 10px; display: flex; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 6px 10px; z-index: 3; }
#vidCamBar[hidden], #vidBusy[hidden] { display: none; }
#vidBusy { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 6px 14px; z-index: 3; font-weight: 600; box-shadow: var(--pop); }
#vSlider { flex: 1; min-width: 80px; accent-color: var(--accent); }
#vLbl { font-variant-numeric: tabular-nums; min-width: 17em; text-align: right; color: var(--muted); }
#vLbl b { color: var(--ink); }
#vidObjs { display: inline-flex; gap: 4px; align-items: center; }
#vidObjs button { height: var(--h-c); border: 2px solid var(--c); background: var(--panel); border-radius: var(--r); padding: 0 10px; cursor: pointer; font-weight: 700; color: var(--c); }
#vidObjs button.on { background: var(--c); color: var(--on-fill); }
#vidInfo { font-variant-numeric: tabular-nums; }
#vidInfo { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); text-align: right; }
fieldset.flash { outline: 3px solid var(--accent); outline-offset: 2px; transition: outline-color .3s; }
.chip.model .x { display: none; margin-left: 4px; font: inherit; font-weight: 700; background: none; border: 0; padding: 0 2px; color: inherit; opacity: .6; cursor: pointer; }
.chip.model:hover .x, .chip.model:focus-within .x { display: inline; }
.chip.model .x:hover { opacity: 1; color: var(--danger); }
.chip.model { cursor: context-menu; }
#trigBtn:not(.on) #trigLbl { font-weight: 500; color: var(--muted); }

/* ---- fenêtre 🧮 Grandeurs (façon Regressi) */
.gwiz { display: flex; flex-wrap: wrap; gap: 0 2px; align-items: center; margin-bottom: var(--s1); }
/* « Et maintenant ? » = bandeau plat teinté ; formulaire d'assistant = rangée plate, bouton principal à droite */
.gform, .gsug { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 var(--s2); border-radius: var(--r); }
.gsug { gap: 0 2px; padding: 2px var(--s1) 2px var(--s3); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.gsug > b:first-child { flex: none; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-right: var(--s2); }
.gform { gap: var(--s1) var(--s3); padding: var(--s2) var(--s3); background: var(--chip); }
.gform > b:first-child { font-size: var(--fs-m); margin-right: var(--s2); }
.gform .btn.primary { margin-left: auto; }
.gform[hidden], .gsug[hidden] { display: none; }
.gsug .x { margin-left: auto; cursor: pointer; color: var(--muted); padding: 0 var(--s2); font-weight: 400; }
/* éditeur | table, sans carte : séparés par un filet */
.ggrid { display: grid; grid-template-columns: minmax(420px, 6fr) minmax(320px, 5fr); gap: var(--s4); align-items: start; }
@media (max-width: 1250px) { .ggrid { grid-template-columns: 1fr; } .glist { padding-left: 0; border-left: 0; padding-top: var(--s2); border-top: 1px solid var(--line); } }
.gedit { min-width: 0; }
.gedit.editing #gDef { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }   /* mode édition */
.gedit .row { flex-wrap: wrap; }
.gedit .gline { flex-wrap: nowrap; gap: var(--s2); margin-bottom: 0; }
.gedit > .row:not(.gline) { gap: var(--s1) var(--s3); margin: 0; padding-top: var(--s2); border-top: 1px solid var(--line); }
.gin { position: relative; flex: 1; min-width: 180px; display: flex; }
.gin input { flex: 1; width: 100%; font: var(--fs-m) var(--font-mono); padding: 6px 8px; color: var(--ink); }
.gin input.bad { border-color: var(--bad); }
.gac { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 100%; max-width: 520px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); padding: 3px; }
.gac div { padding: 3px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gac div small { color: var(--muted); }
.gac div.on, .gac div:hover { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.gprev { min-height: 2.6em; margin: var(--s1) 0 var(--s2); padding: 0 2px; color: var(--ink); font-size: var(--fs-s); line-height: 1.5; }
.gprev code, .gtab code, .gsug code { font-family: var(--font-mono); }
.gsrc { padding: 1px 4px; border-radius: 4px; background: var(--panel); white-space: pre; }
.gsrc mark { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); text-decoration: underline wavy var(--bad); border-radius: 2px; }
.gerrmsg { color: var(--bad); font-weight: 600; }
.gok { color: var(--ok); font-weight: 700; }
.gwarn { color: var(--warn); font-weight: 600; }
.gbad { color: var(--bad); font-weight: 700; font-size: var(--fs-xs); padding: 0 5px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.gfuncs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.gfuncs[hidden] { display: none; }
.gfuncs .hint { flex-basis: 100%; margin: 4px 0 0; }
.gfn { font: var(--fs-xs) var(--font-mono); background: var(--chip); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 2px 7px; cursor: pointer; }
.gfn:hover { border-color: var(--accent); }
.gfn b { color: var(--accent); }
.glist { min-width: 0; overflow-x: auto; padding-left: var(--s4); border-left: 1px solid var(--line); }
.gtab { border-collapse: collapse; width: 100%; min-width: 0; font-size: var(--fs-s); }
.gtab th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 3px 8px; border-bottom: 1px solid var(--line); }
.gtab td { text-align: left; padding: 3px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); vertical-align: middle; }
.gtab tr.gsec td { padding-top: 8px; font-weight: 700; font-size: var(--fs-xs); color: var(--muted); border-bottom: 1px solid var(--line); }
.gtab tr.gsec small { font-weight: 500; }
.gtab .gsw { display: inline-block; width: 4px; height: 1.05em; border-radius: 2px; background: var(--c); margin-right: 7px; vertical-align: -2px; }
.gtab .gnm { cursor: pointer; }
.gtab .gnm:hover { text-decoration: underline dotted; }
.gtab .gexpr { cursor: pointer; max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtab .gexpr code { color: var(--accent); }
.gtab tr.gcalc:hover td { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.gtab tr.on td { background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.gtab tr.bad td:first-child b { color: var(--bad); }
.gtab .gact { white-space: nowrap; text-align: right; width: 3.5em; }
.gtab .gact button { font: inherit; cursor: pointer; padding: 0 4px; border: 0; border-radius: 4px; background: none; color: inherit; opacity: 0; }
.gtab .gact button.rm { color: var(--bad); }
.gtab tr:hover .gact button, .gtab .gact button:focus-visible { opacity: 1; }
.gtab .gact button:hover { background: var(--chip); }
/* écran tactile : les actions « au survol » restent visibles */
@media (hover: none) and (pointer: coarse) {
  .chip.model .x { display: inline; opacity: .8; }
  .big .bctl { opacity: 1; pointer-events: auto; }
  .gtab .gact button { opacity: 1; min-width: 32px; min-height: 32px; }
}
@media (hover: none) { .gtab .gact button { opacity: 1; } }
.sheet th.calc { cursor: help; }
.sheet th.calc::after { content: "ƒ"; margin-left: 4px; font-style: italic; color: var(--muted); font-weight: 400; }
.chiprow { display: flex; align-items: flex-start; gap: 8px; }
.chiprow #seriesChips { flex: 1; min-width: 0; }
#stepNote { flex: none; align-self: center; padding-bottom: 6px; font-variant-numeric: tabular-nums; }
#stepNote[hidden] { display: none; }
.vecbar { flex: none; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 8px; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font-size: var(--fs-s); }
.vecbar[hidden] { display: none; }
.vecbar .vopts { display: inline-flex; align-items: center; gap: 8px; }
.vecbar .vopts[hidden] { display: none; }
.vecbar input[type=range] { width: 60px; padding: 0; }
.vecbar .chk { gap: 3px; }
.vecbar select { padding: 0 3px; font-size: var(--fs-xs); }
.chip.more { text-decoration: none; opacity: .8; border-style: dashed; cursor: pointer; font-size: .85em; }
.chip.more:hover { opacity: 1; }
.chip.more.open { background: var(--chip); color: var(--ink); opacity: 1; border-style: solid; border-color: var(--line); }
/* « + N masquées » ouvre un menu compact sous la rangée */
#seriesChips { position: relative; }
.pd-chipmenu { position: absolute; z-index: 40; top: 100%; left: 0; display: flex; flex-direction: column; align-items: stretch; min-width: 14em;
  max-height: min(50vh, 22em); overflow: auto; padding: var(--s1); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); }
.pd-chipmenu .chip.off:not(.more) { justify-content: flex-start; border: 0; border-radius: var(--r); padding: 4px var(--s2); text-decoration: none; color: var(--ink); background: transparent; }
.pd-chipmenu .chip.off:not(.more) i { opacity: 1; }
.pd-chipmenu .chip.off:not(.more)::after { content: "afficher"; margin-left: auto; padding-left: var(--s3); font-size: var(--fs-xs); color: var(--muted); opacity: 0; }
.pd-chipmenu .chip.off:not(.more):is(:hover, :focus-visible)::after { opacity: 1; }   /* l'action, sur la ligne survolée seulement */
.pd-chipmenu .chip:hover { background: var(--chip); }
.pd-chipmenu .chip.more[data-all] { margin-top: 2px; padding: 4px var(--s2); border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--accent); font-size: var(--fs-s); opacity: 1; }
.gconv { margin-left: 4px; }
body.proj .vecbar .chk { display: inline-flex; }
body.proj .vecbar { font-size: var(--fs-s); }

/* ---- onglets d'analyse (Grandeurs, Modélisation, Outils, Incertitudes) : une action principale, options repliées, peu de cadres */
.pd-lab { flex: none; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: var(--s1); }
/* bouton discret : texte d'accent, sans cadre, fond au survol (actions secondaires) */
:is(.btn.pd-q, .gwiz .btn, .gsug .btn, #gForm [data-f="x"], .uwiz .btn, #gFuncs, #gCancel, #dsClear, #axAuto, #tab-tools [id^="tg"].small, #stActs .btn, [id$="ToBud"], #mcAdd) {
  background: transparent; border-color: transparent; color: var(--accent); font-weight: 600; }
:is(.btn.pd-q, .gwiz .btn, .gsug .btn, #gForm [data-f="x"], .uwiz .btn, #gFuncs, #gCancel, #dsClear, #axAuto, #tab-tools [id^="tg"].small, #stActs .btn, [id$="ToBud"], #mcAdd):hover {
  background: var(--chip); border-color: transparent; }
/* états vides : pas d'emoji décoratif, pas de cadre pointillé (l'onglet suffit) */
:is(#tab-calc, #tab-model, #tab-tools, #tab-stats) .empty { border: 0; padding: var(--s2) 0; }

/* ---- Modélisation : Courbe · Modèle · [Modéliser] · À la main · Effacer · Options ▸ (repliées) */
#tab-model > .row:first-child { gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
#tab-model #mRun { margin-left: var(--s2); }
.pd-adv { margin-left: auto; font-size: var(--fs-s); }
.pd-adv > summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; padding: 2px var(--s2); border-radius: var(--r); white-space: nowrap; }
.pd-adv > summary::-webkit-details-marker { display: none; }
.pd-adv > summary::before { content: "▸ "; }
.pd-adv[open] > summary::before { content: "▾ "; }
.pd-adv > summary:hover { background: var(--chip); }
.pd-adv > summary .hint { font-weight: 400; }
.pd-adv[open] { flex-basis: 100%; margin-left: 0; }
.pd-advbody { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: var(--s2) 0 0 var(--s3); }
#tab-model .modelgrid { gap: var(--s4); }
#tab-model #mResult > p:first-child, #tab-model #mResult h3 { margin-top: 0; }

/* ---- Outils : sections sans cadre, titre en petites capitales, séparées par l'espace et un filet */
#tab-tools .statsgrid { gap: var(--s3) var(--s6); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
#tab-tools fieldset { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: var(--s2) 0 0; min-width: 0; }
#tab-tools legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#tab-tools legend + * { clear: both; }
#tab-tools fieldset .row { gap: var(--s2); margin-bottom: var(--s2); }
#tab-tools #tgResult:not(:empty), #tab-tools #dsResult { font-size: var(--fs-s); }

/* ---- Incertitudes : l'assistant (1re visite) remplace la navigation ; ensuite segments seuls */
#uWiz:not([hidden]) { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: var(--s3); }
#uWiz:not([hidden]) > b { font-size: var(--fs-m); margin: 0 0 var(--s1); }
#uWiz:not([hidden]) ~ .useg, #uWiz:not([hidden]) ~ .upanel { display: none; }
#tab-stats .useg { margin-bottom: var(--s3); }
#tab-stats .upanel > .row { gap: var(--s2) var(--s3); }
#tab-stats .ugrid { gap: var(--s4); }
#tab-stats .uhelp { margin-top: var(--s3); padding: 0; background: none; border-radius: 0; }
#tab-stats .uhelp summary { color: var(--accent); font-weight: 600; font-size: var(--fs-s); }
#tab-stats .uhelp[open] { padding-left: var(--s3); border-left: 1px solid var(--line); }
#tab-stats .uhelp[open] summary { margin-left: calc(-1 * var(--s3)); }

/* === Assistant === (assist.js) : panneau latéral droit ; le graphe se rétrécit (≥ 900 px), surimpression en dessous */
#assist { --asW: 380px; position: relative; flex: none; width: var(--asW); min-width: 0; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line); font-size: var(--fs-s); }
#asResize { position: absolute; left: -4px; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; }
#asResize:hover, #asResize.drag { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.as-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); flex: none; }
.as-head h2 { margin: 0; font-size: var(--fs-s); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.as-head .seg { height: var(--h-c); }
.as-head .seg button { padding: 0 var(--s2); }
.as-head .btn.small { min-width: var(--h-c); }
#asMenu { min-width: 240px; }
#asMenu .as-mh { padding: 6px 10px 2px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#asLog { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); outline: none; }
.as-q { align-self: flex-end; max-width: 88%; padding: var(--s2) var(--s3); background: var(--chip); border-radius: var(--r);
  font-size: var(--fs-m); overflow-wrap: anywhere; }
.as-a { font-size: var(--fs-m); line-height: 1.45; overflow-wrap: anywhere; }
.as-a p { margin: 0 0 var(--s2); }
.as-a ul, .as-a ol { margin: 0 0 var(--s2); padding-left: 1.4em; }
.as-a li + li { margin-top: 2px; }
.as-a code, .as-q code { font-size: .875em; background: var(--chip); padding: 0 4px; border-radius: 3px; }
.as-math { white-space: nowrap; }
.as-err > p { color: var(--bad); font-weight: 600; }
.as-err .btn { margin-bottom: var(--s2); }
.as-stop > p { color: var(--muted); font-style: italic; }
/* trace : une ligne repliée « 3 actions · détail » sous la réponse */
.as-trace { font-size: var(--fs-xs); color: var(--muted); }
.as-trace summary { cursor: pointer; width: fit-content; padding: 1px var(--s1); margin-left: calc(-1 * var(--s1)); border-radius: var(--r); }
.as-trace summary:hover { background: var(--hover); color: var(--ink); }
.as-trace ol { list-style: none; margin: var(--s1) 0 0; padding: 0 0 0 var(--s2); border-left: 1px solid var(--line); }
.as-trace li { display: grid; grid-template-columns: 1.2em 1fr auto; gap: var(--s1); padding: 2px 0; }
.as-trace .ok .as-tk { color: var(--ok-ink); font-weight: 700; }
.as-trace .ko .as-tk { color: var(--bad); font-weight: 700; }
.as-trace .as-td { font-family: var(--font-mono); }
.as-trace .as-te { display: block; color: var(--bad); }
/* accueil : consigne + suggestions contextuelles */
.as-empty p { margin: 0 0 var(--s3); color: var(--muted); }
.as-sugg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.as-sugg .btn { white-space: normal; text-align: left; height: auto; min-height: var(--h-c); padding-block: 3px; line-height: 1.3; }
/* carte de confirmation (action risquée) */
.as-confirm { border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--panel));
  border-radius: var(--r); padding: var(--s2) var(--s3); }
.as-confirm p { margin: 0 0 var(--s2); }
.as-cbtns { display: flex; gap: var(--s2); }
.as-confirm.done { border-color: var(--line); background: none; }
/* attente d'une manipulation de l'élève */
.as-wait { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  border-radius: var(--r); padding: var(--s2) var(--s3); }
.as-wait p { margin: 0 0 var(--s2); display: flex; align-items: center; gap: var(--s2); }
.as-wait .as-winfo { font-family: var(--font-mono); font-size: var(--fs-xs); }
.as-wait.done { border-color: var(--line); background: none; }
.as-wait.done .as-spin { animation: none; border-color: var(--line); }
.as-wait.ok { border-color: color-mix(in srgb, var(--ok, #16a34a) 50%, var(--line)); }
.as-spin { flex: none; width: .9em; height: .9em; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: asSpin 1s linear infinite; }
@keyframes asSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .as-spin { animation: none; border-top-color: var(--line); } }
/* question / réponse gardées dans le fil */
.as-qa { font-size: var(--fs-s); border-left: 2px solid var(--accent); padding-left: var(--s2); }
.as-qa p { margin: 0; }
.as-qaq { color: var(--muted); }
.as-qar { font-weight: 600; }
/* plan de la tâche */
#asPlan { flex: none; padding: var(--s1) var(--s3); border-bottom: 1px solid var(--line); font-size: var(--fs-s); max-height: 34vh; overflow: auto; }
#asPlan summary { cursor: pointer; font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#asPlan ol { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: 2px; }
#asPlan li { display: flex; gap: var(--s2); align-items: baseline; }
#asPlan li > span:first-child { width: 1em; flex: none; text-align: center; color: var(--muted); }
#asPlan .pl-doing { font-weight: 600; }
#asPlan .pl-doing > span:first-child { color: var(--accent); }
#asPlan .pl-done { color: var(--muted); }
#asPlan .pl-done > span:first-child { color: var(--ok-ink, var(--ok, #16a34a)); }
#asPlan .pl-done > span:nth-child(2), #asPlan .pl-skip > span:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--line-field); }
#asPlan .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* question à choix (QCM) par-dessus µLab */
dialog.as-qdlg { width: min(560px, 94vw); }
.as-qhead { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.as-qchip { background: var(--accent); color: var(--on-fill, #fff); border-radius: var(--r-pill, 999px); padding: 1px var(--s2); font-size: var(--fs-xs); font-weight: 600; }
.as-qhead .hint { font-size: var(--fs-xs); }
#asQText { font-size: var(--fs-m); font-weight: 600; margin: 0 0 var(--s3); }
.as-qlist { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.as-qopt { display: flex; gap: var(--s3); align-items: flex-start; text-align: left; width: 100%; padding: var(--s2) var(--s3); border: 1px solid var(--line-field);
  border-radius: var(--r); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.as-qopt:hover, .as-qopt:focus-visible { border-color: var(--accent); background: var(--hover); }
.as-qopt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.as-qopt kbd { flex: none; min-width: 1.5em; text-align: center; }
.as-qopt span { display: grid; gap: 2px; }
.as-qopt small { color: var(--muted); font-size: var(--fs-xs); }
.as-qother { display: grid; gap: var(--s1); font-size: var(--fs-s); color: var(--muted); margin-bottom: var(--s2); }
.as-qother input { width: 100%; }
/* état « réfléchit… / agit : … » */
#asStatus { flex: none; display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); color: var(--muted); font-size: var(--fs-s);
  border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-dots { display: inline-flex; gap: 3px; flex: none; }
.as-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: asDot 1.2s ease-in-out infinite; }
.as-dots i:nth-child(2) { animation-delay: .2s; } .as-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes asDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* saisie */
#asForm { flex: none; display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s2); align-items: end; padding: var(--s2) var(--s3) var(--s3);
  border-top: 1px solid var(--line); }
#asIn { resize: none; width: 100%; min-height: 2.75rem; max-height: 10rem; padding: 6px var(--s2); font-family: var(--font-ui); font-size: var(--fs-m); line-height: 1.35; }
#asSend { min-width: 6.5em; }
#asSend.as-stopbtn { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.as-foot { grid-column: 1 / -1; font-size: var(--fs-xs); }
/* mise en évidence d'un contrôle : anneau pulsé 1,5 s + bulle (qui reste en mode Guider) */
.as-ring { position: fixed; z-index: 70; pointer-events: none; border: 2px solid var(--accent); border-radius: var(--r);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); animation: asPulse .5s ease-in-out 3 alternate; }
@keyframes asPulse { from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } to { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent); } }
.as-bubble { position: fixed; z-index: 71; max-width: min(300px, 90vw); display: flex; align-items: flex-start; gap: var(--s2);
  padding: 6px var(--s3); background: var(--accent); color: var(--accent-ink); border-radius: var(--r); box-shadow: var(--pop);
  font-size: var(--fs-s); font-weight: 600; line-height: 1.35; pointer-events: none; }
.as-bubble::before { content: ""; position: absolute; left: var(--ax, 50%); top: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); }
.as-bubble.above::before { top: auto; bottom: -5px; }
.as-bubble span { position: relative; }
.as-bubble button { position: relative; pointer-events: auto; flex: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 0 2px; font-weight: 700; line-height: 1.35; }
.as-bubble button:hover { opacity: .75; }
/* bouton d'en-tête ouvert */
#assistBtn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* graphe rétréci par le panneau : la barre de vue passe sur 2 lignes plutôt que de déborder */
@media (max-width: 1700px) { body.assist-open .graphbar { flex-wrap: wrap; row-gap: var(--s1); } }
@media (min-width: 900px) and (max-width: 1279px) { body.assist-open #side { width: 230px; } }   /* écran étroit : le graphe d'abord */
@media (max-width: 899px) {
  #assist { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(var(--asW), 100vw); box-shadow: var(--pop); }
  #asResize { display: none; }
}
/* consignes du professeur : bandeau en tête du panneau */
#asCons { flex: none; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s1) var(--s3); font-size: var(--fs-xs);
  color: var(--muted); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); border-bottom: 1px solid var(--line); }
#asCons b { color: var(--ink); font-weight: 600; }
.as-lock { padding: 0 var(--s1); border: 1px solid var(--line-field); border-radius: var(--r); font-weight: 600; color: var(--ink); }
.as-head .seg button:disabled { opacity: .45; cursor: not-allowed; }
/* réponse en cours d'écriture */
.as-caret { display: inline-block; width: .45em; height: 1em; margin-left: 1px; vertical-align: -.12em; background: var(--accent); animation: asCaret 1s steps(2) infinite; }
@keyframes asCaret { 50% { opacity: 0; } }
.as-live > p:last-of-type { display: inline; }
/* note écrite par l'assistant entre deux actions (dans la trace) */
.as-trace li.note .as-tl { font-style: italic; }
/* mentions et messages d'information (commandes) */
.as-mention { font-weight: 600; color: var(--accent); }
.as-info { font-size: var(--fs-s); color: var(--muted); border-left: 2px solid var(--line-field); padding-left: var(--s2); overflow-wrap: anywhere; }
.as-info p { margin: 0 0 var(--s1); }
.as-info pre { margin: 0; white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink); }
/* suggestions « / » et « @ » au-dessus de la saisie */
#asForm { position: relative; }
#asPop { position: absolute; left: var(--s3); right: var(--s3); bottom: calc(100% - var(--s1)); z-index: 5; max-height: 280px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); padding: var(--s1) 0; }
.as-po { display: flex; align-items: baseline; gap: var(--s2); padding: 4px var(--s3); cursor: pointer; font-size: var(--fs-s); }
.as-po b { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.as-po span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.as-po.on, .as-po:hover { background: var(--hover); }
.as-po.on b { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .as-ring, .as-dots i, .as-caret { animation: none; } }

/* ---------------------------------------------------------------- fiches de séance (fiche.js)
   masqué = inutile pour ce TP ; grisé = sert à une autre étape : bien visible comme « pas maintenant »,
   pas seulement pâli (contraste franc, cadenas, curseur interdit) */
.fz-off { display: none !important; }
.fz-lock { opacity: .38; filter: grayscale(1); cursor: not-allowed !important;
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease); }
/* changement d'étape : ce qui s'ouvre apparaît en fondu (fiche.js pose la classe puis l'enlève) ; ce qui se ferme, tout de suite */
.fz-in { animation: uiFade var(--dur) var(--ease); }
.fz-unlock { animation: fzUnlock var(--dur) var(--ease); }
@keyframes fzUnlock { from { opacity: .38; filter: grayscale(1); } }
.fz-lock * { pointer-events: none; }
:is(#tabs, #viewSeg, #vidToolSeg, #gWiz, #uSeg) > .fz-lock::after { content: " 🔒"; font-size: .8em; }   /* pas de :has (Firefox ESR 115) */
.fz-pill { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); white-space: nowrap; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; }
/* bandeau d'étapes : en haut de la zone centrale ; étapes faites = ✓ (cliquables pour y revenir) */
.fz-band { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "st cd" "tx tx"; gap: var(--s1) var(--s3); align-items: center;
  margin: 0 0 var(--s2); padding: var(--s2) var(--s3); background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-left: 4px solid var(--accent); border-radius: var(--r); }
.fz-steps { grid-area: st; display: flex; flex-wrap: wrap; gap: var(--s1); }
.fz-step { font: 600 var(--fs-xs) var(--font-ui); padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--chip); color: var(--muted); white-space: nowrap; cursor: default; }
.fz-step.done { background: color-mix(in srgb, var(--ok) 16%, var(--panel)); color: var(--ok-ink); }
.fz-step.done::before { content: "✓ "; }
.fz-step.seen { border-color: var(--line-field); color: var(--ink); }
.fz-step.on { background: var(--accent); color: var(--accent-ink); }
.fz-step:not(:disabled):not(.on) { cursor: pointer; }
.fz-step:not(:disabled):not(.on):hover { border-color: var(--accent); }
.fz-cond { grid-area: cd; display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-s); color: var(--muted); white-space: nowrap; }
.fz-cond .ok { color: var(--ok-ink); font-weight: 600; }
.fz-cond [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.fz-last { font-weight: 600; color: var(--ink); }
.fz-cons { grid-area: tx; margin: 0; font-size: var(--fs-s); line-height: 1.4; }
.fz-cons b { color: var(--accent); }
.fz-new::after { content: "nouveau"; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); background: var(--ok); color: var(--on-fill);
  font-size: .68rem; font-weight: 700; vertical-align: 1px; }
.fz-pill { cursor: pointer; font-family: inherit; font-size: var(--fs-s); }
.fz-pill.off { background: transparent; color: var(--muted); border-style: dashed; }
.fz-codebtn { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.fz-codebtn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fz-tpc { font-family: var(--font-mono); font-size: .75rem; color: var(--accent); }
.fz-tpban { display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; color: var(--accent); }
.fz-tpbig { font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: .15em; }
/* fenêtre « Fiches de séance » (ui_fiches.js) */
dialog.fz-dlg { width: min(1180px, 96vw); max-height: 92vh; }
dialog.fz-dlg form { display: flex; flex-direction: column; max-height: 92vh; box-sizing: border-box; }
.fz-dgrid { display: grid; grid-template-columns: 320px 1fr; gap: var(--s4); min-height: 0; flex: 1; margin-top: var(--s3); }
.fz-libcol { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); padding-right: var(--s3); }
.fz-libhead { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s2); font-size: var(--fs-s); }
.fz-lib { overflow: auto; max-height: 60vh; font-size: var(--fs-s); }
.fz-niv > summary { font-weight: 700; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: var(--s2) 0 var(--s1); cursor: pointer; }
.fz-th { color: var(--muted); font-size: var(--fs-xs); margin: var(--s2) 0 0 var(--s2); }
.fz-ch { margin: 2px 0 0 var(--s3); font-weight: 600; }
.fz-li { display: flex; gap: var(--s2); align-items: baseline; width: calc(100% - 28px); margin-left: 28px; text-align: left; border: 0; background: none;
  color: var(--ink); font: inherit; padding: 3px var(--s2); border-radius: var(--r); cursor: pointer; }
.fz-li:hover { background: var(--hover); }
.fz-li.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
.fz-li small { margin-left: auto; color: var(--muted); font-weight: 400; }
.fz-li.act { color: var(--ok-ink); }
.fz-li.act::after { content: "● active"; font-size: .7rem; font-weight: 700; margin-left: var(--s1); }
.fz-empty { margin-left: 28px; color: var(--muted); font-size: var(--fs-xs); font-style: italic; }
.fz-bin { margin-left: 28px; font-size: var(--fs-xs); color: var(--muted); }
.fz-binrow { display: flex; gap: var(--s2); align-items: center; justify-content: space-between; padding: 2px 0; }
.fz-detail { overflow: auto; max-height: 64vh; font-size: var(--fs-s); }
.fz-detail h3 { margin: 0 0 var(--s2); }
.fz-detail .fld { display: flex; gap: var(--s2); align-items: center; margin: var(--s1) 0; }
.fz-detail .fld input { flex: 1; }
.fz-meta { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); }
.fz-actbanner { margin: 0 0 var(--s2); color: var(--ok-ink); font-weight: 700; }
/* téléphone : bandeau sur une colonne (étapes en ligne qui passent à la ligne, condition puis consigne), rien ne déborde */
@media (max-width: 600px) {
  .fz-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "st" "cd" "tx"; padding: var(--s2); }
  .fz-cond { white-space: normal; flex-wrap: wrap; justify-content: space-between; }
  .fz-cons { overflow-wrap: anywhere; }
  .fz-step:not(.on) { padding: 2px 7px; }
  .fz-step:not(.on):not(:hover) .fz-sl { display: none; }
}
.fz-steps-t { width: 100%; border-collapse: collapse; margin: var(--s2) 0; }
.fz-steps-t th, .fz-steps-t td { text-align: left !important; }
.fz-steps-t th { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 4px 6px; }
.fz-steps-t td { border-bottom: 1px solid var(--line); padding: 6px; vertical-align: top; }
.fz-steps-t small { color: var(--muted); }
.fz-opts { display: flex; gap: var(--s4); flex-wrap: wrap; margin: var(--s2) 0; }
.fz-cons-l { display: block; margin-top: var(--s2); font-weight: 600; }
.fz-cons-l textarea, .fz-json textarea { display: block; width: 100%; box-sizing: border-box; margin-top: var(--s1); font: var(--fs-s) var(--font-ui); }
.fz-json textarea { font-family: var(--font-mono); font-size: var(--fs-xs); }
.fz-json { margin-top: var(--s3); }
.fz-json > summary { cursor: pointer; color: var(--muted); }
.fz-detfoot { margin-top: var(--s3); }
.fz-code { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-s); }
.fz-code[hidden] { display: none; }
#fzMsg { min-height: 1.2em; margin: var(--s2) 0 0; }
#fzMsg.bad { color: var(--bad); }
@media (max-width: 760px) { .fz-dgrid { grid-template-columns: 1fr; } .fz-libcol { border-right: 0; padding-right: 0; } }

.as-confirm.offer { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }

/* ---------------------------------------------------------------- mouvement (jetons --ease / --dur)
   apparitions seulement, par @keyframes : l'animation part d'elle-même quand l'élément quitte display:none
   (pas de transition sur display, pas de @starting-style : Firefox ESR 115) ; les disparitions restent immédiates */
@keyframes uiFade { from { opacity: 0; } }
@keyframes uiPop { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes uiRise { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes uiSlide { from { opacity: 0; transform: translateY(8px); } }
.menu-pop.open, .pd-chipmenu { animation: uiPop var(--dur) var(--ease); transform-origin: top left; }
#asPop:not([hidden]) { animation: uiRise var(--dur-s) var(--ease); }       /* s'ouvre au-dessus de la saisie */
#tipbox:not([hidden]) { animation: uiFade var(--dur-s) var(--ease); }
dialog[open] { animation: uiRise var(--dur) var(--ease); }
dialog[open]::backdrop { animation: uiFade var(--dur) var(--ease); }
.toast { animation: toastIn var(--dur) var(--ease); }
/* sortie du zoom, visible tant qu'on est zoomé (en haut au centre du graphe, zone libre des titres d'axes) */
#zoomBar { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: var(--s1); z-index: 3;
  padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--r) + 3px); box-shadow: var(--pop);
  animation: uiPop var(--dur) var(--ease); }
#zoomBar[hidden] { display: none; }
#scopeBar, #pscopeBar { position: absolute; top: 4px; right: 8px; max-width: calc(100% - 16px); flex-wrap: wrap; justify-content: flex-end; display: flex; align-items: center; gap: var(--s2); z-index: 3;
  padding: 3px var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--r) + 3px); box-shadow: var(--pop);
  font-size: var(--fs-s); white-space: nowrap; }
#scopeBar[hidden], #pscopeBar[hidden] { display: none; }
#scopeBar select, #pscopeBar select { height: var(--h-c); }
#scopeBar .btn.on, #pscopeBar .btn.on { background: var(--accent); color: var(--on-fill); }
#scopeTrig { color: var(--muted); }
#scopeBar .seg { height: var(--h-c); }
#scopeBar .seg button { padding: 0 var(--s2); }
#scopeBar .sc-spec, #scopeBar.spec .sc-sig { display: none; }
#scopeBar.spec .sc-spec { display: inline-flex; align-items: center; gap: 4px; }
#scopeBar label.sc-sig, #pscopeBar label { display: inline-flex; align-items: center; gap: 4px; }
.pk-line { margin: var(--s2) 0; display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
body.proj #scopeTrig { display: none; }
#zoomBar .btn svg { width: 1em; height: 1em; vertical-align: -.125em; }
.toast.out { animation: uiFade var(--dur) var(--ease) reverse forwards; pointer-events: none; }
.tab.on { animation: uiSlide var(--dur) var(--ease); }                    /* contenu de l'onglet du bas */
body:not(.noside) #side, #assist:not([hidden]) { animation: uiFade var(--dur) var(--ease); }   /* contenu seulement : la largeur
   change d'un coup, sinon le graphe se redimensionnerait à chaque image */
/* survols : la couleur glisse au lieu de clignoter */
.btn, .seg button, .tabs button, .menu-pop button, .chip, .as-po, .fz-step {
  transition: background-color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; --dur-s: 0s; }
  .menu-pop.open, .pd-chipmenu, #asPop, #tipbox, dialog, dialog::backdrop, .toast, .tab.on, #side, #assist, .fz-in, .fz-unlock, #zoomBar { animation: none; }
  .toast.out { display: none; }
}

/* ---- atelier image façon SalsaJ (vue 🔭 SalsaJ : ui_salsa.js) ----
   L'atelier remplace graphe, panneau des voies, panneau du bas et réglages d'acquisition ; la barre des vues reste. */
:root { --sa-bg: #c9d0da; --sa-sel: #f59e0b; --sa-max: #e11d48; --sa-min: #0ea5e9; --sa-fit: #16a34a; }
:root[data-theme="dark"] { --sa-bg: #07090d; --sa-fit: #4ade80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sa-bg: #07090d; --sa-fit: #4ade80; } }
#salsa { display: none; }
body.v-salsa #salsa { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--s2); padding-bottom: var(--s2); }
body.v-salsa #plotWrap, body.v-salsa .chiprow, body.v-salsa #runSel, body.v-salsa #runRen, body.v-salsa #runDel,
body.v-salsa label.chk:has(#overlay), body.v-salsa label.fld:has(#xSel), body.v-salsa #curBtn, body.v-salsa #zoomReset,
body.v-salsa #measure, body.v-salsa #bottom, body.v-salsa #bigvals, body.v-salsa #bigResize, body.v-salsa #projNote { display: none !important; }
body.v-salsa #side, body.v-salsa #sideBtn { display: none; }
body.v-salsa .acq { visibility: hidden; }
@media (max-width: 1279px) { body.v-salsa .top > .acq { display: none; } }
body.proj #salsa .chk { display: inline-flex; }

/* barre du haut : ouvrir, pile d'images, menus */
#saBar { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
#saBar > .menu, #saBar > .btn { flex: none; }
.sa-pop { min-width: 290px; max-height: min(75vh, 640px); overflow-y: auto; }
#saOpenM .sa-pop { left: 0; right: auto; }
.sa-pop small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.sa-pop .sa-h { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 2px; }
.sa-pop .sa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sa-pop button:disabled { opacity: .4; cursor: not-allowed; background: none; }
.sa-stack { display: flex; gap: var(--s1); min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: thin; }
.sa-stack button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--h-c); max-width: 15em; padding: 0 4px 0 var(--s2);
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); font-size: var(--fs-s); cursor: pointer; color: var(--muted); }
.sa-stack button.on { border-color: var(--accent); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.sa-stack button .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-stack button .x { opacity: .55; padding: 0 4px; border-radius: 3px; }
.sa-stack button .x:hover { opacity: 1; color: var(--bad); background: var(--hover); }
.sa-stacknav { display: inline-flex; gap: 2px; flex: none; }
.sa-stacknav[hidden] { display: none; }
#saAnim.on { background: var(--accent); color: var(--accent-ink); }

/* parcours « Mesurer i » : bandeau non bloquant */
#saGuide { display: flex; align-items: center; gap: var(--s3); padding: 6px var(--s2) 6px var(--s3); border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); min-width: 0; }
#saGuide[hidden] { display: none; }
#saSteps { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; flex: none; }
#saSteps button { display: inline-flex; align-items: center; gap: 6px; height: var(--h-c); padding: 0 var(--s2) 0 3px; border: 0; background: none;
  border-radius: var(--r-pill); cursor: pointer; color: var(--muted); font-size: var(--fs-s); font-weight: 600; white-space: nowrap; }
#saSteps button:hover { background: var(--hover); }
#saSteps .n { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; border: 1.5px solid currentColor; font-size: var(--fs-xs); }
#saSteps li + li::before { content: ""; display: inline-block; width: 10px; height: 1.5px; background: var(--line-field); vertical-align: middle; margin-right: 2px; }
#saSteps li.done button { color: var(--ok-ink); }
#saSteps li.done .n { background: var(--ok); border-color: var(--ok); color: var(--on-fill); }
#saSteps li.cur button { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#saSteps li.cur .n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#saGuideTxt { flex: 1; min-width: 0; font-size: var(--fs-s); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
@media (max-width: 1500px) { #saSteps .lb { display: none; } #saSteps li.cur .lb { display: inline; } }

/* atelier : outils | image | panneau */
#saMain { flex: 1; display: flex; gap: var(--s2); min-height: 0; }
#saTools { flex: none; display: grid; grid-template-columns: 34px; grid-auto-rows: min-content; justify-content: center; gap: 2px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow-y: auto; scrollbar-width: none; }
/* écran bas (1280×720, 1440×900 avec la barre du navigateur) : outils sur deux colonnes, jamais coupés */
#saTools button { width: 34px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: none; color: var(--ink); cursor: pointer; }
#saTools button:hover { background: var(--hover); }
#saTools button.on { background: var(--accent); color: var(--accent-ink); }
#saTools button.tg.on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
#saTools button:disabled { opacity: .35; cursor: not-allowed; }
#saTools svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#saTools hr { grid-column: 1 / -1; width: 80%; justify-self: center; border: 0; border-top: 1px solid var(--line); margin: 3px 0; }
#saTools .grow { grid-column: 1 / -1; min-height: 4px; }
#saTools .end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
#saParcBtn { max-width: 18em; } #saParcLbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 13em; vertical-align: bottom; }
#saWrap { flex: 1; position: relative; min-width: 0; min-height: 160px; background: var(--sa-bg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
#saCv, #saOv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#saOv { cursor: crosshair; }
#saOv.t-hand, #saOv.pan { cursor: grab; }
#saOv.pan.drag { cursor: grabbing; }
#saOv.t-zoom { cursor: zoom-in; }
#saOv.t-text { cursor: text; }
#saOv.over-h { cursor: move; }
#saWrap.dropping { outline: 3px dashed var(--accent); outline-offset: -6px; }
#saEmpty { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s4); }
#saEmpty[hidden] { display: none; }
.sa-emptycard { display: flex; flex-direction: column; gap: var(--s2); max-width: 34rem; padding: var(--s4) var(--s6); background: var(--panel);
  border: 1px dashed var(--line-field); border-radius: var(--r); }
.sa-emptycard b { font-size: var(--fs-m); }
.sa-emptycard .row { margin: var(--s1) 0 0; }
#saCam { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); background: #000c; z-index: 3; }
#saCam[hidden] { display: none; }
#saCam video { max-width: 92%; max-height: 80%; border-radius: var(--r); }
#saBusy { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 6px 14px; z-index: 3; font-weight: 600; box-shadow: var(--pop); }
#saBusy[hidden] { display: none; }
#saZoomLbl { position: absolute; right: 8px; bottom: 8px; padding: 1px 7px; border-radius: var(--r); font: var(--fs-xs) var(--font-mono);
  background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--muted); pointer-events: none; }
#saZoomLbl:empty { display: none; }

/* panneau droit à onglets */
#saPanel { flex: none; width: clamp(300px, 27vw, 430px); display: flex; flex-direction: column; min-height: 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); }
#saTabs { padding: 0 var(--s2); border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
#saTabs button { padding: 0 var(--s2); flex: none; white-space: nowrap; }       /* onglet d'un parcours en plus : défile */
.sa-badge { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: var(--r-pill); background: var(--chip); font-size: var(--fs-xs); text-align: center; }
.sa-badge:empty { display: none; }
.sa-pane { display: none; flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--s2) var(--s3) var(--s3); }
.sa-pane.on { display: block; }
.sa-sec { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: var(--s3) 0 var(--s1); display: flex; align-items: center; gap: 4px; }
.sa-ctl { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin: var(--s2) 0; }
.sa-ctl input[type=range] { width: 7.5em; accent-color: var(--accent); }
.sa-acts { margin: var(--s2) 0 0; }
.sa-cvbox { position: relative; height: 210px; border: 1px solid var(--line); border-radius: var(--r); background: var(--plotbg); }
.sa-cvbox.sm { height: 96px; }
.sa-cvbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#saProfCv { cursor: crosshair; }
#saProfCv.grab { cursor: ew-resize; }
.sa-res { margin: var(--s2) 0; }
.sa-res .sa-big { font: 700 1.375rem var(--font-mono); color: var(--ink); letter-spacing: -.02em; line-height: 1.3; }
.sa-res .sa-big .pmv { color: var(--accent); white-space: nowrap; }
.sa-res .sa-big { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s2); }
.sa-res .sa-big small { font: 600 var(--fs-s) var(--font-ui); color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.sa-res .alt { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s2); font-size: var(--fs-s); margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.sa-res .alt label { cursor: pointer; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.sa-res .alt label:has(:checked) { color: var(--ink); font-weight: 600; }
.sa-res .alt b { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; text-align: right; }
.sa-res .alt input { margin: 0; accent-color: var(--accent); }
.sa-res .warnbox, .sa-res .hintbox { margin: var(--s2) 0 0; }
.sa-res .warnbox p { margin: 2px 0; }
.sa-scale { font-size: var(--fs-s); }
.sa-scale b { font-family: var(--font-mono); }
#saLutBar { height: 10px; border-radius: 2px; border: 1px solid var(--line); }
#saHdrTxt { font-size: var(--fs-xs); max-height: 220px; overflow: auto; background: var(--chip); padding: var(--s2); border-radius: var(--r); }
#saInfo { margin-top: 2px; }
.sa-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.sa-tab th, .sa-tab td { padding: 3px 5px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.sa-tab th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-weight: 600; }
.sa-tab td:nth-child(2), .sa-tab th:nth-child(2) { text-align: left; }
.sa-tab td.num { font-family: var(--font-mono); }
.sa-tab td.im { max-width: 6em; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.sa-tab th:first-child, .sa-tab td:first-child { color: var(--muted); }
.sa-tab input { width: 4.5em; height: var(--h-c) !important; text-align: right; padding: 0 4px; }
.sa-tab .del { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; }
.sa-tab .del:hover { color: var(--bad); }
#saMeasWrap { max-height: 50vh; overflow: auto; }
.sa-stats { display: grid; grid-template-columns: auto 1fr; gap: 1px var(--s3); font-size: var(--fs-s); margin: var(--s2) 0; }
.sa-stats span:nth-child(odd) { color: var(--muted); }
.sa-stats b { font-family: var(--font-mono); font-weight: 500; }
#saStat { flex: none; display: flex; gap: var(--s3); min-height: 1.2em; font: var(--fs-xs) var(--font-mono); color: var(--muted); padding: 0 var(--s1); white-space: nowrap; overflow: hidden; }
#saStat > span { flex: none; }
#saStat > span:last-child { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-ui); }
#saStat b { color: var(--ink); font-weight: 500; }
/* bulles de message : centrées au-dessus de l'image (en bas à gauche, elles cachaient la barre d'outils) */
body.v-salsa #toasts { left: 50%; right: auto; transform: translateX(-50%); bottom: 60px; align-items: center; max-width: min(640px, calc(100vw - 32px)); }
.sa-dlg { min-width: min(360px, 92vw); }
.sa-dlg h3 { margin: 0 0 var(--s3); font-size: var(--fs-l); }
.sa-dlg .fld { display: flex; justify-content: space-between; margin: var(--s2) 0; color: var(--ink); }
.sa-dlg .fld input:not([type=checkbox]), .sa-dlg .fld select { width: 9em; }
.sa-dlg p { margin: var(--s1) 0 var(--s2); font-size: var(--fs-s); color: var(--muted); max-width: 30rem; }
.sa-dlg pre { font-size: var(--fs-xs); max-height: 50vh; overflow: auto; }
/* écrans moyens (1280×720) : panneau plus étroit, libellés courts */
@media (max-width: 1400px) { #saPanel { width: 320px; } #saParcLbl { max-width: 8em; } .sa-res .sa-big { font-size: 1.125rem; } }
@media (max-width: 1100px) { #saPanel { width: 280px; } .sa-ctl input[type=range] { width: 5.5em; } }
/* téléphone / tablette verticale : image au-dessus, panneau dessous */
@media (max-width: 760px) {
  #saMain { flex-direction: column; }
  #saTools { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 34px; overflow-x: auto; justify-content: start; }
  #saTools hr { grid-column: auto; width: 0; height: 26px; border-top: 0; border-left: 1px solid var(--line); margin: 0 3px; }
  #saTools .grow, #saTools .end { grid-column: auto; }
  #saWrap { min-height: 48vh; }
  #saPanel { width: auto; max-height: 45vh; }
  #saBar { flex-wrap: wrap; }
  #saSteps .lb { display: none; }
  #saGuide { flex-wrap: wrap; row-gap: 4px; }
  #saGuideTxt { order: 3; flex-basis: 100%; }
  #saGuide .btn { margin-left: auto; }
  #saGuideClose { margin-left: 0 !important; }
  .sa-pop { min-width: min(290px, calc(100vw - 24px)); }
}
:root.proj .sa-cvbox { height: 240px; }
@media (min-width: 761px) and (max-height: 940px) { #saTools { grid-template-columns: 34px 34px; } }
@media (min-width: 761px) and (max-height: 780px) { #saTools { grid-template-columns: 30px 30px; gap: 1px; padding: 3px; } #saTools button { width: 30px; height: 28px; } #saTools svg { width: 18px; height: 18px; } #saTools hr { margin: 2px 0; } }

/* téléphone : la barre des vues (5 vues avec 🔭 SalsaJ) tient sur 400 px */
@media (max-width: 480px) { #viewSeg { max-width: 100%; } #viewSeg button { padding: 0 var(--s2); } #saBar { gap: var(--s1); } #saBar > .menu > .btn, #saBar > .btn { padding: 0 var(--s2); } }

/* parcours de l'atelier SalsaJ : galerie « Que veux-tu mesurer ? », sous-panneaux, paramètres du tableau */
#saParcM .sa-pop { right: auto; left: 0; }
.sa-gal { width: min(26rem, calc(100vw - 32px)); }
.sa-gal .sa-gh { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); padding: 6px 10px 2px; }
.sa-card { border-radius: var(--r); }
.sa-card.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sa-card > button { display: flex; gap: var(--s2); align-items: flex-start; width: 100%; text-align: left; white-space: normal; }
.sa-card > button .ic { flex: none; width: 1.6em; text-align: center; font-size: 1.15em; }
.sa-card > button small { display: block; margin: 1px 0 0; }
.sa-card .ex { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 8px 4px calc(1.6em + 18px); }
.sa-card .ex button { width: auto; padding: 1px 6px; font-size: var(--fs-xs); color: var(--accent); border-radius: var(--r-pill); }
.sa-emptyparc { flex-wrap: wrap; gap: var(--s1); align-items: center; }
.sa-emptyparc:empty { display: none; }
.sa-emptyparc .btn.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
#saGuidePi { flex: none; font-size: 1.1em; }
#saGuidePi:empty { display: none; }
#saTools button.rec:not(.on) { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
.sa-pp[hidden] { display: none; }
.sa-pinfo { margin: 2px 0; }
#saFreeExt[hidden] { display: none; }
.sa-params { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; margin: 0 0 var(--s2); }
.sa-par { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 4px; border: 1px solid var(--line-field); border-radius: var(--r); }
.sa-par input { border: 0; background: none; min-width: 2.5em; font: inherit; color: inherit; padding: 2px; }
.sa-par input:first-child { font-weight: 600; }
.sa-par .del, .sa-tab .del { border: 0; background: none; color: var(--muted); cursor: pointer; }
.sa-tab th.par { color: var(--accent); }
.sa-tab td.txt { text-align: left; max-width: 8em; overflow: hidden; text-overflow: ellipsis; }

/* fiches de séance × atelier image (fiche.js, SUI.fiche.mark) : le pas à pas du parcours est rattaché au bandeau de la
   fiche (« ↳ dans l'atelier ») et l'étape du parcours qu'attend la fiche est cerclée ; le bandeau garde la consigne. */
html.fiche #saGuide[data-fz] { border-style: dashed; border-top-left-radius: 0; margin-top: -2px; }
html.fiche #saGuide[data-fz]::before { content: "↳ dans l'atelier"; flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }
#saGuide[data-fz-target="0"] #saSteps > li:nth-child(1) .n, #saGuide[data-fz-target="1"] #saSteps > li:nth-child(2) .n,
#saGuide[data-fz-target="2"] #saSteps > li:nth-child(3) .n, #saGuide[data-fz-target="3"] #saSteps > li:nth-child(4) .n,
#saGuide[data-fz-target="4"] #saSteps > li:nth-child(5) .n, #saGuide[data-fz-target="5"] #saSteps > li:nth-child(6) .n,
#saGuide[data-fz-target="6"] #saSteps > li:nth-child(7) .n, #saGuide[data-fz-target="7"] #saSteps > li:nth-child(8) .n
  { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
#saGuide[data-fz-target="0"] #saSteps > li:nth-child(1) .lb, #saGuide[data-fz-target="1"] #saSteps > li:nth-child(2) .lb,
#saGuide[data-fz-target="2"] #saSteps > li:nth-child(3) .lb, #saGuide[data-fz-target="3"] #saSteps > li:nth-child(4) .lb,
#saGuide[data-fz-target="4"] #saSteps > li:nth-child(5) .lb, #saGuide[data-fz-target="5"] #saSteps > li:nth-child(6) .lb,
#saGuide[data-fz-target="6"] #saSteps > li:nth-child(7) .lb, #saGuide[data-fz-target="7"] #saSteps > li:nth-child(8) .lb
  { display: inline; text-decoration: underline 2px var(--accent); text-underline-offset: 3px; }
/* éditeur de fiche : atelier image (ui_fiches.js) */
.fz-salsa { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); margin: var(--s2) 0; display: grid; gap: var(--s2); }
.fz-salsa legend { font-weight: 600; padding: 0 var(--s1); }
.fz-salsa .fz-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: end; }
.fz-imgs { display: flex; flex-wrap: wrap; gap: var(--s1); }
.fz-imgs .fz-img { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border: 1px solid var(--line-field); border-radius: var(--r-pill); font-size: var(--fs-s); }
.fz-steps-t select { max-width: 100%; }
.fz-salsa #fzSaAtt { min-width: min(30em, 70vw); }
.fz-salsa #fzSaPar { min-width: 14em; }

/* ---- atelier son façon Audacity (vue 🔊 Son : ui_son.js) ----
   La piste remplace le graphe et le panneau des voies ; le panneau du bas garde ses onglets (onglet 🔊 Son en plus). */
:root { --so-wave: #1559a8; --so-wave2: #b4411a; --so-sel: rgba(21, 89, 168, .16); --so-play: #d62728; }
:root[data-theme="dark"] { --so-wave: #5ca2f2; --so-wave2: #f08a5d; --so-sel: rgba(92, 162, 242, .22); --so-play: #ff6b6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --so-wave: #5ca2f2; --so-wave2: #f08a5d; --so-sel: rgba(92, 162, 242, .22); --so-play: #ff6b6b; } }
#son, #tabs .so-only { display: none; }
/* panneau de réglages du pointage : seulement en vue Vidéo (ailleurs il faisait doublon avec la vue du haut) */
body:not(.v-video) #tabs [data-t="tab-video"] { display: none; }
body.nocard #tabs .board-only { display: none; }      /* Sorties, Branchements : seulement avec une carte */
body.v-son #tabs .so-only { display: inline-flex; }
body.v-son #son { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--s1); }
body.v-son #plotWrap, body.v-son .chiprow, body.v-son #runSel, body.v-son #runRen, body.v-son #runDel,
body.v-son label.chk:has(#overlay), body.v-son label.fld:has(#xSel), body.v-son #curBtn, body.v-son #zoomReset,
body.v-son #measure, body.v-son #bigvals, body.v-son #bigResize, body.v-son #projNote, body.v-son #side, body.v-son #sideBtn { display: none !important; }
body.v-son .acq { visibility: hidden; }
@media (max-width: 1279px) { body.v-son .top > .acq { display: none; } }
#soBar { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
#soBar .so-sep { width: 1px; height: var(--h-c); background: var(--line); margin: 0 var(--s1); }
#soBar .btn.icon { font-size: var(--fs-m); }
#soLoop[aria-pressed="true"], #soPlay.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#soRec.rec { background: var(--bad); border-color: var(--bad); color: var(--on-fill); }
.so-pop { min-width: 260px; left: 0; right: auto; }
.so-pop.right { left: auto; right: 0; }
/* vue Son : seuls les onglets du bas qui portent sur le son (les autres agissent sur l'essai µLab, pas sur le son édité) */
body.v-son #tabs [data-t]:not([data-t="tab-son"]):not([data-t="tab-help"]) { display: none; }
.so-pop small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.so-pop .so-h { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 2px; }
.so-pop button:disabled { opacity: .4; cursor: not-allowed; background: none; }
#soOvw { display: block; width: 100%; height: 26px; flex: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--plotbg); cursor: pointer; }
#soWrap { flex: 1; position: relative; min-height: 140px; background: var(--plotbg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
#soWrap.dropping { outline: 3px dashed var(--accent); outline-offset: -6px; }
#soCv, #soOv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#soOv { cursor: text; }
#soOv.edge { cursor: ew-resize; }
#soOv.pan { cursor: grabbing; }
#soOv.hcur { cursor: ns-resize; }
#soEmpty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
#soEmpty .empty { pointer-events: auto; background: var(--panel); }
#soEmpty[hidden] { display: none; }
#soVu { position: absolute; left: var(--s3); top: var(--s2); display: flex; align-items: center; gap: var(--s2); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s1) var(--s2); font: var(--fs-xs) var(--font-mono); box-shadow: var(--pop); }
#soVu[hidden] { display: none; }
#soVu .so-vum { width: 160px; height: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--ok) 0 70%, var(--warn) 70% 88%, var(--bad) 88%); position: relative; overflow: hidden; }
#soVuBar { position: absolute; inset: 0 0 0 auto; width: 100%; background: var(--chip); }
#soVuTxt { white-space: nowrap; min-width: 6.5em; }
#soStat { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; min-height: var(--h-c); padding: 0 var(--s1) var(--s1); font-size: var(--fs-s); color: var(--muted); }
#soStat b { color: var(--ink); font: 500 var(--fs-s) var(--font-mono); }
#soStat .so-f { color: var(--ink); font-weight: 700; }
#soStat input { width: 4.5em; height: var(--h-c); font: var(--fs-s) var(--font-mono); text-align: center; }
#soStat .warnx { color: var(--warn-ink); }
#tab-son .so-labs { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s1); }
#soLabs .so-lab { display: flex; align-items: center; gap: var(--s1); }
#soLabs .so-lab button.t { font: var(--fs-xs) var(--font-mono); background: none; border: 0; color: var(--accent); cursor: pointer; min-width: 5.5em; text-align: left; }
#soLabs .so-lab input { flex: 1; min-width: 0; height: var(--h-c); }
#soMes table { border-collapse: collapse; font-size: var(--fs-s); width: 100%; min-width: 0; }
#soMes td { padding: 1px var(--s2) 1px 0; text-align: left; white-space: normal; vertical-align: top; }
#tab-son fieldset { min-width: 0; }
#soMes td:first-child { color: var(--muted); }
#soMes td b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
:root.proj #soOvw { height: 32px; }
@media (max-width: 1365px) { #soZIn, #soZOut { display: none; } #soBar .so-sep { margin: 0; } }

/* micro du PC (micro_pc.js) : vumètre du dialogue de réglage */
.micmeter { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0; }
.micmeter .mm-bar { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.micmeter .mm-bar i { display: block; height: 100%; width: 0; background: var(--ok, #138a36); transition: width 50ms linear; }
.micmeter .mm-bar i.clip { background: var(--bad, #d62728); }
.micmeter .mm-v { min-width: 7em; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-s); }
body.proj #micBtn { display: none; }        /* accessoire : masqué en projection */

/* PicoScope : réglages (⚙) et mesures automatiques de l'oscilloscope (pico_scope.js) */
#psCfg { position: absolute; z-index: 60; width: max-content; max-width: min(460px, calc(100vw - 16px)); padding: var(--s2) var(--s3);
  background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--r) + 3px); box-shadow: var(--pop); font-size: var(--fs-s); }
#psCfg[hidden] { display: none; }
#psCfg h4 { margin: var(--s2) 0 var(--s1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#psCfg .pc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s1); }
#psCfg .pc-row > b { min-width: 4.5em; }
#psCfg label { display: inline-flex; align-items: center; gap: 4px; }
#psCfg select, #psCfg input:not([type=checkbox]) { height: var(--h-c); }
#pscopeBar.xy .ps-yt { display: none !important; }
#psMeas { position: absolute; left: 64px; bottom: 34px; z-index: 3; padding: 3px var(--s2); background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); font-size: var(--fs-xs); font-family: var(--font-mono); }
#psMeas[hidden] { display: none; }
#psMeas table { border-collapse: collapse; }
#psMeas th, #psMeas td { padding: 1px 6px; text-align: right; white-space: nowrap; }
#psMeas tr:first-child th { font-family: var(--font-ui); font-weight: 600; color: var(--muted); }
#psMeas p { margin: 2px 6px 1px; font-family: var(--font-ui); }
#psInfo { width: 27em; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }