@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@font-face {
    font-family: 'icons';
    src: url('icons.ttf') format('truetype')
}

*{margin:0;box-sizing: border-box}
body,input,form select,form textarea,button{font-family: 'Inter', sans-serif}

header{z-index: 9000;}

.flex{display: flex;justify-content: space-between}
.flex-start{display: flex;justify-content: flex-start}
.flex-center{display: flex;justify-content: center}
.ai-center{align-items: center;}
.c{margin: 0 auto;width:1200px}
.cc{margin: 0 auto;width:1300px}
.br-r20{border-radius: 20px}
.ovh{overflow: hidden;}

.head{border-bottom: 1px solid var(--cl5);background-color: var(--cl1);}
.logo{height: 45px}

header nav .c{position: relative}
header nav ul{display: flex;position: relative;padding: 0}
header .act{border-radius: 50px;width: 30px;height: 30px;padding: 5px;text-align: center;}
header nav a, header .model{padding: 15px 0;display: inline-block; color: var(--cl2);}
header nav ul li, header .model{margin-right: 20px;}
header nav ul li a .icon{margin-right: 10px;;display: inline-block;text-transform: none}
header nav ul ul{position: absolute;top: 100%;display: none;min-width: 300px;z-index: 9999;}
header nav ul ul:not(.headArticles) a{padding: 8px 25px;color: var(--cl2)!important;display: block!important;}
header nav ul ul:not(.headArticles) a:hover{background-color: var(--cl3);color: var(--cl1)!important;}
header nav ul li:hover ul{display: block}
header nav ul li:hover ul.headArticles{display:grid;grid-template-columns: repeat(3, calc( calc(100% / 3) - 15px )[col-start]);grid-gap:20px}
header nav ul ul li{margin-right: 0;}
header nav .card{position: absolute;right: 0;top: 13px;font-size: .8em;text-transform: uppercase;}
header nav .card:after{display: block;content: "";height: 1px;}

header nav .headArticles{padding: 20px;}
header nav .headArticles li:hover{background-color: var(--cl7);}
header nav .headArticles img{height: 120px;width: 250px;object-fit: contain;}
header nav .headArticles .price{color: var(--cl2);font-size: 1.1em;text-align: center;display: block;margin-top: 10px;}

header .lng{height: 12px;margin-right: 10px;}
header form{padding: 3px;border: 1px solid var(--cl5);display: flex;border-radius: 10px;background-color: var(--cl5);}
header form input:not([type=submit]){padding: 10px 15px;border: none;background-color: transparent;color: var(--cl2);}
header form input[type=submit]{margin-right: 0!important;font-size: 1.2em;cursor: pointer;color: var(--cl6);background-color: var(--cl5);width: 40px!important;height: 35px!important;border-radius: 30px;border: none;}
header form input::placeholder{color: var(--cl6);}
header .inputSearch{width: 95%;}
header .act{margin-right: 18px;position: relative;}
header .act .icon{font-size: 1.1em!important;}

.menu-categories{display:grid;grid-template-columns: repeat(7, calc( calc(100% / 7) - 13px ) [col-start]);grid-gap:15px}
.menu-categories ul{list-style: none;padding: 0;margin: 0}
.menu-categories .cat{display: flex;justify-content: flex-start;align-items: center;}
.menu-categories .cat img{height: 37px;width: 37px;object-fit: cover;border-radius: 18px;margin-right: 10px;}
.menu-categories .cat .t{color: var(--cl2);font-size: .9em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block; }
.menu-categories li:hover .t{color: var(--cl3);}

.caroussel{height: 500px;z-index: 6000;position: relative;border-radius: 20px;overflow: hidden;}
.caroussel .child{margin: 0!important;position: relative;height: 750px;background-position: right;}
.caroussel .child img{width:100%;height:100%;object-fit: cover;object-position: right;}

.caroussel .masq{position: absolute;right: 0;bottom: 0; top:0;left: 0;z-index: 9000;color: var(--cl1); text-align: center;background-color: rgba(0,0,0,.3);display: flex;flex-direction: column;justify-content: center;align-items: center;}
.caroussel .masq >div{width: 70%; margin: 0 auto;}
.caroussel .masq h1{font-size: 2.6em;}
.caroussel .masq p{font-weight: 300;}

.btn{display: flex;border-radius: 10px; padding: 14px 25px;align-items: center;background-color: var(--cl4);color: var(--cl2);border: 1px solid; border-color: var(--cl4);transition: .8s ease;}
.btn span{display: inline-block}
.btn .icon{width: 40px;height: 40px;display: inline-block;font-size: 1.3em;display: flex;flex-direction: column;justify-content: center;margin-left: 10px;}
.btn-icon{width: 35px;height: 35px;background-color: var(--cl1);display: flex!important;flex-direction: column;justify-content: center;align-items: center;font-size: 1.4em;color: var(--cl2);border-radius: 20px;}

.h{font-size: 1.2em;font-weight: 500;}
.h2{font-size: 1.3em;font-weight: 700;}

.c1 img{width: 50px;height: 50px;margin-right: 15px;}
.c8{border-radius: 30px;padding: 30px}

.divider{border-top: 1px solid var(--cl5);}

.aside{background-color: var(--cl1);border: 1px solid var(--cl5);padding: 20px;border-radius: 10px;}

.categories .category{height: 500px;border-radius: 20px;overflow: hidden;position: relative;}
.categories .category img{height:100%;object-fit: cover;}
.categories .category .cnt{position: absolute;bottom: 0;right: 0;left: 0;height: 90px;padding: 20px;display: flex;flex-direction: column;justify-content: flex-end;border-radius: 20px;transition: 1s ease;}
.categories .category .cnt div{display: flex;justify-content: space-between;align-items: center;}
.categories .category .cnt .t{color: var(--cl1);font-size: 1.5em;font-weight: 600;width: calc(100% - 45px);}
.categories .category:hover .cnt{height: 500px;background-color: var(--cl3);}
.categories .category:hover .cnt .icon{background-color: var(--cl4);}

.categorie-small .category{display: flex;justify-content: start;align-items: center;margin-bottom: 10px;}
.categorie-small .category img{height: 40px;width: 40px;object-fit: cover;border-radius: 5px;margin-right: 10px;}
.categorie-small .category .cnt{display: flex;justify-content: space-between;align-items: center;width: calc(100% - 50px);}
.categorie-small .category .cnt .t{color: var(--cl8);font-size: .9em;font-weight: 500;}
.categorie-small .category:hover .cnt .t{color: var(--cl3);}

.categorie-page .category{height: 200px;}
.categorie-page .category .cnt{background-color: rgba(0,0,0,.4);}
.categorie-page .category .cnt .t{font-size: 1em;}

.category-img{width: 225px;object-fit: contain;border: 1px solid var(--cl5);border-radius: 15px; margin-right: 20px;}

.articles .article{border: 1px solid var(--cl5);border-radius: 20px;padding: 15px;transition: .8s ease;position: relative;background-color: var(--cl1);}
.articles .article img{height: 200px;width: 100%;object-fit: contain;border-radius: 15px;}
.articles .article span{display: block;}
.articles .article .t{color: var(--cl2);font-weight: 600;font-size: .9em;margin-bottom: 5px; margin: 10px 0;; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; }
.articles .article .span{color: var(--cl2);font-weight: 300;margin-bottom: 5px;margin-bottom: 15px;}
.articles .article .price{display: flex;justify-content: space-between;align-items: center;padding-top: 15px;transition: .8s ease;}
.articles .article .prix{color: var(--cl2);font-weight: 700;font-size: 1.2em;}
.articles .article .prix span{color: var(--cl6);font-weight: 400;font-size: .7em;display: inline-block;}
.remise{color: #EA4236}
.articles .article .btn-icon{background-color: var(--cl5);color: var(--cl6);transition: .8s ease;}
/* .articles .article:hover{border-color: var(--cl3);} */
.articles .article:hover .t{color: var(--cl3);}
.articles .article:hover .btn-icon{background-color: var(--cl3);color: var(--cl1);}
.articles .article .cat{color: var(--cl6);font-size: .9em;}

.temoignage{background-color: var(--cl5);padding: 30px;border-radius: 20px}
.temoignage p{font-size: 1.1em;font-weight: 300;}
.temoignage span{display: block; margin-top: 20px;font-size: 1.3em;font-weight: 500;}

.news{background-color: var(--cl1);padding: 20px;border-radius: 20px;color: var(--cl2);cursor: pointer;}
.news img{width: 100%;height: 300px;object-fit: cover;border-radius: 20px;margin-bottom: 20px;}
.news .t{font-weight: 500;display: block;margin-bottom: 10px;font-size: 1.3em;transition: .8s ease;}
.news:hover .t{color: var(--cl3);}
.news p{font-weight: 300;}

.partenaire{object-fit: contain;}

.cont p, .page .cont div{line-height: 30px; color: var(--cl2);margin-bottom: 15px;}
.cont li{font-size: 1.1em;  color: var(--cl2); margin-bottom: 20px;}
.cont h2{font-size: 1.5em; color: var(--cl2); margin-bottom: 20px; margin-top: 0;}
.cont h3{font-size: 1.2em; color: var(--cl3); margin-bottom: 20px; margin-top: 20px;}
.cont h4{font-size: 1em; color: var(--cl2); margin-bottom: 20px; margin-top: 20px;}
.cont img{width: 100%;height: 100%;object-fit: contain;}

.tag{border-radius: 5px;}

.single .cont .h{margin: 20px 0}
.single a{cursor: pointer;}
.single p{margin-bottom: 15px;}
.single .photos .first{width: 100%;height: 600px;object-fit: contain;}
.single .photos .gla_slider .gla_slider_slider{gap: 15px;}
.single .photos .img-zm{width: 100%;height: 150px;cursor: pointer;object-fit: cover;border-radius: 10px;border: 1px solid var(--cl5);}
.single .photos .img-zm:hover{border: 1px solid var(--cl3);}
.single .prix{font-weight: 600;font-size: 2em;color: var(--cl3);}
.single .cat{color: var(--cl3);border-radius: 5px;padding: 5px 15px;display: inline-block;margin-bottom: 15px;}

.tag{font-size: 1.2em;color: var(--cl3);font-weight: 500;}

.single .cnt table{border-collapse: collapse;width: 80%!important;}
.single .cnt table td{padding: 8px;text-align: left;border-bottom: 1px solid #ddd;}

.single .char .icon{padding: 8px; font-size: 1.5em;border-radius: 25px;margin-right: 5px;cursor: pointer;}
.single .char .icon:hover{color: var(--cl4);}

.cnt h1,h2,h3,h4,h5,h6{margin:20px 0}
.cnt p{margin-bottom: 10px}
.cnt ul li::marker{font-family: 'icons' !important;line-height: 1;vertical-align: middle;content: "|";font-size: .8em}
.cnt ul li{margin-bottom: 5px}

.single .a-info{margin-bottom: 60px}
.single .h{margin-bottom: 30px;display: block}

.a-infos{background-size: cover;background-position: center;display: flex;flex-direction: column;justify-content: flex-end;border-radius: 20px;overflow: hidden;margin-top: 15px;margin-bottom: 15px;}
.a-infos .back{background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.5));padding: 60px 30px 30px;}

.contact .c{position: relative;}
.contact iframe{width:100%; height: 400px;border:0;background-color: rgba(0,0,0,.2)}
.contact .gla-form{margin-top: 20px}
.contact .char{display:flex;justify-content: center}

.box{padding: 30px; background-color: var(--cl1);border: 1px solid var(--cl5);border-radius: 15px;}
.brc1Top{border-top-width: 1px;border-top-style: solid;}

footer{font-size: 0.9em;border-top: 1px solid var(--cl5);}

footer .cc{padding: 50px;display: grid;grid-gap: 20px;grid-template-columns: 30% 30% 24% 15%; border-radius: 20px;margin-bottom: 30px;}
footer .log{height: 60px;object-fit: contain;}
footer .t{display: block;margin-bottom: 20px;font-size: 1.3em;}
footer .child ul{padding: 0}
footer .child ul ul{display: none}
footer .child ul li{margin-bottom: 10px;font-size: 1.1em;font-weight: 300;}
footer .child a{display: block;margin-bottom: 10px;font-size: 1.1em;font-weight: 300;}
footer .child.cnt li{margin-bottom: 10px;}

footer .foot-b{font-size: 0.8em;text-align: center;border-top: 1px solid rgba(255,255,255,.1);padding-top: 20px}
footer .foot-b a{display: block;}
footer .back{margin-bottom: -10px;height: 60px;}

.gla-pagination a,.gla-pagination .btn{padding: 5px;align-content: center;text-align: center;margin-right: 5px;border-radius: 50px;width: 36px;display: inline-block;height: 36px;font-size: .8em; color: var(--cl6);background-color: var(--cl5);}
.gla-pagination .btn{background-color: var(--cl4);}
.gla-pagination{text-align: right}

.more-articles{position: relative;}
.more-articles .article{margin-right: 10px;width: 100%;}
.more-articles h2{margin: 30px 0 15px 0}

.car-slide{overflow: hidden;margin: 40px 0;position: relative;}
.car-slide .slide{display: flex;justify-content: flex-start;transition: 0.1s linear;padding: 0 20px;}
.car-slide .article{margin-right: 20px}
.btn.sld{position: absolute;top: 50%;padding:12px 15px;text-align: center;}
.btn.sld#nx{right: 0;cursor: pointer}
.btn.sld#pr{transform: rotate(180deg)}

.single .gla-comment input[type=email]{margin-left: 10px}

.gla-cptch span{margin-right: 20px;}
.gla-cptch input[type=text]{width: 40px;text-align: center}
.gla-comment h3{margin: 15px 0}

.gla-com{margin-bottom: 60px;display: flex;align-items: center;padding: 15px;}
.gla-com>div{width:100%;}
.gla-com img{width: 90px;height: 90px;margin-right:10px;border-radius: 15px}
.gla-com span{font-size: 1.3em;font-weight: bold;display: inline-block;margin-bottom: 10px;}
.gla-com span.gla-com-time{font-size: 0.8em;float: right}
.gla-com p{display: block;padding: 10px;}

.gla-form input,.gla-form textarea,.gla-form select{padding: 15px 20px;}
.gla-form input[type=text],.gla-form input[type=email], .gla-form textarea,.gla-form select, .gla-form input[type=number]{margin-bottom: 20px;border: none;background-color: var(--cl1);border-radius: 10px;border: 1px solid var(--cl5);}
.gla-form input[type=submit]{margin-top: 15px;cursor: pointer;}
.gla-form textarea{height: 130px}
.gla-cptch input{width: 60px !important;}

.gla-form label{margin: 10px 20px;font-weight: bold;display: block}

.mask{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.4);display: flex;align-items: center;justify-content: center;padding:20px;z-index: 9999}
.mask img{max-width: 100%;max-height: 100%;background: rgba(255,255,255,0.5);border-radius:3px;box-shadow: 0 0 6px #444;transition: 0.14s linear}
.mask .exit, .mask .btn{position: absolute;text-align: center;line-height: 40px;font-size: 2em;cursor: pointer;opacity: 0.7;padding: 10px 20px}
.mask .exit{right: 10px;top: 10px !important;}
.mask .btn{top: 48%;transition: 0.14s linear;background: transparent;vertical-align: middle}
.mask .btn:hover{color: #000}
.mask .btn-next{right: 20px;}
.mask .btn-prev{left: 20px;}
.mask .btn-next:hover,.mask .btn-prev:hover,.mask .exit:hover{opacity: 1}

.succes, .error{display:block;margin: 20px 0;padding:10px;}
.succes{background: rgba(0,255,0,0.2);color: rgba(0,200,0,0.9)}
.error{background: rgba(255,0,0,0.3);color: rgba(255,0,0,0.9)}

.rem{font-size: 0.9em !important;color: #666;font-style: italic}
a{text-decoration: none;}
footer li,header li,.contact li{list-style: none;margin-left: 0}
.flex_no{display: block !important}

span.menu-res{position: relative;}
span.menu-res::before{content: "I";width: 40px;height: 40px;display: block;position: absolute;top: 5px;left: 5px;}
span.menu-res{display: none;width: 40px;height: 40px;border-radius:30px;margin-right: 3px;vertical-align: middle;margin-top: -2px; font-family: 'icons' !important;line-height: 1;vertical-align: middle}

.icon{font-family: 'icons' !important;line-height: 1;vertical-align: middle}

/* GLA Slider ---------- */

.gla_slider{overflow: hidden;}
.gla_slider .gla_slider_slider{width:100%;display: flex;transition: 0.4s ease;flex-wrap: nowrap;}

.gla_slider .slider_btn{position: absolute;bottom: 0;color: var(--cl1)!important;background-color: var(--cl2);padding: 5px;cursor: pointer;transition: 0.2s ease;font-size: 1.5em;z-index: 9000;border-radius: 30px;}
.gla_slider .slider_btn:hover{opacity: 1;}
.gla_slider .next_btn{right: 20px}
.gla_slider .previos_btn{right: 60px}

.caroussel .gla_slider .slider_btn{position: absolute;top: auto;bottom: 30px;color: var(--cl6);border: none;padding: 5px;cursor: pointer;transition: 0.3s ease;font-size: .9em;background-color: var(--cl5)}
.caroussel .gla_slider .slider_btn:hover{opacity: .5;}
.caroussel .gla_slider .next_btn{left: 14%; right: auto;}
.caroussel .gla_slider .previos_btn{right: auto; left: 12%;}

.page-produit .gla_slider .slider_btn{top: 45%;bottom: auto;z-index: 9999;}
.page-produit .gla_slider .next_btn{right: 20px}
.page-produit .gla_slider .previos_btn{left: 20px;right: auto;}

.single .slider_btn {top:40%;bottom: auto;}
.single .gla_slider .next_btn{right: 0}
.single .gla_slider .previos_btn{left: 0; right: auto}