/*
 * Fiche produit V2 — CSS scopé sous `.product-v2`
 * Chargé uniquement pour les admins loggés sur les pages produit.
 * Cf. functions.php → kn_scripts() + kn_use_v2_product_template().
 *
 * Toutes les règles sont préfixées .product-v2 pour ne pas fuir sur la fiche
 * produit visible du public.
 *
 * Palette (via tokens Figma, alignée sur _variables.scss) :
 *   Blue      #0060ff  ($main-color1)
 *   Dark Blue #0f3da8  ($main-color2)
 *   Green     #0ac980  ($main-color3)
 *   Pink      #db2bd9  ($main-color4)
 *   Dark      #1c1831  ($dark-color1)
 *   Light Grey#f6f6f7  ($light-color1)
 */

/* ------------------------------------------------------------------
 * Bandeau admin (haut du template racine v2)
 * ------------------------------------------------------------------ */
.product-v2-adminbar {
	background: #0060ff;
	color: #fff;
	font-family: 'Evolventa', sans-serif;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	text-align: center;
}

/* ------------------------------------------------------------------
 * Fix header : sur v2 pas de bandeau HDP derrière, donc header transparent
 * laisse voir le contenu. On force un fond blanc + z-index quand le v2
 * est actif. Double sélecteur (body class + :has) pour couvrir les 2 cas.
 * ------------------------------------------------------------------ */
body.product-v2-active .header,
body:has(.product-v2-page) .header {
	background: #fff !important;
	z-index: 10000 !important;
}

body.product-v2-active .header__annonce,
body:has(.product-v2-page) .header__annonce {
	z-index: 10001 !important;
}

/* ------------------------------------------------------------------
 * Wrapper section produit V2 : pousse le contenu sous le header fixé
 * (même pattern que .builder.haut_de_page_2025 dans style.css:287).
 * On annule aussi le `.single-product .produit { margin-top: -250px }`
 * hérité de style.css qui tirait le contenu derrière le HDP.
 * ------------------------------------------------------------------ */
.single-product .produit--v2 {
	margin-top: 0 !important;
	padding-top: 60px;
}

@media (min-width: 992px) {
	.single-product .produit--v2 {
		margin-top: 0 !important;
		padding-top: 120px;
	}
}

/* ------------------------------------------------------------------
 * Container global de la fiche v2
 * ------------------------------------------------------------------ */
.product-v2 {
	color: #1c1831;
	font-family: 'Evolventa', sans-serif;
}

/* ------------------------------------------------------------------
 * Breadcrumb (fil d'ariane) — placé en tête de la sidebar
 * ------------------------------------------------------------------ */
.product-v2__breadcrumb {
	color: #1c1831;
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 6px;
	line-height: 1.4;
	margin: 20px 0 0;
}

/* Reset des styles hérités de .single-product .product qui cassent le contexte
   sticky (flex-flow: column wrap + height: var(--height) + min-height: 2000px). */
.single-product .product-v2 {
	display: block !important;
	-ms-flex-flow: initial !important;
	flex-flow: initial !important;
	height: auto !important;
	min-height: 0 !important;
}

.product-v2__left .contenu_produit {
	margin-top: 0 !important;
	width: 100%;

	&>div {
		&>h2 {
			color: #0060ff !important;
		}
	}
}

.product-v2__left #menu_produit {
	background: #fff;
	margin-bottom: 30px !important;
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0px !important;
	z-index: 5;
	flex-wrap: wrap;
	padding: 30px 0;
	gap: 20px;

	@media (max-width: 991px) {
		display: none !important;
	}

	a {
		&:after {
			content: "";
		}

		&:hover {
			color: #0060ff !important;

			&:after {
				background: #0f3da8;
				bottom: 0;
				height: 2px;
				left: 0;
				position: absolute;
				width: 100%;
				z-index: 1;
			}
		}
	}
}

@media (max-width: 767px) {
	.product-v2__left #menu_produit {
		flex-direction: column !important;
		gap: 8px !important;
	}

	/* Neutralise le style .active sur mobile */
	.product-v2__left #menu_produit a.active {
		color: rgba(28, 24, 49, 0.5) !important;
	}

	.product-v2__left #menu_produit a.active::after {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
 * Fix sticky mobile : style.css met `body { overflow-x: hidden }` sous
 * 991px. Sur un élément non-racine, overflow-x:hidden fait passer
 * overflow-y à `auto` → le body devient conteneur de défilement et
 * casse le `position: sticky` de #menu_produit (qui se réfère alors au
 * body au lieu de la fenêtre). On remplace par `clip` (scopé v2) : le
 * débordement horizontal reste masqué mais aucun conteneur de scroll
 * n'est créé, donc le sticky refonctionne.
 * ------------------------------------------------------------------ */
@media (max-width: 991px) {

	body.product-v2-active,
	body:has(.product-v2-page) {
		overflow-x: clip;
		overflow-y: visible;
	}
}

.product-v2__left #produit_fait_pour_vous {
	border: 1px solid #0060ff;
	padding: 30px;
	margin-bottom: 20px;

	h3 {
		color: #0060ff !important;
	}

	ul {
		margin: 0;
	}

	ul li::before {
		content: '' !important;
		display: inline-block !important;
		width: 6px !important;
		height: 12px !important;
		border-right: 2px solid #0060ff !important;
		border-bottom: 2px solid #0060ff !important;
		transform: rotate(45deg) !important;
		top: 0 !important;
	}
}

/* .product-v2__left #description {
	margin-bottom: 0 !important;
} */

.product-v2__left #description h3 {
	color: #0ac980 !important;
	font-size: 22px !important;
}

.product-v2__left .trait_separator {
	margin-bottom: 30px !important;
	padding-bottom: 30px;

	&:not(#produit_fait_pour_vous) {
		border-bottom: 1px solid #efeff1 !important;
	}
}

.product-v2__left #videos {
	margin: 50px 0 !important;
}

.product-v2__left .wp-video {
	margin: 0 0 20px 0 !important;
}

.product-v2__left #documents {
	margin-top: 50px !important;
}

/* ------------------------------------------------------------------
 * Section Variantes — cards produit lié (design Figma)
 * ------------------------------------------------------------------ */
.product-v2__left #variantes {
	margin: 50px 0;
}

.product-v2__left #variantes h2 {
	color: #0060ff;
	margin-bottom: 24px;
}

.variantes__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.variantes__item {
	align-items: center;
	background: #fff;
	border: 1px solid #efeff1;
	border-radius: 0;
	box-shadow: 0 4px 20px rgba(15, 61, 168, 0.06);
	display: flex;
	gap: 24px;
	padding: 20px 24px;
}

.variantes__item-img {
	flex: 0 0 240px;
	max-width: 240px;
}

.variantes__item-img img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.variantes__item-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 3px;
	min-width: 0;
}

.variantes__item-brand {
	color: #0F3DA8;
	font-size: 16px;
	font-weight: 700;
}

.variantes__item-title {
	color: #0060ff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.variantes__item-excerpt {
	color: #1c1831;
	font-size: 14px;
	line-height: 1.5;
	margin: 10px 0 14px;
}

.variantes__item-reference {
	color: #0ac980;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

/* .variantes__item-cta {
	align-items: center;
	align-self: flex-start;
	background: #0060ff;
	border-radius: 0;
	color: #fff;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	gap: 10px;
	height: 40px;
	overflow: hidden;
	padding: 0 20px;
	text-decoration: none;
	transition: background 0.2s;
	white-space: nowrap;
}

.variantes__item-cta-icon {
	align-items: center;
	background: #0f3da8;
	display: inline-flex;
	font-size: 18px;
	height: 100%;
	justify-content: center;
	margin-left: -20px;
	padding: 0 12px;
}

.variantes__item-cta:hover {
	background: #0f3da8;
	color: #fff;
} */

@media (max-width: 991px) {

	/* Slider horizontal — un seul produit visible avec scroll-snap */
	.variantes__list {
		flex-direction: row;
		gap: 16px;
		overflow-x: auto;
		padding: 4px 20px 20px;
		scroll-padding: 0 20px;
		scroll-snap-type: x mandatory;
	}

	.variantes__list::-webkit-scrollbar {
		display: none;
	}

	.variantes__item {
		flex: 0 0 100%;
		flex-direction: column;
		gap: 16px;
		scroll-snap-align: start;
		text-align: center;
		width: 100%;
	}

	.variantes__item-img {
		flex: 0 0 auto;
		max-width: 160px;
	}

	.variantes__item-content {
		align-items: flex-start;
		text-align: left;

		.bouton {
			min-width: 220px;
		}
	}
}

/* ------------------------------------------------------------------
 * HERO : galerie + sidebar
 * ------------------------------------------------------------------ */
.product-v2__hero {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

@media (min-width: 992px) {
	.product-v2__hero {
		flex-direction: row;
		align-items: flex-start;
		gap: 60px;
	}
}

.product-v2__left {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;

	@media (min-width: 992px) {
		width: 60%;
	}
}

.product-v2__gallery {
	min-width: 0;
	position: relative;
}

.wpgs-nav .slick-current {
	border: 0px !important;
	margin-top: 30px !important;
}

.wpgs-nav .slick-slide {
	@media (min-width: 992px) {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ------------------------------------------------------------------
 * Fix Slick : le global `.slick-track { display: flex }` (style.css:7164)
 * fait de chaque slide un flex-item qui, par défaut, peut rétrécir
 * (flex-shrink: 1). Sous 992px plus rien ne figeait leur largeur, donc
 * les slides de la galerie WPGS s'écrasaient et se superposaient
 * verticalement. On fige la largeur posée en inline par Slick pour
 * restaurer le défilement horizontal (image principale + strip miniatures).
 * ------------------------------------------------------------------ */
.product-v2__gallery .slick-track {
	align-items: center;
	display: flex;
}

.product-v2__gallery .slick-slide {
	flex-shrink: 0;
	margin: 15px 3px !important;

	&:not(.slick-current):not(.slick-active) img {
		@media (min-width: 992px) {
			max-width: 100px !important;
		}
	}
}

.product-v2__gallery .wpgs-nav .slick-slide {
	display: flex !important;
	justify-content: center;
}

/* Force la visibilité de la galerie WC (elle est inline-styled opacity:0
   par le template product-image.php, activée normalement par un JS qui
   est désactivé sur ce site). */
.product-v2__gallery .woocommerce-product-gallery {
	background: #f6f6f7;
	border-radius: 0;
	float: none !important;
	margin: 0 !important;
	opacity: 1 !important;
	padding: 20px;
	position: relative;
	width: 100% !important;
	
	@media (min-width: 768px) {
		padding: 40px 60px;
	}
}

/* Wrapper — laisser Slick contrôler le display après slick-init */
.product-v2__gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
}

.product-v2__gallery .woocommerce-product-gallery__image {
	text-align: center;
}

.product-v2__gallery .woocommerce-product-gallery__image img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-height: 460px;
	max-width: 100%;
	width: auto;
}

/* Container des miniatures — devient référent pour les flèches */
.product-v2__gallery .wpgs-nav {
	position: relative;
}

/* Flèches injectées par product-v2-gallery.js (contrôle du Slick WPGS) */
.product-v2__gallery-nav {
	align-items: center;
	border: 1px solid #1C1831;
	border-radius: 50%;
	color: #1c1831;
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 50%;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	width: 40px;
	z-index: 5;

	&:not(:hover) {
		background: transparent !important;
	}
}

.product-v2__gallery-nav--prev {
	transform: translateY(-50%) rotate(180deg);
	left: 0px;

	@media (min-width: 992px) {
		left: 12px;
	}
}

.product-v2__gallery-nav--next {
	transform: translateY(-50%) rotate(180deg);
	right: 0;

	@media (min-width: 992px) {
		right: 12px;
	}
}

.product-v2__gallery-nav:hover {
	color: #fff;
}

.product-v2__gallery-nav svg {
	pointer-events: none;
}

.product-v2__sidebar {
	display: flex;
	flex-direction: column;
	gap: 28px;
	flex-shrink: 0;
	width: 100%;
}

@media (min-width: 992px) {
	.product-v2__sidebar {
		align-self: flex-start;
		position: sticky;
		top: 40px;
		/* le titre reste visible en haut du viewport */
		width: 40%;
		z-index: 1;
		margin-top: 30px;
		margin-bottom: 30px;
	}
}

/* ------------------------------------------------------------------
 * Titre
 * ------------------------------------------------------------------ */
.product-v2__title {
	color: #0060ff;
	display: block;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	font-size: 35px !important;

	/* @media (max-width: 767px) {
	} */
}

/* @media (min-width: 768px) {
	.product-v2__title {
		font-size: 30px;
	}
}

@media (min-width: 992px) {
	.product-v2__title {
		font-size: 35px !important;
	}
} */

.product-v2__title-kicker {
	color: #0060ff;
	display: inline;
	font-weight: 700;
}

.product-v2__title-main {
	color: #0f3da8;
	display: inline;
	font-weight: 700;
}

/* ------------------------------------------------------------------
 * Méta (marque / référence / stock)
 * ------------------------------------------------------------------ */
.product-v2__meta {
	display: flex;
	gap: 15px;
	margin: 0;
	padding: 0;
	justify-content: space-between;
}

.product-v2__meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-right: 20px;
	position: relative;
}

.product-v2__meta-item:not(:has(.product-v2__meta-value--instock)) {
	border-right: 1px solid #efeff1;
}

/* .product-v2__meta-item + .product-v2__meta-item::before {
	background: #efeff1;
	content: '';
	height: 32px;
	left: -10px;
	position: absolute;
	top: 8px;
	width: 1px;
} */

.product-v2__meta-label {
	color: #1c1831;
	font-size: 13px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.product-v2__meta-value {
	color: #0f3da8;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	margin: 0;
}

.product-v2__meta-value .marque {
	color: #0060ff;
}

.product-v2__meta-value--instock {
	color: #0ac980;
}

.product-v2__meta-value--outofstock {
	color: #db2bd9;
}

/* ------------------------------------------------------------------
 * Description courte
 * ------------------------------------------------------------------ */
.product-v2__excerpt {
	color: #1c1831;
	font-size: 15px;
	line-height: 1.55;
}

.product-v2__excerpt p {
	margin: 0 0 12px;
}

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

/* ------------------------------------------------------------------
 * CTAs (devis + test)
 * ------------------------------------------------------------------ */
.product-v2__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.product-v2__cta {
	align-items: center;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	gap: 12px;
	height: 48px;
	overflow: hidden;
	padding: 0 24px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	white-space: nowrap;
}

/* .product-v2__cta-icon {
	align-items: center;
	background: #0f3da8;
	display: inline-flex;
	font-size: 20px;
	height: 100%;
	justify-content: center;
	margin-left: -24px;
	padding: 0 14px;
} */

/* .product-v2__cta-label {
	font-size: 15px;
} */

.product-v2__cta--primary {
	background: #0060ff;
}

.product-v2__cta--primary:hover {
	background: #0f3da8;
	color: #fff;
}

.product-v2__cta--test {
	background: #0ac980;
}

.product-v2__cta--test:hover {
	background: #069865;
	color: #fff;
}

/* ------------------------------------------------------------------
 * Bloc services (4 icônes rondes colorées)
 * ------------------------------------------------------------------ */
.product-v2__services {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(4, 1fr);
}

.product-v2__service {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
}

.product-v2__service-icon {
	align-items: center;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.product-v2__service-icon--blue {
	background: #0060ff;
}

.product-v2__service-icon--darkblue {
	background: #0f3da8;
}

.product-v2__service-icon--pink {
	background: #db2bd9;
}

.product-v2__service-icon--green {
	background: #0ac980;
}

.product-v2__service-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

/* ------------------------------------------------------------------
 * Bloc support (avatars + rows)
 * ------------------------------------------------------------------ */
.product-v2__support {
	background: #f6f6f7;
	padding: 16px 40px;
	border: 1px solid rgba(28, 24, 49, 0.16);
}

.product-v2__support-header {
	align-items: center;
	display: flex;
	gap: 16px;
	margin-bottom: 16px;
}

.product-v2__support-avatars {
	display: inline-flex;
	flex-shrink: 0;
}

.product-v2__support-avatar {
	background-position: center;
	background-size: cover;
	border: 2px solid #fff;
	border-radius: 50%;
	display: inline-block;
	height: 40px;
	margin-left: -10px;
	width: 40px;
}

.product-v2__support-avatar:first-child {
	margin-left: 0;
}

.product-v2__support-title {
	color: #0060ff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.product-v2__support-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.product-v2__support-item {
	color: #1c1831;
	display: flex;
	font-size: 12px;
	gap: 10px;
	line-height: 1.2;
}

.product-v2__support-icon {
	color: #0060ff;
	flex-shrink: 0;
	margin-top: 2px;
}

/* ------------------------------------------------------------------
 * Mobile (< 992px) : réordonnancement du hero.
 * Les enfants de .product-v2__left et .product-v2__sidebar sont
 * "remontés" comme items flex directs du hero via `display: contents`,
 * ce qui permet d'entrelacer la galerie (colonne gauche) et les infos
 * (sidebar) dans un ordre unique.
 *
 * Ordre voulu :
 *   1 breadcrumb · 2 title · 3 gallery · 4 meta · 5 excerpt ·
 *   6 ctas · 7 services · 8 support · 9 menu_produit + reste du contenu.
 * Le reste (sections description/variantes/vidéos/documents…) suit,
 * dans son ordre naturel.
 * ------------------------------------------------------------------ */
@media (max-width: 991px) {
	.product-v2__hero {
		display: flex;
		flex-direction: column;
	}

	/* Aplatit les 2 colonnes : leurs enfants deviennent items du hero */
	.product-v2__left,
	.product-v2__sidebar {
		display: contents;
	}

	.product-v2__breadcrumb {
		order: 1;
	}

	.product-v2__title {
		order: 2;
	}

	.product-v2__gallery {
		order: 3;
	}

	.product-v2__meta {
		order: 4;
	}

	.product-v2__excerpt {
		order: 5;
	}

	.product-v2__ctas {
		order: 6;
	}

	.product-v2__services {
		order: 7;
	}

	.product-v2__support {
		order: 8;
	}

	/* #menu_produit est le 1er enfant de .contenu_produit → il vient en
	   tête du bloc, suivi de tout le contenu, inchangé. */
	.product-v2__left .contenu_produit {
		order: 9;
	}
}

.product-v2__gallery .wpgs-lightbox-icon::before {
	@media (max-width: 500px) {
		top: -20px !important;
		right: 0px !important;
	}
}

/* ------------------------------------------------------------------
 * < 768px : les CTA (devis + test) quittent la sidebar et remplacent
 * le bouton "Contactez-nous" dans la barre sticky .contact__bottom
 * (markup conditionnel ajouté dans footer.php).
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.product-v2__ctas {
		display: none;
	}

	.contact__bottom-ctas {
		/* display: flex;
		gap: 8px; */
		width: 100%;
	}

	.contact__bottom-ctas .bouton,
	.contact__bottom-ctas .product-v2__cta {
		flex: 1 1 0;
		margin: 0;
		width: 100%;
	}

	.contact__bottom-ctas .bouton {
		justify-content: start;
	}

	.contact__bottom-ctas .product-v2__cta {
		margin-top: 10px;
		justify-content: center;
	}
}