/*
 * navbar/pilule-fixe — transposition de `.entete` et `.panneau` (maquette Astro ADJ).
 * Une pilule fixe, la meme au repos et au defilement ; sous 1080 px un bouton
 * « Menu » ouvre une carte laterale. Engagement 5 : aucun hexadecimal.
 * Le tiroir ne cree aucun contexte d'empilement de plus que la barre : la
 * carte est `position: fixed`, sans transform ni filtre sur un ancetre.
 */
.ivy-navbar--pilule-fixe {
	--ivy-page-gutter: clamp( 20px, 5vw, 64px );
	position: fixed;
	inset: 16px 0 auto;
	z-index: 40;
	pointer-events: none;
}

.ivy-navbar--pilule-fixe .ivy-navbar__stage { box-sizing: border-box; padding-inline: var( --ivy-page-gutter ); }

.ivy-navbar--pilule-fixe .ivy-navbar__bar {
	pointer-events: auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 1280px;
	max-inline-size: 100%;
	margin-inline: auto;
	padding: 6px 8px 6px 20px;
	border: 1px solid var( --ivy-line, currentcolor );
	border-radius: var( --ivy-radius-action, 999px );
	background: color-mix( in srgb, var( --ivy-surface, rgb( 255 255 255 ) ) 96%, transparent );
}

.ivy-navbar--pilule-fixe .ivy-navbar__logo { display: block; flex: none; }
.ivy-navbar--pilule-fixe .ivy-navbar__logo-image { display: block; width: auto; height: 54px; }

.ivy-navbar--pilule-fixe .ivy-navbar__menu { margin-inline: auto; }
.ivy-navbar--pilule-fixe .ivy-navbar__menu ul { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.ivy-navbar--pilule-fixe .ivy-navbar__menu li { margin: 0; font: inherit; }
.ivy-navbar--pilule-fixe .ivy-navbar__menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var( --ivy-menu-color, var( --ivy-accent, currentcolor ) );
	font-size: var( --ivy-font-body );
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
}
.ivy-navbar--pilule-fixe .ivy-navbar__menu a:hover,
.ivy-navbar--pilule-fixe .ivy-navbar__menu a[aria-current="page"] { color: var( --ivy-menu_current-color, var( --ivy-accent-text, currentcolor ) ); }

.ivy-navbar--pilule-fixe .ivy-navbar__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: var( --ivy-radius-action, 999px );
	background: var( --ivy-cta-background-color, var( --ivy-accent, currentcolor ) );
	color: var( --ivy-cta-color, var( --ivy-on-accent, rgb( 255 255 255 ) ) );
	font-size: var( --ivy-font-body );
	font-weight: 500;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 200ms ease, transform 200ms cubic-bezier( .22, 1, .36, 1 );
}
.ivy-navbar--pilule-fixe .ivy-navbar__cta:hover { background: var( --ivy-cta-background-color-hover, var( --ivy-line-accent, currentcolor ) ); }
.ivy-navbar--pilule-fixe .ivy-navbar__cta:active { transform: scale( .98 ); }
.ivy-navbar--pilule-fixe .ivy-navbar__cta:focus-visible { outline: 2px solid currentcolor; outline-offset: 3px; }

/* Le bouton « Menu » n'existe que sous 1080 px ; au-dessus, le conteneur du tiroir disparait de la mise en page. */
.ivy-navbar--pilule-fixe .ivy-navbar__collapse { display: contents; }
.ivy-navbar--pilule-fixe .ivy-navbar__burger { display: none; }
.ivy-navbar--pilule-fixe .ivy-navbar__drawer { display: none; }

@media ( max-width: 1079px ) {
	.ivy-navbar--pilule-fixe .ivy-navbar__menu,
	.ivy-navbar--pilule-fixe .ivy-navbar__bar > .ivy-navbar__cta { display: none; }
	.ivy-navbar--pilule-fixe .ivy-navbar__collapse { display: flex; margin-left: auto; }
	.ivy-navbar--pilule-fixe .ivy-navbar__burger {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 46px;
		padding: 10px 18px;
		border: 0;
		border-radius: var( --ivy-radius-action, 999px );
		background: var( --ivy-burger-background-color, var( --ivy-accent, currentcolor ) );
		color: var( --ivy-burger-color, var( --ivy-on-accent, rgb( 255 255 255 ) ) );
		font-family: inherit;
		font-size: var( --ivy-font-body );
		font-weight: 500;
		line-height: 1.6;
		cursor: pointer;
	}
	.ivy-navbar--pilule-fixe .ivy-navbar__burger-bars { display: grid; gap: 5px; }
	.ivy-navbar--pilule-fixe .ivy-navbar__burger-bars span { display: block; width: 16px; height: 1.5px; background: currentcolor; }

	.ivy-navbar--pilule-fixe .ivy-navbar__drawer {
		position: fixed;
		inset: 0;
		z-index: 60;
		display: block;
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0s linear 320ms;
	}
	.ivy-navbar--pilule-fixe .ivy-open .ivy-navbar__drawer { visibility: visible; pointer-events: auto; transition-delay: 0s; }

	.ivy-navbar--pilule-fixe .ivy-navbar__scrim {
		position: absolute;
		inset: 0;
		background: color-mix( in srgb, var( --ivy-veil, currentcolor ) 45%, transparent );
		opacity: 0;
		transition: opacity 280ms ease;
	}
	.ivy-navbar--pilule-fixe .ivy-open .ivy-navbar__scrim { opacity: 1; }

	.ivy-navbar--pilule-fixe .ivy-navbar__panel {
		position: absolute;
		inset: 10px 10px 10px auto;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 24px;
		width: min( 380px, calc( 100% - 40px ) );
		padding: 18px;
		overflow-y: auto;
		border-radius: var( --ivy-radius-surface, 24px );
		background: var( --ivy-surface, rgb( 255 255 255 ) );
		transform: translateX( 105% );
		transition: transform 320ms cubic-bezier( .22, 1, .36, 1 );
	}
	.ivy-navbar--pilule-fixe .ivy-open .ivy-navbar__panel { transform: none; }

	.ivy-navbar--pilule-fixe .ivy-navbar__panel-head { display: flex; align-items: center; justify-content: space-between; }
	.ivy-navbar--pilule-fixe .ivy-navbar__panel-logo { display: block; width: auto; height: 54px; }
	.ivy-navbar--pilule-fixe .ivy-navbar__close {
		display: grid;
		place-items: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var( --ivy-surface-soft, currentcolor );
		color: var( --ivy-accent, currentcolor );
		cursor: pointer;
	}
	.ivy-navbar--pilule-fixe .ivy-navbar__close svg,
	.ivy-navbar--pilule-fixe .ivy-navbar__panel-links svg { width: 20px; height: 20px; fill: none; stroke: currentcolor; stroke-width: 1.6; stroke-linecap: round; }

	.ivy-navbar--pilule-fixe .ivy-navbar__panel-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
	.ivy-navbar--pilule-fixe .ivy-navbar__panel-links li { margin: 0; }
	.ivy-navbar--pilule-fixe .ivy-navbar__panel-links a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		padding: 0 18px;
		border-radius: calc( var( --ivy-radius-surface, 24px ) * 2 / 3 );
		background: var( --ivy-panel_link-background-color, var( --ivy-surface-soft, currentcolor ) );
		color: var( --ivy-panel_link-color, var( --ivy-accent, currentcolor ) );
		font-size: var( --ivy-font-body );
		line-height: 1.6;
		text-decoration: none;
	}
	.ivy-navbar--pilule-fixe .ivy-navbar__panel-links a[aria-current="page"] { background: color-mix( in srgb, var( --ivy-surface-soft, currentcolor ) 90%, var( --ivy-support, currentcolor ) ); }

	.ivy-navbar--pilule-fixe .ivy-navbar__panel-foot { display: grid; gap: 10px; margin-top: auto; line-height: 1.6; }
	.ivy-navbar--pilule-fixe .ivy-navbar__panel-contact { color: var( --ivy-accent, currentcolor ); text-decoration: none; }
	.ivy-navbar--pilule-fixe .ivy-navbar__panel-foot .ivy-navbar__cta { margin-top: 8px; }
}

@media ( max-width: 960px ) {
	.ivy-navbar--pilule-fixe { inset: 10px 0 auto; }
	.ivy-navbar--pilule-fixe .ivy-navbar__stage { padding-inline: 12px; }
	.ivy-navbar--pilule-fixe .ivy-navbar__bar { padding: 5px 6px 5px 14px; }
	.ivy-navbar--pilule-fixe .ivy-navbar__logo-image { height: 46px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.ivy-navbar--pilule-fixe .ivy-navbar__panel,
	.ivy-navbar--pilule-fixe .ivy-navbar__scrim { transition-duration: .01ms; }
}