/* ==========================================================================
   Page produit — single-produit.css — mobile-first
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base page
   -------------------------------------------------------------------------- */

#primary.litprod {
	background-color: var( --color-gris-vert );
	color: var( --color-vert-noir );
	padding-top: 66px;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.litprod__breadcrumb {
	padding: 1rem 5%;
}

.litprod__breadcrumb a {
	color: var( --color-vert-noir );
	text-decoration: none;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.litprod__breadcrumb a:hover {
	opacity: 1;
}

.litprod__breadcrumb span {
	opacity: 0.5;
	margin: 0 0.35em;
}

.litprod__breadcrumb [aria-current="page"] {
	opacity: 1;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Hero — layout
   -------------------------------------------------------------------------- */

.litprod__hero {
	display: flex;
	flex-direction: column;
}

/* --------------------------------------------------------------------------
   Galerie (mobile : image principale + vignettes circulaires)
   -------------------------------------------------------------------------- */

.litprod__gallery {
	position: relative;
	margin-bottom: 1rem;
}

.litprod__gallery-main {
	width: 100%;
	aspect-ratio: 1 / .63;
	border-radius: 0 100px 100px 0;
	overflow: hidden;
	background-color: rgba( 1, 48, 27, 0.15 );
}

.litprod__gallery-main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.litprod__gallery-thumbs {
	display: flex;
	gap: 0.75rem;
	margin-top: .75rem;
	justify-content: center;
}

.litprod__thumb {
	display: block;
	width: 15vw;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid transparent;
	padding: 0;
	background-color: rgba( 1, 48, 27, 0.15 );
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.2s;
	flex-shrink: 0;
}

.litprod__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.litprod__thumb.is-active,
.litprod__thumb:hover {
	border-color: var( --color-rouge );
}

/* --------------------------------------------------------------------------
   Infos produit
   -------------------------------------------------------------------------- */

.litprod__info {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0 5vw;
}

.litprod__brand {
	display: block;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --color-vert-noir );
	opacity: 0.7;
}

.litprod__title {
	font-size: clamp( 1.75rem, 7vw, 3.5rem );
	font-weight: 700;
	line-height: 1.05;
	margin: 0;
	color: var( --color-vert-noir );
}

.litprod__price {
	font-size: 1.75em;
	font-weight: 600;
	margin: 0;
	color: var( --color-vert-noir );
	line-height: 1;
}

.litprod__price .label {
	font-size: .75em;
}

.litprod__price .price {
	font-weight: 700;
}

.litprod__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 14px 0;
}

.litprod__stars {
	display: flex;
	gap: 0.1em;
	color: var(--color-vert-noir);
}

.litprod__stars svg {
	width: 24px;
	height: auto;
}

.litprod__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.litprod__features li::before {
	content: '— ';
}

.litprod__more {
	display: inline;
	color: var( --color-vert-noir );
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s;
}

.litprod__more:hover {
	opacity: 0.7;
}

/* Sélecteur de taille */

.litprod__size-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 1.25rem;
}

.litprod__size-label {
	color: var( --color-vert-logo );
	opacity: 0.5;
}

.litprod__size-select-wrap {
	position: relative;
	display: block;
}

.litprod__size-select {
	width: 100%;
	padding: 8px 2.5em 8px 1em;
	border: 1px solid var( --color-vert-logo );
	border-radius: 2em;
	background-color: var( --color-gris );
	color: var( --color-vert-logo );
	appearance: none;
	cursor: pointer;
}

.litprod__size-select:focus {
	outline: 2px solid var( --color-rouge );
	outline-offset: 2px;
}

.litprod__size-arrow {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY( -50% );
	pointer-events: none;
	color: var( --color-vert-logo );
}

/* CTA principal */

.litprod__info .bouton {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Section "Vous pourriez l'associer avec"
   -------------------------------------------------------------------------- */

.litprod__assoc {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	background-color: var( --color-vert-logo );
	border-radius: 100px 0 0 0;
	padding: 1.25rem 0;
	margin: 2rem 0 0;
	overflow: hidden;
}

.litprod__assoc-slider-row {
	display: flex;
	align-items: center;
	gap: 2%;
}

.litprod__assoc-slider-row--single {
	padding-inline: calc( 2.5rem + 2% );
}

.litprod__assoc-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	padding: 0.75rem 0;
	background: none;
	border: none;
	color: var( --color-gris );
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.litprod__assoc-nav:hover {
	opacity: 1;
}

.litprod__assoc-nav svg {
	display: block;
	flex-shrink: 0;
}


.litprod__assoc-heading {
	margin: 0;
	font-size: 1.3em;
	font-weight: 700;
	text-align: center;
	color: var( --color-gris );
}

/* Swiper container */

.litprod__assoc-slider {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

/*
 * Swiper positionne .swiper-wrapper et .swiper-slide avec height:100%.
 * Dans un contexte flex-colonne sans hauteur explicite, ça donne 0.
 * On force height:auto pour laisser le contenu dicter la hauteur.
 */

.litprod__assoc-slider .swiper-wrapper {
	height: auto;
}

/* Chaque slide : image + infos + cta en ligne */

.litprod__assoc-slide {
	display: flex;
	align-items: center;
	gap: 30px;
	height: auto;
	text-decoration: none;
}

.litprod__assoc-img-wrap {
	width: 28%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background-color: rgba( 255, 255, 255, 0.15 );
	flex-shrink: 0;
	aspect-ratio: 1 / .85;
}

.litprod__assoc-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.litprod__assoc-body {
	flex: 1;
	min-width: 0;
}

.litprod__assoc-brand {
	display: block;
	color: var( --color-gris-vert );
	line-height: 1;
	margin-bottom: 0.3rem;
}

.litprod__assoc-title {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1;
	font-weight: 700;
	color: var( --color-gris );
}

.litprod__assoc-cta {
	flex-shrink: 0;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20%;
	aspect-ratio: 90 / 87;
	text-decoration: none;
	transition: opacity 0.2s;
}

.litprod__assoc-cta .litprod__star-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.litprod__assoc-cta:hover {
	opacity: 0.85;
}

.litprod__assoc-cta-label {
	position: relative;
	z-index: 1;
	font-weight: 700;
	font-size: 0.875rem;
	color: var( --color-gris );
}

/* --------------------------------------------------------------------------
   Section Descriptif — tabs + contenu
   -------------------------------------------------------------------------- */

.litprod__descriptif {
	background: var( --color-blanc );
}

/* Barre d'onglets */

.litprod__tabs {
	display: flex;
	gap: 0;
	margin-bottom: 2rem;
}

.litprod__tab-heading {
	display: contents;
}

.litprod__tab {
	flex: 1;
	padding: 0.75rem 0.5rem;
	background: none;
	border: none;
	border-bottom: 2px solid #ECECEC;
	font-weight: 700;
	font-size: .5em;
	line-height: 2;
	color: #D7D9CE;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
	text-align: center;
}

.litprod__tab-heading:not( :last-child ) .litprod__tab {
	border-right: 1px solid #ECECEC;
}

.litprod__tab.is-active {
	color: var( --color-vert-noir );
	border-bottom-color: var( --color-vert-noir );
}

/* Panneaux */

@keyframes litprod-fade-in-up {
	from {
		opacity: 0;
		transform: translateY( 10px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.litprod__tab-panel {
	display: none;
	padding: 0 7vw 0 5vw;
}

.litprod__tab-panel.is-active {
	display: block;
	animation: litprod-fade-in-up 0.25s ease both;
}

/* Texte description */

.litprod__desc-text {
	line-height: 1.75;
	margin-bottom: 1.5rem;
}

.litprod__desc-text p {
	margin: 0 0 1em;
}

/* Images dans les panneaux */

.litprod__desc-img,
.litprod__carac-img {
	display: block;
	width: 100%;
	height: auto;
	background-color: rgba( 1, 48, 27, 0.15 );
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.litprod__carac-img-2 {
	display: block;
	width: 100%;
	height: auto;
}

.litprod__desc-image {
	margin-top: 1.5rem;
}

/* Liste de caractéristiques (panneau Caractéristiques) */

.litprod__specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	line-height: 1.5;
}

/* Colonne droite du descriptif (image + FAQ) — stacked sous les panels sur mobile */

.litprod__desc-right {
	padding-top: 1.5rem;
}

.litprod__carac-image {
	border-left: 1px solid var(--color-gris-vert);
  	border-bottom: 1px solid var(--color-gris-vert);
}

/* FAQ accordion */

.litprod__faq {
	display: flex;
	flex-direction: column;
}

.litprod__faq-item {
	border-bottom: 1px solid var( --color-vert-noir );
}

.litprod__faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.25rem 5% 1.25em 5%;
	background: none;
	border: none;
	font-size: 1.25em;
	font-weight: 700;
	color: var( --color-vert-noir );
	cursor: pointer;
	text-align: left;
	user-select: none;
}

.litprod__faq-icon {
	flex-shrink: 0;
	color: var( --color-vert-noir );
}

.litprod__faq-q[aria-expanded="true"] .litprod__faq-icon--plus {
	display: none;
}

.litprod__faq-q[aria-expanded="false"] .litprod__faq-icon--minus {
	display: none;
}

/* Animation slideToggle via CSS grid */

.litprod__faq-a-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.litprod__faq-item.is-open .litprod__faq-a-wrap {
	grid-template-rows: 1fr;
}

.litprod__faq-a-inner {
	overflow: hidden;
}

.litprod__faq-a {
	margin: 0;
	padding: 0 5% 1.25rem 5%;
	line-height: 1.7;
	color: var( --color-vert-noir );
}

/* --------------------------------------------------------------------------
   Section Avis clients
   -------------------------------------------------------------------------- */

.litprod__avis {
	padding: 2rem 0 2rem 5vw;
}

.litprod__avis-cards {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5rem;
}

.litprod__avis-card {
	background: var( --color-blanc );
	border: 1px solid #DADADA;

	padding: 1.25rem;
	min-width: 260px;
	max-width: 280px;
	flex-shrink: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.litprod__avis-stars {
	display: flex;
	gap: 0.15em;
	color: #D38C07;
}

.litprod__avis-name {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	text-align: left;
}

.litprod__avis-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	text-align: center;
}

.litprod__avis-text {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var( --color-vert-noir );
	flex: 1;
}

.litprod__avis-date {
	margin: 0;
	font-size: 0.85rem;
	color: var( --color-rouge );
}

.litprod__avis-more {
	display: block;
	margin-top: 1.25rem;
	text-align: center;
	color: var( --color-vert-noir );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Section "Vous aimerez aussi"
   -------------------------------------------------------------------------- */

.litprod__also-inner {
	background: conic-gradient(from 90deg,rgba(0, 81, 49, 1) 0deg,rgba(1, 36, 20, 1) 65.0653deg,rgba(1, 48, 27, 1) 167.885deg, rgba(0, 81, 49, 1) 360deg);
	border-radius: 80px 80px 0 0;
	padding: 2rem 0 150px;
}

.litprod__also-title {
	color: var( --color-gris-vert );
	text-align: center;
	margin: 0 0 3.5rem;
}

.litprod__also-cards {
	display: flex;
	gap: 5vw;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5rem;
}

/* Sur mobile, largeur fixe pour le scroll horizontal */

.litprod__also-cards .product-card {
	width: 65vw;
	flex-shrink: 0;
	scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   Section Quiz / Configurateur
   -------------------------------------------------------------------------- */

.litprod__quiz {
	padding: 2rem 0 0;
}

/* Styles mobile — identiques au widget quiz-banner */

.litprod__quiz .lit-quiz {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var( --color-gris-vert );
	border-radius: 50vw 50vw 0 0;
	overflow: visible;
	gap: 30px;
}

.litprod__quiz .lit-quiz__image-wrap {
	order: 2;
	width: 100%;
	margin-top: -32px;
	position: relative;
	z-index: 1;
}

.litprod__quiz .lit-quiz__image-wrap img {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
}

.litprod__quiz .lit-quiz__content {
	order: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 28px;
	padding: 66px 24px 0;
	text-align: center;
	position: relative;
	z-index: 1;
}

.litprod__quiz .lit-quiz__title {
	color: var( --color-vert-noir );
	margin: 0;
	font-size: clamp( 2.75rem, 3vw, 3vw );
	line-height: 1;
}

.litprod__quiz .lit-quiz .bouton {
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Bande USP (avantages)
   -------------------------------------------------------------------------- */

.litprod__usp {
	margin-top: -80px;
	border-radius: 80px 80px 0 0;
	padding-bottom: 80px;
	background-color: var( --color-rouge );
}

.litprod__usp .grille-avantages {
	padding-top: 20px;
	padding-bottom: 20px;
	border-radius: 80px 80px 0 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media ( min-width: 768px ) {

	/* --- Hero --- */

	.litprod__hero {
		display: grid;
		grid-template-columns: 50% 1fr;
		grid-template-areas:
			"breadcrumb breadcrumb"
			"gallery    info";
		min-height: 520px;
	}

	.litprod__breadcrumb {
		grid-area: breadcrumb;
		padding: 1.5rem 5%;
	}

	.litprod__gallery {
		grid-area: gallery;
		display: flex;
		flex-direction: column;
	}

	.litprod__gallery-main {
		aspect-ratio: 1 / .53;
	}

	.litprod__gallery-thumbs {
		justify-content: flex-end;
	}

	.litprod__thumb {
		width: 7vw;
	}

	.litprod__info {
		grid-area: info;
		padding: 0 5vw 2.5rem 7vw;
	}

	.litprod__title {
		font-size: clamp( 2.5rem, 4vw, 3.75rem );
	}

	.litprod__size-select-wrap {
		max-width: 22rem;
	}

	.litprod__info .bouton {
		max-width: 22rem;
	}

	

	/* --- Section assoc --- */

	.litprod__assoc {
		max-width: none;
		width: 43vw;
		margin: 50px 0 0 auto;
	}

	.litprod__assoc-heading {
		font-size: 1.5em;
	}

	.litprod__assoc-cta {
		width: 15%;
	}

	.litprod__assoc-slider-row {
		gap: 5%;
	}

	.litprod__assoc-slider-row--single {
		padding-inline: calc( 2.5rem + 5% );
	}

	/* --- Descriptif --- */

	.litprod__descriptif {
		display: flex;
		padding: 0;
		align-items: start;
	}

	.litprod__desc-left {
		flex: 1;
		min-width: 0;
		padding: 0;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.litprod__desc-right {
		flex: 0 0 43vw;
		padding-top: 0;
	}

	/* --- Avis : grille 4 colonnes --- */

	.litprod__avis {
		padding: 75px 10%;
	}

	.litprod__avis-cards {
		display: grid;
		grid-template-columns: repeat( 4, 1fr );
		overflow-x: visible;
	}

	.litprod__avis-card {
		min-width: unset;
		max-width: unset;
	}

	.litprod__also-inner {
		padding: 3.5rem 0 150px;
	}

	/* --- Quiz --- */

	.litprod__quiz.mobile {
		display: none;
	}

	.litprod__quiz {
		padding: 0;
	}

	.litprod__quiz .lit-quiz {
		flex-direction: row;
		width: 50vw;
		margin: 0 auto 0 0;
		background-color: transparent;
		border-radius: 0;
		overflow: hidden;
		gap: 0;
	}

	.litprod__quiz .lit-quiz::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 15vw;
		background-color: var( --color-gris-vert-clair );
		border-radius: 0 50vw 50vw 0;
		z-index: 0;
	}

	.litprod__quiz .lit-quiz__image-wrap {
		order: 0;
		flex: 0 0 50%;
		width: auto;
		margin-top: 0;
	}

	.litprod__quiz .lit-quiz__image-wrap img {
		height: auto;
	}

	.litprod__quiz .lit-quiz__content {
		order: 0;
		flex: 1;
		align-self: flex-end;
		width: auto;
		padding: 0 2vw 0 0;
		height: 15vw;
	}

	.litprod__quiz .lit-quiz__title {
		font-size: clamp( 1rem, 1.6vw, 1.6vw );
	}

	.litprod__also-cards .product-card {
		width: 40vw;
		max-width: 400px;
	}

}

@media ( min-width: 1024px ) {

	.litprod__breadcrumb {
		padding: 3rem 5%;
	}

	.litprod__hero {
		padding: 0 0 0 0;
	}

}

@media ( min-width: 1025px ) {

	/* --- Vous aimerez aussi : 3 colonnes centrées --- */

	.litprod__also-cards {
		display: flex;
		justify-content: center;
		gap: 5%;
		overflow-x: visible;
	}

	.litprod__also-cards .product-card {
		width: 25vw;
		margin: 0;
	}

}

@media ( min-width: 1200px ) {

	/* --- Mid-row --- */

	.litprod__mid-row {
		display: flex;
		align-items: flex-end;
	}

	.litprod__mid-row .litprod__quiz {
		flex: 0 0 50%;
		padding: 0;
	}

	.litprod__mid-row .litprod__quiz .lit-quiz {
		width: 100%;
		margin: 0;
	}

	.litprod__quiz .lit-quiz::before {
		height: 10vw;
	}

	.litprod__quiz .lit-quiz__image-wrap {
		flex: 0 0 26vw;
	}

	.litprod__quiz .lit-quiz__content {
		height: 10vw;
	}

	.litprod__mid-row .litprod__assoc {
		margin: 0 0 0 auto;
		flex-shrink: 0;
	}

}

@media ( min-width: 1367px ) {

	#primary.litprod {
		padding-top: calc(3.5vw + 65px);
	}

	.litprod__breadcrumb {
		padding: 3.3rem 5%;
	}

	.litprod__info {
		gap: 10px;
	}

}

@media ( max-width: 1199px ) {

	/* --- Mid-row --- */

	.litprod__quiz .lit-quiz {
		width: 70%;
	}

	.litprod__assoc {
		width: 65%;
	}

	.litprod__also-cards {
		margin-left: 5%;
	}

}

@media (max-width: 767px) {

	.litprod__info .bouton {
		margin-top: 10px;
	}

	.litprod__quiz.desktop {
		display: none;
	}

	.litprod__quiz.mobile .lit-quiz {
		width: 100%;
	}

	.litprod__assoc {
		width: 100%;
	}

}