/* ══════════════════════════════════════════════════
   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 — schéma de l'atome + tableau périodique
══════════════════════════════════════════════════ */

#left-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid #c8c0b4;
  background: #fdf8f0;
}

/* ── Zone schéma (titre + box Propriétés + canvas) ── */
#atom-zone {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Nom de l'élément sélectionné, gros et centré.
   En mode comparaison, les deux spans se partagent la largeur et se calent
   chacun au-dessus de leur demi-zone de schéma. */
#atom-title {
  flex-shrink: 0;
  display: flex;
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 700;
  color: #2c3e50;
  /* line-height généreux : à 1.1, la boîte de ligne est trop juste pour les
     descentes des lettres (g, j, p, q…) en gras — l'overflow:hidden des
     spans (nécessaire pour l'ellipsis horizontal) les rognait alors en bas,
     systématiquement, quel que soit l'atome affiché en dessous. */
  line-height: 1.35;
  padding: clamp(6px, 1vh, 12px) 10px clamp(6px, 1.1vh, 14px);
}
#atom-title span {
  flex: 1;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#atom-title-b { display: none; }

body.compare #atom-title { font-size: clamp(15px, 1.9vw, 28px); }
body.compare #atom-title-b { display: block; }

#atom-main {
  flex: 1;
  min-height: 0;
  position: relative;
}

#atom-canvas-wrap {
  position: absolute;
  inset: 0;
}

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

/* ── Navigation rapide entre éléments (coins hauts du schéma) ──
   Superposée au canvas : le schéma est un cercle centré, les coins hauts
   sont donc libres. Le conteneur laisse passer la souris (pointer-events),
   seuls les boutons la captent. En comparaison, chaque jeu se cale sur sa
   demi-zone, comme les deux moitiés de #atom-title. */
.atom-nav {
  position: absolute;
  top: clamp(4px, 0.8vh, 10px);
  left: clamp(4px, 0.7vw, 12px);
  right: clamp(4px, 0.7vw, 12px);
  display: flex;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
  z-index: 12;
}
#atom-nav-cmp { display: none; }
body.compare #atom-nav-main { right: calc(50% + clamp(4px, 0.7vw, 12px)); }
body.compare #atom-nav-cmp  {
  display: flex;
  left: calc(50% + clamp(4px, 0.7vw, 12px));
}
/* Mode test : l'élément est imposé par le tirage — pas de navigation
   (le coin haut gauche est d'ailleurs pris par #test-progress-bar). */
body.test .atom-nav { display: none; }

/* Même pastille bleue que #tp-toggle (charte du site) */
.atom-nav-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #eaf2fa;
  border: 1.5px solid #2a6aaa;
  border-radius: 6px;
  color: #2a6aaa;
  font-family: inherit;
  font-size: clamp(10px, 1.2vh, 14px);
  font-weight: 700;
  line-height: 1.2;
  padding: clamp(3px, 0.5vh, 6px) clamp(6px, 0.7vw, 10px);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.atom-nav-btn:hover:not(:disabled)  { background: #2a6aaa; color: #fff; }
.atom-nav-btn:active:not(:disabled) { transform: scale(0.97); }
.atom-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Triangles pleins (mêmes glyphes que les flèches d'ionisation ▲▼) plutôt
   que des chevrons ‹ › : ceux-ci sont des signes typographiques posés sur la
   ligne de base, donc visuellement décalés vers le haut dans le cadre. Les
   formes géométriques, elles, sont centrées sur le cadratin. Le `display:
   flex` + `line-height: 1` neutralise en plus la demi-interligne résiduelle,
   pour un centrage vertical exact quelle que soit la police. */
.atom-nav-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78em;
  line-height: 1;
}
/* Demi-zones trop étroites pour le libellé : chevrons seuls, l'intitulé
   complet restant dans l'infobulle (title). */
body.compare .atom-nav-lab { display: none; }
/* Réduit au seul triangle, le bouton garde une cible carrée confortable */
body.compare .atom-nav-btn {
  justify-content: center;
  min-width: clamp(26px, 2.6vw, 34px);
}

/* ── Légende (neutron / proton / électron / s / p) ──
   Affichée dans le panneau de droite, section Affichage
   (masquable via la case à cocher associée). */
#atom-legend {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.5vh, 6px);
  padding: clamp(6px, 0.8vw, 10px) clamp(8px, 1vw, 12px);
  margin-top: clamp(6px, 0.8vh, 10px);
  background: #fff;
  border: 1px solid rgba(200,192,180,0.7);
  border-radius: 6px;
}

.leg-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(10px, 1vw, 13px);
  color: #2c3e50;
  white-space: nowrap;
}

.leg-dot {
  width:  clamp(10px, 1.1vw, 14px);
  height: clamp(10px, 1.1vw, 14px);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leg-neutron  { background: #fff;     border: 1.5px solid #b0aca4; }
.leg-proton   { background: #c53222;  border: 1.5px solid #8a1e10; }
.leg-electron {
  background: #2a6aaa;
  border: 1.5px solid #1a4a7a;
  color: #fff;
  font-size: clamp(8px, 0.8vw, 11px);
  font-weight: 700;
  line-height: 1;
}

.leg-line {
  width: clamp(20px, 2.2vw, 30px);
  flex-shrink: 0;
  border-top-width: 2px;
  border-top-color: #5a6a78;
}
.leg-s { border-top-style: dashed; }
.leg-p { border-top-style: dotted; }
/* Capacité de la sous-couche, en retrait discret après son libellé */
.leg-cap {
  color: #7a8a96;
  font-size: 0.9em;
  margin-left: 3px;
}

/* ══════════════════════════════════════════════════
   TABLEAU PÉRIODIQUE RÉDUIT (bas de la zone d'animation)
══════════════════════════════════════════════════ */

/* Bas de la colonne gauche : barre de saisie du mode test (masquée hors
   test) + tableau périodique. Conteneur neutre hors mode test — il ne sert
   qu'à leur donner une barre de défilement commune quand la fenêtre devient
   trop courte (cf. body.test #left-bottom, section MODE TEST). */
#left-bottom {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

#tp-zone {
  flex: 0 0 auto;
  border-top: 1.5px solid #c8c0b4;
  padding: clamp(5px, 0.8vh, 10px) clamp(6px, 0.8vw, 12px);
}

/* ── En-tête du tableau : bouton réduire/déplier ──
   Réduit, le tableau ne laisse que cette ligne : toute la hauteur libérée
   revient au schéma de l'atome. Le libellé n'apparaît qu'une fois replié,
   pour rappeler ce que le bouton rouvre. */
#tp-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: clamp(1px, 0.3vh, 4px);
}

#tp-head-lab {
  display: none;
  margin-right: auto;
  font-size: clamp(11px, 1.2vh, 14px);
  font-weight: 600;
  color: #7a8a96;
}
body.tp-collapsed #tp-head-lab { display: block; }
body.tp-collapsed #tp-head     { margin-bottom: 0; }
body.tp-collapsed #tp-grid     { display: none; }

/* Bouton bien visible : pastille bleue de la charte, avec libellé —
   le chevron seul se perdait au-dessus de la grille colorée. */
#tp-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #eaf2fa;
  border: 1.5px solid #2a6aaa;
  border-radius: 6px;
  cursor: pointer;
  font-size: clamp(11px, 1.25vh, 14px);
  font-weight: 700;
  line-height: 1.2;
  color: #2a6aaa;
  padding: clamp(3px, 0.5vh, 6px) clamp(7px, 0.8vw, 12px);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
#tp-toggle:hover { background: #2a6aaa; color: #fff; }

#tp-toggle::after {
  content: '▾';
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.2s;
}
body.tp-collapsed #tp-toggle::after { transform: rotate(180deg); }

#tp-grid {
  display: grid;
  grid-template-columns:
    clamp(16px, 2.2vw, 26px)
    repeat(2, clamp(34px, 6vw, 92px))
    clamp(16px, 1.8vw, 30px)
    repeat(6, clamp(34px, 6vw, 92px));
  grid-template-rows: clamp(13px, 1.8vh, 20px) repeat(3, clamp(34px, 9.5vh, 84px));
  gap: clamp(2px, 0.35vw, 5px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  justify-content: center;
  position: relative;
}

/* Étiquettes de colonnes (1, 2, 3-12, 13…18) et de périodes (1-3) */
.tp-colnum, .tp-rownum {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(9.6px, 1.8vh, 18px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tp-colnum { color: #2a6aaa; }
.tp-colnum-gap { color: #8a7a68; font-size: clamp(7.8px, 1.38vh, 13px); }
.tp-rownum { color: #8e44ad; }

/* Bande hachurée : signale que les colonnes 3 à 12 (bloc d, absent
   de H à Ar) ont été recollées artificiellement pour combler le trou. */
.tp-gap-strip {
  grid-column: 4;
  background: repeating-linear-gradient(
    135deg,
    rgba(138, 122, 104, 0.16) 0px,
    rgba(138, 122, 104, 0.16) 3px,
    transparent 3px,
    transparent 7px
  );
  border-left: 1.5px dashed #b0a696;
  border-right: 1.5px dashed #b0a696;
  pointer-events: none;
}

.tp-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf9f6;
  border: 1.5px solid #c8c0b4;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.tp-cell:hover  { background: #eef4fa; border-color: #2a6aaa; }
.tp-cell:active { transform: scale(0.95); }

.tp-sym {
  font-size: clamp(12px, 3.1vh, 26px);
  font-weight: 700;
  color: #2c3e50;
  line-height: 1;
}

.tp-a, .tp-z {
  position: absolute;
  left: clamp(2px, 0.3vw, 5px);
  font-size: clamp(8px, 1.55vh, 16px);
  font-weight: 600;
  color: #7a8a96;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tp-a { top:    clamp(2px, 0.45vh, 5px); }
.tp-z { bottom: clamp(2px, 0.45vh, 5px); }

/* Élément comparé (mode Comparer) : liseré orangé, distinct du bleu plein
   de l'élément sélectionné. */
.tp-cell.compared {
  border-color: #d0a060;
  box-shadow: inset 0 0 0 2px rgba(208, 128, 48, 0.5);
}

.tp-cell.selected { background: #2a6aaa; border-color: #1a4a7a; }
.tp-cell.selected .tp-sym { color: #fff; }
.tp-cell.selected .tp-a,
.tp-cell.selected .tp-z   { color: rgba(255,255,255,0.82); }

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

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

/* ── Titre du panneau (même charte que cinetique/) ── */
.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; container-type: inline-size; }

.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-primary {
  background: #2a6aaa;
  color: #fff;
  font-size: clamp(13px, 1.3vw, 16px);
  padding: 11px 6px;
}
.btn-primary:hover { background: #1f5588; }
.btn-primary:disabled {
  background: #a0b8c8;
  cursor: not-allowed;
  transform: none;
}

/* ── Boutons de mode (toggle) ────────────────── */
.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;
}
.btn-toggle-one:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.btn-toggle-one:disabled:hover { background: #ece8e0; }

/* ── Ionisation (± électrons) ──────────────────
   Repris du widget coefficient de reaction/ (.coeff-widget) : une valeur
   dans un cadre, avec une colonne de flèches ▲▼ accolée à droite. Un
   widget par atome, symbole à gauche, séparés par un trait vertical en
   mode Comparer. */
.ion-title {
  font-size: clamp(12px, 1.25vw, 15px);
  font-weight: 600;
  color: #2c3e50;
  margin: 10px 0 7px;
}

.hint-text {
  font-size: clamp(9px, 0.85vw, 11px);
  color: #7a8a96;
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}

.ion-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(4px, 5.5cqw, 16px);
  flex-wrap: nowrap;
  overflow: hidden;
}
.ion-atom {
  display: flex;
  align-items: center;
  gap: clamp(2px, 2.3cqw, 7px);
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}
.ion-sym {
  font-weight: 700;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: clamp(6px, 5.9cqw, 17px);
  color: #2c3e50;
  white-space: nowrap;
  flex-shrink: 0;
}

.ion-widget {
  display: inline-flex;
  align-items: stretch;
  border: 2.5px solid #90b4d8;
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
}
.ion-value {
  width: clamp(15px, 14.5cqw, 40px);
  height: clamp(18px, 13.6cqw, 34px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(8px, 8.2cqw, 20px);
  font-weight: 700;
  color: #2a6aaa;
  background: #fff;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}
.ion-value.ion-count-cation { color: #b02818; }   /* moins d'électrons */
.ion-value.ion-count-anion  { color: #2a6aaa; }   /* plus d'électrons */

.ion-arrows {
  width: clamp(8px, 7.3cqw, 20px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid #90b4d8;
}
.ion-arrow-btn {
  flex: 1;
  border: none;
  background: #f0ecf4;
  color: #5a6a78;
  font-size: clamp(6px, 4.5cqw, 9px);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 0.1s;
}
.ion-arrow-btn:first-child { border-bottom: 1.5px solid #90b4d8; }
.ion-arrow-btn:hover:not(:disabled) { background: #dedad2; color: #2c3e50; }
.ion-arrow-btn:active:not(:disabled) { background: #ccc8c0; }
.ion-arrow-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.ion-unit {
  font-size: clamp(6px, 6.4cqw, 19px);
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  color: #2c3e50;
}

.ion-sep {
  align-self: stretch;
  width: 1.5px;
  min-height: clamp(18px, 13.6cqw, 34px);
  flex-shrink: 0;
  background: #c8c0b4;
  border-radius: 1px;
}

/* Groupe de boutons 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);
}

/* ── Sélecteur de l'élément comparé ──────────── */
.cmp-label {
  display: block;
  font-size: clamp(10px, 0.9vw, 12px);
  color: #7a8a96;
  margin: 7px 0 4px;
}

.cmp-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #c8c0b4;
  border-radius: 5px;
  font-size: clamp(11px, 1.05vw, 13.5px);
  font-family: inherit;
  background: #fff;
  color: #2c3e50;
  cursor: pointer;
}
/* Gaz nobles (He, Ne, Ar) en gras dans la liste — et le libellé refermé
   reprend le gras quand l'un d'eux est choisi (classe posée par ui.js). */
.cmp-select option.opt-noble { font-weight: 700; }
.cmp-select.noble { font-weight: 700; }

/* ── Cases à cocher ──────────────────────────── */
.chk-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(10px, 0.9vw, 12px);
  color: #4a5a68;
  cursor: pointer;
  line-height: 1.3;
  margin-bottom: 6px;
}
.chk-label input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* ── 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 (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;
  /* Le texte est long : on laisse assez de hauteur pour l'afficher en entier
     sur grand écran, et on autorise le défilement interne si la place manque
     (petits écrans) plutôt que de rogner la fin. */
  overflow-y: auto;
  transition: max-height 0.25s ease, padding 0.25s ease;
  max-height: min(560px, 60vh);
}

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

/* ══════════════════════════════════════════════════
   MODE TEST
   Même charte que reaction/ et titrage/ (overlay, pop-up de
   correction, indicateur de progression), plus la barre de saisie
   de la configuration électronique sous le schéma.
══════════════════════════════════════════════════ */

/* ── Bascules d'affichage en mode test ─────────
   Tout reste en place (nom de l'élément, rappel Z/A, tableau périodique) :
   la barre de saisie vient s'intercaler entre le schéma et le tableau
   périodique, et c'est le schéma — seul élément élastique de la colonne —
   qui se réduit d'autant. Le tableau reste consultable mais n'est plus
   cliquable : l'atome est imposé par le test. */
#test-bar { display: none; }
body.test #test-bar { display: flex; }
body.test #tp-grid { pointer-events: none; }

/* Fenêtre trop courte : plutôt que de laisser le schéma rapetisser sans fin
   (c'est le seul élément élastique de la colonne), on lui impose une hauteur
   plancher et on fait défiler le bas — barre de saisie ET tableau
   périodique ensemble, d'où leur conteneur commun. */
body.test #atom-zone   { min-height: clamp(200px, 70vh, 475px); }
body.test #left-bottom {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Fluidité du défilement :
     - `contain: paint` isole le repaint dans ce bloc. Sans lui, chaque
       image de défilement invalide une zone qui englobe le canvas du
       schéma — une texture large (résolution × devicePixelRatio) coûteuse
       à repeindre, alors qu'elle n'a pas bougé d'un pixel.
     - `overscroll-behavior` empêche la poursuite du geste vers les
       parents une fois la butée atteinte : la zone défilante est courte,
       on l'atteint dès le premier cran de molette.
     - `scrollbar-gutter` réserve la place de la barre une fois pour
       toutes, plutôt que de relayouter le bloc à son apparition. */
  contain: paint;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Le trait qui sépare le schéma du bas de la colonne est porté par le
   conteneur de défilement, pas par la barre de saisie : il reste ainsi
   visible sous le schéma même quand on a fait défiler le bloc. */
body.test #left-bottom { border-top: 1.5px solid #c8c0b4; }
body.test #test-bar    { border-top: none; }
/* La capacité des sous-couches (« 2 électrons max »… ) rappelée dans la
   légende donnerait la réponse : masquée pendant le test. */
body.test .leg-cap { display: none; }

/* ── Barre de saisie (entre le schéma et le tableau périodique) ──
   Compacte : elle s'ajoute à une colonne déjà pleine, la place vient du
   schéma. */
#test-bar {
  flex: 0 0 auto;
  flex-direction: column;
  gap: clamp(3px, 0.7vh, 9px);
  padding: clamp(4px, 0.8vh, 10px) clamp(8px, 1.2vw, 16px);
  border-top: 1.5px solid #c8c0b4;
  background: #fdf8f0;
}

.test-bar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(6px, 1.5vw, 20px);
}

/* Le bouton Valider ne prend pas toute la largeur ici (contrairement aux
   boutons du panneau, cf. .btn) — et se détache un peu de la question qui
   le précède sur la même ligne. */
.btn-valider-test {
  width: auto;
  margin-left: clamp(4px, 1.2vw, 18px);
  padding: clamp(6px, 0.9vh, 9px) clamp(16px, 2.2vw, 30px);
}

#test-bar-cfg {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(6px, 1.1vw, 16px);
}

/* Un terme de la configuration : « 2p » suivi de sa zone de saisie, placée
   là où se trouverait l'exposant. */
.cfg-term {
  display: inline-flex;
  align-items: flex-start;
  font-family: monospace;
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 25px);
  line-height: 1.1;
}

.cfg-exp {
  width: 2.1ch;
  margin-left: 1px;
  padding: 1px 0;
  font-family: monospace;
  font-weight: 700;
  font-size: 0.68em;
  text-align: center;
  color: inherit;
  background: #fff;
  border: 1.5px solid #b0a898;
  border-radius: 4px;
  outline: none;
}
.cfg-exp:focus { border-color: #2a6aaa; box-shadow: 0 0 0 2px rgba(42,106,170,0.18); }
.cfg-exp:disabled { background: #f2eee6; }

/* Questions propres à un thème du test. Sélecteurs préfixés par body.test :
   il faut passer devant le `display: flex` de .test-q, de même spécificité. */
body.test .mode-constit,
body.test .mode-stab            { display: none; }
body.test-constit .mode-constit { display: flex; }
body.test-stab   .mode-stab     { display: flex; }

/* Symbole de l'ion : « Cl » donné, la charge se saisit en exposant */
.ion-formule {
  display: inline-flex;
  align-items: flex-start;
  font-family: monospace;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 26px);
  line-height: 1.1;
  color: #2c3e50;
}
.ion-charge { width: 3.4ch; }

/* ── Comptage des particules / couche de valence ── */
.test-q {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 8px);
}
.test-q-lab {
  font-size: clamp(11px, 1.25vw, 16px);
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
}

.test-input {
  flex: 0 0 auto;
  width: clamp(38px, 4vw, 54px);
  padding: 5px 4px;
  font-family: monospace;
  font-weight: 700;
  font-size: clamp(13px, 1.35vw, 17px);
  text-align: center;
  color: #2c3e50;
  background: #fff;
  border: 1.5px solid #b0a898;
  border-radius: 5px;
  outline: none;
}
.test-input:focus { border-color: #2a6aaa; box-shadow: 0 0 0 2px rgba(42,106,170,0.18); }
.test-input:disabled { background: #f2eee6; }

/* Correction : réponse juste / fausse (vaut pour les deux types de zones) */
.test-input.ok, .cfg-exp.ok {
  border-color: #2a8a50;
  background: #e6f4ea;
}
.test-input.ko, .cfg-exp.ko {
  border-color: #c03010;
  background: #fbe6e0;
}

/* ── Bouton d'entrée/sortie du mode test ────── */
.btn-test-mode {
  background: #4a2a8a;
  color: #fff;
  font-size: clamp(13px, 1.3vw, 16px);
  padding: 11px 6px;
}
.btn-test-mode:hover { background: #3a1a7a; }
.btn-quitter-test {
  background: #c03010;
  color: #fff;
  font-size: clamp(13px, 1.3vw, 16px);
  padding: 11px 6px;
}
.btn-quitter-test:hover { background: #a02000; }

/* ── Indicateur de progression (coin du schéma) ── */
#test-progress-bar {
  display: none;
  position: absolute;
  left: clamp(6px, 1vw, 14px);
  top: clamp(6px, 1vh, 14px);
  font-size: clamp(14px, 1.6vw, 21px);
  font-weight: 700;
  color: #4a2a8a;
  line-height: 1.3;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}
#test-progress-bar.visible { display: block; }

/* ── Pop-up de correction (bas du schéma) ───── */
#test-popup {
  display: none;
  position: absolute;
  bottom: clamp(8px, 1.5vh, 18px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 94%;
  background: #fdf8f0;
  border: 2px solid #c8c0b4;
  border-radius: 12px;
  padding: clamp(9px, 1.4vh, 14px) clamp(14px, 2vw, 24px);
  box-shadow: 0 4px 24px rgba(44,40,32,0.32);
  z-index: 50;
  text-align: center;
  flex-direction: column;
  gap: 10px;
}
#test-popup.visible { display: flex; }
#test-popup-msg {
  font-size: clamp(14px, 1.6vw, 21px);
  font-weight: 700;
}
#test-popup-msg.ok  { color: #1a6a30; }
#test-popup-msg.nok { color: #a01010; }
/* Remarque ajoutée sous le message (confusion couche / sous-couche) */
.popup-astuce {
  margin-top: 5px;
  font-size: 0.74em;
  font-weight: 600;
  color: #c05820;
}
#test-popup-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Overlay modal (choix du thème, score final) ── */
#test-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(44,40,32,0.45);
  z-index: 100;
  align-items: center; justify-content: center;
}
#test-overlay.visible { display: flex; }

.test-modal {
  background: #fdf8f0;
  border: 2px solid #c8c0b4;
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 480px; width: 90%;
  box-shadow: 0 8px 32px rgba(44,40,32,0.28);
  text-align: center;
  display: flex; flex-direction: column; gap: 14px;
}
.test-modal h2 { font-size: 20px; font-weight: 700; color: #2c3e50; margin: 0; }
.test-modal p  { font-size: 16px; color: #5a6a78; line-height: 1.55; margin: 0; }
.test-modal-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn-test-confirm {
  padding: 10px 28px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 16px; font-weight: 700; font-family: inherit;
  transition: background 0.12s;
}
.btn-test-oui  { background: #2a6aaa; color: #fff; }
.btn-test-oui:hover { background: #1a5a9a; }
.btn-test-non  { background: #dedad2; color: #5a6a78; border: 1px solid #b0a898; }
.btn-test-non:hover { background: #ccc8c0; }
.btn-test-green { background: #2a8a50; color: #fff; }
.btn-test-green:hover { background: #1a7040; }
.btn-test-orange { background: #c05820; color: #fff; }
.btn-test-orange:hover { background: #a04010; }
.btn-test-confirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-test-confirm:disabled:hover { background: #2a6aaa; }

#test-score-display { font-size: 42px; font-weight: 700; color: #2a6aaa; }