/* ══════════════════════════════════════════════════
   Simulation pédagogique — Physique-Chimie Lycée
   Auteur  : Mathieu Berdous
   Licence : CC BY-NC 4.0 — https://creativecommons.org/licenses/by-nc/4.0/
══════════════════════════════════════════════════ */

/* ── Reset & base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #e8e4de;
  color: #2c3e50;
  /* dvh : suit la hauteur réellement visible (barres dynamiques du navigateur) ;
     vh reste le repli pour les navigateurs sans support dvh. */
  height: 100vh;
  max-height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Grille principale ────────────────────────── */
main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr clamp(200px, 22vw, 300px);
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   COLONNE GAUCHE
══════════════════════════════════════════════════ */

#left-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ── Zone animation ──────────────────────────── */
#anim-area {
  flex: 3;
  min-height: 0;
  overflow: hidden;
  position: relative;
  border-right: 1px solid #c8c0b4;
}

#anim-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Bouton overlay "Séparer la phase de descente" ── */
.anim-phase-btn {
  position: absolute;
  display: none;
  pointer-events: auto;
  top: 4px;
  left: 8px;
  padding: 2px 8px;
  font: bold clamp(10px, 1.2vw, 13px) 'Segoe UI', Arial, sans-serif;
  color: #fff;
  background: rgba(60,80,60,0.55);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.15s;
  white-space: nowrap;
}
.anim-phase-btn:hover  { background: rgba(80,110,80,0.75); }
.anim-phase-btn.active { background: rgba(40,100,60,0.85); border-color: rgba(100,220,120,0.6); }

/* ── Chronomètre overlay (haut-droite de la zone anim) ── */
#anim-chrono {
  position: absolute;
  top: 4px;
  right: 8px;
  pointer-events: none;
  padding: 0.15em 0.5em;
  /* La taille est posée en JS par _animFontSize() : le chrono suit la même
     règle que les étiquettes dessinées dans le canvas, pas une règle à part. */
  font: bold 16px 'Segoe UI', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(50,60,80,0.55);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  backdrop-filter: blur(2px);
  white-space: nowrap;
}

/* ── Barre d'outils animation ──────────────────── */
#anim-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: clamp(32px, 4vh, 40px);
  background: #e8e4de;
  border-bottom: 2px solid #2a6aaa;
  padding: 0 8px;
  gap: 6px;
  position: relative;
  z-index: 15;
  overflow: visible;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.toolbar-spacer { flex: 1; }

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.toolbar-btn {
  height: clamp(22px, 2.8vh, 26px);
  padding: 0 clamp(6px, 0.7vw, 10px);
  font-family: inherit;
  font-size: clamp(10px, 1.05vw, 12px);
  font-weight: 700;
  color: #4a5a68;
  background: #d8d4cc;
  border: 1px solid #b8b0a8;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.toolbar-btn:hover  { background: #ccc8c0; color: #2c3e50; }
.toolbar-btn.active { background: #fde8c8; color: #7a3a10; border-color: #e8a060; }
.toolbar-btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.toolbar-action-btn {
  flex-shrink: 0;
  height: clamp(22px, 2.8vh, 26px);
  padding: 0 clamp(5px, 0.55vw, 8px);
  font-family: inherit;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 600;
  color: #4a5a68;
  background: #d8d4cc;
  border: 1px solid #b8b0a8;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.toolbar-action-btn:hover { background: #ccc8c0; color: #2c3e50; }
/* Grisé quand l'action n'a rien à faire (ex. Tout rejouer sans sauvegarde).
   pointer-events reste actif, contrairement à .toolbar-btn:disabled, pour que
   le title expliquant l'inactivité s'affiche au survol. */
.toolbar-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.toolbar-action-btn:disabled:hover { background: #d8d4cc; color: #4a5a68; }

/* ── Séparateur vertical droit ── */
.toolbar-sep {
  width: 1px;
  align-self: stretch;
  background: #c8c0b4;
  margin: 5px 2px;
  flex-shrink: 0;
}

#saved-runs-label {
  font-size: clamp(10px, 0.9vw, 11px);
  font-weight: 700;
  color: #9aabba;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@media (max-width: 900px) { #saved-runs-label { display: none; } }

.toolbar-empty {
  font-size: clamp(10px, 0.9vw, 11px);
  color: #9aabba;
  font-style: italic;
  white-space: nowrap;
  /* Phrase longue dans un conteneur qui rétrécit : plutôt que d'être coupée
     net par l'overflow:hidden de .toolbar-right, elle s'abrège proprement
     (le texte complet reste accessible en title). */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════
   DENSITÉ DE LA BARRE D'OUTILS
   Trois niveaux posés par _updateToolbarDensity() (ui.js) selon la place
   réellement disponible, et non selon un point de rupture en px : les
   libellés du groupe de gauche se raccourcissent par paliers pour que le
   groupe de droite (onglets de simulations sauvegardées, Adapter, Tout
   rejouer) garde toujours sa place.
══════════════════════════════════════════════════ */
#anim-toolbar.tb-compact { gap: 4px; padding: 0 5px; }
#anim-toolbar.tb-compact .toolbar-left { gap: 3px; }
#anim-toolbar.tb-compact .toolbar-zoom-label,
#anim-toolbar.tb-compact #saved-runs-label { display: none; }

#anim-toolbar.tb-mini { gap: 3px; padding: 0 4px; }
#anim-toolbar.tb-mini .toolbar-left { gap: 2px; }
#anim-toolbar.tb-mini .toolbar-zoom-label,
#anim-toolbar.tb-mini #saved-runs-label { display: none; }
#anim-toolbar.tb-mini .toolbar-btn        { padding: 0 5px; }
#anim-toolbar.tb-mini .toolbar-action-btn { padding: 0 4px; }
#anim-toolbar.tb-mini .toolbar-sep        { margin: 5px 1px; }

#saved-runs-tabs-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  gap: 3px;
}

#saved-runs-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  scroll-behavior: smooth;
  min-width: 0;
  scrollbar-width: none;
}
#saved-runs-tabs::-webkit-scrollbar { display: none; }

.tabs-scroll-btn {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: clamp(22px, 2.8vh, 26px);
  background: #d8d4cc;
  border: 1px solid #b8b0a8;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  color: #4a5a68;
  padding: 0;
  line-height: 1;
  text-align: center;
  transition: background 0.12s, color 0.12s;
}
.tabs-scroll-btn:hover { background: #ccc8c0; color: #2c3e50; }
.tabs-scroll-btn.visible { display: flex; }

/* ── Onglet d'une run sauvegardée ── */
.run-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  height: clamp(22px, 2.8vh, 26px);
  padding: 0 6px 0 4px;
  background: #fff;
  border: 1px solid #c8c0b4;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background 0.12s, opacity 0.15s, box-shadow 0.12s;
}
.run-tab:hover  { background: #f4f1ec; box-shadow: 0 1px 4px rgba(0,0,0,0.10); }
.run-tab.masque { opacity: 0.40; }
.run-tab.expanded { background: #fde8c8; border-color: #e8a060; box-shadow: 0 1px 4px rgba(232,160,96,0.25); }

.run-tab-swatch {
  width: 8px;
  align-self: stretch;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.10);
  margin: 3px 0;
}

.run-tab-num {
  font-size: clamp(10px, 0.95vw, 11px);
  font-weight: 700;
  color: #4a5a68;
  white-space: nowrap;
}
@media (max-width: 700px) { .run-tab-num { display: none; } }

.run-tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #4a5a68;
  font-size: 13px;
  padding: 0 1px;
  line-height: 1;
  transition: color 0.12s;
  flex-shrink: 0;
}
.run-tab-btn:hover { color: #2c3e50; }
.run-tab-btn.run-tab-del:hover { color: #c03030; }

/* ── Dropdowns toolbar (Vue, Vecteurs…) ── */
.toolbar-dropdown-wrap {
  position: relative;
  /* flex, et non le bloc par défaut : un <button> seul dans un bloc est mis en
     page comme de l'inline-block, donc posé sur la ligne de base d'une ligne de
     texte dont l'espace de descente s'ajoute sous lui. Ce conteneur était ainsi
     ~3px plus haut que les boutons voisins et, une fois centré par
     .toolbar-left, remontait son bouton de ~2px par rapport à Repère et au
     groupe Zoom. En flex, le bouton est un élément flex : plus de ligne de
     base, plus d'espace de descente, hauteur strictement égale au bouton. */
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.toolbar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid #c8c0b4;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  min-width: 190px;
  padding: 4px 0;
  flex-direction: column;
}
.toolbar-dropdown.open { display: flex; }

/* ── Split button Épingler ── */
.toolbar-btn-split {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.toolbar-btn-split .pin-main-btn {
  border-radius: 4px 0 0 4px;
  border-right: none;
}
.toolbar-btn-split .pin-arrow-btn {
  border-radius: 0 4px 4px 0;
  padding: 0 6px;
  font-size: 10px;
  min-width: unset;
}

/* ── Groupe boutons Zoom ── */
.toolbar-zoom-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.toolbar-zoom-label {
  font-size: clamp(10px, 1.05vw, 12px);
  font-weight: 700;
  color: #4a5a68;
  white-space: nowrap;
}
.toolbar-zoom-btn {
  min-width: 22px;
  padding: 0 6px;
}

/* ── Dropdown pin ── */
.pin-dropdown {
  min-width: 320px;
  padding: 8px;
  gap: 0;
}
.pin-drop-title {
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 600;
  color: #4a5a68;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pin-vec-row {
  margin-bottom: 8px;
  flex-wrap: nowrap;
}
.pin-coords-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(10px, 0.9vw, 12px);
  color: #4a5a68;
  cursor: pointer;
  line-height: 1.3;
}
.pin-coords-label input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.toolbar-drop-item {
  padding: 7px 14px;
  font-family: inherit;
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 500;
  color: #2c3e50;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.10s;
}
.toolbar-drop-item:hover { background: #f0ede8; }
.toolbar-drop-item.active { font-weight: 700; color: #2a6aaa; }
.toolbar-drop-item.selected { font-weight: 700; color: #2a6aaa; }
.toolbar-drop-item.selected::after { content: ' •'; }

/* ── Dropdown détails d'une run ── */
#run-tab-dropdown {
  position: absolute;
  top: 100%;
  z-index: 30;
  background: #fff;
  border: 1px solid rgba(100,130,160,0.4);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  padding: 8px 10px;
  min-width: 200px;
  max-width: 320px;
}

.run-drop-params {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e8e4de;
  padding-bottom: 7px;
}

.run-drop-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.run-drop-item {
  font-size: 11px;
  color: #2c3e50;
  white-space: nowrap;
}

.run-drop-vecs {
  display: flex;
  gap: 5px;
  align-items: center;
}

.run-drop-vec-btn {
  padding: 0 8px;
  height: 32px;
  font-family: inherit;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid currentColor;
  background: transparent;
  opacity: 0.45;
  transition: opacity 0.12s, background 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.run-drop-vec-btn:hover { opacity: 0.8; }
.run-drop-vec-btn.active {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}



/* ── Splitter ────────────────────────────────── */
#left-splitter {
  flex: 0 0 6px;
  background: #c8c0b4;
  cursor: row-resize;
  position: relative;
  z-index: 20;
  transition: background 0.15s;
  border-right: 1px solid #c8c0b4;
  /* Sans ça, sur écran tactile le geste est interprété comme un défilement
     et le splitter ne suit pas le doigt. */
  touch-action: none;
}
#left-splitter:hover,
#left-splitter.dragging {
  background: #2a6aaa;
}

/* ── Zone graphes ────────────────────────────── */
#graph-area {
  flex: 2;
  display: flex;
  flex-direction: column;
  min-height: 60px;
  background: #faf9f6;
  border-top: 1px solid #c8c0b4;
  border-right: 1px solid #c8c0b4;
  overflow: hidden;
  position: relative;
}

#graph-dual-sep {
  display: none;
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #c8c0b4;
  pointer-events: none;
  z-index: 10;
}

/* Barre contrôle graphes */
#graph-ctrl {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.5vw, 6px);
  padding: clamp(3px, 0.4vh, 5px) clamp(6px, 0.8vw, 10px);
  flex-wrap: wrap;
  border-bottom: 1px solid #c8c0b4;
  background: #f0ede8;
}

.graph-select {
  height: clamp(22px, 2.6vh, 28px);
  padding: 0 clamp(4px, 0.5vw, 7px);
  font-family: inherit;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 600;
  color: #2c3e50;
  background: #e8e4de;
  border: 1px solid #b0a898;
  border-radius: 5px;
  cursor: pointer;
  min-width: 0;
  flex: 1;
  max-width: 120px;
}
/* Anciennement outline:none, ce qui supprimait le seul repère de focus clavier
   de la page. :focus-visible ne le montre qu'à la navigation au clavier, donc
   sans le liseré disgracieux qui apparaissait au clic souris — c'était le
   motif du outline:none d'origine. */
.graph-select:focus { outline: none; }
.graph-select:focus-visible {
  outline: 2px solid #2a6aaa;
  outline-offset: 1px;
}

/* Repère de focus clavier homogène sur tous les contrôles de la page. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
label:focus-visible {
  outline: 2px solid #2a6aaa;
  outline-offset: 1px;
}

.graph-mode-btn {
  height: clamp(22px, 2.6vh, 28px);
  padding: 0 clamp(5px, 0.7vw, 9px);
  font-weight: 700;
  font-size: clamp(10px, 1vw, 12px);
  background: #e8e4de;
  color: #5a6a78;
  border: 1px solid #b0a898;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.graph-mode-btn:hover { background: #d0ccc4; color: #2c3e50; }
.graph-mode-btn.active {
  background: #d0dce8;
  border-color: #5a80a8;
  color: #1a3a5a;
}

#graph-canvas-wrap {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

#graph-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════════
   PANNEAU DROIT
══════════════════════════════════════════════════ */

#panel {
  background: #e8e4de;
  border-left: 1.5px solid #c8c0b4;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: clamp(11px, 1.1vw, 14px);
  overflow: hidden;
}

/* ── Onglets principaux ──────────────────────── */
.panel-main-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1.5px solid #b0a898;
}

.panel-main-tab {
  flex: 1;
  padding: 9px 4px;
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: #d4d0c8;
  color: #8a9aaa;
  border-right: 1px solid #b0a898;
  transition: background 0.12s, color 0.12s;
}
.panel-main-tab:last-child { border-right: none; }
.panel-main-tab:hover { background: #ccc8c0; color: #2c3e50; }
.panel-main-tab.active {
  background: #e8e4de;
  color: #2a6aaa;
  border-bottom: 1.5px solid #e8e4de;
  margin-bottom: -1.5px;
}

/* ── Corps scrollable ────────────────────────── */
#panel-body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(7px, 0.9vw, 12px) clamp(7px, 0.9vw, 11px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.panel-main-section { display: flex; flex-direction: column; }

.panel-section { margin-bottom: 8px; }

.section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #7a8a96;
  margin-bottom: 7px;
}

.sep {
  border: none;
  border-top: 1px solid #c8c0b4;
  margin: 7px 0;
}

/* ── Boutons ─────────────────────────────────── */
.btn {
  width: 100%;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.btn:active { transform: scale(0.97); }

.btn-pause {
  background: #c08020;
  color: #fff;
  font-size: clamp(13px, 1.3vw, 17px);
  padding: 9px 6px;
}
.btn-pause:hover { background: #a06010; }

.btn-play {
  background: #2a8a50;
  color: #fff;
  font-size: clamp(13px, 1.3vw, 17px);
  padding: 9px 6px;
}
.btn-play:hover { background: #1a6a38; }

.btn-raz {
  background: #dedad2;
  color: #5a6a78;
  font-size: clamp(11px, 1.1vw, 14px);
  padding: 8px 6px;
  border: 1.5px solid #c8c0b4;
}
.btn-raz:hover { background: #ccc8c0; }

/* Ligne de boutons côte à côte (ex. Pause + RAZ) : chacun garde le style
   .btn habituel, seule la largeur devient partagée au lieu de 100%. RAZ
   reste étroit (texte court et fixe) pour laisser toute la place à
   Lancer/Pause/Reprendre, dont le texte change et ne doit pas passer à la ligne. */
.btn-row {
  display: flex;
  gap: 6px;
}
.btn-row > .btn {
  width: auto;
  flex: 1 1 0;
  white-space: nowrap;
}
.btn-row > .btn-raz {
  flex: 0 0 auto;
}

.btn-toggle-one {
  width: 100%;
  background: #ece8e0;
  color: #5a6a78;
  font-size: clamp(11px, 1.1vw, 14px);
  padding: 7px 6px;
  border: 1.5px solid #c8c0b4;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform 0.1s, background 0.15s;
}
.btn-toggle-one:hover { background: #dedad2; }
.btn-toggle-one:active { transform: scale(0.97); }
.btn-toggle-one.active {
  background: #fde8c8;
  color: #7a3a10;
  border-color: #d0a060;
}

/* Groupe de 2 ou 3 boutons toggle côte à côte */
.btn-group {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.btn-group .btn-toggle-one {
  flex: 1;
  padding: 7px 4px;
  font-size: clamp(10px, 1vw, 13px);
}

/* Vecteurs : ligne de boutons compacts */
.vec-btn-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.btn-vec-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  background: #ece8e0;
  border: 1.5px solid #c8c0b4;
  border-radius: 6px;
  font-family: inherit;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  color: #4a5a68;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  flex: 1;
  justify-content: center;
}
.btn-vec-compact:hover { background: #dedad2; }
/* L'épaisseur perçue de la bordure active passe par un box-shadow intérieur et
   non par border-width : passer de 1.5px à 2px agrandissait le bouton d'un
   demi-pixel de chaque côté, ce qui décalait ses quatre voisins de la rangée
   flex à chaque activation. */
.btn-vec-compact.active {
  background: #fde8c8;
  border-color: #e8a060;
  box-shadow: inset 0 0 0 1px #e8a060;
}
.btn-vec-compact.active .vec-label { opacity: 1; }

.btn-vec-compact-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vec-label {
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 700;
  opacity: 0.75;
  transition: opacity 0.12s;
}
.btn-vec-compact:hover .vec-label { opacity: 1; }

/* ── Paramètres ─────────────────────────────── */
.param-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 9px;
}

.param-row label {
  font-size: clamp(11px, 1.1vw, 14px);
  color: #2c3e50;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}

.param-value {
  color: #2a5080;
  font-weight: 600;
  white-space: nowrap;
  font-size: clamp(11px, 1.1vw, 14px);
}

.param-row input[type="range"] {
  width: 100%;
  accent-color: #4a7aaa;
  cursor: pointer;
}

/* ── Saisie scientifique (mantisse × 10^n) ─── */
.sci-input-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  margin-top: 4px;
}
.sci-prefix, .sci-times, .sci-unit {
  font-size: clamp(12px, 1.1vw, 14px);
  color: #2c3e50;
  white-space: nowrap;
}
.sci-mantisse {
  width: 58px;
  padding: 5px 4px;
  font-size: clamp(12px, 1.1vw, 14px);
  border: 1px solid #c8c0b4;
  border-radius: 4px;
  text-align: center;
  font-family: inherit;
  color: #2a5080;
  font-weight: 600;
}
.sci-exp-sel {
  padding: 5px 4px;
  font-size: clamp(12px, 1.1vw, 14px);
  border: 1px solid #c8c0b4;
  border-radius: 4px;
  background: #faf9f6;
  color: #2a5080;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* ── Slider vent (bicolore via JS) ─────────── */
#sl-wind {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  background: #e0dcd8;  /* remplacé dynamiquement par JS */
}
#sl-wind::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #4a7aaa;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
#sl-wind::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #4a7aaa;
  cursor: pointer;
  border: 2px solid #fff;
}


.slider-tick-wrap {
  position: relative;
}
.slider-tick-wrap input[type="range"] {
  display: block;
  width: 100%;
}
.slider-tick {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 5px;
  background: #8a9ab0;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 1px;
}

.wind-labels {
  display: flex;
  justify-content: space-between;
  font-size: clamp(9px, 0.85vw, 11px);
  color: #7a8a96;
  padding: 0 2px;
  margin-top: 1px;
}

/* ── Speed ticks ─────────────────────────────── */
/* ── Ligne « vitesse » : le bouton de rembobinage, puis le curseur ──
      Le bouton garde sa largeur d'icône ; le curseur prend tout le reste.
      Les graduations sont dans la même colonne que lui, sinon elles
      resteraient calées sur la largeur d'avant et ne montreraient plus le
      bon repère sous le bon cran. ── */
.speed-line {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.speed-col {
  flex: 1 1 auto;
  min-width: 0;   /* sans quoi le curseur refuse de se comprimer */
}

.btn-rewind {
  flex: 0 0 auto;
  border: 1px solid #c8c0b4;
  border-radius: 6px;
  background: #ede9e2;
  color: #5a6a78;
  font-family: inherit;
  font-size: clamp(11px, 1.1vw, 14px);
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
  opacity: 0.75;
  transition: transform 0.1s, background 0.15s, opacity 0.15s;
  touch-action: none;   /* l'appui maintenu ne doit pas faire défiler la page */
}
.btn-rewind:hover  { opacity: 1; background: #dedad2; }
.btn-rewind:active { transform: scale(0.97); }
.btn-rewind.active {
  opacity: 1;
  background: #fde8c8;
  color: #7a3a10;
  border-color: #d0a060;
}

.speed-ticks {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 0fr;
  font-size: clamp(9px, 0.85vw, 11px);
  color: #7a8a96;
  padding: 0 7px;
  line-height: 1;
  margin-top: 1px;
}
.speed-ticks span:not(:last-child) { text-align: left; }
.speed-ticks span:last-child { text-align: right; white-space: nowrap; }

/* ── Afficheurs ─────────────────────────────── */
.readout {
  background: #fff;
  border: 1px solid #c8c0b4;
  border-radius: 6px;
  padding: 6px 9px;
  margin-bottom: 7px;
}

.ro-label {
  font-size: clamp(10px, 0.95vw, 12px);
  color: #7a8a96;
  margin-bottom: 2px;
}

.ro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.ro-item {
  display: flex;
  flex-direction: column;
}

.ro-item-label {
  font-size: clamp(9px, 0.85vw, 11px);
  color: #7a8a96;
}

.ro-item-value {
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 700;
  color: #2a5080;
  font-variant-numeric: tabular-nums;
}

.ro-unit { font-size: 0.8em; font-weight: 400; color: #7a8a96; }

/* ── Bandeau instructions ───────────────────── */
.panel-hint {
  flex-shrink: 0;
  color: #5a6a78;
  line-height: 1.5;
  background: #fff;
  border: 1.5px solid #b0a898;
  /* Pas de bordure gauche propre : #panel a déjà la sienne (border-left,
     1.5px) sur ce bord. Avec la largeur de #panel en clamp() (donc
     fractionnaire en px), deux bordures superposées à cet endroit
     arrondissent chacune de leur côté et laissent un décalage d'~1px
     entre elles — en confiant ce bord à #panel seul, une seule bordure
     le trace, sans place pour ce décalage. */
  border-left: none;
  overflow: hidden;
}

.panel-hint-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
}

.panel-hint-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #7a8a96;
  margin-left: auto;
  margin-right: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-hint-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #7a8a96;
  padding: 0 2px;
  line-height: 1;
  transition: transform 0.2s;
}
.panel-hint-toggle:hover { color: #2a6aaa; }

.panel-hint-menu-btn {
  background: #f0f4f7;
  border: 1px solid #c8d4dc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #4a5a68;
  padding: 4px 9px;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.panel-hint-menu-btn:hover { background: #dde6ec; color: #2a6aaa; }

.panel-hint-body {
  font-size: clamp(11px, 1.1vw, 14px);
  padding: 0 10px 8px;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  max-height: 250px;
}

/* Déplié : plafond relatif à la hauteur de fenêtre et défilement interne,
   plutôt que de couper la fin du texte (comme le bandeau de titrage/).
   Le plafond fixe de 250px suffisait sur grand écran, mais sur fenêtre
   étroite le panneau se resserre, le texte se répartit sur plus de lignes
   et les dernières étaient perdues sans recours — overflow:hidden interdisait
   même de les faire défiler. Le vh borne aussi la place prise à #panel-body,
   qui reste scrollable de son côté. */
.panel-hint:not(.collapsed) .panel-hint-body {
  max-height: min(45vh, 340px);
  overflow-y: auto;
}

.panel-hint.collapsed .panel-hint-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.panel-hint:not(.collapsed) .panel-hint-toggle { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════
   BOUTON SAUVEGARDER
══════════════════════════════════════════════════ */

#btn-save, #btn-e-save {
  background: #1a5c3a;
  color: #fff;
  font-size: clamp(11px, 1.1vw, 14px);
  padding: 8px 6px;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
#btn-save:not(:disabled):hover, #btn-e-save:not(:disabled):hover { background: #134a2e; }
#btn-save:disabled, #btn-e-save:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}