.accueil{
  background-image: url();
  background-repeat: no-repeat;
  background-attachment: fixed;
  justify-content: center;
  height: 200px;
  width: auto;
}
.commencer{
  justify-content: center;
  align-items: center;
  text-align: center;
  align-content: center;
  text-shadow: 10px 10px 20px;
  height: 200px;
  width: 800px;
  box-shadow: 10px 10px 20px;
  
  
}
.menus2{
  display: flex;
  gap: 1rem;
}
.publication{
  height: 350px;
  width: auto;
  border-radius: 10px;
  box-shadow: 1px 10px 20px;
}
.a{
justify-content: space-between;
align-items: center;
text-align: center;

}
.pub{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9rem;
  text-align: center;
}
.a1{
  height: 30px;
  width: auto;
  justify-content: center;
  display: flex;
  gap: 2rem;
  animation: fadeIn 2s ease-in-out;
  align-items: center;
  justify-content: center;
  text-align: center;
   
}
.a2{
  height: 0px;
  width: 500px;
 padding: 0px 300px;

}
.a3{
  text-align: center;
}
.logo .img{
  padding: 40px 30px 40px;
  margin: 20px  ;

}
.btconnection{
  height: 30px;
  width: 105px;
  justify-content: center;
  box-shadow: 5px 5px 20px;
}
.baccueil{
  height: 50px;
  width: 150px;
  align-items: center;
  background-attachment: fixed;
  justify-content: center;
  box-shadow: 5px 5px 5px;
}
.bapropos{
  height: 30px;
  width: 105px;
  align-items: center;
  justify-content: center;
  box-shadow: 5px 5px 20px;
}
.Ac .Ap .sc{
  justify-content: center;
  gap: 1rem;
  display: flex;

}
#settingsbtnb{
  padding: 20px;
}
#settingsbtn{
  align-items: center;
  color: rgb(0, 0, 0);
  font-size:25px;
  animation: fadeIn 2s ease-in-out;
  justify-content: center;
} 
.rechercheetparametre{
  background-color: #000000;
  height: 300px;
  width: 400px;

  

}
.contenu-du-parametre{
height: 300px;
width: 600px;
}
.pb:hover{
  height: 30px;
  width: 500px;
  color: rgba(0, 255, 0, 0.235);
}
.search-input{
  align-items: center;
  height: 30px;
  width: 240px;
  animation: fadeIn 3s ease-in-out;
  box-shadow: 0px 1px 1px 0px rgba(0,0,0.2);

}
.search-button{
  align-items: center;
  color: rgb(0, 0, 0);
  height: 35px;
  width: 35px;
  font-size:15px;
  display: flex;
  animation: fadeIn 2s ease-in-out;
  justify-content: space-between;
  
}
.search-container{
 
  display: flex;
  justify-content: center;
  align-items: baseline;
  animation: fadeIn 2s ease-in-out;
}
.gm{
  display: flex;
  justify-content: center;
  
 

}
.menu{
  align-items: center;
  text-align: center;
  gap: 3rem;
  height: 150px;
  justify-content: center;
  display: flex;
  box-shadow: 10px 10px 8px;
  animation: fadeIn 40s ease-in-out;
  
}

  form input{
  width: 400px;
  height: 35px;
  margin:10px 0;
  border-radius: 10px;
  box-shadow: 5px 3px 10px;
  border-bottom: 2px solid #000000;
  justify-content: center;
  outline: none;
  transition: border-color 0.3s;
  background: linear-gradient(to right,#c9c8c8,#f9f6d8,#d6d6d6);
  animation: fadeIn 2s ease-in-out;
 }
 form input:focus{
  border-color: #000000;
background: linear-gradient(to right,#c0bebe,#f9f6d8,#e1e1e0);
  animation: fadeIn 2s ease-in-out;
  
}
button:hover{
  background-color: rgba(0, 255, 0, 0.235);
  
}
@keyframes fadeIn {
  from {opacity:0; transform:translateY(-20px);}
  to {opacity:1;transform: translate(0);
  }
}
.password-wrapper{
  position: relative;
  width: 100%;
  animation: fadeIn 2s ease-in-out;
}
.password-wrapper input{
  width: 100%;
  padding: 10px 40px 10px 10px;
  border-radius: 8px;
 animation: fadeIn 2s ease-in-out;
 box-shadow: 0px 3px 3px 0px rgba(0,0,0.2);
}
.ages{
  position: relative;
  z-index: 2;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 10px 10px 30px rgba(0,0,0,0.2);
  width: 350px;
  animation: fadeInUp 1s ease forwards;
  backdrop-filter: blur(8px);
  justify-content: center;
  text-align: center;
  align-items: center;
}
 .cards2{
  justify-content: center;
  display: flex;
  justify-content: space-between;
  height: 200px;
  width: 700px;
  text-align: center;
  animation: fadeIn 2s ease-in-out;
  color: #000000;
  align-items: center;
  justify-self: center;
  gap: 5rem;
  box-shadow: 10px 10px 50px rgba(0,0,0.2);
 }
 .mot{
  align-items: center;
  justify-content: center;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  justify-self: center;
  display: flex;
  color: #000000;
 }
.mot2{
  align-items: center;
  justify-content: center;
  text-shadow: 5px 5px 10px;
  justify-content: space-between;
  height: 300px;
  width: 300px;
  text-align: center;
  animation: fadeIn 2s ease-in-out;
  color: #000000;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  justify-self: center;
  border-radius: 10px;
  padding: 20px 20px 20px;
  box-shadow: 10px 10px 50px  rgba(0,0,0.2);
  
}
.mot3{
  align-items: center;
  justify-content: center;
  text-shadow: 5px 5px 10px;
  justify-content: space-between;
  height: 300px;
  width: 300px;
  text-align: center;
  animation: fadeIn 2s ease-in-out;
  color: #000000;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  justify-self: center;
  border-radius: 8px;
  padding: 20px 20px 20px;
  box-shadow: 10px 10px 50px rgba(0,0,0.2);
}
.ce-lieu{
  align-items: center;
  background-attachment: fixed;
  justify-content: center;
  height: 270px;
  padding: 20px;
  width: 700px;
  text-align: center;
  animation: fadeIn 2s ease-in-out;
  color: #000000;
  justify-content: center;
  text-align: center;
  align-items: center;
  justify-content: space-around;
  justify-self: center;
   border-radius: 10px;
  box-shadow: 10px 10px 50px rgba(0,0,0.2);
}
.cards-b2{
  justify-content: center;
    animation: fadeIn 4s ease-in-out;
    display: flex;
    justify-content: space-between;
    color: #000000;
}
.cards2{
  align-items: center;
  background-attachment: fixed;
  justify-content: center;
  height: 300px;
  width: 700px;
  justify-content: center;
  gap: 0rem;
  border-radius: 20px;
  font-size: 14px;
}
.va{
  justify-content: space-between;
  text-align: center;
  animation: fadeIn 2s ease-in-out;
  color: #000000;
  justify-content: center;
  align-items: center;
  justify-content: space-aro,

}
.textformst{
  text-align: center;
  color: rgb(8, 8, 8);
  
  
}
.formulaire-age{
  justify-content: center;
  text-align: center;
  height: 80px;


}

.ppartager {
  text-align: center;
  animation: fadeIn 2s ease-in-out;
  color: #000000;
  font-size: 10px;
  justify-content: center;
  align-items: center;
  justify-self: center;
  gap: 1rem;
  height: auto;
  width: auto;
}
.bEnvoyer{
  padding: 10px;
  font-size: 10px;
  height: 40px;
  width: 600px;
  justify-content: center;
}

.pEnvoyer-avec-suxes{
  justify-items: center;
  animation: fadeIn 5s ease-in-out;
  text-align: center;
  animation: fadeIn 2s ease-in-out;
  color: #000000;
  font-size: 25px;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  justify-self: center;
  border-radius: 10px;
  padding: 20px 20px 20px;
  box-shadow: 0px 5px 5px 0px  rgba(0, 255, 0, 0.235);
}
.Identités{
  height: 400px;
  width:300px;
  text-align: center;
  align-items: center;
  animation: fadeIn 2s ease-in-out;
  color: #000000;
  justify-content: center;
   text-shadow: 5px 5px 10px;
}
.bpm{
  height: 50px;
  width: 300px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px;
}
.button-sincrire{
  height: 50px;
  width: 400px;
  border-radius: 15px;
}
.be{
  height: 50px;
  width: 230px;
  border-radius: 10px;
  box-shadow: 4px 4px 10px;
}
.h1c{
  justify-items: center;

}
.love{
  width: 300px;
  height:300px;
  animation: fadeIn 4s ease-in-out;
}
.fin1{
  font-size: 20px;
  color: rgb(0, 0, 0);
  animation: fadeIn 2s ease-in-out;
  color: #000000;
  display: flex;
  gap: 3rem;
  justify-self: center;

}
.fing1{
  
  color: rgb(0, 0, 0);
  height: 490px;
  background-color: #ffffff98;
  border-radius: 10px;
  box-shadow: 1px 1px 60px;
}
.ffin{
  color: rgb(0, 0, 0);
 
}
.fin{
  color: rgb(0, 0, 0);
  display: flex;
  gap: 3rem;
 
}
.chech.part.message{
  justify-content: center;
  align-items: center;
  height: 60px;width: 60px; 
  border-radius: 10px 10px 15px;
  color: rgba(0, 0, 0, 0.548);
  background-color: rgba(0, 0, 0, 0.129);
  justify-content: space-between;
  align-items: center;
}
.bvoir-plus{
  height: 40px;
  width: 80px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.bien{
  align-content: center;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  display: flex;
  justify-self: center;
  gap: 3rem;
}
.bien1{
  background-image: url(images/paix-interieur.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 700px;
  align-items: center;
  height: 500px;
  font-size: 25px;
  box-shadow: 1px 10px 20px;
  color: #000000;
  
}
.bien2{
  background-image: url(images/Ages.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 700px;
  justify-content: center;
  align-items: center;
  height: 500px;
  font-size: 25px;
  box-shadow: 1px 10px 20px;
  color: #000000;
}
.bien3{
background-image: url(images/formats.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 700px;
  justify-content: center;
  align-items: center;
  height: 500px;
  font-size: 25px;
  box-shadow: 1px 10px 20px;
  color: #000000;
}
.bien4{
  background-image: url(images/domaines.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 700px;
  justify-content: center;
  align-items: center;
  height: 500px;
  font-size: 25px;
 box-shadow: 1px 10px 20px;
  color: #000000;
}
.bcomencer{
  height: 150px;
  width: 800px;
  border: 10px #000000;
  font-size: 40px;
  box-shadow: 1px 10px 20px;
}
.bcomencer:hover{
  height: 100px;
  width: 600px;
  border: #000000;
  font-size: 30px;
  background-color: rgba(0, 255, 0, 0.235);
}


.typed-text {
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #ffffff;
  animation: typing 10s steps(800, end) forwards, blink 10s step-end infinite;
  height: 200px;
  width: max-content;
  margin: auto;
  background-color: rgb(0, 0, 0);
  border-radius: 10px;

  
}
.hover .typed-text{
  box-shadow: 10px 10px 20px;
  
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  50% { border-color: transparent }
}
.Bienvenus{
  height: 300px;
  width: 300px;
  text-align: center;
  align-items: center;
  animation: fadeIn 2s ease-in-out;
  color: #000000;
  justify-content: center;
  text-shadow: 5px 5px 10px;
  font-weight: bold;
  text-align: center;
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #ffffff;
  animation: typing 10s steps(800, end) forwards, blink 10s step-end infinite;
  height: 200px;
  width: max-content;
  margin: auto;
  box-shadow: 10px 10px 8px;
  border-radius: 10px;
}

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

/* CONTAINER SLIDER */
.slider-container {
    width: 1000px;
    max-width: auto;
    margin: 40px auto;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 5px 0px 10px;
}

.slider-wrapper {
    position: relative;
}

/* SLIDER */
.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* CHAQUE SLIDE */
.slide {
    min-width: 100%;
    height: 600px;
    position: relative;
}

/* IMAGE */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TEXTE SUR IMAGE */
.caption {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.727);
    color: #000000;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 22px;
    font-weight: bold;
    
}

/* FLECHES */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 30px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: background 1s;
}

.arrow:hover {
    background-color: rgba(0,0,0,0.7);
}

.arrow.left {
    left: 20px;
}

.arrow.right {
    right: 20px;
}