/* ============================================================
   base.css — variables, remise à zéro, typographie, fond
   Tu n'as normalement pas besoin de toucher à ce fichier.
   Pour changer les couleurs du site, modifie le bloc :root ci-dessous.
   ============================================================ */

:root {
  /* Couleurs — change ces valeurs pour reteinter tout le site d'un coup */
  --fond: #0B0A10;
  --surface: #141320;
  --surface-haute: #1B1926;
  --accent: #0A6BFF;
  --accent-clair: #3D8CFF;
  --accent-sombre: #0055D6;
  --sur-accent: #EAF3FF;
  --texte: #ECEAF5;
  --texte-2: #9A93AE;
  --texte-3: #6E687F;
  --bord: rgba(236, 234, 245, .14);
  --bord-fort: rgba(236, 234, 245, .18);
  --voile: rgba(236, 234, 245, .06);

  /* Typographie */
  --sans: Archivo, system-ui, -apple-system, sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace;

  /* Gabarit */
  --largeur: 1200px;
  --marge-x: 32px;

  /* Ombres */
  --ombre-carte: 0 26px 60px rgba(0, 0, 0, .6);
  --ombre-dure: 0 12px 34px rgba(0, 0, 0, .55);
  --lueur: 0 8px 24px rgba(10, 107, 255, .35);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--texte); text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--accent); color: var(--fond); }

/* Accessibilité : contour visible uniquement au clavier */
:focus-visible {
  outline: 2px solid var(--accent-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 300;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--sur-accent);
  font-family: var(--mono);
  font-size: 13px;
}
.saut-contenu:focus { left: 8px; }

/* ---------- Arrière-plan ----------
   Deux calques décoratifs : les halos bleus, et un quadrillage très fin.
   Pour un fond entièrement uni, supprime le bloc .halos::before ci-dessous. */

.halos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(10, 107, 255, .22), transparent 62%),
    radial-gradient(700px 500px at 92% 12%, rgba(60, 110, 220, .14), transparent 60%),
    radial-gradient(800px 600px at 50% 105%, rgba(10, 107, 255, .12), transparent 60%),
    radial-gradient(1100px 700px at 20% 10%, rgba(40, 120, 255, .10), transparent 60%),
    radial-gradient(900px 700px at 85% 40%, rgba(80, 130, 230, .07), transparent 62%);
}

/* Quadrillage fin, estompé vers le bas */
.halos::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(236, 234, 245, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 234, 245, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 78%);
}

/* ---------- Animations ---------- */

@keyframes pulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

@keyframes onde {
  from { transform: scale(1);   opacity: .6; }
  to   { transform: scale(2.6); opacity: 0;  }
}

@keyframes reflet {
  0%       { left: -60%; }
  55%,100% { left: 130%; }
}

@keyframes apparition {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes respirer {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ---------- Texte réservé aux lecteurs d'écran ---------- */

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

/* ---------- Respect du réglage « réduire les animations » ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  /* Les blocs animés à l'apparition doivent rester visibles */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}