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

/*
*@colors
*vert : #4bb07a
*bleu : #263339
*jaune : #d1d648
*/

:root{
  --vert:#4bb07a;
  --bleu:#263339;
  --jaune:#d1d648;
}

/*
 #####  ######  ####  ###### #####
 #    # #      #      #        #
 #    # #####   ####  #####    #
 #####  #           # #        #
 #   #  #      #    # #        #
 #    # ######  ####  ######   #
*/

#header .header-nav{
  margin-bottom:0;
  border-bottom:none;
}
#header .menu{
  display:block;
}
.btn-primary{
  background-color:#263339;
  transition:all 0.3s;
}
.btn-primary:hover{
  background-color:#d1d648;
}

 /*
   ####  ###### #    # ###### #####    ##   #
  #    # #      ##   # #      #    #  #  #  #
  #      #####  # #  # #####  #    # #    # #
  #  ### #      #  # # #      #####  ###### #
  #    # #      #   ## #      #   #  #    # #
   ####  ###### #    # ###### #    # #    # ######
 */

body{
  font-family: 'Montserrat', sans-serif;
}

 /*
  #    # ######   ##   #####
  #    # #       #  #  #    #
  ###### #####  #    # #    #
  #    # #      ###### #    #
  #    # #      #    # #    #
  #    # ###### #    # #####
 */

#header .header-nav{
  background:#4bb07a;
}

#header .header-top{
  background:#263339;
}

/* connexion */
#header .user-info a,
#header #contact-link a,
#header .blockcart a
{
  color:#fff;
  text-transform:uppercase;
}

/* barre de recherche */
#header .header-nav .search-widget{
  margin-top:0;
  margin-left: 2.5rem;
  margin-right: 1.5rem;
  overflow:hidden;
}
#header .header-nav .search-widget form input[type=text]{
  border:3px solid #fff;
}
#header .header-nav .search-widget form input[type=text]:focus{
  border:3px solid #2fb5d2;
  outline:none;
}
#header .header-nav #_desktop_contact_link #contact-link{
  color:#fff;
}

.header-row{
  display: flex;
  align-items:center;
}
.header-text p{
  color:#fff;
}
.header-text p:last-of-type{
  margin-bottom:0;
}

.header-nav .search-widgets{
  margin-left:15px;
}

/*
 #####    ##   #    # # ###### #####
 #    #  #  #  ##   # # #      #    #
 #    # #    # # #  # # #####  #    #
 #####  ###### #  # # # #      #####
 #      #    # #   ## # #      #   #
 #      #    # #    # # ###### #    #
*/



 /*
  #    # ###### #    # #    #
  ##  ## #      ##   # #    #
  # ## # #####  # #  # #    #
  #    # #      #  # # #    #
  #    # #      #   ## #    #
  #    # ###### #    #  ####
 */
/* override dans ps_mainmenu_fullwidth.tpl */
.menu-full-width{
  background-color:#d1d648;
}
#header .menu-full-width .menu > .top-menu > li > a{
  color:#fff;
  text-transform:uppercase;
}
#header .menu-full-width a{
  color:#fff;
}

.menu-full-width .top-menu .sub-menu{
  margin-left:0;
}
#header #top-menu{
  position:relative;
  margin-bottom:0;
}
#header .menu>ul>li>a{
  padding:15px;
}
#header .top-menu a[data-depth="0"]:hover,
#header .top-menu .current a[data-depth="0"]
{
  color:#fff;
  background-color:#263339;
}

/*
  ####   ####  #    #  ####        #    # ###### #    # #    #
 #      #    # #    # #            ##  ## #      ##   # #    #
  ####  #    # #    #  ####  ##### # ## # #####  # #  # #    #
      # #    # #    #      #       #    # #      #  # # #    #
 #    # #    # #    # #    #       #    # #      #   ## #    #
  ####   ####   ####   ####        #    # ###### #    #  ####
*/

.top-menu .sub-menu.collapse{
  background-color:#263339;
  /* debug */
  /* display:block !important; */
}

/*
  ####    ##   #####   ####  #    #  ####  ###### #
 #    #  #  #  #    # #    # #    # #      #      #
 #      #    # #    # #    # #    #  ####  #####  #
 #      ###### #####  #    # #    #      # #      #
 #    # #    # #   #  #    # #    # #    # #      #
  ####  #    # #    #  ####   ####   ####  ###### ######
*/

.carousel{
  margin-bottom:0;
}
.carousel ul{
  margin-bottom:0;
}
.carousel .carousel-item .caption{
  top:0;
  left: 0;
  right: 0;
  text-align: center;
  max-width: 100%;
}
.carousel .carousel-item .caption > h2{
  margin:0;
}
.carousel .carousel-control .icon-next i, .carousel .carousel-control .icon-prev i{
  width:20px;
}
.carousel .carousel-item .caption .caption-description{
  background:rgba(255,255,255,0.8);
  position:relative;
  color:#263339;
  text-transform:uppercase;
  padding:20px 0;
}
.carousel .carousel-item .caption .caption-description h2{
  font-size:35px;
  margin-bottom:5px;
  margin-top:0;
}
.carousel .carousel-item .caption .caption-description p:not(.button){
  font-size:35px;
  line-height:1.1;
  color:#263339;
  margin-top:5px;
  margin-bottom:0;
}
.carousel .carousel-item .caption .caption-description .button{
  position: absolute;
  bottom: -40px;
  left: calc(50% - 75px);
  margin: 0;
  padding: 10px;
  background: #d1d648;
  width: 150px;
}

/*
 #    #  ####  #    # ###### #####    ##    ####  ######
 #    # #    # ##  ## #      #    #  #  #  #    # #
 ###### #    # # ## # #####  #    # #    # #      #####
 #    # #    # #    # #      #####  ###### #  ### #
 #    # #    # #    # #      #      #    # #    # #
 #    #  ####  #    # ###### #      #    #  ####  ######
*/

.coupdecoeur{
  background-color: #263339;
}
/* Classic met un padding-top sur #wrapper (pense pour les pages sans bandeau
   plein largeur juste en dessous) : sur la home, .coupdecoeur est le premier
   element de #wrapper et herite de cet espace, creant un blanc indesirable
   entre le menu/slider et le bandeau sombre. On le retire uniquement sur la home. */
body#index #wrapper{
  padding-top:0;
}
/* Espace entre le bandeau "coups de coeur" et la grille de categories
   (module pscom_listcategories, greffe juste apres sur displayHome). */
#pscomlistcategories{
  margin-top:2rem;
}
.coupdecoeur .featured-products .products-section-title{
  text-align: left;
  margin: 0 .625rem;
  color:#d1d648;
  padding:15px 0;
  font-weight:300;
  font-size:40px;
}
.coupdecoeur .featured-products .products-section-title .big-title{
  font-weight:800;
}
.coupdecoeur .featured-products .all-product-link{
  color:#fff;
}
.coupdecoeur .small-title{
  display:block;
  color:#fff;
  font-weight: 300;
  font-size:22px;
}

.inspirations{
  background-color:#d1d648;
  padding-top:20px;
  padding-bottom:35px;
}
.inspirations .projet-section-title{
  color:#263339;
  text-align: left;
  margin: 0 .625rem;
  padding:15px 0;
  font-weight:300;
  font-size:40px;
}
.inspirations .projet-section-title .big-title{
  font-weight:800;
}
.inspirations .small-title{
  display:block;
  color:#fff;
  font-weight: 300;
  font-size:22px;
}

.inspirations .projet{
  width:350px;
  height:350px;
  margin: 0 .625rem;
  float:left;
  display:flex;
  position:relative;
  margin-bottom:1rem;
}
.inspirations .projet .hidden-bg{
  opacity:0;top:0;bottom:0;left:0;right:0;
  transition:0.3s all;
  position:absolute;
  background-color:#263339;
  z-index:1;
}
.inspirations .projet:hover .hidden-bg{
  opacity:0.7;
}
.inspirations .projet-content{
  margin:auto;
  text-align:center;
  z-index:2;
}
.inspirations .projet-title{
  padding:10px 15px;
  background-color:#fff;
  color:#263339;
  text-align: center;
  display:inline-block;
  width:80%;
  margin-bottom:0;
}
.inspirations .p1{
  background-image:url('../img/projet1.jpg');
}
.inspirations .p2{
  background-image:url('../img/projet2.jpg');
}
.inspirations .p3{
  background-image:url('../img/projet3.jpg');
}

#custom-text{
  border-radius: none;
  padding:0;
  margin-bottom:0;
}



 /*
   ####   ####  #    # ##### ###### #    # #    #
  #    # #    # ##   #   #   #      ##   # #    #
  #      #    # # #  #   #   #####  # #  # #    #
  #      #    # #  # #   #   #      #  # # #    #
  #    # #    # #   ##   #   #      #   ## #    #
   ####   ####  #    #   #   ###### #    #  ####
 */

 /*
  ####    ##   ##### ######  ####   ####  #####  #   #
 #    #  #  #    #   #      #    # #    # #    #  # #
 #      #    #   #   #####  #      #    # #    #   #
 #      ######   #   #      #  ### #    # #####    #
 #    # #    #   #   #      #    # #    # #   #    #
  ####  #    #   #   ######  ####   ####  #    #   #
 */

 .block-category .category-cover img{
   display:none;
   visibility: hidden;
 }

 /*
  ####  #    # #####   ####    ##   ##### ######  ####   ####  #####  #   #
 #      #    # #    # #    #  #  #    #   #      #    # #    # #    #  # #
  ####  #    # #####  #      #    #   #   #####  #      #    # #    #   #
      # #    # #    # #      ######   #   #      #  ### #    # #####    #
 #    # #    # #    # #    # #    #   #   #      #    # #    # #   #    #
  ####   ####  #####   ####  #    #   #   ######  ####   ####  #    #   #
 */

/*
 #####  #####   ####  #####  #    # # #####  ####
 #    # #    # #    # #    # #    # #   #   #
 #    # #    # #    # #    # #    # #   #    ####
 #####  #####  #    # #    # #    # #   #        #
 #      #   #  #    # #    # #    # #   #   #    #
 #      #    #  ####  #####   ####  #   #    ####
 */

/*
  PrestaShop 8 rend la vignette produit en flux (thumbnail-container en
  height:auto, product-description en position:relative), la ou PS 1.7.0 la
  positionnait en absolu avec des largeurs fixes de 255/257px.
  Les regles ci-dessous reprennent le visuel de la maquette sans figer de taille.
*/

.product-miniature .thumbnail-container{
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.product-miniature .product-description{
  position:static;
  padding:0;
  background:transparent;
}
/* filet gris ajoute par le theme parent au-dessus de la description */
.product-miniature .product-description::after{
  display:none;
}

/* bandeau vert du nom de produit */
.product-miniature .product-title{
  margin:0;
  padding:15px 10px;
  text-align:left;
  background:var(--vert);
}
.product-miniature .product-title a{
  color:#fff;
  text-align:left;
  text-transform:uppercase;
}

/* etiquette jaune du prix */
.product-miniature .product-price-and-shipping{
  display:inline-block;
  padding:5px 10px;
  color:#fff;
  text-align:left;
  background:var(--jaune);
}
.product-miniature .regular-price{
  color:#fff;
}

/* survol (ajout au panier / apercu rapide) masque : absent de la maquette */
.product-miniature .highlighted-informations{
  display:none !important;
}



 /*
 #####  #####   ####  #####  #    # # #####
 #    # #    # #    # #    # #    # #   #
 #    # #    # #    # #    # #    # #   #
 #####  #####  #    # #    # #    # #   #
 #      #   #  #    # #    # #    # #   #
 #      #    #  ####  #####   ####  #   #
 */

.image-legend{
  font-style:italic;
  font-size:0.8em;
  text-align: center;
}

/*

 ##### #    # #    # #    # ###### #
   #   #    # ##   # ##   # #      #
   #   #    # # #  # # #  # #####  #
   #   #    # #  # # #  # # #      #
   #   #    # #   ## #   ## #      #
   #    ####  #    # #    # ###### ######
*/

body#checkout section.checkout-step .payment-options .payplug-payment-option label{
  display: inline-block;
}

 /*
  ######  ####   ####  ##### ###### #####
  #      #    # #    #   #   #      #    #
  #####  #    # #    #   #   #####  #    #
  #      #    # #    #   #   #      #####
  #      #    # #    #   #   #      #   #
  #       ####   ####    #   ###### #    #
 */

#footer{
  /* background:#4bb07a; */
  padding-top:0;
}
.block_newsletter p{
  color:#fff;
}
.block_newsletter .psgdpr_consent_message{
  color:#263339;
}
.footer-container{
  background:#263339;
}
.footer-container h3,
.footer-container .h3,
#block_myaccount_infos .myaccount-title a,
.block-contact .block-contact-title,
.linklist .blockcms-title a{
  color:#fff;
}
.footer-container li a,
.footer-container a{
  color:#fff;
}
.footer-container .block-contact{
  color:#fff;
}

 /*
   ##   #####    ##   #####  #####   ##   ##### #  ####  #    #  ####
  #  #  #    #  #  #  #    #   #    #  #    #   # #    # ##   # #
 #    # #    # #    # #    #   #   #    #   #   # #    # # #  #  ####
 ###### #    # ###### #####    #   ######   #   # #    # #  # #      #
 #    # #    # #    # #        #   #    #   #   # #    # #   ## #    #
 #    # #####  #    # #        #   #    #   #   #  ####  #    #  ####

 Regles qui remplacent des surcharges de templates supprimees lors du passage
 en theme enfant : plutot que de figer le HTML de PrestaShop 1.7.0, on ne
 redefinit ici que ce qui change visuellement.
*/

/* Slider : greffe sur displayNavFullWidth, il sort du .container et occupe
   donc toute la largeur, comme sur la maquette. */
#carousel,
#carousel .carousel-inner,
#carousel .carousel-item img{
  width:100%;
  max-width:100%;
}
#carousel .carousel-item img{
  height:auto;
  object-fit:cover;
}
.carousel .carousel-item figure{
  width:100%;
}
/* Fleches PNG du theme (remplacent les ligatures material-icons). */
.carousel .carousel-control .carousel-arrow{
  width:20px;
  height:auto;
}

/* Largeurs des colonnes du pied de page.
   Remplace les surcharges de ps_linklist.tpl (col-md-6 -> 4),
   ps_contactinfo.tpl (col-md-3 -> 4) et ps_customeraccountlinks.tpl
   (col-md-3 -> 2), qui n'existent plus en tant que templates. */
@media (min-width: 768px) {
  .footer-container .linklist.links{
    flex:0 0 33.333333%;
    max-width:33.333333%;
  }
  .footer-container .block-contact.links{
    flex:0 0 33.333333%;
    max-width:33.333333%;
  }
  .footer-container #block_myaccount_infos.links{
    flex:0 0 16.666667%;
    max-width:16.666667%;
  }
}

/* Masquages mobile portes auparavant par des classes hidden-sm-down
   ajoutees dans breadcrumb.tpl et category.tpl. */
@media (max-width: 767px) {
  #wrapper .breadcrumb{
    display:none;
  }
  .block-category{
    display:none;
  }
}

/* Bandeau de reassurance (blockreassurance), greffe en back-office sur le
   hook "Avant le pied de page" (displayFooterBefore) a la place de la
   newsletter, pour matcher la maquette : 3 icones en ligne, fond vert,
   pleine largeur, juste au-dessus du footer sombre.
   Le style par defaut de #block-reassurance (liste verticale bordee) est
   pense pour la colonne panier : on le reecrit entierement ici. */
#block-reassurance{
  background:var(--vert);
  margin-top:0;
  /* sort du .container parent pour occuper toute la largeur du viewport */
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
#block-reassurance ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  max-width:1140px;
  margin:0 auto;
}
#block-reassurance li{
  border-bottom:none;
  flex:1 1 auto;
  text-align:center;
}
#block-reassurance li .block-reassurance-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.625rem;
  padding:1rem 1.5rem;
}
#block-reassurance img{
  width:1.875rem;
  margin-right:0;
  filter:brightness(0) invert(1);
}
#block-reassurance span{
  color:#fff;
  text-transform:uppercase;
  font-size:.8125rem;
}
@media (max-width: 767px) {
  #block-reassurance ul{
    flex-direction:column;
  }
}

 /*
  #####  ######  ####  #####   ####  #    #  ####  # #    # ######
  #    # #      #      #    # #    # ##   # #      # #    # #
  #    # #####   ####  #    # #    # # #  #  ####  # #    # #####
  #####  #           # #####  #    # #  # #      # # #    # #
  #   #  #      #    # #      #    # #   ## #    # #  #  #  #
  #    # ######  ####  #       ####  #    #  ####  #   ##   ######
 */

 /* Small devices (landscape phones, 576px and up) */
 @media (min-width: 576px) {

 }

 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
   .header-top #_desktop_cart{
     position: absolute;
     right: 15px;
     bottom: 0;
     background-color:#4bb07a;
     padding:10px 15px;
     font-weight:bold;
     color:#fff;
   }
   .header-top #_desktop_cart i{
     color: var(--bleu);
   }
   .carousel .carousel-item .caption{
     top: calc(50% - 156px/2);
     left: calc(50% - 724px/2);
     width: 724px;
     height: 156px;
     text-align: center;
     max-width: 100%;
   }
   #header .dropdown-item.dropdown-submenu{
     color:#d1d648;
   }
   #header .dropdown-item.dropdown-submenu:hover,
   #header .current .dropdown-item.dropdown-submenu,
   #header .dropdown-item.dropdown-submenu.active{
     color:#4bb07a;
     background:none;
   }
   #header .menu-full-width a:hover,
   #header .menu-full-width .current > a{
     color:#4bb07a;
   }
   #header .dropdown-item.active{
     background:#263339;
   }
 }

 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) {

 }

 /* Extra large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {

 }