/* =========================================================================
   Configurateur v2 — restyle des boutons de catégorie (preview)
   Activé UNIQUEMENT via ?hylae_config=v2  (classe body.hylae-config-v2).
   Aucun impact sans le paramètre : ce fichier n'est même pas chargé.

   Cible le markup du plugin Composite Products (rendu en JS) :
     .composite_pagination
        ul.pagination_elements
           li.pagination_element            (li.pagination_element_current = actif)
              .element_inner
                 .element_index             (slot icône — numéro masqué)
                 .element_title > a.element_link
   Icône injectée par config-v2.js dans .element_index :
     <i class="hylae-cat-icon fa fa-xxx">   (font Uncode déjà chargé).

   Couleurs : onglets inactifs en NOIR Hylæ, actif en dégradé Hylæ.
   --> Noir = "fond sombre" charte Hylæ #0B0A1F (figé 13/06)
   ========================================================================= */

/* --- Liste : rangée de chevrons connectés (desktop) --- */
body.hylae-config-v2 .composite_pagination ul.pagination_elements{
	display:flex !important;
	flex-wrap:wrap;
	gap:3px;
	margin:0 !important;
	padding:0 !important;
	list-style:none !important;
}

/* Neutralise les anciens triangles CSS (bordures :before/:after) */
body.hylae-config-v2 .composite_pagination ul li.pagination_element:before,
body.hylae-config-v2 .composite_pagination ul li.pagination_element:after{
	content:none !important;
	display:none !important;
	border:0 !important;
}

/* --- Onglet (chevron) --- */
/* flex:1 0 auto -> largeur = contenu (jamais tronqué), puis grandit pour remplir */
body.hylae-config-v2 .composite_pagination ul li.pagination_element{
	position:relative;
	flex:1 0 auto;
	max-width:none !important;      /* le thème/plugin met max-width:95% -> onglet non plein en mobile */
	height:auto !important;
	line-height:normal !important;
	margin:0 !important;
	padding:12px 22px !important;
	float:none !important;
	list-style:none !important;
	background:#0B0A1F !important;
	color:#fff !important;
	border:0 !important;
	border-radius:0 !important;
	-webkit-clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
	clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
	transition:filter .15s, background .15s;
}
/* Premier : bord gauche plat */
body.hylae-config-v2 .composite_pagination ul li.pagination_element:first-child{
	-webkit-clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
	clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}
/* Dernier : bord droit plat (pas de pointe dans le vide) */
body.hylae-config-v2 .composite_pagination ul li.pagination_element:last-child{
	-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
	clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
}
body.hylae-config-v2 .composite_pagination ul li.pagination_element:hover{ filter:brightness(1.35); }

/* Inner : icône + titre, centrés. overflow:visible OBLIGATOIRE : le thème/plugin
   met overflow:hidden ici, ce qui rogne le glyphe de l'icône sur certains rendus. */
body.hylae-config-v2 .composite_pagination .element_inner{
	display:flex !important;
	align-items:center;
	justify-content:center;
	flex-wrap:nowrap;
	gap:8px;
	width:100%;
	overflow:visible !important;
}

/* Slot icône : largeur fixe (réserve la place même pendant le re-render du
   plugin -> zéro décalage au clic). Numéro rendu invisible. PAS d'overflow
   (sinon le glyphe se fait rogner). */
body.hylae-config-v2 .composite_pagination .element_index{
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	width:24px;
	min-width:24px;
	height:22px;
	margin:0 !important;
	padding:0 !important;
	flex:none;
	overflow:visible !important;
	font-size:0 !important;
	line-height:1;
	color:transparent !important;
}

/* Icône composant (injectée par config-v2.js) — boîte explicite, jamais rognée */
body.hylae-config-v2 .composite_pagination .hylae-cat-icon{
	display:inline-block;
	font-size:15px !important;
	line-height:1 !important;
	width:auto;
	height:auto;
	max-width:none;
	max-height:none;
	overflow:visible !important;
	vertical-align:middle;
	color:#fff;
	flex:none;
}

/* Titre */
body.hylae-config-v2 .composite_pagination .element_title{
	margin:0 !important;
	width:auto !important;
	background:none !important;
	-webkit-text-fill-color:initial !important;
}
body.hylae-config-v2 .composite_pagination .element_title a.element_link{
	display:inline;
	width:auto !important;
	margin:0 !important;
	padding:0 !important;
	font-weight:600;
	font-size:14px;
	white-space:nowrap;
	text-decoration:none;
	color:#fff !important;
	background:none !important;
	-webkit-text-fill-color:#fff !important;
}

/* Zone de clic = TOUT le bloc (lien étiré sur tout le chevron) */
body.hylae-config-v2 .composite_pagination .element_title a.element_link:after{
	content:"";
	position:absolute;
	inset:0;
	z-index:2;
}

/* --- Onglet actif : dégradé Hylæ --- */
body.hylae-config-v2 .composite_pagination ul li.pagination_element.pagination_element_current{
	background:linear-gradient(90deg,#6200FF,#18C3C3) !important;
	color:#fff !important;
}
body.hylae-config-v2 .composite_pagination ul li.pagination_element_current .element_link{
	color:#fff !important;
	-webkit-text-fill-color:#fff !important;
}
body.hylae-config-v2 .composite_pagination ul li.pagination_element_current .hylae-cat-icon{
	color:#fff !important;
}

/* =========================================================================
   MOBILE (<= 569px) — colonne allégée (même thème sombre)
   ========================================================================= */
@media (max-width:569px){
	/* Pleine largeur de la colonne (alignée avec les blocs au-dessus/dessous) */
	body.hylae-config-v2 .composite_pagination,
	body.hylae-config-v2 .composite_pagination .pagination_elements_wrapper,
	body.hylae-config-v2 .composite_pagination ul.pagination_elements{
		width:100% !important;
		max-width:none !important;
		padding:0 !important;
		box-sizing:border-box;
	}
	body.hylae-config-v2 .composite_pagination .pagination_elements_wrapper,
	body.hylae-config-v2 .composite_pagination ul.pagination_elements{
		margin:0 !important;
	}
	/* Respiration au-dessus (titre) et en dessous (options) */
	body.hylae-config-v2 .composite_pagination{
		margin:16px 0 28px !important;
	}
	body.hylae-config-v2 .composite_pagination ul.pagination_elements{
		flex-direction:column;
		gap:5px;
	}
	body.hylae-config-v2 .composite_pagination .element_inner{
		justify-content:flex-start;
	}
	/* Chevron pointant à DROITE (comme desktop), bord gauche plat, empilé vertical */
	body.hylae-config-v2 .composite_pagination ul li.pagination_element,
	body.hylae-config-v2 .composite_pagination ul li.pagination_element:first-child,
	body.hylae-config-v2 .composite_pagination ul li.pagination_element:last-child{
		flex:none;
		width:100%;
		padding:14px 18px !important;
		border:0 !important;
		border-radius:0 !important;
		background:#0B0A1F !important;
		-webkit-clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%) !important;
		clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%) !important;
	}
	body.hylae-config-v2 .composite_pagination ul li.pagination_element.pagination_element_current{
		background:linear-gradient(90deg,#6200FF,#18C3C3) !important;
	}
}