/**
 * Section « Pourquoi me choisir ? » de l'accueil — bloc « Bento Grid » du template Captured.
 * Cotes relevées sur la démo à 1440 px : fond #f1f1f1, marges 160 / 36, titre centré
 * (82 px), mosaïque de 10 tuiles à coins arrondis de 20 px, gouttières de 20 px :
 *   rangée 1 : Polaroïds · Galerie (2 × 667 × 475)
 *   rangée 2 : 3 colonnes de 438 px sur 4 lignes (228 · 227 · 227 · 228)
 *     col. 1 : Instagram (lignes 1-3) · Avis (4)
 *     col. 2 : Déclenchement (1-2) · Appareil (3-4)
 *     col. 3 : WPPI + Précision (1) · Messagerie (2-3) · Délai (4)
 * Les hauteurs suivent la largeur (≈ 15,8 vw pour une ligne de 228 px à 1440 px).
 */

.aml-bento {
	--row: clamp(200px, 15.8vw, 300px);
	--gap: 20px;
	position: relative;
	background: var(--aml-mist);
	color: var(--aml-ink);
	padding: clamp(96px, 11.1vw, 160px) clamp(16px, 2.5vw, 36px);
}

.aml-bento__inner {
	max-width: 1920px;
	margin: 0 auto;
}

/* --- En-tête centré ------------------------------------------------------------------ */

.aml-bento__head {
	text-align: center;
	margin-bottom: clamp(64px, 8.3vw, 120px);
}

.aml-bento__h2 {
	max-width: 910px;
	margin: 0 auto;
	font-size: clamp(38px, 5.7vw, 82px);
	font-weight: 500;
	letter-spacing: -0.07em;
	line-height: 0.96;
}

.aml-bento__intro {
	max-width: 790px;
	margin: 50px auto 0;
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 1.2;
	color: rgba(17, 17, 18, 0.6);
}

/* --- Grille ---------------------------------------------------------------------------- */

.aml-bento__row1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	height: calc(2 * var(--row) + var(--gap));
	margin-bottom: var(--gap);
}

.aml-bento__row2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: var(--row) calc(var(--row) - 1px) calc(var(--row) - 1px) var(--row);
	gap: var(--gap);
}

.aml-tile {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background: var(--aml-white);
	min-width: 0;
}

.aml-tile--instagram { grid-column: 1; grid-row: 1 / span 3; }
.aml-tile--reviews   { grid-column: 1; grid-row: 4; }
.aml-tile--shot      { grid-column: 2; grid-row: 1 / span 2; }
.aml-tile--camera    { grid-column: 2; grid-row: 3 / span 2; }
.aml-bento__pair     { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.aml-tile--chat      { grid-column: 3; grid-row: 2 / span 2; }
.aml-tile--time      { grid-column: 3; grid-row: 4; }

/* Photo de fond commune aux tuiles photo */
.aml-tile__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.aml-tile__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aml-tile__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
	pointer-events: none;
}

.aml-tile__content {
	position: relative;
	z-index: 2;
}

/* Chiffre + libellé (Polaroïds, WPPI, Avis) */
.aml-bento__num {
	margin: 0;
	font-size: clamp(56px, 5.3vw, 76px);
	font-weight: 500;
	letter-spacing: -0.07em;
	line-height: 0.96;
}

.aml-bento__num sup {
	font-size: 0.5em;
	font-weight: 600;
	letter-spacing: -0.07em;
	vertical-align: 0.7em;
	margin-left: 2px;
}

.aml-bento__label {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 22px;
	color: rgba(17, 17, 18, 0.6);
}

.aml-bento__label a {
	color: inherit;
	text-decoration: none;
}

.aml-bento__lead {
	margin: 0;
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 1.2;
	color: var(--aml-white);
}

/* --- 1. Polaroïds : 5 photos en éventail + compteur ------------------------------------ */

.aml-tile--polaroid {
	overflow: visible;
	padding: 50px;
	display: flex;
	align-items: flex-end;
	/* Trame de points (« Dits vector » de la démo, 20 %) */
	background:
		radial-gradient(circle, rgba(17, 17, 18, 0.2) 1px, transparent 1.5px) 0 0 / 14px 14px,
		var(--aml-white);
}

.aml-polaroid {
	position: absolute;
	z-index: 1;
}

.aml-polaroid__inner {
	width: 100%;
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.25);
}

.aml-polaroid__inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Positions et rotations relevées sur la démo (tuile 667 × 475) */
.aml-polaroid--5 { left: 32.5%; top: 48.6%; width: 33.9%; height: 48%;   }
.aml-polaroid--4 { left: 42%;   top: 30.5%; width: 29.1%; height: 42.7%; }
.aml-polaroid--3 { left: 60.6%; top: 23.4%; width: 31.9%; height: 46.1%; }
.aml-polaroid--2 { left: 50.7%; top: 48.2%; width: 28%;   height: 41.5%; }
.aml-polaroid--1 { left: 66.3%; top: 58.9%; width: 29.7%; height: 43.4%; }
.aml-polaroid--5 .aml-polaroid__inner { transform: rotate(-39deg); }
.aml-polaroid--4 .aml-polaroid__inner { transform: rotate(-15deg); }
.aml-polaroid--3 .aml-polaroid__inner { transform: rotate(26deg); }
.aml-polaroid--2 .aml-polaroid__inner { transform: rotate(12deg); }
.aml-polaroid--1 .aml-polaroid__inner { transform: rotate(17deg); }

.aml-tile--polaroid .aml-tile__content { max-width: 50%; }

/* --- 2. Galerie : 3 rangées qui défilent au scroll ------------------------------------- */

.aml-tile--gallery {
	padding: 50px;
	display: flex;
	align-items: flex-end;
	background: var(--aml-ink);
}

.aml-gallery {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-top: 1px;
}

.aml-gallery__row {
	display: flex;
	gap: 1px;
	width: max-content;
	margin-left: 50%;
	translate: -50% 0; /* centré ; le défilement agit sur transform, sans conflit */
}

.aml-gallery__row img {
	display: block;
	flex: none;
	width: clamp(140px, 12.3vw, 177px);
	aspect-ratio: 177 / 157;
	object-fit: cover;
}

.aml-tile--gallery .aml-tile__content { max-width: 500px; }

/* --- 3. Instagram ------------------------------------------------------------------------ */

.aml-tile--instagram {
	background: var(--aml-ink);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 30px 30px 40px 50px;
	color: var(--aml-white);
}

.aml-tile--instagram .aml-tile__shade {
	background: linear-gradient(rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
}

/* Anthony est à droite de la photo (backstage workshop 2025) */
.aml-tile--instagram .aml-tile__bg img { object-position: 78% center; }

.aml-tile__icon-insta {
	position: relative;
	z-index: 2;
	width: 28px;
	height: 28px;
	background: var(--aml-i-instagram) no-repeat center / contain;
}

.aml-tile--instagram .aml-about__more {
	position: relative;
	z-index: 2;
	margin-top: 0;
	border-bottom: 0; /* variante « no underline » de la démo */
}

/* Lien étendu à toute la tuile */
.aml-tile--instagram .aml-about__more::before {
	content: '';
	position: absolute;
	inset: -2000px;
}

.aml-tile--instagram { isolation: isolate; }

/* --- 4. Déclenchement : cadre de visée qui fait la mise au point ------------------------ */

.aml-tile--shot {
	display: flex;
	align-items: flex-end;
	padding: 40px;
	background: var(--aml-ink);
}

.aml-tile--shot .aml-tile__bg { transform-origin: center; }

.aml-viewfinder {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 15%;
	width: 37.7%;
	aspect-ratio: 1;
	margin-left: -18.85%;
	background: var(--aml-i-viewfinder) no-repeat center / contain;
}

/* --- 5. WPPI ------------------------------------------------------------------------------ */

.aml-tile--award {
	background: #e7e7e7;
	padding: 40px 20px 40px 34px;
}

.aml-tile--award .aml-bento__num { font-size: clamp(48px, 4.6vw, 66px); }
.aml-tile--award .aml-bento__label { max-width: 160px; }

/* --- 6. Précision : molette qui tourne au scroll ---------------------------------------- */

.aml-tile--precision {
	background: var(--aml-ink);
	padding: 40px 20px 0;
}

.aml-tile--precision .aml-bento__label {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
}

.aml-wheel {
	position: absolute;
	left: 11.5%;
	top: 61.8%;
	width: 77.5%;
	aspect-ratio: 162 / 160;
}

.aml-wheel img {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- 7. Messagerie : conversation qui s'écrit à l'arrivée à l'écran --------------------- */

.aml-tile--chat {
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

.aml-chat__time {
	margin: 8px 0 2px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.3);
}

.aml-chat__msg {
	max-width: 78%;
	margin: 0;
	padding: 11px 16px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 22px;
}

.aml-chat__msg--them {
	align-self: flex-start;
	margin-left: 20px;
	background: #f4f4f4;
	color: var(--aml-ink);
}

.aml-chat__msg--me {
	align-self: flex-end;
	background: rgb(81, 214, 44);
	color: var(--aml-white);
}

.aml-chat__msg--multi { border-radius: 22px; }

/* Indicateur « en train d'écrire » : 3 points qui rebondissent */
.aml-chat__typing {
	align-self: flex-start;
	display: flex;
	gap: 4px;
	padding: 18px 16px;
	border-radius: 50px;
	background: #f4f4f4;
}

.aml-chat__typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(17, 17, 18, 0.35);
	animation: aml-typing-dot 1s ease-in-out infinite;
}

.aml-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.aml-chat__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes aml-typing-dot {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/*
 * Séquence (déclenchée par la classe is-inview, data-anim-class) : chaque élément porte
 * son délai dans --d. L'indicateur de frappe apparaît puis s'efface juste avant la
 * réponse du client. Sans animations (JS absent ou animations réduites) : tout est visible.
 */
html.bp-anim .aml-chat [data-chat] {
	opacity: 0;
}

html.bp-anim .aml-chat.is-inview [data-chat] {
	animation: aml-chat-in 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) var(--d, 0s) both;
}

html.bp-anim .aml-chat.is-inview [data-chat="typing"] {
	animation: aml-chat-typing 1.4s ease var(--d, 0s) both;
}

html:not(.bp-anim) .aml-chat [data-chat="typing"] {
	display: none;
}

@keyframes aml-chat-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* L'indicateur et la réponse finale partagent la même cellule : la réponse apparaît à
 * l'endroit exact où l'indicateur s'efface, sans décaler la conversation. */
.aml-chat__last {
	display: grid;
	justify-items: start;
	margin-left: 20px;
}

.aml-chat__last > * {
	grid-area: 1 / 1;
}

.aml-chat__last .aml-chat__msg--them { margin-left: 0; }

@keyframes aml-chat-typing {
	0%   { opacity: 0; transform: translateX(20px); }
	15%  { opacity: 1; transform: none; }
	85%  { opacity: 1; transform: none; }
	100% { opacity: 0; transform: none; }
}

/* --- 8. Appareil photo ------------------------------------------------------------------ */

.aml-tile--camera .aml-tile__bg img { object-position: 30% center; }

/* --- 9. Avis Google ---------------------------------------------------------------------- */

.aml-tile--reviews {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 50px;
}

.aml-tile--reviews .aml-bento__stat {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.aml-tile--reviews .aml-bento__num { font-size: clamp(48px, 4.6vw, 66px); }
.aml-tile--reviews .aml-bento__label { margin: 0; }

.aml-bento__faces {
	display: flex;
	flex: none;
	position: relative;
}

.aml-bento__face {
	width: 46px;
	height: 46px;
	margin-left: -11px;
	border-radius: 50%;
	border: 2px solid var(--aml-white);
	object-fit: cover;
	background: #eee;
}

/* Fondu blanc sur le bord droit (dégradé de la démo) */
.aml-tile--reviews::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 30%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--aml-white) 90%);
	pointer-events: none;
}

/* --- 10. Délai de livraison ------------------------------------------------------------- */

.aml-tile--time {
	display: flex;
	align-items: center;
	padding: 40px;
	color: var(--aml-white);
}

.aml-tile--time .aml-tile__shade {
	background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.aml-bento__time-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: clamp(22px, 1.8vw, 26px);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 1.2;
}

.aml-bento__time-title::before {
	content: '';
	flex: none;
	width: 19px;
	height: 20px;
	background: var(--aml-i-clock) no-repeat center / contain;
}

.aml-tile--time .aml-bento__label {
	max-width: 200px;
	color: rgba(255, 255, 255, 0.75);
}

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

@media (max-width: 1199px) {
	.aml-bento__row1 { grid-template-columns: 1fr; height: auto; }
	.aml-bento__row1 .aml-tile { min-height: calc(2 * var(--row)); }
	.aml-bento__row2 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
		grid-auto-rows: minmax(var(--row), auto);
	}
	.aml-tile--instagram { grid-column: 1; grid-row: span 2; }
	.aml-tile--shot      { grid-column: 2; grid-row: span 2; }
	.aml-bento__pair     { grid-column: 1 / -1; grid-row: auto; }
	.aml-tile--chat      { grid-column: 1; grid-row: span 2; }
	.aml-tile--camera    { grid-column: 2; grid-row: span 2; }
	.aml-tile--reviews   { grid-column: 1; grid-row: auto; }
	.aml-tile--time      { grid-column: 2; grid-row: auto; }
}

@media (max-width: 809px) {
	.aml-bento { --row: 200px; }
	.aml-bento__row2 { grid-template-columns: 1fr; }
	.aml-bento__row2 > * { grid-column: 1 !important; }
	.aml-tile--instagram,
	.aml-tile--shot,
	.aml-tile--camera { min-height: 420px; }
	.aml-tile--polaroid .aml-tile__content { max-width: 60%; }
	.aml-tile--chat { min-height: 440px; }
	.aml-tile--reviews { flex-wrap: wrap; padding: 32px; }
}