/**
 * Barre de navigation du micro-site.
 *
 * Les couleurs de la barre viennent de l'habillage choisi par l'artiste ; seul
 * le menu plein écran a les siennes, portées par --nav-overlay-bg et
 * --nav-overlay-ink, posées en ligne sur l'en-tête.
 */

 /* La barre est posée par-dessus la page, sans fond : l'image de l'en-tête
   passe derrière elle. Elle ne prend donc aucune hauteur, et l'en-tête
   commence bien en haut de l'écran. */
.aap-nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: none;
	border: 0;
	font-family: var(--display);
	transition: background-color .2s ease, border-color .2s ease;
}

.aap-nav.is-fixed { position: fixed; }

/* Une fois l'en-tête dépassé, la barre fixe reprend un fond : sans lui, les
   liens se perdraient dans le contenu qui défile dessous. */
.aap-nav.is-fixed.is-scrolled {
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	border-bottom: 1px solid var(--rule);
	backdrop-filter: blur(10px);
}

.aap-nav__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: .7rem clamp(1.15rem, 5vw, 2.5rem);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.aap-nav__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--nav-ink, var(--text));
	min-width: 0;
}

.aap-nav__logo-text {
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: var(--display-tracking, -0.02em);
	text-transform: var(--display-transform, none);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aap-nav__logo-image {
	display: block;
	height: 2.2rem;
	width: auto;
}

.aap-nav__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.4rem;
	margin-left: auto;
}

.aap-nav__menu a {
	color: var(--nav-ink, var(--muted));
	text-decoration: none;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: color .18s ease;
}

.aap-nav__menu a:hover,
.aap-nav__menu a:focus-visible { color: var(--aap-accent); }

/* ---------- dispositions ---------- */

.aap-nav--logo-right .aap-nav__inner { flex-direction: row-reverse; }
.aap-nav--logo-right .aap-nav__menu { margin-left: 0; margin-right: auto; }

.aap-nav--logo-center .aap-nav__inner {
	flex-direction: column;
	gap: .7rem;
	position: relative;
}

.aap-nav--logo-center .aap-nav__menu {
	margin-left: 0;
	justify-content: center;
}

/* Le bouton reste en haut à droite, quelle que soit la disposition. */
.aap-nav--logo-center .aap-nav__burger {
	position: absolute;
	top: 0;
	right: clamp(1.15rem, 5vw, 2.5rem);
}

/* ---------- bouton ---------- */

/* Le pictogramme seul : ni cercle, ni fond. Sa couleur se règle dans le studio
   et vaut pour les deux états, ouvert comme fermé. */
.aap-nav__burger {
	display: none;
	color: var(--nav-burger-ink, var(--nav-ink, var(--text)));
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	align-items: center;
}

.aap-nav__burger-bar {
	display: block;
	width: 1.35rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

/* ---------- fermeture du menu ---------- */

/* Sans elle, un menu ouvert ne se referme qu'au clavier ou en choisissant une
   entrée : la croix est posée dans le menu même, qui recouvre la barre. */
.aap-nav__close {
	position: absolute;
	top: .7rem;
	right: clamp(1.15rem, 5vw, 2.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--nav-burger-ink, var(--nav-overlay-ink, #ffffff));
}

.aap-nav__close-bar {
	position: absolute;
	width: 1.35rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.aap-nav__close-bar:first-child { transform: rotate(45deg); }
.aap-nav__close-bar:last-child { transform: rotate(-45deg); }

/* ---------- menu plein écran ---------- */

.aap-nav__overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 1.5rem;
	background: var(--nav-overlay-bg, #0e0f12);
	overflow-y: auto;
}

/* display:flex l'emporterait sur le display:none de l'attribut hidden. */
.aap-nav__overlay[hidden] { display: none; }

.aap-nav__overlay-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1rem, 4vh, 2rem);
	text-align: center;
}

.aap-nav__overlay-menu a {
	color: var(--nav-overlay-ink, #ffffff);
	text-decoration: none;
	font-size: clamp(1.6rem, 7vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	opacity: .92;
	transition: opacity .18s ease;
}

.aap-nav__overlay-menu a:hover,
.aap-nav__overlay-menu a:focus-visible { opacity: 1; text-decoration: underline; }

/* Le menu ouvert fige la page derrière lui. */
body.aap-nav-open { overflow: hidden; }

/* ---------- menu plein écran partout ---------- */

/* Seul le menu en ligne s'efface, à toutes les largeurs : le logo reste, et le
   bouton prend la place du menu. */
.aap-nav.is-floating .aap-nav__menu { display: none; }

.aap-nav.is-floating .aap-nav__burger { display: flex; }

/* ---------- écrans étroits ---------- */

@media (max-width: 48rem) {
	.aap-nav__menu { display: none; }
	.aap-nav__burger { display: flex; }

	.aap-nav--logo-center .aap-nav__inner { flex-direction: row; }
	.aap-nav--logo-center .aap-nav__burger { position: static; }
}

/* Une bande visée par le menu ne doit pas se glisser sous la barre collante.
   Cette feuille n'est chargée que là où la barre existe : la règle ne peut donc
   pas déborder sur une page qui n'en a pas. */
html { scroll-behavior: smooth; }

.aap-profile-page .aap-section { scroll-margin-top: 4.5rem; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}