/**
 * 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 + contenu centré, mobile/tablette */
@media (max-width: 1023px) {
	.lg-mission-groupe__content-inner {
		width: -moz-fit-content;
		width: fit-content;
		align-items: center;
		text-align: center;
	}

	/* CTA centré dans la box. Sélecteur descendant pour battre en spécificité
	   le align-self: flex-start de base (déclaré plus bas dans le fichier). */
	.lg-mission-groupe__content-inner .lg-mission-groupe__cta {
		align-self: center;
	}
}

/* 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.275rem;
	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: 0.8rem;
	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;
}

/* État disabled (CTA sans URL configurée — Figma) */
button.lg-mission-groupe__cta {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.lg-mission-groupe__cta.lg-mission-groupe__cta--disabled,
.lg-mission-groupe__cta.lg-mission-groupe__cta--disabled:hover {
	background-color: var(--color-disabled-bg);
	border-color: var(--color-disabled-bg);
	cursor: not-allowed;
	pointer-events: none;
}

.lg-mission-groupe__cta--disabled .lg-mission-groupe__cta-text {
	color: var(--color-disabled-text);
}

.lg-mission-groupe__cta--disabled .lg-mission-groupe__cta-icon {
	background: var(--color-disabled-text);
}

.lg-mission-groupe__cta--disabled .lg-mission-groupe__cta-icon svg path {
	stroke: var(--color-disabled-bg);
}

/* ============================================
   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__label-group {
		margin-bottom: 2.6rem;
	}

	.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 + grid-template-areas pour aligner naturellement
	   le bloc image (col droite, row 3) avec le card-wrapper (col gauche, row 3),
	   sans dépendre de la hauteur calculée du label/titre. */
	.lg-mission-groupe__grid {
		grid-template-columns: 55fr 45fr;
		grid-template-areas:
			"label   ."
			"title   ."
			"card    media";
		align-items: start;
		gap: 0;
		position: relative;
	}

	/* Le wrapper __content disparaît visuellement : ses enfants
	   (label, title, card-wrapper) deviennent grid children directs
	   et peuvent être placés dans la grid-template-areas ci-dessus. */
	.lg-mission-groupe__content {
		display: contents;
	}

	.lg-mission-groupe__label-group {
		grid-area: label;
		position: relative;
		z-index: 1;
		margin-bottom: 3.87rem;
	}

	.lg-mission-groupe__card-wrapper {
		grid-area: card;
		position: relative;
		z-index: 1; /* stacking context pour le polygone SVG (z-index: -1) */
	}

	/* Image — colonne droite, row 3, alignée naturellement avec le card-wrapper.
	   justify-self: end ancre le bord droit dans le cell, l'éventuel surplus
	   déborde à gauche et passe derrière le card-wrapper (z-index: 1). */
	.lg-mission-groupe__media {
		grid-area: media;
		position: relative;
		z-index: 0;
		align-self: start;
		justify-self: end;
		width: 110%;
	}

	.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);
	}

	/* Supprime le glass (le polygone SVG prend le relais).
	   aspect-ratio Figma 1280 (620/420) : un peu plus court que le SVG natif
	   (621/436) pour réduire légèrement la hauteur du polygone et de la
	   zone de texte tout en restant aligné sur la maquette. */
	.lg-mission-groupe__content-inner {
		width: 100%;
		aspect-ratio: 620 / 380;
		justify-content: space-between;
		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 — étiré sur toute la hauteur du content-inner */
	.lg-mission-groupe__card-polygon {
		display: block;
		top: 0;
		left: 0;
		width: -moz-fit-content;
		width: fit-content;
		height: 100%;
		max-width: 100%;
	}

	/* Typographie desktop */
	.lg-mission-groupe__title {
		grid-area: 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.55rem;
		line-height: 3.175rem;
		max-width: 33rem;
	}

	.lg-mission-groupe__text {
		font-size: 1.425rem;
		line-height: 1.9875rem;
		max-width: 31.05rem;
		margin-bottom: 1rem;
	}
}

/* ============================================
   DESKTOP MEDIUM (1024px → 1700px)
   MacBook Air / laptops 13"–15" : tailles de typo
   réduites pour correspondre à la maquette Figma 1280px.
   ============================================ */

@media (min-width: 1024px) and (max-width: 1700px) {

	/* Titre — "Notre mission, Réinventer…" : Figma 1280 → 42/52, w 621px */
	.lg-mission-groupe__title {
		font-size: 2.625rem;
		line-height: 3.25rem;
		margin-bottom: 2rem; /* Figma 1280 : 31px entre titre et polygone */
		width: 38.8125rem;
		max-width: 100%;
	}

	/* Sous-titre — "Derrière chaque véhicule…" : Figma 1280 → 32/38, w 433px */
	.lg-mission-groupe__subtitle {
		font-size: 2rem;
		line-height: 2.375rem;
		max-width: 27.0625rem;
	}

	/* Paragraphes : Figma 1280 → 16/22, w 441px */
	.lg-mission-groupe__text {
		font-size: 1rem;
		line-height: 1.375rem;
		max-width: 24.5625rem;
	}

	/* Padding intérieur du polygone — Figma 1280 : 31px top / 43px left */
	.lg-mission-groupe__content-inner {
		padding: 2rem 0 2rem 2.6875rem;
	}

	/* Image — overlap plus prononcé sur viewport étroite.
	   max(130%, 540px) : tant que 130% du cell ≥ 540px (≈ vw ≥ 1031px),
	   on garde le ratio. En dessous, l'image reste à 540px et le cell continue
	   de rétrécir → l'overlap grandit naturellement sans zoomer l'image.
	   margin-top: -10% remonte l'image pour chevaucher légèrement le titre. */
	.lg-mission-groupe__media {
		width: max(130%, 540px);
		margin-top: -10%;
	}

	/* Image — aspect-ratio Figma 1280 (574/464 ≈ 1.237) : aligne la hauteur
	   de la row 3 sur le polygone et ramène la hauteur globale du bloc
	   au plus proche des 700-720px de la maquette. */
	.lg-mission-groupe__image {
		aspect-ratio: 574 / 464;
		-o-object-fit: cover;
		   object-fit: cover;
	}
}