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

html{background-color: #FFF; font: 300 18px/24px 'Poppins', sans-serif;}
body{color: #343C43; margin: 0; padding: 0; text-align: left;}

a, i, #accueil #lstcategories .categorie .content, #accueil #lstcategories .categorie:hover .content, #produit #presentation #photos #miniatures img{-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;}

a:link, a:visited{color:#000; text-decoration:none;}
a:focus{outline: 0;}

a{color:#F1CB25; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;}
a img{border:none;}
a.noTransition{-moz-transition:none; -webkit-transition:none; -o-transition: color 0 ease-in; transition:none;}

p, ul, li, hr, h1, h2, h3, h4, h5, h6, form{margin: 0; padding: 0;}

h1{font-size: 2rem; font-weight: 400; line-height: 2.1rem; margin-bottom: 2rem;}
h1 span, h1 a{color: #C81620!important; display: block; font-size: 1.5rem; line-height: 1.85rem;}
h2{font-size: 1.75rem; font-weight: 400; line-height: 2rem; margin-bottom: 2rem;}
h3{font-size: 1.6rem; font-weight: 400; line-height: 1.8rem; margin-bottom: 2rem;}
h3 span{color: #C81620; display: block; font-size: 1.4rem; line-height: 1.6rem;}
h4{font-size: 1.3rem; font-weight: 400; line-height: 1.5rem; margin-bottom: 1.5rem;}
h4 span{color: #C81620; display: inline-block; }

input, select, textarea{background-color:#FBFBFB; border:1px solid #999; font-size:1rem; padding:1px;}

a.action, input.action{background-color: #c81620; border: none; border-radius: 8px; color: #FFF!important; cursor: pointer; display: inline-block; font-size: 1rem; font-weight: 400; padding: 1rem 3rem; position:relative; text-transform: uppercase; text-align: center; text-decoration: none!important;}
a:hover.action, input:hover.action{background-color: #000}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea{background-color: #EDF2F4; border: none; color: #25303b; font: 300 1rem 'Poppins', sans-serif; outline: 0; padding: 1rem 1.5rem; width: 100%;}
input::placeholder, textarea::placeholder{color: #000; opacity: 1}

p{margin-bottom: 1rem}

.select_style{background-color: #E9E9E9; border: none; border-radius: 3px; margin: 0; overflow: hidden; padding: .7rem 1.5rem; position: relative;}
.select_style.select{background-color: #000;}
.select_style select{appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; background-image: none; border: none; box-shadow: none; cursor: pointer; display: inline-block; font: 300 .95rem 'Poppins', sans-serif; height: 35px; padding: 0 .8rem 0 .4rem; width: calc(100% - 25px);}
.select_style.disabled select{cursor: auto;}
.select_style select option{color: #000}
.select_style select option[value="-1"]{font-style: italic;}
.select_style.select select{color: #FFF}
.select_style:after{border: solid transparent; border-color: rgba(0, 0, 0, 0); border-top-color: #000; border-width: 4px; content: " "; height: 0; margin-top: -2px; pointer-events: none; position: absolute; right: 5%; top: 50%; width: 0; z-index: 2;}
.select_style.select:after{border-color: rgba(255, 255, 255, 0); border-top-color: #FFF;}
.select_style.disabled:after{display: none}
.select_style:before{display: inline-block; font-family: "Font Awesome 6 Free"; width: 20px}
.select_style.select:before{color: #FFF}
.select_style.categorie:before{content: "\f63c";}
.select_style.marque:before{content: "\f1f9";}
.select_style.typeaccessoire:before{content: "\f1f9";}
.select_style.prix:before{content: "\f153";}
.select_style option{font-size: .9rem;}

.input_style{background-color: #E9E9E9; border: none; border-radius: 3px; margin: 0; overflow: hidden; padding: .95rem 1.5rem; position: relative;}
.input_style.select{background-color: #000;}
.input_style.select:before{color: #FFF}
.input_style:before{display: inline-block; font-family: "Font Awesome 6 Free"; width: 20px}
.input_style input[type="text"]{background-color: transparent; font-size: .95rem; padding: 0 .4rem; width: calc(100% - 25px);}
.input_style.select input[type="text"]{color: #FFF}
.input_style.nom:before{content: "\f304";}

.anim{opacity: .1}
.translate{opacity: 0; transform: translateX(-20em);}
.translate.animate{opacity: 1; transform: translateX(0)!important; -webkit-transition:1s; -moz-transition:1s; -o-transition:1s; -ms-transition:1s; transition:1s;}
.scale{opacity: 0; transform: scale(0); transform-origin: left; -webkit-transition:1.2s; -moz-transition:1.2s; -o-transition:1.2s; -ms-transition:1.2s; transition:1.2s;}
.scale.animate{opacity: 1; transform: scale(1);}

.cache{display:none;}

.maincontent{margin: 0 auto; width: 75%}

#infobulle_content{background-color: rgba(0, 0, 0, .8); bottom: 0; display: none; left: 0; position: fixed; top: 0; right: 0; z-index: 999;}
#infobulle_content > div{display: none}
#infobulle_content #ib_content{background-color: #FFF; border-radius: 5px; left: 27%; padding: 3rem 4rem 3rem 3rem; position: absolute; text-align: center; top: 20%; width: 46%;}
#infobulle_content #ib_content .icon{font-size: 4rem; margin-bottom: 2rem}
#infobulle_content #ib_content .icon .fa-circle-exclamation{color: #64879C}
#infobulle_content #ib_content .icon .fa-triangle-exclamation{color: #D34143}
#infobulle_content #ib_content #ib_close{color: #AAA; cursor: pointer; font-size: 2.5rem; right: 20px; position: absolute; top: 20px;}
#infobulle_content #ib_content #ib_close:hover{color: #000;}
#infobulle_content #ib_content p{width: 100%}
#infobulle_content #ib_content p.action{margin-top: 2rem}

header{margin-bottom: 3rem}
#bd-accueil header, #bd-produits header{margin-bottom: 0}
header .top{background-color: #000; padding: .8rem 0 .2rem 0}
header .top .maincontent{display: flex; flex-wrap: wrap; justify-content: space-between;}
header .top .logo{width: 22%}
header .top .logo img{height: auto; max-width: 370px; width: 100%}
header .top .coordonnees{align-items: baseline; display: flex; flex-wrap: wrap; font-size: .88rem; justify-content: space-between; width: 75%}
header .top .coordonnees > div{align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; width: 36%}
header .top .coordonnees > div .ico{color: #666; font-size: 2rem; width: 40px;}
header .top .coordonnees > div .value{color: #CCC; width: calc(100% - 60px);}
header .top .coordonnees > div .value a{color: #FFF; font-weight: 500; font-size: 1.6rem}
header .top .coordonnees > div .value a:hover{color: #c81620}
header .top .coordonnees > div .value b{color: #DDD; font-size: 1rem; font-weight: 500}
header .top .coordonnees .adresse{width: 25%}
header .top .coordonnees .adresse .value{position: relative;}
header .top .coordonnees .adresse .value img{height: auto; max-width: 150px; width: 100%}
header .top .coordonnees .adresse .value div{left: 20px; position: absolute; top: 40px;}
header .top .coord_responsive{color: #DDD; display: none; font-size: .9rem; padding-top: 1.5rem; position: relative; text-align: center; width: 100%}
header .top .coord_responsive:before{display: none}
header .top .coord_responsive img{display: block; height: auto; margin: 0 auto; width: 40%;}
header .top .coord_responsive a{color: #FFF; font-weight: 500; font-size: 1.6rem}
header .top .coord_responsive a:hover{color: #c81620}
header .top .coord_responsive b{color: #DDD; font-size: 1rem; font-weight: 500}
header .top .coord_responsive.fa-location-dot div{bottom: 25%; left: 40%; position: absolute;}
header .menu{background-color: #1c2127; padding: .75rem 0; position: relative;}
header .menu #icon_menu{color: #FFF; cursor: pointer; display: none; font-size: 2rem;}
header .menu .maincontent{display: flex; flex-wrap: wrap; justify-content: space-between;}
header .menu nav{font-size: 1.05rem; line-height: 1.2; width: 92%}
header .menu nav ul{list-style: none;}
header .menu nav ul li{display: inline-block; margin-right: 2rem; vertical-align: middle;}
header .menu nav ul li:last-child{margin-right: 0}
header .menu nav ul li a{color: #FFF;}
header .menu nav ul li a:hover, header .menu nav ul li a.active{color: #c81620}
header .menu .rs{align-items: center; display: flex; font-size: 1.4rem; justify-content: right; text-align: right; width: 8%}
header .menu .rs a{color: #FFF;}
header .menu .rs a:hover{color: #c81620}
header .menu .rs a i{margin-right: 1.5rem;}
header .menu .rs a:last-child i{margin-right: 0;}

.tooltip{font-size: 1rem; margin-left: .5rem; position: relative}
.tooltip i{color: #C81620; cursor: pointer; font-size: 1rem; vertical-align: super;}
.tooltip .tooltiptext{background-color: #C81620; border-radius: 2px; color: #FFF; font-size: .7rem; left: calc(50% - 150px); line-height: .85rem; opacity: 0; padding: .8rem .6rem; position: absolute; text-align: center; top: 100%; transition: opacity 0.8s; visibility: hidden; width: 300px; z-index: 1;}
.tooltip .tooltiptext::after{border-color: transparent transparent #C81620 transparent; border-style: solid; border-width: 5px; content: ""; margin-top: -10px; position: absolute; left: 142px; top: 0}
.tooltip:hover .tooltiptext{opacity: 1; visibility: visible;}

#search{margin-bottom: 1.5rem; margin-top: -25px; position: relative; z-index: 2}
#search .maincontent{background-color: #FFF; min-height: 95px; padding: 1rem;}
#search .select_style{padding: .7rem 1rem .7rem 1.2rem;}
#search .action{display: block; padding: .95rem 1rem; width: 100%}
#search .action:before{content:"\f002"; display: inline-block; font-family: "Font Awesome 6 Free"; margin-right: .3rem; width: 20px}
#search #search_display{display: none; margin-bottom: .5rem}
#search #search_items{align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%}
#search #search_items .bloc{padding: 0 .5rem; width: 21%}
#search.nobutton .select_style.select{background-color: #C81620;}
#search.nobutton .input_style.select{background-color: #C81620;}
#search.nobutton #search_items .bloc:first-child{padding-left: 0}
#search.nobutton #search_items .bloc:last-child{padding-right: 0}
#search.nobutton #search_items .bloc{width: 25%}
#search #search_items .bloc .select_style{width: 100%}
#search #search_items .search{padding: 0 .5rem; width: 16%}

.produits{align-items: baseline; display: flex; flex-wrap: wrap; justify-content: space-between;}
.produits .produit{margin-bottom: 2rem; width: 23.5%}
.produits .produit .image{margin-bottom: 1rem; position: relative;}
.produits .produit .image .flags{height: 130px; overflow: hidden; position: absolute; right: 0; top: 0; width: 130px}
.produits .produit .image .flags .flag{background-color: rgba(200, 22, 32, .85); border-radius: 5px; color: #FFF; font-size: 1.05rem; font-weight: 400; padding: .5rem 0; position: absolute; right: -80px; top: -40px; transform: rotate(45deg); text-align: center; width: 200px}
.produits .produit .image .flags .flag1, .produits .produit .image .flags .flag3{font-size: .85rem}
.produits .produit .image .flags .flag6, .produits .produit .image .flags .flag8{font-size: .9rem}
.produits .produit img{border-radius: 5px; height: auto; width: 100%}
.produits .produit .categorie{margin-bottom: .2rem}
.produits .produit .categorie a{color: #C81620}
.produits .produit .categorie a:hover{color: #000}
.produits .produit h3{font-size: 1.15rem; font-weight: 300; line-height: 1.4rem; margin-bottom: 1rem; min-height: 50px;}
.produits .produit .prix{color: #C81620; font-size: 1.3rem; font-weight: 500;}
.produits .produit .prix i{margin-right: .5rem;}
.produits .produit .prix span{color: #555; font-size: .9rem; font-weight: 300; margin-left: .3rem; text-decoration-line: line-through;}
.produits .produit .prix_mois{font-size: .8rem; min-height: 24px}
.produits .produit .prix_mois .tooltip i{font-size: .9rem;}
.produits .produit .caracteristiques{align-items: start; display: flex; flex-wrap: wrap; justify-content: space-between;}
.produits .produit .caracteristiques .caracteristique{border-right: 1px solid #EEE; color: #555; font-size: .7rem; margin-top: 1rem; padding: .3rem; text-align: center; width: 25%}
.produits .produit .caracteristiques .caracteristique:last-child{border-right: none;}
.produits .produit .caracteristiques .caracteristique i{display: block; font-size: 1.1rem; margin-bottom: .2rem;}

#accueil .carousel{padding-bottom: 2rem; position: relative;}
#accueil .carousel.mobile{display: none}
#accueil .carousel img{height: auto; width: 100%;}
#accueil .carousel .imageup{bottom: 0; left: 0; position: absolute; right: 0; top: 0;}
#accueil #gallery_cache{display: none}
#accueil #lstcategories{display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr);}
#accueil #lstcategories .categorie{cursor: pointer; overflow: hidden; position: relative;}
#accueil #lstcategories .categorie.big{grid-column: span 2;}
#accueil #lstcategories .categorie img{border-radius: 5px; height: auto; margin-bottom: -6px; width: 100%}
#accueil #lstcategories .categorie .content{background: linear-gradient(rgba(0, 0, 0, .0) 1%, rgba(0, 0, 0, .3) 20%, rgba(0, 0, 0, .7) 70%); bottom: 0; color: #FFF; left: 0; padding: 2rem; position: absolute; right: 0; transform: translateY(70%);}
#accueil #lstcategories .categorie.big .content{transform: translateY(65%);}
#accueil #lstcategories .categorie:hover .content{background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .6) 70%); transform: translateY(0);}
#accueil #lstcategories .categorie .content a.action:hover{background-color: #FFF; color: #000!important;}
#accueil #lstcategories .categorie .content h3{font-weight: 500; text-shadow: 3px 3px 8px #000; text-transform: uppercase;}
#accueil #lstcategories .categorie .content p{font-weight: 400;}
#accueil #nouschoisir{background-color: #E9E9E9; margin: 2rem 0 3rem 0; padding: 1.5rem 0;}
#accueil #nouschoisir #raisons{align-items: self-start; display: flex; flex-wrap: wrap; justify-content: space-between;}
#accueil #nouschoisir #raisons .raison{align-items: self-start; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; width: 23.5%}
#accueil #nouschoisir #raisons .raison .ico{font-size: 4.5rem; text-align: center; width: 30%}
#accueil #nouschoisir #raisons .raison .value{font-size: .9rem; line-height: 1.2rem; width: 68%}
#accueil #nouschoisir #raisons .raison .value h4{color: #C81620; font-size: 1.1rem; font-weight: 400; margin-bottom: .5rem; text-transform: uppercase;}
#accueil #jmb .bloc{align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 3rem}
#accueil #jmb .bloc .texte{width: 48%}
#accueil #jmb .bloc .image{width: 48%}
#accueil #jmb .bloc .image img{border-radius: 5px; height: auto; width: 100%}
#accueil #jmb .bloc ul{list-style: none}
#accueil #jmb .bloc li{margin-bottom: 1rem}
#accueil #jmb .bloc li::before{content: "\2022"; color: #C81620; display: inline-block; font-weight: bold; margin-right: .4rem; width: 1rem;}
#accueil #video{background-color: #000; color: #EEE; padding: 2rem 0}
#accueil #video .container{overflow: hidden; margin-top: 2rem; padding-top: 56.25%; position: relative; width: 100%;}
#accueil #video .container iframe{bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%}

#bandeau{position: relative;}
.categorie6 #bandeau{margin-bottom: 1.5rem}
#bandeau img{height: auto; width: 100%}
#bandeau img.mobile{display: none}
#bandeau #ariane{left: 0; position: absolute; top: 2rem; width: 100%}
#bandeau #ariane .maincontent{color: #FFF; display: flex; flex-wrap: wrap; font-size: .9rem; justify-content: space-between; text-shadow: 1px 1px 10px #333;}
#bandeau #ariane .maincontent div:first-child{width: 75%}
#bandeau #ariane .maincontent div:last-child{text-align: right; width: 25%}
#bandeau #ariane .maincontent a{color: #FFF; font-weight: 500}
#bandeau #ariane .maincontent a:hover{color: #C81620}

#produits .titre{display: flex; flex-wrap: wrap; justify-content: space-between;}
#produits .titre h1{width: 76%}
#produits .titre .sort{width: 20%}
#produits .titre .sort{font-size: 2rem; padding-top: 1rem; text-align: right;}
#produits .titre .sort i{cursor: pointer}
#produits .titre .sort i:last-child{margin-left: .5rem;}
#produits .titre .sort i:hover{color: #C81620}
#produits .description{margin-bottom: 2rem}
#produits .description a{font-weight: 500}
#produits .description a:hover{color: #C81620}
#produits .aucunproduit{background-color: #E9E9E9; font-style: italic; margin-top: 2rem; padding: 1rem; width: 100%}

#produit h1{font-weight: 600; margin-bottom: 1.7rem;}
#produit h1 span{font-weight: 400}
#produit #presentation{align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 3rem}
#produit #presentation #photos{display: flex; flex-wrap: wrap; justify-content: space-between; width: 54%}
#produit #presentation #photos #miniatures{position: relative; width: 18%}
#produit #presentation #photos #miniatures img{border: 2px solid #FFF; border-radius: 5px; cursor: pointer; display: block; height: auto; margin-bottom: 9.2%; width: 100%;}
#produit #presentation #photos #miniatures img:hover{border-color: #C81620;}
#produit #presentation #photos #miniatures i{color: #666; cursor: pointer; font-size: 1.8rem; left: calc(50% - 10px); position: absolute;}
#produit #presentation #photos #miniatures i:hover{color: #C81620;}
#produit #presentation #photos #miniatures i.fa-angle-up{top: -2rem}
#produit #presentation #photos #miniatures i.fa-angle-down{bottom: -1.2rem}
#produit #presentation #photos #miniatures i.fa-angle-left, #produit #presentation #photos #miniatures i.fa-angle-right{display: none}
#produit #presentation #photos #photo{position: relative; width: 80%}
#produit #presentation #photos #photo img{border-radius: 5px; cursor: pointer; height: auto; width: 100%}
#produit #presentation #photos #photo .flags{height: 160px; overflow: hidden; position: absolute; right: 0; top: 0; width: 160px}
#produit #presentation #photos #photo .flags .flag{background-color: rgba(200, 22, 32, .85); border-radius: 5px; color: #FFF; font-size: 1.2rem; font-weight: 400; margin-bottom: .2rem; padding: .5rem 0; position: absolute; right: -100px; top: -45px; transform: rotate(45deg); text-align: center; width: 250px}
#produit #presentation #photos #photo .flags .flag1, #produit #presentation #photos #photo .flags .flag3{font-size: 1rem}
#produit #presentation #photos #photo .flags .flag6{font-size: 1.05rem}
#produit #presentation #photos #photo .fa-magnifying-glass{bottom: 0; color: #D03841; cursor: pointer; font-size: 3rem; padding: 1rem 0 0 1rem; position: absolute; right: -.8rem}
#produit #presentation #photos #noncontrat{color: #BBB; font-size: .75rem; font-style: italic; margin-top: -7px; text-align: right; width: 100%}
#produit #presentation #infos{width: 44%}
#produit #presentation #infos #prix{font-size: 1.8rem; font-weight: 400}
#produit #presentation #infos #prix #partir{color: #D03841; font-size: .85rem; margin-bottom: .2rem}
#produit #presentation #infos #prix span{font-size: 1rem; font-weight: 300; text-decoration-line: line-through;}
#produit #presentation #infos #prix #diff{background-color: rgba(200, 22, 32, .85); border-radius: 5px; color: #FFF; display: inline-block; font-size: 1.2rem; font-weight: 400; margin-bottom: .2rem; padding: .4rem .8rem;}
#produit #presentation #infos #prix_mois{margin-top: .8rem}
#produit #presentation #infos #prix_mois span.prix{font-size: 1.3rem; font-weight: 400}
#produit #presentation #infos #resume{background-color: #F3F3F3; border-radius: 5px; font-style: italic; font-weight: 500; margin: 1.3rem 0; padding: 1.2rem 1rem}
#produit #presentation #infos #resume i{color: #C81620; font-size: 1.6rem; margin-right: .25rem}
#produit #presentation #infos #caracteristiques{display: flex; flex-wrap: wrap; font-size: .95rem; justify-content: space-between; margin: 1.5rem 0}
#produit #presentation #infos #caracteristiques div{margin-bottom: .8rem; width: 48%}
#produit #presentation #infos #caracteristiques div i{min-width: 20px; margin-right: .5rem}
#produit #presentation #infos #caracteristiques div span{font-weight: 400}
#produit #presentation #infos #financement #cetelem{height: auto; margin-left: 1rem; vertical-align: middle; width: 100px}
#produit #description{background-color: #F3F3F3; border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 2rem; padding: 2rem 1.5rem}
#produit #description a{color: #C81620; font-weight: 400}
#produit #description a:before{content: '\f0c1'; display: inline-block; font-family: "Font Awesome 6 Free"; margin-right: 1rem}
#produit #description a:hover{color: #000;}
#produit #description div{width: 48%}
#produit #description table{width: 100%!important}
#produit #description table th{font-weight: 500; width: 30%!important}
#produit #description table td{width: 70%!important}
#produit #description table th, #produit #description table td{padding: 0 .8rem 1rem 0; text-align: left!important; vertical-align: top;}
#produit #description ul{list-style: none; margin-bottom: .4rem;}
#produit #description ul li{margin-bottom: .3rem;}
#produit #description ul li::before{content: "\2022"; color: #D34143; display: inline-block; font-weight: bold; margin-right: .4rem; width: 1rem;}
#produit #cache{display: none}
#produit #lightbox{background-color: rgba(0, 0, 0, .95); bottom: 0; display: none; left: 0; padding: 2.5rem; position: fixed; right: 0; top: 0; z-index: 999}
#produit #lightbox .photo{align-items: center; display: flex; height: 100%; justify-content: center;}
#produit #lightbox .photo img{height: auto; max-width: 100%}
#produit #lightbox .fa-xmark{color: #FFF; cursor: pointer; font-size: 3.5rem; position: absolute; right: 2.5rem; top: 3rem}
#produit #lightbox .fa-chevron-left{color: #FFF; cursor: pointer; font-size: 3rem; left: 0; padding: 2.5rem; position: absolute; top: 48%}
#produit #lightbox .fa-chevron-right{color: #FFF; cursor: pointer; font-size: 3rem; padding: 2.5rem; position: absolute; right: 0; top: 48%}

#equipe .bloc{align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 3rem}
#equipe .bloc .texte{width: 48%}
#equipe .bloc .image{width: 48%}
#equipe .bloc .image img{border-radius: 5px; height: auto; width: 100%}
#equipe .bloc ul{list-style: none}
#equipe .bloc li{margin-bottom: 1rem}
#equipe .bloc li::before{content: "\2022"; color: #C81620; display: inline-block; font-weight: bold; margin-right: .4rem; width: 1rem;}
#equipe #video{background-color: #000; color: #EEE; padding: 2rem 0}
#equipe #video .container{overflow: hidden; margin-top: 2rem; padding-top: 56.25%; position: relative; width: 100%;}
#equipe #video .container iframe{bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%}

#contact p i.fa-font-awesome{color: #C81620; margin-right: 1rem}
#contact #blocs{border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 2rem 0 3rem 0;}
#contact #blocs .bloc{background-color: #F3F3F3; margin-bottom: 1.5rem; padding: 2rem; text-align: center; width: 32%}
#contact #blocs .bloc i{display: block; font-size: 3rem; margin-bottom: 1rem;}
#contact #blocs .bloc h3{margin-bottom: 1rem}
#contact #blocs .bloc a, #contact #blocs .bloc b{font-weight: 400}
#contact #blocs .bloc a:hover{color: #C81620;}
#contact #blocs .bloc p{font-size: 1.1rem; line-height: 1.5rem;}
#contact #blocs .bloc.tel p{font-size: 2.2rem; padding-top: 1rem}
#contact #blocs .bloc.tel p a{font-weight: 500}
#contact #maps{background-color: #000; color: #EEE; padding: 2rem 0}
#contact #maps iframe{border: 3px solid #FFF; border-radius: 5px; box-shadow: 5px 5px 10px #555; height: 1000px; margin-top: 1rem; width: 100%}

footer{margin-top: 5rem}
footer .top{background-color: #1c2127; padding: 2rem 0}
footer .top .maincontent{align-items: start; color: #DDD; display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .top .maincontent a{color: #FFF}
footer .top .maincontent a:hover{color: #C81620}
footer .top .maincontent .logo{width: 20%}
footer .top .maincontent .logo img{height: auto; max-width: 100%}
footer .top .maincontent .jmb{font-size: .85rem; width: 25%}
footer .top .maincontent .jmb div{margin-bottom: .8rem}
footer .top .maincontent .coord{align-items: start; display: flex; flex-wrap: wrap; font-size: .85rem; justify-content: space-between; width: 35%}
footer .top .maincontent .coord .carte{width: 25%}
footer .top .maincontent .coord .carte img{height: auto; max-width: 100%}
footer .top .maincontent .coord .value{width: 70%}
footer .top .maincontent .coord .value b{color: #FFF; font-size: .95rem}
footer .top .maincontent .coord .value .tel{font-size: 1.2rem; margin-bottom: 0;}
footer .top .maincontent .coord .value .tel a{color: #C81620}
footer .top .maincontent .coord .value .tel a:hover{color: #FFF}
footer .top .maincontent .links{width: 15%}
footer .top .maincontent .links div{margin-bottom: .5rem}
footer .top .maincontent .links div:last-child{margin-bottom: 0}
footer .bottom{background-color: #000;color: #EEE; font-size: .85rem; padding: 1rem 0}
footer .bottom .maincontent{display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .bottom .signature{width: 80%}
footer .bottom .signature a{color: #c81620; white-space: nowrap;}
footer .bottom .signature a:hover{color: #FFF}
footer .bottom .links{text-align: right; width: 20%}
footer .bottom .links a{color: #FFF; margin-right: 1rem;}
footer .bottom .links a:last-child{margin-right: 0}
footer .bottom .links a:hover{color: #c81620}



@media screen and (max-width: 1920px){

	html{font-size: 17px;}

	.maincontent{width: 80%}

	header .top .logo{width: 25%}
	header .top .coordonnees{width: 70%}

	#accueil #nouschoisir #raisons .raison{width: 24%}
	#accueil #nouschoisir #raisons .raison .ico{margin-bottom: 1.5rem; width: 100%}
	#accueil #nouschoisir #raisons .raison .value{font-size: 1rem; text-align: center; width: 100%}

}

@media screen and (max-width: 1700px){

	header .menu nav ul li{margin-right: 1.5rem}

	#accueil #lstcategories .categorie .content{transform: translateY(75%);}
	#accueil #lstcategories .categorie.big .content{transform: translateY(70%);}
	#accueil #lstcategories .categorie:hover .content{transform: translateY(0);}

}

@media screen and (max-width: 1550px){

	header .menu nav ul li{margin-right: 1.2rem}

}

@media screen and (max-width: 1400px){

	.maincontent{width: 90%}

	header .top .logo{margin-bottom: .3rem; text-align: center; width: 100%}
	header .top .coordonnees{padding-top: .5rem; width: 100%}

	#infobulle_content #ib_content{left: 15%!important; width: 70%!important;}

}

@media screen and (max-width: 1300px){

	header .menu #icon_menu{display: block;}
	header .menu nav{background-color: rgba(0, 0, 0, .98); display: none; left: 0; padding: 2rem 5%; position: absolute; top: 60px; width: 100%; z-index: 99}
	header .menu nav ul li{display: block; margin-bottom: 1.5rem; margin-right: 0;}
	header .menu nav ul li:last-child{margin-bottom: 0;}
	header .menu nav ul li a br{display: none}
	header .menu .rs{padding-top: .5rem; width: 30%}

	#search #search_items .select_style, #search #search_items .input_style{padding-left: .6rem}
	#search #search_items .bloc{width: 19.5%}
	#search #search_items .search{width: 21%}

}

@media screen and (max-width: 1250px){

	footer .top .maincontent .logo{width: 20%}
	footer .top .maincontent .jmb{display: none}
	footer .top .maincontent .coord{width: 45%}
	footer .top .maincontent .links{width: 25%}

}

@media screen and (max-width: 1200px){

	#produit #lightbox .fa-chevron-left, #produit #lightbox .fa-chevron-right{padding: .5rem;}

	#contact #blocs .bloc{width: 48%}
	#contact #blocs .bloc.tel p{font-size: 1.8rem;}

}

@media screen and (max-width: 1150px){

	.produits .produit{width: 48.5%}
	.produits .produit.vide{display: none}

	#produit #description div{width: 100%}
	#produit #description div:first-child{margin-bottom: 1rem}

}

@media screen and (max-width: 1100px){

	#produit #presentation #photos{order: 2; width: 100%}
	#produit #presentation #infos{order: 1; margin-bottom: 2rem; width: 100%}

}

@media screen and (max-width: 1000px){

	#accueil #lstcategories{grid-template-columns: repeat(2, 1fr);}
	#accueil #lstcategories .categorie.big{grid-column: span 2;}

}

@media screen and (max-width: 900px){

	header .top{padding-bottom: 1rem}
	header .top .logo img{max-width: 250px;}
	header .top .coordonnees > div{width: 33%!important}
	header .top .coordonnees > div .ico{text-align: center; width: 100%}
	header .top .coordonnees > div .ico i{cursor: pointer}
	header .top .coordonnees > div .value{display: none}

	#search #search_display{display: block;}
    #search #search_ajax{display: none;}
    #search #search_items .bloc{margin-bottom: .5rem; padding: 0; width: 100%}
    #search.nobutton #search_items .bloc{width: 100%}
	#search #search_items .search{padding: 0; width: 100%}

	#accueil .carousel.pc{display: none}
	#accueil .carousel.mobile{display: block}
	#accueil #nouschoisir #raisons .raison{margin-bottom: 1.5rem; width: 48%}
	#accueil #jmb .bloc .texte{order: 2; width: 100%}
	#accueil #jmb .bloc .image{margin-bottom: 1rem; order: 1; width: 100%}

	#bandeau img{display: none}
	#bandeau img.mobile{display: block}

	#equipe .bloc .texte{order: 2; width: 100%}
	#equipe .bloc .image{margin-bottom: 1rem; order: 1; width: 100%}

	footer .bottom .signature{text-align: center; width: 100%}
	footer .bottom .links{display: none}

}

@media screen and (max-width: 800px){

	#infobulle_content #ib_content{left: 5%!important; width: 90%!important;}

	footer .top .maincontent .logo{text-align: center; margin-bottom: 1.5rem; width: 100%}
	footer .top .maincontent .coord{width: 55%}
	footer .top .maincontent .links{width: 35%}

}

@media screen and (max-width: 700px){

	#contact #blocs .bloc{width: 100%}

}

@media screen and (max-width: 650px){

	footer .top .maincontent .coord, footer .top .maincontent .links{margin-bottom: 1.5rem; width: 100%}
	footer .top .maincontent .coord .carte{width: 32%}
	footer .top .maincontent .coord .value{width: 55%}

}

@media screen and (max-width: 600px){

	#bandeau #ariane .maincontent div:first-child{margin-bottom: 1rem; width: 100%}
	#bandeau #ariane .maincontent div:last-child{text-align: left; width: 100%}

	#accueil #lstcategories{grid-template-columns: 1fr;}
	#accueil #lstcategories .categorie.big{grid-column: span 1;}

	.produits .produit{width: 100%}
	.produits .produit h3{min-height: auto;}

	#produit #presentation #photos #miniatures{display: flex; flex-wrap: wrap; justify-content: space-between; order: 2; width: 100%;}
	#produit #presentation #photos #miniatures img{width: 24%}
	#produit #presentation #photos #miniatures i{font-size: 1.5rem; top: 15%;}
	#produit #presentation #photos #miniatures i.fa-angle-left{display: block; left: -1rem;}
	#produit #presentation #photos #miniatures i.fa-angle-right{display: block; left: auto; right: -1rem}
	#produit #presentation #photos #miniatures i.fa-angle-up, #produit #presentation #photos #miniatures i.fa-angle-down{display: none}
	#produit #presentation #photos #photo{order: 1; width: 100%;}
	#produit #presentation #infos #prix #diff{display: inline-block; margin-top: .5rem}
	#produit #presentation #infos #caracteristiques div{width: 100%}
	#produit #presentation #photos #photo .fa-magnifying-glass{display: none}

	#contact #maps iframe{height: 600px}
}

@media screen and (max-width: 550px){

	h1{margin-bottom: 1rem}

	#produits .titre h1{width: 100%}
	#produits .titre .sort{margin-bottom: 1rem; text-align: left; width: 100%}
	#produits .description{display: none;}

}

@media screen and (max-width: 500px){

	header{margin-bottom: 2rem}
	header .top .coord_responsive img{width: 70%;}
	header .top .coord_responsive.fa-location-dot div{left: 35%;}

	.produits .produit .image .flags{height: 100px; width: 100px}
	.produits .produit .image .flags .flag{font-size: .9rem; right: -95px; top: -55px;}
	.produits .produit .image .flags .flag1, .produits .produit .image .flags .flag3, .produits .produit .image .flags .flag6, .produits .produit .image .flags .flag8{font-size: .65rem}

	#accueil #nouschoisir #raisons .raison .ico{font-size: 2.5rem;}
	#accueil #nouschoisir #raisons .raison .value h4{font-size: 1rem;}
	#accueil #nouschoisir #raisons .raison .value{font-size: .8rem;}

	.tooltip .tooltiptext{left: calc(50% - 160px); width: 220px;}
	.tooltip .tooltiptext::after{left: 152px; top: 0}

	#produit #description table th, #produit #description table td{display: block}
	#produit #presentation #infos #caracteristiques div span{font-size: 1rem;}
	#produit #presentation #infos #caracteristiques #cetelem{display: block; margin-left: 0; margin-top: .3rem; width: 120px}
	#produit #presentation #photos #photo .flags{height: 130px; width: 130px}
	#produit #presentation #photos #photo .flags .flag{font-size: 1rem; right: -120px; top: -65px;}
	#produit #presentation #photos #photo .flags .flag1, #produit #presentation #photos #photo .flags .flag3, #produit #presentation #photos #photo .flags .flag6{font-size: .8rem}
}

@media screen and (max-width: 450px){

	header .top .logo img{max-width: 220px;}

	footer .top .maincontent .logo img{max-width: 220px;}
	footer .top .maincontent .coord, footer .top .maincontent .links{padding-left: 1rem}
	footer .top .maincontent .coord .carte{margin: 2rem auto 1rem auto; width: 60%}
	footer .top .maincontent .coord .value{text-align: center; width: 100%}
	footer .top .maincontent .links{text-align: center}

}