/* =========================================================
   Header

   Idea: the slanted strokes of the M in the logo become the shape of the
   navy Inscription tab. On desktop the tab overlaps the yellow strip at that
   angle; on phone and tablet the same tab sits flush right and holds both
   "Inscription" and the menu button. Everything else stays quiet.

   Phone + tablet (< 1100px): one bar, the navy tab, a drawer for the menu.
   Desktop (>= 1100px): yellow strip + white bar + the tab, tall.
   Motion: 150-280ms ease, only in answer to a user action or a scroll;
   all of it is off under prefers-reduced-motion.
   ========================================================= */

:root { --slant: 14px; }

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: #fff;
	border-bottom: 1px solid var(--line);
}
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 64px;
	padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.brand { display: block; flex: none; line-height: 0; border-radius: 4px; }
.brand img { width: clamp(130px, 42vw, 200px); height: auto; }

/* ---- the navy tab (phone + tablet): Inscription + menu button, flush right ---- */
.site-header__actions {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
	padding-left: var(--slant);
	padding-right: env(safe-area-inset-right);
	background: var(--navy);
	clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}

/* ---- Inscription (primary action). Hover: yellow fills from the bottom. ---- */
.cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 6px;
	background: var(--navy);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}
.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--yellow);
	transform: scaleY(0);
	transform-origin: bottom;
}
.cta:visited { color: #fff; }
.cta:hover, .cta:active { color: var(--navy); }
.cta:hover::before, .cta:active::before { transform: scaleY(1); }
.cta:focus-visible { outline: 3px solid var(--yellow); outline-offset: -5px; }
@media (prefers-reduced-motion: no-preference) {
	.cta { transition: color .2s ease; }
	.cta::before { transition: transform .22s ease; }
}

/* inside the tab: no own background, square, full height */
.cta--header {
	min-height: 0;
	padding: 0 14px;
	border-radius: 0;
	background: transparent;
}

/* ---- Menu / close buttons ---- */
.menu-toggle, .menu-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--navy);
	cursor: pointer;
}
.menu-toggle__label { display: none; font-size: 15px; font-weight: 600; line-height: 1; }
.menu-close:hover, .menu-close:active { background: var(--wash); }
.menu-close:focus-visible, .brand:focus-visible, .nav-link:focus-visible,
.drawer-contact:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* the menu button inside the tab: white on navy, divided from Inscription */
.site-header__actions .menu-toggle {
	height: auto;
	min-width: 52px;
	border-radius: 0;
	border-left: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
}
.site-header__actions .menu-toggle:hover, .site-header__actions .menu-toggle:active { background: rgba(255, 255, 255, .14); }
.site-header__actions .menu-toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: -5px; }
@media (prefers-reduced-motion: no-preference) {
	.menu-toggle, .menu-close { transition: background-color .15s ease; }
}

/* ---- Drawer ---- */
.site-menu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2;                       /* above .menu-backdrop (1), inside the header's layer */
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	visibility: hidden;
	transform: translateX(100%);
}
html.menu-open .site-menu { visibility: visible; transform: none; }
html.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
	.site-menu { transition: transform .28s ease, visibility 0s linear .28s; }
	html.menu-open .site-menu { transition-delay: 0s; }
}

.site-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	height: 64px;
	padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
	border-top: 4px solid var(--yellow);
	border-bottom: 1px solid var(--line);
}

.menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: rgba(0, 41, 85, .55);   /* 40-60% scrim keeps the drawer readable */
}
.menu-backdrop[hidden] { display: none; }

/* main list in the drawer */
.nav-list { margin: 0; padding: 0; list-style: none; }
.nav-primary .nav-item { border-bottom: 1px solid var(--line); }

.nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 56px;
	padding: 0 var(--gutter);
	border: 0;
	background: none;
	color: var(--text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}
.nav-link:visited { color: var(--text); }
.nav-link:active { background: var(--wash); }
.nav-link[aria-current="page"], .is-section > .nav-link {
	color: var(--navy);
	background: var(--wash);
	box-shadow: inset 4px 0 0 var(--navy);
}

.chev { flex: none; transition: transform .2s ease; }
.is-open > .sub-toggle .chev { transform: rotate(180deg); }

/* sub list = accordion in the drawer */
.sub { display: none; margin: 0; padding: 0 0 8px; list-style: none; background: var(--wash); }
.is-open > .sub { display: block; }
.nav-link--sub {
	min-height: 48px;
	padding-left: calc(var(--gutter) + 16px);
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
}

/* useful links in the drawer */
.nav-top { padding: 12px 0 0; }
.nav-top .nav-link {
	min-height: 48px;
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	color: var(--navy);
}
.nav-top .nav-link:visited { color: var(--navy); }

.drawer-contact {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 var(--gutter);
	color: var(--navy);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}
.drawer-contact:visited { color: var(--navy); }
.drawer-contact:active { background: var(--wash); }
.drawer-contact svg { flex: none; }

.cta--drawer {
	position: sticky;
	bottom: 0;
	margin: auto var(--gutter) max(16px, env(safe-area-inset-bottom));
	min-height: 52px;
	font-size: 15px;
}

/* very small phones (320px): tighten so logo and tab fit one row */
@media (max-width: 359.98px) {
	:root { --gutter: 12px; --slant: 12px; }
	.site-header__inner { gap: 8px; }
	.brand img { width: 120px; }
	.cta--header { padding: 0 11px; font-size: 13px; }
	.site-header__actions .menu-toggle { min-width: 46px; }
}

/* ---- tablet ---- */
@media (min-width: 600px) {
	:root { --slant: 16px; }
	.site-header__inner { height: 72px; gap: 20px; }
	.site-menu__head { height: 72px; }
	.site-menu { width: 420px; }
	.cta--header { padding: 0 22px; font-size: 15px; }
	.site-header__actions .menu-toggle { padding: 0 16px; }
	.menu-toggle__label { display: block; }
}

/* no JavaScript: the menu shows in the page */
.no-js .menu-toggle, .no-js .menu-close, .no-js .menu-backdrop { display: none; }
@media (max-width: 1099.98px) {
	.no-js .site-header { position: static; }
	.no-js .site-header__inner { flex-wrap: wrap; height: auto; padding-block: 12px; }
	.no-js .site-menu { position: static; visibility: visible; transform: none; width: 100%; height: auto; overflow: visible; }
	.no-js .site-menu__head { display: none; }
	.no-js .sub { display: block; }
}

/* =========================================================
   Desktop: yellow strip, white bar, the tall slanted tab.
   The header is fixed; an in-flow wrapper keeps its room, so the
   page never jumps. Scrolling folds the strip away (.is-scrolled);
   the Inscription text stays centred in the tab throughout.
   ========================================================= */
@media (min-width: 1100px) {
	:root { --slant: 20px; }
	.site-header.is-scrolled { --slant: 13px; }   /* same angle at the shorter height */

	.site-header,
	body.admin-bar .site-header {
		position: relative;
		top: auto;
		height: calc(var(--top-h) + var(--main-h) + 1px);
		background: none;
		border-bottom: 0;
	}

	.site-header__inner {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: var(--z-header);
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto var(--main-h);
		gap: 0;
		height: auto;
		padding: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
	}
	body.admin-bar .site-header__inner { top: var(--wp-admin--admin-bar--height, 32px); }

	/* the yellow strip runs under the tab, so the slanted edge cuts into it */
	.site-header__inner::before {
		content: "";
		grid-column: 1 / -1;
		grid-row: 1;
		align-self: stretch;   /* the bar's align-items: center would collapse it to 0 height */
		background: var(--yellow);
	}

	.site-header__actions, .site-menu { display: contents; }
	.site-header__actions { margin: 0; padding: 0; background: none; clip-path: none; }
	.site-menu { visibility: visible; transform: none; }   /* drop the drawer's closed state */
	html.menu-open { overflow: visible; }
	.menu-toggle, .site-menu__head, .cta--drawer, .drawer-contact, .menu-backdrop { display: none; }

	.brand { grid-column: 1; grid-row: 2; align-self: center; margin-left: var(--gutter); }
	.brand img { width: 220px; }

	/* strip: useful links, right aligned, ending before the slanted edge */
	.nav-top {
		grid-column: 1 / 3;
		grid-row: 1;
		display: flex;
		justify-content: flex-end;
		height: var(--top-h);
		padding: 0 18px 0 0;
		overflow: hidden;
		background: none;
	}
	.is-scrolled .nav-top { height: 0; visibility: hidden; }
	@media (prefers-reduced-motion: no-preference) {
		.nav-top { transition: height .22s ease; }
		.is-scrolled .nav-top { transition: height .22s ease, visibility 0s linear .22s; }
	}
	.nav-top .nav-list { display: flex; align-items: center; }
	.nav-top .nav-item { position: relative; }
	.nav-top .nav-item + .nav-item::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1px;
		height: 14px;
		transform: translateY(-50%);
		background: var(--navy);
		opacity: .4;
	}
	.nav-top .nav-link {
		width: auto;
		min-height: 0;
		height: var(--top-h);
		padding: 0 14px;
		font-size: 14px;
		font-weight: 500;
		text-transform: none;
		color: var(--navy);
		background: none;
		box-shadow: none;
	}
	.nav-top .nav-link:hover { text-decoration: underline; text-underline-offset: 3px; }
	.nav-top .nav-link:focus-visible { outline-offset: -3px; }

	/* white bar: main menu */
	.nav-primary { grid-column: 2; grid-row: 2; justify-self: end; }
	.nav-primary .nav-list { display: flex; height: var(--main-h); }
	.nav-primary .nav-item { position: relative; display: flex; border-bottom: 0; }

	.nav-primary > .nav-list > .nav-item > .nav-link {
		--pad: clamp(10px, 1.3vw, 22px);
		position: relative;
		width: auto;
		min-height: 0;
		height: var(--main-h);
		padding: 0 var(--pad);
		justify-content: flex-start;
		font-size: 15px;
		background: none;
		box-shadow: none;
	}
	.nav-primary > .nav-list > .nav-item > .nav-link::after {
		content: "";
		position: absolute;
		left: var(--pad);
		right: var(--pad);
		bottom: 0;
		height: 3px;
		background: var(--navy);
		transform: scaleX(0);
		transform-origin: left;
	}
	@media (prefers-reduced-motion: no-preference) {
		.nav-primary > .nav-list > .nav-item > .nav-link { transition: color .15s ease; }
		.nav-primary > .nav-list > .nav-item > .nav-link::after { transition: transform .2s ease; }
	}
	.nav-primary > .nav-list > .nav-item > .nav-link:hover,
	.nav-primary > .nav-list > .nav-item.is-open > .nav-link,
	.nav-primary > .nav-list > .nav-item > .nav-link[aria-current="page"],
	.nav-primary > .nav-list > .is-section > .nav-link { color: var(--navy); }
	.nav-primary > .nav-list > .nav-item > .nav-link:hover::after,
	.nav-primary > .nav-list > .nav-item.is-open > .nav-link::after,
	.nav-primary > .nav-list > .nav-item > .nav-link[aria-current="page"]::after,
	.nav-primary > .nav-list > .is-section > .nav-link::after { transform: scaleX(1); }
	.nav-primary .nav-link:focus-visible { outline-offset: -4px; }

	/* dropdown */
	.sub {
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
		min-width: 290px;
		padding: 0;
		background: #fff;
		border: 1px solid var(--line);
		border-top: 3px solid var(--navy);
		visibility: hidden;
		opacity: 0;
		transform: translateY(4px);
	}
	@media (prefers-reduced-motion: no-preference) {
		.sub { transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
		.is-open > .sub, .has-sub:has(:focus-visible) > .sub { transition-delay: 0s; }
	}
	.is-open > .sub,
	.has-sub:has(:focus-visible) > .sub { visibility: visible; opacity: 1; transform: none; }
	@media (hover: hover) {
		.has-sub:hover > .sub { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
		.has-sub:hover > .sub-toggle { color: var(--navy); }
		.has-sub:hover > .sub-toggle::after { transform: scaleX(1); }
	}
	.sub .nav-item { display: block; }
	.sub .nav-item + .nav-item { border-top: 1px solid var(--line); }
	.nav-link--sub { min-height: 50px; padding: 12px 22px; font-size: 15px; }
	.nav-link--sub:hover { background: var(--wash); color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); }
	.nav-link--sub:focus-visible { outline-offset: -3px; }
	.sub .nav-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--navy); }
	.chev { margin-left: 2px; }
	.is-open > .sub-toggle .chev, .has-sub:hover > .sub-toggle .chev { transform: rotate(180deg); }

	/* Inscription: the tall slanted tab, flush right, text centred in the whole tab */
	.cta--header {
		grid-column: 3;
		grid-row: 1 / 3;
		align-self: stretch;
		padding: 0 clamp(26px, 3.4vw, 52px) 0 calc(var(--slant) + clamp(18px, 2.4vw, 34px));
		background: var(--navy);
		clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
		font-size: 15px;
	}
	@media (prefers-reduced-motion: no-preference) {
		.cta--header { transition: color .2s ease, clip-path .22s ease; }
	}
}

/* The main menu has a long item (Admissions Internationales): keep each item on one line, a little tighter on narrow desktops. */
@media (min-width: 1100px) {
	.nav-primary > .nav-list > .nav-item > .nav-link { white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1399px) {
	.nav-primary > .nav-list > .nav-item > .nav-link { --pad: clamp(7px, .8vw, 11px); font-size: 13px; }
	.brand img, .brand svg { max-width: 168px; }
}