/*
Theme Name: EXPERTLUB
Theme URI: https://expertlub.com
Description: Thème enfant de Storefront pour Expert Lubrifiants. Style épuré et professionnel, palette noir, or et crème. Créé par Anka Production.
Author: Anka Production
Template: storefront
Version: 1.0.0
Text Domain: expertlub
*/

/* ==========================================================================
   1. Variables (palette issue de la bannière)
   ========================================================================== */
:root {
	--el-noir: #111111;
	--el-noir-doux: #1c1c1c;
	--el-or: #b8892b;
	--el-or-clair: #e2b85c;
	--el-creme: #f5eedf;
	--el-blanc: #ffffff;
	--el-texte: #1a1a1a;
	--el-gris: #6b6b6b;
	--el-bordure: #e6dfd0;
	--el-rayon: 4px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body,
button,
input,
select,
textarea {
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	color: var(--el-texte);
}

body {
	background-color: var(--el-blanc);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.widget-title {
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	color: var(--el-noir);
	letter-spacing: -0.01em;
}

a {
	color: var(--el-or);
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--el-noir);
}

/* Fine ligne dorée sous les titres de section */
.entry-title::after,
.woocommerce-products-header__title::after,
.related > h2::after,
.up-sells > h2::after {
	content: '';
	display: block;
	width: 56px;
	height: 2px;
	margin-top: 0.6em;
	background: linear-gradient(90deg, var(--el-or), var(--el-or-clair));
}

/* ==========================================================================
   3. En-tête
   ========================================================================== */
.site-header {
	background-color: var(--el-noir);
	border-bottom: 2px solid var(--el-or);
	padding-top: 1em;
	padding-bottom: 1em;
}

.site-header a,
.site-header .site-title a,
.site-header .site-description,
.main-navigation ul li a,
.site-header-cart .cart-contents {
	color: var(--el-blanc);
}

.site-header a:hover,
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-header-cart .cart-contents:hover {
	color: var(--el-or-clair);
}

.main-navigation ul li a {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.06em;
}

.main-navigation ul ul {
	background-color: var(--el-noir-doux);
}

/* Mini-panier (menu déroulant) : fond clair, texte sombre, bien lisible */
.site-header-cart .widget_shopping_cart,
.site-header-cart .widget_shopping_cart .cart_list,
.site-header-cart .widget_shopping_cart .cart_list li {
	background-color: var(--el-blanc) !important;
	color: var(--el-texte) !important;
}

.site-header-cart .widget_shopping_cart {
	border: 1px solid var(--el-or);
	border-top: 0;
	box-shadow: 0 12px 28px rgba(17, 17, 17, 0.18);
	width: 380px;
	max-width: 90vw;
}

.site-header .site-header-cart .widget_shopping_cart a:not(.button),
.site-header .site-header-cart .widget_shopping_cart .cart_list li a:not(.remove) {
	color: var(--el-noir) !important;
	font-weight: 600;
}

.site-header .site-header-cart .widget_shopping_cart a:not(.button):hover {
	color: var(--el-or) !important;
}

.site-header-cart .widget_shopping_cart .quantity,
.site-header-cart .widget_shopping_cart .total,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message {
	color: var(--el-texte) !important;
}

.site-header-cart .widget_shopping_cart .cart_list li {
	border-bottom: 1px solid var(--el-bordure);
}

.site-header-cart .widget_shopping_cart .buttons,
.site-header-cart .widget_shopping_cart .total {
	background-color: var(--el-creme) !important;
}

.site-header-cart .widget_shopping_cart a.remove {
	color: var(--el-gris) !important;
}

.site-search input[type="search"] {
	background-color: var(--el-blanc);
	border-radius: var(--el-rayon);
	border: 1px solid var(--el-or);
}

/* ==========================================================================
   4. Boutons
   ========================================================================== */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget a.button,
.site-header-cart .widget_shopping_cart a.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
a.button.alt,
button.alt,
input.alt {
	background: var(--el-or);
	color: var(--el-blanc);
	border: 0;
	border-radius: var(--el-rayon);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.9em 1.6em;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.widget a.button:hover,
a.button.alt:hover,
button.alt:hover,
input.alt:hover {
	background: var(--el-noir);
	color: var(--el-or-clair);
}

/* ==========================================================================
   5. Catalogue produits
   ========================================================================== */
ul.products li.product {
	background: var(--el-blanc);
	border: 1px solid var(--el-bordure);
	border-radius: var(--el-rayon);
	padding: 1.2em;
	text-align: center;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

ul.products li.product:hover {
	border-color: var(--el-or);
	box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08);
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-weight: 600;
	color: var(--el-noir);
}

.price,
ul.products li.product .price,
.single-product div.product p.price {
	color: var(--el-or);
	font-weight: 700;
}

.onsale {
	background: var(--el-noir);
	color: var(--el-or-clair);
	border: 0;
	border-radius: var(--el-rayon);
}

/* ==========================================================================
   6. Fils d'Ariane, onglets, notifications
   ========================================================================== */
.storefront-breadcrumb {
	background-color: var(--el-creme);
	border-bottom: 1px solid var(--el-bordure);
}

.woocommerce-message,
.woocommerce-info {
	background-color: var(--el-creme);
	color: var(--el-texte);
	border-top-color: var(--el-or);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--el-or);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--el-noir);
	border-bottom: 2px solid var(--el-or);
}

/* ==========================================================================
   7. Pied de page
   ========================================================================== */
.site-footer {
	background-color: var(--el-noir);
	color: #cfcfcf;
	border-top: 2px solid var(--el-or);
}

.site-footer a:not(.button),
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
	color: var(--el-or-clair);
}

.site-footer a:not(.button):hover {
	color: var(--el-blanc);
}

.site-info {
	color: var(--el-gris);
}

/* Coordonnées dans le pied de page noir */
.expertlub-footer-contact {
	text-align: center;
	padding: 1.2em 0;
	color: #d9d9d9;
}

.expertlub-footer-contact p {
	margin: 0 0 0.5em;
}

.expertlub-footer-contact .expertlub-footer-brand strong {
	color: var(--el-blanc);
}

.site-footer .expertlub-footer-contact,
.site-footer .expertlub-footer-contact a:not(.button),
.site-footer .expertlub-footer-details span:not(.expertlub-footer-sep) {
	color: #ffffff !important;
	text-decoration: none;
}

.site-footer .expertlub-footer-contact a:not(.button):hover {
	color: var(--el-or-clair) !important;
}

.expertlub-footer-sep {
	margin: 0 0.6em;
	color: var(--el-or);
}

@media (max-width: 767px) {
	/* Sur mobile : une info par ligne, sans séparateur */
	.expertlub-footer-details a,
	.expertlub-footer-details span:not(.expertlub-footer-sep) {
		display: block;
		margin-bottom: 0.3em;
	}

	.expertlub-footer-sep {
		display: none;
	}
}

/* La page de connexion n'a pas de pied de page */
.expertlub-login-page .site-footer {
	display: none !important;
}

/* ==========================================================================
   8. Page de connexion (accueil) et page de recherche
   Mobile d'abord : la mise en page s'adapte à tous les écrans.
   ========================================================================== */
.expertlub-login-page .storefront-breadcrumb,
.expertlub-search-page .storefront-breadcrumb,
.expertlub-login-page .main-navigation,
.expertlub-login-page .site-search,
.expertlub-login-page .site-header-cart,
.expertlub-login-page .storefront-handheld-footer-bar,
.expertlub-login-page .menu-toggle {
	display: none !important;
}

.expertlub-login-page .site-header .site-branding {
	float: none;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.expertlub-login-page .content-area,
.expertlub-search-page .content-area {
	width: 100%;
	float: none;
	margin: 0;
}

.expertlub-login-wrap,
.expertlub-search-wrap {
	display: flex;
	justify-content: center;
	padding: 2.5em 1em;
	background: var(--el-blanc);
	min-height: 60vh;
}

.expertlub-login-wrap .site-main,
.expertlub-search-wrap .site-main {
	width: 100%;
	margin: 0;
}

.expertlub-login-card,
.expertlub-search-card {
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	padding: 2em 1.5em;
	background: var(--el-blanc);
	border: 1px solid var(--el-bordure);
	border-top: 3px solid var(--el-or);
	border-radius: var(--el-rayon);
	box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
	box-sizing: border-box;
}

.expertlub-search-card {
	max-width: 820px;
}

.expertlub-login-logo {
	text-align: center;
	margin-bottom: 1em;
}

.expertlub-login-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.expertlub-login-logo a,
.expertlub-login-logo .custom-logo-link {
	display: flex;
	justify-content: center;
	width: 100%;
}

.expertlub-login-logo img {
	display: block;
	margin: 0 auto;
	float: none;
	max-height: 140px;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* Page de connexion : pas d'en-tête (le logo est dans la carte), pied de page discret */
.expertlub-login-page .site-header,
.expertlub-login-page .expertlub-footer-contact {
	display: none !important;
}

.expertlub-login-page .expertlub-login-wrap {
	min-height: 100vh;
	align-items: center;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

.expertlub-login-brand {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 1.6em;
	color: var(--el-noir);
}

.expertlub-login-brand em {
	color: var(--el-or);
	font-style: italic;
}

.expertlub-login-title,
.expertlub-search-title {
	text-align: center;
	font-size: 1.6em;
	margin: 0 0 0.3em;
}

.expertlub-login-sub {
	text-align: center;
	color: var(--el-gris);
	font-size: 0.9em;
	margin-bottom: 1.6em;
}

.expertlub-login-form label,
.expertlub-search-card label {
	display: block;
	font-weight: 600;
	font-size: 0.85em;
	margin-bottom: 0.4em;
}

.expertlub-login-form input[type="text"],
.expertlub-login-form input[type="password"],
.expertlub-search-form input[type="search"],
.expertlub-cat-select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.9em 1em;
	font-size: 16px; /* évite le zoom automatique sur iPhone */
	background: var(--el-blanc);
	border: 1px solid var(--el-bordure);
	border-radius: var(--el-rayon);
}

.expertlub-login-form input:focus,
.expertlub-search-form input:focus,
.expertlub-cat-select:focus {
	outline: none;
	border-color: var(--el-or);
	box-shadow: 0 0 0 3px rgba(184, 137, 43, 0.2);
}

.expertlub-remember label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
}

.expertlub-login-submit,
.expertlub-search-row button {
	width: 100%;
	cursor: pointer;
}

.expertlub-login-lost {
	text-align: center;
	font-size: 0.9em;
	margin: 1.4em 0 0;
	padding-top: 1.2em;
	border-top: 1px solid var(--el-bordure);
	color: var(--el-gris);
}

.expertlub-login-lost a {
	display: block;
	margin-top: 0.3em;
	font-weight: 600;
	color: var(--el-or);
	text-decoration: underline;
}

.expertlub-login-lost a:hover {
	color: var(--el-noir);
}

.expertlub-login-links,
.expertlub-search-account {
	text-align: center;
	font-size: 0.85em;
	margin: 1.2em 0 0;
}

.expertlub-search-hello {
	text-align: center;
	color: var(--el-gris);
	margin-bottom: 0.2em;
}

.expertlub-search-row {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
}

.expertlub-search-cat {
	margin-top: 0.8em;
}

.expertlub-quick-cats {
	margin-top: 1.8em;
	padding-top: 1.2em;
	border-top: 1px solid var(--el-bordure);
}

.expertlub-quick-cats p {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--el-gris);
	margin-bottom: 0.6em;
}

.expertlub-quick-cats ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.expertlub-quick-cats a {
	display: inline-block;
	padding: 0.45em 0.9em;
	font-size: 0.85em;
	color: var(--el-noir);
	background: var(--el-creme);
	border: 1px solid var(--el-bordure);
	border-radius: 999px;
}

.expertlub-quick-cats a:hover {
	background: var(--el-noir);
	border-color: var(--el-noir);
	color: var(--el-or-clair);
}

/* Pas de produits similaires ni de ventes incitatives (sécurité en plus du code PHP) */
.related.products,
.upsells.products {
	display: none !important;
}

/* Aucune barre latérale ni zone de widgets : pleine largeur partout */
#secondary,
.widget-area,
.footer-widgets,
.site-footer .widget {
	display: none !important;
}

/* Filet de sécurité : les widgets par défaut de WordPress (Recherche,
   Articles récents, Commentaires, Archives, Catégories) ne doivent
   apparaître nulle part sur le site, y compris dans la barre latérale
   propre à Fluid Checkout. */
.widget_search,
.widget_recent_entries,
.widget_recent_comments,
.widget_archive,
.widget_categories,
.widget_meta,
.widget_pages,
.widget_calendar,
.widget_rss {
	display: none !important;
}

.content-area {
	width: 100%;
	float: none;
	margin-right: 0;
}

/* Suggestions en direct */
.expertlub-suggest-wrap {
	position: relative;
	flex: 1;
}

.expertlub-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 50;
	margin: 0;
	padding: 0.3em 0;
	list-style: none;
	background: var(--el-blanc);
	border: 1px solid var(--el-or);
	border-radius: var(--el-rayon);
	box-shadow: 0 12px 28px rgba(17, 17, 17, 0.15);
	max-height: 60vh;
	overflow-y: auto;
}

.expertlub-suggest[hidden] {
	display: none;
}

.expertlub-suggest li a {
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding: 0.6em 0.9em;
	color: var(--el-texte);
	text-decoration: none;
}

.expertlub-suggest li.is-active a,
.expertlub-suggest li a:hover {
	background: var(--el-creme);
}

.expertlub-suggest img,
.expertlub-suggest-noimg {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: var(--el-creme);
	border-radius: var(--el-rayon);
}

.expertlub-suggest-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.expertlub-suggest-title {
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
}

.expertlub-suggest-title mark {
	background: rgba(226, 184, 92, 0.45);
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
}

.expertlub-suggest-sku {
	font-size: 0.75em;
	color: var(--el-gris);
}

.expertlub-suggest-price {
	font-size: 0.85em;
	font-weight: 700;
	color: var(--el-or);
	white-space: nowrap;
}

.expertlub-suggest-price del {
	display: none;
}

.expertlub-suggest-empty {
	padding: 0.9em 1em;
	color: var(--el-gris);
	font-size: 0.9em;
}

.expertlub-suggest .expertlub-suggest-more a {
	justify-content: center;
	font-weight: 600;
	color: var(--el-or);
	border-top: 1px solid var(--el-bordure);
}

/* Tablette et ordinateur */
@media (min-width: 768px) {
	.expertlub-login-wrap,
	.expertlub-search-wrap {
		padding: 4em 1em;
	}

	.expertlub-login-card,
	.expertlub-search-card {
		padding: 2.6em 2.4em;
	}

	.expertlub-search-row {
		flex-direction: row;
	}

	.expertlub-search-row button {
		width: auto;
		white-space: nowrap;
	}
}