@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');  
*{
    margin: 0;
}

header nav{
    display: flex;
    justify-content: space-between;
    height: 50px;
    padding: 10px;
}

nav .current a {
    border-bottom:4px solid #000000 ;
    color: rgb(0, 0, 0);
    text-decoration: none;
}
ul {
    list-style: none;
    padding: 0;
    margin: 15px;

}

li {
    display: inline-block;
    margin-right: 20px;
}

a {
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-size: 16px;
    padding: 5px;
    transition: background-color 0.3s;
}

a:hover {
    border-bottom:4px solid #000000;
    
}

body {
    font-family: Arial, sans-serif;
    margin: 0 auto;
    background-color: #f4f4f4;
    width: 1080px;

    
}


.banniere {
    width: 100%;
}

.banniere img{
    width: 100%;
    height: auto;
}
main{
    width: 1080px;
    margin: 0 auto;
}
.texte {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;


}
.haut{
    width: 100%;
    display: block;
    position: static;
    max-width: 50%;
}
.haut #texte_petit{
    font-size: 50px;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 0;
    line-height: 50px;
    letter-spacing: -2.5px;
}


.texte_long{
    margin-top: 50px;
    text-indent: 80px;
    margin-bottom: 10px;
}


.BatmanVSuperman img{
    width: 400px;
    height: 450px;
    object-fit: cover;


}
.block_container{
    width: 100%;
    max-width: 1510px;
    justify-content: flex-start;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 100px;
    padding-left: 35px;
    padding-right: 35px;
    margin: 25px 0 25px 0;
    display: flex;
    
}
.texte4{
    margin: 0 25px 0 0;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 25px;
    font-weight: 700;
    line-height: 15px;
    border-radius: 5px;
    border: 2px solid #000000;
    padding: 10px;

    
}

.line{
    width: 100%;
    height: 5px;
    max-width: 79%;
    clear: right;
    background-color: #000000;
    border-radius: 100rem;
    order: 0;
    top: 50%;
    bottom: auto;
    left: auto;
    right: 35px;

}

 /*.texte2 p{
    font-family:Arial, Helvetica, sans-serif;
    width: 900px;
    text-align: center; 
    margin: auto;
    padding: 0 0 50px 0;
}
.texte3 p{
    font-family: "Anton", sans-serif;
    font-size: 60px;
    text-align: center; 
    margin: auto;
    padding: 0 0 100px 0;
} */
.personnage{
    position: static;
    margin: 100,100 px;
    width: 100%;
}
.personnage #batman{
    display: flex;
    justify-content: center;

}
.personnage #batman p{
    position: relative;
    top: 220px;
    height: 300px;
    font-size: 250px;
    width: 390px;
    line-height: 250px;
    font-family: "Anton", sans-serif;
    text-align: right;
    z-index: -1;
    


}
.personnage #batman img{
    width: 400px;
}

.personnage1{
    margin:50px;
}
.personnage1 #superman{
    display: flex;
    justify-content: center;
}
.personnage1 #superman p{
    position: relative;
    top: 200px;
    width: 350px;
    height: 300px;
    right: 50px;
    font-size: 250px;
    line-height: 220px;
    font-family: "Anton", sans-serif;
    text-align: left;
    z-index: -1;


}
.personnage1 #superman img{
    width: 410px;

}
.personnage2{
        margin: 50px;
}
    .personnage2 #flash{
        display: flex;
        justify-content: center;
    
    }
.personnage2 #flash p{
        position: relative;
        top: 220px;
        font-size: 250px;
        width: 525px;
        height: 300px;
        line-height: 250px;
        font-family: "Anton", sans-serif;
        text-align: right;
        z-index: -1;
        
    
    
}
    .personnage2 #flash img{
        width: 400px;
}


.personnage3{
    margin: 50px;
}
.personnage3 #wonderwoman{
    display: flex;
    justify-content: center;

}
.personnage3 #wonderwoman p{
    position: relative;
    top: 170px;
    width: 350px;
    height: 300px;
    right: 60px;
    font-size: 200px;
    line-height: 200px;
    font-family: "Anton", sans-serif;
    text-align: left;
    z-index: -1;

}

.personnage3 #wonderwoman img{
    width: 410px;
}
#donnee{
    text-align:center;
    font-family: "Anton", sans-serif;
    font-size: 50px;
}

footer svg{  
    width: 30px;
}

footer p{
    font-family: "Nunito Sans", sans-serif;
    color: #000000;
    text-align: center;
    font-size: 15px;
    margin: 10px;
}
th{
    background-color: rgb(0, 0, 0);
    color: #f4f4f4;
}
table.dataTable tbody tr:hover{
    background-color: #dddddd;
}



.Affiche{
    height: 130px;
    width: auto;
    object-fit: cover;  

}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border-radius: 3px;
}


/*CONTACT*/
#contact{
    font-size: 50px;
    text-align: center;
    font-family: "Anton", sans-serif;

}
.fondsuperman{
    background: url(../images/FondContact/fondsuperman.jpg);
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(5px); /* Ajustez la valeur du flou selon vos préférences */
}
section{
    position: relative;
    width: 1080px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;    



}
.formulaire{
    width: 500px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.formulaire form{
    max-height:500px;
    padding: 70px 35px 70px 35px;
    border: 2px solid white;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.85);

}
#en-tete{
    display: flex;
    margin: 0 0 10px 0;
    
}

#email{
    margin: 0 0 10px 0;
}
#message{
    margin-bottom: 10px;
}
.point{
    color: red;
}
.formulaire label{
    display: block;
    color: #030303;
}

.formulaire input{
    width: 100%;
    box-sizing: border-box;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid #000000;
    background-color: transparent;


}

.formulaire textarea{
    max-width: 355.8px;
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid #000000;
}
#prenom, #nom, #email, #message {
    padding: 7px;

}

.nom-contact {
    margin: 0 0 0 3px;
}


.fondsuperman img{
    width: 300px;
    height: auto;
}
.Texte p{

font-family: "Anton", sans-serif;

}
.envoyer input{
    padding: 8px;
    color: #ffffff;
    background-color: #030303;

}
.envoyer :hover {
    background-color: rgb(0, 0, 0);
    color: #000000;
    background-color: #ffffff;
}


p.type {
    padding-bottom: 10px;


}
.Bouton {
    margin-bottom: 10px;
    }
    





/*/////////////////////////////galerie/////////////////////////*/
.telechargement{
    display: flex;
    justify-content: center;
    text-align: center;

}
.telechargement form{
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 5px ;
    width: 300px;
    margin: 0 auto;
    margin: 5px;
   
}


.telechargement #telechargement {
    width: 100%;
    background-color: #000000;
    color: #f4f4f4;
    border-radius:0 0 5px 5px ;
   
}

.telechargement #telechargement:hover{
    background-color:#ffffff ;
    color: #000000;
}

.image_upload {
    width: 100%;
    text-align: center;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
    
}

/* Style pour les images à l'intérieur de la div */
.image_upload img {
    width: 250px;
    height: 350px;
    object-fit: cover; /* Pour conserver le rapport d'aspect et couvrir la zone définie */
    border: 2px solid #ddd; /* Bordure légère autour des images */
    border-radius: 1rem; /* Coins arrondis */
    margin: 20px; /* Marge autour de chaque image */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */
    transition: transform 0.3s ease-in-out; /* Transition douce sur le survol */
    filter: grayscale(0);
}   


/* Ajouter un effet de zoom au survol de l'image */
.image_upload img:hover {
    transform: scale(1.05); /* Zoom de 5% sur le survol */
    filter: grayscale(0);
    filter: grayscale(0.7);
}




#titre9{
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
.accueil { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}
.accueil img {
    width: 300px;
    object-fit: cover;
}

.Données{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0;
}


.Données p{
    margin: 0 10px 0 0;
}


.Données img{
    margin: 10px;
    width: 200px;
    height: auto;
    object-fit: cover;
}
.galeries{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0;


}

.galeries img{
    margin: 10px;
    width: 200px;
    height: auto;
    object-fit: cover;
}



.galerie p{
    text-align:center;
    font-family: "Anton", sans-serif;
    font-size: 70px;
}



/*///////////////////////////partenaires//////*/
.principal h1{
    font-family: "Oswald", sans-serif;
    font-size: 80px;

}

.texte5{
    margin: 0 25px 0 0;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 25px;
    font-weight: 700;
    line-height: 15px;
    border-radius: 5px;
    border: 2px solid #000000;
    padding: 10px;

    
}


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

.image-container {
    flex: 0 0 auto; /* Ne pas faire grossir */
    margin-right: 20px; /* Ajoute une marge entre l'image et le contenu */
}

.image-container img {
    width: 300px;
    border-radius: 5%; /* Bordure arrondie pour l'image (50% pour un cercle) */
}

.content-container {
    flex: 1; /* Fait prendre autant d'espace que possible */
}

#Titre {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 5px 0;
}

#texte4 {
    font-size: 16px;
    margin: 0 0 5px 0;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #007BFF;
    border-radius: 25px;
    text-decoration: none;
    color: #007BFF;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #007BFF;
    color: #fff;
}


/*Titouan*/
.block_container3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1080px;
    margin: 30px auto;
    flex-direction: row-reverse;
}

.texte6 {
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
    border: 2px solid black;
    font-family: "Oswald", sans-serif;
    border-radius: 3px;
    margin: 0 10px;
    padding: 5px;
}

.line2 {
    width: 70%;
    height: 4px;
    max-width: 100%;
    clear: right;
    background-color: rgb(0, 0, 0);
    margin-left: 50px;
    border-radius: 3px;

}


.Titouan {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin: 10px 0 10px 0;
}

.image-container1 {
    flex: 0 0 auto; /* Ne pas faire grossir */
    margin-right: 20px; /* Ajoute une marge entre l'image et le contenu */
}

.image-container1 img {
    width: 300px;
    border-radius: 5%; /* Bordure arrondie pour l'image (50% pour un cercle) */
}

.content-container1 {
    flex: 1; /* Fait prendre autant d'espace que possible */
}


#Titre1 {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 5px 0;
    text-align: right;
    padding: 0 30px 0 0;
}
#texte13{
    text-align: right;
    padding: 0 30px 0 0;
}
#texte11{
    margin: 10px 0;
    width: 600px;
}
.content-container p {
    font-size: 16px;
    margin: 0 0 5px 0;
}

.button1 {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #000000;
    border-radius: 25px;
    text-decoration: none;
    color: #000000;
    transition: background-color 0.3s ease;
    position: relative;
    top: 10px;
    right: -574px; /* Ajustez la position horizontale selon vos besoins */
}

.button:hover {
    background-color: #000000;
    color: #fff;
}



/*VALENTIN*/

.texte7{
    margin: 0 25px 0 0;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: 25px;
    font-weight: 700;
    line-height: 15px;
    border-radius: 5px;
    border: 2px solid #000000;
    padding: 10px;

}
p#texte2{
    width: 600px;
}
.Valentin {
    display: flex;
    align-items: center;
    margin: 10px 0 10px 0;
}

.image-container2 {
    flex: 0 0 auto; /* Ne pas faire grossir */
    margin-right: 20px; /* Ajoute une marge entre l'image et le contenu */
}

.image-container2 img {
    width: 300px;
    border-radius: 5%; /* Bordure arrondie pour l'image (50% pour un cercle) */
}

.content-container2 {
    flex: 1; /* Fait prendre autant d'espace que possible */
}

#Titre2 {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 5px 0;
    
}


.content-container2 p {
    font-size: 16px;
    margin: 0 0 5px 0;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #000000;
    border-radius: 25px;
    text-decoration: none;
    color: #000000;
    transition: background-color 0.3s ease, color 0.3s ease; /* Ajoute une transition pour l'effet d'animation */
}

.button:hover {
    background-color: #000000;
    color: #fff;
}

/*THOMA*/

.block_container3{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1080px;
    margin: 30px auto;
    flex-direction: row-reverse;
    
}
.texte8{
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    border: 2px solid black;
    font-family: "Oswald", sans-serif;
    border-radius: 4px;
    margin: 0 10px;
    padding: 5px;
}

#texte12{
    width: 750px;
    padding: 10px 0;
    text-align: right;
}
.line3 {
    width: 68%;
    height: 4px;
    max-width: 100%;
    clear: right;
    background-color: rgb(0, 0, 0);
    margin-left: 50px;
    border-radius: 3px;

}


.Thomas {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin: 10px 0 10px 0;
}

.image-container3 {
    flex: 0 0 auto; /* Ne pas faire grossir */
    margin-right: 20px; /* Ajoute une marge entre l'image et le contenu */
}

.image-container3 img {
    width: 300px; /* Assure que l'image ne dépasse pas la largeur du conteneur */
    border-radius: 5%; /* Bordure arrondie pour l'image (50% pour un cercle) */
}

.content-container3 {
    flex: 1; /* Fait prendre autant d'espace que possible */
}

#Titre3 {
    font-size: 24px;
    font-weight: bold;
    text-align: right;
    padding: 0 30px 0 0;

}
#texte3{
    text-align: right;
    padding: 0 30px 0 0;
}

.content-container p {
    font-size: 16px;
}

.button2 {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #000000;
    border-radius: 25px;
    text-decoration: none;
    color: #000000;
    transition: background-color 0.3s ease, color 0.3s ease; /* Ajoute une transition pour l'effet d'animation */
    position: relative;
    top: 10px;
    right: -574px;
}

.button:hover {
    background-color: #000000;
    color: #fff;
}








/*///////////////////////////Scolldwon//////*/
#arrow{
    position: relative;
    left: 540px;
    top: 30px;
    transform: translate(-50%, -50%);
    z-index: 1000;
  }
  
  
#arrow {
    display: inline-block;
    font-size: 30px;
    text-decoration: none;
    color:#000000;  
    transition: transform 0.3s ease; /* Ajoute une transition pour un effet plus doux */
  }
  
#arrow  a:active {
    transform: translateY(10px); /* Ajoute un déplacement vers le bas lorsqu'il est activé */
    animation: bounce 0.5s infinite; /* Ajoute une animation de rebondissement */
    transition-duration: 0.3s;
  }
  
  /* Ajoutez une animation CSS */
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
      transform: translateY(-5px);
    }
  }





  .liens{
    margin: 15px;
    padding: 15px;
    width: 100%;
    margin: 0 auto;
    border: 3px solid black;
    border-radius: 10px;
}
.container-liens{
    width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    
}
.liens-txt{
    width: 500px;
    color: rgb(0, 0, 0);

}
.liens-txt p{
    margin-top: 8px;
    text-align: justify;
    width: 400px;
}
.sae106{
    display: flex;
    justify-content: center;
    align-items: center;
}
.sae106 a{
    text-decoration: none;
    color: #000000;
}
.liens-txt h2{
    font-size: 1.8rem;

}
.sae-button{
    background-color: white;
    padding: 12px 16px;
    margin-left: 35px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid rgb(0, 0, 0);
}
.sae-button:hover{
    background-color: #000000;
    border: 2px solid rgb(255, 255, 255);
    color: white;
}


::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #111111;
}

::-webkit-scrollbar-thumb:hover {
    background: #111111;
}