/* prt.run - socle commun, chargé par toutes les pages avant leur propre CSS.
   Couleurs, polices et arrondis de la charte : définis une fois ici, utilisés via var(--nom). */

:root {
  --bg: #eef2f6;
  --surface: #fff;
  --ink: #1b2a3a;
  --muted: #5f7184;
  --faint: #8a99a8;
  --line: #d4dde6;
  --hover: #e7edf3;
  --primary: #15527d;
  --primary-hover: #0f3f61;
  --on-primary: #fff;
  --gold: #b08d3a;
  --gold-soft: rgba(176, 141, 58, 0.18);
  --gold-line: rgba(176, 141, 58, 0.55);
  --up: #1a7f37;
  --down: #c0392b;
  --ok: #1a7f37;
  --danger: #c0392b;
  --radius: 8px;
  --radius-lg: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:
    "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
  --text-scale: 1;  /* text size multiplier, a page may raise it (insights: 1.1) */
  --shadow:
    0 1px 2px rgba(27, 42, 58, 0.04), 0 18px 40px -30px rgba(27, 42, 58, 0.45);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* En-tête commun à toutes les pages (même HTML partout, seul le nom change) :
   logo -> accueil prt.run, nom -> haut de la page, PRT.RUN à droite (nouvel onglet). */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand a {
  display: flex;
  color: var(--ink);
  text-decoration: none;
}
.brand-logo {
  width: 30px;
  height: 30px;
  flex: none;
}
.brand-name {
  font-family: var(--serif);
  font-size: calc(20px * var(--text-scale));
  font-weight: 600;
  letter-spacing: 0.01em;
}
.back {
  font-size: calc(11px * var(--text-scale));
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.back:hover {
  color: var(--primary);
  text-decoration: none;
}