/* ============================================================
   STYLE-INDEX.CSS — Styles propres à la page d'accueil
   Contient : hero, fond image, animations
   ============================================================ */


/* ── 1. HERO ───────────────────────────────────────────────
   Section pleine hauteur, image en fond, texte à gauche.
   ─────────────────────────────────────────────────────────── */

#hero {
  min-height      : 100vh;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  align-items     : flex-start;
  padding         : 0 4rem;
  position        : relative;
  overflow        : hidden;

  /* ── Image de fond ──────────────────────────────────────
     L'image couvre tout le hero.
     Le gradient superposé remplit deux rôles :
       1. Assombrit la gauche pour garder le texte lisible
       2. Laisse l'illustration respirer à droite
     ────────────────────────────────────────────────────── */
  background-image    :
    linear-gradient(
      to right,
      rgba(16, 12, 20, 0.92) 0%,      /* Gauche : quasi-opaque → texte lisible  */
      rgba(16, 12, 20, 0.55) 50%,     /* Centre : semi-transparent              */
      rgba(16, 12, 20, 0.15) 100%     /* Droite : léger voile → illustration visible */
    ),
    url('compagne\ -\ crepuscule.png');

  background-size     : cover;
  background-position : center center;
  background-repeat   : no-repeat;
  background-attachment: fixed;  /* Parallaxe subtile au scroll */
}


/* ── 2. SURTITRE ───────────────────────────────────────────
   Petite ligne violette au-dessus du titre.
   ─────────────────────────────────────────────────────────── */

.hero-surtitre {
  font-size      : 0.65rem;
  font-weight    : 600;
  letter-spacing : 0.25em;
  text-transform : uppercase;
  color          : var(--or);

  margin-bottom  : 2rem;
  display        : flex;
  align-items    : center;
  gap            : 1rem;

  position       : relative;
  z-index        : 1;

  opacity        : 0;
  transform      : translateY(20px);
  animation      : fadeUp 1s ease 0.1s forwards;
}

/* Trait décoratif avant le surtitre */
.hero-surtitre::before {
  content     : '';
  width       : 2.5rem;
  height      : 1px;
  background  : var(--or);
  display     : block;
  flex-shrink : 0;
}


/* ── 3. TITRE H1 ────────────────────────────────────────── */

.hero-titre {
  font-family    : var(--police-serif);
  font-size      : clamp(3.5rem, 7vw, 6.5rem);
  font-weight    : 300;
  line-height    : 1.05;
  letter-spacing : -0.01em;
  color          : var(--texte);
  text-align     : left;

  margin-bottom  : 2.5rem;
  position       : relative;
  z-index        : 1;

  opacity        : 0;
  transform      : translateY(20px);
  animation      : fadeUp 1s ease 0.25s forwards;
}

/* "visuelle" en italique orange — l'accent feu sur fond violet */
.hero-titre em {
  font-style : italic;
  color      : var(--orange);
}


/* ── 4. BOUTON CTA ──────────────────────────────────────── */

#hero .btn-plein {
  align-self      : flex-start;
  position        : relative;
  z-index         : 1;

  opacity         : 0;
  transform       : translateY(20px);
  animation       : fadeUp 1s ease 0.45s forwards;

  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  text-decoration : none;
}


/* ── 5. ANIMATION ENTRÉE ────────────────────────────────── */

@keyframes fadeUp {
  to {
    opacity   : 1;
    transform : translateY(0);
  }
}


/* ── 6. RESPONSIVE ──────────────────────────────────────── */

@media (max-width: 900px) {

  #hero {
    padding             : 7rem 1.5rem 4rem;
    /* Sur mobile : gradient plus dense car l'image se recentre */
    background-image    :
      linear-gradient(
        to bottom,
        rgba(16, 12, 20, 0.75) 0%,
        rgba(16, 12, 20, 0.55) 100%
      ),
      url('compagne_-_crepuscule.png');
    background-attachment: scroll; /* fixed crée des bugs sur iOS */
  }

}