/*
Theme Name: Nooni Child
Theme URI: https://demo.theme-sky.com/nooni/
Author: Theme Sky Team
Author URI: http://theme-sky.com/
Description: A Premium and Responsive WordPress theme, designed for E-Commerce websites
Template: nooni
Version: 1.0.0
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: nooni-child
*/



/* ============================================================
   #A — CONTENU ÉDITORIAL DES CATÉGORIES WOOCOMMERCE
   Rôle général :
   - centraliser tout le style front des pages catégories
   - séparer clairement :
     A.1 = partie haute (intro)
     A.2 = partie basse (bloc SEO avec H2)
   - documenter les paramètres desktop/mobile pour la maintenance

   IMPORTANT MAINTENANCE :
   - cette structure ne supprime pas la logique validée ; elle la réorganise
   - les réglages de longueur de texte sont commentés au bon endroit
   - pour l’intro haute, le CSS reste la source de vérité pour les hauteurs
   ============================================================ */


/* ============================================================
   #A.1 — PARTIE HAUTE : INTRO CATÉGORIE
   Rôle :
   - homogénéiser la typographie de l’intro
   - gérer le wrapper, le repli, le dégradé et le bouton
   - distinguer clairement desktop / mobile
   ============================================================ */


/* ------------------------------------------------------------
   #A.1.1 — Base structurelle de l’intro haute
   Rôle :
   - base commune des variantes d’intro
   - neutralisation des styles parasites du thème
   - largeur pleine dans la colonne de contenu
   ------------------------------------------------------------ */

.nooni-cat-intro,
.nooni-cat-intro--native,
.nooni-cat-intro--top,
#nooni-cat-intro-v7 {
	max-width: 100%;
	width: 100%;
	margin: 0 0 24px;
	text-align: left;
	box-sizing: border-box;
	float: none;
	clear: none;
}

.nooni-cat-intro p,
.nooni-cat-intro--native p,
.nooni-cat-intro--top p,
#nooni-cat-intro-v7 p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	font-weight: 400;
	text-transform: none;
}

.nooni-cat-intro p:last-child,
.nooni-cat-intro--native p:last-child,
.nooni-cat-intro--top p:last-child,
#nooni-cat-intro-v7 p:last-child {
	margin-bottom: 0;
}


/* ------------------------------------------------------------
   #A.1.2 — Wrapper intro haute + variables de paramétrage
   Rôle :
   - porter les variables CSS utilisées par l’intro
   - centraliser les réglages de hauteur visibles en maintenance

   PARAMÈTRE DESKTOP PRINCIPAL :
   --intro-collapsed-height: 90px;

   Interprétation :
   - augmenter la valeur = plus de lignes visibles sur desktop
   - diminuer la valeur = moins de lignes visibles sur desktop
   - 90px = réglage actuel validé

   PARAMÈTRE DU FONDU :
   --intro-fade-height: 40px;

   Interprétation :
   - augmenter = dégradé plus haut / plus doux
   - diminuer = dégradé plus discret
   ------------------------------------------------------------ */

.nooni-cat-intro-wrapper,
.nooni-cat-intro-wrapper--native,
#nooni-cat-intro-wrapper-v8 {
	width: 100%;
	max-width: 100%;
	margin: 0 0 24px;
	text-align: left;
	box-sizing: border-box;
	--intro-collapsed-height: 90px;
	--intro-fade-height: 40px;
}


/* ------------------------------------------------------------
   #A.1.3 — États de l’intro haute (replié / ouvert)
   Rôle :
   - appliquer la hauteur visible quand l’intro est repliée
   - afficher un dégradé visuel en bas du texte
   - conserver un état ouvert sans limite quand nécessaire

   IMPORTANT MAINTENANCE :
   - le JS lit la variable --intro-collapsed-height définie plus haut
   - si cette valeur change ici, le JS suit automatiquement
   ------------------------------------------------------------ */

/* État replié — version générique validée */
.nooni-cat-intro.is-collapsed,
.nooni-cat-intro--native.is-collapsed,
.nooni-cat-intro--top.is-collapsed,
#nooni-cat-intro-v7.is-collapsed {
	max-height: var(--intro-collapsed-height);
	overflow: hidden;
	position: relative;
}

/* Dégradé visuel quand le texte est replié */
.nooni-cat-intro.is-collapsed::after,
.nooni-cat-intro--native.is-collapsed::after,
.nooni-cat-intro--top.is-collapsed::after,
#nooni-cat-intro-v7.is-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--intro-fade-height);
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
	pointer-events: none;
}

/* État ouvert */
.nooni-cat-intro.is-expanded,
.nooni-cat-intro--native.is-expanded,
.nooni-cat-intro--top.is-expanded,
#nooni-cat-intro-v7.is-expanded {
	max-height: none;
	overflow: visible;
}



 /* ------------------------------------------------------------
   #A.1.4 — Bouton intro haute
   Rôle :
   - forcer un rendu discret
   - écraser le style bouton du thème
   - version desktop

   PARAMÈTRES MODIFIABLES :
   - margin-top / margin-bottom
   - font-size
   - color
   ------------------------------------------------------------ */

.nooni-cat-intro-toggle,
#nooni-cat-intro-toggle-v8,
a.nooni-cat-intro-toggle,
button.nooni-cat-intro-toggle,
a#nooni-cat-intro-toggle-v8,
button#nooni-cat-intro-toggle-v8,
.woocommerce .nooni-cat-intro-toggle,
.woocommerce #nooni-cat-intro-toggle-v8,
.woocommerce a.nooni-cat-intro-toggle,
.woocommerce button.nooni-cat-intro-toggle,
.woocommerce a#nooni-cat-intro-toggle-v8,
.woocommerce button#nooni-cat-intro-toggle-v8 {
	display: block !important;
	width: fit-content !important;
	margin: 18px auto 34px !important;
	padding: 0 !important;

	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	border: 0 !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	color: #777 !important;
	-webkit-text-fill-color: #777 !important;
	opacity: 1 !important;

	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;

	text-align: center !important;
	white-space: nowrap !important;
	cursor: pointer !important;

	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;

	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

.nooni-cat-intro-toggle:hover,
.nooni-cat-intro-toggle:focus,
.nooni-cat-intro-toggle:active,
#nooni-cat-intro-toggle-v8:hover,
#nooni-cat-intro-toggle-v8:focus,
#nooni-cat-intro-toggle-v8:active,
a.nooni-cat-intro-toggle:hover,
button.nooni-cat-intro-toggle:hover,
a#nooni-cat-intro-toggle-v8:hover,
button#nooni-cat-intro-toggle-v8:hover,
.woocommerce .nooni-cat-intro-toggle:hover,
.woocommerce #nooni-cat-intro-toggle-v8:hover {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	border: 0 !important;
	border-color: transparent !important;
	box-shadow: none !important;

	color: #111 !important;
	-webkit-text-fill-color: #111 !important;
	outline: none !important;
	text-decoration: underline !important;
}

.nooni-cat-intro-toggle.is-hidden,
#nooni-cat-intro-toggle-v8.is-hidden {
	display: none !important;
}  



/* ------------------------------------------------------------
   #A.1.5 — Paramétrage desktop intro haute
   Rôle :
   - sécuriser l’affichage dans la colonne desktop
   - éviter qu’un héritage du thème casse le layout

   PARAMÈTRE À SURVEILLER :
   --intro-collapsed-height sur le wrapper (section A.1.2)
   ------------------------------------------------------------ */

@media (min-width: 769px) {

	.nooni-cat-intro,
	.nooni-cat-intro--native,
	.nooni-cat-intro--top,
	#nooni-cat-intro-v7 {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		float: none;
		clear: none;
	}
}


/* ------------------------------------------------------------
   #A.1.6 — Paramétrage mobile intro haute
   Rôle :
   - garder exactement le même rendu discret sur mobile
   ------------------------------------------------------------ */

@media (max-width: 768px) {

	.nooni-cat-intro,
	.nooni-cat-intro--native,
	.nooni-cat-intro--top,
	#nooni-cat-intro-v7 {
		margin: 0 0 18px;
	}

	.nooni-cat-intro p,
	.nooni-cat-intro--native p,
	.nooni-cat-intro--top p,
	#nooni-cat-intro-v7 p {
		font-size: 15px;
		line-height: 1.4;
		letter-spacing: 0 !important;
		word-spacing: 0 !important;
	}

	.nooni-cat-intro-wrapper,
	.nooni-cat-intro-wrapper--native,
	#nooni-cat-intro-wrapper-v8 {
		margin: 0 0 18px;
		--intro-collapsed-height: 80px;
	}

	.nooni-cat-intro-toggle,
	#nooni-cat-intro-toggle-v8,
	a.nooni-cat-intro-toggle,
	button.nooni-cat-intro-toggle,
	a#nooni-cat-intro-toggle-v8,
	button#nooni-cat-intro-toggle-v8,
	.woocommerce .nooni-cat-intro-toggle,
	.woocommerce #nooni-cat-intro-toggle-v8,
	.woocommerce a.nooni-cat-intro-toggle,
	.woocommerce button.nooni-cat-intro-toggle,
	.woocommerce a#nooni-cat-intro-toggle-v8,
	.woocommerce button#nooni-cat-intro-toggle-v8 {
		display: block !important;
		width: fit-content !important;
		margin: 16px auto 28px !important;
		padding: 0 !important;

		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;

		border: 0 !important;
		border-color: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;

		color: #777 !important;
		-webkit-text-fill-color: #777 !important;

		font-size: 11px !important;
		font-weight: 400 !important;
		line-height: 1.35 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		text-decoration: underline !important;
		text-underline-offset: 2px;

		text-align: center !important;
		min-width: 0 !important;
		min-height: 0 !important;
		height: auto !important;

		appearance: none !important;
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
	}
}



/* ============================================================
   #A.2 — PARTIE BASSE : BLOC SEO AVEC H2
   Rôle :
   - structurer le bloc éditorial affiché sous la grille produits
   - gérer les états replié / déplié
   - conserver une lecture confortable sur desktop et mobile
   ============================================================ */


/* ------------------------------------------------------------
   #A.2.1 — Wrapper + structure du bloc SEO bas
   Rôle :
   - créer un vrai bloc de lecture sous la grille produits
   - gérer les états replié / déplié
   - garder le texte aligné à gauche

   PARAMÈTRE DESKTOP DU TEXTE BAS :
   max-height: 350px;

   Interprétation :
   - augmenter = plus de texte visible avant le bouton
   - diminuer = texte plus court avant le bouton
   ------------------------------------------------------------ */

.nooni-cat-seo-wrap {
	margin-top: 40px;
	margin-bottom: 28px;
	text-align: center;
}

.nooni-cat-seo,
#nooni-cat-seo-content {
	position: relative;
	overflow: hidden;
	text-align: left;
	transition: max-height 0.25s ease;
}

/* État initial : bloc replié */
.nooni-cat-seo.is-collapsed,
#nooni-cat-seo-content.is-collapsed {
	max-height: 350px;
}

/* État ouvert : tout le contenu devient visible */
.nooni-cat-seo.is-expanded,
#nooni-cat-seo-content.is-expanded,
.nooni-cat-seo.open,
#nooni-cat-seo-content.open {
	max-height: none;
}

/* Dégradé visuel uniquement quand le bloc est replié */
.nooni-cat-seo.is-collapsed::after,
#nooni-cat-seo-content.is-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.nooni-cat-seo.is-expanded::after,
#nooni-cat-seo-content.is-expanded::after,
.nooni-cat-seo.open::after,
#nooni-cat-seo-content.open::after {
	display: none;
}


/* ------------------------------------------------------------
   #A.2.2 — Typographie du bloc SEO bas
   Rôle :
   - harmoniser paragraphes / H2 / H3 avec l’intro
   - éviter un rendu trop lâche sur desktop
   ------------------------------------------------------------ */

.nooni-cat-seo p,
#nooni-cat-seo-content p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	font-weight: 400;
	text-transform: none;
}

.nooni-cat-seo p:last-child,
#nooni-cat-seo-content p:last-child {
	margin-bottom: 0;
}

.nooni-cat-seo h2,
#nooni-cat-seo-content h2 {
	margin: 0 0 18px;
	font-size: 38px;
	line-height: 1.12;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	font-weight: 700;
	text-transform: none;
}

.nooni-cat-seo h2:not(:first-child),
#nooni-cat-seo-content h2:not(:first-child) {
	margin-top: 32px;
}

.nooni-cat-seo h3,
#nooni-cat-seo-content h3 {
	margin: 24px 0 12px;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	font-weight: 600;
	text-transform: none;
}




/* ------------------------------------------------------------
   #A.2.3 — Bouton bloc SEO bas
   Rôle :
   - rendre le bouton "Afficher plus / Afficher moins" discret
   - supprimer complètement l'apparence de bouton du thème
   - version desktop

   PARAMÈTRES MODIFIABLES :
   - margin-top     = espace au-dessus du bouton
   - margin-bottom  = espace sous le bouton
   - font-size      = taille du texte
   - color          = couleur du texte
   ------------------------------------------------------------ */

.nooni-cat-seo-toggle,
#nooni-cat-seo-toggle,
.seo-toggle,
a.nooni-cat-seo-toggle,
button.nooni-cat-seo-toggle,
a#nooni-cat-seo-toggle,
button#nooni-cat-seo-toggle,
a.seo-toggle,
button.seo-toggle,
.woocommerce .nooni-cat-seo-toggle,
.woocommerce #nooni-cat-seo-toggle,
.woocommerce .seo-toggle,
.woocommerce a.nooni-cat-seo-toggle,
.woocommerce button.nooni-cat-seo-toggle,
.woocommerce a#nooni-cat-seo-toggle,
.woocommerce button#nooni-cat-seo-toggle,
.woocommerce a.seo-toggle,
.woocommerce button.seo-toggle {
	display: block !important;
	width: fit-content !important;
	margin: 18px auto 34px !important;
	padding: 0 !important;

	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	border: 0 !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	color: #777 !important;
	-webkit-text-fill-color: #777 !important;
	opacity: 1 !important;

	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;

	text-align: center !important;
	white-space: nowrap !important;
	cursor: pointer !important;

	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;

	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;

	transition: color 0.2s ease !important;
}

.nooni-cat-seo-toggle:hover,
.nooni-cat-seo-toggle:focus,
.nooni-cat-seo-toggle:active,
#nooni-cat-seo-toggle:hover,
#nooni-cat-seo-toggle:focus,
#nooni-cat-seo-toggle:active,
.seo-toggle:hover,
.seo-toggle:focus,
.seo-toggle:active,
a.nooni-cat-seo-toggle:hover,
button.nooni-cat-seo-toggle:hover,
a#nooni-cat-seo-toggle:hover,
button#nooni-cat-seo-toggle:hover,
a.seo-toggle:hover,
button.seo-toggle:hover,
.woocommerce .nooni-cat-seo-toggle:hover,
.woocommerce #nooni-cat-seo-toggle:hover,
.woocommerce .seo-toggle:hover {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	border: 0 !important;
	border-color: transparent !important;
	box-shadow: none !important;

	color: #111 !important;
	-webkit-text-fill-color: #111 !important;
	outline: none !important;
	text-decoration: underline !important;
}

.nooni-cat-seo-toggle.is-hidden,
#nooni-cat-seo-toggle.is-hidden,
.seo-toggle.is-hidden {
	display: none !important;
}




/* ------------------------------------------------------------
   #A.2.4 — Paramétrage mobile bloc SEO bas
   Rôle :
   - garder exactement le même rendu discret sur mobile
   - compacter légèrement les espacements
   ------------------------------------------------------------ */

@media (max-width: 768px) {

	.nooni-cat-seo p,
	#nooni-cat-seo-content p {
		font-size: 15px;
		line-height: 1.4;
		letter-spacing: 0 !important;
		word-spacing: 0 !important;
	}

	.nooni-cat-seo h2,
	#nooni-cat-seo-content h2 {
		font-size: 28px;
		line-height: 1.15;
		margin: 0 0 16px;
	}

	.nooni-cat-seo h2:not(:first-child),
	#nooni-cat-seo-content h2:not(:first-child) {
		margin-top: 26px;
	}

	.nooni-cat-seo h3,
	#nooni-cat-seo-content h3 {
		font-size: 21px;
		line-height: 1.2;
	}

	.nooni-cat-seo-toggle,
	#nooni-cat-seo-toggle,
	.seo-toggle,
	a.nooni-cat-seo-toggle,
	button.nooni-cat-seo-toggle,
	a#nooni-cat-seo-toggle,
	button#nooni-cat-seo-toggle,
	a.seo-toggle,
	button.seo-toggle,
	.woocommerce .nooni-cat-seo-toggle,
	.woocommerce #nooni-cat-seo-toggle,
	.woocommerce .seo-toggle,
	.woocommerce a.nooni-cat-seo-toggle,
	.woocommerce button.nooni-cat-seo-toggle,
	.woocommerce a#nooni-cat-seo-toggle,
	.woocommerce button#nooni-cat-seo-toggle,
	.woocommerce a.seo-toggle,
	.woocommerce button.seo-toggle {
		display: block !important;
		width: fit-content !important;
		margin: 16px auto 28px !important;
		padding: 0 !important;

		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;

		border: 0 !important;
		border-color: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;

		color: #777 !important;
		-webkit-text-fill-color: #777 !important;

		font-size: 11px !important;
		font-weight: 400 !important;
		line-height: 1.35 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		text-decoration: underline !important;
		text-underline-offset: 2px;

		text-align: center !important;
		min-width: 0 !important;
		min-height: 0 !important;
		height: auto !important;

		appearance: none !important;
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
	}
}




/* =========================================================
   A.3 — AJOUTER — Titre produit : troncature UX desktop / mobile
   Rôle :
   - Desktop : afficher 1 ligne maximum + "..."
   - Mobile  : afficher 2 lignes maximum + "..."
   - alléger visuellement la grille produit
   - garder un rendu homogène

   IMPORTANT :
   - ce bloc cible la vraie classe du thème Nooni :
     .heading-title.product-name
   - à AJOUTER tel quel
========================================================= */

/* ---------------------------------------------------------
   A.3.1 — Base commune
   --------------------------------------------------------- */
.woocommerce ul.products li.product h3.heading-title.product-name,
.woocommerce-page ul.products li.product h3.heading-title.product-name,
.products .product h3.heading-title.product-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    /* évite les coupures sales au milieu des mots */
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;

    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   A.3.2 — Desktop : 1 ligne
   --------------------------------------------------------- */
@media (min-width: 769px) {
    .woocommerce ul.products li.product h3.heading-title.product-name,
    .woocommerce-page ul.products li.product h3.heading-title.product-name,
    .products .product h3.heading-title.product-name {
        -webkit-line-clamp: 1 !important;
        line-clamp: 1 !important;
        line-height: 1.35 !important;
        max-height: 1.35em !important;
    }
}

/* ---------------------------------------------------------
   A.3.3 — Mobile : 2 lignes
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .woocommerce ul.products li.product h3.heading-title.product-name,
    .woocommerce-page ul.products li.product h3.heading-title.product-name,
    .products .product h3.heading-title.product-name {
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        line-height: 1.35 !important;
        max-height: 2.7em !important;
    }
}





/* B.1 — Masquer les descriptions / contenus SEO injectés dans le menu mobile */

/* Cache les descriptions explicites */
.menu-desc,
.menu-desc-lv0,
.menu-desc-lv1,
.menu-desc-lv2 {
    display: none !important;
}

/* Cache les paragraphes / blocs texte injectés dans les sous-menus mobiles */
.mobile-navigation p,
.mobile-navigation .term-description,
.mobile-navigation .category-description,
.mobile-navigation .archive-description,
.mobile-navigation .woocommerce-products-header__description,
.mobile-navigation .taxonomy-description {
    display: none !important;
}

/* Si le thème injecte un bloc texte dans les items de menu */
.mobile-navigation .menu-item p,
.mobile-navigation .sub-menu p,
.mobile-navigation .children p,
.mobile-navigation .menu-item div:not(.sub-menu):not(.children):not(.menu-item-link) p {
    display: none !important;
}

/* Sécurité : masquer les longs blocs texte directement dans le panneau mobile */
.mobile-navigation .sub-menu > div,
.mobile-navigation .children > div {
    max-height: none !important;
}







/* =========================================================
   C — DESCRIPTION LONGUE PRODUIT
   Rôle global :
   - structurer proprement la zone "Description" produit
   - supprimer définitivement l’ancien encadré gris + trait
   - conserver une lecture confortable sur desktop et mobile
   - garder un bouton "Afficher plus / moins" discret
   - maintenir une logique simple, stable et facile à ajuster
   ========================================================= */


/* =========================================================
   C.1.1 — WRAPPER GLOBAL DE LA SECTION
   Rôle :
   - créer le bloc principal de la description longue
   - assurer une largeur pleine dans la zone de contenu
   - gérer l’espacement avec le bloc précédent
   ========================================================= */

.shopopti-product-long-description {
	clear: both;
	display: block;
	width: 100%;
	margin-top: 34px; /* PARAMÈTRE : espace au-dessus de toute la section */
}


/* =========================================================
   C.1.2 — EN-TÊTE DE SECTION : WRAPPER + TITRE "Description"
   Rôle :
   - garder la structure validée du titre de section
   - ajouter un vrai paramètre pour gérer l’espace AU-DESSUS
     du titre "Description"
   - garder un titre centré, propre et stable
   - conserver le soulignement simple directement sur le titre
   ========================================================= */

/* ---------------------------------------------------------
   C.1.2.1 — Variables de réglage
   Rôle :
   - centraliser les paramètres faciles à modifier
   - éviter de chercher dans plusieurs lignes du bloc

   PARAMÈTRES IMPORTANTS :
   --shopopti-desc-margin-top    = espace ENTRE le switch et "Description"
   --shopopti-desc-margin-bottom = espace ENTRE le titre et le contenu
   --shopopti-desc-title-size    = taille du titre
   --------------------------------------------------------- */
.shopopti-product-long-description {
	--shopopti-desc-margin-top: -10px;     /* ← espace switch > titre */
	--shopopti-desc-margin-bottom: 24px;  /* ← espace titre > contenu */
	--shopopti-desc-title-size: 30px;     /* ← taille titre desktop */
}


/* ---------------------------------------------------------
   C.1.2.2 — Wrapper interne simple
   Rôle :
   - garder un wrapper neutre
   - ne pas ajouter d’effet décoratif parasite
   --------------------------------------------------------- */
.shopopti-product-long-description__inner {
	display: block;
	width: 100%;
	padding-top: 0; /* laisser à 0 sauf besoin d’air supplémentaire */
}


/* ---------------------------------------------------------
   C.1.2.3 — Titre principal de la section
   Rôle :
   - garder le titre centré
   - ajouter l’espace AVANT le titre via variable
   - garder le soulignement simple sous le texte
   --------------------------------------------------------- */
.shopopti-product-long-description__title {
	display: table; /* permet au soulignement de suivre la largeur du texte */

	margin: var(--shopopti-desc-margin-top) auto var(--shopopti-desc-margin-bottom);
	/* 1ère valeur = espace au-dessus
	   3ème valeur = espace en dessous */

	padding: 0; /* important : aucun effet “encadré” */

	background: transparent;
	border: 0;
	border-bottom: 2px solid #d9d9d9; /* style du soulignement */

	text-align: center;
	font-size: var(--shopopti-desc-title-size);
	font-weight: 700;
	line-height: 1.2;

	text-transform: none;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	color: #222; /* couleur du titre */
}


/* =========================================================
   C.1.3 — CONTENU TEXTUEL DE LA DESCRIPTION
   Rôle :
   - harmoniser paragraphes, intertitres et couleur du texte
   - améliorer la lisibilité
   - garder une hiérarchie claire et propre
   ========================================================= */

.shopopti-product-long-description__content {
	display: block;
	width: 100%;
	color: #444; /* PARAMÈTRE : couleur du texte courant, noir adouci */
	font: inherit;
}

/* Paragraphes */
.shopopti-product-long-description__content p {
	margin: 0 0 14px; /* PARAMÈTRE : espacement entre paragraphes */
	color: #444;
	font-size: 16px;  /* PARAMÈTRE : taille du texte desktop */
	line-height: 1.55; /* PARAMÈTRE : confort de lecture */
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	text-transform: none;
}

.shopopti-product-long-description__content p:last-child {
	margin-bottom: 0;
}

/* Titres de niveau 2 dans la description */
.shopopti-product-long-description__content h2 {
	margin: 0 0 16px;
	color: #222;
	font-size: 30px;   /* PARAMÈTRE : taille des H2 desktop */
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	text-transform: none;
}

/* Quand un H2 n’est pas le premier élément, on lui donne de l’air */
.shopopti-product-long-description__content h2:not(:first-child) {
	margin-top: 28px; /* PARAMÈTRE : espace avant un nouveau H2 */
}

/* Titres de niveau 3 */
.shopopti-product-long-description__content h3 {
	margin: 22px 0 12px;
	color: #222;
	font-size: 22px;   /* PARAMÈTRE : taille des H3 desktop */
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	text-transform: none;
}

/* Listes éventuelles : utile si la description contient des puces */
.shopopti-product-long-description__content ul,
.shopopti-product-long-description__content ol {
	margin: 0 0 14px 22px; /* PARAMÈTRE : retrait de liste */
	color: #444;
}

.shopopti-product-long-description__content li {
	margin-bottom: 8px;
	line-height: 1.5;
}


/* =========================================================
   C.1.4 — ZONE REPLIABLE + DÉGRADÉ DE FIN
   Rôle :
   - gérer le repli / dépli du contenu
   - garder un fondu visuel propre en bas du texte replié
   - laisser le JS piloter la hauteur maximale
   ========================================================= */

/* Zone qui contient le texte repliable */
.shopopti-product-long-description__content-wrap {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	transition: max-height 0.3s ease; /* animation douce à l’ouverture */
}

/* État ouvert : aucune limite */
.shopopti-product-long-description__content-wrap.is-expanded {
	max-height: none !important;
	overflow: visible;
}

/* Dégradé bas quand le contenu est replié */
.shopopti-product-long-description__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px; /* PARAMÈTRE : hauteur du fondu */
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(255,255,255,0),
		rgba(255,255,255,1) 85%
	);
}

/* Quand le contenu est ouvert, le fondu disparaît */
.shopopti-product-long-description__content-wrap.is-expanded .shopopti-product-long-description__fade {
	opacity: 0;
}


/* =========================================================
   C.1.5 — BOUTON "AFFICHER PLUS / MOINS"
   Rôle :
   - garder un style discret type lien
   - éviter toute apparence de gros bouton thème
   - afficher un seul libellé à la fois
   ========================================================= */

.shopopti-product-long-description__toggle,
.shopopti-product-long-description__toggle.button,
button.shopopti-product-long-description__toggle {
	display: block;
	width: fit-content;
	margin: 18px auto 42px; /* PARAMÈTRE : espace au-dessus / au-dessous du bouton */
	padding: 0 !important;

	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	color: #777 !important; /* PARAMÈTRE : couleur normale */
	font-size: 12px !important; /* PARAMÈTRE : taille du bouton desktop */
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;

	cursor: pointer;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;

	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

/* États interactifs */
.shopopti-product-long-description__toggle:hover,
.shopopti-product-long-description__toggle:focus {
	color: #111 !important; /* PARAMÈTRE : couleur au survol / focus */
	outline: none;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Par défaut : "Afficher plus" visible */
.shopopti-product-long-description__toggle .label-more {
	display: inline;
}

.shopopti-product-long-description__toggle .label-less {
	display: none;
}

/* Quand le bouton reçoit la classe is-expanded */
.shopopti-product-long-description__toggle.is-expanded .label-more {
	display: none;
}

.shopopti-product-long-description__toggle.is-expanded .label-less {
	display: inline;
}


/* =========================================================
   C.1.6 — AJUSTEMENTS MOBILE
   Rôle :
   - conserver exactement la même logique qu’en desktop
   - compacter légèrement tailles et espacements
   ========================================================= */

@media (max-width: 768px) {

	.shopopti-product-long-description {
		margin-top: 28px; /* PARAMÈTRE : espace au-dessus sur mobile */
	}

	.shopopti-product-long-description__title {
		margin: 0 auto 20px; /* PARAMÈTRE : espace sous le titre mobile */
		font-size: 22px;     /* PARAMÈTRE : taille du titre mobile */
		line-height: 1.2;
	}

	.shopopti-product-long-description__content p {
		margin: 0 0 13px;
		font-size: 15px;     /* PARAMÈTRE : taille du texte mobile */
		line-height: 1.5;
	}

	.shopopti-product-long-description__content h2 {
		margin: 0 0 14px;
		font-size: 24px;     /* PARAMÈTRE : taille H2 mobile */
		line-height: 1.2;
	}

	.shopopti-product-long-description__content h2:not(:first-child) {
		margin-top: 24px;
	}

	.shopopti-product-long-description__content h3 {
		margin: 20px 0 10px;
		font-size: 20px;     /* PARAMÈTRE : taille H3 mobile */
		line-height: 1.25;
	}

	.shopopti-product-long-description__fade {
		height: 80px; /* PARAMÈTRE : hauteur du fondu mobile */
	}

	.shopopti-product-long-description__toggle,
	.shopopti-product-long-description__toggle.button,
	button.shopopti-product-long-description__toggle {
		margin: 16px auto 34px;
		font-size: 11px !important; /* PARAMÈTRE : taille bouton mobile */
		line-height: 1.35 !important;
	}
}




le CSS de C.2
puis le PHP de E.2
le tout commenté et structuré.
/* ========================================================================
   C.2 — ACCORDÉONS PRODUIT PERSONNALISÉS
   À AJOUTER dans style.css
   ------------------------------------------------------------------------
   Rôle global :
   - styliser les 4 accordéons custom de la fiche produit
   - conserver un rendu propre, sobre et maintenable
   - rester indépendant des tabs natifs du thème / WooCommerce
   ======================================================================== */


/* ------------------------------------------------------------------------
   C.2.1 — WRAPPER GLOBAL DES ACCORDÉONS
   Rôle :
   - créer le bloc global sous la description longue
   - gérer l’espacement avec le bloc précédent

   PARAMÈTRES MODIFIABLES :
   - margin-top    = espace au-dessus des accordéons
   - border-top    = ligne haute du bloc
   ------------------------------------------------------------------------ */
.shopopti-product-accordions {
	display: block;
	width: 100%;
	margin-top: 40px;
	border-top: 1px solid #e6e6e6;
}


/* ------------------------------------------------------------------------
   C.2.2 — ITEM D’ACCORDÉON
   Rôle :
   - séparer visuellement chaque accordéon
   - créer une structure stable pour l’ouverture / fermeture

   PARAMÈTRE MODIFIABLE :
   - border-bottom = séparation entre les items
   ------------------------------------------------------------------------ */
.shopopti-product-accordion {
	display: block;
	width: 100%;
	border-bottom: 1px solid #e6e6e6;
}


/* ------------------------------------------------------------------------
   C.2.3 — BOUTON / TITRE D’ACCORDÉON
   Rôle :
   - rendre toute la ligne cliquable
   - afficher le titre de manière claire et propre
   - intégrer un indicateur + / -

   PARAMÈTRES MODIFIABLES :
   - padding       = hauteur du bouton
   - font-size     = taille du titre
   - font-weight   = graisse du titre
   - color         = couleur du titre
   ------------------------------------------------------------------------ */
.shopopti-product-accordion__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 22px 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;

	text-align: left;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: #222;

	letter-spacing: 0 !important;
	word-spacing: 0 !important;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* On neutralise les styles parasites du thème */
.shopopti-product-accordion__toggle:hover,
.shopopti-product-accordion__toggle:focus,
.shopopti-product-accordion__toggle:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	color: #111;
}

/* Titre texte interne */
.shopopti-product-accordion__title {
	display: block;
	flex: 1 1 auto;
	padding-right: 20px; /* espace entre texte et icône */
}

/* Icône + / - */
.shopopti-product-accordion__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	position: relative;
}

.shopopti-product-accordion__icon::before,
.shopopti-product-accordion__icon::after {
	content: "";
	position: absolute;
	background: #222;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Barre horizontale */
.shopopti-product-accordion__icon::before {
	width: 14px;
	height: 1.5px;
}

/* Barre verticale */
.shopopti-product-accordion__icon::after {
	width: 1.5px;
	height: 14px;
}

/* Quand l’item est ouvert, on passe visuellement de + à - */
.shopopti-product-accordion.is-open .shopopti-product-accordion__icon::after {
	opacity: 0;
	transform: scaleY(0);
}


/* ------------------------------------------------------------------------
   C.2.4 — CONTENU INTERNE DE L’ACCORDÉON
   Rôle :
   - contenir le texte éditorial de chaque accordéon
   - garder une bonne lisibilité

   PARAMÈTRES MODIFIABLES :
   - padding-bottom = espace sous le contenu
   - color          = couleur du texte
   ------------------------------------------------------------------------ */
.shopopti-product-accordion__content {
	display: none;
	width: 100%;
	padding: 0 0 26px;
	color: #444;
}

.shopopti-product-accordion__content-inner {
	display: block;
	width: 100%;
}

.shopopti-product-accordion__content p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.55;
	color: #444;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
}

.shopopti-product-accordion__content p:last-child {
	margin-bottom: 0;
}

.shopopti-product-accordion__content h2,
.shopopti-product-accordion__content h3,
.shopopti-product-accordion__content h4 {
	margin: 0 0 14px;
	color: #222;
	line-height: 1.25;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
}

.shopopti-product-accordion__content h2 {
	font-size: 28px;
	font-weight: 700;
}

.shopopti-product-accordion__content h3 {
	font-size: 22px;
	font-weight: 600;
}

.shopopti-product-accordion__content h4 {
	font-size: 18px;
	font-weight: 600;
}

.shopopti-product-accordion__content ul,
.shopopti-product-accordion__content ol {
	margin: 0 0 14px 22px;
	color: #444;
}

.shopopti-product-accordion__content li {
	margin-bottom: 8px;
	line-height: 1.5;
}


/* ------------------------------------------------------------------------
   C.2.5 — ÉTAT OUVERT / FERMÉ
   Rôle :
   - afficher le panneau seulement quand l’item est ouvert
   ------------------------------------------------------------------------ */
.shopopti-product-accordion.is-open .shopopti-product-accordion__content {
	display: block;
}


/* ------------------------------------------------------------------------
   C.2.6 — AJUSTEMENTS MOBILE
   Rôle :
   - compacter légèrement les espacements et tailles
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {

	.shopopti-product-accordions {
		margin-top: 32px;
	}

	.shopopti-product-accordion__toggle {
		padding: 18px 0;
		font-size: 18px;
		line-height: 1.25;
	}

	.shopopti-product-accordion__title {
		padding-right: 16px;
	}

	.shopopti-product-accordion__content {
		padding: 0 0 22px;
	}

	.shopopti-product-accordion__content p {
		font-size: 15px;
		line-height: 1.5;
	}

	.shopopti-product-accordion__content h2 {
		font-size: 24px;
	}

	.shopopti-product-accordion__content h3 {
		font-size: 20px;
	}

	.shopopti-product-accordion__content h4 {
		font-size: 17px;
	}
}


/* =========================================================
   C.2.7 — ESPACE ENTRE DESCRIPTION ET TABS
   Rôle :
   - créer un vrai espace visible au-dessus des tabs
   - utiliser du padding plutôt qu’une marge si le thème neutralise les margins
   ========================================================= */

.shopopti-product-long-description {
	padding-bottom: 80px;
}

.shopopti-product-long-description + .woocommerce-tabs,
.shopopti-product-long-description + .woocommerce-tabs.wc-tabs-wrapper {
	margin-top: 0 !important;
}



/* =========================================================
   C.3 — PARCOURS UX DES VARIATIONS + STYLE DES BOUTONS DE DÉCLINAISON
   ---------------------------------------------------------
   Rôle global :
   - gérer le parcours UX en 3 étapes pour les variations
   - gérer le style visuel des boutons de déclinaison
   - conserver la logique de visibilité pilotée par JS
   - centraliser les réglages CSS dans cette section

   Structure :
   - C.3.1 = Parcours UX en 3 étapes pour les variations
   - C.3.2 = Style des boutons de déclinaison
   ========================================================= */











/* =========================================================
   C.3.1 — REMPLACER dans style.css
   PARCOURS UX EN 3 ÉTAPES POUR LES VARIATIONS
   ---------------------------------------------------------
   Rôle :
   - gérer tout le style du header custom
   - gérer l’opacité de la flèche et du texte
   - gérer l’espace entre header / options / étapes
   - conserver la logique de visibilité pilotée par JS

   IMPORTANT MAINTENANCE :
   - toutes les valeurs de réglage sont centralisées dans
   les variables CSS ci-dessous
   - functions.php ne gère plus le style
   ========================================================= */


/* =========================================================
   C.3.1.1 — VARIABLES GLOBALES DE RÉGLAGE
   Rôle :
   - centraliser les réglages UX des étapes
   - ajuster facilement opacité / espacements / badge
   ========================================================= */
.variations_form {
	--shopopti-step-font-size: 13px;        /* même taille badge + texte */
	--shopopti-step-font-weight: 700;       /* graisse badge + texte */

	--shopopti-step-arrow-opacity: 0.60;    /* RÉGLAGE : opacité flèche */
	--shopopti-step-text-opacity: 0.70;     /* RÉGLAGE : opacité Matière / Orientation / Taille */

	--shopopti-step-gap: 8px;               /* espace badge / flèche / texte */
	--shopopti-step-header-bottom: 5px;     /* RÉGLAGE : espace entre header et boutons */

	--shopopti-step-badge-height: 28px;     /* hauteur badge */
	--shopopti-step-badge-padding-x: 10px;  /* padding horizontal badge */
}


/* ---------------------------------------------------------
   C.3.1.2 — Visibilité des étapes (pilotée par JS)
   --------------------------------------------------------- */
.shopopti-step-hidden {
	display: none !important;
}

.shopopti-step-visible {
	display: table-row !important; /* important pour garder la structure tableau WooCommerce */
}


/* ---------------------------------------------------------
   C.3.1.3 — Masquage des labels natifs WooCommerce / thème
   --------------------------------------------------------- */
.shopopti-native-step-label-hidden,
.variations_form .shopopti-native-step-label-hidden {
	display: none !important;
}


/* ---------------------------------------------------------
   C.3.1.4 — Compactage global des lignes et cellules
   Rôle :
   - réduire les marges / paddings parasites du thème
   - préparer un espacement plus premium et plus dense
   --------------------------------------------------------- */
.variations_form .shopopti-step-row,
.variations_form .shopopti-step-row td,
.variations_form .shopopti-step-row th,
.variations_form .shopopti-step-cell {
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: 0 !important;
}



/* ---------------------------------------------------------
   C.3.1.5 — COMPACTAGE RÉEL DES ATTRIBUTS WOO / THÈME
   ---------------------------------------------------------
   Rôle :
   - réduire l’espace entre les étapes
   - agir sur la vraie source du spacing :
     le wrapper du thème ".ts-product-attribute"
   - conserver un peu d’air avant le lien "Effacer"
   - éviter que les boutons d’attributs soient trop collés

   IMPORTANT MAINTENANCE :
   - ce bloc est la source UNIQUE pour :
     1) l’espace entre les étapes
     2) l’espace entre header et options
     3) l’espace entre les boutons d’une même étape
     4) l’air sous la dernière étape avant "Effacer"

   LOGIQUE :
   - étapes 1 et 2 = compactes
   - étape 3 = plus d’air en dessous pour ne pas faire remonter "Effacer"
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   C.3.1.5.1 — Header -> options
   Rôle :
   - régler l’espace entre :
     [ Étape X/3 → Libellé ]
     et les boutons de variation
   --------------------------------------------------------- */
.variations_form .shopopti-step-header-custom {
	margin: 0 0 3px 0 !important; /* RÉGLAGE DESKTOP */
}


/* ---------------------------------------------------------
   C.3.1.5.2 — Cellule WooCommerce
   Rôle :
   - neutraliser le padding vertical parasite éventuel
   --------------------------------------------------------- */
.variations_form table.variations td.value {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


/* ---------------------------------------------------------
   C.3.1.5.3 — Wrapper du thème : étapes 1 et 2
   Rôle :
   - compacter l’espace entre les étapes normales
   --------------------------------------------------------- */
.variations_form .shopopti-step-row--1 .ts-product-attribute,
.variations_form .shopopti-step-row--2 .ts-product-attribute {
	margin-top: 0 !important;
	margin-bottom: 35px !important; /* RÉGLAGE DESKTOP : espace entre étape 1 -> 2 et 2 -> 3 */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


/* ---------------------------------------------------------
   C.3.1.5.4 — Wrapper du thème : étape 3
   Rôle :
   - garder plus d’air sous la dernière étape
   - éviter que "Effacer" remonte trop
   --------------------------------------------------------- */
.variations_form .shopopti-step-row--3 .ts-product-attribute {
	margin-top: 0 !important;
	margin-bottom: 38px !important; /* RÉGLAGE DESKTOP : espace avant "Effacer" */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


/* ---------------------------------------------------------
   C.3.1.5.5 — Espacement entre boutons d’une même étape
   Rôle :
   - éviter que les attributs soient trop collés
   - utile surtout pour les tailles en mobile
   --------------------------------------------------------- */
.variations_form .ts-product-attribute {
	row-gap: 6px !important;    /* RÉGLAGE DESKTOP */
	column-gap: 6px !important; /* RÉGLAGE DESKTOP */
	gap: 6px !important;
}


/* ---------------------------------------------------------
   C.3.1.5.6 — Options du thème
   Rôle :
   - neutraliser les marges internes parasites
   --------------------------------------------------------- */
.variations_form .ts-product-attribute > .option {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   C.3.1.5.7 — Mobile
   Rôle :
   - conserver la même logique que desktop
   - compacter les étapes 1 et 2
   - laisser respirer "Effacer"
   - éviter que les tailles soient trop serrées
   --------------------------------------------------------- */
@media (max-width: 768px) {

	.variations_form .shopopti-step-header-custom {
		margin: 0 0 3px 0 !important; /* RÉGLAGE MOBILE */
	}

	.variations_form table.variations td.value {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Étapes 1 et 2 et 3 : compactes */
	.variations_form .shopopti-step-row--1 .ts-product-attribute,
	.variations_form .shopopti-step-row--2 .ts-product-attribute {
		margin-top: 0 !important;
		margin-bottom: 20px !important; /* RÉGLAGE MOBILE */
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Étape 3 : plus d’air avant "Effacer" */
	.variations_form .shopopti-step-row--3 .ts-product-attribute {
		margin-top: 0 !important;
		margin-bottom: 32px !important; /* RÉGLAGE MOBILE */
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Boutons d’une même étape : légèrement espacés */
	.variations_form .ts-product-attribute {
		row-gap: 6px !important;    /* RÉGLAGE MOBILE */
		column-gap: 6px !important; /* RÉGLAGE MOBILE */
		gap: 6px !important;
	}

	.variations_form .ts-product-attribute > .option {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}


/* ---------------------------------------------------------
   C.3.1.6 — Header custom
   Format :
   [ Étape 1/3 ] → Matière
   --------------------------------------------------------- */
.variations_form .shopopti-step-header-custom {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
	gap: var(--shopopti-step-gap) !important;

	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;

	margin: 0 0 var(--shopopti-step-header-bottom) 0 !important; /* RÉGLAGE */
	padding: 0 !important;

	line-height: 1 !important;
	white-space: nowrap !important;
	vertical-align: middle !important;
}




/* ---------------------------------------------------------
   C.3.1.7 — Badge noir
   --------------------------------------------------------- */
.variations_form .shopopti-step-badge-custom {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	height: var(--shopopti-step-badge-height) !important;
	padding: 0 var(--shopopti-step-badge-padding-x) !important;

	margin: 0 !important;
	background: transparent !important;          /* plus de fond noir */
	color: #111 !important;

	border: 1px solid #111 !important;           /* cadre noir */
	border-radius: 0px !important;               /* léger arrondi */
	box-shadow: none !important;

	font-size: var(--shopopti-step-font-size) !important;
	font-weight: var(--shopopti-step-font-weight) !important;
	line-height: 1 !important;

	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
}


/* ---------------------------------------------------------
   C.3.1.8 — Flèche discrète
   --------------------------------------------------------- */
.variations_form .shopopti-step-arrow-custom {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;

	color: #111 !important;
	opacity: var(--shopopti-step-arrow-opacity) !important;    /* RÉGLAGE */
	font-size: var(--shopopti-step-font-size) !important;      /* même taille que badge + texte */
	font-weight: 400 !important;
	line-height: 1 !important;

	transform: translateY(-1px);
	white-space: nowrap !important;
}


/* ---------------------------------------------------------
   C.3.1.9 — Texte Matière / Orientation / Taille
   --------------------------------------------------------- */
.variations_form .shopopti-step-text-custom {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;

	color: #111 !important;
	opacity: var(--shopopti-step-text-opacity) !important;     /* RÉGLAGE */
	font-size: var(--shopopti-step-font-size) !important;      /* même taille que le badge */
	font-weight: var(--shopopti-step-font-weight) !important;
	line-height: 1 !important;

	text-transform: none !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	white-space: nowrap !important;
}


/* ---------------------------------------------------------
   C.3.1.10 — Compactage entre header et boutons de variation
   --------------------------------------------------------- */
.variations_form .shopopti-step-cell > .variable-items-wrapper,
.variations_form .shopopti-step-cell > .button-variable-wrapper,
.variations_form .shopopti-step-cell > .button-variable-items-wrapper,
.variations_form .shopopti-step-cell > select,
.variations_form .shopopti-step-cell > .value {
	margin-top: 0 !important;
}

 /* =========================================================
   C.3.1.12 — MOBILE (AJUSTEMENTS VISUELS DES ÉTAPES UNIQUEMENT)
   ---------------------------------------------------------
   Rôle :
   - adapter le rendu visuel des étapes sur mobile
   - conserver la même logique UX que desktop
   - ajuster uniquement :
     1) taille badge + texte
     2) opacité flèche
     3) opacité texte
     4) espacement horizontal badge / flèche / texte
     5) espace entre header et options
     6) dimensions du badge

   IMPORTANT MAINTENANCE :
   - ce bloc ne gère PAS "Effacer"
   - ce bloc ne gère PAS l’espace entre les étapes
   - l’espace entre les étapes est géré uniquement dans C.3.1.5
   ========================================================= */

@media (max-width: 768px) {

	/* ---------------------------------------------------------
	   VARIABLES VISUELLES MOBILE
	   ---------------------------------------------------------
	   Rôle :
	   - compacter légèrement l’affichage sur petit écran
	   - garder une hiérarchie claire
	   --------------------------------------------------------- */
	.variations_form {
		--shopopti-step-font-size: 12px;        /* taille badge + texte */
		--shopopti-step-arrow-opacity: 0.40;    /* opacité flèche */
		--shopopti-step-text-opacity: 0.62;     /* opacité Matière / Orientation / Taille */
		--shopopti-step-gap: 7px;               /* espace badge / flèche / texte */
		--shopopti-step-header-bottom: 3px;     /* espace entre header et options */
		--shopopti-step-badge-height: 26px;     /* hauteur du badge */
		--shopopti-step-badge-padding-x: 9px;   /* padding horizontal du badge */
	}

}





/* =========================================================
   C.3.2 — STYLE DES BOUTONS DE DÉCLINAISON
   ---------------------------------------------------------
   Rôle :
   - personnaliser uniquement le style visuel des boutons
     de déclinaison :
       1) matière
       2) orientation
       3) taille
   - conserver la structure HTML native du thème
   - supprimer l’ancien rendu "encadré"
   - appliquer un rendu blanc + ombre + coins arrondis
   - ajouter un effet hover inspiré du bouton modèle fourni

   IMPORTANT MAINTENANCE :
   - cette section ne modifie PAS la logique UX des étapes
   - cette section ne modifie PAS les espacements verticaux
     globaux entre les blocs
   - cette section cible la structure observée :
     .ts-product-attribute > .option > a
   ========================================================= */


/* ---------------------------------------------------------
   C.3.2.1 — Variables globales de style
   ---------------------------------------------------------
   Rôle :
   - centraliser les réglages visuels des boutons
   - permettre des ajustements rapides
   --------------------------------------------------------- */
.variations_form {
	--shopopti-attr-btn-bg: #ffffff;                         /* fond normal */
	--shopopti-attr-btn-text: #212121;                       /* texte normal */
	--shopopti-attr-btn-radius: 6px;                        /* arrondi des coins */
	--shopopti-attr-btn-font-size: 13px;                     /* taille texte desktop */
	--shopopti-attr-btn-font-weight: 550;                    /* graisse texte */

	--shopopti-attr-btn-padding-y: 8px;                     /* hauteur interne */
	--shopopti-attr-btn-padding-x: 20px;                     /* largeur interne */
	--shopopti-attr-btn-min-height: 30px;                    /* hauteur mini */
	--shopopti-attr-btn-line-height: 1.1;                    /* compacité texte */


    --shopopti-attr-btn-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);   /* ombre */
    --shopopti-attr-btn-shadow-hover: 4px 8px 19px -3px rgba(0,0,0,0.35); /* ombre */
    

	--shopopti-attr-btn-fill-bg: #212121;                    /* fond animé au hover */
	--shopopti-attr-btn-fill-text: #ffffff;                  /* texte au hover / actif */

	--shopopti-attr-btn-transition: all 250ms ease;          /* vitesse animation */
}


/* ---------------------------------------------------------
   C.3.2.2 — Reset complet de l’ancien rendu thème
   ---------------------------------------------------------
   Rôle :
   - supprimer tout encadré/fond parasite du thème
   - neutraliser les styles sur le wrapper
   --------------------------------------------------------- */
.variations_form .ts-product-attribute .option {
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	overflow: visible !important;
}


/* ---------------------------------------------------------
   C.3.2.3 — Bouton de base
   ---------------------------------------------------------
   Rôle :
   - styliser le vrai élément cliquable
   - rendu blanc + ombre + coins arrondis
   - aucune bordure visible
   --------------------------------------------------------- */
.variations_form .ts-product-attribute .option > a {
	position: relative !important;
	z-index: 1 !important;
	overflow: hidden !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	vertical-align: middle !important;

	min-height: var(--shopopti-attr-btn-min-height) !important;
	padding: var(--shopopti-attr-btn-padding-y) var(--shopopti-attr-btn-padding-x) !important;
	margin: 0 !important;

	background: var(--shopopti-attr-btn-bg) !important;
	color: var(--shopopti-attr-btn-text) !important;
	border: none !important;                                /* SUPPRESSION DE L’ENCADRÉ */
	outline: none !important;
	border-radius: var(--shopopti-attr-btn-radius) !important;
	box-shadow: var(--shopopti-attr-btn-shadow) !important;

	font-size: var(--shopopti-attr-btn-font-size) !important;
	font-weight: var(--shopopti-attr-btn-font-weight) !important;
	line-height: var(--shopopti-attr-btn-line-height) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: nowrap !important;

	transition: var(--shopopti-attr-btn-transition) !important;
}


/* ---------------------------------------------------------
   C.3.2.4 — Fond animé interne
   ---------------------------------------------------------
   Rôle :
   - reproduire l’esprit du bouton modèle
   - remplissage sombre progressif au hover
   --------------------------------------------------------- */
.variations_form .ts-product-attribute .option > a::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 0 !important;                                    /* départ invisible */
	height: 100% !important;
	z-index: -1 !important;

	background: var(--shopopti-attr-btn-fill-bg) !important;
	border-radius: var(--shopopti-attr-btn-radius) !important;
	box-shadow: none !important;
	transition: var(--shopopti-attr-btn-transition) !important;
}


/* ---------------------------------------------------------
   C.3.2.5 — Hover / focus
   ---------------------------------------------------------
   Rôle :
   - texte blanc
   - fond sombre qui se déploie
   - ombre légèrement renforcée
   --------------------------------------------------------- */
.variations_form .ts-product-attribute .option > a:hover,
.variations_form .ts-product-attribute .option > a:focus {
	color: var(--shopopti-attr-btn-fill-text) !important;
	border: none !important;
	outline: none !important;
	box-shadow: var(--shopopti-attr-btn-shadow-hover) !important;
}

.variations_form .ts-product-attribute .option > a:hover::before,
.variations_form .ts-product-attribute .option > a:focus::before {
	width: 100% !important;
}


/* ---------------------------------------------------------
   C.3.2.6 — État actif / sélectionné
   ---------------------------------------------------------
   Rôle :
   - l’option choisie doit rester lisible
   - même logique visuelle que le hover finalisé
   --------------------------------------------------------- */
.variations_form .ts-product-attribute .option.selected > a,
.variations_form .ts-product-attribute .option.active > a,
.variations_form .ts-product-attribute .option > a[aria-pressed="true"] {
	color: var(--shopopti-attr-btn-fill-text) !important;
	border: none !important;
	outline: none !important;
	box-shadow: var(--shopopti-attr-btn-shadow-hover) !important;
}

.variations_form .ts-product-attribute .option.selected > a::before,
.variations_form .ts-product-attribute .option.active > a::before,
.variations_form .ts-product-attribute .option > a[aria-pressed="true"]::before {
	width: 100% !important;
}


/* ---------------------------------------------------------
   C.3.2.7 — État désactivé / indisponible
   ---------------------------------------------------------
   Rôle :
   - conserver un rendu propre sur option indisponible
   --------------------------------------------------------- */
.variations_form .ts-product-attribute .option.disabled > a,
.variations_form .ts-product-attribute .option.out-of-stock > a,
.variations_form .ts-product-attribute .option.unavailable > a,
.variations_form .ts-product-attribute .option > a[aria-disabled="true"] {
	opacity: 0.42 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	box-shadow: none !important;
}


/* ---------------------------------------------------------
   C.3.2.8 — Neutralisation des pseudo-effets thème
   ---------------------------------------------------------
   Rôle :
   - supprimer tout trait/encadré réinjecté par le thème
   --------------------------------------------------------- */
.variations_form .ts-product-attribute .option::before,
.variations_form .ts-product-attribute .option::after,
.variations_form .ts-product-attribute .option > a::after {
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}


/* ---------------------------------------------------------
   C.3.2.9 — Largeur naturelle
   ---------------------------------------------------------
   Rôle :
   - laisser les libellés garder leur largeur naturelle
   --------------------------------------------------------- */
.variations_form .ts-product-attribute .option > a {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}


/* ---------------------------------------------------------
   C.3.2.10 — Mobile
   ---------------------------------------------------------
   Rôle :
   - garder le même style sur mobile
   - compacter légèrement sans perdre l’effet
   --------------------------------------------------------- */
@media (max-width: 768px) {

	.variations_form {
		--shopopti-attr-btn-font-size: 12px;      /* taille texte mobile */
		--shopopti-attr-btn-padding-y: 8px;      /* hauteur mobile */
		--shopopti-attr-btn-padding-x: 20px;      /* largeur mobile */
		--shopopti-attr-btn-min-height: 30px;     /* hauteur mini mobile */
		--shopopti-attr-btn-radius: 6px;         /* arrondi mobile */
	}

}



/* =========================================================
   C.3.3 — MAINTIEN VISIBLE DES OPTIONS DES ÉTAPES 1 ET 2
   ---------------------------------------------------------
   Rôle :
   - conserver visibles les options de matière et
     d’orientation après sélection de l’étape 3
   - empêcher le thème de masquer certaines options
     avec la classe ".hidden"
   - améliorer la stabilité visuelle et l’UX du parcours

   IMPORTANT MAINTENANCE :
   - le thème applique parfois ".hidden" sur certaines
     options après sélection complète
   - ce correctif ne concerne que les étapes 1 et 2
   - l’étape 3 conserve son comportement normal
   ========================================================= */
.variations_form .shopopti-step-row--1 .ts-product-attribute .option.hidden,
.variations_form .shopopti-step-row--2 .ts-product-attribute .option.hidden {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
}




/* ========================================================================
   CSS — C.4 :! Réassurance P. Produit + SKU déplacé
   ======================================================================== */


/* ========================================================================
   C.4.1 — RÉASSURANCE PRODUIT
   ======================================================================== */


/* ------------------------------------------------------------------------
   C.4.1.1 — Bloc global réassurance
   Rôle :
   - espace avec le bloc du dessus
   - organisation verticale des lignes
   ------------------------------------------------------------------------ */
.shopopti-product-reassurance {
	margin-top: 14px;      /* ← espace au-dessus du bloc */
	display: flex;
	flex-direction: column;
	row-gap: 8px;          /* ← espace entre chaque ligne */
}


/* ------------------------------------------------------------------------
   C.4.1.2 — Ligne de réassurance
   Rôle :
   - aligner icône + texte
   - régler l’espace horizontal
   ------------------------------------------------------------------------ */
.shopopti-product-reassurance__item {
	display: flex;
	align-items: center;
	column-gap: 10px;      /* ← espace entre icône et texte */
}


/* ------------------------------------------------------------------------
   C.4.1.3 — Icône de réassurance
   Rôle :
   - contrôler la taille visible de l’icône
   - garder un rendu homogène

   RÉGLAGES FACILES :
   - 18px = taille actuelle
   - 20px = plus visible
   - 16px = plus discret
   ------------------------------------------------------------------------ */
.shopopti-product-reassurance__icon {
	flex: 0 0 20px;        /* ← largeur réservée à l’icône */
	width: 20px;           /* ← la zone réservée à l’icône */
	height: 20px;          /* ← la zone réservée à l’icône */

	display: flex;
	align-items: center;
	justify-content: center;
}

.shopopti-product-reassurance__icon img {
	display: block;
	width: 20px !important;    /* ← taille réelle image */
	height: 20px !important;   /* ← taille réelle image */
	object-fit: contain;
}


/* ------------------------------------------------------------------------
   C.4.1.4 — TEXTE (UX optimisée)
   ------------------------------------------------------------------------
   Rôle :
   - lisible mais secondaire
   - cohérent avec la hiérarchie visuelle
   ------------------------------------------------------------------------ */
.shopopti-product-reassurance__text {

	display: inline;

	font-size: 0.95rem;   /* ← légèrement plus petit que le texte principal */
	line-height: 1.5;
	opacity: 0.9;         /* ← discrétion contrôlée */

	font-family: inherit;
	color: inherit;
}


/* ------------------------------------------------------------------------
   C.4.1.5 — Version mobile
   Rôle :
   - compacter légèrement le bloc sur petit écran
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {

	.shopopti-product-reassurance {
		row-gap: 7px;        /* ← espace entre lignes mobile */
	}

	.shopopti-product-reassurance__item {
		column-gap: 9px;     /* ← espace icône / texte mobile */
	}

	.shopopti-product-reassurance__icon {
		flex: 0 0 16px;      /* ← taille icône mobile */
		width: 16px;
		height: 16px;
	}

	.shopopti-product-reassurance__icon img {
		width: 16px !important;
		height: 16px !important;
	}
}


/* ========================================================================
   C.4.2 — SKU DÉPLACÉ
   ======================================================================== */


/* ------------------------------------------------------------------------
   C.4.2.1 — Wrapper SKU déplacé
   Rôle :
   - zone placée sous la description courte
   ------------------------------------------------------------------------ */
.shopopti-relocated-sku-wrap {
	display: block;
	width: 100%;
	margin: 6px 0 0;       /* ← espace au-dessus du SKU */
}


/* ------------------------------------------------------------------------
   C.4.2.2 — Style du SKU
   Rôle :
   - garder un SKU discret
   - permettre un réglage simple de la taille et de l’opacité

   RÉGLAGES FACILES :
   - font-size = taille du SKU
   - opacity   = discrétion visuelle
   ------------------------------------------------------------------------ */
.shopopti-relocated-sku-wrap .sku-wrapper,
.shopopti-relocated-sku-wrap .product_meta,
.shopopti-relocated-sku-wrap .sku,
.shopopti-custom-sku {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;

	font-size: 11px;       /* ← taille du SKU */
	line-height: 1.25;
	opacity: 0.75;         /* ← 1 = normal / 0.75 = discret / 0.55 = très discret */
	color: #555;

	font-weight: 400;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	text-transform: none !important;
}


/* ------------------------------------------------------------------------
   C.4.2.3 — Nettoyage des éléments parasites
   Rôle :
   - masquer les metas inutiles si elles suivent le SKU
   ------------------------------------------------------------------------ */
.shopopti-relocated-sku-wrap .posted_in,
.shopopti-relocated-sku-wrap .tagged_as {
	display: none !important;
}

.shopopti-custom-sku__label,
.shopopti-custom-sku__value {
	color: inherit;
	font-weight: 400;
}


/* ------------------------------------------------------------------------
   C.4.2.4 — Version mobile
   Rôle :
   - rendre le SKU encore un peu plus compact
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {

	.shopopti-relocated-sku-wrap {
		margin: 5px 0 0;
	}

	.shopopti-relocated-sku-wrap .sku-wrapper,
	.shopopti-relocated-sku-wrap .product_meta,
	.shopopti-custom-sku {
		font-size: 10px;     /* ← taille SKU mobile */
	}
}




/* ========================================================================
   C.5 — AFFICHAGE PRIX VARIABLE "À PARTIR DE"
   FICHIER : style.css
   ACTION : AJOUTER
   ------------------------------------------------------------------------
   Rôle :
   - laisser le thème gérer le style principal du prix
   - permettre un léger ajustement si besoin
   - ce bloc reste volontairement léger
   ======================================================================== */

/* ------------------------------------------------------------------------
   C.5.1 — Prix variable "À partir de"
   Rôle :
   - garder le rendu du thème
   - permettre un réglage discret si besoin
   ------------------------------------------------------------------------ */
.shopopti-price-from-label {
	/* Hérite du thème par défaut */
	font: inherit;
	color: inherit;
}

/* ------------------------------------------------------------------------
   C.5.2 — Variante optionnelle si un jour tu veux distinguer
   légèrement le "À partir de"
   ------------------------------------------------------------------------
   Décommenter uniquement si besoin plus tard

.shopopti-price-from-label {
	opacity: 0.9;
}
-------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------
   C.5.3 — Style du "À partir de"
   Rôle :
   - rendre le texte secondaire plus discret
   - garder le prix principal dominant visuellement
------------------------------------------------------------------------- */

.shopopti-price-from-label {
	font-size: 0.70em;   /* ↓ réduit la taille (0.7 à 0.85 recommandé) */
	opacity: 0.6;        /* ↓ plus discret (0.5 à 0.8 recommandé) */
	margin-right: 4px;   /* espace avec le prix */
}















/* ========================================================================
   C.6 — SWITCH VISUEL + GALERIE CUSTOM PAR VARIATION
   ------------------------------------------------------------------------
   RÔLE GLOBAL
   - regrouper tout le CSS lié au système E.7
   - distinguer clairement :
     C.6.1 = SWITCH VISUEL (matière / orientation)
     C.6.2 = GALERIE CUSTOM (rail, vignettes, états, desktop, mobile)
   - améliorer la lisibilité et la maintenance
   - ne supprimer aucun réglage déjà validé

   IMPORTANT MAINTENANCE
   - cette réorganisation ne change pas la logique métier
   - elle ne supprime pas de code utile
   - elle clarifie simplement les responsabilités visuelles
   - les styles inline injectés par E.7 peuvent encore primer dans certains cas
   - le CSS reste la source de vérité visuelle côté rendu
   ======================================================================== */






/* ========================================================================
   C.6.1 — SWITCH VISUEL
   ------------------------------------------------------------------------
   Rôle :
   - conserver le système simple du bouton 2 validé
   - déplacer visuellement le switch sous l’image sur desktop
   - créer un vrai bloc visuel associé à l’image
   - fusionner la logique de titre :
     "Aperçu Tableau"
   - afficher les repères :
     "Matière" à gauche
     "Orientation" à droite
   - mettre les 2 groupes de switch sur la même ligne en desktop
   - ne pas traiter le mobile ici
   - ne pas toucher à la logique JS
   ======================================================================== */


/* ========================================================================
   C.6.1 — SWITCH VISUEL
   ------------------------------------------------------------------------
   Rôle :
   - conserver le style simple validé du bouton 2
   - intégrer le switch sous l’image dans un bloc visuel premium
   - limiter ce bloc à la largeur de la colonne image
   - centrer :
     1) "Aperçu Tableau" en haut
     2) "Matière" au-dessus du switch matière
     3) "Orientation" au-dessus du switch orientation
   - réduire la taille des switches pour un rendu plus premium
   - ne pas toucher au mobile ici
   - ne pas toucher à la logique JS
   ======================================================================== */



/* ------------------------------------------------------------------------
   C.6.1.1 — Structure générale du switch
   ------------------------------------------------------------------------ */
.shopopti-material-switch {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 16px 0 22px;
}

.shopopti-switch-block + .shopopti-switch-block {
	margin-top: 14px;
}

.shopopti-material-switch__label {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: #666;
	text-align: center;
	font-weight: 500;
}


/* ------------------------------------------------------------------------
   C.6.1.2 — Wrapper des boutons
   ------------------------------------------------------------------------
   Rôle :
   - conserver une base structurelle neutre pour le conteneur des options
   - ne porter aucun style visuel concurrent
   - laisser C.6.1.7 gérer l’apparence réelle du switch

   Point d’attention :
   - aucun fond, aucune ombre, aucun radius, aucun overflow bloquant
   ------------------------------------------------------------------------ */
.shopopti-material-switch__buttons {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: auto;
	min-width: 0;
	padding: 0;
	margin: 0;

	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	overflow: visible !important;
}



/* ------------------------------------------------------------------------
   C.6.1.3 — Radios masqués
   ------------------------------------------------------------------------ */
.shopopti-material-switch__radio {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}


/* ------------------------------------------------------------------------
   C.6.1.4 — Boutons / labels
   ------------------------------------------------------------------------
   Rôle :
   - conserver une base structurelle neutre pour les labels cliquables
   - supprimer l’ancienne logique visuelle segmentée
   - laisser C.6.1.7 piloter l’état actif, le texte et le trait

   Point d’attention :
   - aucun fond blanc
   - aucune bordure segmentée
   - aucun état actif noir
   - aucun arrondi par segment
   ------------------------------------------------------------------------ */
.shopopti-material-switch__btn {
	position: relative;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 0;
	height: auto;
	padding: 0;
	margin: 0;

	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	white-space: nowrap;
	text-align: center;
	color: inherit;

	cursor: pointer;
	user-select: none;

	transition: none !important;
}

/* Neutralisation des anciens arrondis par segment */
.shopopti-material-switch__btn:first-of-type,
.shopopti-material-switch__btn:last-of-type,
.shopopti-material-switch__btn:not(:first-of-type):not(:last-of-type) {
	border-radius: 0 !important;
}

/* Neutralisation des anciens recouvrements de bordure */
.shopopti-material-switch__btn + .shopopti-material-switch__radio + .shopopti-material-switch__btn,
.shopopti-material-switch__btn + .shopopti-material-switch__btn {
	margin-left: 0 !important;
}

/* Hover neutre : l’apparence réelle est gérée plus bas */
.shopopti-material-switch__btn:hover {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* État actif neutre : l’apparence réelle est gérée plus bas */
.shopopti-material-switch__btn.is-active {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
}

.shopopti-material-switch__btn:active {
	transform: none !important;
}

/* ------------------------------------------------------------------------
   C.6.1.5 — Glider
   ------------------------------------------------------------------------
   Rôle :
   - conserver l’élément indicateur dans une base neutre
   - ne plus imposer de masquage global à ce niveau
   - laisser C.6.1.7 décider si l’indicateur est utilisé ou non

   Point d’attention :
   - aucune logique visuelle ici
   ------------------------------------------------------------------------ */
.shopopti-material-switch__indicator {
	position: absolute;
	left: 0;
	top: auto;
	bottom: 0;

	display: block;
	width: 0;
	height: 0;

	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	pointer-events: none;
	opacity: 0;
}


/* ------------------------------------------------------------------------
   C.6.1.6 — Focus / accessibilité
   ------------------------------------------------------------------------ */
.shopopti-material-switch__radio:focus + .shopopti-material-switch__btn,
.shopopti-material-switch__btn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}







/* ------------------------------------------------------------------------
   C.6.1.7 — SWITCH SOUS IMAGE : ASPECT TEXTE + TRAIT ACTIF
   ------------------------------------------------------------------------
   Rôle global :
   - conserver la structure actuelle des 2 switchs
   - conserver le bloc blanc avec ombre et radius
   - remplacer l’aspect "segments / rectangles actifs"
     par un rendu plus léger : texte + trait sous l’option active
   - appliquer le même principe sur desktop et mobile

   Réglages faciles :
   - taille "Aperçu Tableau"        : --shopopti-switch-title-size
   - espace entre les 2 lignes      : --shopopti-switch-gap-y-base
   - largeur interne des lignes     : --shopopti-switch-row-width-base
   - taille du texte des options    : --shopopti-switch-button-font-size-base
   - marge latérale des options     : --shopopti-switch-button-padding-x-base
   - espace texte / trait           : --shopopti-switch-underline-offset-base
   - longueur + épaisseur du trait  : --shopopti-switch-underline-scale
   - couleur hover                  : --shopopti-switch-text-hover
   ------------------------------------------------------------------------ */


/* ------------------------------------------------------------------------
   C.6.1.7.1 — Base commune + variables
   ------------------------------------------------------------------------
   Rôle :
   - centraliser les réglages desktop + mobile
   - garder le même rendu visuel sur les 2 supports
   - permettre un ajustement fin des espacements

   Réglages faciles :
   1) Taille des textes desktop
      - --shopopti-switch-button-font-size-base

   2) Taille des textes mobile
      - --shopopti-switch-button-font-size-mobile

   3) Marge gauche / droite interne des blocs
      - --shopopti-switch-block-padding-x-base

   4) Marge haut / bas interne des blocs
      - --shopopti-switch-block-padding-y-base

   5) Espacement fixe entre les textes / options
      - --shopopti-switch-option-gap-base

   6) Espace texte / trait
      - --shopopti-switch-underline-offset-base

   7) Épaisseur du trait
      - --shopopti-switch-underline-thickness

   8) Réduction proportionnelle globale
      - --shopopti-switch-scale-desktop
      - --shopopti-switch-scale-mobile
   ------------------------------------------------------------------------ */
body.single-product #shopopti-material-switch,
body.single-product .shopopti-material-switch {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: center !important;

	/* Réduction proportionnelle globale */
	--shopopti-switch-scale-desktop: 1;
	--shopopti-switch-scale-mobile: 0.92;
	--shopopti-switch-scale-current: var(--shopopti-switch-scale-desktop);

	/* Titre */
	--shopopti-switch-title-size: 12px;
	--shopopti-switch-title-gap: 14px;

	/* Espace entre les 2 blocs */
	--shopopti-switch-gap-y-base: 5px;

	/* Largeur visuelle maximale des lignes
	   IMPORTANT :
	   - sert seulement de garde-fou maximum
	   - le bloc peut maintenant se rétrécir selon le contenu */
	--shopopti-switch-row-width-base: 420px;

	/* Marges internes des blocs
	   = marge gauche/droite fixe + marge haut/bas fixe */
	--shopopti-switch-block-padding-y-base: 5px; /* haut / bas */
	--shopopti-switch-block-padding-x-base: 10px; /* gauche / droite */

	--shopopti-switch-radius-base: 6px;
	--shopopti-switch-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 18px 34px rgba(0, 0, 0, 0.10);

	/* Texte */
	--shopopti-switch-button-font-size-base: 13px;   /* desktop */
	--shopopti-switch-button-font-size-mobile: 13px; /* mobile */
	--shopopti-switch-button-font-weight: 600;

	/* Padding interne propre au texte */
	--shopopti-switch-button-padding-x-base: 20px;
	--shopopti-switch-button-padding-y-base: 4px;

	/* Espace FIXE entre les options
	   - indépendant du nombre de variations
	   - augmente / réduit l’espace entre les textes */
	--shopopti-switch-option-gap-base: 2px;

	--shopopti-switch-text-default: #8d8d8d;
	--shopopti-switch-text-active: #111111;
	--shopopti-switch-text-hover: #5f5f5f;

	/* Trait
	   - laissé intact car rendu validé */
	--shopopti-switch-underline-offset-base: 1px;
	--shopopti-switch-underline-thickness: 3px;
	--shopopti-switch-underline-scale: 0.50;
	--shopopti-switch-underline-color: #111111;

	margin: 16px 0 22px !important;
	transform: scale(var(--shopopti-switch-scale-current)) !important;
	transform-origin: top center !important;
}



/* ------------------------------------------------------------------------
   C.6.1.7.2 — Titre global
   ------------------------------------------------------------------------ */
#shopopti-material-switch::before,
.shopopti-material-switch::before {
	content: "Aperçu Tableau";
	display: block;
	margin: 0 0 var(--shopopti-switch-title-gap) 0;
	font-size: var(--shopopti-switch-title-size);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	color: rgba(34, 34, 34, 0.68);
	text-align: center;
}


/* ------------------------------------------------------------------------
   C.6.1.7.3 — Bloc d’une ligne
   ------------------------------------------------------------------------
   Rôle :
   - garder un fond blanc net
   - renforcer l’ombre extérieure
   - garder le trait visible hors du flux interne
   - permettre au bloc de se rétrécir selon le contenu réel

   Point d’attention :
   - le bloc ne prend plus systématiquement toute la largeur max
   - il garde une marge gauche / droite fixe via le padding interne
   ------------------------------------------------------------------------ */
body.single-product #shopopti-material-switch .shopopti-switch-block,
body.single-product .shopopti-material-switch .shopopti-switch-block {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;

	/* IMPORTANT :
	   - largeur naturelle selon le contenu
	   - max-width = garde-fou pour ne pas déborder */
	width: fit-content !important;
	max-width: min(100%, var(--shopopti-switch-row-width-base)) !important;

	margin: 0 auto !important;
	padding:
		var(--shopopti-switch-block-padding-y-base)
		var(--shopopti-switch-block-padding-x-base) !important;

	background: #ffffff !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--shopopti-switch-radius-base) !important;
	box-shadow: var(--shopopti-switch-shadow) !important;
	overflow: visible !important;
}

body.single-product #shopopti-material-switch .shopopti-switch-block + .shopopti-switch-block,
body.single-product .shopopti-material-switch .shopopti-switch-block + .shopopti-switch-block {
	margin-top: var(--shopopti-switch-gap-y-base) !important;
}



/* ------------------------------------------------------------------------
   C.6.1.7.4 — Libellés internes
   ------------------------------------------------------------------------
   Les libellés "Matière" et "Orientation" restent dans le DOM
   mais ne sont pas affichés visuellement.
   ------------------------------------------------------------------------ */
#shopopti-material-switch .shopopti-material-switch__label,
.shopopti-material-switch .shopopti-material-switch__label {
	display: none !important;
}



/* ------------------------------------------------------------------------
   C.6.1.7.5 — Wrapper des options
   ------------------------------------------------------------------------
   Rôle :
   - garder une répartition propre des textes
   - assurer un alignement stable du groupe
   - appliquer un espace fixe entre les options
   - laisser le groupe prendre seulement la largeur nécessaire

   Point d’attention :
   - on ne répartit plus les options sur toute la largeur
   - le groupe reste centré dans le bloc
   ------------------------------------------------------------------------ */
body.single-product #shopopti-material-switch .shopopti-material-switch__buttons,
body.single-product .shopopti-material-switch .shopopti-material-switch__buttons {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	/* Espace fixe entre chaque texte / option */
	gap: var(--shopopti-switch-option-gap-base) !important;

	/* Largeur naturelle du groupe */
	width: fit-content !important;
	max-width: 100% !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 auto !important;

	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}


/* ------------------------------------------------------------------------
   C.6.1.7.6 — Radios masqués
   ------------------------------------------------------------------------ */
#shopopti-material-switch .shopopti-material-switch__radio,
.shopopti-material-switch .shopopti-material-switch__radio {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}


/* ------------------------------------------------------------------------
   C.6.1.7.7 — Options texte
   ------------------------------------------------------------------------
   Rôle :
   - faire porter l’état actif visuel par le radio natif :checked
   - éviter la dépendance à une classe JS pouvant arriver en retard
   - garder le même rendu desktop / mobile
   - laisser chaque option prendre sa largeur naturelle

   Réglages faciles :
   - taille des textes                  : --shopopti-switch-button-font-size-base
   - padding interne du texte          : --shopopti-switch-button-padding-x-base
   - espace texte / trait              : --shopopti-switch-underline-offset-base
   - longueur du trait                 : --shopopti-switch-underline-scale
   - épaisseur du trait                : --shopopti-switch-underline-thickness

   Point d’attention :
   - chaque option garde sa largeur de contenu
   - c’est le groupe entier qui se rétrécit selon 1 / 2 / 3 options
   ------------------------------------------------------------------------ */
body.single-product #shopopti-material-switch .shopopti-material-switch__btn,
body.single-product .shopopti-material-switch .shopopti-material-switch__btn {
	position: relative !important;
	z-index: 2 !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	/* IMPORTANT :
	   - plus d’étirement des options
	   - largeur basée sur le contenu réel */
	flex: 0 0 auto !important;

	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding:
		var(--shopopti-switch-button-padding-y-base)
		var(--shopopti-switch-button-padding-x-base) !important;

	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	font-family: inherit !important;
	font-size: var(--shopopti-switch-button-font-size-base) !important;
	font-weight: var(--shopopti-switch-button-font-weight) !important;
	line-height: 1.15 !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	text-align: center !important;
	color: var(--shopopti-switch-text-default) !important;

	cursor: pointer !important;
	user-select: none !important;
	transition: color 0.12s ease !important;
}

body.single-product #shopopti-material-switch .shopopti-material-switch__btn:hover,
body.single-product .shopopti-material-switch .shopopti-material-switch__btn:hover {
	color: var(--shopopti-switch-text-hover) !important;
}

/* État actif visuel fiable */
body.single-product #shopopti-material-switch .shopopti-material-switch__radio:checked + .shopopti-material-switch__btn,
body.single-product .shopopti-material-switch .shopopti-material-switch__radio:checked + .shopopti-material-switch__btn {
	color: var(--shopopti-switch-text-active) !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Compatibilité */
body.single-product #shopopti-material-switch .shopopti-material-switch__btn.is-active,
body.single-product .shopopti-material-switch .shopopti-material-switch__btn.is-active {
	color: var(--shopopti-switch-text-active) !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* -------------------------------------------------
   Trait porté par le label actif
   - positionné sous le texte
   - longueur basée sur le bouton
   - effet discret par opacité uniquement
------------------------------------------------- */
body.single-product #shopopti-material-switch .shopopti-material-switch__btn::after,
body.single-product .shopopti-material-switch .shopopti-material-switch__btn::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(var(--shopopti-switch-underline-offset-base) * -1);

	/* Longueur du trait */
	width: 100%;

	/* Épaisseur du trait */
	height: var(--shopopti-switch-underline-thickness);

	/* Couleur du trait */
	background: var(--shopopti-switch-underline-color);

	/* Arrondi du trait */
	border-radius: 999px;

	/* Invisible par défaut */
	opacity: 0;

	/* Position fixe */
	transform: translateX(-50%) scaleX(var(--shopopti-switch-underline-scale));
	transform-origin: center center;

	/* Animation très légère */
	transition: opacity 0.12s ease;

	pointer-events: none;
	z-index: 3;
}

/* -------------------------------------------------
   État actif du trait
------------------------------------------------- */
body.single-product #shopopti-material-switch .shopopti-material-switch__btn.is-active::after,
body.single-product .shopopti-material-switch .shopopti-material-switch__btn.is-active::after,
body.single-product #shopopti-material-switch .shopopti-material-switch__radio:checked + .shopopti-material-switch__btn::after,
body.single-product .shopopti-material-switch .shopopti-material-switch__radio:checked + .shopopti-material-switch__btn::after {
	opacity: 1;
}

/* Le trait suit aussi :checked */
body.single-product #shopopti-material-switch .shopopti-material-switch__radio:checked + .shopopti-material-switch__btn::after,
body.single-product .shopopti-material-switch .shopopti-material-switch__radio:checked + .shopopti-material-switch__btn::after {
	opacity: 1;
	transform: translateX(-50%) scaleX(var(--shopopti-switch-underline-scale));
}

/* Compatibilité avec .is-active */
body.single-product #shopopti-material-switch .shopopti-material-switch__btn.is-active::after,
body.single-product .shopopti-material-switch .shopopti-material-switch__btn.is-active::after {
	opacity: 1;
	transform: translateX(-50%) scaleX(var(--shopopti-switch-underline-scale));
}


/* ------------------------------------------------------------------------
   C.6.1.7.8 — Neutralisation des anciens indicateurs
   ------------------------------------------------------------------------
   Rôle :
   - neutraliser complètement le trait glissant / indicateur séparé
   - ne garder qu’un seul système visuel :
     radio :checked + label
   ------------------------------------------------------------------------ */
body.single-product #shopopti-material-switch .shopopti-material-switch__indicator,
body.single-product .shopopti-material-switch .shopopti-material-switch__indicator {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: none !important;
}

body.single-product #shopopti-material-switch .shopopti-material-switch__btn::before,
body.single-product .shopopti-material-switch .shopopti-material-switch__btn::before {
	display: none !important;
	content: none !important;
}

/* ------------------------------------------------------------------------
   C.6.1.7.9 — Arrondis
   ------------------------------------------------------------------------
   Rôle :
   - neutraliser les anciens arrondis par segment
   - garder un rendu texte simple, sans bouton découpé
   ------------------------------------------------------------------------ */
#shopopti-material-switch .shopopti-material-switch__btn:first-of-type,
.shopopti-material-switch .shopopti-material-switch__btn:first-of-type,
#shopopti-material-switch .shopopti-material-switch__btn:last-of-type,
.shopopti-material-switch .shopopti-material-switch__btn:last-of-type,
#shopopti-material-switch .shopopti-material-switch__btn:not(:first-of-type):not(:last-of-type),
.shopopti-material-switch .shopopti-material-switch__btn:not(:first-of-type):not(:last-of-type) {
	border-radius: 0 !important;
}


/* ------------------------------------------------------------------------
   C.6.1.7.10 — Desktop
   ------------------------------------------------------------------------
   Rôle :
   - faire pointer le desktop vers la base commune actuelle
   ------------------------------------------------------------------------ */
@media (min-width: 769px) {
	body.single-product #shopopti-material-switch,
	body.single-product .shopopti-material-switch {
		--shopopti-switch-scale-current: var(--shopopti-switch-scale-desktop) !important;
		max-width: none !important;
		margin: 16px auto 22px !important;
	}
}


/* ------------------------------------------------------------------------
   C.6.1.7.11 — Mobile
   ------------------------------------------------------------------------
   Rôle :
   - devenir l’unique source de vérité pour le rendu mobile
   - conserver la même base visuelle que desktop
   - réduire le switch par les vraies dimensions CSS
   - supprimer l’usage du transform scale qui crée de faux espaces
   - permettre un réglage direct des espaces visibles

   Réglages faciles MOBILE :
   1) espace entre le titre et le 1er bloc
      - --shopopti-switch-title-gap

   2) espace entre les 2 blocs
      - --shopopti-switch-gap-y-base

   3) largeur visuelle maximale des blocs
      - --shopopti-switch-row-width-base

   4) marges internes des blocs
      - haut / bas      : --shopopti-switch-block-padding-y-base
      - gauche / droite : --shopopti-switch-block-padding-x-base

   5) taille du texte mobile
      - --shopopti-switch-button-font-size-base

   6) espacement horizontal entre les textes
      - --shopopti-switch-button-padding-x-base

   7) espace vertical global autour du switch
      - margin
      - 1ère valeur = au-dessus
      - 3ème valeur = en dessous (vers l’image)

   IMPORTANT :
   - on ne redéfinit pas ici les paramètres du trait
   - le trait garde la même base que desktop
   - on ne met plus de transform scale sur mobile
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
	body.single-product #shopopti-material-switch,
	body.single-product .shopopti-material-switch {

		/* -------------------------------------------------
		   IMPORTANT
		   -------------------------------------------------
		   Pas de transform scale sur mobile.
		   Pourquoi :
		   - le scale réduit visuellement le bloc
		   - mais il garde sa taille logique dans le layout
		   - cela crée de faux espaces au-dessus et au-dessous

		   Donc ici :
		   - 1 = taille réelle
		   - tout l’ajustement mobile se fait par les vraies
		     dimensions CSS ci-dessous
		   ------------------------------------------------- */
		--shopopti-switch-scale-current: 1;

		/* -------------------------------------------------
		   TITRE "Aperçu Tableau"
		   -------------------------------------------------
		   --shopopti-switch-title-size
		   = taille du texte du titre sur mobile

		   Exemple :
		   - 15px = compact et lisible
		   - 14px = un peu plus discret
		   - 16px = un peu plus présent
		   ------------------------------------------------- */
		--shopopti-switch-title-size: 11px;
		
		
		
		/* -------------------------------------------------
            Herite radius desktop
		   ------------------------------------------------- */
		
		--shopopti-switch-block-radius: var(--shopopti-switch-block-radius);
		

		/* -------------------------------------------------
		   ESPACE TITRE -> 1ER BLOC
		   -------------------------------------------------
		   --shopopti-switch-title-gap
		   = espace entre "Aperçu Tableau" et le premier switch

		   Augmenter :
		   - donne plus d’air sous le titre

		   Diminuer :
		   - rapproche le titre du premier bloc
		   ------------------------------------------------- */
		--shopopti-switch-title-gap: 6px;

		/* -------------------------------------------------
		   ESPACE ENTRE LES 2 BLOCS
		   -------------------------------------------------
		   --shopopti-switch-gap-y-base
		   = espace vertical entre :
		     1) bloc matière
		     2) bloc orientation

		   Augmenter :
		   - sépare davantage les deux lignes

		   Diminuer :
		   - compacte davantage l’ensemble
		   ------------------------------------------------- */
		--shopopti-switch-gap-y-base: 5px;

		/* -------------------------------------------------
		   LARGEUR VISUELLE MAXIMALE DES BLOCS
		   -------------------------------------------------
		   --shopopti-switch-row-width-base
		   = largeur maximale réelle d’un bloc switch

		   Fonctionnement :
		   - la section C.6.1.7.3 utilise :
		     width: min(100%, var(--shopopti-switch-row-width-base))

		   Donc :
		   - si l’écran est plus petit, le bloc prend 100%
		   - si l’écran est plus grand, il se bloque à cette valeur

		   IMPORTANT :
		   Depuis la suppression du transform scale,
		   cette valeur contrôle directement la largeur visible.

		   Exemples :
		   - 320px = plus large
		   - 300px = intermédiaire
		   - 280px = plus compact
		   - 260px = très compact
		   ------------------------------------------------- */
		--shopopti-switch-row-width-base: 280px;

		/* -------------------------------------------------
		   MARGES INTERNES DES BLOCS
		   -------------------------------------------------
		   --shopopti-switch-block-padding-y-base
		   = espace intérieur haut / bas

		   Augmenter :
		   - donne plus d’air vertical dans le bloc
		   - rend le bloc plus haut

		   Diminuer :
		   - compacte verticalement le bloc
		   ------------------------------------------------- */
		--shopopti-switch-block-padding-y-base: 5px;

		/* -------------------------------------------------
		   MARGES INTERNES GAUCHE / DROITE
		   -------------------------------------------------
		   --shopopti-switch-block-padding-x-base
		   = espace intérieur gauche / droite du bloc

		   Augmenter :
		   - donne plus d’air sur les côtés
		   - élargit visuellement le bloc

		   Diminuer :
		   - rapproche le texte des bords
		   - compacte la largeur perçue
		   ------------------------------------------------- */
		--shopopti-switch-block-padding-x-base: 10px;

		/* -------------------------------------------------
		   TAILLE DU TEXTE MOBILE
		   -------------------------------------------------
		   --shopopti-switch-button-font-size-base
		   = taille du texte des options sur mobile

		   Exemples :
		   - 13px = compact
		   - 14px = un peu plus lisible
		   - 12px = plus discret
		   ------------------------------------------------- */
		--shopopti-switch-button-font-size-base: 12px;

		/* -------------------------------------------------
		   ESPACE HORIZONTAL ENTRE LES TEXTES
		   -------------------------------------------------
		   --shopopti-switch-button-padding-x-base
		   = espace gauche / droite autour de chaque texte

		   Augmenter :
		   - espace davantage les mots entre eux
		   - donne un rendu plus aéré

		   Diminuer :
		   - compacte les options
		   - utile si le bloc est trop large
		   ------------------------------------------------- */
		--shopopti-switch-button-padding-x-base: 12px;

		/* -------------------------------------------------
		   ESPACE VERTICAL AUTOUR DU TEXTE
		   -------------------------------------------------
		   --shopopti-switch-button-padding-y-base
		   = petit air au-dessus et au-dessous du texte
		   à l’intérieur de chaque option

		   Augmenter :
		   - donne plus de hauteur visuelle au texte

		   Diminuer :
		   - rend la ligne plus compacte
		   ------------------------------------------------- */
		--shopopti-switch-button-padding-y-base: 4px;

		/* -------------------------------------------------
		   ESPACE GLOBAL DU BLOC MOBILE
		   -------------------------------------------------
		   margin: [haut] [droite] [bas] [gauche]

		   Ici :
		   - 0   = pas d’espace supplémentaire au-dessus
		   - 4px = petit espace sous le switch vers l’image

		   Pour réduire l’espace avec l’image :
		   - diminuer la 3ème valeur

		   Pour augmenter l’espace avec l’image :
		   - augmenter la 3ème valeur
		   ------------------------------------------------- */
		margin: 0 0 5px !important;

		/* Sécurité : aucune réduction visuelle artificielle */
		transform: none !important;
		transform-origin: top center !important;
	}

	/* -----------------------------------------------------
	   SÉCURITÉ VISUELLE MOBILE — BLOCS
	   -----------------------------------------------------
	   Rôle :
	   - conserver le même rendu que desktop
	   - empêcher le retour d’un ancien style mobile
	   ----------------------------------------------------- */
	body.single-product #shopopti-material-switch .shopopti-switch-block,
	body.single-product .shopopti-material-switch .shopopti-switch-block {
		background: #ffffff !important;
		background-image: none !important;
		border: 0 !important;
		border-radius: var(--shopopti-switch-radius-base) !important;
		box-shadow: var(--shopopti-switch-shadow) !important;
		overflow: visible !important;
	}

	/* -----------------------------------------------------
	   SÉCURITÉ VISUELLE MOBILE — ESPACE ENTRE BLOCS
	   ----------------------------------------------------- */
	body.single-product #shopopti-material-switch .shopopti-switch-block + .shopopti-switch-block,
	body.single-product .shopopti-material-switch .shopopti-switch-block + .shopopti-switch-block {
		margin-top: var(--shopopti-switch-gap-y-base) !important;
	}

	/* -----------------------------------------------------
	   SÉCURITÉ VISUELLE MOBILE — WRAPPER OPTIONS
	   ----------------------------------------------------- */
	body.single-product #shopopti-material-switch .shopopti-material-switch__buttons,
	body.single-product .shopopti-material-switch .shopopti-material-switch__buttons {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	/* -----------------------------------------------------
	   SÉCURITÉ VISUELLE MOBILE — LABELS / OPTIONS
	   ----------------------------------------------------- */
	body.single-product #shopopti-material-switch .shopopti-material-switch__btn,
	body.single-product .shopopti-material-switch .shopopti-material-switch__btn {
		background: transparent !important;
		background-image: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		font-size: var(--shopopti-switch-button-font-size-base) !important;
	}

	/* -----------------------------------------------------
	   SÉCURITÉ VISUELLE MOBILE — ÉTAT ACTIF
	   ----------------------------------------------------- */
	body.single-product #shopopti-material-switch .shopopti-material-switch__btn.is-active,
	body.single-product .shopopti-material-switch .shopopti-material-switch__btn.is-active,
	body.single-product #shopopti-material-switch .shopopti-material-switch__radio:checked + .shopopti-material-switch__btn,
	body.single-product .shopopti-material-switch .shopopti-material-switch__radio:checked + .shopopti-material-switch__btn {
		color: var(--shopopti-switch-text-active) !important;
		background: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
		border: 0 !important;
	}
}


/* ------------------------------------------------------------------------
   C.6.1.7.12 — Très petit mobile
   ------------------------------------------------------------------------
   Rôle :
   - neutralisé volontairement
   - la logique mobile est désormais centralisée dans C.6.1.7.11
   ------------------------------------------------------------------------ */
/* Section volontairement laissée vide */


/* ========================================================================
   C.6.2 — GALERIE CUSTOM / VIGNETTES
   ------------------------------------------------------------------------
   Contient :
   - les garde-fous généraux de galerie
   - le rail custom
   - les boutons vignettes
   - les images des vignettes
   - les états actif / inactif
   - les réglages desktop
   - les réglages mobile
   ======================================================================== */



/* ------------------------------------------------------------------------
   C.6.2.1 — Galerie : garde-fous généraux
   ------------------------------------------------------------------------
   Rôle :
   - ne pas casser la galerie principale
   - garder des images non déformées
   ------------------------------------------------------------------------ */
.single-product .woocommerce-product-gallery img,
.single-product .images img,
.single-product div.images img {
	max-width: 100%;
	height: auto;
}


/* ------------------------------------------------------------------------
   C.6.2.2 — Rail custom : structure commune
   ------------------------------------------------------------------------
   Rôle :
   - cibler uniquement le rail custom réel
   - ne plus dépendre de .flex-control-thumbs
   - garder le scroll horizontal si nécessaire

   IMPORTANT
   - ce bloc pose la base commune
   - les comportements desktop / mobile sont détaillés plus bas
   ------------------------------------------------------------------------ */
#shopopti-custom-thumb-rail {
	display: flex;

	/* 🔴 AJOUT */
	flex-wrap: nowrap;

	gap: 12px;
	margin-top: 14px;
	padding: 2px 0 4px;

	overflow-x: auto;
	overflow-y: hidden;
}

/* ------------------------------------------------------------------------
   C.6.2.3 — Rail custom : boutons de vignettes
   ------------------------------------------------------------------------
   Rôle :
   - supprimer tout ratio carré persistant au niveau du conteneur
   - laisser la hauteur suivre le contenu réel
   - garder une structure propre et neutre
   ------------------------------------------------------------------------ */
#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	overflow: hidden;
	border-radius: 0 !important;
	line-height: 0;

	/* reset critique */
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: auto !important;
}

/* ------------------------------------------------------------------------
   C.6.2.4 — Rail custom : images des vignettes
   ------------------------------------------------------------------------
   Rôle :
   - supprimer l’effet 1:1 persistant
   - empêcher toute coupe verticale
   - garder le ratio naturel de chaque vignette
   - laisser la grille mobile afficher des miniatures non recadrées
   ------------------------------------------------------------------------ */
#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn img {
	display: block;
	width: 100% !important;
	height: auto !important;          /* ← très important : plus de hauteur forcée */
	max-width: 100% !important;
	max-height: none !important;
	object-fit: contain !important;   /* ← pas de crop */
	object-position: center center !important;
	aspect-ratio: auto !important;
	background: transparent;
	border: none !important;
	box-shadow: none !important;
}


/* ------------------------------------------------------------------------
   C.6.2.5 — Rail custom : état actif / inactif
   ------------------------------------------------------------------------
   Rôle :
   - gérer l’opacité de la vignette active
   - garder un hover discret
   ------------------------------------------------------------------------ */
#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn {
	opacity: 1;
	transition: opacity .2s ease, transform .2s ease;
}

#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn[style*="opacity: 0.45"] img {
	opacity: 0.34 !important;
	filter: none !important;
}

#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn:not([style*="opacity: 0.45"]) img {
	opacity: 1 !important;
	filter: none !important;
}

#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn:not([style*="opacity: 0.45"]):hover {
	transform: translateY(-1px);
}


/* ------------------------------------------------------------------------
   C.6.2.6 — Desktop : rail vertical gauche (sans crop)
   ------------------------------------------------------------------------
   Rôle :
   - corriger le problème de vignettes coupées
   - respecter le ratio réel des images
   - s’aligner visuellement avec le thème

   AJUSTEMENTS :
   - largeur vignette → width
   - espacement vertical → gap
   ------------------------------------------------------------------------ */
@media (min-width: 769px) {

	#shopopti-custom-thumb-rail {
		width: 120px;          /* ← ajuster largeur globale rail */
		max-width: 120px;
		min-width: 120px;

		flex-direction: column;
		gap: 14px;             /* ← espace entre vignettes */

		overflow-x: hidden;
		overflow-y: auto;
	}

	#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
	}

	#shopopti-custom-thumb-rail img {
		width: 100%;
		height: auto !important;
		object-fit: contain !important; /* ← IMPORTANT : supprime le crop */
	}
}

/* ------------------------------------------------------------------------
   C.6.2.7 — MOBILE : GRILLE 4 COLONNES + RATIO NATUREL
   Rôle :
   - conserver la grille mobile 4 colonnes validée
   - supprimer tout forçage carré
   - réduire réellement l’espace galerie -> vignettes -> titre
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {

	#shopopti-custom-thumb-rail {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		grid-auto-rows: auto !important;

		column-gap: 6px !important;
		row-gap: 8px !important;

		/* espace image principale -> vignettes */
		margin-top: 2px !important;

		/* espace vignettes -> titre */
		margin-bottom: 2px !important;

		padding: 0 !important;

		width: 100% !important;
		max-width: 100% !important;

		flex-direction: unset !important;
		flex-wrap: unset !important;
		overflow: visible !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		white-space: normal !important;
		align-items: start !important;
		justify-items: stretch !important;
	}

	#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn {
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: auto !important;
		flex: unset !important;

		display: block !important;
		padding: 0 !important;
		overflow: hidden !important;
		background: transparent !important;
		line-height: 0 !important;
	}

	#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: none !important;
		object-fit: contain !important;
		object-position: center center !important;
		aspect-ratio: auto !important;
	}

	.single-product .product_title,
	.single-product h1.product_title,
	.single-product .entry-title {
		margin-top: 2px !important;
	}
}


/* ------------------------------------------------------------------------
   C.6.2.8 — TRÈS PETIT MOBILE : COMPACTAGE SANS FORÇAGE 1:1
   Rôle :
   - conserver la même logique sous 420px
   - ne jamais réintroduire de ratio carré
   ------------------------------------------------------------------------ */
@media (max-width: 420px) {

	#shopopti-custom-thumb-rail {
		gap: 6px !important;
		margin-top: 2px !important;
		margin-bottom: 2px !important;
	}

	#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn {
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: auto !important;
	}

	#shopopti-custom-thumb-rail .shopopti-custom-thumb-btn img {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		object-fit: contain !important;
		aspect-ratio: auto !important;
	}
}


/* ------------------------------------------------------------------------
   C.6.2.9 — MOBILE : ESPACE GALERIE → VIGNETTES
   Rôle :
   - contrôler précisément l’espace situé entre la galerie principale
     (image produit) et le rail de vignettes
   - garantir un rendu compact et cohérent
   - neutraliser les marges basses du wrapper galerie
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {

	/* Réduction espace galerie → vignettes */
	#shopopti-custom-thumb-rail {
		margin-top: 6px !important;
	}

	/* Sécurité : on supprime l’espace sous la galerie */
	.woocommerce-product-gallery,
	.single-product .images,
	.single-product div.images {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* ------------------------------------------------------------------------
   C.6.2.10 — MOBILE : ESPACE VIGNETTES → TITRE PRODUIT
   Rôle :
   - contrôler précisément l’espace situé sous le rail de vignettes
   - garantir une respiration visuelle cohérente avec le dessus (C.6.2.9)
   - éviter tout conflit avec les marges natives du thème WooCommerce
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {

	/* -----------------------------------------------------
	   1) Rail de vignettes : espace sous les vignettes
	   → pilote principal de l’espacement bas
	   ----------------------------------------------------- */
	#shopopti-custom-thumb-rail {
		margin-bottom: 12px !important;
	}

	/* -----------------------------------------------------
	   2) Titre produit : neutralisation des marges hautes
	   → évite le cumul avec le margin-bottom du rail
	   ----------------------------------------------------- */
	.single-product .product_title,
	.single-product h1.product_title,
	.single-product .entry-title {
		margin-top: 0 !important;
	}

	/* -----------------------------------------------------
	   3) Sécurité : si le titre est directement adjacent au rail
	   → garantit un rendu stable quel que soit le DOM
	   ----------------------------------------------------- */
	#shopopti-custom-thumb-rail + .product_title,
	#shopopti-custom-thumb-rail + h1.product_title,
	#shopopti-custom-thumb-rail + .entry-title {
		margin-top: 0 !important;
	}
}


/**************************************************************************************************
 * D — IMPORT CSV PERSONNALISÉ
 * D.1 — SHIPPING_DELAY_RANGE
 * ------------------------------------------------------------------------------------------------
 * Cette section gère l’affichage visuel du bloc de disponibilité et de livraison estimée
 * sur la fiche produit.
 *
 * Objectif :
 * - Structurer une information claire, lisible et cohérente autour de la disponibilité produit
 * - Mettre en avant une estimation de livraison basée sur les données issues du CSV
 *
 * Logique d’affichage :
 * - Bloc positionné sous le CTA (Ajouter au panier)
 * - Organisation en une ligne :
 *      gauche  → état du produit (Disponible / Bientôt disponible)
 *      droite  → information de livraison estimée
 *
 * Principes UX :
 * - Lecture immédiate grâce à un code couleur simple :
 *      vert  → produit disponible
 *      rouge → produit non disponible
 * - Ajout d’un indicateur visuel (point) pour renforcer la compréhension rapide
 * - Hiérarchisation :
 *      statut en priorité
 *      livraison en information secondaire (opacité réduite)
 *
 * Structure visuelle :
 * - Bloc encadré par deux séparateurs horizontaux
 * - Alignement horizontal avec la zone panier pour cohérence graphique
 * - Espacement vertical maîtrisé pour aérer la fiche produit
 *
 * Paramétrage :
 * - Toutes les variables principales (couleurs, espacements, tailles)
 *   sont centralisées dans :root pour un ajustement rapide
 *
 * Responsive :
 * - Conservation de la structure horizontale tant que possible
 * - Ajustement des tailles et espacements sur mobile
 *
 * Dépendance :
 * - Ce bloc dépend des données dynamiques injectées par la section PHP F.1
 **************************************************************************************************/

/*
--------------------------------------------------------------------------------
Zone principale de paramétrage CSS.
Tu peux modifier ici :
- espacements
- couleurs
- taille du rond
- opacité du texte livraison
*/
:root {
    --proj-shipping-margin-top: 18px;
    --proj-shipping-margin-bottom: 18px;

    --proj-shipping-separator-color: #e5e5e5;
    --proj-shipping-separator-height: 1px;

    --proj-shipping-row-padding-y: 10px;

    --proj-shipping-text-size: 14px;
    --proj-shipping-line-height: 1.45;

    --proj-shipping-dot-size: 8px;

    /* Disponible = vert clair */
    --proj-shipping-available-color: #73a987;
    --proj-shipping-available-dot: #7fbe93;

    /* Bientôt disponible = rouge doux */
    --proj-shipping-unavailable-color: #c75b5b;
    --proj-shipping-unavailable-dot: #d96a6a;

    /* Texte livraison / date = noir avec opacité */
    --proj-shipping-date-color: rgba(0, 0, 0, 0.8);
}

/*
D.1.1 — Conteneur global
*/
.proj-shipping-wrap {
    width: 100%;
    margin-top: var(--proj-shipping-margin-top);
    margin-bottom: var(--proj-shipping-margin-bottom);
}

/*
D.1.2 — Traits fin haut / bas
*/
.proj-shipping-separator {
    width: 100%;
    height: var(--proj-shipping-separator-height);
    background: var(--proj-shipping-separator-color);
}

/*
D.1.3 — Ligne principale
--------------------------------------------------------------------------------
- gauche = statut
- droite = livraison + date
*/
.proj-shipping-inline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: var(--proj-shipping-row-padding-y) 0;
}

/*
D.1.4 — Bloc gauche = rond + statut
*/
.proj-shipping-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

/*
D.1.5 — Petit rond
*/
.proj-shipping-dot {
    width: var(--proj-shipping-dot-size);
    height: var(--proj-shipping-dot-size);
    min-width: var(--proj-shipping-dot-size);
    border-radius: 50%;
    display: inline-block;
}

/*
D.1.6 — Texte statut
*/
.proj-shipping-status {
    font-size: var(--proj-shipping-text-size);
    line-height: var(--proj-shipping-line-height);
    font-weight: 600;
    white-space: nowrap;
}

/*
D.1.7 — Variante disponible
*/
.proj-shipping-left--available .proj-shipping-dot {
    background: var(--proj-shipping-available-dot);
}

.proj-shipping-left--available .proj-shipping-status {
    color: var(--proj-shipping-available-color);
}

/*
D.1.8 — Variante bientôt disponible
*/
.proj-shipping-left--unavailable .proj-shipping-dot {
    background: var(--proj-shipping-unavailable-dot);
}

.proj-shipping-left--unavailable .proj-shipping-status {
    color: var(--proj-shipping-unavailable-color);
}

/*
D.1.9 — Bloc droit = libellé livraison + date
--------------------------------------------------------------------------------
Même couleur / opacité pour le texte ET la date.
Alignement complet à droite.
*/
.proj-shipping-right {
    color: var(--proj-shipping-date-color);
    font-size: var(--proj-shipping-text-size);
    line-height: var(--proj-shipping-line-height);
    font-weight: 500;
    text-align: right;
    margin-left: auto;
    white-space: nowrap;
}

.proj-shipping-delivery-label,
.proj-shipping-date {
    color: inherit;
}

/*
D.1.10 — Mobile
--------------------------------------------------------------------------------
On garde la logique gauche / droite tant que ça tient.
*/
@media (max-width: 767px) {
    :root {
        --proj-shipping-margin-top: 16px;
        --proj-shipping-margin-bottom: 16px;
        --proj-shipping-row-padding-y: 9px;
        --proj-shipping-text-size: 13px;
        --proj-shipping-dot-size: 7px;
    }

    .proj-shipping-inline {
        gap: 10px;
    }
}