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

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.47;
  letter-spacing: -0.012em;
  color: var(--text);
  background-color: var(--bg);
  /* Fond du moment de la journée : trois lueurs douces, fixes au défilement. */
  background-image:
    radial-gradient(60% 55% at 8% 0%, color-mix(in srgb, var(--wp-1) var(--wp-strength), transparent), transparent 72%),
    radial-gradient(50% 50% at 96% 6%, color-mix(in srgb, var(--wp-2) var(--wp-strength), transparent), transparent 70%),
    radial-gradient(70% 60% at 55% 100%, color-mix(in srgb, var(--wp-3) var(--wp-strength), transparent), transparent 72%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}

body:has(dialog[open]) { overflow: hidden; }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { letter-spacing: var(--tracking-tight); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }

button { cursor: pointer; }

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

[hidden] { display: none !important; }

.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;
}

.icon { display: inline-flex; flex: none; }
.icon svg { display: block; }

.boot { color: var(--text-3); padding: 24px; }

/* Apparition douce de chaque vue (opacité seule : un transform casserait position: fixed). */
.main > * { animation: view-in var(--dur-slow) var(--ease) both; }
@keyframes view-in { from { opacity: 0; } }