#header {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    background: linear-gradient(#FFD765,#ffd940);
    height: auto;
    margin: 0px;
}

#footer{
    display: flex;
    align-items: center;
    width: 100%;
    background: linear-gradient(#ffd940,#FFD765);
    min-height: 30px;
    color: #2B2B2B;
    margin: 0px;
}

#footertext{
    padding: 3px;
    font-family: 'Arial Narrow Bold', sans-serif;
    font-size:large;
    margin: 7px;
}

#footlink{
    display: flex;
    justify-self: flex-end;
    margin-left: 480%;
}


body{
    margin: auto;
    background-color: #2B2B2B;
    font-family: 'Arial Narrow Bold', sans-serif;
    width: 100%;
}

ul li {
    display: flex;
    list-style-type: none;
    justify-content: space-around;
    padding-left:10px;
    padding-right:10px;
    font-size: larger;
}

ul{
    display:flex;
    justify-content: space-around;
}

.images{
    display: flex;
    justify-content: center;
    width: 100%;
}

#fleche1{
    width:30px;
    border-radius: 3px;
}

#fleche1:hover{
    width:30px;
    border-radius: 3px;
    transform: scale(1.3);
}

#fleche2{
    width:30px;
    border-radius: 3px;
}

#fleche2:hover{
    width:30px;
    border-radius: 3px;
    transform: scale(1.3);
}

#fleche3{
    width:30px;
    border-radius: 3px;
}

#fleche3:hover{
    width:30px;
    border-radius: 3px;
    transform: scale(1.3);
}

#fleche4{
    width:30px;
    border-radius: 3px;
    margin-left:8px;
}

#fleche4:hover{
    width:30px;
    border-radius: 3px;
    margin-left:8px;
    transform: scale(1.3);
}

#salle{
    width:90%;
    transform: scale(1);
    transition-duration: 0.5s;
    margin: 0px;
    border-radius: 20px;
}

#salle:hover{
    transform: scale(1.1);
    transition-duration: 0.9s;
    margin: 0px;
}

#musculation{
    width:50%;
    transform: scale(1);
    transition-duration: 0.5s;
    margin: 0px;
    border-radius: 10px;
    border-style: double;
}

#musculation:hover{
    transform: scale(1.1);
    transition-duration: 0.9s;
    margin: 0px;
    border-radius: 10px;
    border-style: double;
}

#powerlifting{
    width:50%;
    transform: scale(1);
    transition-duration: 0.5s;
    margin: 0px;
    border-radius: 10px;
    border-style: double;
}

#powerlifting:hover{
    transform: scale(1.1);
    transition-duration: 0.9s;
    margin: 0px;
    border-radius: 10px;
    border-style: double;
}

#endurance{
    width:50%;
    transform: scale(1);
    transition-duration: 0.5s;
    margin: 0px;
    margin-bottom: 30px;
    border-radius: 10px;
    border-style: double;
}

#endurance:hover{
    transform: scale(1.1);
    transition-duration: 0.9s;
    margin: 0px;
    margin-bottom: 30px;
    border-radius: 10px;
    border-style: double;
}

#gif_militaire{
    width: 100%;
    margin: 0px;
    aspect-ratio: 16/9;
    background-size: cover;

}

.classico{
    color: #ededed;
    font-size: x-large;
    margin-left: 2%;
} 

nav ul li a{
    color: #2B2B2B;
    text-decoration: none;
    transform: scale(1);
    transition-duration: 0.4s;
    padding : 6px;
}

nav ul li a:hover{
    color: #FFD765;
    text-decoration: none;
    background-color: #2B2B2B;
    transform: scale(1.2);
    transition-duration: 0.5s;
    padding : 6px;
    border-radius: 10px;
}


#logo{
    height: 140px;
    margin: 0px;
}

#title{
    display:flex;
    justify-content: flex-start;
    background-color: #2B2B2B;
    font-size: large;
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
    
}

.xlarge {
    font-size:xx-large;
    color: #FFD765;
    margin-left: 2%;
}

#tableaujs{
    color: black;
    font-family: 'Arial Narrow Bold', sans-serif;
    background-color: #FFD765;
}
tbody tr{
    transform: scale(1);
    transition-duration: 0.5s;
}
tbody tr:hover{
    transform: scale(1.02);
    transition-duration: 0.2s;
}

#tableaujs_wrapper {
    color:#FFD765;
}

div label input{
    width: 300px;
    margin-right: 30px;
    margin-bottom: 2px;
}

option{
    background-color: #2B2B2B;
}

button{
    background-color: #2B2B2B;
    color: #FFD765;
    border-color: #2B2B2B;
    width: 300px;
}

.marginpart{
    margin-right: 12px;
}

form{
    width:300px;
    padding: 9px;
    background-color: #FFD765;
    margin: 2%;
    border-radius: 15px;
}

.minitext{
    font-size: small;
}

#radio{
    border-style: groove;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 8px;
    margin-top: 8px;
}

#radio div{
    padding: 5px;
}

#formulaire{
    display: flex;
    justify-content: center;
}

#divprenom{
    display: flex;
    flex-direction: column;
    width: 150px;
    
}

#prenom{
    display: flex;
    width: 140px;
}

#prenom1{
    display: flex;
    width: 150px;
}

#divnom{
    display: flex;
    flex-direction: column;
    width: 150px;
}

#nom{
    display: flex;
    width: 140px;
}

#nom1{
    display: flex;
    width: 150px;
}

#nomprenom{
    display: flex;
    justify-content: space-between;
    width: 300px;
}

#divemail{
    width: 300px;
}

#email{
    width: 300px;
}

#message{
    width: 300px;
}

.etoile{
    color: red;
}

main{
    
    width: 1080px;
}

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

#headbox{
    width: 1080px;
    margin: auto;
}

#footbox{
    width: 1080px;
    margin: auto;
}

#active{
    color: #FFD765;
    text-decoration: none;
    background-color: #2B2B2B;
    transform: scale(1.2);
    transition-duration: 0.8SSs;
    padding : 6px;
    border-radius: 10px;
}

.back{
    margin: 0%;
    width: 100%;
    background-color: #2B2B2B;
}

#messageerreur{
    border-radius: 12px;
    max-width: 400px;
    color:rgb(255, 0, 0);
}

.tigidou{
    color:  greenyellow;
}

.pastigidou{
    color: red;
}

#galerietri{
    display: flex;
    justify-content: center;
    gap:20px;
    flex-wrap: wrap;
    max-width: 1080px;
}

#galerietri img {
    width: 320px;
    border-radius: 5px;
    box-shadow: #000000 0px 0px 8px;
    filter: grayscale(1);
    transform: perspective(1);
    transition-duration: 0.4s;
}

#galerietri img:hover {
    width: 320px;
    border-radius: 5px;
    box-shadow: #FFD765 0px 0px 22px;
    filter: grayscale(0);
    transform: perspective(1.2);
    transition-duration: 0.4s;
}

.creditdiv{
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 960px;
    flex-wrap: wrap;
}

.creditdiv img{
    height: 300px;
    aspect-ratio: 1/1;
    background-size: cover;
    border-radius: 10px;
    border-style: double;
    border-color: #FFD765;
    margin: 10px;
}

.creditation{
    text-decoration: none;
    font-size: x-large;
    color: #ededed;
    width: 580px;
}

.creditation a{
    text-decoration: none;
    color: #ededed;
}

.creditation a:hover{
    text-decoration:underline;
    color: #ffd940;
}

.partenairesdiv{
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 960px;
    flex-wrap: wrap;
    border-color: #ffd940;
    border-style: double;
    border-width: 2px;
    border-radius: 10px;
}

.partenairesdiv img{
    height: 300px;
    border-radius: 2px;
    margin: 10px;
    border-style: double;
    transform: none;
    transition-duration: 0.6s;
}

.partenairesdiv img:hover{
    height: 300px;
    border-radius: 2px;
    margin: 10px;
    border-style: double;
    transform: none;
    transition-duration: 0.3s;
    box-shadow: #FFD765 0px 0px 22px;
}


.copain{
    text-decoration: none;
    font-size: x-large;
    color: #ededed;
    width: 580px;
    transform: scale(1);
    transition-duration: 0.6s;
}

.copain a{
    text-decoration: none;
    color: #ededed;  
}

.copain:hover{
    transform: scale(1.03);
    transition-duration: 0.3s;
}

#divbutton{
    display: flex;
    justify-content: space-around;
}