/* ============================================================
   base.css — Styles globaux de base
   Reset minimal, body, scrollbar, effets d'arrière-plan
   (étoiles, blobs). Utilisé sur toutes les pages.
   ============================================================ */

/* --- Reset universel --- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--surface);
  color: var(--on-surface);
  overflow-x: hidden;
  margin: 0;
}

/* --- Scrollbar personnalisée (webkit) --- */
::-webkit-scrollbar        { width: 4px; }
::-webkit-scrollbar-track  { background: var(--surface); }
::-webkit-scrollbar-thumb  { background: var(--outline-variant); border-radius: 2px; }

/* ===========================================
   EFFETS D'ARRIÈRE-PLAN
   Superposés avec z-index bas pour rester
   derrière tout le contenu.
   =========================================== */

/* --- Texture grain (bruit SVG en pseudo-élément) --- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* --- Conteneur des étoiles (généré par stars.js) --- */
.stars-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* --- Particule étoile individuelle --- */
.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  /* --dur et --delay sont injectés par JS pour varier l'animation */
  animation: twinkle var(--dur, 3s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
  from { opacity: 0.1; transform: scale(1); }
  to   { opacity: 0.7; transform: scale(1.3); }
}

/* --- Blobs de dégradé flottants --- */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: blobFloat 12s ease-in-out infinite alternate;
}

@keyframes blobFloat {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-30px) scale(1.05); }
}

/* ===========================================
   ANIMATION D'ENTRÉE DE PAGE
   Classe .fade-in à ajouter sur les éléments
   qui doivent apparaître progressivement.
   =========================================== */
.fade-in {
  animation: fadeIn 0.6s ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Délais en cascade pour les enfants consécutifs */
.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }
.fade-in:nth-child(5) { animation-delay: 0.5s; }