@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

header{
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: rgb(211, 58, 58);
    box-sizing: border-box;
    padding: 0 40px;
    margin: 0;
    height: 100px;
    z-index: 2000;
}

header nav ul{
    position: absolute;
    list-style: none;
    top: 35px;
    right: 30px;
    display: flex;
    gap: 30px;
    padding: 0;
    margin: 0;
    margin-right: 20%;
}


header nav ul li a {
    text-decoration: none;
    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: rgb(211, 58, 58);
    border-radius: 10px;
    background-color: rgb(238, 236, 137);
    padding: 15px;

}

header nav ul li a:hover {
    color: rgb(238, 236, 137);
    background-color: rgb(211, 58, 58);
    border: 2px solid  rgb(238, 236, 137);

    
}

.accueil.active,
.donnees.active,
.galerie.active,
.contact.active,
.partenaires.active{
    color: rgb(238, 236, 137);
    background-color: rgb(211, 58, 58);
    border: 2px solid  rgb(238, 236, 137);
}

h1 {
    position: absolute;
    font-family: "Monoton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 60px;
    color: rgb(238, 236, 137);
    z-index: 3000;
    top: 10px;
    left: 40px;
    margin: 0;
    padding: 0;
}   

#contenu {
    width: 1080px;
    margin: 0 auto; 
    box-sizing: border-box;
    margin-top: 20px;
    font-size: 25px;
    flex: 1;
}

body {
    background-color: rgb(238, 236, 137);
    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0px;
}

#montableau tbody tr:hover{
    background-color: rgb(211, 58, 58);
   
}

.imageaccueil {
    width:40%;
    height:40%;
    margin-left: 30px;
    margin-top: 70px;
}

.texteaccueil {
    width: 500px;
    font-size: xx-large;
    margin-right: 10px;
}

.texteaccueil2{
    width:100%;
    text-align: center;
    font-size: 200%;

}

.corpsaccueil {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.carousel-css {
    width: 600px;
    height: 500px;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 30px;;
}

.slides {
    display: flex;
    width: 1800px;
    transition: transform 0.5s;
}

input:nth-of-type(1):checked ~ .slides { transform: translateX(0); }
input:nth-of-type(2):checked ~ .slides { transform: translateX(-600px); }
input:nth-of-type(3):checked ~ .slides { transform: translateX(-1200px); }

.slides{
    width:600px;
    height:500px;
}


footer {
    background-color: rgb(211, 58, 58);
    text-align: center;
    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    padding:3px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-family: "League Spartan", sans-serif;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  max-width: 600px; /* Largeur maximale de la bulle */
  padding: 15px;
  background-color: rgb(211, 58, 58);
  border-radius: 10px;
  color: rgb(238, 236, 137);
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.formulaire::after {
  content: "";
  position: absolute;
  bottom: -15px; 
  left: 20px; 
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid rgb(211, 58, 58); 
}

.en-tete{
    display: flex;
    justify-content: space-around;
    margin-right: 15px;
}

.envoi{
    background-color: rgb(211, 58, 58);
    color: rgb(238, 236, 137);
    border: 2px solid;
    border-radius: 10px;
    padding: 10px;
    border-color: rgb(238, 236, 137);
    width: 500px;
    margin-left: 35px;
    
}

.envoi:hover{
    background-color:rgb(238, 236, 137);
    color: rgb(211, 58, 58);
    border: 2px solid;
    border-radius: 10px;
    padding: 10px;
    border-color:rgb(211, 58, 58);
    
}

input[type="text"] {
    height:15px;
    padding: 10px;
    width: 100%;
}

.email{
    margin-left: 20px;
}

.message{
    margin-left: 20px;
}

.subject{
    padding-left: 20px;
    margin-left: 20px;
}

input, textarea{
    background-color: rgb(238, 236, 137);
    border-radius: 10px;
    padding:5px;
    border:1px rgb(238, 236, 137);
}


footer nav ul {
    list-style: none;
    text-align: center;
}

footer nav ul li a{
    color: rgb(238, 236, 137);
    font-size: larger;
    text-decoration: none;
    text-align: center;
    padding-right: 35px;
}

footer p{
    text-align: center;
}

.creditcorps{
    display: flex;
    justify-content:space-around;
    margin-top: 20px;
    font-size: x-large ;
}

.photo{
    display: inline-block;
}

.auteur{
    display: inline-block;
}

#galerie{
    width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
#galerie img {
    width: 22%;
    padding:3px;
    filter:opacity(65%);
    transition: all 0.2s;
}

#galerie img:hover {
    width: 27%;
    padding:3px;
    filter: none;
}

.textepartenaire p{
    text-align: center;
}

.photo{
   width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; 
}

.photo img{
    width:60%;
    padding:3px;
    
}

.telechargement{
  font-family: "League Spartan", sans-serif;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  max-width: 600px; /* Largeur maximale de la bulle */
  padding: 15px;
  background-color: rgb(211, 58, 58);
  border-radius: 10px;
  color: rgb(238, 236, 137);
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 40px; 
}

.sido{
    width:400px;
    height:900px;
    border: 7px solid rgb(211, 58, 58);
    border-radius:30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 27px;
    margin: 20px;

}

.sido a{
    margin-top: 120px;
    color: rgb(211, 58, 58);
    background-color: rgb(238, 236, 137);
    border: 4px solid  rgb(211, 58, 58);
    padding: 17px;
    border-radius: 20px;
    text-decoration: none;
}

.sido a:hover{
    margin-bottom: 15px;
    color: rgb(238, 236, 137);
    background-color: rgb(211, 58, 58);
    border: 4px solid  rgb(238, 236, 137);
    padding: 17px;
    border-radius: 20px;
    text-decoration: none;
}

.lea{
    width:400px;
    height:900px;
    border: 7px solid rgb(211, 58, 58);
    border-radius:30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 27px;
    margin: 20px;
}

.lea a{
    margin-top: 60px;
    color: rgb(211, 58, 58);
    background-color: rgb(238, 236, 137);
    border: 4px solid  rgb(211, 58, 58);
    padding: 17px;
    border-radius: 20px;
    text-decoration: none;
}

.lea a:hover{
    margin-top: 60 px;
    color: rgb(238, 236, 137);
    background-color: rgb(211, 58, 58);
    border: 4px solid  rgb(238, 236, 137);
    padding: 17px;
    border-radius: 20px;
    text-decoration: none;
}

.rehaf{
    width:400px;
    height:900px;
    border: 7px solid rgb(211, 58, 58);
    border-radius:30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 27px;
    margin: 20px;
}

 .rehaf a{
    margin-top: 20px;
    color: rgb(211, 58, 58);
    background-color: rgb(238, 236, 137);
    border: 4px solid  rgb(211, 58, 58);
    padding: 17px;
    border-radius: 20px;
    text-decoration: none;
}

.rehaf a:hover{
    margin-bottom: 15px;
    color: rgb(238, 236, 137);
    background-color: rgb(211, 58, 58);
    border: 4px solid  rgb(238, 236, 137);
    padding: 17px;
    border-radius: 20px;
    text-decoration: none;
}

.anais{
    width:400px;
    height:900px;
    border: 7px solid rgb(211, 58, 58);
    border-radius:30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 27px;
    margin: 20px;
}

 .anais a{
    margin-top: 120px;
    color: rgb(211, 58, 58);
    background-color: rgb(238, 236, 137);
    border: 4px solid  rgb(211, 58, 58);
    padding: 17px;
    border-radius: 20px;
    text-decoration: none;
}

.anais a:hover{
    margin-bottom: 15px;
    color: rgb(238, 236, 137);
    background-color: rgb(211, 58, 58);
    border: 4px solid  rgb(238, 236, 137);
    padding: 17px;
    border-radius: 20px;
    text-decoration: none;
}

h2{
    margin:0 auto;
    text-align:center;
    padding:20px;
}

.lien a{
    margin-top: 60px;
    color: rgb(211, 58, 58);
    background-color: rgb(238, 236, 137);
    border: 4px solid  rgb(211, 58, 58);
    padding: 17px;
    border-radius: 20px;
    text-decoration: none; 
    margin: 10px;
    width:1080px;
}

.lien{
    display: flex;
    justify-content: space-between;
}

.lien a:hover{
    margin-top: 60px;
    color: rgb(238, 236, 137);
    background-color: rgb(211, 58, 58);
    border: 4px solid  rgb(238, 236, 137);
    padding: 17px;
    border-radius: 20px;
    text-decoration: none; 
    margin: 10px;
    width:1080px;
}