/**
 * Bloc : lg/offres-occasions
 *
 * Bloc vitrine LG Occasion — fond gris, label décoratif, titre tricolore
 * (rouge/noir/rouge), card blanche avec image + sous-titre coloré,
 * texte centré et CTA glass.
 * Mobile-first. Desktop ≥ 1024px.
 *
 * Couche : @layer blocks
 *
 * @since 1.0.0
 */

/* ============================================
   SECTION — fond gris
   ============================================ */

.lg-offres-occasions {
	position: relative;
	overflow-x: clip;
}

/* ============================================
   WAVE DÉCORATIVE — derrière le contenu
   ============================================ */

.lg-offres-occasions__wave {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200vw;
	z-index: -1;
	pointer-events: none;
	line-height: 0;
}

@media (min-width: 768px) {
	.lg-offres-occasions__wave {
		width: 100vw;
	}
}

.lg-offres-occasions__wave svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ============================================
   LISERET ROUGE DÉCORATIF
   ============================================ */

.lg-offres-occasions__liseret {
	position: absolute;
	top: 0;
	left: -10px;
	pointer-events: none;
	overflow: visible;
	transform: translateY(-50%);
	z-index: -1;
}

.lg-offres-occasions__liseret-svg {
	display: block;
}

/* Mobile par défaut */
.lg-offres-occasions__liseret-svg--tablet,
.lg-offres-occasions__liseret-svg--desktop {
	display: none;
}

/* Tablette */
@media (min-width: 768px) {
	.lg-offres-occasions__liseret {
		top: -10px;
		transform: translateY(-50%);
	}
	.lg-offres-occasions__liseret-svg--mobile  { display: none; }
	.lg-offres-occasions__liseret-svg--tablet  { display: block; }
}

/* Desktop */
@media (min-width: 1024px) {
	.lg-offres-occasions__liseret {
		left: -40px;
		top: -20px;
		transform: translateY(-50%);
	}
	.lg-offres-occasions__liseret-svg--tablet  { display: none; }
	.lg-offres-occasions__liseret-svg--desktop { display: block; }
}

/* ============================================
   LABEL DÉCORATIF — Badge + barres dégradées
   ============================================ */

.lg-offres-occasions__label-group {
	margin-bottom: 1rem;
}

.lg-offres-occasions__label {
	font-size: var(--fs-body);
}

/* ============================================
   TITRE — Rouge / Noir / Rouge
   ============================================ */

.lg-offres-occasions__title {
	font-family: var(--ff-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	color: var(--color-noir-primary);
	margin-bottom: var(--space-6);
}

.lg-offres-occasions__title-accent {
	color: var(--color-accent);
}

/* ============================================
   CARD GLASS
   ============================================ */

.lg-offres-occasions__card {
	background: rgba(190, 190, 190, 0.30);
	border: 2px solid #CFCFCF;
	border-radius: 2.5rem;
	box-shadow:
		0 2px 8px 0 rgba(0, 0, 0, 0.20),
		0 0 30px 10px rgba(0, 0, 0, 0.10) inset;
	backdrop-filter: blur(2px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* ============================================
   IMAGE
   ============================================ */

.lg-offres-occasions__media {
	padding: var(--space-4);
	padding-bottom: 0;
}

.lg-offres-occasions__image {
	width: 100%;
	height: auto;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: var(--radius-md);
}

@media (min-width: 768px) {
	.lg-offres-occasions__media {
		padding: var(--space-5);
		padding-bottom: 0;
	}
}

/* ============================================
   CONTENU — Texte centré sous les images
   ============================================ */

.lg-offres-occasions__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-6);
	text-align: center;
}

/* Sous-titre avec accents rouges */

.lg-offres-occasions__subtitle {
	font-family: var(--ff-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-transform: uppercase;
	color: var(--color-noir-primary);
}

.lg-offres-occasions__subtitle .u-text-accent {
	color: var(--color-accent);
}

/* Texte descriptif */

.lg-offres-occasions__text {
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-noir-primary);
	max-width: 550px;
}

/* ============================================
   CTA — Bouton glass avec icône rouge
   ============================================ */

.lg-offres-occasions__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid var(--color-gris-400);
	border-radius: var(--radius-pill);
	backdrop-filter: blur(16px);
	text-decoration: none;
	transition:
		background var(--transition-base),
		border-color var(--transition-base);
}

.lg-offres-occasions__cta:hover {
	background: rgba(0, 0, 0, 0.15);
	border-color: var(--color-accent);
	text-decoration: none;
}

.lg-offres-occasions__cta-text {
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: var(--lh-body);
	color: var(--color-noir-primary);
}

.lg-offres-occasions__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--color-rouge-lg);
	border-radius: var(--radius-pill);
	color: var(--color-blanc);
	flex-shrink: 0;
	transition: background var(--transition-base);
}

.lg-offres-occasions__cta:hover .lg-offres-occasions__cta-icon {
	background: #BF1E10;
}

/* ============================================
   DESKTOP — Flex row, typographies, espacement
   ============================================ */

@media (min-width: 1024px) {
	.lg-offres-occasions__card {
		flex-direction: row;
		align-items: center;
		flex-direction: row-reverse;
	}

	.lg-offres-occasions__media {
		flex: 1 1 50%;
		min-width: 0;
		padding-left: 0;
		margin-left: -70px;
    	width: calc(100% + 70px);
	}

	.lg-offres-occasions__content {
		flex: 1 1 50%;
		padding: var(--space-8);
		padding-right: 0;
		align-items: flex-start;
		text-align: left;
	}

	.lg-offres-occasions__title {
		font-size: var(--fs-h1);
	}

	.lg-offres-occasions__subtitle {
		font-size: 2.75rem;
		line-height: 3.5rem;
	}

	.lg-offres-occasions__text {
		font-size: 1.5rem;
		font-weight: var(--fw-normal);
		line-height: 1.9375rem;
		max-width: none;
	}
	/* Reduit width text 2 */
	.lg-offres-occasions__text:last-of-type {
		max-width: calc(100% - 180px);
	}
}