/* ============================================================
   base.css — reset, jetons, typographie
   SpaceNews
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }

/* ------------------------------------------------------------
   Jetons
   ------------------------------------------------------------ */
:root {
  /* fonds — du plus profond au plus clair */
  --nuit-0: #04060e;
  --nuit-1: #070b16;
  --nuit-2: #0c1120;
  --nuit-3: #121a2e;
  --nuit-4: #1a2440;

  --bord:      #1e2942;
  --bord-vif:  #2c3b60;

  /* texte */
  --texte:     #e8eefb;
  --texte-2:   #a7b4cf;
  --texte-3:   #6b7a99;

  /* accents */
  --azur:      #4da3ff;
  --azur-vif:  #7cc0ff;
  --azur-nuit: #1b4b7d;
  --flamme:    #ff6b35;
  --flamme-2:  #ffa94d;
  --nebuleuse: #7c5cff;
  --cyan:      #22d3ee;

  /* statuts */
  --succes:    #34d399;
  --echec:     #f87171;
  --attente:   #fbbf24;
  --partiel:   #c084fc;

  /* typo */
  --titre: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --corps: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  --u: 8px;
  --rayon: 10px;
  --rayon-sm: 6px;

  --ombre: 0 20px 50px -24px rgba(0, 0, 0, .9);

  --max: 1280px;
  --nav-h: 68px;
}

/* ------------------------------------------------------------
   Corps
   ------------------------------------------------------------ */
body {
  min-height: 100vh;
  background: var(--nuit-0);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: .1px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Échelle resserrée : trois tailles suffisent, l'écart entre
   elles fait le travail que faisaient les effets. */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.022em;
}
h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h2 { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
h3 { font-size: clamp(1rem, 1.5vw, 1.12rem); }
h4 { font-size: .98rem; }

/* ------------------------------------------------------------
   Utilitaires
   ------------------------------------------------------------ */
.wrap { width: min(100% - 32px, var(--max)); margin-inline: auto; }
.section { padding: clamp(48px, 7vw, 92px) 0; position: relative; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mute { color: var(--texte-3); }
.tc { text-align: center; }
.nowrap { white-space: nowrap; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Étiquette discrète, réservée aux endroits où elle porte une
   information (« Top story », « Next lift-off »). Plus de barre
   décorative ni de majuscules criardes. */
.surtitre {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: 10px;
}

/* En-tête de page : centré, court, sans ornement. */
.entete-page {
  max-width: 60ch;
  margin: 0 auto clamp(26px, 4vw, 46px);
  text-align: center;
}
.entete-page p {
  color: var(--texte-2);
  margin-top: 10px;
  font-size: 1rem;
}
.entete-page__etat {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* En-tête de bloc, dans le flux de la page. */
.entete-section { margin-bottom: clamp(18px, 2.4vw, 28px); max-width: 66ch; }
.entete-section p { color: var(--texte-2); margin-top: 8px; font-size: .95rem; }

/* ------------------------------------------------------------
   Éclat de filante sur un mot
   ------------------------------------------------------------
   Le texte est doublé par un calque découpé dans les glyphes :
   seul le dégradé lumineux les traverse, la couleur de base
   n'est jamais touchée. La mécanique est ici parce qu'elle sert
   à deux endroits — la navigation et le titre de Stars ; chaque
   contexte fournit ensuite son propre dégradé et sa cadence.
   ------------------------------------------------------------ */
.etincelle { position: relative; display: inline-block; }
.etincelle::after {
  content: attr(data-texte);
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  pointer-events: none;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:focus-visible { outline: 2px solid var(--azur); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(77, 163, 255, .35); }

* { scrollbar-color: var(--bord-vif) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bord-vif); border-radius: 6px; border: 2px solid var(--nuit-1); }
*::-webkit-scrollbar-thumb:hover { background: var(--azur-nuit); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}