/**
 * Section « Réserver » de l'accueil — bloc « Text » du template Captured.
 * Cotes relevées sur la démo à 1440 px : fond #111112, marges 230 / 36, grille de
 * 4 colonnes (lignes blanches à 20 %), titre 82 px sur les colonnes 2-3, texte 20 px et
 * lien en colonne 3. La photo de fond de la démo (40 %, dézoomée de 120 % à 100 %) est
 * remplacée par la vidéo d'Anthony (Vimeo, mode arrière-plan : muette, en boucle).
 * Bouton de lecture : ouvre la même vidéo avec le son dans une fenêtre (data-modal="video").
 */

.aml-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--aml-ink);
	color: var(--aml-white);
	padding: clamp(140px, 16vw, 230px) clamp(16px, 2.5vw, 36px);
}

/* Vidéo de fond (40 %) : couvre toute la section quel que soit son format */
.aml-cta__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: 0.4;
	container-type: size;
}

.aml-cta__poster,
.aml-cta__poster img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aml-cta__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	max-width: none; /* Bricks borne les iframes à 100 % */
	max-height: none;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Animations réduites : pas de vidéo en boucle, l'image fixe reste */
@media (prefers-reduced-motion: reduce) {
	.aml-cta__video { display: none; }
}

.aml-cta__lines {
	position: absolute;
	top: 0;
	bottom: 0;
	left: clamp(16px, 2.5vw, 36px);
	right: clamp(16px, 2.5vw, 36px);
	z-index: -1;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
	background-size: 25% 100%;
	background-position: -1px 0;
	pointer-events: none;
}

.aml-cta .aml-corners { z-index: -1; }

/* --- Contenu ---------------------------------------------------------------------------- */

.aml-cta__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%; /* la section Bricks centre ses enfants (flex) */
	max-width: 1920px;
	margin: 0 auto;
}

.aml-cta__h2 {
	grid-column: 2 / span 2;
	margin: 0;
	padding-right: 20px;
	font-size: clamp(38px, 5.7vw, 82px);
	font-weight: 500;
	letter-spacing: -0.07em;
	line-height: 0.96;
	color: var(--aml-white);
}

.aml-cta__play {
	grid-column: 2;
	align-self: start;
	margin-top: 100px;
}

.aml-cta__text {
	grid-column: 3;
	margin-top: 100px;
	padding-right: 20px;
}

.aml-cta__text p {
	margin: 0 0 40px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 28px;
	color: var(--aml-white);
}

.aml-cta__text .aml-about__more { margin-top: 0; }

/* Bouton de lecture : rond blanc translucide (comme le rond du hero) et triangle */
.aml-play {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--aml-white);
	cursor: pointer;
	font: 600 16px/22px var(--aml-font);
	letter-spacing: -0.05em;
	text-align: left;
}

.aml-play__disc {
	position: relative;
	flex: none;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.34);
	transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.3s ease;
}

.aml-play__disc::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -10px 0 0 -6px;
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent var(--aml-white);
}

.aml-play:hover .aml-play__disc,
.aml-play:focus-visible .aml-play__disc {
	transform: scale(1.08);
	background: rgba(255, 255, 255, 0.45);
}

.aml-play__label small {
	display: block;
	font-weight: 500;
	opacity: 0.6;
}

/* --- Tablette et mobile -------------------------------------------------------------- */

@media (max-width: 1199px) {
	.aml-cta__inner { grid-template-columns: 1fr 1fr; }
	.aml-cta__h2 { grid-column: 1 / -1; }
	.aml-cta__play { grid-column: 1; }
	.aml-cta__text { grid-column: 2; }
}

@media (max-width: 809px) {
	.aml-cta__lines { background-size: 50% 100%; }
	.aml-cta__inner { grid-template-columns: 1fr; }
	.aml-cta__play,
	.aml-cta__text { grid-column: 1; margin-top: 48px; }
}