body{
    background-color: #000010;
    color: #fffff9;
}

header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 22px;
    margin-top: -0.5%;
    padding:1%;
    margin-left: 5%;
    margin-right: 5%;
    border-bottom: #fffff9 solid 2px;
     position: fixed;
     width: 90%;
     background-color: #000010;

}

header h4{
    margin-bottom: 0px;
}
li{
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: right;
}
a{
    text-decoration: none;
    color: #fffff9;
}

header a:hover {
    color: #61A5FF; /* Couleur au survol (optionnel) */
}

#hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15%;
}

H1{
   font-size: 150px; 
    justify-content: center;
    margin-top: -10px;
    font-family: "Jersey 10", sans-serif;
    font-style: normal;

}

h4{
    font-size: 40px;
    margin-top: 1.5%;
    font-family: "Jersey 10", sans-serif;
    font-style: normal;
}

#hero h2{
    font-size: 40px;
    margin-top: 20%;
}

h2{
    font-size: 60px;
    margin-top: 190px;
    font-family: "Jersey 10", sans-serif;
    font-style: normal;
}

#hero a{
    background-color: #61A5FF;
    padding: 10px;
    width: 125px;
    border-radius: 16px;
    margin-top: -50px;
    font-size: 30px;
    
}

#telechargement{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10%;
    margin-top: 7%;
    padding-left: 10%;
    padding-right: 10%;
}

#telechargement #Gauche{
    padding-left: 30px;
    padding-right: 40px;
    margin-top: -70px;
}

#telechargement #droite{
    padding-left: 60px;
    padding-right: 30px;
}

#telechargement a{
     background-color: #61A5FF;
    padding: 10px;
    width: 125px;
    border-radius: 16px;
    margin-top: -50px;
    font-size: 30px;
    margin-left: 8%;
}

#questionnaire{
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 5%;
}

#contact{
    padding-left: 10%;
    padding-right: 10%;
}

#commu{
        display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 75px;

}

ul img{
    width: 7%;
    height: 7%;
}

#commu li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20%;

}
#contact H2{
    margin-left: 3%;
}


#commu ul{
        background-color: #61A5FF;
    padding: 10px;
    width: auto;
    border-radius: 16px;
    font-size: 30px;
}

footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: -8%;
    margin-bottom: -5%;
    border-top: #fffff9 solid 2px;
}

footer img{
    flex-direction: row;
    width: 10%;
    height: auto;
    justify-content: end;
    padding-top: 3%;
    padding-left: 85%;
}

#flecheTop img{
    position: fixed;
    bottom: 16px;
    right: 16px;
    height: 8%;
    width: 4%;
}

/* Conteneur principal du carrousel */
.carousel {

  position: relative; /* Pour positionner les boutons en absolu */
  width: 75%; /* Largeur fixe (ajuste selon tes besoins) */
  height: auto; /* Hauteur fixe (même que .card) */
  margin: 0 auto; /* Centrer le carrousel */
  overflow: hidden; /* Cache les cartes hors de la vue */
  border-radius: 20px; /* Optionnel : bordures arrondies */
 
}

/* Piste du carrousel (contenant les cartes) */
.carousel-track {
  display: flex; /* Affiche les cartes en ligne */
  width: 100%; /* Prend toute la largeur du conteneur */
  height: 100%; /* Prend toute la hauteur du conteneur */
  transition: transform 0.5s ease; /* Animation fluide */
}

/* Cartes individuelles */
.card {
  min-width: 100%; /* Chaque carte prend toute la largeur du carrousel */
  height: 100%; /* Prend toute la hauteur */
  flex-shrink: 0; /* Empêche le rétrécissement des cartes */
  border-radius: 20px;
  overflow: hidden; /* Cache les débordements de l'image */
}

/* Images dans les cartes */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit la carte sans déformation */
}

/* Boutons de navigation */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Centre verticalement */
  border: none;
  background: rgba(255, 255, 255, 0.7); /* Fond semi-transparent */
  border-radius: 50%; /* Boutons ronds */
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 1.2rem;
  z-index: 10; /* Place les boutons au-dessus des cartes */
  transition: background 0.3s;
}

.nav:hover {
  background: rgba(255, 255, 255, 0.9); /* Effet au survol */
}

.prev {
  left: 10px; /* Position à gauche */
}

.next {
  right: 10px; /* Position à droite */
}