@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


body{
    background-image: var(--primary-color);
    background-size: 100% auto;
    margin: 0 auto;
    overflow-x: hidden;
    font-family: "Montserrat", sans-serif;

 }
 *{
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: none;
    border: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-size: 14px;
}

.container {
    margin: 0 auto;
}


.breadcrumb {
    font-size: 16px;
    margin-bottom: 40px;
    margin-top: 18rem;
    margin-left: 4%;
    background: var(--seventh-color);
    color: var(--color-dark-variant);
    padding: 5px;
    border-radius: 2px;
    display: inline-block;
}
.breadcrumb.without-searchbox {
    font-size: 16px;
    margin-bottom: 40px;
    margin-top: 10rem;
    margin-left: 4%;
    background: var(--seventh-color);
    color: var(--color-dark-variant);
    padding: 5px;
    border-radius: 2px;
    display: inline-block;
}

.breadcrumb a {
    text-decoration: none;
    color: var(--color-dark-variant);
}

.breadcrumb a:hover {
    text-decoration: underline;
}

:root {

    --primary-color: #fff;
    --primary-color2: #fff;
    --secondary-color: #000;
    --third-color: #000;
    --forth-color: #5e5e5e;
    --fiveth-color: #adadad;
    --sixth-color: #a1a1a1;
    --seventh-color: rgb(189, 187, 187);
    --eight-color: #adadad;
    --color-light:rgba(115, 120, 160, 0.3);
    --color-dark: #363949;
    --color-dark2: #2b2b2e;
    --color-white: #ffffffe1;
    --color-dark-variant: #5c6268;
    --color-search-button: rgb(223, 223, 223);
    --rechb: #5e5e5e;
    --rechb2: #969696;
    --color-danger: #ea312fc0;
    --hover-recherche: #e0e0e0;
    --color-light-danger: rgba(200, 132, 132, 0.18);
    --background-evenement: rgba(255, 255, 255, 0.9);


    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 1.2rem;

    --card-padding: 1.8rem;
    --padding-1: 1.2rem;

    --box-shadow: 0 20px 30px rgb(173, 173, 173);
    --box-shadow2: -10px -10px 20px rgba(255,255,255,.8), 10px 10px 20px rgba(57,65,124,.3);
    --box-shadow3: -2px -2px 9px rgba(255,255,255,.9), 2px 2px 7px rgba(57,65,124,.5);

   
}


.darkmode {
    --primary-color: linear-gradient(to bottom right, rgb(46, 45, 45) , rgb(46, 45, 45) 800px);
    --primary-color2: #000;
    --secondary-color: #fff;
    --third-color: #ea312f;
    --forth-color: #adadad;
    --fiveth-color: #5e5e5e;
    --sixth-color: #ffffff;
    --seventh-color: #555555;
    --eight-color:#686868;
    --color-light: rgba(0, 0, 0, 0.603);
    --color-dark: #edeffd;
    --color-dark2:rgb(139, 139, 139);
    --color-search-button: #161616;
    --hover-recherche: #333333;
    --color-white: #202528f1;
    --color-dark-variant: #b9b9b9;
    --rechb: #7a7a7a;
    --rechb2: #949494e1;
    --background-evenement: rgba(0, 0, 0, 0.9);

    --box-shadow: 0 2rem 3rem var(--color-light);
    --box-shadow2: 10px 10px 20px rgba(0, 0, 0, 0.7);
    --box-shadow3: 2px 2px 7px rgba(0, 0, 0, 0.8);

}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb{
    background: #949494;
    border-radius: 10px;
}
::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px rgba(177, 177, 177, 0.842);
    border-radius: 10px;
}
.theme-toggler {
    background-color: var(--color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.6rem;
    width: 4.2rem;
    cursor: pointer;
    border-radius: 0.4rem;
    position: fixed;
    right: 15px;
    top: 50px;
    z-index: 108;
}

.theme-toggler span {
    font-size: 1.2rem;
    width: 50%;
    height: 100%;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
     
}

.theme-toggler span.active {
    background: rgba(255, 0, 0, 0.63);
    color: white;
    border-radius: 0.4rem;
}
.logo {
    width: 106px;
    height: auto;
    margin-top: 8px;
    margin-left: 2%;
    background: #b1b1b194;
    border-radius: 12px;
    border: 2px solid #b1b1b173;
}
.dmenu {
    display: flex;
    justify-content: center;
}
.menu{
    display: flex;
    list-style: none;
    position: absolute;
    top: 40px;   
}

.menu-desktop {
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    padding: 0 0.8rem;
    background: var(--color-white);
    width: 100%;
    height: 8.7rem;
    margin: 0;
    z-index: 105;
    box-shadow: 0 1rem 2rem var(--color-light);
}
.menu li #a-menu{
    text-decoration: none;
    color: var(--secondary-color);
    padding: 10px;
}
.menuderoulant {
    display: none;
    position: absolute;
    max-height: 80vh;
    margin-top: 0.8rem;
    background-color: var(--color-danger);
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 20px, rgba(0, 0, 0, 0.5) 0px 3px 10px;;
    list-style: none;
    text-decoration: none;
    z-index: 10;
    overflow: auto;
}
.fa-brands {
    font-size: 2rem;
    margin: .5rem;
}
.fa-solid {
    font-size: 2rem;
    margin: .5rem;

}

.sidebar-lightbox.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: -1;
    animation: lightboxIn .5s;
    transition: 200ms ease;
}
.resultats-titre {
    margin: 3rem;
    color: var(--color-dark);
}
.search-box{
    width: 60%;
    background: var(--color-white);
    border: 1px solid var(--eight-color);
    margin: 2rem auto 0;
    border-radius: 20px;
}
.row{
    display: flex;
    align-items: center;
    padding: 5px 20px;

}
.search-box input {
    flex: 1;
    height: 50px;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 18px;
    color: var(--color-dark2);
}
#search-input::-webkit-search-cancel-button{
    position:relative;
    right:20px;  
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius:10px;
    cursor: pointer;
    background: url('data:image/svg+xml;utf8, <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.978424 0.978424C1.6051 0.351939 2.45494 0 3.34105 0C4.22717 0 5.07701 0.351939 5.70368 0.978424L17.5202 12.7949L29.3367 0.978424C29.9669 0.369694 30.8111 0.0328628 31.6873 0.0404768C32.5635 0.0480907 33.4016 0.399541 34.0212 1.01913C34.6408 1.63872 34.9923 2.47688 34.9999 3.35308C35.0075 4.22928 34.6707 5.07342 34.0619 5.70368L22.2454 17.5202L34.0619 29.3367C34.6707 29.9669 35.0075 30.8111 34.9999 31.6873C34.9923 32.5635 34.6408 33.4016 34.0212 34.0212C33.4016 34.6408 32.5635 34.9923 31.6873 34.9999C30.8111 35.0075 29.9669 34.6707 29.3367 34.0619L17.5202 22.2454L5.70368 34.0619C5.07342 34.6707 4.22928 35.0075 3.35308 34.9999C2.47688 34.9923 1.63872 34.6408 1.01913 34.0212C0.399541 33.4016 0.0480907 32.5635 0.0404768 31.6873C0.0328628 30.8111 0.369694 29.9669 0.978424 29.3367L12.7949 17.5202L0.978424 5.70368C0.351939 5.07701 0 4.22717 0 3.34105C0 2.45494 0.351939 1.6051 0.978424 0.978424Z" fill="grey"/></svg>') center center / 100% 100%;
}
.search-box input::placeholder{
    color: var(--color-dark2);
}
.search-box button {
    background: transparent;
    border: 0;
    outline: 0;
}
.search-box button .fa-search {
    width: 25px;
    color: #747474;
    font-size: 22px;
    cursor: pointer;
}
.search-box-container{
    display: flex;
    margin: 9rem auto 3rem;
    position: absolute;
    width: 100%;
    z-index: 12;
}
.result-box ul {
    border-top: 1px solid #999;
    padding: 15px 10px;
    overflow: auto;
    max-height: 40vh;
}

.result-box ul li {
    border-radius: 3px;
    padding: 15px 10px;
    cursor: pointer;
}
.result-box ul li:hover,
.result-box ul li:focus {
    background: var(--hover-recherche);
}
.result-box ul li a {
    color: var(--color-dark2);
}
.search-lightbox.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 109;
    animation: lightboxIn .5s;
    transition: 200ms ease;
}


.search-box-button{
    display: none;
}
.fa {
    color: var(--color-dark);
    font-size: 14px;
}
.havechild:hover .menuderoulant {
    display: block;
}
.menu li #a-menu:hover{
    text-decoration: none;
    background-color: #ea312f;
    color: #fff;
    border-radius: 5px;
    
}
.menu li #a-menu.active{
    background-color: #ea312f;
    color: #fff;
    border-radius: 5px;
    padding: 10px;
    
}

.menuderoulant a{
    text-decoration: none;
    color: white;
    font-size: 15px;
    display: flex;
    justify-content: center;
}
.menuderoulant div{
    padding: 20px 80px;
}
.menuderoulant div:hover{
    background-color: #0000004b;
    border-radius: 5px;   
}
.menuderoulant a:hover{
    text-decoration: none;
    color: #fff;
}
.menuderoulant a.active{
    background-color: #ea312f;
    color: #fff;
    border-radius: 5px;
    
}
.menu .liParent{
    margin: 15px;
}

.main{
    height: 100%;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.55) 2px 10px 30px;
}
.titre {
    position: relative;
    margin-left: 4%;
    margin-bottom: 2rem;
    font-size: x-large;
    width: fit-content;
    color: var(--secondary-color);
}

.titre::before{
    content: "";
    position: absolute;
    bottom: -5px;
    height: 4px;
    width: 40%;
    background: #ea312f;
    border-radius: 8px;
}
.wrapper,
.slide{
    width: 100%;
    height: 100%;
    
}

.slide{
    overflow: hidden;
}

.slide::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.007);
    opacity: 80%;

}

.slide .image{
    background-image: var();
    height: 100%;
    width: 100%;    
}
.slide .image-data{
    position: absolute;
    top:40%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 100%;
    z-index: 100;

}
.autoplay-progress {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 15;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
    opacity: 70%;
  }

  .autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 5;
    stroke: var(--swiper-theme-color);
    fill: none;
    stroke-linecap: round;    
    stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
  }

.image-data span.text{
    font-size: 100;
    color: #fff;
}
.image-data h2{
    font-size: 100;
    color: #fff;
}

a.button{
    display: inline-block;
    padding: 10px 20px;
    background: #ffffff77;
    border-radius: 25px;
    color: #333;
    text-decoration: none;
    border: 1px solid #333;
    margin-top: 25px;
    transition: all 0.3s ease;
}

a.button:hover{
    background-color: #333;
    color: #fff;
}

.nav-btn span{
    color: var(--color-dark);
    font-size: 70px;
    transition: all 0.3s ease;
    opacity: 0.6;
}
.nav-btn span:hover{
    color: var(--color-dark);
    font-size: 100px;
    opacity: 1;
}
.menu-bar-parent {
    margin-left: 10%;
}
.menu-bar-parent a {
    text-decoration: none;
    color: #ea312f;
    font-weight: bolder;
}
.menu-bar-parent ul {
    list-style: none;
}
.menu-bar-parent ul li ul {
    display: none;
}

.bod{
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-content{
    margin: 20px 40px;
}


.card{
    border-radius: 25px;
    background-color: #fff;
    width: 280px;
    box-shadow: var(--box-shadow2);
    margin-bottom: 2rem;
    transition: transform all 0.5s ease;
    cursor: pointer;
}

.swiper-product {
    margin-top: 1rem !important;
}

.card:hover {
    box-shadow: var(--box-shadow3);
    transform: translateY(4px);

}


.card-product{
    border-radius: 4px;
    background-color: grey;
    width: 280px;
    margin-bottom: 50px;
}

.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 25px 25px 0 25px;
    background-color: #ea312f;
}

.overlay::before,
.overlay::after{
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #ea312f;
    right: 0;
    bottom: -15px;
    
}
.overlay::after{
    border-radius: 0 10px 0 0;
    background-color: #fff;
}

.name{
    font-size: 14px;
    padding: 10px 0;
    font-weight: 500;
    color: #333;
    max-height: 40px;
}

.description{
    font-size: 14px;
    color: #707070;
    text-align: center;
}

.image-content, .card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;

}
.image-content-product{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 3px 0 3px;

}
.card-content-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 5px 20px 5px;
}

.image-content{
    position: relative;
    row-gap: 5px;
    padding: 18px 1px 18px 1px;
    transition: all 300ms ease;
}

.image-content-product{
    position: relative;
    row-gap: 5px;
}

.button{
    border: none;
    font-size: 16px;
    color: #fff;
    padding: 8px 16px;
    background-color: #ea312f;
    border-radius: 6px;
    margin: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover{
    background-color: #af0000;
}



.card-image{
    position: relative;
    height: 90%;
    width: 92%;
    background: #fff;
    padding: 3px;
    border-radius: 25px;
}
.catig{
    padding: 15px;
}
.catig-product {
    display: flex;
    margin-bottom: 30rem;
    justify-content: space-around;
}
.catig h3{
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 2.5rem;
    font-size: 1.6rem;
    color: var(--third-color);
}

.produit-desc {
    padding: 0 5% 0 5%;
    width: 60%;
    border-radius: var(--border-radius-3);
    margin-right: 4%;
    overflow: auto;
    color: var(--color-dark);
}

.produit-desc h4 {
    margin-bottom: 1.5rem;
}
.produit-desc p {
white-space: break-spaces;
}
.image-prod{
    width: 40%;
    padding-left: 50px;
    border-radius: 5px;
}
.img-product{
    background-color: #5e5e5e;
    border-radius: 5px;
    width: 100%;

}
.card-image-product .card-img-product{
    border-radius: 4px;
    position: relative;
    height: 100%;
    width: 100%;
    background: #fff;
    object-fit: cover;
}

.slide-container{
    max-width: 1820px;
    width: 100%;
    padding: 40px 0;
    margin-top: 0rem !important;
}
.card-image .card-img{
    height: 100%;
    width: 100%;
    object-fit: fill;
    border-radius: 25px;
    border: solid 3px #ea312f;
}


.Contact {
    margin-top: 8ch;
    margin-bottom: 15ch;
    margin-left: 3%;
    margin-right: 3%;
    background-color: var(--seventh-color);
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1rem 3rem var(--color-light);
}
.inp1-parent{
    display: flex;
    justify-content: space-around;
}
.inp2-parent{
    display: flex;
    justify-content: space-around;
}
.inp3-parent{
    display: flex;
    justify-content: space-around;
}
.inp4-parent{
    display: flex;
    justify-content: space-around;
}

.Contact .Envoyer {
    padding: 15px 20px 15px  20px;
    width: 10rem;
    background: #ea312f;
    color: #fff;
    font-size: 100%;
    border-radius: 8px;
    transition: .3s ease;
    cursor: pointer;
}
.Contact .Envoyer:hover {
    background: #af0000;
}
.Contact p {
    color: var(--secondary-color);
    margin: 1.5em 0;
}
.Contact a {
    color: var(--secondary-color);
    text-decoration: none;
}
.Contact label {
    color: var(--secondary-color);
}
.Contact input {
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.507);
    appearance: auto;
}
.Contact select{
    height: 42px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #aaa;
    color: #333;
    width: 45%;
    border-radius: var(--border-radius-1);
    margin: 0.5rem 0;
    appearance: revert;
}
.mentions-check {
    color: #fff;
}
.input-parent {
    padding: 2rem;
}
.inp1 {
    width: 47%;
    height: 60px;
    padding: 0 0 0 10px;
    font-size: 140%;
}

.inp2 {
    width: 47%;
    height: 60px;
    padding: 0 0 0 10px;
    font-size: 140%;
}
.inp3 {
    width: 47%;
    height: 60px;
    padding: 0 0 0 10px;
    font-size: 140%;
}
.inp4 {
    width: 30.5%;
    height: 60px;
    padding: 0 0 0 10px;
    font-size: 140%;
}
.inp6 {
    width: 90%;
    height: 160px;
    padding: 0 0 0 10px;
    font-size: 140%;
}
.demande {
    border: 4px solid var(--eight-color);
    padding: 20px; 
    position: relative; 
}

.demande h3 {
    background-color: var(--eight-color); 
    display: inline-block;
    position: relative; 
    z-index: 1;
    margin: 0;
    padding: 0 10px;
    top: -30px;
}
.check-box-container {
    display: flex;
    gap: 7px;
    margin: 1rem 0;
}
.check-box-container input {
    margin-top: 0px;
    margin-bottom: 0px;
}
  
.present {
    margin-top: 5ch;
    margin-bottom: 30ch;
    padding: 3rem 9rem;
}
.present .presentation h1{
    font-size: 2rem;
    color: var(--secondary-color);
    word-wrap: break-word;
}
.present .presentation p {
    width: 90%;
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: var(--secondary-color);
    word-wrap: break-word;
}
.present h3{
    text-align: start;
    margin-bottom: 30px;
    font-size: 1.6rem;
    color: #ea312f;
    word-wrap: break-word;
}
.present .presentation h2{
    text-align: start;
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 2rem;
    word-wrap: break-word;
}

.present p {
    width: 90%;
    font-size: 1.2rem;
    margin-bottom: 50px;
    color: var(--secondary-color);
    word-wrap: break-word;
}
.titre4 {
    position: relative;
    margin-left: 1%;
    margin-bottom: 2rem;
    width: fit-content;
    color: var(--secondary-color);
}
.titre4::before {
    content: "";
    position: absolute;
    bottom: -5px;
    height: 4px;
    width: 40%;
    background: #aa352c;
    border-radius: 8px;
}
.present .a-parent{
    display: flex;
    justify-content: center;
    margin-left: -10%;
}
.present .a-parent a {
    text-decoration: none;
    color: #fff;
    background-color: #ea312f;
    padding: 14px 30px 14px 30px;
    border-radius: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.photo-atelier a:hover {
    background-color: #af0000;
}
.present a:hover{
    /* background-color: #af0000; */
    color: #000;
}
.present a {
    color: rgb(136, 136, 136);
    font-size: 1.2rem;
    word-wrap: break-word;
}
.present-indx {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 6rem;
    margin-bottom: 6rem;
}
.present-indx h1{
    font-size: 1.8rem;
    color: var(--secondary-color);
}
.present-indx h3{
    font-size: 1.6rem;
    color: #ea312f;
}

.present-indx p {
    font-size: 1.2rem;
    color: var(--secondary-color);
}
.photo-atelier {
    display: flex;
    background-color: #97979786;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;
    flex-wrap: wrap;
}

.photo-atelier img {
    width: 100%; 
    height: auto;
    margin-bottom: -1px;
}

.photo-atelier a {
    margin-right: 10px;
    flex: 1 0 160px;
    margin-bottom: 10px; 
}


.instructions {
    margin-top: 8ch;
    margin-bottom: 15ch;
    margin-left: 3%;
    margin-right: 3%;
    background-color: var(--seventh-color);
    box-shadow: 0 1rem 3rem var(--color-light);
    padding: 5%;
    border-radius: 5px;
    position: relative;
}
.instructions h4{
    color: var(--color-dark);
}
.instructions p{
    color: var(--color-dark);
}
.recherche-aide-parent {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 10px;
}
.recherche-aide {
    width: 40%;
    height: 30px;
    padding: 0 20px 0 20px;
    transition: 0.1s;
    opacity: 70%;
    font-size: 120%;
    color: #fff;
    background-color: rgb(151, 151, 151);
    border-radius:25px 0 0 25px ;
}
.recherche-button-aide {
    margin-top: 0px;
    width: 100px;
    height: 30px;
    border-radius: 0 25px 25px 0;
    background-color: rgb(151, 151, 151);
}


.rech::placeholder{
    color: #fff;
}


.ev {
    position: relative;
}
.ev h3{
    text-align: center;
    margin-bottom: 6rem;
    margin-top: 6rem;
    font-size: 1.6rem;
    color: var(--third-color);
}
.ev ul{
    margin-bottom: 15ch;
}




.up img {
    width: 20px;
    height: 20px;
}
.up {
    position: fixed;
    bottom: -60px;
    left: 90%;
    width: 40px;
    height: 40px;
    color: white;
    background-color: #ea312f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0%;
    cursor: pointer;
    transition: 0.5s;
    z-index: 199;
}

.up.show {
    bottom: 60px;
    opacity: 50%;
}
.up:hover {
    opacity: 100%;
}
.product-catig{
    display: grid;
    justify-content: space-around;
}
.product-catig a {
    text-decoration: none;
    color: #000;
    margin-bottom: 8rem;
    margin-top: 4rem;
}

.gal {
    margin-bottom: 5rem;
}
.gal h3 {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 100px;
    font-size: 1.6rem;
    color: var(--third-color);
}

.gal .img1{
    width: 30%;
    height: 19%;
    rotate: -10deg;
    position: relative;
    top: 30px;
    left: 7rem;
    border-radius: var(--border-radius-2);
    cursor: pointer;
    transition: all 100ms ease;
}

.gal .img1:hover{
    width: 34%;
    height: 21%;
    rotate: 0deg;
    z-index: 2;
    border: 3px solid var(--color-dark);
    border-radius: var(--border-radius-2);
}

.gal .img2{
    width: 30%;
    height: 19%;
    rotate: 4deg;
    position: relative;
    top: 30px;
    left: 3rem;
    border-radius: var(--border-radius-2);
    cursor: pointer;
    transition: all 100ms ease;
    
}

.gal .img2:hover{
    width: 34%;
    height: 21%;
    rotate: 0deg;
    z-index: 2;
    border: 3px solid var(--color-dark);
    border-radius: var(--border-radius-2);
}

.gal .img3{
    width: 30%;
    height: 19%;
    rotate: 10deg;
    position: relative;
    left: 3rem;
    top: 3rem;
    border-radius: var(--border-radius-2);
    cursor: pointer;
    transition: all 100ms ease;
}

.gal .img3:hover{
    width: 34%;
    height: 21%;
    rotate: 0deg;
    z-index: 2;
    border: 3px solid var(--color-dark);
    border-radius: var(--border-radius-2);
}


.gal .img4{
    width: 30%;
    height: 19%;
    rotate: -3deg;
    position: relative;
    top: 3rem;
    left: 3rem;
    border-radius: var(--border-radius-2);
    cursor: pointer;
    transition: all 100ms ease;
}

.gal .img4:hover{
    width: 34%;
    height: 21%;
    rotate: 0deg;
    z-index: 2;
    border: 3px solid var(--color-dark);
    border-radius: var(--border-radius-2);
}


.gal .img5{
    width: 30%;
    height: 19%;
    rotate: 6deg;
    position: relative;
    top: 3rem;
    left: 5rem;
    border-radius: var(--border-radius-2);
    cursor: pointer;
    transition: all 100ms ease;
}

.gal .img5:hover{
    width: 34%;
    height: 21%;
    rotate: 0deg;
    z-index: 2;
    border: 3px solid var(--color-dark);
    border-radius: var(--border-radius-2);
}


.gal .img6{
    width: 30%;
    height: 19%;
    rotate: 0deg;
    border-radius: var(--border-radius-2);
    cursor: pointer;
    transition: all 100ms ease;
}

.gal .img6:hover{
    width: 34%;
    height: 21%;
    rotate: 0deg;
    z-index: 2;
    border: 3px solid var(--color-dark);
    border-radius: var(--border-radius-2);
}


.gal .img7{
    width: 30%;
    height: 19%;
    rotate: 5deg;
    position: relative;
    top: 6px;
    left: 19rem;
    border-radius: var(--border-radius-2);
    cursor: pointer;
    transition: all 100ms ease;
}

.gal .img7:hover{
    width: 34%;
    height: 21%;
    rotate: 0deg;
    z-index: 2;
    border: 3px solid var(--color-dark);
    border-radius: var(--border-radius-2);
}


.gal .img8{
    width: 30%;
    height: 19%;
    rotate: -6deg;
    position: relative;
    top: 17px;
    left: 22rem;
    border-radius: var(--border-radius-2);
    cursor: pointer;
    transition: all 100ms ease;
}

.gal .img8:hover{
    width: 34%;
    height: 21%;
    rotate: 0deg;
    z-index: 2;
    border: 3px solid var(--color-dark);
    border-radius: var(--border-radius-2);
}


.nouveau h3{
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 2.5rem;
    font-size: 1.6rem;
    color: var(--third-color);
}



footer{
    padding-top: 2%;
}


footer p {
    font-size: 1rem;
    padding-top: 20px;
    color: var(--primary-color);
}
.footer-parent{
    background-color: var(--forth-color);
    position: relative;
}

footer .gri .col1 a {
    text-decoration: none;
    color: var(--primary-color);
    
}

.logo1{
    display: flex;
    justify-content: center;

}

footer .logo1 img {
    width: 100px;
    height: 100px;
}

.gri{
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-content: space-around;
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 30px;
    padding-bottom: 30px;
}
.gri h4{
    position: relative;
    margin-bottom: 2rem;
}
footer .gri h4::before{
    content: "";
    position: absolute;
    bottom: -10px;
    height: 3px;
    width: 12%;
    background: #ea312f;
    border-radius: 8px;
}
 
.col1 {
    padding-right: 10%;
}
.col2 {
    padding-right: 10%;

}
.col3 {
    padding-right: 10%;

}

.col3 ul li {
    list-style: none;
}
.col3 ul li a {
    text-decoration: none;
    color: var(--primary-color);
}
.col3 ul li a:hover {
    text-decoration: none;
    color: var(--sixth-color);
}

.col2 h5 {
    color: var(--primary-color);
    margin-top: 20px;
}
.col2 h4 {
    color: var(--primary-color);
    font-size: 1.4rem;
}
.col2 a {
    text-decoration: none;
    color: var(--color-white);
}
.col2 a:hover {
    text-decoration: none;
    color: var(--sixth-color);
}
.col1 h4 {
    color: var(--primary-color);
    font-size: 1.4rem;
}
.col3 h4 {
    color: var(--primary-color);
    font-size: 1.4rem;
}
.col4 h4 {
    color: var(--primary-color);
    font-size: 1.4rem;
}

.mapouter{
    margin-top: 20px;
    width:280px;
    height:150px;
    border-radius: 20px;
    border: solid 1px black
}
.gmap_canvas {
    width: 100%;
    height: 100%; 
    border-radius: 20px;
}
.gmap_iframe {
    border-radius: 20px;
}
.mapouter2{
    margin-top: 20px;
    width: 90%;
    height:300px;
    border-radius: 12px;
    border: solid 1px black
}
.gmap_canvas2 {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
.gmap_iframe2 {
    border-radius: 20px;
}


.liens {
    padding: 20px 30px 20px 20px;
    background-color: var(--fiveth-color);
    border-top: solid 1px #000;
    margin-bottom: 2em;
}
.liens2{
    display: flex;
    justify-content: start;
}
.liens p {
    font-size: medium;
    color: var(--secondary-color);
}
.liens a {
    text-decoration: none;
    color: var(--secondary-color);
}
.liens a:hover {
    color: var(--forth-color);
}




.icon-menu {
    cursor: pointer;
}
.menubar {
    z-index: 15;
}
.mentions-legales {
    text-align: justify;
    padding: 5%;
    background-color: var(--seventh-color);
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 3%;
    margin-bottom: 3%;
    color: var(--secondary-color);
    border-radius: 5px;
    box-shadow: 0 1rem 2rem var(--color-light);
}
.mentions-legales p {
    margin-bottom: 30px;
}
.mentions-legales a {
    color: var(--secondary-color);
}
.mentions-legales a:hover {
    color: var(--forth-color);
}
.donnees-personnelles {
    text-align: justify;
    padding: 5%;
    background-color: var(--seventh-color);
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 3%;
    margin-bottom: 3%;
    color: var(--secondary-color);
    border-radius: 5px;
    box-shadow: 0 1rem 2rem var(--color-light);
}
.donnees-personnelles p {
    margin-bottom: 30px;
}
.donnees-personnelles ul {
    padding-left: 40px;
    margin-bottom: 30px;
}



/*=================== LE HAUT DU SIDEBAR =====================*/

aside {
    height: 100vh;
    z-index: 111;
}

aside .top {
    background: var(--color-white);
    display: flex;
    align-items: center;
    gap: 8.5rem;
}

/*==================== SIDEBAR ====================== */

.logo-admin-page img {
    width: 60px;
    height: auto;
    background: #b1b1b194;
    border-radius: 12px;
    margin: 10px;
    border: 2px solid #b1b1b173;
}

aside .sidebar {
    background: var(--color-white);
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    height: 86vh;
}
.logo-sidebar{
    display: none;
}

.right .top .logo-sidebar {
    margin: auto auto;
}
.right .top .logo-sidebar img {
    width: 50px;
    height: 50px;
    background: #b1b1b194;
    border-radius: 12px;
    border: 2px solid #b1b1b173;
}

aside h3 {
    font-weight: 500;

}

aside .sidebar a {
    display: flex;
    color: var(--color-info-dark);
    margin-left: 2rem;
    gap: 1rem;
    align-items: center;
    position: relative;
    height: 3.7rem;
    transition: all 300ms ease;
}

aside .sidebar a span {
    font-size: 1.6rem;
    transition: all 300ms ease;
}
aside .sidebar a.active {
    background: var(--color-light-danger);
    color: var(--color-primary);
    margin-left: 0;
}

aside .sidebar a.active::before {
    content: "";
    width: 6px;
    height: 100%;
    background: var(--color-danger);
}

aside .sidebar a.active span {
    color: var(--color-primary);
    margin-left: calc(1rem - 3px );
}

aside .sidebar a:hover {
    color: var(--color-primary);
}

aside .sidebar a:hover span {
    margin-left: 1rem;
}



/*================ FIN DE SIDEBAR ===================*/


/*==================== section a droite ===================*/

.right .top button {
    display: none;
}

.right .top {
    display: flex;
    justify-content: end;
    gap: 2rem;
}



/* ======================= fin section a droite ========================*/


/* ======================== table fiche technique ======================*/

.recent-orders {
    
    padding-left: 5%;
    margin-bottom: 4rem;
    align-items: center;
    margin-top: -24rem;
}

.recent-orders h3 {
    margin-bottom: 2.5rem;
    color: var(--color-dark);
}

.recent-orders table {
    background: var(--eight-color);
    width: 95%;
    border-radius: var(--border-radius-3);
    padding: var(--card-padding);
    text-align: center;
    box-shadow: rgba(5, 5, 5, 0.5) 0px 7px 20px;
    transition: all 300ms ease;
}

.recent-orders table:hover {
    box-shadow: none;
}

table thead th {
    padding-bottom: 1rem;
    border-bottom: 2.5px solid var(--seventh-color);
    font-size: large;
}
table tbody td {
    height: 2.8rem;
    border-bottom: 2.5px solid var(--seventh-color);
    color: var(--color-dark);
    font-weight: 400;
}

table thead {
    color: var(--color-dark);
    font-weight: bolder;
}

table tbody tr:last-child td {
    border: none;
}


/*======================= fin table fiche technique =========================*/
.resultats-titre-conteneur{
    margin-top: 18rem;
}
/*================================= lightbox ===========================*/


.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .9);
    z-index: 209;
    animation: lightboxIn .5s;
    transition: 200ms ease;
}
.lightbox.fadeOut {
    opacity: 0;
}
.lightbox__next,
.lightbox__prev {
    background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g transform="rotate(90 12 12)"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m17 14l-5-5l-5 5"/></g></svg>') center center / 50px 60px no-repeat;
    width: 50px;
    height: 100%;
    position: fixed;
    top: 0;
    right: -11px;
    margin-top: -14px;
    z-index: 11;
}

.lightbox__prev {
    right: auto;
    left: -11px;
    transform: rotate(180deg);
}
.lightbox__close{
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8, <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.978424 0.978424C1.6051 0.351939 2.45494 0 3.34105 0C4.22717 0 5.07701 0.351939 5.70368 0.978424L17.5202 12.7949L29.3367 0.978424C29.9669 0.369694 30.8111 0.0328628 31.6873 0.0404768C32.5635 0.0480907 33.4016 0.399541 34.0212 1.01913C34.6408 1.63872 34.9923 2.47688 34.9999 3.35308C35.0075 4.22928 34.6707 5.07342 34.0619 5.70368L22.2454 17.5202L34.0619 29.3367C34.6707 29.9669 35.0075 30.8111 34.9999 31.6873C34.9923 32.5635 34.6408 33.4016 34.0212 34.0212C33.4016 34.6408 32.5635 34.9923 31.6873 34.9999C30.8111 35.0075 29.9669 34.6707 29.3367 34.0619L17.5202 22.2454L5.70368 34.0619C5.07342 34.6707 4.22928 35.0075 3.35308 34.9999C2.47688 34.9923 1.63872 34.6408 1.01913 34.0212C0.399541 33.4016 0.0480907 32.5635 0.0404768 31.6873C0.0328628 30.8111 0.369694 29.9669 0.978424 29.3367L12.7949 17.5202L0.978424 5.70368C0.351939 5.07701 0 4.22717 0 3.34105C0 2.45494 0.351939 1.6051 0.978424 0.978424Z" fill="white"/></svg>') center center / 100% 100%;
    position: fixed;
    top: 20px;
    right: 40px;
    z-index: 12;
}
.lightbox button {
    opacity: .5;
    text-indent: -3000px;
    cursor: pointer;
    transition: 300ms ease;
}
.lightbox button:hover {
    opacity: 1;
}
.lightbox__container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 28px;
    min-height: 100vh;
}
.lightbox__container img {
    max-width: 100%;
    height: 90vh;
    animation: lightboxIn .5s;

}
@keyframes lightboxIn{
    from{opacity: 0;}
    to{opacity: 1;}
}

.lightbox__loader {
    width: 350px;
    height: 350px;
    opacity: .5;
    background: url('data:image/svg+xml;utf8,<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg" stroke="%23fff"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle cx="5" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;5;50;50" calcMode="linear" repeatCount="indefinite" /><animate attributeName="cx" begin="0s" dur="2.2s" values="5;27;49;5" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="27" cy="5" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" from="5" to="5" values="5;50;50;5" calcMode="linear" repeatCount="indefinite" /><animate attributeName="cx" begin="0s" dur="2.2s" from="27" to="27" values="27;49;5;27" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="49" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;50;5;50" calcMode="linear" repeatCount="indefinite" /><animate attributeName="cx" from="49" to="49" begin="0s" dur="2.2s" values="49;5;27;49" calcMode="linear" repeatCount="indefinite" /> </circle> </g> </g> </svg>') center center no-repeat;

}
/*======================== fin de lightbox ==================================*/

/*===================================== evenement ======================================*/

.prochain-evenement{
    height: auto;
    box-shadow: 0rem 0rem 3rem #00000038;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    overflow: hidden;
}

.prochain-evenement h4 {
    display: flex;
    transform: scale(1);
    margin: 2rem 0;
    color: var(--secondary-color);
    text-align: center;
    font-size: 19px;
    font-weight: bold;
}

.prochain-evenement p {
    text-align: center;
    transform: scale(1);
    color: var(--secondary-color);
    font-weight: normal;
    margin: 2rem 0;
    white-space: break-spaces;
    font-size: 17px;
}

.countdown-container{
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0rem;
    border-radius: 15px 0 0px 15px;
    margin: 0rem 0;
    transform: scale(1);
}
.photo-and-countdown{
    display: grid;
    grid-template-columns: 40% 60%;
    width: 90%;
}
.countdown-container .countdown::before{
    content: "";
    position: absolute;
    bottom: 0;
    height: .5px;
    width: 92%;
    background: var(--color-dark);
    border-radius: 5px;

}
.countdown {
    display: flex;
    justify-content: center;
    color: var(--color-dark);
    position: relative;
    transform: scale(1.3);
    padding: 3px;
    top: 0;
    right: 0;
}
.calendar{
    display: flex;
    justify-content: center;
    color: var(--color-dark);
    gap: 1rem;
    margin-top: 5rem;
    padding: 3px;
}
.position{
    display: flex;
    justify-content: center;
    color: var(--color-dark); 
    gap: 1rem;
    padding: 3px;
    margin-bottom: 1.5rem;
}
.photo-container{
    padding: 2rem 2rem;
    border-radius: 0 15px 15px 0;
    background: var(--color-white);
}
.photo-container img{
    width: 100%;
}
.icon-calendar{
    display: flex !important;
    align-items: center;
}
.calendar .date-calender {
    font-size: clamp(12px, 4vw, 22px);
}
.position .position-map {
    font-size: clamp(12px, 4vw, 20px);
    display: flex !important;
    align-items: center;
}
.time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 15px;
}

.time h2 {
    font-weight: bold;
    font-size: 26px;
    line-height: 1;
    margin: 0 0 5px;
}
.previous-event-container{
    box-shadow: 0rem 0rem 9rem #00000073;
    display: flex;
    margin: 0;
    overflow: hidden;
    padding: 15px;
    margin: 3rem;
    background: var(--color-white);
    border-radius: var(--border-radius-3); 
}
.event-content h2 {
    color: var(--color-dark);
    font-size: clamp(8px, 4vw, 19px);
    font-weight: 800;
    margin: 2rem 0;
    padding: 0rem 5rem 0rem 0rem;
}
.event-content {
    padding: clamp(15px, 3vw, 30px);
    width: 70%;
}
.event-content a {
    color: #fff;
    background-color: #af0000bd;
    padding: 10px;
    font-size: clamp(2px, 4vw, 18px);
    size: clamp(4px, 4vw, 10px);
    border-radius: var(--border-radius-3);
}
.event-content a:hover{
    background-color: #af0000e5;
}
.event-content p{
    color: var(--color-dark);
    font-size: clamp(6px, 4vw, 17px);
    margin: 2rem 0;
    text-align: center;
    white-space: break-spaces;
    font-weight: normal;
}
.previous-event-container .photo{
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    padding: 3rem 0 3rem 3rem;
}
.previous-event-container .photo img {
    display: block;
    width: 270px;
    height: 203;
    border-radius: var(--border-radius-3);
    margin: 10px;
}

.previous-event-container .dernier-liens .photo-w-liens{
    position: relative;
}
.previous-event-container .voir-plus {
    position: relative;
    bottom: 10px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 22px;
    font-weight: 800;
    width: 270px;
    height: 203px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-3);
    z-index: 1;
    transform: translateY(-100%);
}

.previous-event-container-spc {
    box-shadow: 0rem 0rem 9rem #00000073;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin: 0;
    overflow: hidden;
    padding: 15px;
    margin: 3rem;
    background: var(--color-white);
    border-radius: var(--border-radius-3);
}
.previous-event-container-spc .photo{
    display: flex;
    justify-content: center;
    overflow: hidden;
    flex-wrap: wrap;
    padding: 3rem 0 3rem 3rem;
}
.previous-event-container-spc .photo img {
    width: 270px;
    border-radius: var(--border-radius-3);
    margin: 10px;
}

.previous-event-container-spc .img-event {
    display: block;
    width: 100%; 
    height: auto; 
}
.previous-event-container-spc .dernier-liens .photo-w-liens{
    position: relative;
}
.previous-event-container-spc .voir-plus {
    position: relative;
    bottom: 10px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 22px;
    font-weight: 800;
    width: 270px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 264px;
    border-radius: var(--border-radius-3);
    z-index: 1;
    transform: translateY(-100%);
}
.previous-event-container-spc .video-container {
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    border-radius: var(--border-radius-3);
    padding: 15px;

}
.previous-event-container-spc h3 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.previous-event-container-spc .video-container video {
    width: 100%;
}
/*=============================== fin du countdown timer ==================================*/
 
.message-erreur {
    color: #aa352c;
    margin-top: -2.5rem;
    display: flex;
    justify-content: center;
}



@media screen and (max-width: 2697px){
    .gri{
        grid-template-columns: 25% 25% 25% 25%;
    }

    .slide-container{
        max-width: 1750px;
        width: 100%;
    }

    .bod{
        min-height: 20vh;   
    }
    .product-catig {
        grid-template-columns: auto auto auto auto;
    }

    
}


@media screen and (max-width: 1500px){
    .gri{
        grid-template-columns: 25% 25% 25% 25%;
    }
    .slide-container{
        max-width: 1550px;
        width: 100%;
    }
    .bod{
        min-height: 20vh;
    }
    .product-catig {
        grid-template-columns: auto auto auto;
    }
}
@media screen and (max-width: 1150px){
    footer p {
        font-size: 1rem;
    }
    footer a {
        font-size: 1rem;
    }
    footer .gri .col1 a {
        font-size: 1rem;
    }
    .gri{
        grid-template-columns: 25% 25% 25% 25%;
    }
    .gri h4 {
        font-size: 1.4rem;
    }
    .gri h5 {
        font-size: 1rem;
    }

    .mapouter{
        width:226px;
        height:110px;
    }
    .gmap_canvas {
        width:226px;
        height:110px; 
    }

    .product-catig{
        display: grid;
        grid-template-columns: auto auto;
    }

    .gal .img1{
        left: 3rem;
    }
    .gal .img5{
        left: 3rem;
    }
    .gal .img6{
        left: 3rem;
    }
    .gal .img7{
        left: 10rem;
    }
    .gal .img8{
        left: 12rem;
    }
    .nouveau h3 {
        margin-top: 0px;
        margin-bottom: 30px;
    }
    
    .gal h3 {
        margin-top: 120px;
        margin-bottom: 50px;
    }
    .countdown{
        transform: scale(1);
    }
    .calendar{
        margin-top: 3.5rem;
    }
    .position .position-map {
        font-size: 15px;
        font-weight: 500;
    }
    .calendar .date-calender {
        font-size: 20px;
    }
    .position{
        gap: .3rem;
    }

}

@media screen and (max-width: 1050px){
    .previous-event-container{
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 1rem;
    }
    .previous-event-container .photo{
        padding: 15px;
        justify-content: center;
    }
    .previous-event-container-spc{
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 1rem;
    }
    .previous-event-container-spc .photo{
        padding: 15px;
        justify-content: center;
    }
    .event-content h2{
        padding: 0;
        margin: 0.5rem 0;
    }
    .event-content p{
        margin: 0.5rem 0;
    }
    .calendar{
        margin-top: 0.5rem;
    }
    .position{
        margin-bottom: 1.5rem;
    }
    .event-content{
        width: 90%;
        padding: 0;
    }
    
}
@media screen and (max-width: 950px){
    .gri{
        grid-template-columns: 50% 50%;
        margin-left: 15%;
    }
    .menu-desktop{
        display: none;
    }
    aside {
        position: fixed;
        left: -100%;
        top: 0;
        background: var(--color-white);
        width: 18rem;
        z-index: 111;
        box-shadow: 1rem 3rem 4rem var(--color-light);
        height: 100vh;
        display: none;
        animation: showMenu .5s ease forwards;
    }

    @keyframes showMenu {
        to{
            left: 0;
        }
        
    }


    aside .logo-admin-page {
        margin-left: 1rem;
    }

    aside .sidebar h3 {
        display: inline;
    }

    aside .sidebar a {
        width: 89%;
        height: 3.4rem;
    }
    aside .sidebar a.active {
        width: 100%;
    }
    aside .close {
        display: inline-block;
        cursor: pointer;
        background: transparent;
        color: var(--color-dark);

    }

    aside .close span {
        font-size: 2rem;
    }

    .right {
        display: block;
        margin-top: 1.4rem;
        margin: 6rem auto 4rem;

    }

    .right .top {
        position: fixed;
        top: 0;
        left: 0;
        align-items: center;
        padding: 0 0.8rem;
        height: 4.6rem;
        background: var(--color-white);
        width: 100%;
        margin: 0;
        z-index: 2;
        box-shadow: 0 1rem 1rem var(--color-light);

    }

    .right .top .theme-toggler {
        width: 4.4rem;
        position: fixed;
        right: 15px;
        top: 1.4rem;
    }

    .right .profile .info {
        display: none;
    }

    .right .top button {
        display: block;
        background: transparent;
        cursor: pointer;
        color: var(--color-dark);
        position: absolute;
        left: 1rem;
    }

    .right .top button span {
        font-size: 2rem;
    }
    .topnav{
        display: flex;
    }
    .logo-sidebar{
        display: block;
    }

    header{
        position: fixed;
    }

    .recherche-bar{
        display: none;
    }
    .present-indx {
        margin-top: 6rem;
        margin-bottom: 6rem;
    }
    .present-indx h1{
        font-size: 1.8rem;
    }
    .present-indx h3{
        font-size: 1.6rem;
     }
    
    .present-indx p {
        font-size: 1.2rem;
    }
    .bod{
        min-height: 20vh;
    }
    .logo{
        margin-left: 40%;
    }
    .col3{ 
        margin-top: 30px;
    }
    .col4{
        margin-top: 30px;
    }
    .catig-product {
        display: block;
    }
    
    .produit-desc{
        width: 100%;
        padding: 5% 5% 5% 5%;
        overflow: visible;
    }
    .image-prod{
        padding: 2% 5%;
        border-radius: 5px;
    }
    .img-product{
        background-color: #5e5e5e;
        border-radius: 5px;
        width: 300%;
    }
    .catig-product{
        margin-bottom: 49ch;
    }

    .recent-orders {
        margin-top: -30rem;
    }

    *{
        font-size: 1rem;
    }
    
    .gal .img4{
        top: 4rem;
        rotate: 5deg;
    }
    .gal .img5{
        top: 3rem;
        rotate: 0deg;
    }
    .gal .img6{
        position: relative;
        top: 4rem;
        left: 3rem;
        rotate: -8deg;
    }
    .gal .img7{
        top: 4rem;
    }
    .gal .img8{
        top: 4rem;
    }
    .breadcrumb {
        margin-top: 0rem;
    }
    .breadcrumb.without-searchbox{
        margin-top: 0;
        margin-right: 1rem;
    }
    .Contact {
        padding: 15px;
    }
    .prochain-evenement h4 {
        font-size: 18px;
    }
    .time {
        margin: 10px;
    }
    .time h2{
        font-size: 20px;
    }
    .time small {
        font-size: 18px;
    }
    .photo-atelier a {
        flex: 1 0 25%;
    }
    .product-catig a {
        margin: 3rem 0;
    }
    .present {
        margin-top: 5ch;
        margin-bottom: 30ch;
        padding: 3rem 4rem;
    }
    .row{
        padding: 0 8px;
    }
    .search-box-container{
        margin: -5.3rem auto 0;
        position: fixed;
        right: 0;
        width: 99%;
        z-index: 110;
    }
    .search-box-container.hidden{
        width: 0%;
        
    }
    .search-box{
        margin: 0 auto 0;
        width: 99%;
        transition: width 500ms ease-in-out;
    }
    .search-box.search-box-hidden {
        width: 0%;
    }
    .search-box-button {
        display: block;
        position: fixed;
        right: 95px;
        top: 21px;
        background-color: var(--color-search-button);
        padding: 4px 10px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.13);
    }
    .result-box ul{
        max-height: 75vh;
    }
    .resultats-titre-conteneur{
        margin-top: 6rem;
    }
    .countdown{
        transform: scale(0.8);
    }
    .calendar{
        margin-top: 2rem;
    }
}



@media screen and (min-width: 950px){
    .menu-mobile{
        display: none;
    }
}

@media (max-width: 768px) {

    .present-indx {
        margin-top: 6rem;
        margin-bottom: 6rem;
    }
    .present-indx h1{
        font-size: 1.8rem;
    }
    .present-indx h3{
        font-size: 1.6rem;
     }
    
    .present-indx p {
        font-size: 1.2rem;
    }
    .bod{
        min-height: 20vh;
    }
    .product-catig{
        grid-template-columns: auto;
    }

    .recent-orders{
        margin-top: -30rem;
    }

    *{
        font-size: 1rem;
    }

    .nouveau h3 {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    .gal h3 {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .present {
        margin-top: 5ch;
        margin-bottom: 35ch;
        padding: 3rem 3rem;
    }
    .contact-input {
        margin-top: 0;

    }
    .inp1-parent {
        display: block;
    }
    .inp2-parent {
        display: block;
    }
    .inp3-parent {
        display: block;
    }
    .inp4-parent {
        display: block;
    }
    .inp1{
        width: 70%;
    }
    .inp2{
        width: 70%;
    }
    .inp3{
        width: 70%;
    }
    .inp4{
        width: 70%;
    }
    .photo-and-countdown {
        display: block;
    }
    .countdown{
        transform: scale(1.5);
    }
    .prochain-evenement h4{
        font-size: 12px;
    }
    .ev h3{
        text-align: center;
        margin-bottom: 1rem;
        margin-top: 1rem;
        font-size: 1.6rem;
        color: var(--third-color);
    }
    .lightbox__container img{
        height: auto;
    }
}

@media screen and (max-width: 650px){
    .gri{
        grid-template-columns: auto;
        justify-content: center;
        
    }
    .col2{
        margin-top: 30px;
    }
    .col3{
        margin-top: 30px;
    }
    .col4{
        margin-top: 30px;
    }
    .present-indx {
        margin-top: 6rem;
        margin-bottom: 6rem;
    }
    .present-indx h1{
        font-size: 1.8rem;
    }
    .present-indx h3{
        font-size: 1.6rem;
     }
    
    .present-indx p {
        font-size: 1rem;
    }
    .bod{
        min-height: 20vh;
    }
    .gal .img1 {
        width: 85%;
        rotate: 0deg;
        top: 3rem;
        left: 15px;
    }
    .gal .img1:hover{
        width: 70%;
    }
    .gal .img2{
        width: 85%;
        top: 3rem;
        left: 13%;
        rotate: 0deg;
    }
    .gal .img2:hover{
        width: 70%;
    }
    .gal .img3 {
        width: 85%;
        top: 3rem;
        left: 15px;
        rotate: 0deg;
    }
    .gal .img3:hover{
        width: 70%;
    }
    .gal .img4 {
        width: 85%;
        top: 3rem;
        left: 13%;
        rotate: 0deg;
    }
    .gal .img4:hover{
        width: 70%;
    }
    .gal .img5{
        width: 85%;
        top: 3rem;
        left: 15px;
        rotate: 0deg;
    }
    .gal .img5:hover{
        width: 70%;
    }
    .gal .img6 {
        width: 85%;
        top: 3rem;
        left: 13%;
        rotate: 0deg;
    }
    .gal .img6:hover{
        width: 70%;
    }
    .gal .img7{
        width: 85%;
        top: 3rem;
        left: 15px;
        rotate: 0deg;
    }
    .gal .img7:hover{
        width: 70%;
    }
    .gal .img8 {
        width: 85%;
        top: 3rem;
        left: 13%;
        rotate: 0deg;
    }
    .gal .img8:hover{
        width: 70%;
    }
    
    .time {
        margin: 5px;
    }
    .time h2{
        font-size: 16px;
    }
    .time small {
        font-size: 10px;
    }

    .photo-atelier a {
        flex: 1 0 50%;
    }
    .product-catig a {
        margin: 2rem 0;
    }
    .present {
        margin-top: 5ch;
        margin-bottom: 40ch;
        padding: 3rem 2rem;
    }
    .input-parent {
        padding: 0.8rem;
    }
    .inp1{
        width: 95%;
    }
    .inp2{
        width: 95%;
    }
    .inp3{
        width: 95%;
    }
    .inp4{
        width: 95%;
    }
    .autoplay-progress{
        right: 5px;
        bottom: 8px;
        height: 40px;
        width: 40px;
    }
}

@media (max-width: 465px) {

    .up {
        left: 80%;
    }
    *{
        font-size: 1rem;
    }
    .present {
        margin-top: 5ch;
        margin-bottom: 55ch;
        padding: 3rem 1rem;
    }
    .input-parent {
        padding: 0.5rem;
    }
    .inp1{
        width: 100%;
    }
    .inp2{
        width: 100%;
    }
    .inp3{
        width: 100%;
    }
    .inp4{
        width: 100%;
    }
}

@media screen and (max-width: 320px){
    .present-indx {
        margin-top: 6rem;
        margin-bottom: 6rem;
    }
    .present-indx h1{
        font-size: 1.8rem;
    }
    .present-indx h3{
        font-size: 1.6rem;
     }
    
    .present-indx p {
        font-size: 1rem;
    }
    .bod{
        min-height: 20vh;
    }
    .mapouter{
        width:200px;
        height:97px;
    }
    .gmap_canvas {
        width:200px;
        height:97px; 
    }
    .gal .img8{
        left: 5rem;
    }
    .nouveau h3 {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    .gal h3 {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    .time {
        margin: 5px;
    }
    .time h2{
        font-size: 10px;
    }
    .time small {
        font-size: 8px;
    }
    .photo-atelier a {
        flex: 1 0 100%; /* 1 colonne */
    }
    .present {
        margin-top: 5ch;
        margin-bottom: 55ch;
        padding: 3rem 1rem;
    }
}