/* DEBUG */
html::before{
  content:"CUSTOM CSS OK";
}

#wrapper {
background: #ffffff !important;
}


/*===============================
Slider home page
================================= */

.carousel .carousel-item figure {
width: 100% !important;
}


#content .product {
width : 100% :important!;
}

.carousel .carousel-inner {
height: 390px !important;
}

/* ================================
   Produits populaires — Design
   ================================ */

.featured-products {
margin-top: 100px;
    margin-bottom: 100px;
}

#content .featured-products .products-section-title,
#content .featured-products .products-section-title.text-uppercase{
  text-transform: lowercase !important;
}

#content .featured-products .products-section-title::first-letter{
  text-transform: uppercase !important;
}


.product-miniature .product-title a {
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.25;
    text-transform: capitalize;
}

/* Espace gauche/droite de la section — comme la maquette */
#content .featured-products{
  /* un peu d’air sur tous les écrans */
  padding-inline: clamp(16px, 3vw, 40px);
}

#content .featured-products .product{ width:100% !important; }

/* 1) Titre XXL centré */
.featured-products .products-section-title{
  	margin: 0 !important;
    text-align: center;
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 1.1em;
    letter-spacing: -1px;
    padding: 0px 0px 20px 0px;
color: #224955;
}

/* 2) Grille 1→5 colonnes (exact look maquette) */
.featured-products .products{
  display:grid !important;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:18px;
  justify-items:stretch;
  align-items:stretch;
}
@media (min-width:576px){  .featured-products .products{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){  .featured-products .products{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .featured-products .products{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1400px){ .featured-products .products{ grid-template-columns:repeat(5,1fr); } }

/* 3) Neutraliser la grille bootstrap interne et ses paddings */
.featured-products .product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* 4) Carte produit (fine, arrondie, ombre légère) */
.featured-products .product .thumbnail-container{
  position: relative;
    margin: 0 0 20px 0;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    box-shadow: none;
  padding:0 0 16px;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.featured-products .product .thumbnail-container:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* 5) Zone image sans espace interne (corrige les bandes rouges) */
.featured-products .product .thumbnail-top{
  background:#fff !important;
  height:273px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0 !important;
  margin:0 !important;
}
.featured-products .product .product-thumbnail{
  display:block !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
}
.featured-products .product .product-thumbnail picture{
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
}
.featured-products .product .thumbnail-top img{
  display:block !important;
  width:100% !important;
  object-fit:contain !important;   /* mettre "cover" si tu veux bord à bord */
  object-position:center !important;
}

/* 6) Titre & prix (typo/couleurs de la maquette) */
.featured-products .product .product-title{
margin-top: 8px;
    margin-bottom: 5px;
  color:#214955;
}
.featured-products .product .product-title a{ color:inherit; }

.featured-products .product .product-price-and-shipping{
  font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    margin: 10px 0 10px 0;
}

/* 7) Avis (discrets) */
.featured-products .product .product-list-reviews{
  margin:10px 16px 0;
  display:flex; justify-content:flex-start;
}
.featured-products .grade-stars .star-on,
.featured-products .small-stars .star-on{ color:#f5a623; }
.featured-products .grade-stars .star,
.featured-products .small-stars .star{ color:#c9ced6; }

/* 8) Masquer les éléments non présents sur la maquette */
.featured-products .quick-view,
.featured-products .wishlist-button-add,
.featured-products .product-flags,
.featured-products .variant-links{ display:none !important; }

/* 9) Lien “Tous les produits” */
.featured-products .all-product-link{
  display:block;
  text-align:center;
  margin-top:28px;
  font-weight:600;
}

.product-miniature .product-description {
background: transparent !important;
}

/*=====================
Mege menu pro
======================*/
.ets_mm_megamenu .mm_blocks_ul {
display: flex !important;
}

/*******************************
Newsletter
*******************************/
/* Fond dégradé pleine largeur */
.block_newsletter{
    max-width: 925px !important;
  width:100%;
  padding:48px 16px;
  background: transparent !important;
}

/* Contenu centré et largeur max */
.zk-news-wrap{max-width:1120px;margin:0 auto}

/* Masquer accessoirement le label visuel mais garder l’accessibilité */
.zk-sronly{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Groupe input + bouton collés */
.zk-news-group{
  display:flex; align-items:stretch;
  border-radius:5px; overflow:hidden;
  background: rgba(255,255,255,0.16);
}

/* Champ e-mail */
.zk-news-input{
  flex:1; height:65px !important; border:0; outline:none;
  padding:0px 22px; font-size:18px; color:#fff;
  background: transparent;
  border: none !important;
}
.zk-news-input::placeholder{color:rgba(255,255,255,.7)}

/* Bouton vert à droite */
.zk-news-btn{
  height:65px !important; padding:0 28px; border:0; cursor:pointer;
  background:#4ab04c !important; color:#fff; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  position:static !important;
  color : #fff !important;
}
.zk-news-btn:hover{background:#4aad50}

/* Texte d’information dessous */
.zk-news-note{
  margin:16px auto 0; text-align:center; color:#fff; opacity:.9;
  line-height:1.6;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Messages */
.zk-news-alert{margin-top:12px}

/* Responsive */
@media (max-width: 680px){
  .zk-news-input{height:56px}
  .zk-news-btn{height:56px;padding:0 20px}
}

/********************
Footer
********************/

#footer {
  background: linear-gradient(180deg, #0a734e 0%, #083e40 100%);
}

.footer-container li a {
color: #fff !important;
}
.footer-container .h3,
.footer-container .h4 {
color: #fff !important;
font-size: 12px !important;
}

.footer-container a{
color: #fff !important;
font-size: 12px !important;
}

#block_myaccount_infos a {
color: #fff;
}
#footer_account_list li {
color: #fff;
}
#contact-infos {
color: #fff !important;
}

.block-social ul li {
background-color: #224955 !important;
}

/******************
search bloc
*******************/

/* ======= Search bar (header) ======= */
#search_widget{width:100%; display:flex; justify-content:flex-end; }
#search_widget form{
width:480px; 
  display:flex; align-items:center; gap:12px;
  background:#F5F9FA;           /* fond gris très clair */
  border-radius:6px;
  padding:12px 16px;
  width:480px; max-width:100%;
  position:relative;
}

/* icône loupe à gauche */
#search_widget .material-icons.search{
  font-size:24px; line-height:1; color:#1f3b3a; pointer-events:none;
}

/* input “Rechercher” */
#search_widget input[type="text"]{
  flex:1; min-width:0;
  border:0; outline:0; background:transparent;
  font-size:16px; line-height:1.2;
  padding:0 28px 0 0;          /* espace pour le X à droite */
  box-shadow:none;
}
#search_widget input::placeholder{ color:#8698a2; opacity:1; }

/* bouton X (clear) à droite, caché tant que l'input est vide */
#search_widget .material-icons.clear{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:22px; cursor:pointer;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
#search_widget input:not(:placeholder-shown) ~ .clear{
  opacity:.6; pointer-events:auto;
}
#search_widget .material-icons.clear:hover{ opacity:1; }

/* responsive */
@media (max-width:768px){
  #search_widget form{ width:100%; }
}