body {
    font-family: BankGothic, Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: #292929;
    font-weight: 500;
    color: #7e7e7e;
    overflow: auto; /* Début avec le défilement désactivé */
}

/*------- BANNIERE -------*/
header {
    background-color: #292929;
    color: #000000;
    text-align: center;
    padding: 0px;
    position: relative;
    border-bottom: 10px solid rgba(51,51,51,.25);
}
.banner {
    width: 100%;
    height: auto;
    padding: 0px;
    image-rendering: auto;
    min-height: 700px;

    /* Pour les écrans plus petits, appliquez le zoom centré */
    max-width: 100%; /* Limitez la largeur de l'image à 100% de la largeur de l'écran */
    max-height: 800px; /* Limitez la hauteur de l'image à 100% de la hauteur visible de l'écran */

    margin: auto; /* Centre l'image horizontalement */
    display: block; /* Supprime l'espace supplémentaire en dessous de l'image */
    object-fit: cover; /* Zoom centré sur l'image */
}
@media screen and (max-width: 1125px) {
    .banner {
        transform: translate(-25%, 0%);
        width: 150%; /* Assurez-vous que l'image occupe 100% de la largeur du conteneur */
        max-width: 133.25%; /* Limitez la largeur de l'image à 100% de la largeur de l'écran */
    }
}