*,*::after,*::before{
    box-sizing: border-box;
}

html {
    --s: 50px;
    --c: #21263b;
    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: 35.36% 35.36% at;
    --_c: #0000 66%,#6d758d 68% 70%,#0000 72%;
    background: 
      radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), 
      radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s), 
      radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), 
      radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), 
      repeating-conic-gradient(var(--c) 0 25%,#ffffff00 0 50%) 0 0/var(--_s), 
      radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);
    background-attachment: fixed;
  }

/*header*/

header{
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1{
    color: white;
    text-align: center;
    font-size: 2.8rem
}



input{
    margin: 20px;
    width: 400px;
    font-size: 1.8rem;
    font-family: prociono;
}

select{
    margin: 20px;
    font-family: prociono;
    font-size: 1.5rem;
    width: 200px;
}

/*navigation*/

.boutonsNav{
    color: #ffffff;
    text-decoration: none;
    font-size: 2rem;
    transition: 1.5s;
}

.boutonsNav:hover{
    transform: scale(1.3, 1.3);
}

nav{
    padding-top: 15px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 200px;
    padding-bottom: 10px;
    border-bottom: #ffffff 2px solid;
    padding-top: 10px;
    width: 800px;
    
    margin: auto;
}

/* produit*/

.placement{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.produit{
    width: 400px;
    height: 450px;
    display: flex;
    flex-direction: column; 
    overflow: hidden;
    transition: 2s;
    background-color: rgb(255, 255, 255);
    border-radius: 50px;
    align-items: center;
    margin-bottom:30px;
}

.produit:hover{
    height: 600px;
    transition: 1s;
}

img{
height: 400px;
width: 400px;
border-radius:50px ;
padding: 10px;

}

h2{
    align-self: center;
    margin: 7px;
    font-family: Prociono;
}

.voirplus{
    align-self: center;
    text-decoration: none;
    background-color: black;
    padding: 20px;
    color: white;
    font-family: Prociono;
    font-size: 2.5rem;
    margin-top: 30px;
    padding-left: 70px;
    padding-right: 70px;
    border-radius: 50px;
    transition: 1s ease-out;
}

.voirplus:hover{
    transform: scale(1.3, 1.3);
}

p{
    margin: 7px;
    font-family: Prociono;
    font-size:1.4rem;
}

label{
    color:white;
    font-size:1.6rem;
}

/*filtre*/

details{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom:30px;
}

summary{
    font-size: 1.8rem;
    color: white;
    margin:20px;
}

summary:hover{
    cursor:pointer;
}

.filtre{
    background-color: rgba(255, 255, 255, 0);
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
    transition: 1s;
    font-family: prociono;
    padding:0;
    margin:10px;
    position:relative;
}


        .filtre::before {
            content: '';
            position: absolute;
            width: 0;
            height: 100%;
            bottom: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.3);
            z-index: -1;
            transition: width 0.3s ease-in-out;
        }

        .filtre:hover::before {
            width: 25%;
        }
/* detail*/

.titredetail{
    color:#21263b;
}

.detail{
    background-color: white;
    padding: 30px;
    border-radius: 50px;
    max-width: 1000px;
    display:flex;
    align-self:center;
    flex-direction:column;
    justify-content:center;
    margin-left:25vw;
    margin-right:25vw;
    margin-top:20px;
}

.mediatexte{
    display: flex;
    flex-direction: row;
    align-content:center;
}

.reserver{
    border-radius: 50px;
    background-color: #21263b;
    font-family:prociono ;
    color: white;
    font-size:2.5rem;
    text-decoration:none;
    text-align:center;
    padding:30px;
    
}