/* Base : couleurs, polices et mise en page générale.
   Layout : un bandeau de titre, puis trois colonnes (le monde, les courbes, les commandes), puis les notes.
   Deux colonnes sur écran moyen (les commandes passent dessous), une seule sur mobile.
   Thème volontairement unique et sombre : un ciel nocturne, atomes d'hydrogène en gris (plus clairs quand ils s'agitent), éléments en couleur. */
:root {
  --bg: #0e1118;
  --panel: #151a24;
  --line: #262e3d;
  --fg: #e6e2d8;
  --muted: #9097a6;
  --kin: #f2a541;
  --pot: #6f9cf0;
  --em: #5fc9b0;
  --tot: #e6e2d8;
  --order: #d1708f;
  --plus: #ff7a6b;
  --minus: #5cc8ff;
  --rad: #b39dff;
  /* photons, du plus faible (rouge) au plus énergétique (bleu-violet) */
  --ph-0: #ff4a3d;
  --ph-1: #ff8a3d;
  --ph-2: #ffc23d;
  --ph-3: #e8e85a;
  --ph-4: #7ee07a;
  --ph-5: #4fd0e0;
  --ph-6: #5a8cff;
  --ph-7: #a56cff;
  --exp: #9ad46a;
  --nuc: #ffd84a;
  --nu: #c8ccd4;
  --f-display: "Newsreader", Georgia, serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}
html,
body {
  background: var(--bg);
  color: var(--fg);
}
body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  padding-inline: 16px;
  padding-block: 12px 40px;
}
.wrap {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Thin title band across the full width: title and one-line summary side by side */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
h1 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
}
.band p {
  flex: 1 1 40ch;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
/* Three columns: world, curves, controls */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(240px, 0.7fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1180px) {
  .grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .grid > .controls {
    grid-column: 1 / -1;
  }
}
@media (max-width: 820px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}