/* Palette et typographie reprises du carnet de tests Stockatron. */
:root {
  --fond: #f4f8fd;
  --surface: #ffffff;
  --surface-2: #eaf1fb;
  --encre: #10267a;
  --encre-douce: #4a5a8f;
  --trait: #d5e0f2;
  --bleu: #1f4fd8;
  --turquoise: #1fb0a5;
  --violet: #7a45d6;
  --magenta: #d6409f;
  --ombre: 0 8px 24px rgba(43, 91, 215, 0.10);
  --rayon: 22px;
  --police: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --manuscrite: "Great Vibes", "Segoe Script", cursive;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fond: #0c1430;
    --surface: #141f45;
    --surface-2: #1b2a5a;
    --encre: #e6ecff;
    --encre-douce: #a8b6e0;
    --trait: #2a3a72;
    --bleu: #6f93ff;
    --turquoise: #45d1c5;
    --violet: #ad8bff;
    --magenta: #f07cc4;
    --ombre: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
}
.page {
  max-width: 760px;
  margin: 0 auto;
  padding-block: max(24px, env(safe-area-inset-top, 0px)) 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 28px;
}
h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }

.entete { display: flex; flex-direction: column; gap: 10px; }
.salut { font-family: var(--manuscrite); font-size: 44px; line-height: 1; color: var(--bleu); }
.degrade {
  width: 72px;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(120deg, var(--bleu), var(--violet));
}
.intro { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.intro p { margin: 0; max-width: 62ch; color: var(--encre-douce); }

@media (max-width: 480px) {
  h1 { font-size: 22px; }
  .salut { font-size: 38px; }
}