/* Monte Carlo Search — NRPA dans votre navigateur
   Copyright (c) 2026 Tristan Cazenave. Tous droits réservés — voir LICENSE.

   UNE PAGE QUI SE LIT ET QUI SE MANIPULE. Elle explique, puis elle laisse faire :
   les réglages et le bouton sont au milieu, le code en dessous, et tout tient
   dans une colonne qu'on peut lire d'un bout à l'autre. */
:root {
  --fond: #0f1620;
  --fond-2: #16202c;
  --fond-3: #1e2a38;
  --bord: #2c3a4c;
  --texte: #e6edf5;
  --texte-doux: #9aabbf;
  --accent: #d8a13a;
  --accent-sombre: #a9791f;
  --bleu: #4a9bd4;
  --rouge: #d9594c;
  --rayon: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15.5px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.pousse { flex: 1; }
a { color: var(--accent); }

#tete {
  padding: 34px 24px 24px;
  background: radial-gradient(1200px 520px at 50% -10%, #1d2c3e 0%, transparent 70%), var(--fond);
  border-bottom: 1px solid var(--bord);
  display: flex; flex-direction: column; align-items: center;
}
#tete h1 { margin: 6px 0 0; font-size: 32px; letter-spacing: -.5px; }
.sous-titre { margin: 10px 0 0; color: var(--texte-doux); max-width: 56ch;
  text-align: center; font-size: 15px; }
.langues {
  display: inline-flex; align-self: flex-end; border: 1px solid var(--bord);
  border-radius: 9px; overflow: hidden; background: var(--fond-3);
}
.langues button {
  border: 0; background: transparent; color: var(--texte-doux); font: inherit;
  font-size: 11px; letter-spacing: .08em; padding: 3px 9px; cursor: pointer;
}
.langues button + button { border-left: 1px solid var(--bord); }
.langues button[aria-pressed="true"] { background: var(--accent); color: #201704; }

main { max-width: 980px; margin: 0 auto; padding: 22px 18px 60px;
  display: flex; flex-direction: column; gap: 18px; }
.bloc { border: 1px solid var(--bord); border-radius: 14px; background: var(--fond-2);
  padding: 20px 22px; }
.bloc h2 { margin: 18px 0 8px; font-size: 13px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texte-doux); font-weight: 650; }
.bloc > div:first-child > p:first-child, .bloc p:first-child { margin-top: 0; }
.bloc p { margin: 0 0 11px; }
code { background: #0c131c; border: 1px solid var(--bord); border-radius: 5px;
  padding: 1px 5px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; }
.aide { color: var(--texte-doux); font-size: 13.5px; }
.contact { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bord); }

.pseudo {
  margin: 0; background: #0c131c; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.65;
  font-family: ui-monospace, SFMono-Regular, monospace; color: #cfdae7;
}

/* ───────────────────────────── les réglages ───────────────────────────── */
.reglages { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: flex-end; }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ > span { font-size: 11.5px; letter-spacing: .05em; color: var(--texte-doux);
  text-transform: uppercase; font-weight: 600; }
/* « α » passé en capitales devient « Α », qu'on lit « A ». Une lettre grecque
   n'a pas de capitale utile ici : on la laisse telle quelle. */
.champ.alpha > span { text-transform: none; font-size: 14px; letter-spacing: 0; }
.champ input, .champ select {
  background: var(--fond-3); border: 1px solid var(--bord); border-radius: 8px;
  padding: 7px 9px; width: 92px;
}
.champ.large select { width: 240px; }
.champ.fige output { padding: 7px 0; font-variant-numeric: tabular-nums;
  color: var(--accent); font-weight: 650; }
.btn {
  border: 1px solid var(--bord); background: var(--fond-3); color: var(--texte);
  padding: 8px 16px; border-radius: var(--rayon); cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .btn:hover:not(:disabled) { background: #27374a; } }
.btn-primaire { background: linear-gradient(180deg, #e7b955, var(--accent));
  border-color: var(--accent-sombre); color: #201704; font-weight: 650; }
.btn-mini { padding: 5px 10px; font-size: 13px; }
#aide-reglages { min-height: 1.6em; margin: 10px 0 0; color: var(--texte-doux);
  font-size: 13.5px; }

/* ─────────────────────────────── le suivi ─────────────────────────────── */
#suivi { margin-top: 14px; }
.chiffres { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; }
.chiffres .etiq { display: block; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texte-doux); }
.chiffres strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.etat { color: var(--accent); font-size: 13px; }
#courbe { width: 100%; height: 90px; margin-top: 10px; display: block;
  background: #0c131c; border: 1px solid var(--bord); border-radius: var(--rayon); }

.erreur { margin-top: 14px; border: 1px solid #7a2e26; background: #2a1512;
  border-radius: var(--rayon); padding: 12px 14px; }
.erreur pre { margin: 6px 0 0; white-space: pre-wrap; font-size: 13px; color: #f3c8c2; }

#dessin { width: 100%; height: auto; background: #0c131c; border: 1px solid var(--bord);
  border-radius: var(--rayon); }
.mesure { font-size: 17px; font-weight: 650; }
.suite { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12.5px;
  color: var(--texte-doux); word-break: break-word; }
#pan-suite summary { cursor: pointer; color: var(--texte-doux); font-size: 13px; }
#pan-suite pre { white-space: pre-wrap; word-break: break-all; font-size: 12px;
  color: var(--texte-doux); background: #0c131c; border: 1px solid var(--bord);
  border-radius: 8px; padding: 10px; max-height: 180px; overflow: auto; }
.avertit { color: #f0b9a8; font-size: 13.5px; }

/* ────────────────────────────── l'interface ────────────────────────────── */
.interface { border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.interface td { padding: 3px 14px 3px 0; vertical-align: top; }
.interface td:first-child { white-space: nowrap; }
.interface .dit { color: var(--texte-doux); }

.barre-code { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; }
#source {
  width: 100%; min-height: 420px; resize: vertical;
  background: #0c131c; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 14px 16px; font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12.8px; line-height: 1.6; tab-size: 2; white-space: pre;
  overflow-wrap: normal; overflow-x: auto;
}
#source:focus { outline: 2px solid var(--accent-sombre); outline-offset: -1px; }

@media (max-width: 620px) {
  #tete { padding: 24px 16px 18px; }
  #tete h1 { font-size: 26px; }
  .bloc { padding: 16px 14px; border-radius: 12px; }
  main { padding: 14px 10px 40px; }
  .champ input, .champ select, .champ.large select { width: 100%; }
  .champ { flex: 1 1 130px; }
}