/* Rôle du fichier :
👉 fondations globales
      reset
      body
      couleurs
      typo globale
*/
:root {
  --bg: #0f172a;          /* bleu nuit profond (plus premium) */
  --text: #e5e7eb;        /* blanc cassé */
  --muted: #94a3b8;       /* gris froid */
  --accent: #D7340b;      /* TON rouge conservé */
}

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BASE */
body {
  min-height: 100dvh;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(229,228,226,0.15),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #E5E4E2,
      #536878,
      #0A0A0A
    );
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  animation: breathe 6s ease-in-out infinite;
  overflow: visible;
}

body.transitioning {
  transform: scale(1.02);
  transition: transform 0.4s ease;
}

/* Grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;

  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.08) 0px,
    rgba(255,255,255,0.08) 1px,
    transparent 1px,
    transparent 10px
  );

  pointer-events: none;
  opacity: 0.2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;

  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255,255,255,0.4),
    transparent 45%
  );

  pointer-events: none;
  opacity: 0.25;
  mix-blend-mode: soft-light;
}