/* Bloc « Modèles » — sélecteur de camping-cars d'une gamme. */

.lv-gm {
	--gm-gold: #986e3d;
	--gm-gold-2: #c09a53;
	--gm-ref: #a17451;
	--gm-dark: #282c2f;
	--gm-dark-2: #2c2e33;
	--gm-value: #473034;
	--gm-line: #3e3432;
	background: linear-gradient(180deg, #dac9be 0%, #dbcbc0 18%);
	padding: 160px 0 120px;
	color: var(--gm-dark-2);
}
.lv-gm * { box-sizing: border-box; }

.lv-gm-inner {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

/* ---- En-tête ---- */
.lv-gm-head {
	width: 100%;
	max-width: 1260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	text-align: center;
}
.lv-gm-overline {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 3.2px;
	text-transform: uppercase;
	color: var(--gm-gold);
}
.lv-gm-overline--center { width: 100%; text-align: center; }

.lv-gm-hero img { display: block; width: auto; max-width: 466px; height: 300px; object-fit: contain; }
.lv-gm-hero.is-flip img { transform: scaleX(-1); }

.lv-gm-title {
	margin: 0;
	font-family: 'Baskervville', serif;
	font-weight: 400;
	font-size: clamp(36px, 6vw, 72px);
	line-height: 1.05;
	color: var(--gm-dark-2);
}
.lv-gm-subtitle {
	margin: 0;
	max-width: 857px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: clamp(20px, 3vw, 32px);
	line-height: 1.3;
	color: var(--gm-gold);
}

/* ---- Barre de filtres ---- */
.lv-gm-specbar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	background: rgba(255, 255, 255, 0.23);
	border-radius: 24px;
	padding: 24px 16px;
}
.lv-gm-spec {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0 32px;
	border-right: 1px solid var(--gm-gold-2);
}
.lv-gm-spec:last-child { border-right: 0; }
.lv-gm-spec-label {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	letter-spacing: 3.2px;
	text-transform: uppercase;
	color: var(--gm-gold);
	white-space: nowrap;
}
.lv-gm-spec-value { position: relative; }
.lv-gm-spec-value select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	padding: 4px 34px 4px 8px;
	font-family: 'Baskervville', serif;
	font-size: 28px;
	color: var(--gm-dark);
	text-align: center;
	cursor: pointer;
	border-radius: 8px;
}
.lv-gm-spec-value::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 14px;
	height: 9px;
	transform: translateY(-50%);
	pointer-events: none;
	background: var(--gm-gold-2);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.lv-gm-spec-value select:focus-visible { outline: 2px solid var(--gm-gold-2); }

/* ---- Boutons de modèles ---- */
.lv-gm-variants {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	justify-content: center;
	max-width: 947px;
	/* Ancre du deep-linking : laisse la place au header flottant lors du scroll auto. */
	scroll-margin-top: 200px;
}
.lv-gm-variant {
	border: 1px solid var(--gm-dark);
	background: transparent;
	border-radius: 16px;
	padding: 16px 24px;
	font-family: 'Baskervville', serif;
	font-size: 24px;
	line-height: 1;
	color: var(--gm-dark);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.lv-gm-variant:hover { background: rgba(40, 44, 47, 0.08); }
.lv-gm-variant.is-active { background: var(--gm-dark); color: #fff; }
.lv-gm-variant[hidden] { display: none; }
.lv-gm-empty { margin: 0; font-family: 'Open Sans', sans-serif; color: var(--gm-gold); }

/* ---- Fiche détaillée ---- */
.lv-gm-panels { width: 100%; max-width: 1261px; }
.lv-gm-panel { display: flex; gap: 90px; align-items: flex-start; }
.lv-gm-panel[hidden] { display: none; }
.lv-gm-col-specs, .lv-gm-col-desc { flex: 1 1 0; min-width: 0; }
.lv-gm-col-schema { flex: 0 0 363px; max-width: 363px; }

.lv-gm-col-specs { display: flex; flex-direction: column; gap: 32px; }
.lv-gm-model-header {
	display: flex;
	flex-direction: column;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--gm-line);
}
.lv-gm-model-gamme { font-family: 'Baskervville', serif; font-size: 48px; color: var(--gm-dark-2); }
.lv-gm-model-ref { font-family: 'Baskervville', serif; font-style: italic; font-size: 64px; line-height: 1.05; color: var(--gm-ref); }

.lv-gm-spec-block { display: flex; flex-direction: column; gap: 24px; padding-bottom: 32px; border-bottom: 1px dashed var(--gm-line); }
.lv-gm-spec-block--last { border-bottom: 0; }
.lv-gm-h3 { margin: 0; font-family: 'Baskervville', serif; font-weight: 400; font-size: 32px; color: var(--gm-dark-2); }
.lv-gm-rows { display: flex; flex-direction: column; gap: 8px; }
.lv-gm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.lv-gm-row-label { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 20px; color: var(--gm-dark); }
.lv-gm-row-value { font-family: 'Baskervville', serif; font-size: 20px; color: var(--gm-value); text-align: right; white-space: nowrap; }

.lv-gm-col-schema { align-self: stretch; }
.lv-gm-schema { width: 100%; }
.lv-gm-schema img { display: block; width: 100%; height: auto; border-radius: 8px; }

.lv-gm-col-desc { display: flex; flex-direction: column; gap: 32px; }
/* Bloc « Spécificités » : bordure + titre alignés sur l'en-tête modèle et le
   premier titre de la colonne gauche (hauteur en-tête ≈ 172px, puis 32px). */
.lv-gm-specificites {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 172px;
	border-top: 1px solid var(--gm-dark);
	padding-top: 32px;
	border-bottom: 1px dashed var(--gm-line);
	padding-bottom: 32px;
}
.lv-gm-description { font-family: 'Open Sans', sans-serif; font-style: normal; font-size: 20px; line-height: 1.25; color: var(--gm-dark-2); font-weight: 200;}
.lv-gm-description ul { margin: 0 0 0 16px;}
.lv-gm-description ul li { margin: 0 0 8px 0;}
.lv-gm-description p { margin: 0 0 .5em; }
.lv-gm-description p:last-child { margin-bottom: 0; }

.lv-gm-features { background: rgba(177, 145, 111, 0.15); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.lv-gm-features-list, .lv-gm-features-list ul { margin: 0; padding-left: 1.4em; }
.lv-gm-features-list li { font-family: 'Baskervville', serif; font-size: 24px; line-height: 1.3; color: var(--gm-dark); margin-bottom: 8px; }
.lv-gm-features-list li:last-child { margin-bottom: 0; }

/* ---- Carrousel « Médias » de la fiche modèle ----
   Design calqué sur le carrousel « Intérieur » de la page gamme (slide plein
   cadre + dégradé + légende, vignettes, barres de progression, compteur),
   couleurs de nav adaptées au fond clair du bloc. */
.lv-gm-panel { flex-wrap: wrap; }
.lv-gm-car {
	flex-basis: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 26px;
}
.lv-gm-car-frame {
	position: relative;
	width: 100%;
	height: 679px;
	border-radius: 32px;
	overflow: hidden;
	touch-action: pan-y;
}
.lv-gm-car-slides { position: absolute; inset: 0; }
.lv-gm-car-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}
.lv-gm-car-slide.is-active { opacity: 1; pointer-events: auto; }
.lv-gm-car-slide > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lv-gm-car-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(44, 46, 51, 0.82) 100%);
}
.lv-gm-car-caption {
	position: absolute;
	left: 32px;
	bottom: 32px;
	z-index: 2;
	max-width: 509px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #fff;
}
.lv-gm-car-title {
	margin: 0;
	font-family: 'Baskervville', serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(48px, 8vw, 96px);
	line-height: 1;
}
.lv-gm-car-text {
	margin: 12px 0 0;
	max-width: 482px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 1.4;
}
.lv-gm-car-thumbs {
	position: absolute;
	right: 32px;
	bottom: 32px;
	z-index: 3;
	display: flex;
	gap: 24px;
	align-items: center;
}
.lv-gm-car-thumb {
	position: relative;
	width: 112px;
	height: 112px;
	padding: 0;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	background: none;
	transition: border-color .2s ease;
}
.lv-gm-car-thumb > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lv-gm-car-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(44, 46, 51, 0.48) 100%);
}
.lv-gm-car-thumb.is-active { border-color: var(--gm-gold-2); }
.lv-gm-car-thumb:focus-visible { outline: 2px solid var(--gm-gold-2); outline-offset: 2px; }
.lv-gm-car-nav {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	width: 100%;
}
.lv-gm-car-bars {
	display: flex;
	gap: 24px;
	align-items: center;
	width: 100%;
}
.lv-gm-car-bar {
	flex: 1;
	min-width: 0;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	background: rgba(40, 44, 47, 0.18);
	transition: background-color .2s ease;
}
.lv-gm-car-bar.is-active { background: var(--gm-gold-2); }
.lv-gm-car-bar:focus-visible { outline: 2px solid var(--gm-gold-2); outline-offset: 2px; }
.lv-gm-car-counter {
	margin: 0;
	font-family: 'Baskervville', serif;
	font-style: italic;
	font-size: 32px;
	line-height: 1;
	color: var(--gm-gold);
	text-align: right;
	width: 100%;
}

@media (max-width: 991px) {
	.lv-gm-car-thumbs { right: 20px; bottom: 20px; gap: 12px; }
	.lv-gm-car-thumb { width: 80px; height: 80px; }
}
@media (max-width: 767px) {
	.lv-gm-car { gap: 16px; margin-top: 8px; }
	.lv-gm-car-frame { height: 480px; border-radius: 24px; }
	.lv-gm-car-thumbs { display: none; }
	.lv-gm-car-caption { left: 20px; right: 20px; bottom: 20px; max-width: none; }
	.lv-gm-car-text { font-size: 18px; }
	.lv-gm-car-bars { gap: 12px; }
	.lv-gm-car-counter { font-size: 24px; }
}

/* ---- CTA ---- */
.lv-gm-cta { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; }
.lv-gm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	border-radius: 16px;
	font-family: 'Baskervville', serif;
	font-size: 24px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.lv-gm-btn--outline { border: 1px solid var(--gm-dark); color: var(--gm-dark); background: transparent; }
.lv-gm-btn--outline:hover { background: var(--gm-dark); color: #f9f7f2; }
.lv-gm-btn--gold { background: var(--gm-gold-2); color: var(--gm-dark); border: 1px solid var(--gm-gold-2); }
.lv-gm-btn--gold:hover { background: #a8843f; border-color: #a8843f; transform: translateY(-2px); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.lv-gm-panel { gap: 40px; flex-wrap: wrap; }
	.lv-gm-col-schema { flex-basis: 100%; max-width: 420px; margin: 0 auto; order: -1; }
}
@media (max-width: 767px) {
	.lv-gm { padding: 120px 0 72px; }
	.lv-gm-inner { gap: 48px; padding: 0 20px; }
	.lv-gm-head { gap: 28px; }
	.lv-gm-specbar { padding: 16px 8px; }
	.lv-gm-spec { padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--gm-gold-2); width: 100%; }
	.lv-gm-spec:last-child { border-bottom: 0; }
	.lv-gm-spec-value select { font-size: 22px; }
	.lv-gm-panel { flex-direction: column; gap: 32px; }
	.lv-gm-col-specs, .lv-gm-col-desc, .lv-gm-col-schema { flex-basis: 100%; max-width: 100%; }
	.lv-gm-specificites { margin-top: 0; }
	.lv-gm-model-gamme { font-size: 32px; }
	.lv-gm-model-ref { font-size: 44px; }
	.lv-gm-description { font-size: 24px; }
	.lv-gm-variant { font-size: 20px; padding: 12px 20px; }
	.lv-gm-btn { font-size: 20px; padding: 18px 22px; }
}