/* Fiche produit en gabarit WooCommerce natif (ROADMAP 1.12) : woocommerce/content-single-product.php + inc/gabarit-produit.php.
   Chargé seulement sur les fiches produits (cf. inc/fiche-produit.php). Aucun sélecteur Divi Theme Builder. */

/* ---------- Mise en page ---------- */
.flux-produit-page #main-content .container {
	padding-top: 40px;
}

.flux-produit__entete {
	margin-bottom: 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid #e4e4e1;
}

.flux-produit .woocommerce-breadcrumb {
	margin: 0 0 18px;
	font-size: 14px;
	color: #201f1b;
}

.flux-produit .product_title {
	margin: 0;
	padding: 0;
	font: 500 40px/1.15 Oswald, sans-serif;
	color: #201f1b;
}

.flux-produit__haut {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* Divi et WooCommerce mettent galerie et résumé en flottants à 48 % : la grille s'en charge. */
.woocommerce div.product.flux-produit .flux-produit__haut div.images,
.woocommerce div.product.flux-produit .flux-produit__haut div.summary {
	float: none;
	width: auto;
	margin: 0;
}

/* ---------- Colonne d'achat : un seul panneau ---------- */
.flux-achat {
	padding: 26px 28px;
	border-radius: 18px;
	background: #f7f7f7;
}

.flux-achat > * {
	margin: 0 0 18px !important;
}

.flux-achat > :last-child {
	margin-bottom: 0 !important;
}

/* Prix : « Prix sur devis », Oswald 32 px vert foncé */
.woocommerce div.product.flux-produit .flux-achat p.price,
.flux-achat .price .flux-prix-devis {
	font: 600 32px/1.1 Oswald, sans-serif;
	color: #5a8c39;
}

/* Description courte, séparée par un filet */
.flux-achat__extrait {
	padding-top: 18px;
	border-top: 1px solid #e4e4e1;
}

.flux-achat__extrait ul {
	margin: 10px 0 0;
	padding-left: 18px;
}

/* Pastilles 5flux (origine, recyclable, garantie, service) sur deux colonnes */
.flux-pastilles-5flux {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
	padding: 0 !important;
	list-style: none !important;
}

.flux-pastilles-5flux li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.flux-pastilles-5flux__icone {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid #e4e4e1;
	border-radius: 50%;
	background: #fff;
}

.flux-pastilles-5flux__icone img {
	width: 18px;
	height: auto;
}

/* ---------- Variantes : pastilles ---------- */
.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr,
.single-product .variations th,
.single-product .variations td {
	display: block;
	width: 100%;
	padding: 0 !important;
	border: 0;
	text-align: left;
}

.single-product .variations tr + tr {
	margin-top: 16px;
}

.single-product .variations th.label label {
	display: block;
	margin-bottom: 8px;
	font: 700 13px/1.3 "Open Sans", sans-serif !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #201f1b !important;
}

.single-product .variations .flux-choix {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #6b6a66;
}

.single-product .variations select.flux-pastilles-source {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Divi dessine la flèche de ses listes sur tout span de la cellule : pas sur les pastilles. */
.single-product .variations td.value span::after {
	display: none !important;
}

.flux-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.flux-pastille {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #cfcfcb;
	border-radius: 999px;
	background: #fff;
	font: 600 14px/1.2 "Open Sans", sans-serif;
	color: #201f1b;
	cursor: pointer;
}

.flux-pastille.has-color {
	padding-left: 7px;
}

.flux-pastille i {
	flex: none;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 50%;
}

.flux-pastille[aria-pressed="true"] {
	border: 2px solid #201f1b;
}

.flux-pastille.is-unavailable {
	opacity: .4;
	text-decoration: line-through;
}

.flux-pastille:focus-visible {
	outline: 2px solid #71aa4a;
	outline-offset: 2px;
}

/* Mobile : les couleurs (libellés longs « Rouge RAL 3020 ») passent sur deux colonnes au lieu d'une par ligne. */
@media (max-width: 767px) {
	.flux-pastilles:has(.has-color) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.flux-pastilles:has(.has-color) .flux-pastille {
		gap: 6px;
		padding: 4px 10px 4px 6px;
		border-radius: 22px;
		font-size: 13px;
		text-align: left;
	}

	.flux-pastilles:has(.has-color) .flux-pastille i {
		width: 26px;
		height: 26px;
	}
}

.single-product .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
}

/* ---------- Quantité + bouton de devis sur une ligne ---------- */
/* Variable : la quantité est dans .woocommerce-variation-add-to-cart, le bouton YITH à côté, dans .single_variation_wrap.
   Simple : les deux sont dans form.cart. */
.single-product .single_variation_wrap,
.single-product form.cart:not(.variations_form) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 14px;
	margin-top: 18px;
}

.single-product .single_variation_wrap > .single_variation {
	flex-basis: 100%;
}

.single-product .single_variation_wrap > .single_variation:empty,
.single-product .single_variation_wrap > .clear,
.single-product form.cart > .clear {
	display: none;
}

.single-product .single_variation_wrap .woocommerce-variation-add-to-cart {
	display: block;
	flex: none;
	margin: 0;
}

/* Le CSS de YITH masque tous les boutons de .variations_button (pour cacher le bouton panier) : on rétablit − / +. */
.single-product .single_variation_wrap .variations_button button.flux-qty__btn,
.single-product form.cart button.flux-qty__btn {
	display: block !important;
}

.single-product .yith-ywraq-add-to-quote .ajax-loading {
	position: absolute;
}

.flux-qty-field {
	flex: none;
}

.flux-qty__label {
	display: block;
	margin-bottom: 8px;
	font: 700 13px/1.3 "Open Sans", sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.single-product .quantity.flux-qty {
	display: inline-flex !important;
	align-items: stretch;
	height: 50px;
	margin: 0 !important;
	border: 1px solid #cfcfcb;
	border-radius: 3px;
	background: #fff;
}

.flux-qty__btn {
	width: 44px;
	border: 0;
	background: none;
	font-size: 20px;
	color: #201f1b;
	cursor: pointer;
}

.single-product .quantity.flux-qty input.qty {
	width: 48px !important;
	height: auto !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-inline: 1px solid #e4e4e1 !important;
	border-radius: 0;
	background: #fff !important;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
}

.single-product .quantity.flux-qty input.qty::-webkit-inner-spin-button,
.single-product .quantity.flux-qty input.qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.single-product .yith-ywraq-add-to-quote {
	flex: 1 1 0;
	min-width: 200px;
	margin: 0 !important;
}

/* YITH masque son bouton dès que la variante est incomplète, puis le réaffiche après un appel AJAX.
   On le garde visible (grisé par js/devis-variations.js), sauf quand YITH affiche son message
   (« déjà dans la liste » ou « produit ajouté »). */
.single-product .yith-ywraq-add-to-quote:not(:has(.yith_ywraq_add_item_response_message)) .yith-ywraq-add-button {
	display: block !important;
}

/* Bouton de devis YITH : pleine largeur, Oswald, sans la flèche des boutons WooCommerce de Divi */
.woocommerce div.product.flux-produit .yith-ywraq-add-to-quote a.add-request-quote-button.button,
.woocommerce div.product.flux-produit .yith-ywraq-add-to-quote a.add-request-quote-button.button:hover {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 3px;
	background: #71aa4a;
	font: 500 17px/1 Oswald, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}

.woocommerce div.product.flux-produit .yith-ywraq-add-to-quote a.add-request-quote-button.button:hover {
	background: #5a8c39;
}

.woocommerce div.product.flux-produit .yith-ywraq-add-to-quote a.add-request-quote-button.button::before,
.woocommerce div.product.flux-produit .yith-ywraq-add-to-quote a.add-request-quote-button.button::after {
	display: none;
}

/* ---------- Réassurance sous le bouton ---------- */
.flux-reassurance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px;
	margin: 0 0 14px !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 13px;
}

.flux-reassurance li {
	padding: 0 !important;
}

.flux-reassurance li::before {
	content: "✓";
	margin-right: 6px;
	font-weight: 700;
	color: #5a8c39;
}

/* Galerie : image principale encadrée, miniature active soulignée */
.single-product .woocommerce-product-gallery__wrapper {
	border: 1px solid #e4e4e1;
	background: #fff;
}

.single-product .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 10px !important;
}

.single-product .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
}

.single-product .flex-control-thumbs img {
	border: 1px solid #e4e4e1;
	background: #fff;
	opacity: 1 !important;
}

.single-product .flex-control-thumbs img.flex-active {
	border: 2px solid #201f1b;
}

/* ---------- Sections sous la fiche et produits similaires ---------- */
.flux-produit__sections {
	margin-top: 56px;
}

.flux-produit__sections > * + * {
	margin-top: 56px;
}

.flux-produit .related.products {
	margin-top: 64px;
	padding-bottom: 64px; /* sinon les cartes touchent le pied de page */
}

.flux-produit .related.products > h2 {
	font: 500 26px/1.2 Oswald, sans-serif;
}

/* ---------- Tablette et mobile ---------- */
@media (max-width: 980px) {
	.flux-produit__haut {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

@media (max-width: 767px) {
	.flux-produit-page #main-content .container {
		width: 90%;
		padding-top: 24px;
	}

	.flux-produit .product_title {
		font-size: 30px;
	}

	.flux-achat {
		padding: 20px 18px;
		border-radius: 14px;
	}

	.single-product .yith-ywraq-add-to-quote {
		flex-basis: 100%;
	}

	.flux-pastilles-5flux {
		grid-template-columns: 1fr;
	}

	.flux-produit__sections,
	.flux-produit__sections > * + * {
		margin-top: 40px;
	}
}

/* ---------- Message YITH après l'ajout : encadré + bouton « Finaliser ma demande » ---------- */
.single-product .yith-ywraq-add-to-quote .yith_ywraq_add_item_response_message {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	padding: 10px 14px;
	border: 1px solid #cfe3bf;
	border-radius: 3px;
	background: #eef5e8;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #2f4a1d;
	text-align: left;
}

.single-product .yith-ywraq-add-to-quote .yith_ywraq_add_item_response_message::before {
	content: "✓";
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #71aa4a;
	font-size: 13px;
	color: #fff;
}

/* YITH empile parfois deux messages (« ajouté » puis « déjà dans la liste ») : on n'en garde qu'un. */
.single-product .yith-ywraq-add-to-quote .yith_ywraq_add_item_response_message ~ .yith_ywraq_add_item_response_message,
.single-product .yith-ywraq-add-to-quote .yith_ywraq_add_item_browse_message ~ .yith_ywraq_add_item_browse_message {
	display: none;
}

.single-product .yith-ywraq-add-to-quote .yith_ywraq_add_item_browse_message a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin: 0;
	border-radius: 3px;
	background: #71aa4a;
	font: 500 17px/1 Oswald, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff !important;
}

.single-product .yith-ywraq-add-to-quote .yith_ywraq_add_item_browse_message a:hover {
	background: #5a8c39;
}

/* ---------- Sections sous la fiche (étape A3, cf. inc/fiche-sections.php) ---------- */
.flux-sec__titre {
	margin: 0 0 18px;
	padding: 0;
	font: 500 26px/1.2 Oswald, sans-serif;
}

.flux-carac__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 28px;
	align-items: start;
}

.flux-carac__table {
	width: 100%;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: collapse;
	font-size: 14px;
}

.flux-carac__table th,
.flux-carac__table td {
	padding: 11px 14px !important;
	border: 0 !important;
	border-bottom: 1px solid #e4e4e1 !important;
	text-align: left;
	vertical-align: top;
}

.flux-carac__table th {
	width: 40%;
	background: #f7f7f7;
	font-weight: 600;
}

.flux-carac__aside .flux-fiche {
	padding: 18px;
	border: 1px solid #e4e4e1;
	border-radius: 14px;
	background: #fff;
}

.flux-carac__aide {
	margin-top: 14px;
	padding: 18px 20px;
	border-radius: 14px;
	background: #f7f7f7;
	font-size: 13.5px;
	line-height: 1.55;
}

.flux-carac__aide strong {
	display: block;
	margin-bottom: 4px;
	font: 500 17px/1.3 Oswald, sans-serif;
}

.flux-carac__aide a {
	display: block;
	margin-top: 4px;
	font-weight: 600;
}

/* Description longue, sans onglet */
.flux-desc__texte {
	max-width: 820px;
}

@media (max-width: 980px) {
	.flux-carac__grid {
		grid-template-columns: 1fr;
	}
}

/* Galerie : le diaporama WooCommerce aligne toutes les images en ligne ; la colonne les masque. */
.flux-produit__galerie {
	min-width: 0;
	overflow: hidden;
}

/* La liste d'origine reste dans le formulaire (source pour WooCommerce) mais hors de la mise en page. */
.single-product .variations td.value {
	position: relative;
}

.single-product .variations select.flux-pastilles-source {
	top: 0;
	left: 0;
}

/* ---------- Liens : sans le modèle Divi, la couleur par défaut de Divi (#2ea3f2) reprenait le dessus ---------- */
.flux-produit a {
	color: #3f6b22;
}

.flux-produit a:hover {
	color: #5a8c39;
}

/* Liens dans le texte : vert foncé souligné, comme dans les catégories */
.flux-produit .flux-desc__texte a,
.flux-produit .flux-achat__extrait a,
.flux-produit .flux-carac__aide a {
	color: #3f6b22;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Fiche technique : texte foncé, comme le reste du tableau */
.flux-produit .flux-fiche__link,
.flux-produit .flux-fiche a {
	color: #201f1b;
}

.flux-produit .flux-fiche a:hover {
	color: #3f6b22;
}

/* Galerie : loupe */
.flux-produit .woocommerce-product-gallery__trigger {
	color: #201f1b;
}

/* Produits similaires : mêmes cartes que les catégories (css/categorie.css). Divi impose 26px !important
   sur « .product .related h2 » et un calque de survol à icône bleue : on les neutralise. */
.flux-produit-page .related ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
}

.flux-produit-page .related ul.products::before,
.flux-produit-page .related ul.products::after {
	display: none;
}

.flux-produit-page .related ul.products li.product {
	float: none;
	width: auto;
	margin: 0 !important;
	padding: 0;
	clear: none;
}

.flux-produit-page .related ul.products li.product a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: #201f1b;
	text-decoration: none;
	outline: none;
}

.flux-produit-page .related ul.products li.product a:focus-visible {
	outline: 2px solid #5a8c39;
	outline-offset: 4px;
	border-radius: 14px;
}

.flux-produit-page .related ul.products li.product .et_shop_image {
	display: block;
	margin: 0 0 14px;
	overflow: hidden;
	border-radius: 14px;
	background: #f7f7f7;
}

.flux-produit-page .related ul.products li.product .et_shop_image img {
	margin: 0;
	transition: transform .25s ease;
}

.flux-produit-page .related ul.products li.product a:hover .et_shop_image img {
	transform: scale(1.03);
}

.flux-produit-page .related ul.products li.product .et_overlay {
	display: none !important;
}

.flux-produit-page .related ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 8px;
	padding: 0 !important;
	font: 500 18px/1.3 Oswald, sans-serif !important;
	color: #201f1b;
}

.flux-produit-page .related ul.products li.product a:hover .woocommerce-loop-product__title {
	color: #3f6b22;
}

.flux-produit-page .related .flux-carte__reperes {
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: #6b6a65;
}

.flux-produit-page .related .flux-carte__origine {
	align-self: flex-start;
	margin-bottom: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: #eef5e8;
	font-size: 12px;
	font-weight: 600;
	color: #3f6b22;
}

.flux-produit-page .related .flux-carte__voir {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: auto;
	border: 1.5px solid #71aa4a;
	border-radius: 3px;
	font: 500 15px/1 Oswald, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #3f6b22;
	transition: background .2s ease, color .2s ease;
}

.flux-produit-page .related ul.products li.product a:hover .flux-carte__voir,
.flux-produit-page .related ul.products li.product a:focus-visible .flux-carte__voir {
	background: #71aa4a;
	color: #fff;
}

.flux-produit-page .related .flux-carte__voir::after {
	content: "→";
	margin-left: 8px; /* flex : l'espace du contenu serait supprimé */
}

@media (max-width: 980px) {
	.flux-produit-page .related ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.flux-produit-page .related ul.products li.product .woocommerce-loop-product__title {
		font-size: 16px !important;
	}

	.flux-produit-page .related .flux-carte__voir {
		min-height: 36px;
		border-width: 1px;
		font-size: 13px;
		letter-spacing: .03em;
	}
}

/* Produit simple sans prix (devis seulement) : le bouton de devis, seul, occupe la largeur de la colonne (cf. inc/devis-sans-prix.php). */
.flux-produit .flux-achat > .yith-ywraq-add-to-quote,
.flux-produit .flux-achat > .yith-ywraq-add-to-quote .yith-ywraq-add-button,
.flux-produit .flux-achat > .yith-ywraq-add-to-quote .add-request-quote-button {
	display: block;
	width: 100%;
	text-align: center;
}