/**
 * En-tête du site (modèle Bricks « En-tête », condition : tout le site).
 * Barre du haut posée sur la première section de la page (position absolue, texte
 * blanc), plus les éléments communs au hero et au menu : repères d'angle, texte
 * réservé aux lecteurs d'écran. Le menu plein écran a sa feuille : aml-menu.css.
 */

/* Texte réservé aux lecteurs d'écran */
.aml-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.aml-muted {
	opacity: 0.6;
}

/* --- Barre du haut (Figma : 61,60 · colonnes à 498, 960, 1422 sur 1920) --------------- */

.aml-bar {
	position: absolute;
	top: clamp(20px, 3.1vw, 60px);
	left: clamp(16px, 3.2vw, 61px);
	right: clamp(16px, 3.2vw, 61px);
	display: grid;
	grid-template-columns: repeat(4, 1fr) auto;
	align-items: start;
	z-index: 50;
	color: var(--aml-white);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 22px;
}

/* Décalage sous la barre d'administration WordPress quand on est connecté */
.admin-bar #brx-header .aml-bar {
	top: calc(clamp(20px, 3.1vw, 60px) + 32px);
}

.aml-bar p {
	margin: 0;
}

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

.aml-bar a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aml-bar__logo {
	display: block;
	width: clamp(190px, 13vw, 250px);
	height: auto;
	margin-top: -0.35vw; /* le SVG a de la marge interne : aligne le texte du logo sur la barre */
}

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

.aml-bar__burger {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	width: 30px;
	padding-top: 7px;
	cursor: pointer;
}

.aml-bar__burger::before,
.aml-bar__burger::after {
	content: '';
	display: block;
	height: 2px;
	background: currentColor;
}

.aml-bar__burger::before { width: 30px; }
.aml-bar__burger::after  { width: 22px; }

/* --- Repères d'angle (cadre de visée), 13 × 13 px ------------------------------------- */

.aml-corners {
	position: absolute;
	inset: clamp(16px, 1.9vw, 36px);
	pointer-events: none;
}

.aml-corner {
	position: absolute;
	width: 13px;
	height: 13px;
	border: 0 solid rgba(255, 255, 255, 0.9);
}

.aml-corner--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.aml-corner--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.aml-corner--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.aml-corner--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

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

@media (max-width: 1199px) {
	.aml-bar { grid-template-columns: 1fr 1fr 1fr auto; }
	.aml-bar__contact { display: none; }
}

@media (max-width: 809px) {
	.aml-bar { grid-template-columns: 1fr auto; }

	/* Sur mobile, la barre et les repères d'angle tombent tous deux à 16 px du bord :
	   le logo et le bouton de menu frôlaient les équerres. 5 px de plus vers l'intérieur. */
	.aml-bar {
		left: calc(clamp(16px, 3.2vw, 61px) + 5px);
		right: calc(clamp(16px, 3.2vw, 61px) + 5px);
	}

	.aml-bar__logo { width: 170px; margin-top: -4px; }
	.aml-bar__role,
	.aml-bar__social { display: none; }
}

@media (max-width: 782px) {
	.admin-bar #brx-header .aml-bar { top: calc(20px + 46px); }
}

/* --- Effets de survol des liens (repris de la démo Captured) ---------------------------
 * .aml-roll : le texte descend et sort, sa copie arrive du haut en fondu (liens du menu
 *             de la démo, ressort de 0,2 s au léger rebond).
 *             Balisage : <a class="aml-roll"><span data-text="Libellé">Libellé</span></a>
 * .aml-arrow : la flèche descend et sort, une seconde flèche arrive du haut (lien
 *             Instagram de la démo, ressort vif 369 / 29 / 0,7).
 */

.aml-roll {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	text-decoration: none !important;
}

.aml-roll > span {
	display: block;
	position: relative;
	transition: transform 0.32s cubic-bezier(0.3, 1.2, 0.5, 1);
}

.aml-roll > span::before {
	content: attr(data-text);
	content: attr(data-text) / ''; /* copie décorative : non lue par les lecteurs d'écran */
	position: absolute;
	left: 0;
	bottom: 100%;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.aml-roll:hover > span,
.aml-roll:focus-visible > span {
	transform: translateY(100%);
}

.aml-roll:hover > span::before,
.aml-roll:focus-visible > span::before {
	opacity: 1;
}

.aml-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none !important;
}

.aml-arrow {
	position: relative;
	flex: none;
	width: 15px;
	height: 15px;
	overflow: hidden;
}

.aml-arrow::before,
.aml-arrow::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--aml-i-arrow-white) no-repeat center / 8px 8px;
	transition: transform 0.38s cubic-bezier(0.25, 0.9, 0.3, 1);
}

.aml-arrow::after {
	transform: translateY(-100%);
}

.aml-arrow-link:hover .aml-arrow::before,
.aml-arrow-link:focus-visible .aml-arrow::before {
	transform: translateY(100%);
}

.aml-arrow-link:hover .aml-arrow::after,
.aml-arrow-link:focus-visible .aml-arrow::after {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.aml-roll > span,
	.aml-roll > span::before,
	.aml-arrow::before,
	.aml-arrow::after {
		transition: none;
	}
}

/* --- Curseur « viseur » (bp-cursor.js) --------------------------------------------------
 * Rond blanc translucide et croix fine, mêmes valeurs que le rond du hero (34 %, trait
 * de 2 px). Un liseré très léger le garde visible sur fond blanc.
 */

.aml-cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1200;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.34);
	box-shadow: 0 0 0 1px rgba(17, 17, 18, 0.06);
	pointer-events: none;
	opacity: 0;
	scale: 0.3;
	transition: opacity 0.25s ease, scale 0.4s cubic-bezier(0.34, 1.35, 0.64, 1);
}

.aml-cursor.is-visible {
	opacity: 1;
	scale: 1;
}

.aml-cursor::before,
.aml-cursor::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 29%;
	height: 2px;
	border-radius: 2px;
	background: var(--aml-white);
	transform: translate(-50%, -50%);
}

.aml-cursor::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

html.aml-has-cursor [data-cursor="shutter"],
html.aml-has-cursor [data-cursor="shutter"] * {
	cursor: none;
}