/* ===== STYLES SPÉCIFIQUES À LA PAGE D'ACCUEIL (INDEX.HTML) ===== */

/* Full-Width Banner Hero */
.hero--banner {
    position: relative;
    height: 85vh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    color: var(--white);
    padding-bottom: 1vh;
}

.hero__bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*object-position: center 80%; /* Lowers the image to show more of the face */
    z-index: 1;
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.hero__content {
    position: relative;
    z-index: 3;
    padding: 0 var(--container-padding);
}

.hero__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    animation: fadeInUp 1s ease-out;
}

.hero__subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    max-width: 600px;
    margin: 1rem auto 0;
    line-height: 1.6;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    animation: fadeInUp 1s ease-out 0.3s;
    animation-fill-mode: backwards;
}

/* Animation for Hero Text */
@keyframes fadeInUp { 
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

/* In home.css */
@media (min-width: 992px) {
  #team .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== AJUSTEMENT HÉROS POUR GRANDS ÉCRANS (VISAGE CENTRÉ) ===== */

/* ===== AJUSTEMENT HÉROS POUR GRANDS ÉCRANS (VISAGE CENTRÉ) ===== */

@media (min-width: 992px) {
  
  .hero--banner {
    /* On augmente la hauteur de 85vh à 100vh (pleine hauteur) */
    /* Cela rend le conteneur "plus carré", donc le 'cover'
       a besoin de moins zoomer pour remplir la largeur. */
    height: 100vh; 
  }

  .hero__bg-img {
    /* Maintenant que la bannière est plus haute, l'image est moins zoomée.
      Nous devons juste réajuster la position verticale pour 
      que le visage soit bien centré. 
      Essayez 40% ou 50% (centre).
    */
    object-position: center 40%;
  }


}