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


/* page catégorie produit */

/*
div#js-product-list-header {
	width : 800px;
	height:124px;
}
 
 div.block-category.card.card-block {
	 
	 width : 800px;
	height:80px ;
	min-height:80px;
 
 }
*/


p.retour-liste  a {
	
color: #1c467b;
	font-size: 108%;
}


.product-information .manufacturer-logo {
    height: 30%;
	border: none;
	width: 30%;
	padding: 0px;
    margin: 0px;
	padding-bottom: 0.85rem;
}

div.product-information div.tabs ul.nav.nav-tabs li.nav-item a.nav-link.active.js-product-nav-active {
	padding-left: 3px;
}

/*
div.product article.product-miniature.js-product-miniature {
	width:250px;
	height: 300px
}
*/


article.product-miniature.js-product-miniature div.thumbnail-container.reviews-loaded {
	width : 280px;
	height : 341px;
}

.col-md-4 {
	width:90%
}


article.product-miniature.js-product-miniature {
	width : 232px;
	height: 356px;
	
}


div.product article.product-miniature.js-product-miniature div.thumbnail-container.reviews-loaded div.highlighted-informations.no-variants.hidden-sm-down {
	visibility : hidden;
}

div.product article.product-miniature.js-product-miniature div.thumbnail-container.reviews-loaded a.thumbnail.product-thumbnail{
	position: relative;
	height: calc(100% - 90px);
}

div.products.row div.product article.product-miniature.js-product-miniature div.thumbnail-container.reviews-loaded {
	height : 340px !important;
}

 div.product article.product-miniature.js-product-miniature div.thumbnail-container.reviews-loaded div.product-description {
	 margin-top:-18px
 }
 
 
 
 html body#product div.products div.product article.product-miniature.js-product-miniature {
	 width : 264px;
 }

/* espacement vertical dans la liste des produits */
.products.row .product, #products .product {
	padding-bottom: 78px;
 }
/* espacement horizontal dans la liste des produits  */
 .products.row .product, #products .product {	
	width: fit-content;
	padding-right: 17px !important;


 }

 .products .product {	 
	 padding-bottom: 87px;
	 height: 430px;
 }

/* hauteur des miniatures produits  dans accueil */
body#index div.products.row .thumbnail-container {
	height: 380px;}


 /* hauteur des miniatures produits  dans page catégorie */
 #products .product .thumbnail-container {
	 height: 380px;
 }

/* hautuer des miniatures dans produits autres catégories */
#product article.product-miniature.js-product-miniature div.thumbnail-container {
	height: 380px;
}








/* ajuster la hauteur pour que toutes les miniatures soient de la même taille */
/* dans les pages catégories */
 .products.row .product-description, #products .product-description {
	height: 151px;
 }
 /* affichage du stock */
 #products div.product_min_stock, .products.row div.product_min_stock, .row.product-container .product_min_stock {
	color: #8a8a8a;
	font-size: 68%;
	font-style: italic;
	margin-top: 6px;
 }	

/* ajuster le placement de la description dans les miniatures liste de index (page d'accueil) */
/* sinon, le texte est trop bas */
/* pour qu'on voit les boutons */
.product-miniature .product-description {
	 margin-top: -82px;
 }



div.product-description div.product-title span.price {
	color: #686868;
	font-size: 70%;
	font-style: italic;
}

/* Afficher pleine largeur même si pas de colonne de gauche liste produit
*  dans catégorie
*/
div#content-wrapper.js-content-wrapper {
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
}


/* Menu multipanier */

.cart-switcher a.active {
    border: 2px solid #0056b3; /* Exemple : bordure bleue plus foncée */
    background-color: #004085; /* Exemple : bleu plus foncé */
    color: #fff;
}

.cart-switcher {
    text-align: left;
    display: flex; /* Utilisation de flexbox pour aligner les éléments sur une seule ligne */
    gap: 10px; /* Espacement entre les boutons */
    flex-wrap: nowrap; /* Empêche les éléments de passer à la ligne */

}
/* il faut un id pour le menu multipanier, pour avoir la priorité sur le css de base */
#multipanier_menu a{
	color:#fff;

}
.cart-switcher a {
    white-space: nowrap; /* Empêche les textes longs de se couper sur plusieurs lignes */
    padding: 8px 12px; /* Espacement interne similaire au panier de base */
    border: 1px solid #24b9d7; /* Bordure similaire au panier de base */
    background-color: #24b9d7; /* Couleur de fond similaire au panier de base */
    color: #fff; /* Couleur du texte */
    text-decoration: none; /* Supprime le soulignement */
    border-radius: 4px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Animation pour le survol */
}

.highlight {
    animation: colorFade 0.5s ease;
}

@keyframes colorFade {
    from {
        color: rgb(255, 255, 255); /* Couleur initiale */
    }
    to {
        color: rgb(0, 4, 255); /* Couleur finale */
    }
}
.cart-switcher a:hover {
    background-color: #1a8ca5; /* Couleur de fond légèrement plus foncée */
    color: #fff !important; /* Conserve la couleur de police blanche */
}



/* Heart overlay on product image */
.thumbnail-container { position: relative; }

.favorite-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
}

.favorite-overlay .btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
}

.favorite-overlay .material-icons {
  font-size: 20px;
  line-height: 1;
  color: #d32f2f;
}

.favorite-overlay .btn-icon:hover .material-icons,
.favorite-overlay .btn-icon.active .material-icons {
  color: #e91e63;
}


/* placer les boutons d'action dans liste de produits en bas à gauche de la boite */

/*
.product .product-actions {
	position: absolute;
	bottom: 0px;
	left: 17%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}
	*/

/* placer les boutons d'action dans liste de produits en bas de la boite */
.product .product-actions {
	position: absolute;
	left: 0;                /* collé à gauche */
	bottom: 0;              /* collé en bas */
	width: 100%;            /* prend toute la largeur de la carte produit */
	padding: 0 0px 0px;   /* un peu d’air à gauche/droite/bas */
	box-sizing: border-box;
  }
  
  /* conteneur flex pour les 1 ou 2 boutons */
  .product-actions.mp-actions {
	display: flex;
	flex-wrap: wrap;        /* si 2 boutons trop larges, ils passent à la ligne */
	justify-content: flex-start;
	align-items: center;
	gap: 0.5rem;
  }
  
  /* style des boutons à l’intérieur */
  .product-actions.mp-actions .btn {
	white-space: nowrap;
	margin: 0;
	max-width: 100%;        /* évite tout dépassement du conteneur */
	overflow: hidden;
	text-overflow: ellipsis; /* coupe le texte si trop long */
	font-size: 0.8rem;       /* un peu plus petit pour tenir à deux */
  }

  /* Affichage du stock dans la fiche produit */
  .product-card-stock {
	margin-top: 8px;
	font-size: 90%;
	color: #555;
	font-style: italic;
  }







/* ajouter couleur à 2e bouton ajouter au panier */
.btn-secondary {
	color: #fff;
	background-color: #24b9d7;
	border-color: rgba(0,0,0,0);
}
  .btn-secondary:hover {
	color: #fff;
	background-color: #1d93ab;
	border-color: rgba(0,0,0,0);
}




/***************************************************************************/
/* Fond Noël sur toute la page (body) : petit motif répété sur fond sombre */
/***************************************************************************/


/* pour appliquer un fond : voir aussi multipanier/views/css/preorders.css */

/* Fond Noël sur toute la page (body) : petit motif répété sur fond sombre */

body.xmas-bg {
	/*background-color: #0f0f0f;*/
	background-color: #acacac;
	/*background-image: url('../img/noel_transp_leger1.png');*/
	background-position: top left;
	background-repeat: repeat;
	background-size: 562px, 378px;  /* taille du motif : plus petit */
  }


  /* Voile sombre pour atténuer l'image de fond */
body.xmas-bg::before {
    content: "";
    position: fixed;
    inset: 0;                        /* top:0; right:0; bottom:0; left:0; */
    z-index: -1;                     /* reste derrière le contenu */
    background: rgba(241, 241, 241, 1);  /* voile sur l'image de fond : alléger un peu le fond */
}
  
  /* Eclaircir les blocs de contenu pour la lisibilité */
  body.xmas-bg #wrapper
 {
	background-color: rgba(255, 255, 255, 0.01); /* tranparence presque complète sur le contenu de page, pour permettre de voir nettement l'image de fond qui est dessous */
  }
  body.xmas-bg #header
  {
	 background-color: rgba(255, 255, 255, 0.8); /* léger voile sur le menu */
   }


/* mettre une opacité sur la page produit : description et autres éléments quand il y a une image de fond d'écran */
/* 1e colonne (photo)  */
#content-wrapper .product-container > .col-md-6:nth-of-type(1) {   
	padding: 3px;
}	

/* 2e colonne produit description */
#content-wrapper .product-container > .col-md-6:nth-of-type(2) {
    background-color: rgba(255, 255, 255, 0.7);
	padding: 10px;
	border-radius: 4px;
}	

/* breadcrumb */

section#wrapper div.container nav.breadcrumb.hidden-sm-down li {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 5px;
	border-radius: 4px;
}

/* Autres catégories */

section#wrapper div.container div#content-wrapper.js-content-wrapper section#main section.featured-products.clearfix.mt-3 h2 {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 5px;
	border-radius: 4px;
}




/* appliquer également un border radius aux miniatures produits */

.product .thumbnail-container {	
	padding: 5px;
	border-radius: 4px;
}


div.container div#content-wrapper.js-content-wrapper.left-column.col-xs-12.col-sm-8.col-md-9 section#main div#subcategories.card.card-block h2.subcategory-heading {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 5px;
	border-radius: 4px;
}


section#products div div#js-product-list-top.row.products-selection div.col-sm-12.hidden-md-up.text-sm-center.showing {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 5px;
	margin-top: 10px;
	border-radius: 4px;
}

section#products div div#js-product-list-top.row.products-selection div.col-md-6.hidden-sm-down.total-products {
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 4px;
}

section#main section#products div div#js-product-list nav.pagination div.col-md-4 { 
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 4px;
	margin-bottom: 21px;
}

/* transparence du nom du fabriquant */
#manufacturer div.container div#content-wrapper.js-content-wrapper section#main h1 {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 5px;
	border-radius: 4px;
	margin-bottom: 10px;
}

/* transparence de la description du fabriquant */
#manufacturer section#main div#manufacturer-description {
	background-color: rgba(255, 255, 255, 0.9);
	padding: 10px;
	border-radius: 4px;
	margin-bottom: 20px;
}

/* teste de la description courte produit */
#module-multipanier-preorders div.preorder-manufacturer__title p {
	margin-top: 6px;
}


/* Titre et liste des produits de ... fabriquant quand page fabriquant */
#manufacturer div.container div#content-wrapper.js-content-wrapper section#main h1 {
	background-color: rgba(255, 255, 255, 0.9);
	padding: 5px;
	border-radius: 4px;
	margin-bottom: 10px;
}

/* Fin fond Noël ou image de fond */







/*              Fond pour custom text                      */
/* Il n'apparait pas correctement si avec une image de fon */

#content-wrapper #custom-text {
    position: relative; /* nécessaire pour le pseudo-élément */
    background-color: rgba(255, 255, 255, 1); /* bloc de texte */
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden; /* pour éviter que le pseudo-élément déborde */
}

/* logo valcoop en opacité réduite, en fond */
#content-wrapper #custom-text::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background-image: url('../img/logo_valcoop_v1.jpg');
    background-size: 240px 240px;      /* en petit et répété */
    background-repeat: repeat;
    background-position: center;
    opacity: 0.09;                   /* opacité réduite du logo */
    z-index: 0;
	
}

/* le contenu texte passe au-dessus du logo */
#content-wrapper #custom-text > * {
    position: relative;
    z-index: 1;
}




/* pour affichage smartphone */
section#wrapper section#main div#js-product-list-header {
	background-color: rgb(255, 255, 255);
}


div#content-wrapper.js-content-wrapper section#main div.cart-grid.row div.cart-grid-body.col-xs-12.col-lg-8 {
	background-color: rgba(255, 255, 255);
	padding: 10px;
	border-radius: 4px;
}

section#main div.cart-grid.row div.cart-grid-right.col-xs-12.col-lg-4 {
	background-color: rgba(255, 255, 255);
	padding: 10px;
	border-radius: 4px;
}

section#content.page-content div.ordereditcustomer-block.mt-3 p.small.text-muted.mt-2 {
	background-color: rgba(255, 255, 255);
	padding: 10px;
	border-radius: 4px;
	margin-top: 5px;
}

section#wrapper div.container div#content-wrapper.js-content-wrapper section#main header.page-header h1 {
	background-color: rgba(255, 255, 255,1);
	padding: 5px;
	border-radius: 4px;
	margin-bottom: 10px;
}







/* ajustements pour mobile */
@media (max-width: 767px) {	
	/* ajuster la hauteur du header pour descendre le wrapper */
	#header {
		height:159px;
	}
	/* diminuer la taille des boutons "voir paniers" */
	div.only-mobile-message div.col-md-7.right-nav {
		font-size: 0.8rem;
		/* position: relative;
		left: 25px; */
	}
	
  }

  /* ajustements pour Desktop */
  @media (min-width: 768px) {
	/* sous‑menus du top menu classique */
	#_desktop_top_menu .top-menu .popover,
	#_desktop_top_menu .top-menu .dropdown-menu,
	.top-menu .popover,
	.top-menu .dropdown-menu {
	  margin-top: 50px !important;   /* décale le menu déroulant vers le bas */
	}
  }

  /* affichage quantité au dessus du bouton ajouter au panier */
  #product div.product-add-to-cart.js-product-add-to-cart span.control-label {
	margin-top:13px;
  }