/* ═══════════════════════════════════════════════════════════
   NEXUS Design Tokens — Hero
   Source unique : toute valeur modifiée ici se propage
   aux deux portails. Skipper = plein-écran, Sphere = compact.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Hero Title ── */
  --hero-title-size:         2rem;
  --hero-title-size-md:      2.75rem;
  --hero-title-weight:       700;
  --hero-title-color:        #ffffff;
  --hero-title-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Hero Subtitle ── */
  --hero-subtitle-size:      1rem;
  --hero-subtitle-size-md:   1.125rem;
  --hero-subtitle-weight:    400;
  --hero-subtitle-color:     rgba(255, 255, 255, 0.9);

  /* ── Hero Layout ── */
  --hero-gap:                0.75rem;
  --hero-padding:            1rem 1.5rem;
  --hero-padding-md:         1.5rem 2rem;
  --hero-radius:             0px;
}

/* ── Surcharge compacte (bandeau Sphere) ── */
.hero--compact {
  --hero-title-size:         1.5rem;
  --hero-title-size-md:      1.75rem;
  --hero-subtitle-size:      0.875rem;
  --hero-subtitle-size-md:   1rem;
  --hero-gap:                0.25rem;
  --hero-padding:            20px 24px;
  --hero-padding-md:         20px 24px;
  --hero-radius:             16px;
}

/* ── Responsive mobile (compact) ── */
@media (max-width: 767px) {
  .hero--compact {
    --hero-title-size:       1.25rem;
    --hero-padding:          16px;
    --hero-radius:           12px;
  }
}

/* ── Consommation Sphere (bandeau Vue d'ensemble) ── */
.sphere-hero {
  padding: var(--hero-padding);
  border-radius: var(--hero-radius);
}

.sphere-hero__title {
  font-size: var(--hero-title-size);
  font-weight: var(--hero-title-weight);
  color: var(--hero-title-color);
  font-family: var(--hero-title-font);
  margin: 0;
}

.sphere-hero__subtitle {
  margin-top: var(--hero-gap);
  font-size: var(--hero-subtitle-size);
  font-weight: var(--hero-subtitle-weight);
  color: var(--hero-subtitle-color);
}