/**
 * Carrecao — Bloc Avantages + Vidéo (styles)
 *
 * 2 colonnes : vidéo full-bleed à gauche, contenu à droite (titre, intro,
 * liste enrichie d'avantages, CTA). Mobile : empilé, vidéo au-dessus.
 * 100 % custom properties. BEM : .block--avantages-video, .avantages-video__*
 */

.block--avantages-video {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding-block: var(--space-2xl);
	background-color: var(--color-bg);
	overflow: hidden;
	isolation: isolate;
}

.avantages-video__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-padding);  /* fallback navigateurs anciens */
	padding-right: var(--container-padding); /* fallback navigateurs anciens */
	padding-inline: var(--container-padding);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	/* La colonne droite (contenu) dicte la hauteur ; la colonne média
	   (vidéo) s'étire pour matcher. */
	align-items: stretch;
}

/* En mode photo : image légèrement réduite (~15%) pour moins d'espace vide.
   align-self: stretch sur le conteneur média pour que height:100% fonctionne. */
.avantages-video--photo .avantages-video__inner {
	grid-template-columns: 0.85fr 1.15fr;
}

.avantages-video--photo .avantages-video__media {
	align-self: stretch;
	background-color: transparent;
}

/* ──────────────────────────────────────────────
 * COLONNE GAUCHE — vidéo (ou poster ou placeholder) full height
 * ────────────────────────────────────────────── */

/* Wrapper : position relative + overflow hidden. La vidéo dedans est
   en position absolute → elle ne tire plus la hauteur de la cellule à
   sa taille intrinsèque, c'est la colonne contenu qui dicte. */
.avantages-video__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-secondary);
	align-self: center;
	/* Rectangle décoratif décalé derrière la vidéo */
	box-shadow: var(--space-sm) var(--space-sm) 0 0 var(--color-primary);
}

/* Vidéo (ou poster) : flux normal, ratio d'origine conservé. */
.avantages-video__video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Photo : couvre tout le conteneur sans déformation.
   height: 100% fonctionne car le conteneur parent (grid + align-self: stretch)
   a une hauteur déterminée par la colonne contenu. */
.avantages-video__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* oEmbed YouTube / Vimeo : l'iframe n'a pas de ratio intrinsèque → on impose
   un cadre 16/9 dans lequel elle se place en absolu. */
.avantages-video__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.avantages-video__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Placeholder éditeur (pas de vidéo ni poster) */
.avantages-video__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 380px;
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
	color: var(--color-text-muted);
}

.avantages-video__placeholder svg {
	width: 80px;
	height: 80px;
	opacity: 0.5;
}

/* ──────────────────────────────────────────────
 * COLONNE DROITE — contenu
 * ────────────────────────────────────────────── */

.avantages-video__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-lg);
	align-items: flex-start;
	min-width: 0; /* empêche le grid item de déborder au-delà de sa piste */
}

.avantages-video__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	line-height: 1.15;
	color: var(--color-secondary);
}

.avantages-video__intro {
	margin: 0;
	max-width: 42ch;
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: 1.5;
	color: var(--color-text-muted);
}

/* ──────────────────────────────────────────────
 * LISTE D'AVANTAGES — picto + titre + texte
 * ────────────────────────────────────────────── */

.avantages-video__list {
	list-style: none;
	margin: var(--space-sm) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
}

.avantage-item {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: var(--space-sm);
	align-items: flex-start;
}

.avantage-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	color: var(--color-primary);
}

.avantage-item__icon svg,
.avantage-item__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.avantage-item__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 4px;
}

.avantage-item__titre {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	color: var(--color-secondary);
	line-height: 1.2;
}

.avantage-item__texte {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-text-muted);
}

/* ──────────────────────────────────────────────
 * CTA
 * ────────────────────────────────────────────── */

.avantages-video__actions {
	margin-top: var(--space-sm);
}

.avantages-video__actions .btn {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	letter-spacing: var(--track-eyebrow);
}

/* ──────────────────────────────────────────────
 * RESPONSIVE
 * ────────────────────────────────────────────── */

@media (max-width: 900px) {

	.avantages-video__inner,
	.avantages-video--photo .avantages-video__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.avantages-video__title {
		font-size: var(--text-3xl);
	}

	.avantages-video__intro {
		font-size: var(--text-base);
		max-width: none;
	}

	/* align-items: flex-start (défaut desktop) laisse les enfants du flex
	   column s'élargir à leur taille intrinsèque → overflow. Sur mobile
	   (1 seule piste), on force stretch pour que chaque enfant soit contraint
	   à la largeur de la colonne. */
	.avantages-video__content {
		align-items: stretch;
	}

	/* Le .btn a white-space:nowrap : sur 1 colonne le libellé long
	   ("Demander un devis personnalisé") dépasse. */
	.avantages-video__actions .btn {
		white-space: normal;
		text-align: center;
	}
}

@media (max-width: 900px) {

	.avantages-video__placeholder {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	/* En mode photo, l'image a height:100% prévu pour le layout 2 col.
	   Sur mobile (1 col), on lui impose un ratio 4/3 pour qu'elle soit
	   visible sans prendre toute la hauteur de page. */
	.avantages-video--photo .avantages-video__media {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.avantages-video--photo .avantages-video__photo {
		height: 100%;
	}
}

@media (max-width: 600px) {

	.block--avantages-video {
		padding-block: var(--space-2xl);
	}

	.avantage-item {
		grid-template-columns: 24px 1fr;
	}

	.avantage-item__icon {
		width: 24px;
		height: 24px;
	}

	/* Bouton pleine largeur sur mobile — white-space:nowrap du .btn
	   ferait déborder un libellé long comme "Demander un devis personnalisé" */
	.avantages-video__actions {
		width: 100%;
	}

	.avantages-video__actions .btn {
		width: 100%;
		white-space: normal;
		text-align: center;
	}
}