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

/* ══════════════════════════════════════════════════════════════════════
   style.css — Condensateur Plan (Circuit RC)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 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;
}
html { height: 100%; }
body {
  background: #e8e4de;
  color: #2c3e50;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  /* 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;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Grille principale : colonne gauche + panneau droit ── */
main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr clamp(200px, 22vw, 300px);
  grid-template-rows: 1fr;
  overflow: hidden;
}

/* ── Colonne gauche : circuit + splitter + graphes ── */
#left-col {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Zone canvas du circuit */
#circuit-area {
  background: #fdf8f0;
  border-right: 1px solid #c8c0b4;
  overflow: hidden;
  flex: 3;
  min-height: clamp(80px, 18vh, 160px);
}

/* ── Option « Afficher graphe » désactivée : zone graphes + splitter
   masqués, le circuit occupe alors toute la colonne gauche ── */
#left-col.graph-off #graph-area,
#left-col.graph-off #left-splitter { display: none; }
#left-col.graph-off #circuit-area {
  flex: 1 !important;
  height: auto !important;
}

/* ── Splitter draggable ── */
#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;
}
#left-splitter:hover, #left-splitter.dragging {
  background: #2a6aaa;
}

/* Panneau de contrôle droit (toute la hauteur) */
#panel {
  background: #e8e4de;
  border-left: 1.5px solid #c8c0b4;
  display: flex;
  flex-direction: column;
  grid-row: 1;
  grid-column: 2;
  min-height: 0;
  overflow: hidden;
  font-size: clamp(11px, 1.1vw, 14px);
}

#panel-body {
  flex: 1;
  min-height: 0;
  padding: clamp(8px, 1.2vw, 16px) clamp(6px, 1vw, 14px);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

/* Zone graphes.
   Les trois variables ci-dessous dimensionnent d'un seul endroit tous les
   contrôles de la barre (boutons + sélecteurs) : sans elles, chaque règle
   reposait ses propres px fixes et la barre gardait sa hauteur pleine sur
   une fenêtre courte, au détriment des tracés. */
#graph-area {
  --gctl-h:  clamp(24px, 3.2vh, 30px);
  --gctl-fs: clamp(11px, 1vw, 13px);
  --gctl-px: clamp(6px, 0.8vw, 12px);
  --gctl-gap: clamp(4px, 0.5vw, 6px);

  flex: 2;
  background: #faf9f6;
  border-top: 1px solid #c8c0b4;
  border-right: 1px solid #c8c0b4;
  display: flex;
  flex-direction: column;
  min-height: clamp(80px, 14vh, 140px);
  overflow: hidden;
  position: relative;
}

/* Barre de contrôle graphes — même découpage 2 colonnes (flex:1 + gap)
   que .graph-graphs-row ci-dessous, pour aligner chaque colonne sur son
   graphe. Fond et filet propres pour la détacher des tracés (cf. la barre
   #graph-ctrl de champ_uniforme). */
#graph-time-control {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 8px);
  flex-shrink: 0;
  padding: clamp(4px, 0.5vh, 6px) clamp(6px, 0.8vw, 10px);
  background: #f0ede8;
  border-bottom: 1px solid #c8c0b4;
}

/* Colonne alignée sur un graphe (1 ou 2).
   `nowrap` volontaire : en autorisant le retour à la ligne, les quatre
   boutons de droite passaient au-dessous sur une fenêtre étroite et
   doublaient la hauteur de la barre. Ils rétrécissent au lieu de wrapper. */
.graph-ctrl-col {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--gctl-gap);
  align-items: center;
  flex-wrap: nowrap;
}

/* Colonne du graphe 2 : sélecteur à gauche, boutons droite poussés à droite */
#graph-ctrl-col2 {
  justify-content: space-between;
}

/* Groupe droite : Réticule, Précédent, Zoom, Adapter */
#graph-btns-right {
  display: flex;
  gap: var(--gctl-gap);
  align-items: center;
  min-width: 0;
}

/* Style commun boutons gauche */
/* inline-flex + line-height:1 : les glyphes des boutons iconiques (+, ←, 🔍)
   sont nettement plus gros que --gctl-fs ; en inline-block leur line-box
   dépassait la hauteur fixe du bouton et le symbole se décalait vers le bas.
   Le centrage est ici géométrique, indépendant des métriques de la police. */
#btn-graph-mode {
  height: var(--gctl-h); padding: 0 var(--gctl-px); font-weight: 700;
  background: #e8e4de; color: #5a6a78;
  border: 1px solid #b0a898; border-radius: 5px;
  cursor: pointer; box-sizing: border-box; white-space: nowrap;
  font-family: inherit; font-size: var(--gctl-fs);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  min-width: 0; overflow: hidden;
}
#btn-graph-mode:hover { background: #d0ccc4; color: #2c3e50; }
#btn-graph-mode.active {
  background: #d0dce8; border-color: #5a80a8; color: #1a3a5a;
}

/* Style commun boutons droite */
#graph-btns-right button {
  height: var(--gctl-h); padding: 0 var(--gctl-px); font-weight: 700;
  background: #e8e4de; color: #5a6a78;
  border: 1px solid #b0a898; border-radius: 5px;
  cursor: pointer; box-sizing: border-box; white-space: nowrap;
  font-family: inherit; font-size: var(--gctl-fs);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
/* Boutons purement iconiques : carrés, padding réduit */
#btn-graph-cursor,
#btn-graph-prev,
#btn-graph-zoom {
  padding: 0;
  width: var(--gctl-h);
  font-size: calc(var(--gctl-fs) * 1.25);
}
#btn-graph-cursor { font-size: calc(var(--gctl-fs) * 1.55); }

/* Le mot « Adapter » disparaît quand la barre devient étroite : l'icône
   loupe suffit, et le title=… reste là pour lever l'ambiguïté. */
@media (max-width: 900px) {
  #btn-graph-auto .btn-label { display: none; }
  #btn-graph-auto { padding: 0; width: var(--gctl-h); }
}

#btn-graph-zoom.active     { background: #2a6aaa; color: #fff; border-color: #1a5a9a; }
#btn-graph-cursor.active   { background: #2a6aaa; color: #fff; border-color: #1a5a9a; }

#graph-btns-right button:hover      { background: #d0ccc4; color: #2c3e50; }
#btn-graph-zoom.active:hover        { background: #1a5a9a; color: #fff; }
#btn-graph-cursor.active:hover      { background: #1a5a9a; color: #fff; }
#btn-graph-prev:disabled            { opacity: 0.35; cursor: not-allowed; }
#btn-graph-prev:disabled:hover      { background: #e8e4de; color: #5a6a78; }

/* Ligne contenant les deux canvas de graphe côte à côte */
.graph-graphs-row {
  display: flex;
  flex: 1;
  gap: clamp(6px, 0.8vw, 10px);
  min-height: 0;
  overflow: hidden;
  padding: clamp(6px, 0.8vh, 10px) clamp(6px, 0.8vw, 10px);
}

/* Cadre du graphe : c'est le wrapper qui porte bordure, arrondi et ombre,
   le canvas remplit l'intérieur bord à bord (motif .chart-wrap des pages
   équilibre/cinétique). */
.graph-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: #ffffff;
  border: 1px solid #c8c0b4;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.graph-select {
  height: var(--gctl-h);
  padding: 0 clamp(4px, 0.6vw, 8px);
  font-family: inherit;
  font-size: var(--gctl-fs);
  font-weight: 700;
  color: #5a6a78;
  background: #e8e4de;
  border: 1px solid #b0a898;
  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
  min-width: 0;
}
.graph-select:hover  { background: #d0ccc4; color: #2c3e50; }
.graph-select:focus  { outline: none; border-color: #2a6aaa; }
.graph-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* ── Panneau droit : styles communs ── */

/* Titre du panneau */
.panel-title {
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 700;
  color: #2c3e50;
  text-align: center;
  padding-bottom: clamp(8px, 1vw, 12px);
  border-bottom: 1.5px solid #c8c0b4;
  margin-bottom: clamp(8px, 1vw, 12px);
  letter-spacing: 0.3px;
}

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

/* Séparateur */
.sep {
  border: none;
  border-top: 1px solid #c8c0b4;
  margin: 8px 0;
}

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

/* Lignes de paramètres (label + slider) */
.param-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.param-row label { display: flex; justify-content: space-between; font-size: clamp(12px, 1.15vw, 15px); color: #2c3e50; }
.param-row label span { color: #2a5080; font-weight: 600; }
input[type=range] { width: 100%; accent-color: #4a7aaa; cursor: pointer; }

/* ── 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(14px, 1.4vw, 18px);
  padding: 10px 6px;
}
.btn-pause:hover { background: #a06010; }

.btn-play {
  background: #2a8a50;
  color: #fff;
  font-size: clamp(14px, 1.4vw, 18px);
  padding: 10px 6px;
}
.btn-play:hover { background: #1a6a38; }

.btn-raz {
  background: #dedad2;
  color: #5a6a78;
  font-size: clamp(12px, 1.2vw, 15px);
  padding: 9px 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;
}

/* ── Sélecteur segmenté à 2 états (ex. Borne + du générateur) ── */
.seg-toggle {
  display: flex;
  border: 1px solid #c8c0b4;
  border-radius: 6px;
  overflow: hidden;
}
.seg-btn {
  flex: 1;
  padding: 8px 4px;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 700;
  font-family: inherit;
  border: none;
  background: #ece8e0;
  color: #5a6a78;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.seg-btn:not(:last-child) { border-right: 1px solid #c8c0b4; }
.seg-btn:hover { background: #ddd8ce; }
.seg-btn.active { background: #2a6aaa; color: #fff; }

/* ── Bouton à bascule « on/off » (ex. Afficher graphe) ── */
.btn-toggle-one {
  width: 100%;
  background: #ece8e0;
  color: #5a6a78;
  font-size: clamp(13px, 1.3vw, 16px);
  padding: 11px 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;
}

/* Boutons Charge / Décharge */
.btn-group { display: flex; gap: 10px; }
.btn-group .btn {
  width: auto; flex: 1; padding: 10px 6px; border: 1px solid transparent;
  font-size: clamp(13px, 1.3vw, 16px); letter-spacing: 0.3px;
}
.btn-charge    { background: #d0dce8; color: #1a3a5a; border-color: #a0b8d0; }
.btn-charge.active    { background: #2a6aaa; color: #fff; border-color: #1a5a9a; }
.btn-discharge { background: #e8d8cc; color: #5a2a10; border-color: #c8a898; }
.btn-discharge.active { background: #c05020; color: #fff; border-color: #a04010; }

/* Encarts de valeurs instantanées */
.readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.readout { background: #fff; border: 1px solid #c8c0b4; border-radius: 6px; padding: 7px 9px; }
.readout.full-width { grid-column: 1 / -1; }
.readout .ro-label { font-size: clamp(11px, 1vw, 13px); color: #7a8a96; margin-bottom: 2px; }
.readout .ro-value { font-size: clamp(14px, 1.5vw, 18px); font-weight: 700; color: #2a5080; font-variant-numeric: tabular-nums; }
.readout .ro-unit  { font-size: 12px; color: #7a8a96; }

/* Indicateur d'état de la phase */
#state-indicator {
  text-align: center; font-size: 14px; padding: 6px;
  border-radius: 5px; background: #fff; border: 1px solid #c8c0b4;
  margin-bottom: 8px;
}

/* Bloc d'explication des modes */
#mode-help {
  font-size: 13px; color: #5a6a78; line-height: 1.5;
  margin-top: auto;
}
.mode-help-block {
  margin-top: 5px; padding: 6px 8px;
  background: #fff; border: 1px solid #c8c0b4; border-radius: 5px;
}
.mode-help-name {
  display: block; font-weight: 700; color: #2a5080;
  margin-bottom: 2px; font-size: 13px;
}

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

/* Crans sous un slider : chaque label est centré exactement sous la position
   du curseur pour son cran (cf. équilibre/cinétique). */
.slider-ticks {
  position: relative;
  margin-top: 3px;
  height: 1.3em;
}
.slider-ticks span {
  position: absolute;
  top: 0;
  left: calc(8px + (100% - 16px) * var(--tick-frac, 0));
  transform: translateX(-50%);
  font-size: clamp(10px, 1vw, 13px);
  color: #7a8a96;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════
   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;
  transition: padding 0.2s;
}

.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-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-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-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;
}

.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); }