/* ---- Haut de page : proportions ----
   Reprend les variables communes (tokens.css) et surcharge les valeurs de repos de sections.css.
   À 1440 px : barre → pastille ~90 px, pastille → titre ~40, titre → chapô 32,
   chapô → boutons 53, boutons → visuel ~140 ; chapô 19 px sur deux lignes, de la couleur du titre. */
.hero { padding-top: calc(76px + clamp(48px, 6cqw, 88px)); }
.hero__title {
  margin-top: clamp(24px, 2.2cqw, 32px);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.hero__lead {
  margin-top: clamp(20px, 2.2cqw, 32px);
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
  text-wrap: balance;
}
.hero__actions {
  margin-top: clamp(32px, 3.6cqw, 52px);
  gap: var(--space-3) var(--space-4);
}
.hero__stage { margin-top: clamp(56px, 6.2cqw, 96px); }

/* Focus clavier : sur le fond clair du hero, le contour rose clair des boutons (components.css)
   ne se voit presque pas (1,3:1). Contour bordeaux, comme le focus par défaut de base.css. */
.hero .btn-fill:focus,
.hero .btn-outline:focus { outline-color: var(--acc); }

/* États animés du groupe « hero », posés par js/hero.js.
   Les styles de repos (tailles, transitions, transform de base) sont dans components.css
   (.btn-fill, .btn-arrow, .preview) et sections.css (.hero__window). */

/* Bouton à pastille survolé ou focalisé (fillIn) : la pastille remplit le bouton.
   --fill-scale est calculé par le script (coin le plus éloigné de la pastille). */
.btn-fill.is-filled { color: var(--hldi); }
.btn-fill.is-filled .btn-fill__fill { transform: scale(var(--fill-scale, 1)); }

/* Bouton flèche survolé ou focalisé (arrIn) : fond appuyé, rond accent,
   la flèche sort à droite pendant que la suivante entre par la gauche. */
.btn-arrow.is-hover { background: var(--dk2); }
.btn-arrow.is-hover .btn-arrow__circle { background: var(--hld); }
.btn-arrow.is-hover .btn-arrow__arrow { transform: translateX(120%); }
.btn-arrow.is-hover .btn-arrow__arrow--next { transform: translateX(0); }

/* Aperçu de site (scrollPage) : la page défile jusqu'en bas (hauteur visible 125cqw moins
   8cqw de barre = 117cqw), lentement à l'ouverture, plus vite au retour. */
.preview__page[data-open="1"] {
  transform: translateY(calc(-100% + 117cqw));
  transition: transform 6s cubic-bezier(0.45, 0, 0.25, 1);
}
.preview__page[data-open="0"] {
  transform: translateY(0);
  transition: transform 1.1s var(--ease-in-out);
}

/* Les trois fenêtres sont des maquettes d'exemple, pas des réalisations : on le dit. */
.hero__note {
  position: relative;
  z-index: 4;
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--muted);
}

/* Mouvement réduit : un aperçu survolé ou touché saute en bas sans défiler. */
@media (prefers-reduced-motion: reduce) {
  .preview__page[data-open] { transition: none !important; }
}