/**
 * Bloc : lg/mission-groupe
 *
 * Section éditorial "Mission Groupe" — label décoratif, titre split,
 * glass card polygonale asymétrique avec sous-titre + texte + CTA, image latérale.
 * Mobile-first : empilé, card arrondie. Polygone à partir de lg (1024px).
 *
 * Couche : @layer blocks
 *
 * @since 1.0.0
 */

 .lg-mission-groupe {
	padding-bottom: var(--space-16);
	margin-bottom: var(--space-10);
	position: relative;
	overflow: hidden;
 }

/* ============================================
   GRID — Mobile (empilé)
   ============================================ */

.lg-mission-groupe__grid {
	display: grid;
	gap: var(--space-6);
}

.lg-mission-groupe__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Card — layout wrapper, pas de glass ici (glass sur content-inner) */
.lg-mission-groupe__card-wrapper {
	position: relative;
}

.lg-mission-groupe__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

/* Content-inner — glass card sur mobile/tablette */
.lg-mission-groupe__content-inner {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	padding: var(--space-6);
	border-radius: 1.25rem;
	border: 2px solid #cfcfcf;
	background: rgba(190, 190, 190, 0.30);
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10) inset, 0 2px 8px 0 rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* Content-inner — fit-content uniquement mobile/tablette */
@media (max-width: 1023px) {
	.lg-mission-groupe__content-inner {
		width: fit-content;
	}
}

/* Polygone SVG — caché sur mobile/tablette */
.lg-mission-groupe__card-polygon {
	display: none;
	position: absolute;
	z-index: -1;
}

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

.lg-mission-groupe__label-group {
	position: relative;
}

.lg-mission-groupe__label {
	font-size: var(--fs-body);
}

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

.lg-mission-groupe__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-mission-groupe__wave {
		width: 100vw;
	}
}

.lg-mission-groupe__wave svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ============================================
   TITRE — Mobile
   ============================================ */

.lg-mission-groupe__title {
	font-family: var(--ff-heading);
	font-size: 1.625rem;
	font-weight: var(--fw-bold);
	line-height: 2rem;
	text-transform: uppercase;
	color: var(--color-noir-primary);
	max-width: 18.5rem;
	margin-bottom: 2.3rem;
}

.lg-mission-groupe__title-accent {
	color: var(--color-accent);
}

/* ============================================
   SOUS-TITRE — Mobile
   ============================================ */

.lg-mission-groupe__subtitle {
	font-family: var(--ff-heading);
	font-size: 1.375rem;
	font-weight: var(--fw-bold);
	line-height: 2rem;
	text-transform: uppercase;
	color: var(--color-noir-primary);
	max-width: 18.25rem;
	margin-bottom: 0.75rem;
}

.lg-mission-groupe__subtitle .u-text-accent {
	color: var(--color-accent);
}

/* ============================================
   TEXTE — Mobile
   ============================================ */

.lg-mission-groupe__text {
	font-family: var(--ff-body);
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--color-noir-primary);
	max-width: 19rem;
	margin-bottom: 0.75rem;
}

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

.lg-mission-groupe__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--space-2);
	padding: 0.75rem 1rem;
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid var(--color-gris-400);
	border-radius: var(--radius-pill);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	text-decoration: none;
	transition: background var(--transition-base), border-color var(--transition-base);
}

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

.lg-mission-groupe__cta-text {
	font-family: var(--ff-body);
	font-size: 1rem;
	font-weight: var(--fw-bold);
	line-height: 1.5rem;
	color: var(--color-noir-primary);
}

.lg-mission-groupe__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-mission-groupe__cta:hover .lg-mission-groupe__cta-icon {
	background: #BF1E10;
}

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

.lg-mission-groupe__media {
	position: relative;
}

.lg-mission-groupe__image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	-o-object-fit: cover;
	   object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* ============================================
   TABLETTE — 768px+
   ============================================ */

@media (min-width: 768px) {
	/* Tablette — 2 colonnes, contenu + image côte à côte, glass rectangle */
	.lg-mission-groupe__grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: var(--space-4);
	}

	.lg-mission-groupe__media {
		width: 150%;
		margin-left: -50%;
		align-self: end;
	}

	.lg-mission-groupe__title {
		font-size: 1.875rem;
		line-height: 2.25rem;
		max-width: 20.825rem;
		margin-bottom: 1.81rem;
	}

	.lg-mission-groupe__subtitle {
		font-size: 1.375rem;
		line-height: 2rem;
		max-width: 17.5625rem;
		margin-bottom: 1rem;
	}

	.lg-mission-groupe__text {
		font-size: 1rem;
		line-height: 1.5rem;
		max-width: 19rem;
		margin-bottom: 0.88rem;
	}
}

/* ============================================
   DESKTOP — 1024px+ : 2 colonnes + polygone
   ============================================ */

@media (min-width: 1024px) {
	/* Grid — 2 colonnes collées (gap: 0), label + titre sont au-dessus dans le DOM */
	.lg-mission-groupe__grid {
		grid-template-columns: 55fr 45fr;
		align-items: start;
		gap: 0;

		position: relative;
	}

	/* Contenu (colonne gauche) — z-index au-dessus de l'image */
	.lg-mission-groupe__content {
		position: relative;
		z-index: 1;
	}

	/* Image — colonne droite, dans le flux grid, derrière le polygon */
	.lg-mission-groupe__media {
		position: relative;
		z-index: 0;
		/* width: 120%; */
		/* margin-left: -20%; */
		/* Test */
		width: auto;
		margin-left: 0;
		position: absolute;
		top: calc(40px + 20px + 136px + 4.75rem + 20px + 10px); /* label + gap + title + gap + title margin + gap */
		width: 55%;
		right: 0;
	}

	.lg-mission-groupe__image {
		width: 100%;
		height: auto;
		aspect-ratio: auto;
		min-height: 0;
		-o-object-fit: initial;
		   object-fit: initial;
		border-radius: var(--radius-xl);
		margin-top: 7px;
	}

	/* Supprime le glass (le polygone SVG prend le relais) */
	.lg-mission-groupe__content-inner {
		width: 100%;
		border-radius: 0;
		border: none;
		background: none;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		padding: var(--space-6);
		padding-right: 0;
	}

	/* Polygone visible à taille fixe — max-width: none override les resets CSS */
	.lg-mission-groupe__card-polygon {
		display: block;
		top: 0;
		left: 0;
		width: fit-content;
		height: 100%;
		max-width: 100%;
		max-height: max-content;
	}

	/* Typographie desktop */
	.lg-mission-groupe__title {
		font-size: 3.375rem;
		line-height: 4.25rem;
		max-width: 200%;
		width: 48.625rem;
		margin-bottom: 4.75rem;
	}

	.lg-mission-groupe__subtitle {
		font-size: 1.5rem;
		/* line-height: 2.875rem; */
		max-width: 20rem;
		margin-bottom: 1rem;
	}

	.lg-mission-groupe__text {
		font-size: 1rem;
		/* line-height: 1.6875rem; */
		max-width: 22rem;
		margin-bottom: 1.25rem;
	}

	.lg-mission-groupe__cta {
		padding: 1rem;
	}

	.lg-mission-groupe__cta-text {
		font-size: 1.125rem;
		line-height: 1.6875rem;
	}
}

/* @media (min-width: 1180px) {
	.lg-mission-groupe__media {
		width: 130%;
		margin-left: -30%;
	}
} */

@media (min-width: 1280px) {
	

	.lg-mission-groupe__content-inner {
		padding: var(--space-8);
	}

	.lg-mission-groupe__subtitle {
		font-size: 2.25rem;
		line-height: 2.875rem;
		max-width: 31rem;
	}

	.lg-mission-groupe__text {
		font-size: 1.125rem;
		line-height: 1.6875rem;
		max-width: 27.75rem;
		margin-bottom: 2.19rem;
	}
}