/* ============================================================
   hero.css — Section Hero (plein écran)
============================================================ */

.above-fold {
  position:   relative;
  width:      100%;
  height:     100vh;  /* repli pour les très vieux navigateurs */
  height:     100svh; /* hauteur de viewport "small" : figée dès le
                          départ sur le plus petit espace possible
                          (barre d'adresse visible), donc ne se
                          recalcule jamais pendant le scroll — contrai-
                          rement à 100dvh qui, lui, change en direct
                          à mesure que la barre du navigateur se
                          réduit/réapparaît, ce qui donnait l'impression
                          que la section "recalculait" sa hauteur au
                          moment de passer le hero. */
  min-height: 600px;
  overflow:   hidden;
}

.hero {
  width:                 100%;
  height:                100%;
  display:               grid;
  grid-template-columns: 56px 1fr;
  padding-top:           calc(80px + var(--space-12));
  padding-right:         var(--space-24);
  padding-bottom:        var(--space-12);
}

.hero__side {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: space-between;
  padding:         0 0 var(--space-1);
  opacity:         0;
  animation:       fade-in 600ms ease 200ms forwards;
}

.hero__side-index,
.hero__side-year {
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  font-weight:      500;
  letter-spacing:   0.14em;
  text-transform:   uppercase;
  color:            var(--ink-mid);
  writing-mode:     vertical-rl;
  text-orientation: mixed;
}

.hero__side-line {
  width:            1px;
  flex:             1;
  background-color: var(--ink-mid);
  opacity:          0.50;
  margin:           var(--space-5) 0;
  transform-origin: top center;
  animation:        line-grow-v 900ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both;
}

.hero__main {
  display:            grid;
  grid-template-rows: 1fr auto;
  height:             100%;
  padding-left:       var(--space-12);
}

.hero__meta {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  align-self:     start;
  opacity:        0;
  transform:      translateY(12px);
  animation:      fade-up 600ms cubic-bezier(0, 0, 0.3, 1) 100ms forwards;
}

.hero__meta-role {
  font-family:    var(--font-body);
  font-size:      var(--text-base);
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--ink-base);
}

.hero__meta-status {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-base);
  font-weight: 400;
  color:       var(--ink-mid);
}

.hero__meta-dot {
  width:            7px;
  height:           7px;
  flex-shrink:      0;
  border-radius:    var(--radius-pill);
  background-color: var(--status-online);
  animation:        dot-pulse 2.4s ease infinite;
}

.hero__name {
  align-self:  end;
  text-align:  right;
  user-select: none;
}

.hero__line-1,
.hero__line-2 {
  display:     block;
  font-family: var(--font-display);
  color:       var(--ink-deep);
}

.hero__line-1 {
  font-size:      clamp(4.5rem, 11vw, 9.5rem);
  font-weight:    300;
  font-style:     italic;
  line-height:    0.95;
  letter-spacing: -0.02em;
  opacity:        0;
  transform:      translateY(30px);
  animation:      fade-up 600ms cubic-bezier(0, 0, 0.3, 1) 250ms forwards;
}

.hero__line-2 {
  font-size:      clamp(3.5rem, 9.5vw, 8rem);
  font-weight:    300;
  font-style:     italic;
  line-height:    1;
  letter-spacing: -0.02em;
  white-space:    nowrap;
  opacity:        0;
  transform:      translateY(30px);
  animation:      fade-up 600ms cubic-bezier(0, 0, 0.3, 1) 400ms forwards;
}

.hero__footer {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  padding-top:     var(--space-8);
  opacity:         0;
  animation:       fade-up 600ms cubic-bezier(0, 0, 0.3, 1) 600ms forwards;
}

.hero__scroll {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
}

.hero__scroll-line {
  width:            40px;
  height:           1px;
  background-color: var(--ink-mid);
  transform-origin: left center;
  animation:        line-grow 800ms cubic-bezier(0, 0, 0.3, 1) 900ms both;
}

.hero__scroll-label {
  font-size:      var(--text-sm);
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--ink-mid);
}

.hero__tagline {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   var(--text-xl);
  line-height: 1.7;
  color:       var(--ink-mid);
  text-align:  right;
}


/* ── Responsive ── */

@media (max-width: 1024px) {
  .hero       { padding-right: var(--space-12); }
  .hero__main { padding-left: var(--space-8); }
}

@media (max-width: 768px) {
  .hero         { grid-template-columns: 1fr; padding-inline: var(--space-6); padding-top: calc(68px + var(--space-10)); padding-bottom: var(--space-10); }
  .hero__side   { display: none; }
  .hero__main   { padding-left: 0; }
  .hero__name   { text-align: left; }
  .hero__line-1 { font-size: clamp(3.5rem, 16vw, 5.5rem); }
  .hero__line-2 { font-size: clamp(2.5rem, 12vw, 4.5rem); }
  .hero__tagline { display: none; }
  .hero__footer  { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .hero__line-1 { font-size: clamp(3rem, 18vw, 4.5rem); }
  .hero__line-2 { font-size: clamp(2rem, 14vw, 3.5rem); }
}

/* Petit smartphone (≤375px, iPhone SE et équivalents Android compacts) :
   marge de sécurité supplémentaire sur le nom + autorisation de
   retour à la ligne en dernier recours, si jamais la police mesurée
   dépasse la largeur disponible malgré le clamp(). */
@media (max-width: 375px) {
  .hero          { padding-inline: var(--space-5); }
  .hero__line-1  { font-size: clamp(2.5rem, 17vw, 4rem); }
  .hero__line-2  { font-size: clamp(1.75rem, 13vw, 3rem); white-space: normal; }
  .hero__meta-role { letter-spacing: 0.08em; }
}

/* Viewport bas (téléphone en paysage, ou petit écran type SE) :
   le hero garde son esprit plein écran mais sans jamais couper
   le pied de page (indicateur de scroll) sous overflow: hidden. */
@media (max-height: 640px) {
  .above-fold { min-height: 480px; }
  .hero       { padding-top: calc(64px + var(--space-6)); padding-bottom: var(--space-6); }
  .hero__footer { padding-top: var(--space-4); }
}


/* ── prefers-reduced-motion ── */

@media (prefers-reduced-motion: reduce) {
  .hero__side,
  .hero__meta,
  .hero__line-1,
  .hero__line-2,
  .hero__footer,
  .hero__scroll-line,
  .hero__side-line { animation: none; opacity: 1; transform: none; }
}