/*
======================================================================
Much Ado
Header
======================================================================
*/

.site-header{
	position:fixed;
	inset:0 0 auto;
	z-index:var(--z-header);
	width:100%;
	height:var(--header-height);
	background:transparent;
	transition:
		background var(--transition),
		box-shadow var(--transition),
		height var(--transition),
		backdrop-filter var(--transition);
}

.site-header.scrolled{
	background:rgba(0,0,0,.75);
	backdrop-filter:blur(12px);
	box-shadow:none;
}

.site-header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--space-32);
	height:100%;
}

.site-header__branding{
	display:flex;
	align-items:center;
	flex-shrink:0;
}

.site-header__logo{
	display:block;
	width:auto;
	height:70px !important;
}

.site-header__title{
	font-family:var(--font-heading);
	font-size:1.5rem;
	font-weight:700;
	letter-spacing:.04em;
}

.site-header__nav{
	display:flex;
	flex:1;
	justify-content:center;
}

.site-header__nav > .menu{
	display:flex;
	align-items:center;
	gap:var(--space-32);
	margin-bottom:0;
}

.site-header__nav .menu li{
	position:relative;
}

.site-header__nav a{
	display:block;
	padding:.5rem 0;
	font-family:var(--font-heading);
	font-size:.95rem;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--color-white);
	transition:color var(--transition);
}

.site-header.scrolled .site-header__nav a,
.site-header.scrolled .site-header__title{
	color:var(--color-white);
}

.site-header__nav .current-menu-item > a,
.site-header__nav a:hover,
.site-header.scrolled .current-menu-item > a,
.site-header.scrolled .site-header__nav a:hover{
	color:var(--color-crown);
	font-weight:700;
}

.site-header__nav .menu li.menu-mobile-only{
    display:none;
}

.site-header__actions{
	display:flex;
	align-items:center;
	gap:var(--space-16);
	flex-shrink:0;
}

.menu-toggle{
	display:none;
	width:48px;
	height:48px;
	padding:0;
	border:0;
	background:transparent;
	cursor:pointer;
}

.menu-toggle span{
	display:block;
	width:24px;
	height:2px;
	margin:5px auto;
	background:var(--color-white);
	transition:var(--transition);
}

.site-header.scrolled .menu-toggle span{
	background:var(--color-textdarker);
}

.admin-bar .site-header{
	top:32px;
}

/* =====================================================
   Dropdown
===================================================== */

.site-header__nav .sub-menu{
	position:absolute;
	top:100%;
	left:0;
	min-width:240px;
	padding:1rem 0;
	background:var(--color-black);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	opacity:0;
	visibility:hidden;
	transform:translateY(10px);
	transition:
		opacity var(--transition),
		transform var(--transition),
		visibility var(--transition);
}

.site-header__nav li:hover > .sub-menu,
.site-header__nav li:focus-within > .sub-menu{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

.site-header__nav .sub-menu li{
	width:100%;
}

.site-header__nav .sub-menu a{
	display:block;
	padding:.7rem 1.4rem;
	font-size:.9rem;
	font-weight:500;
	letter-spacing:0;
	text-transform:none;
	white-space:nowrap;
}

.site-header__nav .sub-menu a:hover{
	background:#333;
	color:var(--color-textdarker);
}

/* =====================================================
   Mobile
===================================================== */

@media (max-width:992px){

	.site-header.scrolled{
		backdrop-filter:none;
	}

	.menu-toggle{
		display:block;
		z-index:1002;
	}

	.site-header__actions .button{
		display:none;
	}

	.site-header__nav{
		position:fixed;
		inset:0;
		z-index:1001;

		display:flex;
		align-items:center;
		justify-content:center;

		background:rgba(0,0,0,.96);

		opacity:0;
		visibility:hidden;

		/*
		| Deuxième verrou, indépendant de la visibilité : même si une règle
		| future rétablissait « visible » sur un descendant, le panneau fermé
		| ne recevrait aucun clic.
		*/
		pointer-events:none;

		transform:translateY(-1rem);

		transition:
			opacity .3s,
			transform .3s,
			visibility .3s;
	}

	.site-header__nav.is-open{
		opacity:1;
		visibility:visible;
		pointer-events:auto;
		transform:none;
	}

	.site-header__nav > .menu{
		flex-direction:column;
		gap:0;
	}

    .site-header__nav > .menu li.menu-mobile-only{
        display:list-item;
    }

	.site-header__nav > .menu li{
		margin-bottom: 0;
	}

	.site-header__nav a{
		font-size:1.3rem;
		text-align:center;
	}

	.site-header__nav .sub-menu{
		position:static;
		display:block;
		min-width:0;
		margin:0;
		padding:0;

		background:none;
		box-shadow:none;

		opacity:1;

		/*
		| « inherit » et non « visible ».
		|
		| La visibilité s'hérite : en forçant « visible » ici, les liens du
		| sous-menu annulaient le « visibility:hidden » du menu fermé. Comme
		| ce menu est en position fixe sur tout l'écran et seulement rendu
		| transparent par opacity — qui ne désactive pas les clics —, ces
		| liens restaient actifs par-dessus toute la page.
		|
		| Symptôme : un clic n'importe où pouvait ouvrir « Ateliers » ou
		| « Stages » sans qu'aucun lien ne soit visible.
		*/
		visibility:inherit;

		transform:none;
		margin-bottom:.8rem;
	}

	.site-header__nav .sub-menu a{
		color:rgba(255,255,255,.75);
		padding: 0;
		margin: 0;
	}

	.site-header__nav a:hover{
		color:var(--color-crown);
	}

	.menu-toggle.is-active span:nth-child(1){
		transform:translateY(7px) rotate(45deg);
	}

	.menu-toggle.is-active span:nth-child(2){
		opacity:0;
	}

	.menu-toggle.is-active span:nth-child(3){
		transform:translateY(-7px) rotate(-45deg);
	}

    .site-header__actions .button{
        display:none;
    }
}