/* ══════════════════════════════════════════════════
   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 : #left-col 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 ──────────────────────────────── */
/* container-type: size fait de #left-col le référentiel des unités cq de
   ses descendants. Sans lui, un clamp(…, Nvw, …) sur le tableau suivrait la
   largeur de la FENÊTRE, alors que la colonne ne fait qu'une fraction de
   celle-ci (le panneau droit et les marges en sont retranchés) — et
   ignorerait totalement sa hauteur. */
#left-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: clamp(6px, 0.9vw, 14px);
  padding: clamp(6px, 0.9vw, 14px);
  container-type: size;
}

/* ── Zone simulation (canvas) ────────────────────── */
#sim-area {
  flex: 1;
  align-self: stretch;
  background: #fdf8f0;
  position: relative;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

#recipient-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Pas de scroll ni de zoom tactile sur la zone de simulation (utile aussi
     pour un futur glisser-déposer du piston). */
  touch-action: none;
}
/* ── Tableau d'informations (à côté du canvas) ────── */
/* Le bloc est dimensionné en em autour de sa propre police : la largeur
   nécessaire (une étiquette + une valeur du type « 7,00×10⁻³ m³ ») est
   proportionnelle au corps du texte, donc le rapport largeur/police doit
   rester constant. Seule la police est calculée, à partir des DEUX axes du
   conteneur :
     - 1,75cqw  borne la largeur du bloc à ~35 % de la colonne ;
     - 5,5cqh   garantit que ses huit lignes tiennent en hauteur.
   L'ancienne écriture mélangeait les axes (police en vh, largeur en vw) :
   dans une fenêtre large et courte, on obtenait un texte minuscule dans une
   boîte immense, et l'inverse dans une fenêtre étroite et haute. */
#info-panel {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: clamp(11px, min(1.75cqw, 5.5cqh), 30px);
  /* La carte (fond, bordure, arrondi, ombre) est portée par le conteneur :
     les deux tableaux s'y empilent sans couture. */
  background: #fdf8f0;
  border: 1px solid #c8c0b4;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  width: 20em;
  max-width: 42cqw;
}

.info-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

/* Trait de séparation entre les deux tableaux empilés */
.info-table + .info-table {
  border-top: 1px solid #b0a898;
}

/* Répartition des colonnes. Empilés, les deux tableaux forment une seule
   carte : leur séparation verticale doit tomber au même endroit, donc ils
   partagent le même partage 38/62. Les 62 % suffisent au sous-tableau des
   chocs (« Moyenne : 1234,5 /s » ≈ 11,5em contre 12,4em disponibles).
   Côte à côte, en revanche, ce sont deux cartes indépendantes : le tableau
   des chocs y reprend un partage plus favorable (cf. la media query). */
.it-col-lbl        { width: 38%; }
.it-col-val        { width: 62%; }
.it-col-chocs-lbl  { width: 38%; }
.it-col-chocs-val  { width: 62%; }

.info-table > tbody > tr > td {
  border-bottom: 1px solid #b0a898;
  border-right: 1px solid #b0a898;
  /* Marges en em : elles suivent la police du tableau, ce qui garde exacte
     la largeur de 20em calculée ci-dessus. */
  padding: 0.32em 0.55em;
  vertical-align: middle;
}

/* Pas de bordure droite sur la dernière colonne */
.info-table > tbody > tr > td:last-child {
  border-right: none;
}

/* Pas de bordure basse sur la dernière ligne */
.info-table > tbody > tr:last-child > td {
  border-bottom: none;
}

.it-lbl {
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.it-lbl.it-wrap {
  white-space: normal;
}

.it-val {
  color: #2a5080;
  font-weight: 700;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cellule qui contient le sous-tableau chocs — pas de padding propre */
.it-choc-sub {
  padding: 0 !important;
}

/* Sous-tableau chocs (interne) */
.it-choc-inner {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.it-choc-inner td {
  border-bottom: 1px solid #c8c0b4;
  padding: 0.3em 0.55em;
  vertical-align: middle;
}

.it-choc-inner tr:last-child td {
  border-bottom: none;
}

/* Ligne Droite (avant-dernière) — garde sa border-bottom comme séparateur */
.it-choc-inner tr:nth-last-child(2) td {
  border-bottom: 1px solid #c8c0b4;
}

.it-choc-lbl {
  color: #5a6a78;
  white-space: nowrap;
  font-weight: 400;
  font-size: 0.95em;
}

/* .it-choc-val a disparu : depuis que .it-val aligne les valeurs à droite,
   cette classe ne reprenait plus que des propriétés identiques. */

/* Ligne Moyenne — séparateur visuel au-dessus */
.it-mean-row td {
  border-top: 1px solid #c8c0b4 !important;
}

.it-mean-lbl {
  font-weight: 600 !important;
  color: #2c3e50 !important;
}

/* Seule la couleur distingue la moyenne : tout le reste vient de .it-val,
   que la cellule porte aussi. Le !important n'est pas nécessaire, cette
   règle étant plus bas dans la feuille que .it-val, à spécificité égale.
   Pas de display: block ici non plus : sur un <td>, il le sort de
   l'algorithme de mise en page du tableau — la cellule cesse d'être
   contrainte par la largeur de sa colonne et, avec white-space: nowrap,
   débordait dès que la moyenne passait à deux chiffres. */
.it-mean-val {
  color: #b04020;
}

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

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

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

/* ── Séparateur ──────────────────────────────────── */
.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-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;
}
.btn-raz:hover { background: #ccc8c0; }

/* Espacements de la section Contrôle (auparavant en style inline).
   8px sous les boutons : même valeur que le curseur de vitesse de ondes/. */
.btn-raz { margin-top: 6px; }

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

/* ── 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-unit {
  font-size: 0.85em;
  color: #7a8a96;
  font-weight: 400;
}

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

/* Le !important n'avait rien à surcharger : .input-hint est un frère du
   <label>, pas un descendant. Et 14px fixes dans un panneau qui descend à
   200px faisaient tenir l'aide du curseur n sur cinq lignes. */
.input-hint {
  font-size: clamp(10px, 0.9vw, 13px);
  color: #7a8a96;
  line-height: 1.4;
  font-weight: 400;
}

/* Parenthèse de rappel, imbriquée dans #lbl-n-molecules */
.input-hint-sub {
  font-size: 0.92em;
  color: #8a96a0;
}

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

/* Étiquettes alignées sur les 4 crans d'un curseur pas=1 (0-3).
   Reprise telle quelle de ondes/, qui porte le même curseur de vitesse :
   .slider-ticks (flex, space-between) est calibré pour les 5 crans de la
   pesanteur et décale les étiquettes intermédiaires sur un curseur à 4. */
.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;
}

.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;
}
.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 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 {
  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;
  max-height: 250px;
}

.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
   Côte à côte, le bloc d'informations et le canvas se disputent une largeur
   qui ne suffit plus à aucun des deux. On empile alors : simulation en haut,
   sur toute la largeur, informations dessous — mais les deux tableaux
   passent l'un À CÔTÉ de l'autre. Empilés, leurs huit lignes mangeaient plus
   de hauteur que la simulation elle-même, qui se retrouvait réduite à une
   bande où le récipient, carré, n'était plus qu'une vignette.
══════════════════════════════════════════════════ */
@media (max-width: 820px), (max-aspect-ratio: 3/4) {
  #left-col {
    flex-direction: column;
    align-items: center;
  }

  #info-panel {
    /* Sous la simulation, malgré sa position en tête du HTML. */
    order: 1;
    flex-direction: row;
    align-items: flex-start;
    /* Repli si les deux tableaux ne tiennent plus côte à côte */
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(5px, 1.2cqw, 12px);
    flex-shrink: 0;

    /* La carte n'est plus portée par le conteneur mais par chaque tableau. */
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;

    /* Les deux tableaux font ensemble ~31em de large et 5 lignes de haut :
         - 3,2cqw  les maintient dans la largeur de la colonne ;
         - 2,3cqh  leur réserve environ le quart de la hauteur, le reste
                   revenant à la simulation. */
    font-size: clamp(10px, min(3.2cqw, 2.3cqh), 20px);
    width: auto;
    max-width: 100%;
  }

  .info-table {
    background: #fdf8f0;
    border: 1px solid #c8c0b4;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }

  /* Plus de couture entre les deux : ce sont deux cartes distinctes. */
  .info-table + .info-table {
    border-top: 1px solid #c8c0b4;
  }

  /* Deux cartes distinctes : plus de séparation verticale à faire coïncider,
     le tableau des chocs peut donner sa juste part à son sous-tableau. */
  .it-col-chocs-lbl { width: 25%; }
  .it-col-chocs-val { width: 75%; }

  #it-macro { width: 14em; }
  #it-chocs { width: 16em; }
}

/* ══════════════════════════════════════════════════
   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,
  .panel-hint,
  .panel-hint-body,
  .panel-hint-toggle,
  .panel-hint-menu-btn {
    transition: none;
  }
  .btn:active { transform: none; }
}