/* ============================================================
   INDEX — Styles spécifiques à la page d'accueil (Hero)
   ============================================================ */

/* ---- HERO -------------------------------------------------- */
.hero {
  height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: var(--k);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: grayscale(100%) contrast(1.1) brightness(0.85);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,10,10,0.05) 0%,
    rgba(10,10,10,0.25) 40%,
    rgba(10,10,10,0.80) 75%,
    rgba(10,10,10,0.96) 100%
  );
}

.hero__content {
  position: relative;
  padding: 6rem 2rem 4.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-style: italic;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(242,236,227,0.45);
  margin-bottom: 1rem;
  animation: hero-up 1s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}

.hero__title {
  width: min(80vw, 60rem);
  height: auto;
  display: block;
  animation: hero-up 1.1s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}

.hero__rule {
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--color-accent);
  margin: 1.75rem 0 1.25rem;
  animation: hero-up 1.1s cubic-bezier(0.16,1,0.3,1) 0.5s both;
}

.hero__sub {
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(242,236,227,0.55);
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  animation: hero-up 1.1s cubic-bezier(0.16,1,0.3,1) 0.65s both;
}

.hero__btn {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--w);
  border: 1px solid rgba(242,236,227,0.35);
  padding: 0.75rem 1.75rem;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  animation: hero-up 1.1s cubic-bezier(0.16,1,0.3,1) 0.8s both;
}

.hero__btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--w);
}

.hero__scroll {
  position: absolute;
  bottom: 5.5rem;
  right: 4rem;
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-style: italic;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(242,236,227,0.28);
  animation: hero-up 1.1s cubic-bezier(0.16,1,0.3,1) 1s both;
  pointer-events: none;
}

@media (max-height: 650px) {
  .hero__content { padding-top: 5rem; padding-bottom: 2.5rem; }
  .hero__title   { width: min(65vw, 22rem); }
  .hero__eyebrow { display: none; }
  .hero__rule    { margin: 1rem 0 0.75rem; }
}

@keyframes hero-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .hero__content { padding: 0 1.75rem 4rem; }
  .hero__scroll  { display: none; }
}