*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;  /* Hauteur minimale = 100% de la fenêtre */
    display: flex;
    flex-direction: column;
    background-image: url('../images/background.jpg');
    background-size: auto;  
    background-repeat: no-repeat;  
    background-position: center top;  
    font-family: "Open Sans", serif;
    line-height: 1.5;
    font-size: 1.9vh;
    text-align: left;
    color: #dcdad4;
}

/* -------- STYLES-------- */
p {
    margin-bottom: 1vh;
}

.button {
    background-color: transparent;
    border: 2px solid #f9dc5c;
    color: #f9dc5c;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1rem 3rem;
    cursor: pointer;
    outline: none;
    display: inline-block;
    border-radius: 4px;
    transition: transform 0.3s;
}

.button:hover {
    transform: scale(1.1);
    /* Grossit le bouton de 10% */
}

.button a {
    font-family: "Anton", sans-serif;
    letter-spacing: 2px;
    font-size: 2.5vh;
    color: #f9dc5c;
}

a {
    text-decoration: none;
    color: #dcdad4;
    font-weight: normal;
}

a:hover {
    color: #f9dc5c;
}

h2 {
    font-family: "Anton", sans-serif;
    letter-spacing: 2px;
    font-size: 4vh;
    font-weight: normal;
    text-transform: uppercase;
    color: #ff1f1f;
}

h3 {
    font-family: "Anton", sans-serif;
    letter-spacing: 2px;
    font-size: 3.2vh;
    font-weight: normal;
    text-transform: uppercase;
    color: #ff1f1f;
}

h4 {
    font-family: "Anton", sans-serif;
    letter-spacing: 2px;
    font-size: 3vh;
    font-weight: normal;
    text-transform: uppercase;
    color: #ff1f1f;
}

.separateur {
    border: none;
    border-top: 1px solid red;
    width: 35%;
    margin: 1vh 0;
}
@media (max-width: 1024px) {
    .separateur {
        width: 80%;
    }
}

/* -------- SECTION GÉNÉRAL -------- */
.section {
    flex: 1;
    padding: 0 15vw;
    /* Padding honrizontal */
    box-sizing: border-box;
    /* Inclut le padding dans la largeur */
}

@media (max-width: 1024px) {
    section {
        padding: 0 1vw;
        /* Padding honrizontal */
        box-sizing: border-box;
        /* Inclut le padding dans la largeur */
    }
}
/* -------- /SECTION GÉNÉRAL -------- */

/* -------- SECTION 1 -------- */
.section-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 2vh;
}

.section-1-container {
    max-width: 100%;
}

.hero img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.social-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permet aux icônes de passer à la ligne si nécessaire */
    margin: 2vh 0;
    gap: 1.2rem;
}

.social-icon {
    width: 8vw;  /* Taille en pourcentage de la largeur de la fenêtre */
    max-width: 40px;  /* Empêche que les icônes deviennent trop grandes */
    height: auto;
    transition: transform 0.3s;
}

.social-icon:hover {
    transform: scale(1.3); /* Agrandissement de 10% */
}
/* Réduction de la taille sur les petits écrans */
@media (max-width: 1024px) {
    .social-icon {
        width: 10vw;  /* Icônes plus grandes pour les écrans moyens */
    }
}

@media (max-width: 768px) {
    .social-icon {
        width: 8vw;  /* Icônes encore plus grandes sur mobile */
    }
}
/* -------- /SECTION 1 -------- */


/* -------- SECTION 2 -------- */

.section-2 {
    margin-top: 6vh;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement si nécessaire */
    text-align: center; /* Centre le texte */
    width: 100%; /* Assure que la section prend toute la largeur */
}

.section-2-container {
    display: flex;
    flex-direction: column; /* Empile les éléments verticalement */
    align-items: center; /* Centre les éléments horizontalement */
    text-align: center; /* Centre le texte */
    width: 100%; /* Assure que le conteneur occupe toute la largeur disponible */
    max-width: 500px; /* Limite la largeur maximale sur grands écrans */
    padding: 0 1rem; /* Ajoute un padding pour éviter que le contenu touche les bords */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
    gap: 1rem; /* Espace entre les éléments */
}

/* -------- /SECTION 2 -------- */


/* -------- SECTION 3 -------- */
.section-3 {
    margin-top: 6vh;
}

.section-3-container {
    display: flex;
    text-align: center;
    flex-direction: column;  /* Empile les éléments verticalement */
    align-items: center;  /* Centre les boutons horizontalement */
    gap: 1rem;  /* Espace entre les boutons */
}

.button {
    width: 40vw;  /* Largeur des boutons en fonction de l'écran */
    max-width: 400px;  /* Largeur maximale pour éviter qu'ils deviennent trop grands */
    min-width: 280px;  /* Largeur minimale pour les petits écrans */
    padding: 0.8rem 0.8rem;
    text-align: center;
    box-sizing: border-box;
}

.button a {
    display: block;  /* Assure que le lien remplit entièrement le bouton */
    width: 100%;  /* Prend toute la largeur du bouton */
}

/* -------- /SECTION 3 -------- */

/* Conteneur du logo */
.section-4 {
    margin-top: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.section-4-container img {
    width: 7vw;  
    height: auto; 
}

@media (max-width: 1024px) {
    .section-4-container img {
        width: 25vw;  
    }
}

@media (max-width: 768px) {
    .section-4-container img {
        width: 25vw;  
    }
}