/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/*modifier la police*/
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Roboto:ital,wght@1,500&display=swap');
body {font-family: 'Comfortaa', cursive;}
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: 'Roboto', sans-serif;}

/*BODY*/
/* 1. mettre le fond en blanc */	
#wrapper {
background:#fff;
}
/* 2. carousel grand ecran */
body.page-index #wrapper .container {
     max-width: 100%;
     width: 100%;
     padding-left: 0;
     padding-right: 0;
}
body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
     margin-left: auto;
     margin-right: auto;
     padding-left: 15px;
     padding-right: 15px;

}
@media (min-width: 992px) {
     body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
         max-width: 940px;
    }
}
@media (min-width: 1200px) {
     body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
         max-width: 1140px;
    }
}
@media (max-width: 991px) {
     body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
         max-width: 100%;
    }
}
.carousel-control .icon-prev {
     margin-left: 0;
}
.carousel-control .icon-next {
     margin-right: 0;
}
/* 3. forcer la taille de l'image du carousel*/
.carousel .carousel-inner{height:100%;}
.carousel{box-shadow:none;
}
/* 4. bannières multiples homepage */
/* modifier \themes\classic\modules\ps_banner\ps_banner.tpl*/
#banners_home .img-responsive{width:100%;}
#banners_home .bloc{margin-bottom:20px;}
#banners_home a img:hover{opacity: 0.5;filter: alpha(opacity=50); /* For IE8 and earlier */
}
/* 5. mettre en page le bloc texte */
#custom-text {
    background: #cbd2dc;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    padding: 3.125rem;
    text-align: center;
	border-bottom: 2px;
}

/*PRODUIT*/
/* 1. mettre en blanc le nom du produit*/
#products .product-title a, .featured-products .product-title a, .product-accessories .product-title a, .product-miniature .product-title a {
    color: #ffffff;
    font-weight: 500;
}
/* 2. mettre un fond noir derriere le nom et prix du produit*/
#products .product-description, .featured-products .product-description, .product-accessories .product-description, .product-miniature .product-description {
    background: #000000;
}
/* 3. ajuster le drapeau exclusivité web */
#products .product-miniature .online-only.online-only {
        margin-left: 5rem;
}
.product-miniature .product-miniature .product-flags .new.online-only {
        margin-left: 5rem;
}
.featured-products .product-miniature .online-only.online-only {
	margin-left: 5rem;
}
li.product-flag.online-only {
    top: 0rem;
}
/* 4. changer la couleur du prix en bleu*/
#products .product-price-and-shipping, .featured-products .product-price-and-shipping, .product-accessories .product-price-and-shipping, .product-miniature .product-price-and-shipping {
  	color: #23acec;
    font-weight: 500;
    text-align: center;
	font: 200 28px/20px "Roboto",sans-serif;
}
/* 5. enlever l'ombre sur la bordure du bloc des produits et mettre le fond en blanc*/
#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
    background: #ffffff;
    box-shadow: 0px 0px 2px 0 rgb(0 0 0 / 20%);
}
/* 6. enlever l'ombre de la colonne des categories*/
.block-categories {
    box-shadow: 0px 0px 2px 0 rgb(0 0 0 / 20%);
}
/* 7. enlever l'ombre du bloc de catégorie*/
.card {
    box-shadow: 0px 0px 1px 0 rgb(0 0 0 / 20%);
}

/*HEAD*/
/* 1. mettre une micro bannière*/
/* modifier S:\wamp64\www\pneu\themes\classic\templates\_partials\head.tpl*/
#header-microbanner{background-color:#000000;color:#fff;font-size:13px;text-align:center;height:30px;padding-top:.2rem;}
#header-microbanner span{margin-right:20px;margin-left:20px;}
/* micro bannière sur mobile */
@media(max-width:500px){
   #header-microbanner span{margin-right:5px;margin-left:5px;}
   #header-microbanner .mb_span2, #header-microbanner .mb_sep2{display:none;}
}
/* 2. mettre une image de fond en haut de page*/
#header 	
	{
    background-image: url('../img/header1.jpg');
}/*#header 	
	{
    background: #cbd2dc;
}*/
/* 3. enlever la ligne sous la barre de recherche*/
#header .header-nav {
    border-bottom: 0px;
}
/* 4. mettre le panier en transparent*/
#header .header-nav .blockcart {
    background: transparent;
	color: black;
}
/* 5. mettre le panier en vert quand il est plein*/
#header .header-nav .cart-preview.active {
    background: forestgreen;
}

/*PAGE PRODUITS*/
/* modifier \themes\classic\templates\catalog\product.tpl*/
/* 1. mettre en bleu le nom du produit*/
.h1, h1 {
	color:#23acec;
}
/* 2. encadrer les "detail" et "description" du produit*/
.tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover {
    border-bottom: 3px solid black;
	background:#cbd2dc;
	color:#312a24;
}
.tabs .nav-tabs .nav-link.active { 
	border-bottom: 3px solid #000000;
	background:#cbd2dc;
	color:#312a24;
}
/* 3. mettre une marge en dessous du bloc de description du produit tout en largeur*/
#product_tabs_block{
	margin-bottom: 2rem;
}
/* 4. mettre une ligne verticale entre les 2 colonnes du produit*/
#product .product_third.col-md-4 {
	border-left: 2px solid #000000; 
	background:#cbd2dc;
}
/* 5. remonter le drapeau exclusivité web dans la page produit*/
.product-flags li.product-flag.online-only {
    top: 10px;
}
/* 6. modifier la taille du prix dans la description du produit*/
.product-price {
    color: #23acec;
	font-size: 30px;
    display: inline-block;
}
/* 7. mettre une marge sous le "partage reseau" dans la description du produit*/
#product .social-sharing {
       padding-bottom: 1.5rem;
}
/* 8. rajouter une ligne sur le "partage reseau" dans la description du produit*/
.product-add-to-cart {
	border-bottom: 2px solid black;
}
/* 9. enlever l'ombre du bloc de présentation du produit*/
.tabs {
    box-shadow: 0px 0px 2px 0 rgb(0 0 0 / 20%);
}
/* 10. mettre une bordure sur le bloc des categories et le reduire*/
.block-category {
    min-height: 15rem;
    margin-bottom: 1.563rem;
    box-shadow: 0px 0px 2px 0 rgb(0 0 0 / 20%);
} 
/* 11. aligner l'image dans le bloc de categorie*/
.block-category .category-cover img {
    	vertical-align:super;
}
/* 12. reduire l'image de la marque dans la description du produit*/
#product .product-manufacturer img{
	height:100px; margin-bottom:20px;
}
/* 13. mettre à la ligne le bloc des produits complémentaires*/
#products .products, .featured-products .products, .product-accessories .products, .product-miniature .products {
        padding-top: 10px;
}

/*NAVIGATION A FACETTE*/
/* 1. mettre en noir les titres des filtres*/
#search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title {
    font-size: 1rem;
    color: black;
    padding: .7rem;
	text-decoration: underline;
}
/* 2. mettre "effacer tout" en gris et texte noir*/
.btn-tertiary {
   /* background-color: #cbd2dc;*/
	color:black;
}
/* 3. laisser la couleur du texte des filtres en noir au survol de la souris*/	
#search_filters a:hover {
        color:#000000;
		font-weight:700;
}
/* 4. mobile navigation a facette*/
@media(max-width:767px) {
#search_filters, #search_filters_brands, #search_filters_suppliers {
    display: inline-block;
    text-align: justify;
    width: 100%;
}
}
/* 5. justifier le texte de la navigation a facette*/	
#search_filters .facet, #search_filters_brands .facet, #search_filters_suppliers .facet {
    text-align: justify;
    padding-left: 15px;
}
/* 6. mettre le fond de filtre actif en gris */
.active_filters {
    background: #cbd2dc;
}
/* 7. mettre un fond gris et enlever l'ombre*/
#search_filters, #search_filters_brands, #search_filters_suppliers {
    box-shadow: 0px 0px 2px 0 rgb(0 0 0 / 20%);
    background: #cbd2dc;
}

/*FOOTER*/
/* 1. mettre une image de fond en bas de page */
.footer-container {
    background-image: url('../img/footer.jpg');
}
/* 2. mettre une couleur de fond en bas de page 
.footer-container {
    background: #000000;
}
/* 2bis. enlever la marge en haut du footer*/
#footer {
    padding-top: 8px;
	background: #ffffff;
}
/* 3. mettre les textes du footer en noir*/
.footer-container li a {
    color:#000;
    }
.footer-container .block-contact {
    padding-left: 5rem;
    color:#000;
	border-left: 4px double black;
}	
.footer-container .dropdown {
    color:#000;
}
/* 4. enlever le copyright prestashop --> modifier \themes\classic\templates\_partials\footer.tpl*/

/* HEAD - LOGO*/
/* modifier \themes\classic\templates\_partials\header.tpl*/
/* 6. agrandir le logo et le center - debut*/
/* desktop */
@media(min-width:1025px){ 
    .header-top #top-menu{margin-top:20px;}
    .header-top #search_widget{margin-top:10px;}
}
/* tablette h. */
@media(min-width:1024px)  AND (max-width:1024px){ 
    .header-top #top-menu{margin-top:10px;}
    .header-top #search_widget{margin-top:5px;}
}
/* desktop v. */
@media(min-width:768px) AND (max-width:1023px){ 
    .header-top #top-menu{margin-top:5px;}
    .header-top #search_widget{margin-top:0px;}
}
/* mobile */
@media(max-width:767px){
    #header .logo {height:30px;}
}
/* 7. centrer et modifier la taille du logo */
.logo-v2{text-align:center;}
.logo-v2 img{width:350px!important;}

/*EVERBLOCK*/
.container-fluid {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;
	background:#cbd2dc;
}

/* HEAD - MENU*/
/* 8. reduire la marge en bas du menu*/
#header .header-top {
    padding-bottom: 0rem;
}
/* 9. reduire la marge en haut du menu*/
#header .header-nav {
    margin-bottom: 15px;
}
/* 10. mettre la couleur du texte du menu en blanc sur fond noir*/
#header .header-top a[data-depth="0"] {
	color:#ffffff;
	background-color: black;
	padding-top: 5px;
}
/* 11. centrer le menu*/
#header .header-top .position-static {
    position: static;
    text-align: center;
}
/* 12. mettre une image dans le sous menu*/
/* modifier \themes\classic\modules\ps_mainmenu\ps_mainmenu.tpl*/
.top-menu img{max-width:100%;}
.top-menu .popover .li_depth_1{width:10%!important;}
.top-menu .popover .li_depth_2 img{width:20px;margin-right:5px;}
.top-menu span.depth1{display:none!important;}
/* Mobile */
@media(max-width:600px){
  /*  .top-menu img{display:none;}*/
    .top-menu .popover .li_depth_1{width:inherit!important;}
    .top-menu span.depth1{display:block!important;}
}
/* 13. mettre le sous menu à la verticale*/
.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: 100%;
    min-width: 100%;
    z-index: 18;
    position: absolute;
	border-radius:5px;
}
/*#header .menu, #header .menu>ul>li {
    display: inline-block;
 }*/
	
/* 14. mettre le sous menu sur 3 colonnes*/
.top-menu .sub-menu.collapse {
			 column-count: 3;
       column-width: auto;
    column-fill: balance;
}
/* 15. ajuster les colonnes du sous menu*/
.top-menu .sub-menu ul[data-depth="1"]>li {
    float: left;
    margin: 0 1.25rem;
    clear: both;
	 position: relative;
}
/* 16. mettre le sous menu sur mobile en 1 colonne*/
	@media(max-width:600px){
.top-menu .sub-menu.collapse {
			 column-count: 1;
       column-width: auto;
    column-fill: balance;		
}