/*
 * navbar/capsule — une pilule claire, fixe, IDENTIQUE au repos et au
 * defilement. Aucune bascule : la barre ne lit ni .ivy-stuck ni --ivy-stuck.
 * La page courante se dit par la couleur seule, sans graisse ni soulignement
 * qui changeraient la largeur du menu d'une page a l'autre.
 */

.ivy-navbar--capsule {
	--ivy-capsule-gouttiere: clamp( 20px, 4vw, 40px );
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	padding: 12px var( --ivy-capsule-gouttiere ) 0;
	pointer-events: none;
}

.ivy-navbar--capsule .ivy-navbar__stage {
	position: relative;
	width: min( 100%, 1200px );
	min-height: 64px;
	margin-inline: auto;
	border: 1px solid color-mix( in srgb, var( --ivy-ink, rgb( 17 17 17 ) ) 8%, transparent );
	border-radius: var( --ivy-radius-action, 999px );
	box-shadow: 0 12px 34px -22px color-mix( in srgb, var( --ivy-ink, rgb( 17 17 17 ) ) 50%, transparent );
	pointer-events: auto;
}

/*
 * LE VERRE EST SUR UN PSEUDO, JAMAIS SUR LA PILULE. Un `backdrop-filter` fait
 * de l'element le bloc contenant de ses descendants `position: fixed` : le
 * panneau mobile, fixe, se retrouvait enferme dans les 64 px de la pilule et
 * rendait 120 px de haut, menu tronque (constate par Alex, 25/09/2026). Pose
 * sur un pseudo, le flou ne contient plus rien.
 */
.ivy-navbar--capsule .ivy-navbar__stage::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: color-mix( in srgb, var( --ivy-surface, rgb( 255 255 255 ) ) 88%, transparent );
	-webkit-backdrop-filter: blur( 18px ) saturate( 150% );
	backdrop-filter: blur( 18px ) saturate( 150% );
}

@media ( prefers-reduced-transparency: reduce ) {
	.ivy-navbar--capsule .ivy-navbar__stage::before {
		background: var( --ivy-surface, rgb( 255 255 255 ) );
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

.ivy-navbar--capsule .ivy-navbar__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: inherit;
	padding: 0 10px 0 22px;
}

/* --- Logo --------------------------------------------------------------- */

.ivy-navbar--capsule .ivy-navbar__logo {
	display: flex;
	flex: none;
	align-items: center;
	min-height: 44px;
}

.ivy-navbar--capsule .ivy-navbar__logo-img {
	display: block;
	block-size: 40px;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	object-position: left center;
}

/* --- Menu --------------------------------------------------------------- */

.ivy-navbar--capsule .ivy-navbar__menu {
	margin-inline: auto;
	min-inline-size: 0;
	font-size: calc( var( --ivy-font-body ) * .94 );
	font-weight: 500;
}

.ivy-navbar--capsule .ivy-navbar__menu > ul {
	display: flex;
	align-items: center;
	gap: clamp( 14px, 2vw, 28px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.ivy-navbar--capsule .ivy-navbar__menu li { position: relative; font: inherit; }

/* `font: inherit` : le lien prend la taille et la graisse de la partie Menu,
   sur toutes les pages, et n'en change pas quand il devient la page courante. */
.ivy-navbar--capsule .ivy-navbar__menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var( --ivy-menu-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font: inherit;
	white-space: nowrap;
	text-decoration: none;
	transition: color calc( 180ms * var( --ivy-motion, 1 ) ) ease;
}

.ivy-navbar--capsule .ivy-navbar__menu a:hover,
.ivy-navbar--capsule .ivy-navbar__menu a[aria-current="page"],
.ivy-navbar--capsule .ivy-navbar__menu .current-menu-ancestor > .ivy-navbar__submenu-wrap > a {
	color: var( --ivy-accent, rgb( 17 17 17 ) );
}

.ivy-navbar--capsule .ivy-navbar__submenu-toggle {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border: 0;
	background: none;
	color: var( --ivy-menu-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	cursor: pointer;
	font: inherit;
}

.ivy-navbar--capsule .ivy-navbar__submenu-wrap { position: relative; display: flex; align-items: center; gap: 6px; }

.ivy-navbar--capsule .ivy-navbar__submenu-toggle::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg ) translate( -2px, -2px );
}

.ivy-navbar--capsule .ivy-navbar__submenu-wrap > [data-ivy-disclose-panel] {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 2;
	padding-top: 8px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity calc( 180ms * var( --ivy-motion, 1 ) ) ease, visibility 0s linear calc( 180ms * var( --ivy-motion, 1 ) );
}

.ivy-navbar--capsule .ivy-open > [data-ivy-disclose-panel] { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }

.ivy-navbar--capsule .ivy-navbar__submenu {
	display: grid;
	gap: 2px;
	min-width: 12rem;
	margin: 0;
	padding: 8px;
	border-radius: var( --ivy-radius-surface, 0 );
	background: var( --ivy-surface, rgb( 255 255 255 ) );
	box-shadow: 0 12px 32px rgb( 0 0 0 / 0.12 );
	list-style: none;
}

.ivy-navbar--capsule .ivy-navbar__submenu a {
	display: block;
	padding: 8px 12px;
	border-radius: var( --ivy-radius-surface, 0 );
	color: var( --ivy-submenu-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	text-decoration: none;
}

/* --- CTA ---------------------------------------------------------------- */

.ivy-navbar--capsule .ivy-navbar__cta {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: 44px;
	padding: 0.7em 1.3em;
	border-radius: var( --ivy-radius-action, 999px );
	background: var( --ivy-accent, rgb( 17 17 17 ) );
	color: var( --ivy-cta-color, var( --ivy-on-accent, rgb( 255 255 255 ) ) );
	font-size: calc( var( --ivy-font-body ) * .94 );
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: transform calc( 180ms * var( --ivy-motion, 1 ) ) ease;
}

.ivy-navbar--capsule .ivy-navbar__cta:hover { transform: translateY( -1px ); }

/* --- Accessibilite ----------------------------------------------------- */

.ivy-navbar--capsule .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.ivy-navbar--capsule a:focus-visible,
.ivy-navbar--capsule button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- Le panneau mobile : une barre laterale d'application ---------------- */

/*
 * Le fragment mobile_panel livre un tiroir plein cadre, commun au rayon. La
 * capsule en fait une CARTE LATERALE : detachee des bords, arrondie, pleine
 * hauteur, le reste de l'ecran voile. Sa tete, c'est la pilule elle-meme : le
 * logo et le bouton restent a leur place, au-dessus de la carte, et la carte
 * aligne son bord droit sur celui de la pilule — sur telephone, la croix
 * apparait la ou le doigt a touche. Au-dela de 400 px de carte, la croix
 * rejoint le coin de la carte.
 *
 * Les selecteurs portent la racine en plus : la feuille du fragment est
 * chargee APRES celle de la composition.
 */
@media ( max-width: 991px ) {
	.ivy-navbar--capsule {
		--ivy-capsule-marge: 10px;
		--ivy-capsule-panneau: min( calc( 100vw - var( --ivy-capsule-marge ) - var( --ivy-capsule-gouttiere ) ), 400px );
	}

	.ivy-navbar--capsule .ivy-navbar__inner { flex-wrap: nowrap; }

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__panel {
		inset-block: var( --ivy-capsule-marge );
		inset-inline-start: var( --ivy-capsule-marge );
		justify-content: flex-start;
		gap: 12px;
		width: var( --ivy-capsule-panneau );
		/* Le texte des rangees tombe a l'aplomb du logo : gouttiere + bord + marge de la pilule, moins la marge du panneau et celle de la rangee. */
		padding: 92px 14px max( 16px, env( safe-area-inset-bottom ) ) calc( var( --ivy-capsule-gouttiere ) - 1px );
		border-radius: calc( var( --ivy-radius-surface, 20px ) + 8px );
		overscroll-behavior: contain;
		transform: translateX( calc( -100% - var( --ivy-capsule-marge ) - 8px ) );
		box-shadow: 0 0 0 100vmax transparent;
		transition:
			transform var( --ivy-panel-duree ) var( --ivy-panel-ease ),
			box-shadow var( --ivy-panel-duree ) var( --ivy-panel-ease ),
			visibility 0s linear var( --ivy-panel-duree );
	}

	.ivy-navbar--capsule .ivy-navbar__collapse.ivy-open .ivy-navbar__panel {
		z-index: 95;
		transform: none;
		/* Le voile est l'ombre de la carte : il n'existe que carte ouverte, et un toucher dessus atteint la page, donc ferme. */
		box-shadow:
			0 0 0 100vmax color-mix( in srgb, var( --ivy-ink, rgb( 17 17 17 ) ) 42%, transparent ),
			0 24px 60px -24px color-mix( in srgb, var( --ivy-ink, rgb( 17 17 17 ) ) 60%, transparent );
		transition-delay: 0s;
	}

	/* La croix au coin de la carte. Sur telephone, c'est exactement sa place de burger. */
	.ivy-navbar--capsule .ivy-navbar__collapse.ivy-open .ivy-navbar__burger {
		position: fixed;
		top: 23px;
		left: calc( var( --ivy-capsule-marge ) + var( --ivy-capsule-panneau ) - 55px );
	}

	/* Les rangees : des pastilles pleine largeur, sans filet, un chevron au bout. */
	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__menu > ul {
		gap: 4px;
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__menu > ul > li + li {
		border-block-start: 0;
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__menu > ul > li > a {
		justify-content: space-between;
		gap: 12px;
		min-height: 54px;
		padding-inline: 14px;
		border-radius: var( --ivy-radius-surface );
		font-size: calc( var( --ivy-font-body ) * 1.12 );
		white-space: normal;
		transition: background-color calc( 180ms * var( --ivy-motion, 1 ) ) ease, color calc( 180ms * var( --ivy-motion, 1 ) ) ease;
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__menu > ul > li > a::after {
		content: '';
		flex: none;
		width: 8px;
		height: 8px;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		opacity: 0.4;
		transform: rotate( 45deg );
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__menu > ul > li > a:hover,
	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__menu > ul > li > a:active {
		background: color-mix( in srgb, var( --ivy-ink, rgb( 17 17 17 ) ) 5%, transparent );
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__menu > ul > li > a[aria-current="page"] {
		background: color-mix( in srgb, var( --ivy-accent, rgb( 17 17 17 ) ) 12%, transparent );
		color: var( --ivy-accent, rgb( 17 17 17 ) );
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__menu > ul > li > a[aria-current="page"]::after {
		opacity: 1;
	}

	/* Le pied de la carte descend en bas : coordonnees en encart, bouton pleine largeur. */
	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__menu {
		margin-block-end: auto;
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__panel-foot {
		padding: 6px 14px;
		border-radius: var( --ivy-radius-surface );
		background: color-mix( in srgb, var( --ivy-ink, rgb( 17 17 17 ) ) 4%, transparent );
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__contact {
		gap: 0;
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__contact li {
		min-height: 44px;
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__contact-icon {
		--ivy-contact-icon-size: 15px;
		margin-inline-end: 12px;
		color: var( --ivy-panel_contact_icon-color, var( --ivy-accent, currentColor ) );
	}

	/* Les reseaux sous un filet, en pastilles rondes comme au pied de page. */
	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__social {
		gap: 8px;
		margin-block: 6px 8px;
		padding-block-start: 12px;
		border-block-start: 1px solid color-mix( in srgb, var( --ivy-ink, rgb( 17 17 17 ) ) 10%, transparent );
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__social-link {
		border: 1px solid color-mix( in srgb, currentColor 22%, transparent );
		border-radius: 50%;
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__social-link svg {
		width: 16px;
		height: 16px;
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__panel .ivy-navbar__cta {
		min-height: 54px;
		font-size: var( --ivy-font-body );
	}

	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__panel .ivy-navbar__cta:hover {
		transform: none;
	}

	/* Un numero deja dans le menu ne se repete pas quand le pied de carte le porte. */
	.ivy-navbar--capsule .ivy-navbar__panel:has( .ivy-navbar__contact-phone ) .ivy-navbar__menu li:has( > a[href^="tel:"] ) {
		display: none;
	}
}

@media ( max-width: 991px ) and ( prefers-reduced-motion: reduce ) {
	.ivy-navbar--capsule .ivy-navbar__collapse .ivy-navbar__menu > ul > li > a {
		transition: none;
	}
}