/**
 * Section « Portfolio » de l'accueil — bloc « Work » du template Captured, + un bouton
 * vers tous les reportages (demande d'Olivier : la démo n'en montre que 4).
 * Cotes relevées sur la démo à 1440 px : fond #f1f1f1, marges 0 / 36 / 160, en-tête en
 * 3 colonnes (647 · 293 · 260), cartes 2 × 2 de 647 × 581 (photo 647 × 459 à coins de
 * 20 px), gouttières de 60 px.
 */

.aml-work {
	position: relative;
	background: var(--aml-mist);
	color: var(--aml-ink);
	padding: 0 clamp(16px, 2.5vw, 36px) clamp(96px, 11.1vw, 160px);
}

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

/* Barre de titre de section (« Portfolio » … compteur), commune avec Témoignages */
.aml-section-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	height: 40px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 22px;
}

.aml-section-bar p,
.aml-section-bar h2 {
	margin: 0;
	font: inherit;
}

/* --- En-tête ---------------------------------------------------------------------------- */

.aml-work__head {
	display: grid;
	grid-template-columns: 647fr 293fr 260fr;
	column-gap: clamp(24px, 4vw, 56px);
	align-items: start;
	margin: clamp(80px, 8.3vw, 120px) 0 80px;
}

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

.aml-work__intro {
	margin: 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);
}

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

.aml-work__style strong {
	display: block;
	font-weight: 500;
	color: var(--aml-ink);
}

/* --- Cartes ---------------------------------------------------------------------------- */

.aml-work__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 2.6vw, 40px) clamp(20px, 2.2vw, 32px);
}

/* Survol (démo, 0,3 s, courbe 0.82, 0.11, 0.37, 0.82) : photo zoomée à 104 % et tournée
 * de 1°, repères d'angle resserrés à 98 %. Toute la carte mène au reportage. */
.aml-work-card {
	--ease: cubic-bezier(0.82, 0.11, 0.37, 0.82);
	position: relative;
}

.aml-work-card__media {
	position: relative;
	aspect-ratio: 647 / 459;
	border-radius: 20px;
	overflow: hidden;
	background: var(--aml-line);
}

.aml-work-card__zoom {
	position: absolute;
	inset: 0;
}

.aml-work-card__zoom img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s var(--ease);
}

.aml-work-card:hover .aml-work-card__zoom img,
.aml-work-card:focus-within .aml-work-card__zoom img {
	transform: scale(1.04) rotate(1deg);
}

.aml-work-card .aml-corners {
	inset: 20px;
	transition: transform 0.3s var(--ease);
}

.aml-work-card:hover .aml-corners,
.aml-work-card:focus-within .aml-corners {
	transform: scale(0.98);
}

.aml-work-card__info {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 20px;
	margin-top: 50px;
}

.aml-work-card__title {
	margin: 0;
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	letter-spacing: -0.07em;
	line-height: 1;
}

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

.aml-work-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.aml-work-card__title a:focus-visible::after {
	outline: 2px solid var(--aml-ink);
	outline-offset: 6px;
	border-radius: 20px;
}

.aml-work-card__cat {
	margin: 12px 0 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 20px;
	color: rgba(17, 17, 18, 0.6);
}

.aml-work-card__date {
	margin: 0;
	font-size: clamp(22px, 2.1vw, 30px);
	font-weight: 600;
	letter-spacing: -0.07em;
	line-height: 1;
	color: rgba(17, 17, 18, 0.3);
}

/* --- Bouton « tous les reportages » ------------------------------------------------------ */

.aml-work__more {
	display: flex;
	justify-content: center;
	margin-top: 80px;
}

.aml-button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 30px;
	border-radius: 50px;
	background: var(--aml-ink);
	color: var(--aml-white);
	text-decoration: none;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 1;
	transition: background-color 0.3s ease;
}

.aml-button::after {
	content: '';
	width: 11px;
	height: 11px;
	background: var(--aml-i-arrow-white) no-repeat center / contain;
	transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.aml-button:hover,
.aml-button:focus-visible {
	background: #000;
}

.aml-button:hover::after,
.aml-button:focus-visible::after {
	transform: translateX(3px) rotate(45deg);
}

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

@media (max-width: 1199px) {
	.aml-work__head { grid-template-columns: 1fr 1fr; row-gap: 32px; }
	.aml-work__h2 { grid-column: 1 / -1; }
	.aml-work__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 809px) {
	.aml-work__head { grid-template-columns: 1fr; }
	.aml-work__grid { grid-template-columns: 1fr; }
	.aml-work-card__info { margin-top: 24px; }
}