/* ==========================================================================
   Nineteen Fifty Stars — socle
   Tokens, remise à zéro, base typographique, accessibilité.
   Les couleurs sont extraites du logo vectoriel, pas choisies à l'œil.
   ========================================================================== */

:root {
  /* --- Nuit : le fond et ses paliers ------------------------------------ */
  --nuit:        #080818;  /* fond de page, valeur dominante du logo d'origine */
  --nuit-2:      #0C1026;  /* surfaces posées sur le fond */
  --nuit-3:      #141A3A;  /* surfaces actives, séparateurs pleins */

  /* --- Néon : les trois couches du logo --------------------------------- */
  --bleu-lueur:  #1677FF;  /* couche « lueur », opacité 0.26 dans le logo */
  --bleu:        #53C8FF;  /* couche « tube »,  opacité 0.70 */
  --blanc-neon:  #EAF7FF;  /* couche « cœur »,  pleine opacité */
  --rose-lueur:  #B51C78;
  --rose:        #FF2B9A;

  /* --- Texte ------------------------------------------------------------ */
  /* Ratios mesurés sur --nuit, pas estimés. Tous ≥ AA, la plupart AAA. */
  --texte:       #D3DEEC;  /* corps de texte      — 14.58:1  AAA */
  --texte-doux:  #9DAEC6;  /* mentions            —  8.79:1  AAA */
  --texte-faible:#7A8BA6;  /* légendes, notes     —  5.74:1  AA  */
  /* --bleu 10.46:1 AAA · --rose 5.73:1 AA · --blanc-neon 18.19:1 AAA
     --bleu-lueur tombe à 4.13:1 sur --nuit-3 : c'est une couleur de HALO,
     jamais de texte. Ne pas la détourner pour un libellé. */

  /* --- Traits et surfaces ----------------------------------------------- */
  --trait:       color-mix(in srgb, var(--bleu) 16%, transparent);
  --trait-fort:  color-mix(in srgb, var(--bleu) 38%, transparent);
  --voile:       color-mix(in srgb, var(--bleu-lueur) 6%, transparent);

  /* --- Typographie ------------------------------------------------------ */
  --titre:  "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --corps:  "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:   ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle fluide : le second terme porte l'adaptation, le clamp borne. */
  --t-micro: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --t-petit: clamp(0.88rem, 0.85rem + 0.18vw, 0.95rem);
  --t-base:  clamp(1rem,    0.96rem + 0.22vw, 1.08rem);
  --t-moyen: clamp(1.15rem, 1.05rem + 0.5vw,  1.35rem);
  --t-h3:    clamp(1.35rem, 1.15rem + 0.95vw, 1.85rem);
  --t-h2:    clamp(1.75rem, 1.35rem + 1.9vw,  2.85rem);
  --t-h1:    clamp(2.25rem, 1.55rem + 3.2vw,  4.2rem);

  /* --- Rythme ----------------------------------------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4.5rem;
  --e-9: 6.5rem;   --e-10: 9rem;

  --largeur:      1180px;  /* conteneur principal */
  --largeur-texte: 68ch;   /* longueur de ligne confortable */
  --gouttiere:    clamp(1rem, 4vw, 2.5rem);

  --rayon:    14px;
  --rayon-sm: 8px;
  --rayon-pill: 999px;

  /* --- Mouvement -------------------------------------------------------- */
  --duree-eclair: 60ms;    /* grésillement du néon */
  --duree-courte: 200ms;
  --duree:        400ms;
  --duree-longue: 900ms;
  --sortie: cubic-bezier(0.22, 1, 0.36, 1);      /* décélération franche */
  --doux:   cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==========================================================================
   Remise à zéro
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Décale les ancres sous l'en-tête fixe au lieu de les cacher dessous. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--corps);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* la parallaxe peut déborder latéralement */
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--blanc-neon);
  margin: 0 0 var(--e-4);
  text-wrap: balance; /* évite le mot orphelin en fin de titre */
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 var(--e-4); max-width: var(--largeur-texte); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--blanc-neon); }

img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: var(--e-2); }

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

/* ==========================================================================
   Accessibilité
   ========================================================================== */

/* Un seul anneau de focus, visible sur fond sombre, jamais supprimé. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blanc-neon);
  outline-offset: 3px;
  border-radius: var(--rayon-sm);
}

.saut-contenu {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: 200;
  padding: var(--e-3) var(--e-5);
  background: var(--nuit-3);
  color: var(--blanc-neon);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-sm);
  transform: translateY(-160%);
  transition: transform var(--duree-courte) var(--sortie);
}
.saut-contenu:focus { transform: translateY(0); }

/* Masque visuellement sans retirer aux lecteurs d'écran. */
.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Le néon, en utilitaires
   La lueur est faite en CSS et non gravée dans les images : elle peut donc
   respirer, réagir au survol et s'éteindre proprement.
   ========================================================================== */

.neon-bleu {
  color: var(--blanc-neon);
  text-shadow:
    0 0 6px  color-mix(in srgb, var(--bleu) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--bleu-lueur) 55%, transparent),
    0 0 42px color-mix(in srgb, var(--bleu-lueur) 30%, transparent);
}

.neon-rose {
  color: var(--blanc-neon);
  text-shadow:
    0 0 6px  color-mix(in srgb, var(--rose) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--rose-lueur) 55%, transparent),
    0 0 42px color-mix(in srgb, var(--rose-lueur) 30%, transparent);
}

/* Halo derrière une surface, sans filtre coûteux sur l'élément lui-même. */
.halo { position: relative; isolation: isolate; }
.halo::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--bleu-lueur) 26%, transparent) 0%,
    transparent 68%);
  opacity: 0.85;
  pointer-events: none;
}
.halo-rose::before {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--rose-lueur) 26%, transparent) 0%,
    transparent 68%);
}

/* ==========================================================================
   Mise en page
   ========================================================================== */

.contenant {
  width: min(100% - var(--gouttiere) * 2, var(--largeur));
  margin-inline: auto;
}

.section { padding-block: clamp(var(--e-8), 11vh, var(--e-10)); position: relative; }

/* ==========================================================================
   Mouvement réduit
   Le site reste composé et lisible : on retire le déplacement, pas le style.
   Les lueurs et les dégradés demeurent — ce n'est pas du mouvement.
   ========================================================================== */

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Tout ce qu'une animation d'entrée devait révéler est révélé d'emblée. */
  [data-anime] { opacity: 1 !important; transform: none !important; }
  #lueur, #tube, #coeur { opacity: 1 !important; }
}

/* Contraste renforcé : on épaissit les traits plutôt que de changer la teinte. */
@media (prefers-contrast: more) {
  :root {
    --texte: #EAF2FF;
    --texte-doux: #C4D2E6;
    --texte-faible: #A8B8D0;
    --trait: color-mix(in srgb, var(--bleu) 34%, transparent);
    --trait-fort: color-mix(in srgb, var(--bleu) 62%, transparent);
  }
}