/**
 * Menu plein écran — cadre « Menu » du Figma Captured (1920 × 1080).
 * Ouverture / fermeture et animations : bp-menu.js (attributs data-menu*).
 */

.aml-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--aml-ink);
	color: var(--aml-white);
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}

.aml-menu.is-open {
	visibility: visible;
	pointer-events: auto;
}

/* Barre du haut : mêmes styles que celle de l'en-tête (aml-header.css), placée dans le menu */
.aml-menu .aml-bar {
	position: absolute;
	top: clamp(20px, 3.1vw, 60px);
}

.aml-menu__close {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	white-space: nowrap;
}

/* Croix : deux traits de 2 px (Figma « Group 7 », 19 × 19) */
.aml-menu__close::before {
	content: '';
	width: 19px;
	height: 19px;
	background:
		linear-gradient(45deg, transparent calc(50% - 1px), var(--aml-white) calc(50% - 1px), var(--aml-white) calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(-45deg, transparent calc(50% - 1px), var(--aml-white) calc(50% - 1px), var(--aml-white) calc(50% + 1px), transparent calc(50% + 1px));
}

/* Photos : gauche 251,197 · 494 × 282 ; droite 1422,197 · 463 × 693 */
.aml-menu__photo {
	position: absolute;
	top: 18.2%;
	overflow: hidden;
}

.aml-menu__photo--left  { left: 13.1%; width: 25.7%; height: 26.1%; }
.aml-menu__photo--right { left: 74.1%; width: 21.6%; height: 64.2%; }

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

/* Liens : Inter Semi Bold 36 px, interlettrage −6 %, pas de 58 px */
.aml-menu__nav {
	position: absolute;
	left: 50%;
	top: 18.2%;
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.35vw, 26px);
}

.aml-menu__item {
	overflow: hidden; /* masque : le libellé monte depuis le bas */
	line-height: 0.9;
	padding-bottom: 0.08em;
}

.aml-menu__link {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	font-size: clamp(28px, 1.9vw, 36px);
	font-weight: 600;
	letter-spacing: -0.06em;
}

/* Survol : effet .aml-roll (aml-header.css), comme les liens du menu de la démo */

/* Nom en très grand, presque ton sur ton (#101010 sur #111112) */
.aml-menu__name {
	position: absolute;
	left: 4%;
	bottom: 3vw;
	margin: 0;
	font-size: 10.4vw;
	font-weight: 600;
	letter-spacing: -0.06em;
	line-height: 0.8;
	text-transform: uppercase;
	color: var(--aml-black);
	pointer-events: none;
	overflow: hidden;
	padding-top: 0.05em;
}

.aml-menu__copy {
	position: absolute;
	left: 74.1%;
	bottom: clamp(24px, 4.6vw, 89px);
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.04em;
	opacity: 0.6;
}

/* Libellé du nom : bloc en ligne pour pouvoir le faire monter depuis son masque */
.aml-menu__name-inner {
	display: inline-block;
}

/* Page verrouillée pendant l'ouverture */
html.aml-menu-open,
html.aml-menu-open body {
	overflow: hidden;
}

@media (max-width: 1199px) {
	.aml-menu__photo--left { display: none; }
	.aml-menu__nav { left: 8%; }
	.aml-menu__copy { left: 8%; }
}

@media (max-width: 809px) {
	.aml-menu__photo { display: none; }

	/* La croix est plus près du coin que le logo (elle n'a pas sa marge interne de SVG) :
	   on lui donne trois fois l'écart, soit 15 px de plus que l'équerre. */
	.aml-menu__close { margin-right: 10px; }
	/* Liens centrés et calés dans la hauteur (un rien sous le centre optique) */
	.aml-menu__nav {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -46%);
		align-items: center;
		text-align: center;
		gap: 18px;
	}
	.aml-menu__link { font-size: 34px; }
	.aml-menu__copy { left: 16px; bottom: 24px; }
	.aml-menu__name { font-size: 16vw; left: 16px; bottom: 56px; }
}