/* ─────────────────────────────────────────────
   Loop Tab — Frontend CSS
   Tabs verticaux : colonne gauche / contenu droit
───────────────────────────────────────────── */

.lt-wrapper {
	--lt-color-idle: #c0c0d0;
	--lt-color-hover: #8080a0;
	--lt-color-active: #98c818;
	--lt-underline-idle: #c3c0d2;
	--lt-content-gap: 48px;
	display: flex;
	align-items: stretch;
	gap: var( --lt-content-gap );
	width: 100%;
}

/* ── Colonne tabs (gauche) ── */
.lt-tabs {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-shrink: 0;
	width: var( --lt-tab-width, 280px );
	gap: 0;
	border-right: none;
}

/* ── Bouton tab ── */
.lt-tab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	max-width: 100%;
	padding: 12px 0 0;
	text-align: left;
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --lt-color-idle );
	line-height: 1.25;
	transition: color .2s ease;
}

/* Triangle à droite du label — hors du soulignement */
.lt-wrapper:not( .lt-mobile-active ) .lt-tab::after {
	content: '';
	flex-shrink: 0;
	align-self: center;
	width: 0;
	height: 10px;
	margin-left: 0;
	margin-bottom: 8px; /* aligne avec le label (padding-bottom du soulignement) */
	background: currentColor;
	clip-path: polygon( 0 0, 100% 50%, 0 100% );
	opacity: 0;
	transition: opacity .2s ease, width .2s ease, margin-left .2s ease;
}

.lt-wrapper:not( .lt-mobile-active ) .lt-tab:hover {
	background: transparent;
	color: var( --lt-color-hover );
}

.lt-wrapper:not( .lt-mobile-active ) .lt-tab:hover::after {
	width: 7px;
	margin-left: 10px;
	opacity: 1;
}

.lt-wrapper:not( .lt-mobile-active ) .lt-tab.lt-active {
	background: transparent;
	color: var( --lt-color-active );
	font-weight: 700;
}

.lt-wrapper:not( .lt-mobile-active ) .lt-tab.lt-active::after {
	width: 7px;
	margin-left: 10px;
	opacity: 1;
}

/* Actif + hover : conserve le vert actif */
.lt-wrapper:not( .lt-mobile-active ) .lt-tab.lt-active:hover {
	color: var( --lt-color-active );
}

/* ── Image dans tab ── */
.lt-tab-img {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

/* ── Icône ── */
.lt-tab-icon {
	flex-shrink: 0;
	font-size: 18px;
	display: flex;
	align-items: center;
	opacity: .7;
}

.lt-tab.lt-active .lt-tab-icon {
	opacity: 1;
}

/* ── Label + soulignement à la largeur du mot ── */
.lt-tab-label {
	flex: 0 1 auto;
	min-width: 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var( --lt-underline-idle );
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.lt-wrapper:not( .lt-mobile-active ) .lt-tab:hover .lt-tab-label {
	border-bottom-color: currentColor;
	box-shadow: 0 2px 0 0 currentColor;
}

.lt-wrapper:not( .lt-mobile-active ) .lt-tab.lt-active .lt-tab-label {
	border-bottom-color: currentColor;
	box-shadow: 0 2px 0 0 currentColor;
}

/* ── Zone contenu (droite) ── */
.lt-panels {
	flex: 1;
	min-width: 0;
}

/* ── Panel ──
   Desktop : on empile les panels en grid (pas de display:none) pour que
   Swiper mesure une vraie largeur dès l'init — sinon le drag casse au
   premier changement d'onglet.
   Mobile (accordéon) : les règles .lt-mobile-active reprennent la main. */
.lt-panel {
	display: none;
	padding: 24px 28px;
	animation: lt-fadein .2s ease;
}

.lt-panel.lt-active {
	display: block;
}

.lt-wrapper:not( .lt-mobile-active ) .lt-panels {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
}

.lt-wrapper:not( .lt-mobile-active ) .lt-panel {
	display: block;
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	height: 0;
	overflow: hidden;
	z-index: 0;
	animation: none;
}

.lt-wrapper:not( .lt-mobile-active ) .lt-panel.lt-active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	height: auto;
	overflow: visible;
	z-index: 1;
	animation: lt-fadein .2s ease;
}

@keyframes lt-fadein {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.lt-empty {
	color: #888;
	font-style: italic;
	padding: 20px;
}

/* ─────────────────────────────────────────────
   ACCORDÉON MOBILE
   Le seuil (--lt-breakpoint) est posé en JS via
   la classe .lt-mobile-active sur le wrapper —
   CSS ne sachant pas faire de @media dynamique
   à partir d'une variable choisie par l'utilisateur.
───────────────────────────────────────────── */

.lt-wrapper {
	--lt-acc-duration: 350ms;
	--lt-acc-easing: cubic-bezier( .4, 0, .2, 1 );
}

.lt-wrapper[data-easing="snappy"] {
	--lt-acc-easing: cubic-bezier( .34, 1.56, .64, 1 );
}

.lt-wrapper[data-easing="linear"] {
	--lt-acc-easing: linear;
}

.lt-wrapper.lt-mobile-active {
	flex-direction: column;
	gap: 0;
}

.lt-wrapper.lt-mobile-active .lt-tabs {
	width: 100%;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	border-right: none;
}

.lt-wrapper.lt-mobile-active .lt-tab {
	width: 100%;
	border-right: none;
	border-bottom: 1px solid var( --lt-underline-idle );
	margin-right: 0;
	padding: 14px 0;
	justify-content: space-between;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.lt-wrapper.lt-mobile-active .lt-tab-label {
	padding-bottom: 0;
	border-bottom: none;
	box-shadow: none;
}

.lt-wrapper.lt-mobile-active .lt-tab::after {
	margin-bottom: 0;
}

.lt-wrapper.lt-mobile-active .lt-tab:hover {
	background: transparent;
	color: var( --lt-color-hover );
	border-bottom-color: currentColor;
}

.lt-wrapper.lt-mobile-active .lt-tab.lt-active {
	background: transparent;
	color: var( --lt-color-active );
	border-bottom-color: currentColor;
	border-bottom-width: 2px;
}

/* Surface de clic plus généreuse + feedback tactile au press */
.lt-wrapper.lt-mobile-active .lt-tab:active {
	background: transparent;
	transform: scale( .995 );
}

.lt-wrapper.lt-mobile-active .lt-tab::after {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-left: 12px;
	position: relative;
	opacity: 1;
	border: none;
	transition: transform var( --lt-acc-duration ) var( --lt-acc-easing );
}

/* Chevron en CSS pur (deux pseudo-traits), plus net qu'un caractère "+" */
.lt-wrapper.lt-mobile-active .lt-tab::after {
	background-image: linear-gradient( 45deg, transparent 48%, #999 48%, #999 52%, transparent 52% ),
	                   linear-gradient( -45deg, transparent 48%, #999 48%, #999 52%, transparent 52% );
	background-size: 10px 2px;
	background-repeat: no-repeat;
	background-position: left center, right center;
}

.lt-wrapper.lt-mobile-active .lt-tab.lt-active::after {
	transform: rotate( 180deg );
	background-image: linear-gradient( 45deg, transparent 48%, var( --lt-color-active ) 48%, var( --lt-color-active ) 52%, transparent 52% ),
	                   linear-gradient( -45deg, transparent 48%, var( --lt-color-active ) 48%, var( --lt-color-active ) 52%, transparent 52% );
}

.lt-wrapper.lt-mobile-active .lt-panels {
	width: 100%;
	min-height: 0 !important;
	display: contents;
}

/* ── Panel en accordéon : transition de hauteur réelle ──
   On anime max-height + opacity plutôt qu'un display:none brutal.
   La hauteur cible exacte est posée en inline style par le JS
   (scrollHeight mesuré au moment de l'ouverture). */
.lt-wrapper.lt-mobile-active .lt-panel {
	display: block;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 1px solid #ececec;
	transition:
		max-height var( --lt-acc-duration ) var( --lt-acc-easing ),
		opacity calc( var( --lt-acc-duration ) * .8 ) ease,
		padding var( --lt-acc-duration ) var( --lt-acc-easing );
	animation: none;
}

.lt-wrapper.lt-mobile-active .lt-panel.lt-active {
	opacity: 1;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-left: 20px;
	padding-right: 20px;
	/* max-height est fixé dynamiquement en JS sur l'ouverture (scrollHeight),
	   puis relâché à 'none' une fois la transition terminée pour rester fluide
	   si le contenu change de taille (images qui chargent, etc.) */
}

/* ── Ajustement padding desktop (inchangé) ── */
.lt-wrapper:not( .lt-mobile-active ) .lt-panel {
	padding: 24px 28px;
}