/*
 * navbar/surphoto — transposition de `.entete` (maquette Les Jolies Clés) : fixe, 88 px
 * (72 sous 900 px), logo à gauche, liens centrés, réseaux à droite, aucun bouton.
 * Engagement 5 : aucun hexadécimal, valeurs de repli comprises.
 *
 * Deux états lus sur la page, jamais sur la barre : crème unie par défaut ; transparente et
 * claire tant que la page ouvre par une photo (`hero/accroche`) et que `ivy-stuck` n'est pas
 * posée. La racine garde la place de la barre dans le flux (la barre est fixe) ; sur une page à
 * photo pleine page elle n'en garde aucune, la photo passe dessous.
 */

.ivy-navbar--surphoto {
	--ivy-navbar-h: 88px;
	position: relative;
	z-index: 40;
	block-size: var( --ivy-navbar-h );
}
body:has( .ivy-hero--accroche ) .ivy-navbar--surphoto { block-size: 0; }

.ivy-navbar--surphoto .ivy-navbar__stage {
	position: fixed;
	inset: 0 0 auto;
	z-index: 40;
	box-sizing: border-box;
	max-inline-size: 100%;
	block-size: var( --ivy-navbar-h );
	background: var( --ivy-surface, rgb( 251 248 242 ) );
	border-bottom: 1px solid rgb( 58 50 38 / 8% );
	transition: background-color 300ms cubic-bezier( .2, .7, .2, 1 ), border-color 300ms cubic-bezier( .2, .7, .2, 1 ), color 300ms cubic-bezier( .2, .7, .2, 1 );
}

.ivy-navbar--surphoto .ivy-navbar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	box-sizing: border-box;
	block-size: 100%;
	inline-size: 100%;
	max-inline-size: calc( 1240px + 2 * clamp( 20px, 5vw, 64px ) );
	margin-inline: auto;
	padding-inline: clamp( 20px, 5vw, 64px );
}

.ivy-navbar--surphoto .ivy-navbar__logo { position: relative; display: block; inline-size: 132px; justify-self: start; }
.ivy-navbar--surphoto .ivy-navbar__logo img { display: block; inline-size: 100%; block-size: auto; transition: opacity 300ms cubic-bezier( .2, .7, .2, 1 ); }
.ivy-navbar--surphoto .ivy-navbar__logo-rest { position: absolute; inset: 0; opacity: 0; }
.ivy-navbar--surphoto .ivy-navbar__logo-solid { opacity: 1; }
/* Un seul logo réglé : il sert dans les deux états. */
.ivy-navbar--surphoto .ivy-navbar__logo:not( :has( .ivy-navbar__logo-solid ) ) .ivy-navbar__logo-rest { position: static; opacity: 1; }

/* Les liens : 16 px / 500, filet doré qui se déploie au survol et sous la page courante. */
.ivy-navbar--surphoto .ivy-navbar__menu { display: flex; align-items: center; }
.ivy-navbar--surphoto .ivy-navbar__menu li { font: inherit; }
.ivy-navbar--surphoto .ivy-navbar__menu > ul { display: flex; align-items: center; gap: clamp( 20px, 3.2vw, 36px ); margin: 0; padding: 0; list-style: none; }
.ivy-navbar--surphoto .ivy-navbar__menu li,
.ivy-navbar--surphoto .ivy-navbar__submenu-wrap { position: relative; }
.ivy-navbar--surphoto .ivy-navbar__submenu-wrap { display: flex; align-items: center; }
.ivy-navbar--surphoto .ivy-navbar__menu > ul > li > a,
.ivy-navbar--surphoto .ivy-navbar__submenu-wrap > a {
	position: relative;
	display: inline-block;
	padding-block: 8px;
	color: var( --ivy-menu-color-stuck, var( --ivy-deep, rgb( 37 29 23 ) ) );
	font-size: var( --ivy-font-body );
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
}
.ivy-navbar--surphoto .ivy-navbar__menu > ul > li > a::after,
.ivy-navbar--surphoto .ivy-navbar__submenu-wrap > a::after {
	content: '';
	position: absolute;
	inset: auto 0 2px;
	block-size: 2px;
	background: var( --ivy-accent, rgb( 184 151 90 ) );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 300ms cubic-bezier( .2, .7, .2, 1 );
}
.ivy-navbar--surphoto .ivy-navbar__menu a:hover::after,
.ivy-navbar--surphoto .ivy-navbar__menu a[aria-current="page"]::after,
.ivy-navbar--surphoto .ivy-navbar__menu .current-menu-ancestor > .ivy-navbar__submenu-wrap > a::after { transform: scaleX( 1 ); }

/* Le bouton qui ouvre le sous-menu au clavier : lisible par les lecteurs d'écran, sans chevron (la maquette n'en a pas). */
.ivy-navbar--surphoto .ivy-navbar__submenu-toggle { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset( 50% ); padding: 0; border: 0; background: none; }
.ivy-navbar--surphoto .ivy-navbar__submenu-toggle::after { content: none; }

.ivy-navbar--surphoto .ivy-navbar__submenu-wrap > [data-ivy-disclose-panel] {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 2;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateX( -50% );
}
.ivy-navbar--surphoto .ivy-open > [data-ivy-disclose-panel],
.ivy-navbar--surphoto .ivy-navbar__submenu-wrap:hover > [data-ivy-disclose-panel],
.ivy-navbar--surphoto .ivy-navbar__submenu-wrap:focus-within > [data-ivy-disclose-panel] { visibility: visible; opacity: 1; pointer-events: auto; }
.ivy-navbar--surphoto .ivy-navbar__submenu {
	display: flex;
	flex-direction: column;
	min-inline-size: 300px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var( --ivy-surface, rgb( 251 248 242 ) );
	border: 1px solid rgb( 58 50 38 / 8% );
	border-radius: var( --ivy-radius-surface, 4px );
	box-shadow: 0 12px 32px rgb( 37 29 23 / 12% );
}
.ivy-navbar--surphoto .ivy-navbar__submenu a { display: block; padding: 10px 14px; line-height: 1.6; color: var( --ivy-submenu-color, var( --ivy-deep, rgb( 37 29 23 ) ) ); white-space: nowrap; text-decoration: none; }
.ivy-navbar--surphoto .ivy-navbar__submenu a::after { content: none; }
.ivy-navbar--surphoto .ivy-navbar__submenu a:hover,
.ivy-navbar--surphoto .ivy-navbar__submenu a[aria-current="page"] { background: var( --ivy-surface-sunk, rgb( 238 230 216 ) ); }
.ivy-navbar--surphoto .ivy-navbar__menu a:focus-visible { outline: 2px solid currentcolor; outline-offset: 3px; }

/* Les réseaux : 24 px, trait seul, brun puis doré au survol. */
.ivy-navbar--surphoto .ivy-navbar__socials { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; justify-self: end; color: var( --ivy-social-color-stuck, var( --ivy-deep, rgb( 37 29 23 ) ) ); transition: color 300ms cubic-bezier( .2, .7, .2, 1 ); }
.ivy-navbar--surphoto .ivy-navbar__socials a { display: grid; place-items: center; min-inline-size: 40px; min-block-size: 40px; color: inherit; }
.ivy-navbar--surphoto .ivy-navbar__socials svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ivy-navbar--surphoto .ivy-navbar__socials a:hover { color: var( --ivy-accent, rgb( 184 151 90 ) ); }
.ivy-navbar--surphoto .ivy-navbar__socials a:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; }

/* Sur la photo, avant que `ivy-stuck` ne tombe : transparente, logo, liens et réseaux clairs. */
body:has( .ivy-hero--accroche ) .ivy-navbar--surphoto:not( .ivy-stuck ) .ivy-navbar__stage { background: transparent; border-color: transparent; }
body:has( .ivy-hero--accroche ) .ivy-navbar--surphoto:not( .ivy-stuck ) .ivy-navbar__logo-rest { opacity: 1; }
body:has( .ivy-hero--accroche ) .ivy-navbar--surphoto:not( .ivy-stuck ) .ivy-navbar__logo-solid { opacity: 0; }
@media ( min-width: 900px ) {
	body:has( .ivy-hero--accroche ) .ivy-navbar--surphoto:not( .ivy-stuck ) .ivy-navbar__menu > ul > li > a,
	body:has( .ivy-hero--accroche ) .ivy-navbar--surphoto:not( .ivy-stuck ) .ivy-navbar__submenu-wrap > a { color: var( --ivy-menu-color, var( --ivy-on-deep, rgb( 251 248 242 ) ) ); }
}
body:has( .ivy-hero--accroche ) .ivy-navbar--surphoto:not( .ivy-stuck ) .ivy-navbar__socials { color: var( --ivy-social-color, var( --ivy-on-deep, rgb( 251 248 242 ) ) ); }
body:has( .ivy-hero--accroche ) .ivy-navbar--surphoto:not( .ivy-stuck ) .ivy-navbar__burger { color: var( --ivy-menu-color, var( --ivy-on-deep, rgb( 251 248 242 ) ) ); }

/* Le menu : sur la barre large, le tiroir n'existe pas (ses enfants redeviennent des éléments de la barre). */
.ivy-navbar--surphoto :is( .ivy-navbar__nav-wrap, .ivy-navbar__sheet-wrap, .ivy-navbar__sheet ) { display: contents; }
.ivy-navbar--surphoto :is( .ivy-navbar__burger, .ivy-navbar__sheet-head, .ivy-navbar__sheet-foot, .ivy-navbar__scrim ) { display: none; }

/* Téléphone : bouton à deux traits, puis carte latérale pleine hauteur sur page voilée (`.panneau` de la maquette). */
@media ( max-width: 899px ) {
	.ivy-navbar--surphoto { --ivy-navbar-h: 72px; }
	.ivy-navbar--surphoto .ivy-navbar__inner { grid-template-columns: 1fr auto; }
	.ivy-navbar--surphoto .ivy-navbar__logo { inline-size: 108px; }
	.ivy-navbar--surphoto .ivy-navbar__socials { display: none; }
	.ivy-navbar--surphoto .ivy-navbar__nav-wrap { display: block; }
	.ivy-navbar--surphoto .ivy-navbar__burger { display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin-inline-end: -10px; padding: 0; border: 0; background: transparent; color: var( --ivy-menu-color-stuck, var( --ivy-deep, rgb( 37 29 23 ) ) ); cursor: pointer; }
	.ivy-navbar--surphoto .ivy-navbar__burger-bars { display: block; inline-size: 26px; block-size: 10px; background: linear-gradient( currentcolor, currentcolor ) top / 100% 1.5px no-repeat, linear-gradient( currentcolor, currentcolor ) bottom right / 70% 1.5px no-repeat; }
	.ivy-navbar--surphoto .ivy-navbar__scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgb( 37 29 23 / 45% ); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 280ms cubic-bezier( .2, .7, .2, 1 ), visibility 280ms; }
	.ivy-navbar--surphoto .ivy-navbar__nav-wrap.ivy-open + .ivy-navbar__scrim { opacity: 1; visibility: visible; pointer-events: auto; }
	.ivy-navbar--surphoto .ivy-navbar__sheet-wrap { display: block; position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; transition: visibility 280ms; }
	.ivy-navbar--surphoto .ivy-open > .ivy-navbar__sheet-wrap { visibility: visible; pointer-events: none; }
	.ivy-navbar--surphoto .ivy-navbar__sheet { display: flex; flex-direction: column; position: absolute; inset: 0 0 0 auto; box-sizing: border-box; inline-size: min( 86vw, 380px ); padding: 18px 20px 28px; overflow-y: auto; background: var( --ivy-surface, rgb( 251 248 242 ) ); transform: translateX( 100% ); transition: transform 280ms cubic-bezier( .2, .7, .2, 1 ); pointer-events: auto; }
	.ivy-navbar--surphoto .ivy-open > .ivy-navbar__sheet-wrap .ivy-navbar__sheet { transform: none; }
	.ivy-navbar--surphoto .ivy-navbar__sheet-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 28px; }
	.ivy-navbar--surphoto .ivy-navbar__sheet-logo { display: block; inline-size: 104px; block-size: auto; }
	.ivy-navbar--surphoto .ivy-navbar__close { display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin-inline-end: -8px; padding: 0; border: 0; border-radius: 50%; background: var( --ivy-surface-sunk, rgb( 238 230 216 ) ); color: var( --ivy-ink, rgb( 58 50 38 ) ); cursor: pointer; }
	.ivy-navbar--surphoto .ivy-navbar__close svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentcolor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
	.ivy-navbar--surphoto .ivy-navbar__menu { display: block; }
	.ivy-navbar--surphoto .ivy-navbar__menu > ul { display: grid; align-items: stretch; gap: 8px; }
	.ivy-navbar--surphoto .ivy-navbar__menu > ul > li > a,
	.ivy-navbar--surphoto .ivy-navbar__submenu-wrap > a,
	.ivy-navbar--surphoto .ivy-navbar__submenu a { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; inline-size: 100%; min-block-size: 60px; padding: 0 18px; border-radius: var( --ivy-radius-surface, 4px ); background: var( --ivy-surface-sunk, rgb( 238 230 216 ) ); color: var( --ivy-ink, rgb( 58 50 38 ) ); font-family: var( --ivy-font-titre, inherit ); font-size: calc( var( --ivy-font-h4 ) * 1.04 ); font-weight: 400; line-height: 1.3; letter-spacing: 0; white-space: normal; }
	.ivy-navbar--surphoto .ivy-navbar__menu > ul > li > a::after,
	.ivy-navbar--surphoto .ivy-navbar__submenu-wrap > a::after { content: ''; position: static; inset: auto; flex: none; inline-size: 8px; block-size: 8px; margin-inline-end: 4px; border: solid var( --ivy-accent, rgb( 184 151 90 ) ); border-width: 1.4px 1.4px 0 0; background: none; transform: rotate( 45deg ); }
	.ivy-navbar--surphoto .ivy-navbar__menu a[aria-current="page"] { background: var( --ivy-gold-light, rgb( 230 214 168 ) ); }
	.ivy-navbar--surphoto .ivy-navbar__menu > ul > li > a[aria-current="page"]::after,
	.ivy-navbar--surphoto .ivy-navbar__menu > ul > li > a:hover::after { transform: rotate( 45deg ); }
	.ivy-navbar--surphoto .ivy-navbar__submenu-wrap { display: block; }
	.ivy-navbar--surphoto .ivy-navbar__submenu-wrap > [data-ivy-disclose-panel] { position: static; visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
	.ivy-navbar--surphoto .ivy-navbar__submenu { display: grid; gap: 8px; min-inline-size: 0; margin: 8px 0 0 18px; padding: 0; background: none; border: 0; box-shadow: none; }
	.ivy-navbar--surphoto .ivy-navbar__submenu a { min-block-size: 52px; font-size: calc( var( --ivy-font-h5 ) * .978 ); }
	.ivy-navbar--surphoto .ivy-navbar__submenu a:hover { background: var( --ivy-surface-sunk, rgb( 238 230 216 ) ); }
	.ivy-navbar--surphoto .ivy-navbar__sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: auto; padding-block-start: 32px; font-size: calc( var( --ivy-font-body ) * .875 ); line-height: 1.6; }
	.ivy-navbar--surphoto .ivy-navbar__sheet-caption { margin: 0; font-size: inherit; color: var( --ivy-panel_caption-color, var( --ivy-muted, rgb( 107 98 82 ) ) ); }
	.ivy-navbar--surphoto .ivy-navbar__sheet-social { display: flex; margin: 0; padding: 0; list-style: none; }
	.ivy-navbar--surphoto .ivy-navbar__sheet-social a { display: grid; place-items: center; min-inline-size: 40px; min-block-size: 40px; color: var( --ivy-ink, rgb( 58 50 38 ) ); }
	.ivy-navbar--surphoto .ivy-navbar__sheet-social svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
}
@media ( prefers-reduced-motion: reduce ) {
	.ivy-navbar--surphoto .ivy-navbar__stage,
	.ivy-navbar--surphoto .ivy-navbar__logo img,
	.ivy-navbar--surphoto .ivy-navbar__menu a::after { transition: none; }
}
:where( .ivy-navbar--surphoto ) .ivy-navbar__cta { display: inline-flex; align-items: center; padding: 10px 22px; border: 1px solid var( --ivy-cta-border-color, var( --ivy-accent, rgb( 184 151 90 ) ) ); border-radius: var( --ivy-radius-action, 4px ); background: var( --ivy-cta-background-color, var( --ivy-accent, rgb( 184 151 90 ) ) ); color: var( --ivy-cta-color, var( --ivy-on-accent, rgb( 37 29 23 ) ) ); text-decoration: none; }