/*===============================*/
/* Css TPL - CMS ISIDORE 4.9.7.2 */
/*===============================*/
html {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

body {
    font-family: "Roboto", Arial;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    margin: auto;
    width: 100%;
    background: #fff;
}

.container {
    max-width: 1380px;
}

.click {
    cursor: pointer;
}

/* ------------------------------------------- */
/* ///// VARIABLES COULEURS ////////////////// */
/* ------------------------------------------- */
:root {
    --primaire: #673572;
    --primaire-f: #0a0405;
    --secondaire: #0a0405;
    --secondaire-f: #673572;
    --gris: #8b8c90;
    --gris-c: #f4f4f4;
    --gris-f: #434343;
    --blanc-trans:rgb(255 255 255 / 90%);
    --noir-trans:rgb(10 4 5 / 70%);
    --blanc:#fff;
}
a{text-decoration: none; transition:all ease 0.3s; color:var(--primaire)}
a:hover{transition:all ease 0.3s; color: var(--primaire-f); text-decoration: none;}

#smartnav{display:none;}

/**********/
/* HEADER */
/**********/

.bl-top{height: 180px;}
.top-menu ul{padding:0; margin:0; display: flex; flex-wrap: wrap;}
.top-menu ul li{list-style: none;}
.top-menu ul li a{display:block; padding:50px 20px; font-size:18px; font-weight: bold; transition:all ease 0.5s;}
.top-menu ul li a:hover{background-color:var(--gris-c); transition:all ease 0.5s;}
.bl-adr{background:var(--secondaire);}
.bl-adr .container{min-height: 60px;}
.adr{color:var(--blanc); font-size:16px; display: flex; align-items: center;}
.adr::before{content:''; width:24px; min-width: 24px; height: 26px; mask: url(../images/plan-noir.svg); -webkit-mask: url(../images/plan-noir.svg); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: cover; -webkit-mask-size: cover; background:var(--primaire); margin-right:10px;}
.tel{display:flex; align-items: center;}
.tel a{font-size:30px; font-weight: 500; color:var(--blanc);}
.tel::before{content:''; width:21px; min-width: 21px; height: 31px; mask: url(../images/mobile-light.svg); -webkit-mask: url(../images/mobile-light.svg); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: cover; -webkit-mask-size: cover; background:var(--primaire); margin-right:10px;}
.bl-anim{position:relative; overflow: hidden; min-height: 500px;}
.anim{position:relative; width:1920px; left:50%; margin-left:-960px;}
.bl-info{position:absolute; top:0; left:50%; bottom:0; width:50%; display:block; background:var(--noir-trans); padding-left:70px; z-index: 99;}
.info{width:515px; max-width: 100%; color:var(--blanc); font-size:30px; line-height: 36px;}
.info span{font-size:65px; line-height: 66px; text-transform: uppercase; display:block;}
.info strong::after{content:''; width:190px; height: 5px; background:var(--primaire); margin:35px 0 20px; display:block;}
.info a{display:inline-block; margin-top:10px;}

h1{font-size:40px; line-height: 40px; font-weight: 500; min-height: 80px; color:var(--primaire); text-transform: uppercase; padding-left:150px; margin:70px 0; background:url(../images/ttl.jpg) top left no-repeat; display:flex; align-items: center;}
h2{font-size:30px; line-height: 36px; text-transform: uppercase;}

.bl-txt-1{margin-bottom:70px;}
.img-1 a,.bl-img a{display: block; overflow: hidden; position:relative;}
.img-1 img{transition: all ease 0.3s;}
.img-1 a:hover img,.txt-4 ul li a:hover img, .bl-img a:hover img{transition:all ease 0.3s; transform: scale(1.3) rotate(13deg);}

.bl-txt-2{background:var(--gris-c); padding:100px 0;}
.txt-2 h2,.txt-3 h2,.txt-4 h2,.txt-5 h2{text-transform: uppercase; font-weight: 700; font-size:30px; line-height: 30px; color:var(--primaire)}
.txt-2 h2::after,.txt-3 h2::after,.txt-4 h2::after,.txt-5 h2::after{content:''; width:70px; height: 3px; background: var(--primaire); display:block; margin:30px auto;}
.txt-2 ul{padding:0; margin:70px 0 0; display:flex; flex-wrap: wrap; justify-content: space-between;}
.txt-2 ul li{list-style: none; width:24%; text-align: center; color:var(--primaire); font-size:20px; font-weight: bold; padding:230px 15px 0;}
.txt-2 ul li:nth-child(1){background:url(../images/ic1.png) top center no-repeat;}
.txt-2 ul li:nth-child(2){background:url(../images/ic2.png) top center no-repeat;}
.txt-2 ul li:nth-child(3){background:url(../images/ic3.png) top center no-repeat;}
.txt-2 ul li:nth-child(4){background:url(../images/ic4.png) top center no-repeat;}

.bl-txt-3{background:transparent; padding:90px 0; position:relative;}
.bl-txt-3::after{content:''; display:block; position:absolute; top:0; right: 0; bottom:0; left:0; background:rgba(0, 0, 0, 0.2); z-index: 0;}
.txt-3{padding:70px 0; background:rgba(0, 0, 0, 0.7); position:relative; z-index: 1;}
.txt-3 .txt{width:960px; max-width:100%; margin:auto; padding:0 15px; color:#fff;}
.txt-3 h2{color:#fff;}
.txt-3 h2::after{background:#fff;}

.bl-txt-4{padding:100px 0;}
.txt-4 ul{padding:0; margin:0; display:flex; flex-wrap: wrap; justify-content: space-between;}
.txt-4 ul li{list-style: none; font-size:20px; width:32%; background:var(--primaire); padding-bottom:20px; color:#fff; text-transform: uppercase;}
.txt-4 ul li a{display:block; margin-bottom:20px; overflow: hidden;}
.txt-4 ul li img, .bl-img img{max-width:100%; height: auto; transition:all ease 0.3s;}

.bl-txt-5{background:var(--gris-c); padding:100px 0;}
.txt-5 ul{padding:0; margin:0; display:flex; align-items:center; justify-content: center; flex-wrap: wrap;}
.txt-5 ul li{list-style: none; padding:15px;}
.txt-5 img{max-width:100%; height: auto;}

.bl-img{background:var(--gris-c); padding:50px 0;}
.bl-img ul{padding:0; margin:0; display: flex; justify-content: space-between;}
.bl-img ul li{list-style: none; width:24%; margin:10px 0;}

.bl-foot{background: var(--primaire);background: linear-gradient(180deg, rgba(133,72,147,1) 0%, rgba(103,53,114,1) 100%); padding:80px 0;}
.bl-foot .container{position:relative;}
.bl-foot .container::before{content:''; position:absolute; width:1px; height: 200px; top:70px; left:50%; display:block; background:var(--primaire);}
.f-inf{color:#fff;}
.f-inf a{display:block;}
.f-log{margin-bottom:10px;}
.f-mail{color:#fff; font-style: italic;}
.f-tel{font-size:30px; font-weight: 700; color:#fff; margin:10px 0;}

.horaire{color:#fff; background:url(../images/hor.png) top center no-repeat; padding-top:170px;}
.horaire span{font-size:24px; font-weight: 700; text-transform: uppercase; display:block;}
.horaire strong{display:inline-block; margin-top:5px;}

footer{background:var(--secondaire);}
.foot-menu{}
.foot-menu ul{padding:0; margin:0; display:flex; justify-content: center;}
.foot-menu ul li{list-style: none;}
.foot-menu a{display:block; padding:30px 20px; color:#fff; transition:all ease 0.3s;}
.foot-menu a::first-letter,.top-menu a::first-letter{text-transform: uppercase;}
.foot-menu a:hover{color:var(--primaire); transition:all ease 0.3s;}

.com{text-align: center; padding:30px 0; border-top:1px solid var(--gris-f);}

.btn-1{background:var(--primaire); padding:10px 20px; margin-top:60px; border:1px solid var(--primaire); color:var(--blanc); display:inline-block; transition:all ease 0.5s;}
.btn-1:hover{background:transparent; color:var(--blanc); transition:all ease 0.5s;}


.mid-30{padding-right: 30px;}
.mig-30{padding-left:30px;}
.mi-90{padding:90px;}
.meb-70{margin-bottom:70px;}

.center{text-align: center;}

.form-group{ margin:0 0 10px 0;}
.form-group label, .form-group input.form-input, textarea.form-textarea{ width:99%; display:block; margin:0 auto;}
input[type="text"],textarea,select{ padding:8px 5px; margin:8px 0; display:inline-block; border:1px solid #ccc; border-radius:4px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.btn-form{ margin:10px 0 0 0;}
.btn-submit-1, .btn-submit-2{  background: var(--primaire); border-color: var(--primaire);  color: #fff; text-decoration: none; width:200px; padding: 10px 16px; font-size: 15px; border:1px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; margin:10px 0 0 0; cursor:pointer; text-transform:capitalize;}
/*PLAN D'ACCES*/
.map-google{ width:98%; min-height: 100%; margin:0 auto;}
.map-google iframe{ margin:0; padding:0; border:none; width:100%; height:100%;}
/*REALISATIONS*/
#diapo-container{}
p.titre-diapo{ text-transform:uppercase; font-weight:bold;}
#diapo-container ul, #diapo-container ul li{ margin:0; padding:0; list-style:none;}
#diapo-container .nav-diapo ul li { border-bottom:1px solid #eee;}
#diapo-container .nav-diapo ul li:first-child{ border-top:1px solid #eee;}
#diapo-container .nav-diapo ul li a{ display:block; padding:10px 0 10px 5px; text-transform:uppercase;}
#diapo-container .nav-diapo ul li.link-play a, #diapo-container .nav-diapo ul li a:hover{ background:var(--primaire); color:#fff;}
#diapo-container .nav-diapo ul li a:hover{ opacity:0.8;}
#diapo-container .nav-diapo ul{ padding-left:5px;}
.nav-diapo{ width:28%; float:left;}
#diapo-inner{ width:70%; float:right;}
.nav-diapo .link-disable{ cursor:not-allowed; opacity:0.4;}


.top-menu a {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
  }
  .top-menu a:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: var(--primaire);
    height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  .top-menu a:hover:before, .top-menu a:focus:before, .top-menu a:active:before {
    left: 0;
    right: 0;
  }


/* -------------------------------------- */
/* ///// RESPONSIVE ///////////////////// */
/* -------------------------------------- */

@media all and (max-width: 1279px) {
    .bl-info{padding-left:30px;}
    .top-menu ul li a{padding:50px 10px;}
    .foot-menu a{padding: 30px 10px;}
}

@media all and (max-width: 1151px) {
    .top-menu ul li a{padding:30px 10px;}
    .top-menu ul li a{font-size:16px;}
}
@media all and (max-width: 1023px) {
    .top-menu,.foot-menu{display:none;}
    #smartnav{display:block; background:var(--primaire)!important;}
    .bl-top{justify-content: center!important;}
    h1{margin:40px 0;}
    .txt-1{padding:0 15px}
    .img-1{padding:0 15px; margin-top:20px; text-align: center;}
    .img-1 img{max-width:100%; height: auto;}
}
@media all and (max-width: 979px) {
    .bl-info{left:0; width:100%; padding:0 15px; justify-content: center;}
    .info{width:100%; text-align: center;}
    .info strong::after{margin:35px auto 20px;}
}
@media all and (max-width: 899px) {
    h1{padding-left:135px; font-size:30px; line-height: 36px;}
    h2{font-size:26px!important;}
    .bl-txt-2{padding:70px 0 20px}
    .txt-2 ul li{width:50%; margin-bottom:70px}
}
@media all and (max-width: 799px) {
    .txt-4 ul li{font-size:18px;}
}
@media all and (max-width: 767px) {
    .map-google{height: 400px; width:100%; padding:0;}
    .cont-contact{padding:0;}
    .nav-diapo{float:none; width:100%; margin-bottom:20px;}
    #diapo-inner{float:none; width:100%;}
}
@media all and (max-width: 719px) {
    .bl-foot .container::before{display:none;}
    .bl-adr .container{min-height: auto; flex-direction: column; padding:10px 0;}
    h1{background:none; padding:0;}
    .txt-4 ul li{width:100%; margin-bottom:20px;}
    .bl-foot .container{flex-direction: column-reverse;}
    .horaire{margin-bottom:50px;}
    .bl-txt-4,.bl-txt-5{padding:70px 0;}
}
@media all and (max-width: 479px) {
    .adr{width:200px; line-height: 18px;}
    .txt-2 ul li{width:100%;}
}
@media all and (max-width: 1919px) {

}




/* LG */
@media all and (max-width: 1200px) {
    #cookie-bar {
        display: block;
    }

    #cookie-bar .cb-enable {
        margin-top: 6px;
        margin-bottom: 5px;
    }
}

/* MD */
@media all and (max-width: 992px) {
    .eraseAllBtn {
        padding: 10px;
    }

    .blc-filtre {
        margin-bottom: 20px;
    }

    .pdt-description {
        margin-top: 30px;
    }
}

/* SM */
@media all and (max-width: 768px) {
    nav {
        display: none;
    }

    #navMobile {
        display: block;
        text-align: left;
    }

    .formContainer {
        width: 100%;
    }

    .recherche-header {
        margin: 20px 0;
    }

    .article {
        text-align: center;
    }

    .prixArticle {
        margin-top: 30px;
        font-size: 2rem;
    }

    .liste-categorie {
        margin-bottom: 20px;
    }

    .pdt-caracteristique li,
    .pdt-options li {
        width: 100%;
    }


}

/* XS */
@media all and (max-width: 576px) {
    #footerStratetcom svg {
        width: 100%;
        max-width: 330px;
    }
}