/*
 * Compatibilité avec le contenu construit sous Astra et Spectra.
 *
 * 1. Les variables et classes de couleur d'Astra : le CSS généré par Spectra et
 *    SureForms, et les couleurs choisies dans l'éditeur, y font référence. Sans
 *    elles, textes, fonds et formulaires perdent leurs couleurs.
 * 2. Les règles utiles de l'ancien CSS additionnel (Personnaliser > CSS
 *    additionnel d'Astra), reprises ici car ce CSS reste attaché à Astra.
 *    Les règles qui ne visaient que l'en-tête, le menu mobile et le méga menu
 *    d'Astra ne sont pas reprises : le thème les remplace.
 *
 * Valeurs relevées sur le staging le 2026-10-01. Ce fichier peut être retiré quand
 * toutes les pages auront été converties en blocs natifs (filtre wooh_compat_astra).
 *
 * @package Wooh
 */

/* =========================================================
   1. Variables d'Astra (palette globale et mesures)
   ========================================================= */
:root {
	--ast-global-color-0: #c0d18f;
	--ast-global-color-1: #dbe793;
	--ast-global-color-2: #0f172a;
	--ast-global-color-3: #43562e;
	--ast-global-color-4: #f2f2f2;
	--ast-global-color-5: #ffffff;
	--ast-global-color-6: #d5ead8;
	--ast-global-color-7: #0c1406;
	--ast-global-color-8: #222222;
	--ast-global-color-primary: var(--ast-global-color-5);
	--ast-global-color-secondary: var(--ast-global-color-4);
	--ast-global-color-alternate-background: var(--ast-global-color-7);
	--ast-global-color-subtle-background: var(--ast-global-color-6);
	--ast-border-color: #dddddd;
	--ast-search-border-color: #e7e7e7;
	--ast-title-layout-bg: #eeeeee;
	--ast-body-line-height: 1.65em;
	--ast-normal-container-width: 1590px;
	--ast-narrow-container-width: 750px;
	--ast-container-default-xlg-padding: 6.67em;

	/* Mêmes couleurs sous le nom des préréglages de l'éditeur. */
	--wp--preset--color--ast-global-color-0: var(--ast-global-color-0);
	--wp--preset--color--ast-global-color-1: var(--ast-global-color-1);
	--wp--preset--color--ast-global-color-2: var(--ast-global-color-2);
	--wp--preset--color--ast-global-color-3: var(--ast-global-color-3);
	--wp--preset--color--ast-global-color-4: var(--ast-global-color-4);
	--wp--preset--color--ast-global-color-5: var(--ast-global-color-5);
	--wp--preset--color--ast-global-color-6: var(--ast-global-color-6);
	--wp--preset--color--ast-global-color-7: var(--ast-global-color-7);
	--wp--preset--color--ast-global-color-8: var(--ast-global-color-8);

	/* Marges à la carte de l'ancien CSS additionnel (sur mobile, 20 px). */
	--wooh-marge-mobile: 20px;
}

/* Classes posées par l'éditeur quand une couleur Astra a été choisie. */
.has-ast-global-color-0-color { color: var(--ast-global-color-0) !important; }
.has-ast-global-color-1-color { color: var(--ast-global-color-1) !important; }
.has-ast-global-color-2-color { color: var(--ast-global-color-2) !important; }
.has-ast-global-color-3-color { color: var(--ast-global-color-3) !important; }
.has-ast-global-color-4-color { color: var(--ast-global-color-4) !important; }
.has-ast-global-color-5-color { color: var(--ast-global-color-5) !important; }
.has-ast-global-color-6-color { color: var(--ast-global-color-6) !important; }
.has-ast-global-color-7-color { color: var(--ast-global-color-7) !important; }
.has-ast-global-color-8-color { color: var(--ast-global-color-8) !important; }
.has-ast-global-color-0-background-color { background-color: var(--ast-global-color-0) !important; }
.has-ast-global-color-1-background-color { background-color: var(--ast-global-color-1) !important; }
.has-ast-global-color-2-background-color { background-color: var(--ast-global-color-2) !important; }
.has-ast-global-color-3-background-color { background-color: var(--ast-global-color-3) !important; }
.has-ast-global-color-4-background-color { background-color: var(--ast-global-color-4) !important; }
.has-ast-global-color-5-background-color { background-color: var(--ast-global-color-5) !important; }
.has-ast-global-color-6-background-color { background-color: var(--ast-global-color-6) !important; }
.has-ast-global-color-7-background-color { background-color: var(--ast-global-color-7) !important; }
.has-ast-global-color-8-background-color { background-color: var(--ast-global-color-8) !important; }
.has-ast-global-color-0-border-color { border-color: var(--ast-global-color-0) !important; }
.has-ast-global-color-1-border-color { border-color: var(--ast-global-color-1) !important; }
.has-ast-global-color-2-border-color { border-color: var(--ast-global-color-2) !important; }
.has-ast-global-color-3-border-color { border-color: var(--ast-global-color-3) !important; }
.has-ast-global-color-4-border-color { border-color: var(--ast-global-color-4) !important; }
.has-ast-global-color-5-border-color { border-color: var(--ast-global-color-5) !important; }
.has-ast-global-color-6-border-color { border-color: var(--ast-global-color-6) !important; }
.has-ast-global-color-7-border-color { border-color: var(--ast-global-color-7) !important; }
.has-ast-global-color-8-border-color { border-color: var(--ast-global-color-8) !important; }

/* =========================================================
   2. Repris de l'ancien CSS additionnel
   ========================================================= */

/* ---------- Marges à la carte (Avancé > Classe(s) CSS supplémentaire(s)) ----------
   wooh-marges : marges du site ; wooh-plein-mobile : bord à bord sur mobile ;
   wooh-plein-ordi : bord à bord sur ordinateur et tablette. */
.wooh-marges {
	padding-left: var(--wooh-marge) !important;
	padding-right: var(--wooh-marge) !important;
}
@media (max-width: 767px) {
	.wooh-marges {
		padding-left: var(--wooh-marge-mobile) !important;
		padding-right: var(--wooh-marge-mobile) !important;
	}
	.wooh-plein-mobile {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
@media (min-width: 768px) {
	.wooh-plein-ordi {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ---------- Blocs Vitrine ---------- */
.vtr-dip.vtr-dip--cadre {
	--vtr-dip-marge: 48px;
}
.vtr-recit a.vtr-recit__bouton {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 15px;
}
.vtr-panier,
.vtr-commande {
	max-width: none !important;
}
@media (min-width: 922px) {
	.vtr-panier,
	.vtr-commande {
		--vtr-cadre: var(--wooh-largeur) !important;
		--vtr-p-marge: 48px;
		--vtr-c-marge: 48px;
	}
}

/* ---------- Héros et sections Spectra ---------- */
.home-hero {
	min-height: 88svh !important;
}
.wooh-hero {
	position: relative !important;
	overflow: hidden;
	margin: 0 !important;
}
.wooh-hero .img-absolute {
	position: absolute !important;
	height: 100%;
}
.wooh-hero .img-absolute figure img,
.wooh-hero .img-absolute figure {
	height: 100% !important;
	object-fit: cover !important;
}
.hero-image,
.hero-image figure a,
.hero-image figure img,
.hero-image figure {
	height: 100% !important;
	object-fit: cover !important;
}
.wooh-hero .hero-content {
	position: relative;
	z-index: 2;
}
.bloc-1 {
	height: 80%;
}
.bloc-2 {
	height: 120%;
}
.bloc-3 {
	height: 120%;
	top: -20%;
}
.bloc-4 {
	height: 80%;
	top: 20%;
}
.products-most-sold {
	margin: 0 !important;
}
.uagb-swiper,
.swiper-content,
.swiper-content > .wp-block-uagb-container,
.product-bloc-most-sold {
	height: 100% !important;
}
.faq-title {
	font-size: 1.2em;
}

/* ---------- Boutons et cartes Spectra ---------- */
.CTA > a {
	padding: 8px 20px !important;
	text-transform: uppercase;
	border-radius: 4px;
	background: #ffe200 !important;
}
.CTA > a:hover {
	color: #000 !important;
}
.bg-hover-effect .simple-btn a {
	transition: all 0.3s ease-in-out !important;
}
.bg-hover-effect:hover .simple-btn a {
	background: #050505 !important;
}
.bg-hover-effect:hover .simple-btn a span {
	color: #fff;
}
.bg-hover-effect .uagb-infobox-cta-link {
	padding-bottom: 8px;
	margin-left: 0;
	border-bottom: 1px solid transparent;
}
.bg-hover-effect:hover .uagb-infobox-cta-link {
	padding-bottom: 8px;
	margin-left: 8px;
	border-bottom: 1px solid #fff;
}
.bg-hover-effect .uagb-ifb-title-prefix {
	background: #ffe200;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 3px;
}
.bloc-icon-category .uagb-ifb-image-content {
	opacity: 0.8;
	transition: all 0.3s ease-in-out !important;
	margin-bottom: 10px;
}
.bloc-icon-category .uagb-ifb-title {
	color: #525252;
	transition: all 0.5s ease-in-out !important;
}
.bloc-icon-category:hover .uagb-ifb-title {
	color: #000;
}
.bloc-icon-category:hover .uagb-ifb-image-content {
	opacity: 1;
	margin-bottom: 0;
}

/* ---------- Formulaires (SureForms, Brevo, options de produits) ---------- */
.srfm-form {
	row-gap: 0 !important;
}
.sib-form {
	padding: 0 12px 24px !important;
}
.woocommerce-js form .form-row,
.wc-pao-addon-wrap,
.wc-pao-addon {
	padding: 0;
}
.grecaptcha-badge {
	/* Autorisé par Google seulement si le texte « protégé par reCAPTCHA » figure sur les formulaires. */
	display: none;
}

/* ---------- WooCommerce ---------- */
.woocommerce-mini-cart__buttons .wc-forward {
	color: #fff !important;
}
.woocommerce-tabs {
	padding-top: 0 !important;
}
.summary {
	margin-bottom: 0 !important;
}
#shipping_method li {
	text-indent: 0 !important;
}
.summary.entry-summary {
	display: flex;
	flex-direction: column;
}
.summary.entry-summary > .woocommerce-product-details__short-description { order: 1; }
.summary.entry-summary > .price { order: 2; }
.summary.entry-summary > .variations_form,
.summary.entry-summary > .cart { order: 3; }
.summary.entry-summary > #wc-stripe-express-checkout-element { order: 4; }
.summary.entry-summary > .wooh-product-shipping { order: 5; }
.summary.entry-summary > .product_meta { order: 7; }
.gk-tags-badges-wrap--loop {
	position: static !important;
	float: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center;
	gap: 4px !important;
	margin: 12px 16px 4px !important;
	padding: 0 !important;
	width: auto !important;
}

/* ---------- Divers ---------- */
.wooh-s3dv__tabs {
	column-gap: 5px;
}
.wooh-s3dv__tab {
	font-size: 0.85em;
}
.ers-result-banner {
	text-align: center;
	border: 1px solid #efefef;
	padding: 30px;
	font-size: 1.2rem;
	background: #fafafa;
}
lite-youtube {
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 16 / 9;
}
.wp-block-breadcrumbs ol {
	margin: 0 !important;
	padding: 0 !important;
}
.wp-block-breadcrumbs {
	font-size: 13px;
	letter-spacing: 0.02em;
	margin-bottom: 24px;
}
@media (hover: none) and (pointer: coarse) {
	.section-parallax {
		background-attachment: scroll !important;
		background-size: cover !important;
		background-position: center !important;
	}
	.bloc-1,
	.bloc-2,
	.bloc-3,
	.bloc-4 {
		height: auto;
		top: 0;
	}
}

/* ---------- Complianz : bandeau cookies dans le langage du site ---------- */
#cmplz-manage-consent .cmplz-manage-consent {
	display: none !important;
}
.cmplz-cookiebanner {
	border-radius: 0 !important;
	box-shadow: 0 12px 40px rgba(20, 23, 31, .12) !important;
	font-family: inherit !important;
}
.cmplz-cookiebanner .cmplz-logo {
	display: none !important;
}
.cmplz-cookiebanner .cmplz-header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.cmplz-cookiebanner .cmplz-title {
	text-align: left !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	color: #14171f !important;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-message p {
	color: #3d4137 !important;
	font-weight: 300 !important;
}
.cmplz-cookiebanner .cmplz-btn {
	border-radius: 0 !important;
	border: 1px solid #14171f !important;
	background: #fff !important;
	color: #14171f !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-btn:hover {
	background: #14171f !important;
	color: #fff !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background: #2d313a !important;
	border-color: #2d313a !important;
}
.cmplz-cookiebanner .cmplz-close {
	color: #14171f !important;
}
.cmplz-cookiebanner .cmplz-links a {
	color: #5a5f55 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
@media (max-width: 760px) {
	.cmplz-cookiebanner .cmplz-message,
	.cmplz-cookiebanner .cmplz-message p {
		font-size: 13px !important;
	}
	.cmplz-cookiebanner .cmplz-buttons {
		gap: 8px !important;
	}
}

/* ---------- Avis Google (Trustindex) ---------- */
.ti-widget,
.ti-widget * {
	font-family: inherit !important;
}
.ti-widget[data-layout-id][data-set-id] .ti-reviews-container .ti-review-item > .ti-inner {
	background: #fff !important;
	border: 1px solid #e6e6e1 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 24px !important;
}
.ti-widget[data-layout-id][data-set-id] .ti-reviews-container .ti-review-item:hover > .ti-inner {
	border-color: #14171f !important;
}
.ti-widget .ti-name {
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #14171f !important;
}
.ti-widget .ti-date {
	font-size: 12px !important;
	font-weight: 300 !important;
	color: #8a8e84 !important;
}
.ti-widget .ti-review-content,
.ti-widget .ti-review-content * {
	font-size: 14px !important;
	font-weight: 300 !important;
	line-height: 1.55 !important;
	color: #3d4137 !important;
}
.ti-widget .ti-read-more,
.ti-widget .ti-read-more * {
	font-size: 12px !important;
	color: #14171f !important;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}
.ti-widget .ti-verified-review {
	filter: grayscale(1) !important;
	opacity: .55;
}
.ti-widget .ti-rating-text,
.ti-widget .ti-rating-text strong {
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: #14171f !important;
}
.ti-widget .ti-footer .ti-rating-text span,
.ti-widget .ti-footer .ti-rating-text {
	font-weight: 300 !important;
}
.ti-widget .ti-large-logo img {
	max-height: 26px !important;
	width: auto !important;
}
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-prev,
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-next,
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-prev:hover,
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-next:hover,
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-prev:focus,
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-next:focus {
	border: 1px solid #d8d8d2 !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	outline: none !important;
}
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-prev:hover,
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-next:hover {
	border-color: #14171f !important;
}
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-prev::before,
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-next::before,
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-prev:hover::before,
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-next:hover::before {
	border-color: #14171f !important;
}
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-prev:focus-visible,
.ti-widget[data-layout-id][data-set-id] .ti-controls .ti-next:focus-visible {
	outline: 1px solid #14171f !important;
	outline-offset: 2px;
}
.ti-widget .ti-verified-by,
.ti-widget .ti-verified-by * {
	background: none !important;
	border: 0 !important;
	font-size: 11px !important;
	font-weight: 300 !important;
	color: #8a8e84 !important;
}
.ti-widget .ti-reply-by-owner-title,
.ti-widget .ti-reply-by-owner-title * {
	font-weight: 400 !important;
}
.ti-widget .ti-star {
	filter: none !important;
}

/* ---------- Conteneurs Spectra « pleine largeur » ----------
   Sous Astra, un conteneur racine alignfull occupait toute la largeur de l'écran.
   Spectra lui impose des marges automatiques : dans le thème, il restait pris dans
   les marges de la page (et plafonné à 1590 px), si bien que la classe wooh-marges
   doublait la marge sur grand écran et écrasait le contenu. On le ramène bord à bord. */
.wooh-contenu > .wp-block-uagb-container.uagb-is-root-container.alignfull {
	width: auto !important;
	max-width: none !important;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, var(--wooh-marge))) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wooh-marge))) !important;
}