/* === CSS GLOBAL POUR LA PAGE D'ACCUEIL RESPONSIVE === */

/* Effet du texte */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ------------------------ */
/*          MOBILE          */
/* ------------------------ */

/*--------------------------*/

/* ------------------------ */
/*         BANNIERE         */
/* ------------------------ */
@media screen and (max-width: 768px) {

  /* BANNIÈRE */
  .hero {
    background-image: url("../../images/banner.jpg");
    background-size: cover;
    background-position: center;
    height: 100dvh;
    position: relative;
    color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
  }

  /* Contenu de la bannière */
  .hero-content {
      position: static;
      transform: none;
      text-align: center;
      margin-top: 2rem;
      padding: 0 1rem;
      z-index: 1;
      animation: slideInRight 0.8s ease-out forwards;
      opacity: 0; /* pour l’effet d’apparition */
  }

  .hero-content h1 {
      font-size: 1.8rem;
      text-transform: uppercase;
  }

  .hero-content p {
      font-size: 1rem;
      text-transform: uppercase;
  }

}



/* ------------------------ */
/*         DESKTOP          */
/* ------------------------ */

/*--------------------------*/

/* ------------------------ */
/*         BANNIERE         */
/* ------------------------ */
@media screen and (min-width: 769px) {

  /* BANNIÈRE */
  .hero {
    background-image: url("../../images/banner.jpg");
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-repeat: no-repeat; /* ajouté pour éviter répétition */
    position: relative;
    color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
  }

  /* Contenu de la bannière */
  .hero-content {
      position: absolute;
      transform: none;
      top: 40%;
      right: 4rem;
      margin-top: 2rem;
      padding: 0 1rem;
      z-index: 1;
      animation: slideInRight 0.8s ease-out forwards;
      opacity: 0; /* pour l’effet d’apparition */
  }

  .hero-content h1 {
      font-size: 3rem;
      text-transform: uppercase;

      /* ANIMATION */
      transition: transform 0.3s ease;
      will-change: transform;
  }

  .hero-content p {
    font-size: 2rem;
    text-transform: uppercase;
  }

  /* Curseur par défaut */
  .hero-content h1:hover {
    cursor: default;
  }
  .hero-content p:hover {
    cursor: default;
  }

}