/*======================================================================================================================
    CSS RESPONSIVE
========================================================================================================================*/

/* Téléphones */
/*============*/
@media (max-width: 767px) {

    /* ===========================All=========================== */
    * {
        -webkit-tap-highlight-color: transparent;
        /* Supprimer le highlight bleu sur mobile */
    }

    section.corps {
        background-image: url(assets/fond.webp);
        background-size: cover;
        flex-direction: column;
        background-position: right;
        /* display: none;
        opacity: 0; */
        height: max-content;
        width: 100%;
        padding-bottom: 5%;
    }

    h2 {
        font-family: "Kanit", 'Courier New';
        color: white;
        font-size: 1.8em;
        text-align: center;
        font-weight: bold;
        padding-top: 2%;
    }

    /* ===========================Header=========================== */
    header {
        display: flex;
        padding-bottom: 0%;
        flex-direction: column;
        flex-wrap: wrap;
        background-size: 200%;
        background-position: bottom;
        position: relative;
    }

    .logo {
        margin-top: 4%;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0;
    }

    .logo a img {
        padding: 0;
    }

    .reseaux {
        display: flex;
        padding-top: 4%;
        width: 100%;
        justify-content: center;
        flex-direction: row;
    }

    .reseaux a {
        padding: 0% 2%;
    }

    .reseaux a img {
        width: 50px;
        height: 50px;
    }

    .menu {
        display: flex;
        padding-top: 3%;
        justify-content: center;
        text-align: center;
        width: 100%;
        background: none;
    }

    .menu>ul {
        padding: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        background-color: rgb(41, 41, 41);
        border-radius: 25px;
        height: 100%;
        width: 50%;
    }

    .menu>ul>li>ul {
        padding: 0;
    }

    .menu li {
        transition: all 0s ease;
    }

    .menu li:first-child {
        display: block;
        /* position: fixed; */
        height: 100%;
        width: 100%;
        padding: 2% 0;
        border-radius: 25px;
    }

    .menu li>a {
        height: 100%;
    }

    .menu-button {
        display: flex;
        padding: 2.4% 0;
        align-items: center;
        justify-content: center;
    }

    .menu-button a {
        transform: translateY(4px);
    }

    .menu li:first-child>a>img {
        height: 21px;
        width: 21px;
    }

    .menu li:hover {
        background-color: rgb(84, 84, 84);
    }

    .menu a:first-of-type {
        border-radius: 25px;
        height: 100%;
        color: white;
        /* transform: translateY(4px); */
    }

    .onglet a {
        border-radius: 25px;
        display: none;
        padding: 0;
        margin: 0;
        border: none;
    }

    .onglet {
        pointer-events: none;
        /* Désactive les liens */
        height: 0;
        opacity: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
        /* Cache le contenu */
    }

    .onglet a {
        display: none;
    }

    .menu-ouvert .onglet {
        pointer-events: auto;
        /* Réactive les liens */
        height: auto;
        opacity: 1;
        padding: 2% 0%;
        margin: 0;
    }

    .menu-ouvert .onglet a {
        display: block;
    }


    .prem:hover {
        border-top: none;
    }

    #club-bt {
        border-radius: 25px;
    }

    #histoire-bt {
        padding: 0;
    }

    .sous-nav {
        /* transform: translateY(-10px); */
        text-align: center;
        display: none;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        background-color: rgb(84, 84, 84);
        border-radius: 25px;
        position: relative;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        border: none;
    }

    .sous-nav li {
        text-align: left;
        display: block;
        height: 100%;
        width: 100%;
        border-radius: 25px;
        /* padding: 0% 0; */
        border-radius: 25px;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
    }

    .sous-nav a {
        display: none;
        padding: 0;
        margin: 0;
        height: 0;
    }

    .sous-nav {
        pointer-events: none;
        /* Désactive les interactions */
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
    }

    .sous-menu-ouvert .sous-nav {
        pointer-events: auto;
        /* Active les interactions */
        opacity: 1;
        height: auto;
    }

    /* Cacher les onglets principaux lorsque le sous-menu est ouvert */
    .sous-menu-ouvert .onglet {
        display: none;
    }


    .instagram:hover {
        transform: none;
    }

    .facebook:hover {
        transform: none;
    }


    /* ===========================Accueil=========================== */
    #accueil h2 {
        font-size: 1.4em;
    }

    .newsletter-container {
        order: 2;
    }

    .newsletter-container form {
        flex-direction: column;
        align-items: center;
        max-width: 90%;
        width: 100%;
    }

    .newsletter-container h3 {
        font-size: 1.5em;
    }

    .newsletter-container input[type="email"],
    .newsletter-container button {
        width: 70%;
        box-sizing: border-box;
        margin-bottom: 10px;
        border-radius: 6px;
    }

    .newsletter-container button {
        padding: 12px 0;
        width: 50%;
        font-size: 1.1em;
    }

    .programme {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 2%;
        color: white;
        font-size: 1.8em;
        text-align: center;
        font-weight: bold;
    }

    .toggle-div {
        flex-direction: column;
        align-items: center;
        background: none;
        background-image: none;
        /* On enlève l'image */
        background-color: rgba(185, 185, 185, 0.226);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        margin-top: 3%;
        border-radius: 15px;
    }

    .toggle-div h3 {
        font-size: 1.45rem;
        margin: 0.5rem 0 0.3rem;
    }

    .toggle-div h3:first-of-type {
        margin-top: 2%;
    }

    .toggle-div hr {
        width: 90%;
        margin-bottom: 3%;
    }

    .toggle-div #programme_we,
    .toggle-div #resultats_we {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .toggle-div img {
        max-width: 90%;
        margin: 0 auto;
    }

    .club {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5%;
        flex-direction: column;
    }

    .club img {
        /* margin-left: 100px; */
        width: 100px;
        /* height: 100%; */
        display: none;
    }

    .club p {
        background-color: rgba(185, 185, 185, 0.226);
        color: whitesmoke;
        font-size: 1.1em;
        text-align: center;
        padding: 30px;
        width: 70%;
        height: max-content;
        border-radius: 15px;
        user-select: none;
    }

    #trait_programme {
        display: none;
    }

    #trait_mobile {
        display: flex;
        justify-content: center;
        margin-top: 0%;
    }

    #trait_club {
        margin-top: 6%;
        margin-bottom: 2%;
    }

    #trait_labels {
        display: none;
    }

    .newsletter-container {
        margin-bottom: 2%;
    }

    .box-partenaires {
        order: 4;
        padding-top: 2%;
        color: white;
        font-size: 1.8em;
        text-align: center;
        font-weight: bold;
    }

    .partenaires {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 0;
        padding: 0;
    }

    .partenaires img {
        width: 40%;
        height: auto;
        transition: transform 0.2s;
        cursor: pointer;
        user-select: none;
        padding: 2%;
    }

    .box-partenaires div {
        margin-top: 4%;
        margin-bottom: 2%;
    }

    .box-partenaires a {
        color: white;
        background-color: rgba(185, 185, 185, 0.226);
        font-size: 0.65em;
        text-decoration: none;
        margin-top: 30px;
        padding: 2% 3%;
        border-radius: 15px;
    }

    .labels {
        display: none;
    }

    /* ===========================Le bureau=========================== */
    #bureau img {
        height: auto;
        width: 90%;
    }

    /* ===========================Nos équipes=========================== */
    #favorites-form {
        padding: 15px 20px;
        margin: 20px;
    }

    #favorites-form label {
        font-size: 14px;
    }

    #favorites-form button {
        padding: 10px;
        font-size: 14px;
    }

    .teamImg, .teamImg2 {
        flex-direction: column;
        width: 100%;
        margin-top: 0;
    }
    .imgBox {
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .imgBox>.imgEquipe {
        width: 90%;
    }
    .imgBox>.imgEquipe:first-of-type {
        margin-bottom: 3%;
    }

    .logoEquipe {
        width: 15%;
        height: 15%;
    }

    .imgEquipe {
        margin-right: 0;
        margin-top: 4%;
        width: 90%;
    }

    .txtEquipe {
        font-size: 1em;
    }

    /* ===========================Objectifs=========================== */
    #objectifs {
        align-items: center;
    }

    .obj {
        margin: 5% auto;
    }

    .obj p {
        background-color: rgba(185, 185, 185, 0.226);
        color: whitesmoke;
        font-size: 1.1em;
        text-align: center;
        padding: 3%;
        width: 80%;
        height: max-content;
        border-radius: 15px;
        user-select: none;
    }

    /* ===========================Licence=========================== */
    .licence table {
        width: 90%;
    }

    .licence p {
        width: 90%;
        text-align: center;
        padding-top: 3%;
        font-size: larger;
        color: white;
    }

    /* ===========================Nos partenaires=========================== */
    .sponso {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .bt_plaquette a {
        font-size: 1.3em;
        padding: 1% 3%;
        margin: 2% auto;
    }

    /* ===========================Espace réservé=========================== */
    #private-section {
        padding: 20px;
        max-width: 90%;
        /* 90% de la largeur de l'écran sur mobile */
    }

    /* Réduire la taille du texte pour s'adapter aux petits écrans */
    #login-form p {
        font-size: 16px;
    }

    /* Adapter la taille du champ de mot de passe et du bouton */
    #password-input {
        width: 50%;
        margin-bottom: 10px;
        margin-top: 2%;
        font-size: 14px;
        padding: 10px;
    }

    #login-form button {
        width: 50%;
        font-size: 14px;
        padding: 10px;
    }

    /* Réduire la taille du message d'erreur */
    #login-error {
        font-size: 12px;
    }

    .bt_protocole a {
        font-size: 1.3em;
        padding: 1% 3%;
        margin: 2% auto;
    }

    /* ===========================Actualités=========================== */
    #actus-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 85%;
    }

    #actus-container article {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        padding: 1rem;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    /* Titres et textes */
    #actus-container article h3 {
        font-size: 1.2rem;
        margin-bottom: 0.3rem;
    }

    #actus-container article p {
        font-size: 1rem;
        line-height: 1.4;
    }

    #actus-container article img {
        width: 100%;        /* pleine largeur */
        max-width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 6px;
    }

    /* Conteneur d'images vertical */
    #actus-container article .images-container {
        display: flex;
        flex-direction: column;
        /* empile les images */
        gap: 0.5rem;
        margin-top: 0.5rem;
    }


    /* ===========================Calendrier=========================== */

    #calendrier,
    #equipes {
        display: flex;
        height: max-content;
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding-bottom: 0;
    }

    .mobile-title {
        display: block;
    }

    .team h2 {
        display: none;
    }

    #calendrier .nav-bar,
    #equipes .nav-bar {
        display: none;
    }

    .team {
        width: 100%;
        margin-bottom: 5%;
    }

    .team iframe {
        width: 90%;
        /* height: 100vh; */
        background-color: white;
        border: none;
    }

    section.active .mobile-select {
        display: block;
        width: 90%;
        margin: 5% auto;
        text-align: center;
    }

    section.active .mobile-select label {
        color: white;
        font-size: 1.2em;
        margin-right: 10px;
    }

    section.active .mobile-select select {
        font-size: 1.1em;
        padding: 6px 12px;
        border-radius: 10px;
        border: none;
        background-color: white;
        color: black;
    }

    /* ===========================Galerie=========================== */
    #galerie {
        padding-bottom: 0;
    }

    /*  */
    .gallery {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 2% 2%;
        gap: 12px;
    }

    /*  */
    .gallery a {
        width: 48%;
    }

    .gallery img {
        width: 100%;
        /* Other */
        transition: transform 0.2s;
        cursor: pointer;
        user-select: none;
    }

    .gallery img:hover {
        transform: scale(1.05);
    }

    .modal {
        display: none;
        /* Caché par défaut */
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        /* Fond noir transparent */
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        max-width: 90%;
        max-height: 90%;
    }

    .close {
        position: absolute;
        top: 15px;
        right: 25px;
        color: white;
        font-size: 35px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover {
        color: red;
    }

    /*  */
    .prev,
    .next {
        display: none;
    }

    .prev {
        left: 20px;
    }

    /* Position gauche */
    .next {
        right: 20px;
    }

    /* Position droite */
    .prev:hover,
    .next:hover {
        background: rgba(0, 0, 0, 0.8);
    }

    .gallery_bt a {
        font-size: 1.3em;
        padding: 1% 3%;
        margin: 2% auto;
    }

    /* ===========================Boutique=========================== */
    #boutique {
        align-items: center;
    }

    .boutique {
        display: flex;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        align-items: center;
        padding-top: 2%;
    }

    .boutique img {
        width: 90%;
        height: auto;
    }

    .boutique p {
        padding-top: 5%;
        width: 90%;
        color: white;
        font-size: larger;
    }

    .logos_sport {
        width: 90%;
        padding-top: 10%;
        padding-left: 3%;
    }

    .logos_sport img {
        width: 50%;
    }

    /* ===========================Contact=========================== */
    .contactez-nous {
        flex-direction: column;
        align-items: center;
        margin-top: 5%;
    }

    .contactez-nous .infos {
        margin-left: 0;
        margin-bottom: 3%;
        text-align: center;
        font-size: 1.3em;
    }

    .contactez-nous .infos a {
        font-size: 1.6em;
    }

    .contactez-nous .infos p:nth-of-type(2) br {
        display: none;
    }

    .contactez-nous .infos p:nth-of-type(2) i {
        margin-top: 7%;
    }

    .font-style-contact {
        width: 20.81px;
        height: 20.80px;
        transform: translateY(4px);
    }

    .font-style-reseaux {
        margin-top: 6%;
        width: 35px;
        height: 55px;
    }

    .formulaire {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .form-container {
        width: 70%;
        padding: 20px;
    }

    .form-container label[for="consent"] {
        font-weight: normal;
        font-size: 0.85rem;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 15px;
    }

    .form-container label[for="consent"] input {
        margin-top: 4px;
        flex-shrink: 0;
    }

    /* ===========================Footer=========================== */
    footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    footer .top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    footer div.left,
    footer div.right {
        display: flex;
        align-items: center;
        width: 100%;
    }

    footer .left {
        order: 3;
        padding-top: 6%;
        padding-bottom: 4%;
    }

    footer .right {
        padding: 6% 0;
    }

    .font-style-footer {
        width: 12.813px;
        height: 12.797px;
    }

    #logo-footer {
        width: 130px;
        height: 130px;
    }

    .font-style-footer-reseaux {
        width: 25px;
        height: 35px;
        transform: translateY(7px);
    }

    footer .contact {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 0.8em;
        margin-left: 0;
        height: max-content;
    }

    .contact p {
        margin: 0;
        font-size: 1em;
    }

    .font-style-loc {
        transform: translateX(-29px);
    }

    .contact p:first-of-type br:last-of-type {
        display: none;
    }

    .contact p:last-of-type br {
        display: none;
    }

    footer hr {
        order: 2;
        width: 90%;
        height: 4px;
    }

    .right iframe {
        display: none;
        margin: 0;
    }

    footer .right p {
        font-size: 1em;
        margin: 0;
        text-align: center;
    }

    footer .bottom span {
        font-size: 0.7em;
        padding-bottom: 2%;
    }


}



/* Tablettes */
@media (max-width: 1024px) {}