/*
 * catalog-style.css - habillage visuel de la page boutique (R-39, 05/08/2026).
 * Fichier dedie, separe de buttons-pill.css (deja stable, non modifie) :
 * ce fichier ne redefinit AUCUN rayon ni animation de bouton. Les boutons
 * "Ajouter"/"Commander" et "Demander un devis" utilisent les classes natives
 * WooCommerce/B2BKing (.woocommerce button.button, #b2bking_request_custom_quote_button)
 * deja couvertes par buttons-pill.css (rayon 15px) et woocommerce-custom.css
 * (couleurs) - seule la variante "contour" du bouton devis est ajoutee ici,
 * sans toucher au rayon ni au hover existants.
 * Charte : #33889c (turquoise), #f9bf98 (peche), police Lexend Deca.
 */

/* ==========================================================================
   BANDEAU D'EN-TETE BOUTIQUE
   ========================================================================== */

/*
 * MAJ etape 3.2/4 (systeme de disposition + accessibilite, 27/08/2026) :
 * #33889c -> #2e7c8f (texte blanc sur ce fond, contraste 4,08:1 mesure sous
 * le seuil AA 4,5:1 - meme correction que sur les boutons woocommerce-custom.css
 * plus tot cette session, ce bandeau avait ete manque). Espacement aligne sur
 * layout-system.css.
 */
.ecologiclife-shop-banner {
	background-color: #2e7c8f;
	color: #ffffff;
	padding: var(--ecl-space-5, 48px) var(--ecl-space-3, 24px);
	text-align: center;
	margin-bottom: var(--ecl-space-3, 24px);
}

.ecologiclife-shop-banner__title {
	font-family: "Lexend Deca", sans-serif;
	font-size: 2rem;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 var(--ecl-space-1, 8px) 0;
}

.ecologiclife-shop-banner__subtitle {
	font-family: "Lexend Deca", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #ffffff;
	opacity: .92;
	margin: 0;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   BADGES DE CATEGORIE (pilules)
   ========================================================================== */

/*
 * !important requis sur list-style (27/08/2026, audit design) : le theme PARENT
 * Divi impose "#left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul,
 * .et-l--header ul { list-style-type: disc }" (verifie via CSS.getMatchedStylesForNode,
 * origine confirmee = feuille Divi), specificite 1 classe + 1 element qui bat notre
 * regle a 1 classe seule. Jamais touche au parent (regle CLAUDE.md) -> on bat la
 * specificite depuis l'enfant, meme pattern que width:auto!important plus bas
 * dans ce fichier.
 */
.ecologiclife-shop-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0 0 var(--ecl-space-4, 32px) 0;
	padding: 0 16px;
	list-style: none !important;
}

.ecologiclife-shop-categories__item {
	margin: 0;
}

/*
 * Selecteur prefixe par .ecologiclife-shop-categories (2 classes) plutot que
 * .ecologiclife-shop-categories__link seul (1 classe) : specificite requise
 * pour battre la regle existante ".woocommerce a { color: #33889c }"
 * (woocommerce-custom.css, specificite 1 classe + 1 element) qui rendait le
 * texte des badges turquoise invisible (couleur = fond). Trouve par mesure
 * reelle au navigateur, pas suppose.
 *
 * MAJ 27/08/2026 : couleur pilotee par [data-gamme] (pose cote PHP dans
 * functions.php, ecologiclife_shop_category_badges) au lieu d'une alternance
 * nth-child sans signification. "day" reste la couleur par defaut de la
 * regle de base (Papier toilette + Hygiene feminine) ; baby/pro sont des
 * variantes explicites ci-dessous.
 */
/* MAJ etape 4 (accessibilite) : padding vertical remonte + inline-flex
   centre (mesure reelle avant correctif : 165x42px, sous le minimum 44px de
   hauteur ; inline-block seul avec min-height n'aurait pas recentre le
   texte verticalement). */
.ecologiclife-shop-categories .ecologiclife-shop-categories__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Lexend Deca", sans-serif;
	font-weight: 600;
	font-size: .9rem;
	color: #ffffff;
	background-color: #2e7c8f;
	border-radius: 999px;
	padding: 11px 20px;
	min-height: 44px;
	box-sizing: border-box;
	text-decoration: none;
	transition: background-color var(--ecl-t-base) var(--ecl-ease-standard);
}

.ecologiclife-shop-categories .ecologiclife-shop-categories__link[data-gamme="baby"] {
	background-color: #f9bf98;
	color: #6b3f22;
}

.ecologiclife-shop-categories .ecologiclife-shop-categories__link[data-gamme="pro"] {
	background-color: #c5abd3;
	color: #4a2f57;
}

.ecologiclife-shop-categories .ecologiclife-shop-categories__link:hover {
	background-color: #1b555f;
	color: #ffffff;
}

.ecologiclife-shop-categories .ecologiclife-shop-categories__link[data-gamme="baby"]:hover {
	background-color: #e8935f;
	color: #ffffff;
}

.ecologiclife-shop-categories .ecologiclife-shop-categories__link[data-gamme="pro"]:hover {
	background-color: #8a6b9c;
	color: #ffffff;
}

.ecologiclife-shop-categories .ecologiclife-shop-categories__link.is-active {
	box-shadow: inset 0 0 0 2px #1b555f;
}

/* ==========================================================================
   FILTRE PAR TAILLE (widget natif WC_Widget_Layered_Nav, pa_taille)
   MAJ etape 4 (accessibilite, 27/08/2026) : #33889c -> #2e7c8f (texte/bordure
   teal sur fond blanc = 4,08:1, meme defaut de contraste que les boutons
   deja corriges cette session ; hover idem, blanc sur teal).
   ========================================================================== */

.ecologiclife-shop-size-filter {
	text-align: center;
	margin: 0 0 var(--ecl-space-4, 32px) 0;
	padding: 0 16px;
}

.ecologiclife-shop-size-filter .widgettitle {
	font-family: "Lexend Deca", sans-serif;
	font-size: .85rem;
	font-weight: 600;
	color: #1b555f;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 10px 0;
}

.ecologiclife-shop-size-filter ul.woocommerce-widget-layered-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ecologiclife-shop-size-filter ul.woocommerce-widget-layered-nav-list li {
	margin: 0;
}

/* MAJ etape 4 (accessibilite) : mesure reelle avant correctif = 14x30px
   (etiquette courte "M"/"T3"/"T5"), tres sous 44x44px. min-width/min-height
   + inline-flex centre pour un vrai carre/pilule tactile, sans changer le
   texte affiche. */
.ecologiclife-shop-size-filter ul.woocommerce-widget-layered-nav-list li.woocommerce-widget-layered-nav-list__item a {
	/* selecteur renforce (07/09/2026) : woocommerce.css pose ".woocommerce
	   .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a { padding: 1px 0 }"
	   a 3 classes - notre ancien selecteur (2 classes + 3 elements) perdait
	   la bataille de specificite CSS (les classes comptent avant les
	   elements) malgre l'ordre de chargement plus tardif de ce fichier.
	   Repere en comparant le rendu reel (wp-cli + navigateur headless) au
	   mock : le padding calcule etait 1px 0 au lieu de 10px 18px. Meme
	   probleme deja present avant ce correctif (masque par min-width/
	   min-height:44px qui donnait quand meme un cercle a peu pres correct). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Lexend Deca", sans-serif;
	font-size: .95rem;
	font-weight: 600;
	color: #1b555f;
	background-color: #eaf3f5;
	border: 1.5px solid #2e7c8f;
	border-radius: var(--ecl-radius-sm, 12px);
	padding: 10px 18px;
	min-width: 44px;
	min-height: 44px;
	box-sizing: border-box;
	text-decoration: none;
	transition: background-color var(--ecl-t-base) var(--ecl-ease-standard), color var(--ecl-t-base) var(--ecl-ease-standard);
}

.ecologiclife-shop-size-filter ul.woocommerce-widget-layered-nav-list li a:hover {
	background-color: #2e7c8f;
	color: #ffffff;
}

.ecologiclife-shop-size-filter ul.woocommerce-widget-layered-nav-list li.chosen a {
	background-color: #1b555f;
	border-color: #1b555f;
	color: #ffffff;
}

.ecologiclife-shop-size-filter .woocommerce-widget-layered-nav-list__item-count {
	opacity: .7;
	font-size: .8em;
}

/* ==========================================================================
   GRILLE DE CARTES PRODUIT
   ========================================================================== */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--ecl-space-3, 24px);
}

/*
 * Cause racine de la grille 2+3+1 (27/08/2026, audit design) - confirmee par
 * inspection reelle (getComputedStyle) : WooCommerce pose un clearfix herite
 * de l'ancien layout en float sur ce conteneur -
 * "ul.products::before, ul.products::after { content:' '; display:table }".
 * Sous display:grid, CE PSEUDO-ELEMENT DEVIENT UN ITEM DE GRILLE A PART
 * ENTIERE (regle CSS Grid standard : tout enfant en flux, ::before/::after
 * compris, devient item de grille des que le parent passe en display:grid).
 * Il occupe donc la cellule (ligne 1, colonne 1), invisible mais bien la,
 * decalant les 6 vrais produits d'une case (mesure : 2 produits colonnes 2-3,
 * puis 3 produits lignes 2, puis 1 produit ligne 3 - jamais 3+3). Le clearfix
 * ne sert plus a rien sous grid (pas de float a nettoyer) : on neutralise le
 * pseudo-element plutot que de le repositionner.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}

/*
 * width:auto !important necessaire : le CSS de base WooCommerce pose une
 * largeur en % sur chaque carte via un selecteur ".columns-3 ul.products
 * li.product" de meme specificite que celui-ci (3 classes + 2 elements) -
 * mesure reelle au navigateur : sans !important, la largeur restait a
 * 70.6px au lieu de remplir la cellule de la grille (249px), un item de
 * grille avec une largeur explicite ne s'etirant plus automatiquement une
 * fois display:grid applique au parent. Meme necessite/pattern que les
 * !important deja presents dans buttons-pill.css et woocommerce-custom.css
 * pour battre le CSS natif WooCommerce/Divi. float:none pour la coherence,
 * sans effet reel sous grid.
 *
 * MAJ etape 3.2 (systeme de disposition, 27/08/2026) : rayon/padding/ombre
 * alignes sur layout-system.css (memes valeurs que les cartes de gamme de
 * l'accueil, etape 3.1 - un seul langage "carte" reutilise partout). La
 * bordure grise #eaeaea est retiree : cette couleur n'existe pas dans la
 * charte graphique (aucune couleur hors charte autorisee) - l'ombre au repos
 * suffit a delimiter la carte sans bordure, le hover (motion-polish.css)
 * reste inchange.
 */
.woocommerce ul.products li.product {
	width: auto !important;
	float: none;
	background-color: #ffffff;
	border-radius: var(--ecl-radius-lg, 22px);
	box-shadow: var(--ecl-shadow-rest, 0 2px 10px rgba(61, 70, 80, .08));
	padding: var(--ecl-space-2, 16px);
	text-align: center;
	/* Bugfix 08/09/2026 : les colonnes de la grille (auto-fill/1fr) n'ont pas
	   toutes exactement la meme largeur (arrondi CSS mesure : 257px vs 267px
	   selon la position) - l'image en width:100% suit cette variation et
	   decale tout ce qui suit, bouton "Ajouter au panier" compris. Passer la
	   carte en colonne flexible et epingler le bouton en bas (regle suivante)
	   rend l'alignement des boutons independant de cette variation. */
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product img {
	border-radius: var(--ecl-radius-sm, 12px);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
	/* Bugfix 08/09/2026 (suite, correction specificite) : le premier essai
	   ciblait ".product img" (3 classes + 3 elements), mais woocommerce-general.css
	   pose ".woocommerce ul.products li.product a img { height: auto }" (3
	   classes + 4 elements, le "a" en plus car l'image est dans un lien) -
	   plus specifique, donc height:auto gagnait quand meme malgre l'ordre de
	   chargement. Classe reelle du lien ajoutee ici (4 classes + 4 elements)
	   pour battre leur regle de façon certaine, pas juste a egalite d'ordre
	   de chargement (meme lecon que le filtre par taille plus tot) : l'image
	   ne varie plus du tout, largeur de colonne ou pas. */
	height: 225px;
	width: 100%;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: "Lexend Deca", sans-serif;
	font-size: 1rem;
	margin: 12px 0 6px 0;
}

.woocommerce ul.products li.product > a.add_to_cart_button,
.woocommerce ul.products li.product > a.button {
	margin-top: auto;
}

/*
 * MAJ 27/08/2026 : la regle R-43/R-59 ("pas d'animation de survol non
 * demandee") est explicitement levee ICI, sur demande directe et un extrait
 * de code fourni pour cette carte precise - ce n'est pas un oubli de la
 * regle, c'est une decision nouvelle qui la remplace pour .woocommerce ul.products
 * li.product uniquement. Definie dans motion-polish.css (section 4bis) pour
 * rester avec les autres animations, plutot que dupliquee ici.
 */

/* ==========================================================================
   AFFICHAGE PRIX : TTC seul (B2C) vs HT+TTC (B2B)
   Le calcul HT/TTC reste entierement gere par WooCommerce/B2BKing - ces
   classes stylisent uniquement ce qui est rendu, elles ne calculent rien.
   ========================================================================== */

.ecologiclife-price-b2c .price {
	display: block;
	font-size: 1.05rem;
}

.ecologiclife-price-b2b .price {
	display: block;
	font-size: 1.05rem;
	border-left: 3px solid #f9bf98;
	padding-left: 8px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}

/* ==========================================================================
   BOUTON "DEMANDER UN DEVIS" (B2BKing Pro) - variante contour
   Le bouton herite deja du rayon pilule (buttons-pill.css, classe .button)
   et de la transition existante (woocommerce-custom.css) - seules les
   couleurs de fond/bordure sont modifiees ici pour la variante contour,
   aucun nouveau rayon ni nouvelle animation de survol.
   ========================================================================== */

#b2bking_request_custom_quote_button {
	background-color: transparent !important;
	border: 2px solid #2e7c8f !important;
	color: #2e7c8f !important;
}

#b2bking_request_custom_quote_button:hover {
	background-color: #f9bf98 !important;
	border-color: #f9bf98 !important;
	color: #ffffff !important;
}