/* GENERAL ADAPTATION */
html, body {
    overflow-x: hidden;
}

/* Image fond */
.background {
    height: auto;
    min-height: 100vh;
}

/* Bannière */
.bannValo {
    height: 300px;
}

/* Texte plus petit sur mobile */
main h1 {
    font-size: 70px;
    text-align: center;
}

h2 {
    font-size: 36px;
}
h3 {
    font-size: 28px;
}

/* Les paragraphes */
main p {
    font-size: 16px;
    width: 90%;
    text-align: center;
}

/* Flex column pour les lignes sur mobile */
.row2Col {
    flex-direction: column;
    text-align: center;
}

/* Correction pour la galerie - Mobile version (1 image) */


.image-container {
    flex: 0 0 100%; /* 1 élément visible sur mobile */
    margin-right: 50%;
    box-sizing: border-box;
}

/* Formulaire adaptatif */
.contact-form {
    margin: 50px auto;
    padding: 20px;
}

.colone2 {
    flex: 50%;
}

/* Images partenaires */
@media (max-width: 768px) {
    .stream-page {
        padding-inline: 4%;
        padding-block: 2%;
        min-height: auto;
    }
    .partenaire-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .partenaireImg {
        height: 180px;
    }
}

/* Navbar burger toujours visible */
.icon {
    font-size: 40px;
    width: 40px;
    margin-left: 20px;
}

.navbar {
    display: none;
}

#lien {
    display: none;
    text-align: center;
}
#main-header {
    padding-top: 20px;
}

/* Footer social */
.social-container {
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0;
}

/* Team cards */
.team-list {
    gap: 20px;
}
.member {
    width: 120px;
    text-align: center;
}
.famille {
    text-align: center;
    margin: 0 2rem
}
.margin2Col {
    margin-left: 0;
}
.spartiate {
    height: 400px;
}
.rejoindre {
    margin-left: 0;
}

/* Make gallery items responsive with better positioning */
.gallery-container {
    transition: transform 0.5s ease;
}
.textPart {
    width: 100%;
}
.form-submit button {
    width: 80%;
}
.centered {
    font-size: 20px;
}
.produitMain {
    flex-direction: column;
    align-items: center;
}
.roster-container {

}
.RosterLien {
    width: 80%;
}
.imageMarque {
    margin: 1rem auto;
}
.TextMarque {
    text-align: center;
}
.retourMarque {
    display: none;
}

.flexMarque {
    margin-left: 0;
    flex-direction: column;
}

/* Media Queries for fine-tuning */
@media screen and (min-width: 768px) {
    main p {
        text-align: left;
    }
    .row2Col {
        flex-direction: row;
    }
    .margin2Col {
        margin-left: 10%;
    }
    .navbar {
        display: flex;
    }
    .icon {
        display: none;
    }
    #lien {
        display: none;
    }
    .spartiate {
        height: 500px;
        margin-right: 250px
    }

    .rejoindre {
        margin-left: -12%;
    }

    /* Gallery - Desktop version (3 images) */
    .image-container {
        flex: 0 0 calc(100% / 3);
        margin: 0 1%;
        /* 3 éléments visibles sur grand écran */
    }
    /* Fix for gallery positioning and swipe behavior */


    .gallery-container {
        will-change: transform; /* Optimization for animations */
    }
    .textPart {
        width: 40%;
    }
    .partenaireImg {
        max-width: 400px;
        height: auto;
        margin: 0 auto;
    }
    .contact-form {
        margin: 15% auto;
        padding: 40px;
    }
    h3 {
        font-size: 40px;
    }
    main h1 {
        font-size: 120px;

    }
    .marginGrand {
        margin-left: -12%;
    }
    .member {
        width: 150px;
    }
    .member p {
        text-align: center;
    }
    .team-list {
        gap: 30px;
    }
    .form-submit button {
        width: 50%;
    }
    .centered {
        font-size: 30px;
    }
    .produitMain {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 20px;
    }
    .TextMarque {
        text-align: left;
    }
    .TextMarque h2 {
        margin : 2rem;
    }
    .retourMarque {
        display: block;
    }

    .flexMarque {
        margin-left: 8rem;
        flex-direction: row;
    }
    .imageMarque {
        margin-left: 3rem;
    }
}