/*ces class appartiennent à index.html */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}



html {
    width: 100%;

}

body {
    font-family: "Tiny5";
    font-family: "oswald";
    color: #ffffff;
    margin-top: -10px;
    background: url("img/IMG_6405.JPG");
    background-repeat: no-repeat;
    background-size: 250%;
    height: 1000px;
    text-align: center;
    background-color: #222222;
    width: 100%;

}

.news-bar {
    background: #2222228c;
    box-shadow: 0 8px 32px 0 #ff8432;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #fff;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: 40px;
    display: flex;
    align-items: center;
}

.scroll-container {
    display: flex;
    white-space: nowrap;
}

.scrolling-text {
    display: inline-block;
    white-space: nowrap;
    font-size: 25px;
    padding-right: 100%;
    /* Évite une coupure brusque lors de la boucle */
}

#scrollContainer {
    width: 100%;
    /* Ou une largeur fixe */
    height: 50px;
    /* Ajuste selon tes besoins */
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    /* Pas de retour à la ligne */
    border: 1px solid black;
    /* Pour visualiser le conteneur */
}

#newsContent {
    position: absolute;
    top: 10%;
    /* Centre verticalement */
    white-space: nowrap;
}


main {
    padding: 100px 20px;
}


a {
    text-decoration: none;
    color: inherit;

}



.encadrement {
    display: flex;
    flex-direction: column;
    width: 100%;

}



.encadrement_logo {
    margin-top: 10px;
    background: #2222228c;
    box-shadow: 0 8px 32px 0 #ff8432;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    width: 100%;
    height: 200px;

}



.titre {
    display: flex;
    justify-content: center;
    font-family: "Tiny5";
    border-radius: 10px;
    margin-top: -8em;
    margin-bottom: 17px;

}



.titre>h1 {
    font-size: 60px;



}



.logo {
    width: 200px;
    margin-left: 0px;
    margin-right: 0px;

}







.button {
    background: rgba(34, 34, 34, 0.25);
    box-shadow: 0 8px 32px 0 #ff8432;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);

}





/* Menu déroulant */



.sous-menu {
    font-size: 20px;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    background: #474747bf;
    backdrop-filter: blur(4.5px);
    -webkit-backdrop-filter: blur(4.5px);

}



.sous-menu>li {
    width: 160px;
    padding: 15px;

}



.menu {
    margin-top: 50px;
    display: flex;
    z-index: 1;
    justify-content: center;
    padding: 20px;
    margin-bottom: 30px;

}



.menu a {
    display: block;
    color: #fff;
    text-decoration: none;



}



.menu>li {
    position: relative;
    display: inline-block;
    width: 160px;
    padding: 15px;
    color: #fff;
    background: #22222240;
    box-shadow: 0 8px 32px 0 #ff8432;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);

}



.menu>li li a {
    color: #fff;

}



.menu>li li:hover {
    background: #2222225b;
    border-radius: 10px;

}



.menu>li:first-child {
    border-radius: 10px;

}



.menu>li:last-child {
    border-radius: 10px;

}



.menu ul {
    position: absolute;
    top: 2em;
    left: 0;
    max-height: 0em;
    margin: 0;
    margin-top: 20px;
    padding: 0;
    color: #fff;
    overflow: hidden;
    transition: 0.5s max-height 0.3s;
    border-radius: 10px;

}





.menu>li:hover ul {
    max-height: 15em;

}



/* Fin de Menu déroulant */



.feur {
    margin-right: 5em;

}



.feur:hover {
    background-color: #222222b6;

}



.dekliker {
    position: relative;
    z-index: 3;
    padding: 30px;
    transition: all 1s ease;
}



.dekliker:hover {
    background-color: #22222269;

}

.Fortnite_map {
    height: 200px;
}

.Fortnite_map img {
    width: 50%;
    display: inline-grid;
    justify-self: center;
    align-self: center;
    transition: filter 0.3s ease;
}

.Fortnite_map img:hover {
    cursor: pointer;
    filter: grayscale(25%);
}

.Fortnite_map>p {
    font-size: 25px;
    background: #22222240;
    box-shadow: 0 8px 32px 0 #ff8432;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 10px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

li {
    list-style-type: none;

}



.buttonband:hover {
    color: #a0a0a0;
    background-color: #22222236;

}



ul {
    padding: 0px;

}



.main {
    color: white;
    font-size: 50px;
    display: flex;
    justify-content: center;

}



.bandeau2 {
    background: #2222228c;
    box-shadow: 0 8px 32px 0 #ff8432;
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    margin-right: 10%;
    margin-left: 10%;
    margin-bottom: 10%;
    padding: 30px;

}


iframe {
    width: 35%;
    height: 152px;
    border-radius: 12px;
}


.text_neon {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    background: rgba(34, 34, 34, 0.6);
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border-radius: 10px;
    border: 1px solid #ffffff2e;
    justify-content: center;
    margin-bottom: 25px;



}













.neon {
    animation: neonAnim 5s alternate-reverse infinite;
    color: #FF0000;
    font-family: Cursive;
    font-size: 100px;
    margin-bottom: 40px;

}



@keyframes neonAnim {
    0% {
        opacity: 1;
        text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000;
    }


    25% {
        opacity: 1;
        text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 25px #ff0000, 0 0 35px #ff0000;
    }


    75% {
        opacity: 0.5;
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000;
    }


    100% {
        opacity: 1;
        text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 25px #ff0000, 0 0 35px #ff0000;
    }



}



.main_text {
    display: flex;
    font-family: "Tiny5";
    font-size: 60px;
    margin: 20px;
    padding: 20px;
    justify-content: center;
    color: #ff8432;
    animation: neonAnim2 2s alternate-reverse infinite;
    align-items: center;
    justify-content: center;
    transition: all 0.5 ease;
}



.main_text:hover {
    filter: brightness(80%)
}



@keyframes neonAnim2 {
    from {
        text-shadow:
            0 0 10px #ff8432b3,
            0 0 40px #ff8432b3,
            0 0 100px #ff8432b3;
    }


    to {
        text-shadow:
            0 0 5px #ff8432b3,
            0 0 20px #ff8432b3,
            0 0 60px #ff8432b3;
    }

}



.text_pres {
    display: flex;
    font-size: 25px;
    padding: 50px;
    background: #22222259;
    margin-left: 10%;
    margin-right: 10%;
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    border-radius: 10px;
    border: 1px solid #ffffff2e;
    margin-bottom: 25px;

}



.recrute {
    font-family: "oswald";
    display: flex;

}



.box_link {
    margin-right: 25%;
    margin-left: 25%;
    margin-bottom: 10px;
    transition: all 0.5s ease;
}



.main_link {
    font-family: "Oswald";
    color: #ffffff;
    font-size: 50px;
    display: flex;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #5e5e5e;
    padding-top: 10px;
    padding-bottom: 10px;

}



.main_link:hover {
    color: #ffffff;
    background: rgba(34, 34, 34, 0.6);
    box-shadow: 0 8px 32px 0 #ff8432;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: buttonanim 2s alternate-reverse infinite;

}



@keyframes buttonanim {
    from {
        text-shadow:
            0 0 10px #ffffffff,
            0 0 40px #ffffffff,
            0 0 100px #ffffffff;
    }


    to {
        text-shadow:
            0 0 5px #ffffff,
            0 0 20px #ffffff,
            0 0 60px #ffffff;
    }

}

.objenchen{
    border-radius: 100%;
}

.img_link {
    display: flex;
    margin-right: 45%;
    margin-left: 45%;

}



.logo_sm {
    width: 50px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    margin: 0px;
    background-color: white;
    transition: all 0.5s ease;
}



.bandeau_sm {
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 100px;
    padding: 15px;
    color: white;
    display: flex;
    justify-content: center;

}



.sm_left {
    display: flex;
    justify-content: center;
    flex-direction: row;
    background: #2222222b;
    backdrop-filter: blur(4px);
    box-shadow: 0 0px 32px 0 #ff8432;
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    width: 35%;
    border-radius: 10px;
    padding-bottom: 50px;
    padding-top: 25px;
    margin-right: 10em;

}



.sm_right {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: rgba(34, 34, 34, 0.25);
    backdrop-filter: blur(4px);
    box-shadow: 0 0px 32px 0 #ff8432;
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    width: 35%;
    padding-bottom: 50px;
    padding-top: 25px;

}



.img_sm {
    display: flex;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    flex-direction: row;
}



.titre_sm {
    display: flex;
    justify-content: center;
    font-family: "oswald";
    color: #ffffff;
    font-size: 30px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 20px;

}

.mail {
    color: whitesmoke;
    display: flex;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 300px;
    border-style: none;
    font-family: "oswald";
    background: #e1663949;
    /*#22222259*/
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    padding: 10px;
    justify-content: center;

}

.staff {
    background: #e1663949;
    border: solid 1px #222222;
    border-radius: 25px;
    padding: 10px;
    width:200px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    margin-top: 10px;
    margin-left:auto;
    margin-right:auto;
    transition: all 0.5s ease;
}

.staff:hover {
    background: #e16639d2;
    border: solid 1px #222222;
    border-radius: 25px 0 25px 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: scale(1.2);
}

.staff a h3 {
    font-size:17px;
}

.bandeau3 {
    background: #22222240;
    backdrop-filter: blur(4px);
    box-shadow: 0 0px 32px 0 #ff8432;
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin-right: 10%;
    margin-left: 10%;
    padding: 30px;
    flex-direction: column;
    padding-bottom: 50px;

}



h1 {
    font-size: 50px;

}



.tab_photo {
    display: flex;
    margin-top: 30px;
    justify-content: center;

}



.tab_photo>li>h3,

h4 {
    padding: 15px;

}



.photo_projet {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    height: 400px;
    margin-left: 25px;
    margin-right: 25px;
    border-style: solid;
    background: rgba(34, 34, 34, 0.5);
    backdrop-filter: blur(4.5px);
    -webkit-backdrop-filter: blur(4.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 20px;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.vinzo {
    clip-path: polygon(0 0, 85% 0, 85% 100%, 0% 100%);
    padding-left: 5px;
}

.photo_projet:hover {
    transform: scale(1.05);
}

.photo {
    height: 300px;
}



img {
    border-radius: 10px;

}



.logo_sm:hover {
    filter: brightness(70%);
    transform: scale(1.5);

}



.bandeau4 {
    backdrop-filter: blur(11.5px);
    -webkit-backdrop-filter: blur(11.5px);
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    padding: 15px;

}









/*ces class appartiennent à roster.html */



.box_txt {
    padding: 15px;
    display: flex;
    align-items: center;
    margin-bottom: 5em;
    flex-direction: column;
    margin-right: 15%;
    margin-left: 15%;
    background: rgba(34, 34, 34, 0.5);
    backdrop-filter: blur(4.5px);
    -webkit-backdrop-filter: blur(4.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);

}



.box_txt>p {
    display: flex;
    margin-right: 50px;
    margin-left: 50px;
    border-style: solid;
    border-color: #7d7d7d;
    border-radius: 10px;
    background-color: #111111f9;
    font-size: 22px;
    padding: 50px;

}





.box_1,

.box_2,

.box_3,

.box_4 {
    display: flex;
    align-items: center;
    margin-bottom: 5em;
    margin-right: 15%;
    margin-left: 15%;

}



.box_1>p,

.box_2>p,

.box_3>p,

.box_4>p {
    display: flex;
    margin-right: 50px;
    margin-left: 50px;
    border-style: solid;
    border-color: #7d7d7d;
    border-radius: 10px;
    background-color: #111111f9;
    font-size: 22px;
    padding: 50px;

}



.affiche_jeux {
    height: 400px;

}



.box_1>h1,

.box_2>h1,

.box_3>h1,

.box_4>h1 {
    padding: 20px;

}



.box_1>h1>a,

.box_2>h1>a,

.box_3>h1>a,

.box_4>h1>a {
    transition: 0.4s ease-in-out;

}



.box_1>h1>a:hover,

.box_2>h1>a:hover,

.box_3>h1>a:hover,

.box_4>h1>a:hover {
    color: #ffbfbf;
    width: 100%;

}









/* Début Cs2.html */



.text_2 {
    display: flex;
    justify-content: center;
    border-style: solid;
    border-color: #7d7d7d;
    border-radius: 10px;
    background: rgba(34, 34, 34, 0.55);
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 22px;
    padding: 50px;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 50px;
    margin-top: 50px;
    transition: opacity 0.3s ease;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.text_2>li>p>a {
    position: relative;
    text-decoration: underline;
    border-radius: 10px;
    z-index: 1;
    transition: transform 0.3s ease, filter 0.3s ease, background-color 0.5s ease;
}

.text_2>li>p>a:hover {
    position: relative;
    filter: brightness(70%);
    transform: scale(1.05);
    background-color: #222222b6;
    padding: 10px;
    z-index: 1;
}


.text_2>li>a {
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.text_2>li>a:hover {
    filter: brightness(70%);
    transform: scale(1.05);
}

.text_3 {
    display: flex;
    font-size: 22px;
    padding: 50px;
    flex-direction: column;
    margin-left: 30%;
    margin-right: 30%;
    margin-bottom: 20px;
    transition: filter 0.5s ease;
}


.poste {
    height: 50px;
    width: 50px;
    border: 2px solid #a0a0a0;
    border-radius: 100%;
    object-fit: cover;
    padding: 8px;
}


.img_player {
    border-radius: 100%;
    display: flex;
    height: 125px;
    border: 2px solid #a0a0a0;
    flex-direction: column;
    width: 125px;
    object-fit: cover;

}

.ditox {
    object-fit: contain;
}



.text_2>li {
    margin-left: auto;
    margin-right: auto;

}




.text_3>.box_link {
    background: rgba(34, 34, 34, 0.25);
    box-shadow: 0 8px 32px 0 #ff8432;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 20px;

}



.text_3>.box_link:hover {
    transform: scale(1.5);
}

.bandeau2>h4 {
    text-decoration: underline;
    color: #ff8432;
}



/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 200px) and (max-width:449px) and (hover:none) and (pointer:coarse) {
    html {
        width: 100%;
    }


    body {
        width: 100%;
        overflow-x: hidden;
    }


    .news-bar {
        background: #2222228c;
        box-shadow: 0 8px 32px 0 #ff8432;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        color: #fff;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        height: 30px;
        display: flex;
        align-items: center;
    }

    .scroll-container {
        display: flex;
        white-space: nowrap;
    }

    .scrolling-text {
        display: inline-block;
        white-space: nowrap;
        font-size: 18px;
        padding-right: 100%;
    }

    #scrollContainer {
        width: 100%;
        /* Ou une largeur fixe */
        height: 30px;
        /* Ajuste selon tes besoins */
        overflow: hidden;
        position: relative;
        white-space: nowrap;
        /* Pas de retour à la ligne */
        border: none;
    }

    #newsContent {
        position: absolute;
        top: 0%;
        /* Centre verticalement */
        white-space: nowrap;
    }

    .encadrement_logo {
        margin-top: 30px;
        height: 100px;
        width: 100%;
    }


    .logo {
        width: 70px;
    }


    .titre {
        margin-top: -48px;
    }


    .titre>h1 {
        font-size: 18px;
        margin-left: 50px;
    }

    .disabled-link {
        pointer-events: none;
    }

    .menu>li>a>h2 {
        font-size: 11px;
    }


    .menu>li {
        width: 80px;
        padding: 10px;
    }

    .sous-menu {
        width: 80px;
        margin-top: 10px;
    }

    iframe {
        width: 100%;
        object-fit: fill;
        height: 100%;
        border-radius: 12px;
    }

    .sous-menu>li {
        width: 80px;
        padding: 5px;


    }


    .sous-menu>li>a {
        font-size: 10px;
    }




    .main_text {
        font-size: 21px;
        margin: 0;
        padding-left: 0;
    }


    .neon {
        font-size: 40px;
        margin-left: 20px;
        margin-right: 0;
    }


    .text_pres {
        font-size: 13px;
        padding: 12px;
    }


    .tab>div {
        display: flex;
    }


    .text_3 {
        display: flex;
        margin-left: 0;
        margin-right: 0;
    }


    .box_link {
        display: flex;
        justify-content: center;
        margin-right: 0;
        margin-left: 0;
        width: 200px;
    }


    .box_link>a {
        font-size: 18px;
    }


    .main_link {
        font-size: 20px;
        padding: 10px;
    }


    .bandeau3>h1 {
        font-size: 20px;
    }


    .photo_projet {
        margin-top: 20px;


    }


    .tab_photo {
        display: flex;
        flex-direction: column;
    }


    .tab_photo>li>h3 {
        font-size: 15px;
        padding: 5px;
    }


    .tab_photo>li>h4 {
        font-size: 15px;
    }


    .photo {
        height: 125px;
    }


    .bandeau_sm {
        flex-direction: column;
    }


    .sm_left,
    .sm_right {
        margin: 20px;
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }


    .titre_sm {
        font-size: 15px;
    }


    .mail {
        font-size: 13px;
    }


    .img_sm {
        width: 5px;
    }


    .logo_sm {
        height: 17px;
        width: 17px;
        border-radius: 3px;
    }


    .bandeau4>h5 {
        font-size: 10px;
    }


    .affiche_jeux {
        height: 125px;
    }


    .box_1,
    .box_2,
    .box_3,
    .box_4 {
        flex-direction: column;
    }


    .box_1>p {
        margin: 20px;
        font-size: 13px;
        padding: 5px;
        width: 200px;
    }


    .box_2>p {
        margin: 20px;
        font-size: 13px;
        padding: 5px;
        width: 200px;
    }


    .box_3>p {
        margin: 20px;
        font-size: 13px;
        padding: 5px;
        width: 200px;
    }


    .box_4>p {
        margin: 20px;
        font-size: 13px;
        padding: 5px;
        width: 200px;
    }


    .text_2 {
        font-size: 18px;
        padding: 15px;
        flex-direction: column;
    }


    .text_2>li {
        margin-bottom: 30px;
    }


    .img_player {
        flex-direction: column;
        width: 75px;
        height: 75px;


    }


    .text_2 {
        font-size: 15px;
    }


    .text_3 {
        display: flex;
        align-items: center;
    }







}



/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width:450px) and (max-width: 800px) and (hover:none) and (pointer:coarse) {
    html {
        width: 100%;
    }


    body {
        width: 100.40%;
    }

    .news-bar {
        background: #2222228c;
        box-shadow: 0 8px 32px 0 #ff8432;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        color: #fff;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        height: 30px;
        display: flex;
        align-items: center;
    }

    .scroll-container {
        display: flex;
        white-space: nowrap;
    }

    .scrolling-text {
        display: inline-block;
        white-space: nowrap;
        font-size: 18px;
        padding-right: 100%;
    }

    #scrollContainer {
        width: 100%;
        /* Ou une largeur fixe */
        height: 30px;
        /* Ajuste selon tes besoins */
        overflow: hidden;
        position: relative;
        white-space: nowrap;
        /* Pas de retour à la ligne */
        border: none;
    }

    #newsContent {
        position: absolute;
        top: 0%;
        /* Centre verticalement */
        white-space: nowrap;
    }

    .encadrement_logo {
        margin-top: 30px;
        height: 100px;
        width: 100%;
    }



    .logo {
        width: 80px;
    }


    .titre {
        margin-top: -56px;
    }


    .titre>h1 {
        font-size: 20px;
    }

    .dekliker:active {
        background: #2222225b;
        border-radius: 10px;
    }


    .menu>li>a>h2 {
        font-size: 15px;
    }


    .menu>li {
        width: 80px;
        padding: 10px;
    }


    .disabled-link {
        pointer-events: none;
    }


    .sous-menu {
        width: 80px;
    }


    .sous-menu>li {
        width: 80px;
        padding: 5px;


    }


    .box_1,
    .box_2,
    .box_3,
    .box_4 {
        flex-direction: column;
    }


    .sous-menu>li>a {
        font-size: 11px;
    }


    .main_text {
        justify-content: center;
        font-size: 25px;
        margin: 0;
        padding: 0;
    }


    .text_neon {
        width: 85%;
        padding: 1px;
    }


    .neon {
        font-size: 45px;
        margin-left: 0;
        margin-right: 0;
    }


    .text_pres {
        font-size: 15px;
        padding: 10px;
    }


    .box_link {
        display: flex;
        justify-content: center;
    }


    .main_link {
        font-size: 15px;
        padding: 15px;
    }


    .bandeau_sm {
        flex-direction: column;


    }


    .bandeau3>h1 {
        font-size: 20px;
    }


    .photo_projet {
        margin-top: 20px;


    }


    .tab_photo {
        display: flex;
        flex-direction: column;
    }


    .tab_photo>li>h3 {
        font-size: 15px;
        padding: 5px;
    }


    .tab_photo>li>h4 {
        font-size: 15px;
    }


    .sm_left,
    .sm_right {
        width: 75%;
        margin: 10px;
        margin-left: auto;
        margin-right: auto;
    }


    .photo {
        height: 125px;
    }


    .titre_sm {
        font-size: 16px;
    }


    .mail {
        font-size: 15px;
    }


    .img_sm {
        width: 30px;
        padding: 1px;
    }


    .logo_sm {
        height: 30px;
        width: 30px;
        border-radius: 3px;
    }


    .bandeau4>h5>u {
        font-size: 7px;
    }


    .affiche_jeux {
        height: 250px;
    }


    .box_1 {
        flex-direction: column;
    }


    .box_2 {
        flex-direction: column;
    }


    .box_3 {
        flex-direction: column;
    }


    .box_4 {
        flex-direction: column;
    }


    .box_1>p {
        margin: 20px;
        font-size: 13px;
        padding: 5px;
        width: 300px;
    }


    .box_2>p {
        margin: 20px;
        font-size: 13px;
        padding: 5px;
        width: 200px;
    }


    .box_3>p {
        margin: 20px;
        font-size: 13px;
        padding: 5px;
        width: 200px;
    }


    .box_4>p {
        margin: 20px;
        font-size: 18px;
        padding: 5px;
        width: 350px;
    }


    .text_2 {
        font-size: 18px;
        padding: 15px;
        flex-direction: column;
    }


    .text_2>li {
        margin-bottom: 30px;
    }


    .img_player {
        flex-direction: column;
        width: 125px;
        height: 125px;
    }


    .text_2 {
        font-size: 20px;
    }


    .text_3 {
        display: flex;
        align-items: center;
    }


    .box_link {
        width: 200px;


    }


    .box_link>a {
        font-size: 18px;


    }

}



/* Large devices (laptops/desktops, 1024px and up) */

@media only screen and (min-width: 801px) and (max-width: 1024px) {
    html {
        width: 100%;
    }


    body {
        width: 100.40%;
    }

    .news-bar {
        background: #2222228c;
        box-shadow: 0 8px 32px 0 #ff8432;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        color: #fff;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        height: 40px;
        display: flex;
        align-items: center;
    }

    .scroll-container {
        display: flex;
        white-space: nowrap;
    }

    .scrolling-text {
        display: inline-block;
        white-space: nowrap;
        font-size: 25px;
        padding-right: 100%;
    }

    #scrollContainer {
        width: 100%;
        /* Ou une largeur fixe */
        height: 40px;
        /* Ajuste selon tes besoins */
        overflow: hidden;
        position: relative;
        white-space: nowrap;
        /* Pas de retour à la ligne */
        border: none;
    }

    #newsContent {
        position: absolute;
        top: 0%;
        /* Centre verticalement */
        white-space: nowrap;
    }

    .encadrement_logo {
        margin-top: 50px;
        height: 100px;
        width: 100%;
    }

    .logo {
        width: 100px;
    }


    .titre {
        margin-top: -56px;
    }


    .titre>h1 {
        font-size: 25px;
    }


    iframe {
        width: 300px;
        height: 152px;
        border-radius: 12px;
    }


    .dekliker:active {
        background: #2222225b;
        border-radius: 10px;
    }


    .menu>li>a>h2 {
        font-size: 20px;
    }


    .menu>li {
        width: 120px;
        padding: 10px;
    }


    .disabled-link {
        pointer-events: none;
    }


    .sous-menu {
        width: 120px;
    }


    .sous-menu>li {
        width: 80px;
        padding: 5px;


    }


    .box_1,
    .box_2,
    .box_3,
    .box_4 {
        flex-direction: column;
    }


    .sous-menu>li>a {
        font-size: 11px;
    }


    .main_text {
        justify-content: center;
        font-size: 18px;
        margin: 0;
        padding: 0;
    }


    .text_neon {
        width: 80%;
        padding: 1px;
    }


    .neon {
        font-size: 35px;
        margin-left: 0;
        margin-right: 0;
    }


    .text_pres {
        font-size: 10px;
        padding: 10px;
    }


    .main_link {
        font-size: 15px;
    }


    .bandeau_sm {
        flex-direction: column;


    }


    .bandeau3>h1 {
        font-size: 20px;
    }


    .photo_projet {
        margin-top: 20px;
        width: 100%;

    }


    .tab_photo {
        display: flex;
        flex-direction: column;
    }


    .tab_photo>li>h3 {
        font-size: 15px;
        padding: 5px;
    }


    .tab_photo>li>h4 {
        font-size: 15px;
    }


    .sm_left,
    .sm_right {
        width: 75%;
        margin: 10px;
        margin-left: auto;
        margin-right: auto;
    }


    .photo {
        height: 125px;
    }


    .titre_sm {
        font-size: 16px;
    }


    .mail {
        font-size: 15px;
    }


    .img_sm {
        width: 30px;
        padding: 1px;
    }


    .logo_sm {
        height: 20px;
        width: 20px;
        border-radius: 3px;


    }


    .bandeau4>h5>u {
        font-size: 7px;
    }


    .affiche_jeux {
        height: 375px;
    }


    .box_1 {
        flex-direction: column;
    }


    .box_2 {
        flex-direction: column;
    }


    .box_3 {
        flex-direction: column;
    }


    .box_4 {
        flex-direction: column;
    }


    .box_1>p {
        margin: 20px;
        font-size: 13px;
        padding: 5px;
        width: 300px;
    }


    .box_2>p {
        margin: 20px;
        font-size: 13px;
        padding: 5px;
        width: 200px;
    }


    .box_3>p {
        margin: 20px;
        font-size: 13px;
        padding: 5px;
        width: 200px;
    }


    .box_4>p {
        margin: 20px;
        font-size: 22px;
        padding: 5px;
        width: 500px;
    }


    .text_2 {
        font-size: 18px;
        padding: 15px;
        flex-direction: column;
    }


    .text_2>li {
        margin-bottom: 30px;
    }


    .img_player {
        flex-direction: column;
        width: 125px;
        height: 125px;
    }


    .text_2 {
        font-size: 20px;
    }


    .text_3 {
        display: flex;
        align-items: center;
    }


    .box_link {
        width: 200px;


    }


    .box_link>a {
        font-size: 18px;


    }

}



/* Extra large devices (large laptops and desktops, 1440px and up) */

@media only screen and (min-width:1025px) and (max-width: 1439px) {
    html {
        width: 100%;
    }


    body {
        width: 100%;
    }

    .news-bar {
        background: #2222228c;
        box-shadow: 0 8px 32px 0 #ff8432;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        color: #fff;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        height: 25px;
        display: flex;
        align-items: center;
    }

    .scroll-container {
        display: flex;
        white-space: nowrap;
    }

    .scrolling-text {
        display: inline-block;
        white-space: nowrap;
        font-size: 15px;
        padding-right: 100%;
    }

    #scrollContainer {
        width: 100%;
        /* Ou une largeur fixe */
        height: 25px;
        /* Ajuste selon tes besoins */
        overflow: hidden;
        position: relative;
        white-space: nowrap;
        /* Pas de retour à la ligne */
        border: none;
    }

    #newsContent {
        position: absolute;
        top: 0%;
        /* Centre verticalement */
        white-space: nowrap;
    }

    .encadrement_logo {
        width: 100%;
    }


    .logo {
        width: 80px;
    }


    .titre {
        margin-top: -60px;
    }


    .titre>h1 {
        font-size: 40px;
    }


    .encadrement_logo {
        height: 80px;
    }


    .menu>li>a>h2 {
        font-size: 20px;
    }


    .menu>li {
        width: 150px;
        padding: 10px;
    }


    .sous-menu {
        width: 150px;
    }


    .sous-menu>li {
        width: 150px;
        padding: 10px;
    }


    .sous-menu>li>a {
        font-size: 20px;
    }


    .main_text {
        font-size: 40px;
        margin: 1px;
        padding-left: 0;
    }


    .neon {
        font-size: 80px;
        margin-left: 20px;
        margin-right: 0;
    }


    .text_pres {
        font-size: 18px;
    }


    .main_link {
        font-size: 30px;
    }

    .box_link {
        display: flex;
        justify-content: center;
        margin-right: 0;
        margin-left: 0;
        width: 250px;
    }


    .box_link>a {
        font-size: 25px;
    }

    .bandeau3>h1 {
        font-size: 30px;
    }


    .photo_projet {
        width:100%;
        margin-top: 20px;
    }


    .tab_photo {
        display: flex;
    }


    .tab_photo>li>h3 {
        font-size: 15px;
        padding: 5px;
    }


    .tab_photo>li>h4 {
        font-size: 15px;
    }


    .photo {
        height: 100px;
    }

    .box_1 {
        flex-direction: column;
    }


    .box_2 {
        flex-direction: column;
    }


    .box_3 {
        flex-direction: column;
    }


    .box_4 {
        flex-direction: column;
    }

    .box_1>p {
        margin: 20px;
        font-size: 22px;
        padding: 5px;
        width: 500px;
    }


    .box_2>p {
        margin: 20px;
        font-size: 22px;
        padding: 5px;
        width: 500px;
    }


    .box_3>p {
        margin: 20px;
        font-size: 22px;
        padding: 5px;
        width: 500px;
    }


    .box_4>p {
        margin: 20px;
        font-size: 22px;
        padding: 5px;
        width: 500px;
    }


    .text_2 {
        font-size: 18px;
        padding: 15px;
        width: 750px;
        margin-left: 0;
        margin-right: 0;
    }


    .text_2>li {
        margin-bottom: 30px;
    }


    .img_player {


        width: 125px;
        height: 125px;
    }


    .text_2 {
        font-size: 20px;
    }




    .text_3 {
        display: flex;
        align-items: center;
    }

    .titre_sm {
        font-size: 18px;
    }


    .sm_left>li,
    .sm_right>li {
        display: flex;
        justify-content: center;
    }


    .mail {


        width: 200px;
        font-size: 18px;
        margin: 0;
    }


    .img_sm {
        width: 20px;
    }


    .logo_sm {
        height: 30px;
        width: 30px;
        border-radius: 7px;
    }


    .bandeau4>h5 {
        font-size: 10px;
    }

}



@media only screen and (min-width: 1440px) and (max-width: 1920px) {
    html {
        width: 100%;
    }


    body {
        width: 100%;
    }

    .news-bar {
        background: #2222228c;
        box-shadow: 0 8px 32px 0 #ff8432;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        color: #fff;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        height: 40px;
        display: flex;
        align-items: center;
    }

    .scroll-container {
        display: flex;
        white-space: nowrap;
    }

    .scrolling-text {
        display: inline-block;
        white-space: nowrap;
        font-size: 25px;
        padding-right: 100%;
    }

    #scrollContainer {
        width: 100%;
        /* Ou une largeur fixe */
        height: 40px;
        /* Ajuste selon tes besoins */
        overflow: hidden;
        position: relative;
        white-space: nowrap;
        /* Pas de retour à la ligne */
        border: none;
    }

    #newsContent {
        position: absolute;
        top: 0%;
        /* Centre verticalement */
        white-space: nowrap;
    }

    .encadrement_logo {
        width: 100%;
    }


    .logo {
        width: 200px;
    }


    .titre {
        margin-top: -140px;
    }


    .titre>h1 {
        font-size: 70px;
    }


    .encadrement_logo {
        height: 200px;
    }


    .menu>li>a>h2 {
        font-size: 25px;
    }


    .menu>li {
        width: 150px;
        padding: 10px;
    }


    .sous-menu {
        width: 150px;
    }


    .sous-menu>li {
        width: 150px;
        padding: 5px;
    }


    .sous-menu>li>a {
        font-size: 20px;
        padding: 5px;
    }



    .main_text {
        font-size: 45px;
        margin: 0;
        padding-left: 10px;
    }


    .neon {
        font-size: 80px;
        margin-left: 20px;
        margin-right: 0;
    }


    .text_pres {
        font-size: 20px;
    }


    .main_link {
        font-size: 40px;
    }


    .bandeau3>h1 {
        font-size: 30px;
    }


    .photo_projet {
        width:100%;
        margin-top: 20px;
    }


    .tab_photo {
        display: flex;
        width:100%;
    }


    .tab_photo>li>h3 {
        font-size: 25px;
        padding: 5px;
    }


    .tab_photo>li>h4 {
        font-size: 20px;
    }


    .photo {
        height: 200px;  
    }

    .box_1 {
        flex-direction: column;
    }


    .box_2 {
        flex-direction: column;
    }


    .box_3 {
        flex-direction: column;
    }


    .box_4 {
        flex-direction: column;
    }


    .box_1>p {
        margin: 20px;
        font-size: 22px;
        padding: 5px;
        width: 500px;
    }


    .box_2>p {
        margin: 20px;
        font-size: 22px;
        padding: 5px;
        width: 500px;
    }


    .box_3>p {
        margin: 20px;
        font-size: 22px;
        padding: 5px;
        width: 500px;
    }


    .box_4>p {
        margin: 20px;
        font-size: 22px;
        padding: 5px;
        width: 500px;
    }


    .text_2 {
        display: flex;
        justify-content: center;
        font-size: 18px;
        padding: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .text_2>li>p {
        font-size: 25px;
    }

    .img_player {
        width: 150px;
        height: 150px;
    }

    .titre_sm {
        font-size: 25px;
    }


    .mail {
        font-size: 17px;
        width: 175px;
    }


    .img_sm {
        width: 15px;
    }


    .logo_sm {
        height: 40px;
        width: 40px;
    }


    .bandeau4>h5 {
        font-size: 10px;
    }

}



@media only screen and (min-width: 1921px) and (max-width: 2560px) {
    html {
        width: 100%;
    }


    body {
        width: 100%;
    }

    .news-bar {
        background: #2222228c;
        box-shadow: 0 8px 32px 0 #ff8432;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        color: #fff;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        height: 60px;
        display: flex;
        align-items: center;
    }

    .scroll-container {
        display: flex;
        white-space: nowrap;
    }

    .scrolling-text {
        display: inline-block;
        white-space: nowrap;
        font-size: 40px;
        padding-right: 100%;
    }

    #scrollContainer {
        width: 100%;
        /* Ou une largeur fixe */
        height: 60px;
        /* Ajuste selon tes besoins */
        overflow: hidden;
        position: relative;
        white-space: nowrap;
        /* Pas de retour à la ligne */
        border: none;
    }

    #newsContent {
        position: absolute;
        top: 0%;
        /* Centre verticalement */
        white-space: nowrap;
    }

    .encadrement_logo {
        width: 100%;
    }


    .logo {
        width: 400px;
    }


    .titre {
        margin-top: -15em;
    }


    .titre>h1 {
        font-size: 90px;
    }


    .encadrement_logo {
        height: 400px;
    }


    .menu>li>a>h2 {
        font-size: 40px;
    }


    .menu>li {
        width: 150px;
        padding: 10px;
    }


    .sous-menu {
        width: 150px;
    }


    .sous-menu>li {
        width: 150px;
        padding: 5px;
    }


    .sous-menu>li>a {
        font-size: 20px;
        padding: 5px;
    }



    .main_text {
        font-size: 100px;
        margin: 0;
        padding-left: 10px;
    }


    .neon {
        font-size: 120px;
        margin-left: 20px;
        margin-right: 0;
    }


    .text_pres {
        font-size: 30px;
        padding: 15px;
    }


    .img_player {
        width: 200px;
        height: 200px;
    }


    .text_2>li>p {
        font-size: 30px;
    }


    .box_link {
        font-size: 40px;
    }


    .bandeau3>h1 {
        font-size: 50px;
    }


    .photo_projet {
        margin-top: 20px;
    }


    .tab_photo {
        display: flex;
    }


    .tab_photo>li>h3 {
        font-size: 30px;
        padding: 5px;
    }


    .tab_photo>li>h4 {
        font-size: 25px;
    }


    .photo {
        height: 400px;
    }


    .titre_sm {
        font-size: 25px;
    }


    .mail {
        font-size: 25px;
    }


    .img_sm {
        width: 30px;
    }


    .logo_sm {
        height: 55px;
        width: 55px;
    }


    .bandeau4>h5 {
        font-size: 10px;
    }


    .box_1>p {
        margin: 20px;
        font-size: 30px;
        padding: 50px;
        width: 1000px;
    }


    .box_2>p {
        margin: 20px;
        font-size: 30px;
        padding: 50px;
        width: 1000px;
    }


    .box_3>p {
        margin: 20px;
        font-size: 30px;
        padding: 50px;
        width: 1000px;
    }


    .box_4>p {
        margin: 20px;
        font-size: 30px;
        padding: 50px;
        width: 1000px;
    }

}

#notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: green;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#notification.visible {
    display: block;
    opacity: 1;
}

.hidden {
    display: none;
}

.sm_left li {
    display: flex;
    flex-direction: column;
}