/* ══════════════════════════════════════════════════
   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);
  /* Ligne explicite en 1fr : #sim-area est un conteneur de requête en
     container-type: size, donc sa hauteur intrinsèque est nulle. Une ligne
     auto la déduirait du contenu — et tout s'effondrerait. */
  grid-template-rows: 1fr;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

/* ── Colonne gauche ──────────────────────────────── */
#left-col {
  display: flex;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: clamp(6px, 0.9vw, 14px);
}

/* ── Zone de simulation ──────────────────────────── */
/* container-type: size fait de #sim-area le référentiel des unités cq de
   la légende. Sans lui, un clamp(…, Nvw, …) suivrait la largeur de la
   FENÊTRE, alors que la zone n'en occupe qu'une fraction (le panneau droit
   en est retranché) — et ignorerait totalement sa hauteur. */
#sim-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: #fdf8f0;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  container-type: size;
}

#scene-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Pas de défilement ni de zoom tactile sur la zone de simulation. */
  touch-action: none;
}

/* ── Légende (overlay sur le canvas) ─────────────── */
#legend {
  position: absolute;
  /* En haut à gauche : le bas de la zone est occupé sur toute sa largeur
     par la cote de tension, qu'une légende posée là masquerait. */
  left: clamp(6px, 1.4cqmin, 16px);
  top: clamp(6px, 1.4cqmin, 16px);
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.8cqmin, 8px);
  padding: clamp(5px, 1.2cqmin, 12px) clamp(7px, 1.6cqmin, 15px);
  background: rgba(255,255,255,0.88);
  border: 1px solid #c8c0b4;
  border-radius: 7px;
  font-size: clamp(9px, 2.1cqmin, 15px);
  color: #2c3e50;
  pointer-events: none;
}

/* Grille plutôt que flex : la pastille occupe une colonne de largeur fixe
   (celle du cation, la plus grosse) où elle est centrée. Les centres de
   l'ion et de l'électron sont alors alignés, malgré leurs tailles
   différentes. */
.legend-item {
  display: grid;
  grid-template-columns: clamp(12px, 2.9cqmin, 22px) auto;
  align-items: center;
  gap: clamp(4px, 1cqmin, 9px);
  white-space: nowrap;
}

.legend-dot { justify-self: center; }

/* Les signes + et − sont des images SVG, ni des glyphes ni des barres en
   pixels. La police ne centre pas ses glyphes dans leur cadre (le « + »
   monte, le « − » flotte à mi-hauteur d'x), et une barre de hauteur fixe
   en `position: absolute` tombe entre deux pixels dès que le disque,
   dimensionné en `cqmin`, a une taille fractionnaire — elle paraît alors
   décalée. Un SVG mis à l'échelle du disque reste centré à n'importe
   quelle taille, comme le fait `_drawSign()` sur le canvas. */
.legend-dot {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.dot-elec {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4' y='8.8' width='12' height='2.4' rx='1.2' fill='%23fff'/%3E%3C/svg%3E");
}

.dot-cation {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4' y='8.8' width='12' height='2.4' rx='1.2' fill='%23fff'/%3E%3Crect x='8.8' y='4' width='2.4' height='12' rx='1.2' fill='%23fff'/%3E%3C/svg%3E");
}

.dot-cation {
  width:  clamp(12px, 2.9cqmin, 22px);
  height: clamp(12px, 2.9cqmin, 22px);
  background-color: rgba(180,80,40,0.75);
  border: 1px solid rgba(140,55,25,0.9);
}

.dot-elec {
  width:  clamp(8px, 1.9cqmin, 15px);
  height: clamp(8px, 1.9cqmin, 15px);
  background-color: #2a6aaa;
  border: 1px solid #1c4c7d;
}

/* ── 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;
}

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

/* ── 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;
}

.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: 8px 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-green {
  background: #2a8a50;
  color: #fff;
  font-size: clamp(14px, 1.4vw, 18px);
  padding: 11px 6px;
}
.btn-green:hover { background: #1a6a38; }

.btn-pause {
  background: #c08020;
  color: #fff;
  font-size: clamp(14px, 1.4vw, 18px);
  padding: 11px 6px;
}
.btn-pause:hover { background: #a06010; }

.btn-play {
  background: #2a8a50;
  color: #fff;
  font-size: clamp(14px, 1.4vw, 18px);
  padding: 11px 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 (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 à Pause, 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;
}

/* Bascule d'option : fond orangé à l'état actif (charte du site) */
.btn-toggle-one {
  width: 100%;
  background: #ece8e0;
  color: #5a6a78;
  font-size: clamp(12px, 1.2vw, 15px);
  padding: 8px 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;
}

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

.param-row label {
  font-size: clamp(12px, 1.15vw, 15px);
  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(12px, 1.15vw, 15px);
}

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

.param-row-speed {
  margin-top: 8px;
  margin-bottom: 0;
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  padding: 0 8px;
}

.slider-ticks span {
  font-size: clamp(10px, 1vw, 13px);
  color: #7a8a96;
  width: 0;
  text-align: center;
  white-space: nowrap;
}
.slider-ticks span:first-child { width: auto; text-align: left; }
.slider-ticks span:last-child  { width: auto; text-align: right; }

/* Étiquettes alignées sur les 4 crans d'un curseur pas=1 (0-3).
   Reprise telle quelle de ondes/ et pression/, qui portent le même
   curseur de vitesse. */
.speed-ticks {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 0fr;
  font-size: clamp(9px, 0.85vw, 11px);
  color: #7a8a96;
  padding: 0 7px;   /* compense le padding interne du thumb sur les bords */
  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 de valeur ────────────────────────── */
#measures.hidden { display: none; }

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

.ro-label {
  font-size: clamp(11px, 1vw, 13px);
  color: #7a8a96;
  margin-bottom: 2px;
}

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

/* ── Bandeau Informations ────────────────────────── */
.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 sur ce bord.
     Sa largeur étant en clamp() (donc fractionnaire en px), deux bordures
     superposées à cet endroit s'arrondiraient chacune de leur côté et
     laisseraient un décalage d'~1 px. */
  border-left: none;
  overflow: hidden;
  transition: padding 0.2s;
}

.panel-hint strong { color: #2c3e50; }

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

.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 {
  /* Lien déguisé en bouton : un <a> hérite de la police du body, mais on
     la fixe explicitement pour un rendu identique partout. */
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  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(12px, 1.15vw, 15px);
  padding: 0 10px 8px;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  /* Plafond de l'animation d'ouverture, pas une contrainte de mise en page :
     il doit rester au-dessus de la hauteur réelle du texte sur GRAND écran,
     où la police du bandeau atteint son maximum (clamp jusqu'à 15px). À
     340px, la dernière ligne était coupée en 1920x1080. */
  max-height: 420px;
}

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

/* ══════════════════════════════════════════════════
   Fenêtre étroite ou en portrait
   La scène est très allongée : sous une certaine largeur, la légende
   mangerait le fil plutôt que de l'accompagner.
══════════════════════════════════════════════════ */
@media (max-width: 720px), (max-aspect-ratio: 3/4) {
  #legend { display: none; }
}

/* ══════════════════════════════════════════════════
   Animations réduites (réglage système de l'utilisateur)
   Ne concerne que l'habillage : la simulation elle-même est le propos de
   la page et continue de tourner.
══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-toggle-one,
  .panel-hint,
  .panel-hint-body,
  .panel-hint-toggle,
  .panel-hint-menu-btn {
    transition: none;
  }
  .btn:active,
  .btn-toggle-one:active { transform: none; }
}