/*
Theme Name:   Juhee Cosmétique
Theme URI:    https://juheccosmetic.com
Description:  Thème enfant Astra pour Juhee Cosmétique — soins capillaires, marché sénégalais. Mobile-first.
Author:       Juhee Cosmétique
Template:     astra
Version:      2.3.0
Text Domain:  juhec-child
*/

/* ============================================================
   PALETTE — famille violette, éclaircie en 1.9.0
   Le violet d'origine, échantillonné dans le logo (#593286), était
   juste mais austère. La marque passe sur #7A52C7 : même teinte
   (HSL 260°), plus lumineuse, et toujours 5,4:1 sur blanc — donc
   le texte blanc des boutons reste lisible, y compris en plein
   soleil sur un téléphone.

   Les trois violets forment une famille, pas trois couleurs :
   même teinte à 260°, seules la clarté et la saturation varient.
   #BDA0F2 est la nuance claire : réservée aux bordures et aux
   fonds doux. Ne jamais poser de texte blanc dessus — 2,2:1.

   Ces variables documentent le système. Les mêmes valeurs sont à
   saisir dans la Palette Globale Astra (Personnaliser > Couleurs
   globales), qui reste la source unique côté back-office.
   ============================================================ */
:root {
	--juhec-violet:       #7A52C7; /* primaire : boutons, liens, en-têtes — 5,4:1 sur blanc */
	--juhec-violet-fonce: #5E3BA0; /* survol, état actif — 8,0:1 sur blanc */
	--juhec-violet-clair: #BDA0F2; /* secondaire : bordures et fonds doux, jamais de texte blanc */
	--juhec-lavande:      #F5F0F9; /* fonds de section */
	--juhec-lavande-2:    #EFE8F6; /* fond alterné */
	--juhec-or:           #C9A24D; /* accent : fonds de badge, liserés — jamais du texte sur clair */
	--juhec-or-fonce:     #7A601C; /* la même famille, pour du texte : 5,3:1 sur la lavande */
	--juhec-promo:        #B82E5C; /* prix barrés, promotions */
	--juhec-encre:        #261F2E; /* texte principal */
	--juhec-gris:         #72677E; /* texte secondaire */
	--juhec-bordure:      #E5DEED;
	--juhec-bordure-2:    #D9CFE6;
	--juhec-blanc:        #FFFFFF;
}

/* Les styles personnalisés légers vont ici.
   Règle : on privilégie les réglages globaux Astra/Elementor ;
   on n'écrit du CSS ici que pour ce qui n'est pas faisable via l'UI. */

/* ============================================================
   1. BARRE MOBILE FIXE EN BAS (Accueil / Boutique / Panier / Compte)
   Affichée seulement <= 921px (mobile/tablette).
   ============================================================ */
.juhec-mobile-bar { display: none; }

@media (max-width: 921px) {
	.juhec-mobile-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #ffffff;
		border-top: 1px solid #E5DEED;
		box-shadow: 0 -2px 10px rgba(28, 28, 28, 0.06);
		padding: 6px 0 max(6px, env(safe-area-inset-bottom));
	}
	.juhec-mb-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 4px 0;
		color: #261F2E;
		text-decoration: none;
		font-size: 11px;
		line-height: 1;
		position: relative;
	}
	.juhec-mb-item span { font-weight: 400; }
	.juhec-mb-item.is-active { color: #7A52C7; }
	.juhec-mb-item.is-active span { font-weight: 500; }
	.juhec-mb-badge {
		position: absolute;
		top: -3px;
		right: 50%;
		transform: translateX(16px);
		background: #C9A24D;
		color: #fff;
		font-size: 10px;
		font-weight: 500;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
		text-align: center;
		border-radius: 8px;
		padding: 0 4px;
	}
	/* On dégage la place pour la barre (évite que le contenu soit caché). */
	body { padding-bottom: 64px; }
}

/* ============================================================
   1a. BARRE D'ANNONCE + RECHERCHE (haut du site)
   ============================================================ */
.juhec-topbar { background: #7A52C7; }
.juhec-topbar-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 20px;
}
.juhec-ship { color: #FFFFFF; line-height: 1.25; flex-shrink: 0; }
.juhec-ship strong { display: block; font-size: 13px; font-weight: 500; letter-spacing: .3px; }
.juhec-ship span { font-size: 11px; color: rgba(255, 255, 255, 0.78); font-weight: 400; }
.juhec-search {
	flex: 1;
	display: flex;
	background: #fff;
	border-radius: 30px;
	overflow: hidden;
	height: 40px;
	max-width: 520px;
	margin-left: auto;
}
.juhec-search input[type="search"] {
	flex: 1;
	border: 0;
	outline: 0;
	padding: 0 18px;
	font-size: 14px;
	background: transparent;
	color: #2E2836;
}
.juhec-search button {
	border: 0;
	flex: 0 0 48px;
	width: 48px;
	min-width: 48px;
	align-self: stretch;
	cursor: pointer;
	background-color: #261F2E;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F2' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.juhec-search button:hover { background-color: #261F2E; }

/* Icône panier dans la barre du haut (desktop ; sur mobile => barre du bas) */
.juhec-topcart { position: relative; color: #FFFFFF; display: flex; align-items: center; flex-shrink: 0; margin-left: 2px; }
.juhec-topcart-badge {
	position: absolute; top: -6px; right: -8px;
	background: #FFFFFF; color: #7A52C7;
	font-size: 10px; font-weight: 500;
	min-width: 16px; height: 16px; line-height: 16px; text-align: center;
	border-radius: 8px; padding: 0 4px;
}
@media (max-width: 921px) { .juhec-topcart { display: none; } }

/* ============================================================
   1d. HERO (bannière slider) — accueil
   ============================================================ */
.juhec-hero {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	overflow: hidden;
	margin-bottom: 2.5rem;
	background: #F5F0F9;
}
.juhec-hero-track { position: relative; min-height: 440px; }
.juhec-hero-slide {
	position: absolute; inset: 0;
	display: flex; align-items: center;
	padding: 60px max(6vw, 32px);
	background-size: cover; background-position: center; background-repeat: no-repeat;
	opacity: 0; transition: opacity .7s ease; pointer-events: none;
}
.juhec-hero-slide.is-active { opacity: 1; pointer-events: auto; position: relative; }
.juhec-hero-text { max-width: 560px; }
.juhec-hero-eyebrow { text-transform: uppercase; letter-spacing: 3px; font-size: 12px; color: #C9A24D; font-weight: 500; }
.juhec-hero-title { font-family: 'Playfair Display', Georgia, serif; font-size: 44px; line-height: 1.12; color: #261F2E; margin: 10px 0 14px; font-weight: 600; }
.juhec-hero-sub { font-size: 16px; color: #4A4253; margin: 0 0 22px; }
.juhec-hero .juhec-hero-btn, .juhec-hero-btn {
	display: inline-block; background: #7A52C7; color: #FFFFFF;
	text-transform: uppercase; letter-spacing: 1px; font-size: 13px; font-weight: 500;
	padding: 13px 30px; border-radius: 8px; text-decoration: none;
}
.juhec-hero .juhec-hero-btn:hover, .juhec-hero-btn:hover { background: #5E3BA0; color: #FFFFFF; }
.juhec-hero-dots { position: absolute; bottom: 20px; left: max(6vw, 32px); display: flex; gap: 8px; z-index: 2; }
.juhec-hero-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: #E5DEED; cursor: pointer; padding: 0; }
.juhec-hero-dot.is-active { background: #7A52C7; }
@media (max-width: 768px) {
	.juhec-hero-track { min-height: 420px; }
	.juhec-hero-slide { text-align: center; justify-content: center; padding: 40px 22px 56px; }
	.juhec-hero-text { max-width: 100%; }
	.juhec-hero-title { font-size: 28px; }
	.juhec-hero-dots { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 921px) {
	.juhec-topbar-inner { flex-wrap: wrap; gap: 10px; padding: 8px 14px; }
	.juhec-ship { width: 100%; text-align: center; }
	.juhec-search { max-width: none; margin-left: 0; height: 38px; }
}

/* ============================================================
   1b. LOGO DE MARQUE (SVG inline dans l'en-tête)
   ============================================================ */
.juhec-logo {
	display: inline-block;
	line-height: 0;
	background: #ffffff;
	padding: 8px 16px;
	border-radius: 10px;
}
.juhec-logo svg { height: 56px; width: auto; max-width: 100%; display: block; }

@media (max-width: 921px) {
	.juhec-logo { padding: 6px 12px; }
	.juhec-logo svg { height: 40px; }
}

/* Réseaux sociaux : on les retire de l'en-tête (ils vont dans le footer). */
.ast-header-social-1-wrap,
.ast-header-social-wrap { display: none !important; }

/* ---- Recherche : icône toujours visible + input propre ---- */
.juhec-search button svg { display: block; stroke: #261F2E; }
.juhec-search input[type="search"] { -webkit-appearance: none; appearance: none; }
.juhec-search input[type="search"]::-webkit-search-decoration,
.juhec-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ============================================================
   1c. EN-TÊTE 3 LIGNES (comme le modèle) — desktop uniquement
   Logo centré sur sa ligne, menu centré en dessous.
   ============================================================ */
#ast-desktop-header .ast-builder-grid-row.ast-builder-grid-row-has-sides {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
#ast-desktop-header .site-header-primary-section-left,
#ast-desktop-header .site-header-primary-section-right {
	width: 100%;
	justify-content: center;
}
/* Descendre / aérer le logo pour qu'il soit bien centré dans la bande. */
#ast-desktop-header .site-header-primary-section-left {
	padding-top: 34px;
	padding-bottom: 10px;
}
/* Barre de navigation : fond blanc + liens noirs. */
#ast-desktop-header .ast-primary-header-bar,
#ast-desktop-header .main-header-bar {
	background-color: #ffffff !important;
}
#ast-desktop-header .main-navigation .menu-item:not(.juhec-promo):not(.juhec-gift):not(.juhec-nav-primary) > .menu-link {
	color: #261F2E !important;
}
/* Survol / lien actif : couleur or du logo.
   NB : on garde le préfixe #ast-desktop-header pour battre la règle "lien noir". */
#ast-desktop-header .main-navigation .menu-item:not(.juhec-promo):not(.juhec-gift):not(.juhec-nav-primary) > .menu-link:hover,
#ast-desktop-header .main-navigation .menu-item:not(.juhec-promo):not(.juhec-gift):not(.juhec-nav-primary) > .menu-link:focus,
#ast-desktop-header .main-navigation .menu-item:not(.juhec-promo):not(.juhec-gift):not(.juhec-nav-primary).current-menu-item > .menu-link,
#ast-desktop-header .main-navigation .menu-item:not(.juhec-promo):not(.juhec-gift):not(.juhec-nav-primary).current-menu-ancestor > .menu-link,
#ast-mobile-header .main-navigation .menu-item:not(.juhec-promo):not(.juhec-gift):not(.juhec-nav-primary) > .menu-link:hover {
	color: #7A52C7 !important;
}
/* PROMOTION / Idées cadeaux : fond or, assombrissement au survol. */
#ast-desktop-header .main-navigation .menu-item.juhec-promo > .menu-link:hover,
#ast-desktop-header .main-navigation .menu-item.juhec-gift > .menu-link:hover {
	color: #FFFFFF !important;
	background: #5E3BA0;
}
#ast-desktop-header .main-header-bar-navigation { width: 100%; }
#ast-desktop-header .main-navigation > ul {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 4px; /* espacement exact et identique entre chaque lien */
}

/* Espacement exact : aucune marge/padding parasite sur les items de 1er niveau. */
#ast-desktop-header .main-navigation > ul > .menu-item { margin: 0; padding: 0; }

/* Retirer les flèches déroulantes du menu. */
.main-navigation .ast-header-navigation-arrow,
.main-navigation .dropdown-menu-toggle,
.main-navigation .menu-item .sub-arrow,
.main-navigation .menu-item-has-children > .menu-link > .ast-arrow-svg,
#ast-desktop-header .menu-item-has-children > .menu-link .icon-arrow {
	display: none !important;
}
/* Liens compacts pour tenir sur une seule ligne (12 entrées). */
#ast-desktop-header .main-navigation .menu-link {
	font-size: 13px;
	line-height: 1.3;
	padding-left: 7px;
	padding-right: 7px;
	letter-spacing: 0;
	white-space: nowrap;
}
/* Boutons mis en avant : un peu plus serrés aussi. */
#ast-desktop-header .menu-item.juhec-promo > .menu-link,
#ast-desktop-header .menu-item.juhec-gift > .menu-link {
	padding: 6px 10px;
	margin: 0;
}

/* ============================================================
   2. MISE EN VALEUR D'ENTRÉES DE MENU
   À assigner via Apparence > Menus > "Classes CSS" :
   - "juhec-promo" => bouton or
   - "juhec-gift"  => bouton rose
   ============================================================ */
.main-header-menu .menu-item.juhec-promo > .menu-link,
.ast-builder-menu .menu-item.juhec-promo > .menu-link,
.main-header-menu .menu-item.juhec-gift > .menu-link,
.ast-builder-menu .menu-item.juhec-gift > .menu-link {
	background: #7A52C7;
	color: #FFFFFF !important;
	border-radius: 6px;
}

/* ============================================================
   2b. SOUS-MENUS DÉROULANTS
   ============================================================ */
.main-navigation .sub-menu {
	background: #ffffff;
	border-top: 2px solid #7A52C7;
	box-shadow: 0 8px 20px rgba(28, 28, 28, 0.1);
	min-width: 210px;
	padding: 6px 0;
}
.main-navigation .sub-menu .menu-link {
	font-size: 13px;
	padding: 8px 16px !important;
	white-space: nowrap;
}
#ast-desktop-header .main-navigation .sub-menu .menu-item > .menu-link {
	color: #261F2E !important;
}
#ast-desktop-header .main-navigation .sub-menu .menu-item > .menu-link:hover {
	color: #7A52C7 !important;
	background: #F5F0F9;
}

/* ============================================================
   2c. CARTES PRODUIT (boutique) — façon modèle
   Image sur blanc, nom centré, prix or, bouton pleine largeur.
   ============================================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	text-align: center;
	border: 1px solid #EFE8F6;
	border-radius: 10px;
	padding: 16px 12px;
	background: #ffffff;
	margin-bottom: 1.5em;
}
.woocommerce ul.products li.product a img {
	margin: 0 auto 12px;
	max-height: 190px;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply; /* fond image fondu sur blanc */
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 12px;
	line-height: 1.35;
	color: #261F2E;
	font-weight: 400;
	min-height: 32px;
	padding: 0 4px 4px;
}
.woocommerce ul.products li.product .price {
	color: #7A52C7 !important;
	font-weight: 600;
	font-size: 14px;
	display: block;
	margin: 3px 0 10px;
}
.woocommerce ul.products li.product .price del {
	color: #B9AFC4;
	font-weight: 400;
	font-size: 14px;
	opacity: 1;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Bouton "Ajouter au panier" pleine largeur, or */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product a.add_to_cart_button {
	display: block;
	width: 100%;
	background: #7A52C7;
	color: #FFFFFF;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: 10px;
	font-weight: 500;
	border-radius: 6px;
	padding: 8px 6px;
	margin: 0;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
	background: #5E3BA0;
	color: #FFFFFF;
}
/* Supprimer le bouton "Ajouter au panier" au survol de l'image (doublon d'Astra). */
.woocommerce ul.products li.product .ast-on-card-button,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-on-card-button {
	display: none !important;
}

/* Badge promo rose */
.woocommerce span.onsale {
	background: #C9A24D;
	color: #fff;
	border-radius: 6px;
	min-height: auto;
	min-width: auto;
	padding: 4px 10px;
	line-height: 1.4;
}
/* Titre de la page boutique/catégorie */
.woocommerce-products-header__title,
.woocommerce .woocommerce-loop-product__title { font-family: 'Playfair Display', Georgia, serif; }

/* ============================================================
   2d. FICHE PRODUIT — résumé centré + bouton compact arrondi
   On force le centrage malgré les classes Astra *-align-left.
   ============================================================ */
.single-product div.product .summary.entry-summary,
.single-product div.product[class*="align-left"] .summary.entry-summary,
.single-product div.product[class*="align-right"] .summary.entry-summary {
	text-align: center !important;
}
.single-product div.product .summary.entry-summary > * { text-align: center !important; }
.single-product div.product .summary .product_title { font-family: 'Playfair Display', Georgia, serif; }
.single-product div.product .summary .price { color: #7A52C7 !important; justify-content: center; }
.single-product div.product .woocommerce-product-details__short-description { margin-left: auto; margin-right: auto; max-width: 560px; }

/* Formulaire d'ajout centré */
.single-product div.product form.cart {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 14px auto 0;
}
.single-product div.product form.cart .quantity { margin: 0 !important; float: none; }

/* Bouton "Ajouter au panier" : taille du texte + coins bien arrondis */
.single-product div.product form.cart .single_add_to_cart_button {
	width: auto !important;
	display: inline-block;
	background: #7A52C7 !important;
	color: #FFFFFF !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 30px !important;
	padding: 13px 34px;
}
.single-product div.product form.cart .single_add_to_cart_button:hover { background: #5E3BA0 !important; }

/* Indicateur de chargement du défilement infini */
.juhec-infinite-loader {
	text-align: center;
	padding: 24px 0;
	color: #7A52C7;
	font-family: 'Jost', sans-serif;
	letter-spacing: 1px;
	font-size: 13px;
}

/* ============================================================
   3a. BANDE RÉASSURANCE (avant le footer)
   ============================================================ */
.juhec-reassurance {
	background: #F5F0F9;
	border-top: 1px solid #E5DEED;
	padding: 28px 16px;
}
.juhec-reassurance-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.juhec-rea-item { display: flex; align-items: center; gap: 14px; justify-content: center; }
.juhec-rea-item strong {
	display: block;
	font-size: 15px;
	color: #261F2E;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
}
.juhec-rea-item span { font-size: 12px; color: #72677E; }

/* ============================================================
   3b. FOOTER PRINCIPAL (colonnes, anthracite)
   ============================================================ */
.juhec-footer { background: #261F2E; color: #D9CFE6; padding: 44px 16px 30px; }
.juhec-footer-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: 30px;
}
.juhec-footer-col h4 {
	color: var(--juhec-violet-clair); /* fond sombre : la primaire tomberait à 2,9:1 */
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 16px;
	margin: 0 0 14px;
	font-weight: 600;
}
.juhec-footer-col ul { list-style: none; margin: 0; padding: 0; }
.juhec-footer-col li { margin: 0 0 9px; }
.juhec-footer-col a { color: #D9CFE6; text-decoration: none; font-size: 13px; }
.juhec-footer-col a:hover { color: var(--juhec-violet-clair); }
.juhec-footer-brand p { font-size: 13px; line-height: 1.6; color: #B9AFC4; margin: 12px 0 10px; max-width: 290px; }
.juhec-footer-contact a { color: var(--juhec-violet-clair); }

.juhec-footer .juhec-fs-icons { display: flex; gap: 10px; margin-bottom: 22px; }
.juhec-footer .juhec-fs {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--juhec-violet-clair);
	color: var(--juhec-violet-clair);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .18s ease;
}
.juhec-footer .juhec-fs:hover { background: var(--juhec-violet-clair); color: var(--juhec-encre); }
.juhec-pay-title { margin-top: 4px !important; }
.juhec-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.juhec-pay span {
	background: #2E2836;
	border: 1px solid #3A3343;
	color: #D9CFE6;
	font-size: 11px;
	padding: 4px 9px;
	border-radius: 4px;
}

@media (max-width: 768px) {
	.juhec-reassurance-inner { grid-template-columns: 1fr; gap: 14px; }
	.juhec-footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 480px) {
	.juhec-footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LOGO — image téléversée dans WordPress
   (Personnaliser > Identité du site > Logo). Rien en dur.
   ============================================================ */
.juhec-logo { display: inline-flex; align-items: center; text-decoration: none; }

.juhec-logo-img {
	display: block;
	width: auto;
	height: auto;
	max-height: 64px;
	max-width: 220px;
}

@media (max-width: 921px) {
	.juhec-logo-img { max-height: 46px; max-width: 160px; }
}

/* Repli si aucun logo n'est encore téléversé */
.juhec-logo-text { flex-direction: column; line-height: 1.15; }

.juhec-logo-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	color: #7A52C7;
}

.juhec-logo-tag {
	font-family: 'Jost', sans-serif;
	font-size: 10px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #C9A24D;
}

/* Logo du pied de page : le fond est sombre, on force le rendu en blanc.
   Fonctionne parce que le logo est monochrome. */
.juhec-footer-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 70px;
	max-width: 210px;
	filter: brightness(0) invert(1);
	opacity: .95;
}

.juhec-footer-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	color: #F5F0F9;
}

/* ============================================================
   4. FONDATIONS COMMUNES À TOUT LE SITE
   Typographie, boutons, formulaires, messages, fil d'Ariane.
   ============================================================ */

/* --- 4a. Titres et texte courant --- */
.entry-content h1, .entry-content h2, .entry-content h3,
.woocommerce-products-header__title, .product_title,
h1.entry-title, .juhec-section-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	color: var(--juhec-encre);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.entry-content p, .woocommerce-product-details__short-description p {
	line-height: 1.7;
	color: var(--juhec-encre);
}

.entry-content a:not(.button):not(.wp-element-button):not(.juhec-hero-btn):not(.juhec-btn) {
	color: var(--juhec-violet);
	text-underline-offset: 2px;
}

.entry-content a:not(.button):not(.wp-element-button):not(.juhec-hero-btn):not(.juhec-btn):hover { color: var(--juhec-violet-fonce); }

/* --- 4b. Boutons : un seul style pour tout le site --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-element-button,
.wp-block-button__link,
.juhec-btn {
	background: var(--juhec-violet);
	color: #FFFFFF;
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .02em;
	border: 1px solid var(--juhec-violet);
	border-radius: 4px;
	padding: 13px 26px;
	line-height: 1.2;
	transition: background .18s ease, border-color .18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.juhec-btn:hover {
	background: var(--juhec-violet-fonce);
	border-color: var(--juhec-violet-fonce);
	color: #FFFFFF;
}

/* Bouton secondaire : contour seulement */
.woocommerce a.button.wc-backward,
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button),
.juhec-btn-ghost {
	background: transparent;
	color: var(--juhec-violet);
	border: 1px solid var(--juhec-bordure-2);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button):hover,
.juhec-btn-ghost:hover {
	background: var(--juhec-lavande);
	color: var(--juhec-violet-fonce);
	border-color: var(--juhec-violet);
}

/* Focus clavier visible partout (accessibilité) */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--juhec-violet);
	outline-offset: 2px;
}

/* --- 4c. Champs de formulaire --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.wpforms-field input, .wpforms-field textarea, .wpforms-field select,
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
	background: #FFFFFF;
	border: 1px solid var(--juhec-bordure-2);
	border-radius: 4px;
	padding: 12px 14px;
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	color: var(--juhec-encre);
	transition: border-color .16s ease, box-shadow .16s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wpforms-field input:focus, .wpforms-field textarea:focus,
.comment-form input:focus, .comment-form textarea:focus {
	border-color: var(--juhec-violet);
	box-shadow: 0 0 0 3px rgba(89, 50, 134, .12);
	outline: none;
}

.woocommerce form .form-row label {
	font-size: 13px;
	font-weight: 500;
	color: var(--juhec-gris);
	margin-bottom: 6px;
	display: block;
}

.woocommerce form .form-row .required { color: var(--juhec-promo); text-decoration: none; }

/* --- 4d. Messages WooCommerce --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: none;
	border-left: 3px solid;
	border-radius: 4px;
	padding: 16px 20px 16px 22px;
	font-size: 15px;
	background: var(--juhec-lavande);
	color: var(--juhec-encre);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message { border-left-color: #2E7D5B; background: #EFF7F2; }
.woocommerce-info    { border-left-color: var(--juhec-violet); }
.woocommerce-error   { border-left-color: var(--juhec-promo); background: #FCEFF3; }

.woocommerce-message .button,
.woocommerce-error .button { margin-left: auto; padding: 9px 18px; font-size: 13px; }

/* --- 4e. Fil d'Ariane --- */
.woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--juhec-gris);
	margin-bottom: 18px;
}

.woocommerce-breadcrumb a { color: var(--juhec-gris); }
.woocommerce-breadcrumb a:hover { color: var(--juhec-violet); }

/* ============================================================
   5. PAGE BOUTIQUE ET CATÉGORIES
   En-tête, tri, pagination, état vide.
   ============================================================ */

.woocommerce-products-header {
	text-align: center;
	padding: 34px 0 24px;
	border-bottom: 1px solid var(--juhec-bordure);
	margin-bottom: 30px;
}

.woocommerce-products-header__title {
	font-size: clamp(28px, 4vw, 40px);
	margin: 0 0 8px;
}

.woocommerce-products-header .term-description p {
	max-width: 62ch;
	margin: 0 auto;
	color: var(--juhec-gris);
	font-size: 15px;
	line-height: 1.65;
}

/* Barre tri + compteur */
.woocommerce .woocommerce-result-count {
	font-size: 13px;
	color: var(--juhec-gris);
	margin: 0;
	padding-top: 10px;
}

.woocommerce .woocommerce-ordering select {
	background: #FFFFFF;
	border: 1px solid var(--juhec-bordure-2);
	border-radius: 4px;
	padding: 10px 34px 10px 14px;
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	color: var(--juhec-encre);
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select:hover { border-color: var(--juhec-violet); }

/* Badges sur les vignettes */
.woocommerce span.onsale {
	background: var(--juhec-promo);
	color: #FFFFFF;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 3px;
	padding: 5px 11px;
	min-height: 0;
	min-width: 0;
	line-height: 1.3;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
}

.juhec-badge-new {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--juhec-or);
	color: #3A2C08;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 3px;
	padding: 5px 11px;
	z-index: 2;
}

/* Prix : normal, barré, promo */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--juhec-violet);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--juhec-gris);
	opacity: 1;
	font-weight: 400;
	margin-right: 8px;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	color: var(--juhec-promo);
	text-decoration: none;
	font-weight: 500;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
	border: none;
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 36px;
}

.woocommerce nav.woocommerce-pagination ul li { border: none; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--juhec-bordure);
	border-radius: 4px;
	min-width: 40px;
	padding: 10px 12px;
	color: var(--juhec-encre);
	font-size: 14px;
	transition: background .16s ease, border-color .16s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--juhec-lavande);
	border-color: var(--juhec-violet);
	color: var(--juhec-violet);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--juhec-violet);
	border-color: var(--juhec-violet);
	color: #FFFFFF;
}

/* Boutique vide */
.woocommerce-no-products-found,
.woocommerce-info.woocommerce-no-products-found {
	text-align: center;
	padding: 50px 24px;
	background: var(--juhec-lavande);
	border-left: none;
	border-radius: 8px;
	justify-content: center;
}

/* Rupture de stock sur la vignette */
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__link img { opacity: .55; }

.woocommerce ul.products li.product.outofstock > a::after {
	content: "Rupture de stock";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(38, 31, 46, .86);
	color: #FFFFFF;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 3px;
	z-index: 3;
}

/* ============================================================
   6. FICHE PRODUIT (structure du §43 du cahier des charges)
   ============================================================ */

.woocommerce div.product { padding-top: 10px; }

.woocommerce div.product .product_title {
	font-size: clamp(24px, 3.4vw, 34px);
	margin: 0 0 12px;
}

/* Galerie */
.woocommerce div.product div.images img {
	border-radius: 8px;
	border: 1px solid var(--juhec-bordure);
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	border-radius: 5px;
	opacity: .6;
	transition: opacity .16s ease, border-color .16s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--juhec-violet);
}

/* Prix principal */
.woocommerce div.product p.price {
	font-size: 27px;
	margin: 4px 0 16px;
}

/* Note en étoiles */
.woocommerce .star-rating span::before,
.woocommerce div.product .stars a::before { color: var(--juhec-or); }

.woocommerce div.product .woocommerce-product-rating { margin-bottom: 14px; }

.woocommerce-review-link { color: var(--juhec-gris); font-size: 13px; }

/* Disponibilité */
.woocommerce div.product .stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 3px;
	margin-bottom: 14px;
}

.woocommerce div.product .stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.woocommerce div.product .stock.in-stock { color: #2E7D5B; background: #EFF7F2; }
.woocommerce div.product .stock.out-of-stock { color: var(--juhec-promo); background: #FCEFF3; }

/* Quantité + ajouter au panier */
.woocommerce div.product form.cart { margin-top: 18px; }

.woocommerce .quantity input.qty {
	border: 1px solid var(--juhec-bordure-2);
	border-radius: 4px;
	height: 48px;
	width: 74px;
	text-align: center;
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	color: var(--juhec-encre);
	background: #FFFFFF;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
	height: 48px;
	padding: 0 34px;
	font-size: 15px;
	border-radius: 4px;
	margin-left: 10px;
}

/* Métadonnées (catégorie, référence) */
.woocommerce div.product .product_meta {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--juhec-bordure);
	font-size: 13px;
	color: var(--juhec-gris);
}

.woocommerce div.product .product_meta a { color: var(--juhec-violet); }

/* Onglets : description, ingrédients, avis */
.woocommerce div.product .woocommerce-tabs { margin-top: 52px; }

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 26px;
	border-bottom: 1px solid var(--juhec-bordure);
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 13px 20px;
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--juhec-gris);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--juhec-violet); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--juhec-violet);
	border-bottom-color: var(--juhec-violet);
}

/* Contenu des onglets : la structure §43 en sous-titres */
.woocommerce div.product .woocommerce-Tabs-panel h2 { display: none; }

.woocommerce div.product .woocommerce-Tabs-panel h3 {
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--juhec-violet);
	margin: 26px 0 10px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--juhec-bordure);
}

.woocommerce div.product .woocommerce-Tabs-panel h3:first-child { margin-top: 0; }

.woocommerce div.product .woocommerce-Tabs-panel ul {
	padding-left: 0;
	list-style: none;
	margin: 0 0 14px;
}

.woocommerce div.product .woocommerce-Tabs-panel ul li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 7px;
	line-height: 1.6;
}

.woocommerce div.product .woocommerce-Tabs-panel ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .72em;
	width: 7px;
	height: 1px;
	background: var(--juhec-or);
}

/* Avis clients */
.woocommerce #reviews #comments h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 21px;
	margin-bottom: 18px;
}

.woocommerce #reviews ol.commentlist li .comment_container {
	background: var(--juhec-lavande);
	border-radius: 8px;
	padding: 18px 20px;
}

.woocommerce #reviews ol.commentlist li img.avatar {
	border: none;
	border-radius: 50%;
	padding: 0;
	width: 42px;
}

.woocommerce #review_form_wrapper {
	background: #FFFFFF;
	border: 1px solid var(--juhec-bordure);
	border-radius: 8px;
	padding: 22px 24px;
	margin-top: 22px;
}

/* Produits similaires */
.woocommerce .related.products,
.woocommerce .up-sells.products,
.woocommerce .cross-sells {
	margin-top: 58px;
	padding-top: 34px;
	border-top: 1px solid var(--juhec-bordure);
}

.woocommerce .related.products > h2,
.woocommerce .up-sells.products > h2,
.woocommerce .cross-sells > h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 26px;
}

/* ============================================================
   7. PANIER
   ============================================================ */

.woocommerce table.shop_table {
	border: 1px solid var(--juhec-bordure);
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table thead th {
	background: var(--juhec-lavande);
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--juhec-gris);
	padding: 15px 16px;
	border-bottom: 1px solid var(--juhec-bordure);
}

.woocommerce table.shop_table td {
	padding: 18px 16px;
	border-top: 1px solid var(--juhec-bordure);
	vertical-align: middle;
}

.woocommerce table.shop_table td.product-name a {
	color: var(--juhec-encre);
	font-weight: 500;
}

.woocommerce table.shop_table td.product-name a:hover { color: var(--juhec-violet); }

.woocommerce table.shop_table img { border-radius: 5px; border: 1px solid var(--juhec-bordure); }

.woocommerce a.remove {
	color: var(--juhec-gris) !important;
	font-weight: 400;
	border: 1px solid var(--juhec-bordure-2);
	line-height: 22px;
	height: 24px;
	width: 24px;
	font-size: 17px;
}

.woocommerce a.remove:hover {
	background: var(--juhec-promo) !important;
	border-color: var(--juhec-promo);
	color: #FFFFFF !important;
}

.woocommerce .cart-collaterals .cart_totals > h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 21px;
	margin-bottom: 14px;
}

.woocommerce .cart_totals table.shop_table { background: var(--juhec-lavande); }

.woocommerce .cart_totals .order-total .amount {
	color: var(--juhec-violet);
	font-size: 20px;
	font-weight: 500;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	font-size: 16px;
	padding: 16px 24px;
}

.woocommerce .coupon input.input-text { max-width: 220px; }

/* Panier vide */
.woocommerce .cart-empty {
	text-align: center;
	font-size: 18px;
	color: var(--juhec-gris);
	padding: 40px 0 10px;
}

.woocommerce .return-to-shop { text-align: center; padding-bottom: 40px; }

/* ============================================================
   8. COMMANDE (checkout)
   ============================================================ */

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 21px;
	font-weight: 600;
	color: var(--juhec-encre);
	padding-bottom: 12px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--juhec-bordure);
}

.woocommerce-checkout #order_review {
	background: var(--juhec-lavande);
	border: 1px solid var(--juhec-bordure);
	border-radius: 8px;
	padding: 22px 24px;
}

.woocommerce-checkout #order_review table.shop_table {
	background: transparent;
	border: none;
}

.woocommerce-checkout #order_review table.shop_table thead th { background: transparent; }

.woocommerce-checkout .woocommerce-checkout-payment {
	background: transparent !important;
	border-radius: 0;
}

.woocommerce-checkout ul.wc_payment_methods {
	border-bottom: none !important;
	padding: 0 !important;
	margin: 0 0 18px !important;
	list-style: none;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	background: #FFFFFF;
	border: 1px solid var(--juhec-bordure-2);
	border-radius: 6px;
	padding: 15px 18px;
	margin-bottom: 10px;
	transition: border-color .16s ease;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:hover { border-color: var(--juhec-violet); }

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label {
	font-weight: 500;
	font-size: 15px;
	color: var(--juhec-encre);
	cursor: pointer;
}

.woocommerce-checkout .payment_box {
	background: var(--juhec-lavande) !important;
	border-radius: 5px;
	font-size: 14px;
	color: var(--juhec-gris);
	line-height: 1.6;
	margin-top: 12px !important;
}

.woocommerce-checkout .payment_box::before { display: none !important; }

.woocommerce-checkout #place_order {
	width: 100%;
	font-size: 16px;
	padding: 16px 24px;
	margin-top: 8px;
}

/* Le téléphone est capital au Sénégal : on le met en avant */
.woocommerce-checkout #billing_phone_field input.input-text {
	border-color: var(--juhec-violet-clair);
	font-size: 16px;
}

/* Confirmation de commande */
.woocommerce-order .woocommerce-thankyou-order-received {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 25px;
	color: var(--juhec-violet);
	text-align: center;
	padding: 26px 0;
}

.woocommerce-order ul.woocommerce-order-overview {
	background: var(--juhec-lavande);
	border: 1px solid var(--juhec-bordure);
	border-radius: 8px;
	padding: 20px 24px;
	list-style: none;
	margin: 0 0 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.woocommerce-order ul.woocommerce-order-overview li {
	border: none !important;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--juhec-gris);
	margin: 0;
	padding: 0;
}

.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 5px;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--juhec-encre);
}

/* ============================================================
   9. MON COMPTE
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--juhec-bordure);
	border-radius: 8px;
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--juhec-bordure);
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 18px;
	font-size: 14.5px;
	color: var(--juhec-encre);
	transition: background .16s ease, color .16s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--juhec-lavande);
	color: var(--juhec-violet);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--juhec-violet);
	color: #FFFFFF;
	font-weight: 500;
}

/* Formulaires connexion / inscription */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce form.lost_reset_password {
	border: 1px solid var(--juhec-bordure);
	border-radius: 8px;
	padding: 26px 28px;
}

.woocommerce-account h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 21px;
	font-weight: 600;
	margin-bottom: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content p { line-height: 1.7; }

/* ============================================================
   10. BLOG / CONSEILS ET PAGES DE CONTENU
   ============================================================ */

.blog .ast-article-post,
.archive .ast-article-post,
.search .ast-article-post {
	border: 1px solid var(--juhec-bordure);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color .18s ease;
}

.blog .ast-article-post:hover,
.archive .ast-article-post:hover { border-color: var(--juhec-violet-clair); }

.ast-article-post .entry-title a,
.ast-article-single .entry-title {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--juhec-encre);
}

.ast-article-post .entry-title a:hover { color: var(--juhec-violet); }

.ast-article-post .entry-meta,
.ast-article-single .entry-meta {
	font-size: 13px;
	color: var(--juhec-gris);
}

.ast-article-post .entry-meta a { color: var(--juhec-gris); }

/* Corps d'article et pages légales : lecture confortable */
.single-post .entry-content,
.page .entry-content {
	font-size: 16.5px;
	line-height: 1.75;
}

.single-post .entry-content h2,
.page .entry-content h2 {
	font-size: 25px;
	margin-top: 38px;
	margin-bottom: 12px;
}

.single-post .entry-content h3,
.page .entry-content h3 {
	font-size: 19px;
	margin-top: 28px;
	margin-bottom: 10px;
}

.single-post .entry-content blockquote,
.page .entry-content blockquote {
	border-left: 3px solid var(--juhec-or);
	background: var(--juhec-lavande);
	border-radius: 0 6px 6px 0;
	padding: 16px 22px;
	margin: 24px 0;
	font-style: normal;
	color: var(--juhec-encre);
}

/* ============================================================
   11. AJUSTEMENTS MOBILE (§35 — priorité tactile)
   ============================================================ */

@media (max-width: 921px) {

	/* Cible tactile confortable partout */
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wp-element-button {
		min-height: 46px;
		padding: 13px 22px;
	}

	/* Le bouton d'ajout au panier passe pleine largeur */
	.woocommerce div.product form.cart .button.single_add_to_cart_button {
		width: 100%;
		margin: 12px 0 0;
	}

	.woocommerce div.product form.cart .quantity { width: 100%; }
	.woocommerce .quantity input.qty { width: 100%; max-width: 120px; }

	/* Tableaux panier : lisibles sur petit écran */
	.woocommerce table.shop_table_responsive tr td {
		padding: 12px 14px;
		font-size: 14.5px;
	}

	.woocommerce table.shop_table_responsive tr td::before {
		font-weight: 500;
		color: var(--juhec-gris);
	}

	/* Onglets produit : défilement horizontal plutôt que retour à la ligne */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		white-space: nowrap;
		padding: 12px 15px;
	}

	/* Onglets de compte empilés */
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 24px; }

	/* On laisse de la place à la barre fixe du bas */
	.woocommerce-checkout #place_order,
	.woocommerce .wc-proceed-to-checkout { margin-bottom: 12px; }

	body { padding-bottom: 62px; }
}

@media (max-width: 600px) {
	.woocommerce-products-header { padding: 24px 0 18px; }
	.woocommerce div.product p.price { font-size: 23px; }
	.woocommerce-order ul.woocommerce-order-overview { gap: 16px; padding: 16px 18px; }
}

/* Respect des préférences d'animation réduite */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   12. BLOC LIVRAISON (fiche produit) ET BOUTON WHATSAPP
   ============================================================ */

.juhec-delivery-note {
	list-style: none;
	margin: 22px 0 0;
	padding: 16px 20px;
	background: var(--juhec-lavande);
	border-radius: 6px;
	font-size: 14px;
	color: var(--juhec-encre);
}

.juhec-delivery-note li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 8px;
	line-height: 1.55;
}

.juhec-delivery-note li:last-child { margin-bottom: 0; }

.juhec-delivery-note li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--juhec-or);
}

/* Bouton WhatsApp flottant — discret, au-dessus de la barre mobile */
.juhec-whatsapp {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 998;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(38, 31, 46, .22);
	transition: transform .18s ease;
}

.juhec-whatsapp:hover { transform: scale(1.06); color: #FFFFFF; }

@media (max-width: 921px) {
	.juhec-whatsapp { bottom: 74px; right: 14px; width: 48px; height: 48px; }
}

/* ============================================================
   13. DIAPORAMA AVEC DE VRAIES PHOTOS
   La classe has-photo est ajoutée par PHP uniquement lorsqu'une image
   a été téléversée dans la médiathèque sous le nom hero-1, hero-2 ou
   hero-3. Sur une photo, le texte sombre devient illisible : on pose
   un voile dégradé et on passe le texte en blanc.
   ============================================================ */

.juhec-hero-slide.has-photo { position: absolute; }

.juhec-hero-slide.has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(38,31,46,.78) 0%, rgba(38,31,46,.58) 45%, rgba(38,31,46,.22) 100%);
	pointer-events: none;
}

.juhec-hero-slide.has-photo .juhec-hero-text { position: relative; z-index: 1; }

.juhec-hero-slide.has-photo .juhec-hero-title { color: #FFFFFF; }
.juhec-hero-slide.has-photo .juhec-hero-sub   { color: rgba(255, 255, 255, .88); }
.juhec-hero-slide.has-photo .juhec-hero-eyebrow { color: #E0C07A; }

@media (max-width: 921px) {
	/* Le texte est centré sur mobile : le voile doit l'être aussi. */
	.juhec-hero-slide.has-photo::before {
		background: linear-gradient(180deg, rgba(38,31,46,.45) 0%, rgba(38,31,46,.72) 100%);
	}
}

/* ============================================================
   14. ALIGNEMENT DE LA PALETTE GLOBALE ASTRA
   Astra colore ses liens, menus et badges avec ses propres variables,
   restées sur le bleu par défaut. On les redéfinit sur la marque :
   un seul point de correction pour tout ce qu'Astra pilote.
   Le !important est nécessaire, Astra imprime ses variables en ligne
   dans le <head>, donc après cette feuille.
   ============================================================ */
:root {
	--ast-global-color-0: #7A52C7 !important; /* primaire : liens, boutons */
	--ast-global-color-1: #5E3BA0 !important; /* survol */
	--ast-global-color-2: #261F2E !important; /* titres */
	--ast-global-color-3: #2E2836 !important; /* texte courant */
	--ast-global-color-4: #F5F0F9 !important; /* fond clair */
	--ast-global-color-5: #FFFFFF !important;
	--ast-global-color-6: #E5DEED !important; /* bordures */
	--ast-global-color-7: #C9A24D !important; /* accent or */
	--ast-global-color-8: #261F2E !important;
}

/* ============================================================
   15. BADGES DE LA CARTE PRODUIT
   Astra rend la pastille promo via .ast-onsale-card, et non via
   le .onsale de WooCommerce : c'est elle qu'il faut styler.
   ============================================================ */

.woocommerce ul.products li.product .ast-onsale-card,
.ast-onsale-card {
	background: #B82E5C !important;
	color: #FFFFFF !important;
	font-family: 'Jost', sans-serif;
	font-size: 11px !important;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 3px !important;
	padding: 5px 11px !important;
	border: none !important;
	box-shadow: none !important;
	min-width: 0;
	min-height: 0;
	line-height: 1.35 !important;
}

/* Le badge « Nouveau » est injecté dans le lien produit : il hérite
   sinon de la couleur du lien. On le verrouille. */
.woocommerce ul.products li.product .juhec-badge-new,
.juhec-badge-new {
	background: #C9A24D !important;
	color: #3A2C08 !important;
	text-decoration: none !important;
}

/* ============================================================
   16. CARTES DE CATÉGORIE ET DE ROUTINE (accueil)
   La classe juhec-card est posée sur les colonnes depuis l'éditeur.
   ============================================================ */

.wp-block-column.juhec-card {
	background: #FFFFFF;
	border: 1px solid var(--juhec-bordure);
	border-radius: 10px;
	padding: 28px 22px 26px;
	text-align: center;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.wp-block-column.juhec-card:hover {
	border-color: var(--juhec-violet-clair);
	transform: translateY(-3px);
	box-shadow: 0 10px 26px -18px rgba(89, 50, 134, .55);
}

.wp-block-column.juhec-card h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 8px;
	line-height: 1.25;
}

.wp-block-column.juhec-card h3 a {
	color: var(--juhec-encre);
	text-decoration: none;
}

.wp-block-column.juhec-card:hover h3 a { color: var(--juhec-violet); }

.wp-block-column.juhec-card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--juhec-gris);
}

/* Petit liseré or au-dessus du titre, pour ancrer la marque */
.wp-block-column.juhec-card h3::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	background: var(--juhec-or);
	margin: 0 auto 14px;
}

@media (max-width: 921px) {
	.wp-block-column.juhec-card { padding: 22px 18px; }
	.wp-block-column.juhec-card h3 { font-size: 18px; }
}

/* ============================================================
   17. TYPOGRAPHIE DE MARQUE APPLIQUÉE PARTOUT
   Les polices sont désormais chargées (voir functions.php). Il faut
   encore les appliquer : Astra imposait sa pile système sur le corps.
   ============================================================ */

body,
button, input, select, textarea, optgroup,
.entry-content, .woocommerce, .ast-container,
p, li, td, th, dd, dt, label, figcaption {
	font-family: 'Jost', 'Segoe UI', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .product_title, .woocommerce-loop-product__title,
.wc-block-grid__product-title, .widget-title, .juhec-section-title {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 600;
}

/* Les libellés techniques restent en Jost, plus lisible en petit */
.juhec-topbar, .juhec-mobile-bar, .juhec-hero-eyebrow,
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count,
.ast-onsale-card, .juhec-badge-new {
	font-family: 'Jost', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ============================================================
   18. UNIFORMITÉ DES GRILLES
   Des cartes de hauteurs inégales donnent des bas de ligne en
   escalier : c'est le premier signe visuel d'un site bâclé.
   ============================================================ */

/* Colonnes Gutenberg : toutes les cartes d'une rangée à la même hauteur */
.wp-block-columns { align-items: stretch; }
.wp-block-column.juhec-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Cartes produit : image, titre, prix, bouton toujours au même niveau */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.8em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Le prix est repoussé en bas : les prix s'alignent d'une carte à l'autre */
.woocommerce ul.products li.product .price { margin-top: auto; padding-top: 6px; }

.woocommerce ul.products { align-items: stretch; }

/* ============================================================
   19. RESPIRATION ENTRE LES SECTIONS
   38px entre deux sections, c'est le réglage d'un article de blog,
   pas d'une page d'accueil marchande.
   ============================================================ */

.home .entry-content > h2.wp-block-heading { margin-top: 72px; margin-bottom: 6px; }
.home .entry-content > h2.wp-block-heading + p { margin-bottom: 30px; }
.home .entry-content > .wp-block-separator { margin: 64px auto 0; border: 0; border-top: 1px solid var(--juhec-bordure); max-width: 100%; }
.home .entry-content > .wp-block-columns { margin-bottom: 22px; }

/* ============================================================
   20. MOBILE — CORRECTIFS DE FOND (§35)
   Débordement horizontal, colonnes non empilées, cibles tactiles.
   ============================================================ */

/* Rien ne doit dépasser la largeur de l'écran */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 781px) {
	/* Les colonnes Gutenberg s'empilent réellement */
	.wp-block-columns { flex-wrap: wrap !important; gap: 14px; }
	.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		margin-left: 0 !important;
	}

	/* Cibles tactiles confortables */
	.juhec-card h3 a,
	.juhec-footer a,
	.woocommerce-loop-product__link {
		display: block;
		padding: 6px 0;
		min-height: 44px;
	}

	.juhec-hero-dot { width: 14px; height: 14px; }
	.juhec-hero-dots { gap: 14px; bottom: 16px; }

	.juhec-search-btn, .juhec-search button { min-width: 44px; min-height: 44px; }

	.home .entry-content > h2.wp-block-heading { margin-top: 48px; }
	.home .entry-content > .wp-block-separator { margin-top: 44px; }
}

@media (max-width: 420px) {
	.juhec-card h3 { font-size: 17px; }
}

/* ============================================================
   21. CORRECTIFS MOBILE MESURÉS
   Relevés au banc en 375px après la 1.2.0.
   ============================================================ */

@media (max-width: 781px) {

	/* La grille produits est un CSS grid : elle fournit déjà ses colonnes.
	   Imposer une largeur aux éléments les réduisait à 48% de leur cellule,
	   soit 76px. On définit le gabarit, pas la largeur des items. */
	.woocommerce ul.products,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 18px !important;
	}

	.woocommerce ul.products li.product {
		width: auto !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		float: none !important;
	}

	/* Le carrousel prenait la largeur de la fenêtre dans un conteneur de
	   335px, d'où 40px de débordement masqué par overflow-x. On le ramène
	   à la largeur réellement disponible. */
	.juhec-hero {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Puces du carrousel : zone tactile de 44px sans grossir le point visible. */
	.juhec-hero-dot {
		width: 12px;
		height: 12px;
		padding: 16px;
		box-sizing: content-box;
		background-clip: content-box;
	}

	.juhec-hero-dots { gap: 0; bottom: 6px; }
}

/* ============================================================
   22. FIL D'ARIANE ET FICHE PRODUIT — CORRECTIFS MESURÉS
   ============================================================ */

/* Le fil d'Ariane restait au gris #777 d'Astra, hors palette. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb, nav.woocommerce-breadcrumb a {
	color: var(--juhec-gris) !important;
}

.woocommerce .woocommerce-breadcrumb a:hover,
nav.woocommerce-breadcrumb a:hover { color: var(--juhec-violet) !important; }

/* Le bouton d'ajout portait une marge basse de 15px dans un conteneur
   centré verticalement : il remontait de 7px par rapport au champ
   quantité. Les deux sont désormais sur la même ligne de base. */
.woocommerce div.product form.cart .button.single_add_to_cart_button {
	margin-bottom: 0;
	align-self: center;
}

.woocommerce div.product form.cart { align-items: center; }

/* ============================================================
   23. PANIER ET COMMANDE EN BLOCS (WooCommerce Blocks)
   Les sections 7 et 8 ciblaient l'ancien panier à tableaux
   (table.shop_table, .cart_totals) que ce site n'utilise pas.
   Elles restent en place au cas où un shortcode classique serait
   employé quelque part, mais c'est ici que tout se joue.
   ============================================================ */

/* --- 23a. Champs de formulaire --- */
.wc-block-components-text-input input.wc-block-components-text-input__input,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container select {
	border: 1px solid var(--juhec-bordure-2) !important;
	border-radius: 4px !important;
	background: #FFFFFF !important;
	color: var(--juhec-encre) !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 15px !important;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__container select:focus {
	border-color: var(--juhec-violet) !important;
	box-shadow: 0 0 0 3px rgba(89, 50, 134, .12) !important;
	outline: none !important;
}

.wc-block-components-text-input label,
.wc-block-components-checkout-step__description,
.wc-block-components-form .wc-block-components-text-input label {
	color: var(--juhec-gris) !important;
	font-family: 'Jost', sans-serif !important;
}

/* Le téléphone est la donnée critique au Sénégal : on le signale. */
.wc-block-components-text-input:has(input[id*="phone"]) input,
#shipping-phone, #billing-phone {
	border-color: var(--juhec-violet-clair) !important;
	font-size: 16px !important;
}

/* --- 23b. Titres d'étape --- */
.wc-block-components-title,
.wc-block-components-checkout-step__title {
	font-family: 'Playfair Display', Georgia, serif !important;
	color: var(--juhec-encre) !important;
}

/* --- 23c. Récapitulatif et totaux --- */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--juhec-lavande);
	border: 1px solid var(--juhec-bordure);
	border-radius: 8px;
	padding: 22px 24px;
}

.wc-block-components-totals-item__label { color: var(--juhec-gris); }

.wc-block-components-totals-item__value { color: var(--juhec-encre); font-variant-numeric: tabular-nums; }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	color: var(--juhec-violet) !important;
	font-size: 21px !important;
	font-weight: 500 !important;
}

/* --- 23d. Lignes du panier --- */
.wc-block-cart-items__header {
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--juhec-gris);
	border-bottom: 1px solid var(--juhec-bordure-2);
}

.wc-block-cart-items__row { border-bottom: 1px solid var(--juhec-bordure); }

.wc-block-components-product-name {
	font-family: 'Jost', sans-serif !important;
	font-weight: 500;
	color: var(--juhec-encre) !important;
}

.wc-block-components-product-name:hover { color: var(--juhec-violet) !important; }

.wc-block-cart-item__image img {
	border: 1px solid var(--juhec-bordure);
	border-radius: 6px;
}

/* Prix barré et prix promo, cohérents avec la boutique */
.wc-block-components-product-price__regular {
	color: var(--juhec-gris);
	text-decoration: line-through;
}

.wc-block-components-product-price__value.is-discounted,
.wc-block-components-sale-badge {
	color: var(--juhec-promo) !important;
}

.wc-block-components-sale-badge {
	background: #FCEFF3 !important;
	border-radius: 3px;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: .05em;
}

/* --- 23e. Sélecteur de quantité --- */
.wc-block-components-quantity-selector {
	border: 1px solid var(--juhec-bordure-2) !important;
	border-radius: 4px !important;
}

.wc-block-components-quantity-selector__button { color: var(--juhec-violet) !important; }
.wc-block-components-quantity-selector__button:hover { background: var(--juhec-lavande) !important; }
.wc-block-components-quantity-selector__input { color: var(--juhec-encre) !important; font-family: 'Jost', sans-serif !important; }

/* --- 23f. Options de livraison et de paiement --- */
.wc-block-components-radio-control__option {
	border: 1px solid var(--juhec-bordure-2);
	border-radius: 6px;
	padding: 14px 16px 14px 44px !important;
	margin-bottom: 10px;
	background: #FFFFFF;
	transition: border-color .16s ease;
}

.wc-block-components-radio-control__option:hover { border-color: var(--juhec-violet); }

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--juhec-violet);
	background: var(--juhec-lavande);
}

.wc-block-components-radio-control__label { font-weight: 500; color: var(--juhec-encre); }
.wc-block-components-radio-control__secondary-label { color: var(--juhec-violet); }

/* --- 23g. Boutons et messages --- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	font-family: 'Jost', sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: .02em;
	min-height: 52px !important;
}

.wc-block-components-notice-banner {
	border-radius: 4px !important;
	font-family: 'Jost', sans-serif !important;
}

.wc-block-components-notice-banner.is-success { border-color: #2E7D5B !important; }
.wc-block-components-notice-banner.is-error { border-color: var(--juhec-promo) !important; }
.wc-block-components-notice-banner.is-info { border-color: var(--juhec-violet) !important; }

/* --- 23h. Mobile --- */
@media (max-width: 781px) {
	.wc-block-cart__sidebar .wc-block-components-sidebar,
	.wc-block-checkout__sidebar .wc-block-components-sidebar,
	.wp-block-woocommerce-cart-order-summary-block,
	.wp-block-woocommerce-checkout-order-summary-block { padding: 18px 16px; }

	.wc-block-components-text-input input { font-size: 16px !important; } /* évite le zoom iOS */
	.wc-block-components-quantity-selector { min-height: 44px; }
	.wc-block-components-radio-control__option { padding: 16px 14px 16px 42px !important; }
}

/* ============================================================
   24. CONTRÔLES NATIFS ET CORRECTIFS MOBILE DU TUNNEL
   Relevés au banc sur /panier/ et /commander/ après la 1.3.0.
   ============================================================ */

/* Cases à cocher et boutons radio : ce sont des contrôles natifs du
   navigateur. accent-color est la seule façon propre de les colorer
   sans les reconstruire en CSS. */
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input,
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--juhec-violet);
}

/* Le sélecteur de pays/région porte la classe wc-blockS (au pluriel),
   que ma règle précédente manquait. */
.wc-blocks-components-select__select,
.wc-blocks-components-select select {
	border: 1px solid var(--juhec-bordure-2) !important;
	border-radius: 4px !important;
	color: var(--juhec-encre) !important;
	font-family: 'Jost', sans-serif !important;
	background-color: #FFFFFF !important;
}

.wc-blocks-components-select__select:focus {
	border-color: var(--juhec-violet) !important;
	box-shadow: 0 0 0 3px rgba(89, 50, 134, .12) !important;
	outline: none !important;
}

.wc-blocks-components-select__label { color: var(--juhec-gris) !important; }

@media (max-width: 781px) {

	/* Le tableau du panier déborde : on le contraint et on laisse la
	   colonne image fixe, le reste prend la place disponible. */
	.wc-block-cart-items,
	.wp-block-woocommerce-cart-line-items-block table {
		width: 100% !important;
		max-width: 100% !important;
		table-layout: fixed !important;
	}

	.wc-block-cart-item__image,
	.wc-block-cart-items__header-image { width: 72px !important; }

	.wc-block-cart-item__image img { width: 64px !important; height: auto !important; }

	.wc-block-cart-item__product,
	.wc-block-cart-item__total { word-break: break-word; }

	/* Cibles tactiles : nom de produit et lien de suppression */
	.wc-block-components-product-name {
		display: inline-block;
		padding: 8px 0;
		min-height: 40px;
	}

	.wc-block-cart-item__remove-link {
		display: inline-block;
		padding: 10px 0;
		min-height: 40px;
	}

	/* Contrôles natifs plus larges au doigt */
	.wc-block-components-checkbox__input,
	.wc-block-components-radio-control__input { width: 22px; height: 22px; }

	.wc-block-components-checkbox__label,
	.wc-block-components-radio-control__label { padding: 6px 0; display: inline-block; }
}

/* ============================================================
   25. CASES, RADIOS ET DERNIERS AJUSTEMENTS DU TUNNEL
   WooCommerce pose appearance:none sur ses cases et boutons radio
   et les dessine lui-même : accent-color n'a donc aucun effet.
   La coche et le point sélectionné étaient peints en noir.
   ============================================================ */

.wc-block-components-checkbox__input[type="checkbox"] {
	border: 1px solid var(--juhec-bordure-2) !important;
	background: #FFFFFF !important;
	border-radius: 3px !important;
}

.wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--juhec-violet) !important;
	border-color: var(--juhec-violet) !important;
}

/* La coche est un SVG, peint en noir par défaut. */
.wc-block-components-checkbox__mark { fill: #FFFFFF !important; }

.wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--juhec-violet);
	outline-offset: 2px;
}

.wc-block-components-radio-control__input[type="radio"] {
	border: 1px solid var(--juhec-bordure-2) !important;
	background: #FFFFFF !important;
}

.wc-block-components-radio-control__input[type="radio"]:checked {
	border-color: var(--juhec-violet) !important;
}

/* Le point central du bouton radio sélectionné. */
.wc-block-components-radio-control__input[type="radio"]::before,
.wc-block-components-radio-control__input[type="radio"]:checked::before {
	background: var(--juhec-violet) !important;
}

/* Le champ « complément d'adresse » masqué gardait une couleur étrangère :
   elle apparaîtrait dès que le client déplie le champ. */
.wc-block-components-address-form input,
.wc-block-components-address-form__address_2-hidden-input,
input.wc-block-components-address-form__address_2 {
	color: var(--juhec-encre) !important;
	font-family: 'Jost', sans-serif !important;
}

@media (max-width: 781px) {
	/* Avec table-layout:fixed, ce sont les cellules d'en-tête qui fixent
	   les colonnes. La colonne Total sortait de 32px sans largeur définie. */
	.wc-block-cart-items__header-image,
	.wc-block-cart-item__image { width: 68px !important; }

	.wc-block-cart-items__header-total,
	.wc-block-cart-item__total { width: 92px !important; padding-right: 0 !important; }

	.wc-block-cart-item__total,
	.wc-block-cart-item__total-price-and-sale-badge-wrapper,
	.wc-block-cart-item__total .price { word-break: break-word; text-align: right; }

	.wc-block-cart-items__header-product,
	.wc-block-cart-item__product { padding-right: 8px !important; }

	/* Lien de suppression : zone tactile suffisante */
	.wc-block-cart-item__remove-link { min-height: 40px; padding: 10px 4px; }
}


/* ============================================================
   26. CARTES PRODUIT DES BLOCS D'ACCUEIL
   « Nos meilleures ventes », « Nouveautés » et « Promotions »
   utilisent .wc-block-grid__product, composant distinct de la
   grille boutique (ul.products li.product) stylée en section 2c.
   Il n'avait aucun style : fond transparent, bordure nulle, titres
   à 12px, et un bouton violet sur fond violet.

   Toutes les valeurs ci-dessous ont été relevées en direct sur le
   site, à 1440px, 1024px et 375px.
   ============================================================ */

/* --- 26a. Les grilles prennent toute la largeur de l'écran ---
   Elles sortent du conteneur de 1200px pour occuper la fenêtre.
   Les titres de section, eux, restent dans le conteneur : c'est ce
   décalage qui donne le rythme. */
.wc-block-grid.wp-block-product-best-sellers,
.wc-block-grid.wp-block-product-new,
.wc-block-grid.wp-block-product-on-sale {
	max-width: none !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding: 0 32px !important;
	box-sizing: border-box !important;
}

/* --- 26b. Gabarit : 12 produits par section ---
   12 se divise par 6, 4, 3 et 2 : les rangées restent pleines à
   chaque palier, sans jamais de ligne incomplète. */
.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	gap: 20px !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none;
}

@media (max-width: 1199px) { .wc-block-grid__products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 899px)  { .wc-block-grid__products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 599px)  { .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } }

/* --- 26c. Le cadre --- */
.wc-block-grid__product {
	position: relative;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	background: #FFFFFF !important;
	border: 1px solid var(--juhec-bordure) !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(89, 50, 134, .04);
	padding: 0 0 16px !important;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: center;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.wc-block-grid__product:hover {
	border-color: var(--juhec-violet-clair) !important;
	transform: translateY(-4px);
	box-shadow: 0 12px 28px -18px rgba(89, 50, 134, .5) !important;
}

/* --- 26d. Image --- */
.wc-block-grid__product-link { display: block; margin: 0; }

.wc-block-grid__product-image {
	display: block;
	margin: 0 0 14px !important;
	padding: 0;
	background: #FAF8FC !important;
	border-bottom: 1px solid var(--juhec-lavande-2) !important;
	overflow: hidden;
}

.wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	transition: transform .35s ease;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.04); }

/* --- 26e. Titre --- */
.wc-block-grid__product-title {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.32 !important;
	letter-spacing: -.005em !important;
	color: var(--juhec-encre) !important;
	margin: 0 11px 8px !important;
	min-height: 2.64em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wc-block-grid__product:hover .wc-block-grid__product-title { color: var(--juhec-violet) !important; }

/* --- 26f. Prix --- */
.wc-block-grid__product-price {
	font-family: 'Jost', sans-serif !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	color: var(--juhec-violet) !important;
	margin: 0 11px 11px !important;
	line-height: 1.3 !important;
	font-variant-numeric: tabular-nums;
}

.wc-block-grid__product-price del,
.wc-block-grid__product-price .wc-block-grid__product-price__regular {
	color: var(--juhec-gris) !important;
	font-weight: 400 !important;
	font-size: 12.5px !important;
	text-decoration: line-through;
	margin-right: 6px;
}

.wc-block-grid__product-price ins,
.wc-block-grid__product-price .wc-block-grid__product-price__value {
	color: var(--juhec-promo) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}

.wc-block-grid__product-price:not(:has(del)) .wc-block-grid__product-price__value { color: var(--juhec-violet) !important; }

/* Textes réservés aux lecteurs d'écran */
.wc-block-grid__product .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- 26g. Bouton --- */
.wc-block-grid__product-add-to-cart { margin: auto 11px 0 !important; }

.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart a {
	display: block;
	width: 100%;
	background: var(--juhec-violet) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--juhec-violet) !important;
	border-radius: 4px !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	line-height: 1.2 !important;
	padding: 12px 4px !important;
	min-height: 44px;
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none !important;
	transition: background .18s ease, border-color .18s ease;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart a:hover {
	background: var(--juhec-violet-fonce) !important;
	border-color: var(--juhec-violet-fonce) !important;
	color: #FFFFFF !important;
}

.wc-block-grid__product-add-to-cart a.added::after { color: #FFFFFF !important; }

/* --- 26h. Badge promotion --- */
.wc-block-grid__product-onsale {
	position: absolute;
	top: 10px; left: 10px; right: auto;
	width: auto !important; min-width: 0;
	height: auto !important;
	background: var(--juhec-promo) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 10.5px !important;
	font-weight: 500 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3 !important;
	padding: 4px 9px !important;
	border-radius: 3px !important;
	margin: 0 !important;
	z-index: 2;
}

.wc-block-grid__product-rating { margin: 0 11px 8px !important; }
.wc-block-grid__product-rating .star-rating span::before { color: var(--juhec-or) !important; }

/* --- 26i. Mobile --- */
@media (max-width: 781px) {
	.wc-block-grid.wp-block-product-best-sellers,
	.wc-block-grid.wp-block-product-new,
	.wc-block-grid.wp-block-product-on-sale { padding: 0 16px !important; }

	.wc-block-grid__product-title { font-size: 13.5px !important; margin: 0 9px 7px !important; }
	.wc-block-grid__product-price { font-size: 13.5px !important; margin: 0 9px 10px !important; }
	.wc-block-grid__product-price del { font-size: 12px !important; }
	.wc-block-grid__product-add-to-cart { margin: auto 9px 0 !important; }
	.wc-block-grid__product-add-to-cart a { font-size: 11px !important; padding: 12px 3px !important; }
}

/* ============================================================
   27. RESPIRATION SOUS LES TITRES DE SECTION PRODUITS
   Les sections munies d'un sous-titre disposaient de 80px de blanc
   avant leurs cartes : le paragraphe faisait tampon. Les trois
   sections produits n'en ont pas, et la grille suivait le titre à
   6px seulement. Valeurs relevées au banc : 56px sur ordinateur
   (1,87 fois la hauteur du titre), 40px sur mobile (1,33 fois).
   ============================================================ */

.home .entry-content > h2.wp-block-heading + .wc-block-grid,
.home .entry-content > h2.wp-block-heading + .woocommerce,
.home .entry-content > h2.wp-block-heading + .wp-block-columns {
	margin-top: 56px !important;
}

@media (max-width: 781px) {
	.home .entry-content > h2.wp-block-heading + .wc-block-grid,
	.home .entry-content > h2.wp-block-heading + .woocommerce,
	.home .entry-content > h2.wp-block-heading + .wp-block-columns {
		margin-top: 40px !important;
	}
}

/* ============================================================
   28. ENTRÉES DE MENU PRINCIPALES
   Accueil et Boutique n'ont pas de sous-menu : ce sont des
   destinations directes. Un fond violet les distingue des entrées
   qui ouvrent une liste. La classe juhec-nav-primary est posée sur
   ces deux entrées depuis l'administration des menus.
   ============================================================ */

.main-header-menu .menu-item.juhec-nav-primary > .menu-link,
.ast-builder-menu .menu-item.juhec-nav-primary > .menu-link,
#ast-desktop-header .menu-item.juhec-nav-primary > .menu-link,
.ast-desktop .menu-item.juhec-nav-primary > .menu-link {
	background: var(--juhec-violet) !important;
	color: #FFFFFF !important;
	border-radius: 5px;
	padding-left: 16px !important;
	padding-right: 16px !important;
	transition: background .18s ease;
}

.main-header-menu .menu-item.juhec-nav-primary > .menu-link:hover,
.ast-builder-menu .menu-item.juhec-nav-primary > .menu-link:hover,
#ast-desktop-header .menu-item.juhec-nav-primary > .menu-link:hover,
.ast-desktop .menu-item.juhec-nav-primary > .menu-link:hover {
	background: var(--juhec-violet-fonce) !important;
	color: #FFFFFF !important;
}

/* Entrée active : on garde le contraste plutôt que la couleur d'état d'Astra. */
.menu-item.juhec-nav-primary.current-menu-item > .menu-link,
.menu-item.juhec-nav-primary.current_page_item > .menu-link {
	background: var(--juhec-violet-fonce) !important;
	color: #FFFFFF !important;
}

/* Sur le menu mobile déroulant, le fond plein alourdirait :
   on garde un simple liseré violet à gauche. */
@media (max-width: 921px) {
	.ast-mobile-popup-drawer .menu-item.juhec-nav-primary > .menu-link,
	.ast-mobile-header-wrap .menu-item.juhec-nav-primary > .menu-link {
		background: transparent !important;
		color: var(--juhec-violet) !important;
		border-left: 3px solid var(--juhec-violet);
		border-radius: 0;
		font-weight: 500;
	}
}

/* ============================================================
   29. ENTRÉES PRINCIPALES — SPÉCIFICITÉ ET RESPIRATION
   La règle de couleur du menu (section 2) utilise un sélecteur
   d'identifiant et battait celle de la section 28 : le texte restait
   violet sur fond violet. On reprend le même niveau de spécificité.
   ============================================================ */

#ast-desktop-header .main-navigation .menu-item.juhec-nav-primary > .menu-link,
#ast-desktop-header .menu-item.juhec-nav-primary > .menu-link,
.ast-builder-menu .menu-item.juhec-nav-primary > .menu-link,
.main-header-menu .menu-item.juhec-nav-primary > .menu-link {
	background: var(--juhec-violet) !important;
	color: #FFFFFF !important;
	border-radius: 6px;
	padding: 11px 22px !important;
	line-height: 1.2 !important;
	font-weight: 500;
}

#ast-desktop-header .main-navigation .menu-item.juhec-nav-primary > .menu-link:hover,
#ast-desktop-header .main-navigation .menu-item.juhec-nav-primary > .menu-link:focus,
#ast-desktop-header .main-navigation .menu-item.juhec-nav-primary.current-menu-item > .menu-link,
#ast-desktop-header .menu-item.juhec-nav-primary > .menu-link:hover,
.ast-builder-menu .menu-item.juhec-nav-primary > .menu-link:hover,
.main-header-menu .menu-item.juhec-nav-primary > .menu-link:hover {
	background: var(--juhec-violet-fonce) !important;
	color: #FFFFFF !important;
}

/* Un peu d'air entre les deux pastilles et le reste du menu. */
#ast-desktop-header .main-navigation .menu-item.juhec-nav-primary { margin-right: 6px; }

@media (max-width: 921px) {
	#ast-mobile-header .menu-item.juhec-nav-primary > .menu-link,
	.ast-mobile-popup-drawer .menu-item.juhec-nav-primary > .menu-link {
		background: transparent !important;
		color: var(--juhec-violet) !important;
		border-left: 3px solid var(--juhec-violet);
		border-radius: 0;
		padding-left: 14px !important;
		font-weight: 500;
	}
}

/* ============================================================
   30. COORDONNÉES DU PIED DE PAGE
   ============================================================ */

.juhec-footer-contact { line-height: 2; }

.juhec-footer-contact a { display: inline-block; }

/* Pastille WhatsApp à côté du numéro commercial */
.juhec-wa-tag {
	display: inline-block;
	background: #25D366;
	color: #0B3D20;
	font-family: 'Jost', sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 2px 7px;
	border-radius: 3px;
	margin-left: 6px;
	vertical-align: 2px;
}

.juhec-footer-adresse {
	display: inline-block;
	color: var(--juhec-bordure-2);
	margin-top: 4px;
}

/* Icônes sociales encore sans adresse : visibles mais neutres au survol */
.juhec-footer .juhec-fs[href="#"] { cursor: default; }

/* ============================================================
   31. CATÉGORIES ET ROUTINES — GRILLE EXPLICITE
   Les deux sections reposaient sur les colonnes Gutenberg. Sur
   mobile chaque carte prenait toute la largeur, à 45 px du bord
   alors que les grilles produit sont à 16 px, et la section
   « Nos catégories » mesurait 1 170 px de haut pour six liens.
   Passage en grille explicite : deux cartes par rangée, alignées
   sur la même gouttière que le reste de la page.
   ============================================================ */

.wp-block-columns.juhec-cats,
.wp-block-columns.juhec-routines {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
	align-items: stretch !important;
}

/* Gutenberg pose une base flex et une marge basse sur les colonnes.
   Les deux faussent la grille : la marge empêche l'étirement et
   creuse un écart de 20 px entre deux cartes d'une même rangée. */
.wp-block-columns.juhec-cats > .wp-block-column,
.wp-block-columns.juhec-routines > .wp-block-column {
	flex-basis: auto !important;
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-bottom: 0 !important;
}

@media (max-width: 781px) {

	/* Même gouttière que les grilles produit : un seul bord gauche
	   sur toute la hauteur de la page d'accueil. */
	.home .entry-content > .wp-block-columns {
		max-width: none !important;
		width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding: 0 16px !important;
		box-sizing: border-box !important;
		margin-bottom: 12px !important;
	}

	.wp-block-columns.juhec-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	/* Trois routines : deux par rangée laisserait une carte orpheline. */
	.wp-block-columns.juhec-routines {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 12px !important;
	}

	/* Carte compacte. Le titre était calé en haut d'un bloc de 44 px
	   imposé par la cible tactile, ce qui creusait un vide sous chaque
	   intitulé : on centre le texte dans ce bloc au lieu de l'aligner. */
	.wp-block-column.juhec-card {
		padding: 16px 12px 18px;
		justify-content: center;
	}

	.wp-block-column.juhec-card h3 { font-size: 16px; margin: 0 0 6px; }
	.wp-block-column.juhec-card h3::before { width: 22px; margin: 0 auto 10px; }

	.juhec-card h3 a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0 !important;
	}

	.wp-block-column.juhec-card p { font-size: 13px; line-height: 1.5; }
}

/* ============================================================
   32. PANIER ET COMMANDE — RECENTRAGE SOUS 1200 px
   Astra fait déborder les blocs `alignwide` dans la gouttière du
   conteneur avec une marge négative de 20 px de chaque côté, en
   comptant sur une largeur `auto` qui s'élargit d'autant. Mais
   WooCommerce impose `width: 100%` au bloc panier et au bloc
   commande : la largeur reste celle du conteneur, la marge négative
   ne décale donc que le bord gauche. Résultat mesuré en 375 px :
   bloc collé à gauche, 40 px de vide à droite.
   Les deux règles sont correctes séparément, elles se percutent.
   ============================================================ */

@media (max-width: 1200px) {
	.entry-content > .wp-block-woocommerce-cart.alignwide,
	.entry-content > .wp-block-woocommerce-checkout.alignwide,
	.ast-separate-container .entry-content > .wp-block-woocommerce-cart.alignwide,
	.ast-separate-container .entry-content > .wp-block-woocommerce-checkout.alignwide {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ============================================================
   33. BANDE RÉASSURANCE — ALIGNEMENT UNE FOIS EMPILÉE
   Chaque ligne était centrée individuellement (`justify-content:
   center`). Les trois intitulés n'ayant pas la même longueur, les
   icônes se retrouvaient à des abscisses différentes : 87, 66 et
   69 px en 375 px. « Livraison rapide », le plus long, décrochait
   des deux autres.
   On centre désormais le groupe, pas chaque ligne.
   ============================================================ */

@media (max-width: 781px) {
	.juhec-reassurance-inner {
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.juhec-rea-item { justify-content: flex-start !important; }
}

/* ============================================================
   34. ESPACE COMPTE — CARTE CENTRÉE
   Le formulaire de connexion occupait toute la largeur du contenu :
   des champs de 1 137 px sur un écran de bureau. On le ramène à une
   carte de 460 px, centrée, dans l'esprit du reste du site.
   ============================================================ */

.woocommerce-account .entry-title,
.woocommerce-account .ast-archive-title,
.woocommerce-account header.entry-header { text-align: center; }

.woocommerce-account .entry-header { margin-bottom: 6px; }

.woocommerce-account .woocommerce > h2,
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.register,
.woocommerce form.lost_reset_password {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

.woocommerce-account .woocommerce > h2 {
	text-align: center;
	font-size: 23px;
	margin: 0 auto 4px;
}

.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.register,
.woocommerce form.lost_reset_password {
	background: #FFFFFF;
	border: 1px solid var(--juhec-bordure);
	border-radius: 14px;
	box-shadow: 0 16px 38px -26px rgba(89, 50, 134, .45);
	padding: 26px 26px 24px;
	margin-top: 18px;
}

.woocommerce-account form.woocommerce-form-login .woocommerce-form-row,
.woocommerce-account form.register .woocommerce-form-row { margin-bottom: 16px; }

.woocommerce-account form label {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--juhec-violet-fonce);
	margin-bottom: 6px;
}

.woocommerce-account form .input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"] {
	width: 100%;
	min-height: 44px;
	padding: 10px 13px;
	border: 1px solid var(--juhec-bordure-2);
	border-radius: 8px;
	background: #FFFFFF;
	font-size: 15px;
	box-shadow: none;
}

.woocommerce-account form .input-text:focus,
.woocommerce-account form input:focus {
	border-color: var(--juhec-violet);
	box-shadow: 0 0 0 3px rgba(122, 82, 199, .18);
	outline: none;
}

/* Le bouton principal héritait du style secondaire des boutons
   WooCommerce : fond blanc et texte violet, alors que c'est l'action
   principale de la page. */
.woocommerce-account form.woocommerce-form-login button.woocommerce-form-login__submit,
.woocommerce-account form.register button.woocommerce-form-register__submit,
.woocommerce form.lost_reset_password button.button {
	width: 100% !important;
	min-height: 46px;
	border-radius: 8px;
	font-size: 14px;
	letter-spacing: .4px;
	margin: 4px 0 0 !important;
	float: none !important;
	background: var(--juhec-violet) !important;
	border: 1px solid var(--juhec-violet) !important;
	color: #FFFFFF !important;
}

.woocommerce-account form.woocommerce-form-login button.woocommerce-form-login__submit:hover,
.woocommerce-account form.register button.woocommerce-form-register__submit:hover,
.woocommerce form.lost_reset_password button.button:hover {
	background: var(--juhec-violet-fonce) !important;
	border-color: var(--juhec-violet-fonce) !important;
	color: #FFFFFF !important;
}

.woocommerce-account form .form-row .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 400;
	color: var(--juhec-gris);
	margin: 0 0 14px;
}

.woocommerce-account .woocommerce-LostPassword {
	text-align: center;
	margin: 16px 0 0 !important;
}

.woocommerce-account .woocommerce-LostPassword a { font-size: 13.5px; }

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	border-radius: 10px;
	font-size: 14px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.woocommerce-account .woocommerce-message .button { margin: 0; }

/* Espace connecté : le menu et le contenu deviennent deux cartes. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 14px 34px -26px rgba(89, 50, 134, .4);
}

.woocommerce-account .woocommerce-MyAccount-content {
	background: #FFFFFF;
	border: 1px solid var(--juhec-bordure);
	border-radius: 12px;
	padding: 24px 26px;
	box-shadow: 0 14px 34px -26px rgba(89, 50, 134, .4);
}

/* ============================================================
   35. TITRES DE PAGE — VIOLET PLUTÔT QU'ENCRE
   « Accueil », « Boutique », « Contact »… sortaient en #261F2E,
   presque noir : correct, mais dur en tête de page. Le violet de
   marque adoucit sans rien perdre en lisibilité — 4,85:1 sur le
   fond lavande, pour un seuil de 3:1 à cette taille.
   Le nom du produit reste en encre : il partage sa colonne avec le
   prix, déjà violet, et deux violets côte à côte se diluent.
   ============================================================ */

/* La règle de la section 10 (.ast-article-single .entry-title, 0-2-0)
   l'emportait sur un simple h1.entry-title (0-1-1) : « Accueil »,
   « Contact » et « À propos » restaient en encre alors que « Boutique »,
   rendu par un autre gabarit, passait bien au violet. On monte donc au
   même niveau de spécificité. */
.ast-article-single h1.entry-title,
.ast-article-post h1.entry-title,
.woocommerce-products-header__title,
h1.entry-title,
.ast-archive-title,
.woocommerce-account .woocommerce > h2 {
	color: var(--juhec-violet);
}

/* ============================================================
   36. ACCÈS AU COMPTE SUR ORDINATEUR
   La barre du bas est un motif de téléphone : elle est masquée
   au-dessus de 921 px, et c'est volontaire. Mais elle portait la
   seule entrée « Compte » du site : sur ordinateur, il fallait
   dérouler toute la page jusqu'au pied pour retrouver son compte.
   On rétablit la symétrie là où un visiteur d'ordinateur la
   cherche — en haut à droite, à côté du panier.
   ============================================================ */

.juhec-topaccount {
	position: relative;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: 10px;
	transition: opacity .16s ease;
}

.juhec-topaccount:hover { opacity: .8; }

/* Sous 921 px, la barre du bas reprend la main, comme pour le panier. */
@media (max-width: 921px) {
	.juhec-topaccount { display: none; }
}

/* ============================================================
   37. EN-TÊTE RESSERRÉ (ordinateur)
   La rangée mesurait 197 px pour un logo de 64 px et un menu de
   38 px : 34 px de retrait au-dessus du logo, 16 px de part et
   d'autre dans la zone de marque, 24 px sous le menu. Beaucoup
   d'air pour rien, et le contenu de la page repoussé d'autant.
   Rythme visé : un petit espace régulier entre chaque bloc.
   Mesuré après : 7 px sous la barre violette, 14 px entre le logo
   et le menu, 16 px sous le menu. Rangée ramenée à 139 px.
   L'en-tête mobile a sa propre structure et n'est pas touché.
   ============================================================ */

@media (min-width: 922px) {
	.ast-primary-header-bar .site-primary-header-wrap { min-height: 0 !important; }

	.ast-primary-header-bar .site-header-primary-section-left {
		padding-top: 8px !important;
		padding-bottom: 0 !important;
	}

	.ast-primary-header-bar .site-branding,
	.ast-primary-header-bar .juhec-logo {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.ast-primary-header-bar .site-header-primary-section-right {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.ast-primary-header-bar .ast-builder-menu-1 {
		padding-top: 12px !important;
		padding-bottom: 14px !important;
	}

	.ast-primary-header-bar .main-navigation {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* ============================================================
   38. ACCUEIL — BANNIÈRE RESSERRÉE
   La bannière mesurait 440 px avec 60 px de retrait interne
   au-dessus du texte : 84 px séparaient le titre de page de la
   première ligne du diaporama. Ramené à 352 px de haut et 61 px
   d'écart, sans rogner sur le bouton ni les puces.
   ============================================================ */

.home header.entry-header { margin-bottom: 10px; }

.juhec-hero { margin-bottom: 1.6rem; }

.juhec-hero-track { min-height: 330px; }

.juhec-hero-slide {
	padding-top: 34px;
	padding-bottom: 46px;
}

.juhec-hero-title { font-size: 38px; }

.juhec-hero-dots { bottom: 16px; }

@media (max-width: 768px) {
	.juhec-hero-track { min-height: 320px; }
	.juhec-hero-slide { padding-top: 28px; padding-bottom: 44px; }
	.juhec-hero-title { font-size: 26px; }
}

/* ============================================================
   39. RECETTE FINALE — TROIS CORRECTIFS MESURÉS
   Relevés sur les quinze pages du site, aux deux largeurs.
   ============================================================ */

/* a. Le compteur du panier, dans la barre du bas, était en blanc sur
   l'or : 2,4:1. C'est l'élément qui annonce à la cliente ce qu'elle a
   dans son panier, il était présent sur toutes les pages en mobile. */
.juhec-mb-badge {
	background: var(--juhec-violet);
	color: #FFFFFF;
}

/* b. Le surtitre de la bannière était en or sur la lavande : 2,14:1.
   L'or reste la couleur d'accent, mais pas pour du texte sur fond clair. */
.juhec-hero-eyebrow { color: var(--juhec-or-fonce); }

/* c. Deux gouttières cohabitaient en mobile : 20 px pour le contenu
   éditorial, 16 px pour les grilles produit et le pied de page. Quatre
   pixels d'écart, invisibles isolément, mais qui décalent le bord gauche
   d'un bloc à l'autre en faisant défiler. Tout passe à 16 px. */
@media (max-width: 781px) {
	.ast-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* d. Le bouton « afficher le mot de passe » faisait 15 × 16 px. */
.woocommerce-account form .show-password-input,
.woocommerce-account form .password-input button {
	min-width: 40px;
	min-height: 40px;
}

/* ============================================================
   40. BOUTON FLOTTANT — « UN CONSEIL ? »
   L'icône verte seule ne disait rien du service rendu. Le conseil
   et le suivi n'étaient annoncés que sur la page À propos, que
   personne n'ouvre. Le bouton s'ouvre donc en pastille libellée,
   puis se replie en rond au bout de six secondes.

   Le libellé est posé sur du blanc, pas sur le vert : du texte
   blanc sur le vert WhatsApp tombe à 1,98:1. Sur blanc, l'encre
   donne 15,9:1. L'icône garde son rond vert, qui reste le signal
   reconnaissable.
   ============================================================ */

.juhec-whatsapp {
	width: auto;
	height: auto;
	min-width: 52px;
	padding: 5px;
	border-radius: 26px;
	background: #FFFFFF;
	flex-direction: row-reverse;
	box-shadow: 0 6px 18px rgba(38, 31, 46, .20);
}

.juhec-whatsapp:hover { color: inherit; }

.juhec-whatsapp svg {
	background: #25D366;
	color: #FFFFFF;
	border-radius: 50%;
	padding: 8px;
	box-sizing: content-box;
	width: 26px;
	height: 26px;
	flex: none;
}

.juhec-wa-libelle {
	font-family: 'Jost', sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--juhec-encre);
	white-space: nowrap;
	overflow: hidden;
	max-width: 220px;
	margin: 0 6px 0 12px;
	opacity: 1;
	animation: juhecWaReplie .45s ease 6s forwards;
}

@keyframes juhecWaReplie {
	to { max-width: 0; margin-left: 0; margin-right: 0; opacity: 0; }
}

/* Au survol, la pastille se redéploie. */
.juhec-whatsapp:hover .juhec-wa-libelle,
.juhec-whatsapp:focus-visible .juhec-wa-libelle {
	animation: none;
	max-width: 220px;
	margin: 0 6px 0 12px;
	opacity: 1;
}

/* Mouvement réduit : la pastille reste ouverte plutôt que de disparaître. */
@media (prefers-reduced-motion: reduce) {
	.juhec-wa-libelle { animation: none; }
}

@media (max-width: 921px) {
	.juhec-whatsapp { width: auto; height: auto; min-width: 48px; padding: 4px; border-radius: 24px; }
	.juhec-whatsapp svg { padding: 7px; width: 24px; height: 24px; }
	.juhec-wa-libelle { font-size: 12.5px; margin: 0 5px 0 11px; }
}

/* ============================================================
   41. LIGNE DE CONSEIL SOUS LE BOUTON D'ACHAT
   L'hésitation naît là : le produit sous les yeux, le prix aussi,
   et personne à qui demander. La ligne se glisse entre le bouton
   et le rappel de livraison.
   Le vert de l'icône est assombri à #1E9E5A : le vert WhatsApp
   d'origine tombe à 1,98:1 sur blanc, sous le seuil de 3:1 exigé
   pour un élément graphique porteur de sens.
   ============================================================ */

.juhec-conseil {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 16px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--juhec-bordure);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--juhec-gris);
}

.juhec-conseil svg {
	color: #1E9E5A;
	flex: none;
	margin-top: 2px;
}

.juhec-conseil a {
	color: var(--juhec-violet);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.juhec-conseil a:hover { color: var(--juhec-violet-fonce); }

@media (max-width: 781px) {
	.juhec-conseil { font-size: 13px; }
	/* Cible tactile confortable pour le lien, sans casser la ligne. */
	.juhec-conseil a { display: inline-block; padding: 6px 0; }
}

/* ------------------------------------------------------------
   Rappel de livraison : le résumé de la fiche produit est centré,
   et la liste en héritait. Les puces restaient calées à gauche
   pendant que leur texte partait au milieu — 168 px d'écart entre
   une puce et la ligne qu'elle annonce. Mesuré après correction : 12 px.
   ------------------------------------------------------------ */

.single-product div.product .summary ul.juhec-delivery-note,
.single-product div.product .summary ul.juhec-delivery-note li {
	text-align: left;
}

/* ============================================================
   42. UN SEUL MODÈLE DE CARTE PRODUIT
   Les blocs de l'accueil (meilleures ventes, nouveautés,
   promotions) et le catalogue affichaient deux cartes
   différentes : titre 14,5 px gras aligné à gauche d'un côté,
   12 px maigre centré de l'autre ; 6 colonnes contre 4 ; rayon
   de 8 px contre 10. Sur une même page, ça se voit.
   Tout s'aligne sur le catalogue, et tous les textes sont centrés.
   ============================================================ */

.wc-block-grid__product {
	border-radius: 10px;
	border-color: var(--juhec-lavande-2);
}

.wc-block-grid__product-title {
	font-size: 12px;
	font-weight: 400;
}

.wc-block-grid__product-price,
.wc-block-grid__product-price .woocommerce-Price-amount { font-size: 14px; }

.wc-block-grid__product-add-to-cart .wp-block-button__link { font-size: 10px; }

/* Tous les textes des cartes sont centrés, des deux côtés. */
.wc-block-grid__product,
.wc-block-grid__product-title,
.wc-block-grid__product-price,
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .ast-loop-product__link,
.woocommerce ul.products li.product .price {
	text-align: center;
}

.wc-block-grid__product-price,
.woocommerce ul.products li.product .price { display: block; }

/* Même densité que le catalogue : 4 colonnes, 2 sous la tablette. */
.wc-block-grid__products {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Même cadre que le catalogue. La pleine largeur d'écran reposait sur
   la largeur 100vw, qui compte la barre de défilement : les grilles démarraient
   8 px avant le catalogue. On les remet simplement dans le conteneur,
   les deux bords coïncident alors au pixel. */
.wc-block-grid.wp-block-product-best-sellers,
.wc-block-grid.wp-block-product-new,
.wc-block-grid.wp-block-product-on-sale {
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (max-width: 921px) {
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}


/* ------------------------------------------------------------
   Puce active du diaporama : la règle utilisait le raccourci
   `background`, qui réinitialise `background-clip` à `border-box`.
   La puce active peignait donc sa cible tactile de 44 px entière
   en violet, à côté de puces de 12 px. Un gros point sur l'accueil.
   ------------------------------------------------------------ */

.juhec-hero-dot.is-active {
	background: none;
	background-color: var(--juhec-violet);
	background-clip: content-box;
}

/* ============================================================
   43. BOUTON « AJOUTER AU PANIER » — UN SEUL MODÈLE
   Deux défauts relevés à l'œil :
   — sur le catalogue, le texte du bouton était calé à gauche
     alors que le bouton occupe toute la largeur de la carte ;
   — sur les blocs de l'accueil, le bouton était plus gros que
     celui du catalogue : 11,5 px contre 10, 44 px de haut contre
     29, coins à 4 px contre 6, sans les majuscules ni l'interlettre.
   La règle de la section 26 imposait ces valeurs en !important :
   on reprend donc la main au même niveau.
   ============================================================ */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product a.add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart a {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	text-transform: uppercase !important;
	letter-spacing: .5px !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	border-radius: 6px !important;
	padding: 8px 6px !important;
	min-height: 0 !important;
}

/* Sur écran tactile, les deux passent à 44 px — ensemble. */
@media (max-width: 921px) {
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product a.add_to_cart_button,
	.wc-block-grid__product-add-to-cart .wp-block-button__link,
	.wc-block-grid__product-add-to-cart a {
		min-height: 44px !important;
		padding: 13px 6px !important;
	}
}

/* ============================================================
   44. PANIER : COMPTEUR PLUTÔT QUE LIEN « VOIR LE PANIER »
   WooCommerce ajoutait un lien « Voir le panier » sous le bouton
   après chaque ajout : il décalait la carte et dupliquait une
   fonction déjà présente dans l'en-tête. On le masque, et les
   deux compteurs se rafraîchissent d'eux-mêmes — voir les
   fragments enregistrés dans functions.php.
   ============================================================ */

.woocommerce a.added_to_cart,
.wc-block-grid__product .added_to_cart,
.woocommerce ul.products li.product a.added_to_cart {
	display: none !important;
}

/* ------------------------------------------------------------
   Bannière d'accueil : sur mobile, le bouton passait 6 px sous
   les puces du diaporama, dont la cible tactile fait 44 px de
   haut. On rend son espace au bas de la diapositive.
   Mesuré après : 29 px entre le bouton et les puces.
   ------------------------------------------------------------ */

@media (max-width: 768px) {
	.juhec-hero-slide { padding-bottom: 74px; }
}