/**
 * Salam — Header & Footer (Figma salam-v2 · Menu 1:57 · Footer 1:11)
 */

/* ── Header ───────────────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	overflow: visible;
	transition: transform 0.35s ease;
	will-change: transform;
}

/* Masqué au défilement vers le bas (le logo déborde sous la barre : on
   translate un peu plus que 100% pour tout escamoter). */
.site-header.is-hidden {
	transform: translateY(calc(-100% - 60px));
}

@media (prefers-reduced-motion: reduce) {
	.site-header {
		transition-duration: 0.001ms;
	}
}

.site-header__bar {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--salam-header-height);
	padding-inline: clamp(48px, 6.875vw, 99px);
	background: transparent;
	border-bottom: none;
}

.site-header__bar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 1440px;
	height: 72px;
	max-height: 72px;
	margin-inline: auto;
	z-index: 0;
	pointer-events: none;
	background-image: var(--salam-bg-menu);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 100%;
}

.site-header__bar > * {
	position: relative;
	z-index: 1;
}

.site-header__panel {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-height: var(--salam-header-height);
	background: transparent;
	border-bottom: none;
}

.site-header__panel--start {
	justify-content: flex-end;
	padding-inline: 1rem var(--salam-header-panel-gap-start);
}

.site-header__panel--end {
	justify-content: space-between;
	padding-inline: var(--salam-header-panel-gap-end) 1rem;
	gap: var(--salam-header-nav-gap);
}

.site-header__logo {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	margin-top: calc((var(--salam-logo-max-height) - var(--salam-header-height)) / 2 * -1);
	margin-bottom: calc((var(--salam-logo-max-height) - var(--salam-header-height)) / 2 * -1);
	transform: translateY(19px);
}

.site-header__logo .custom-logo-link {
	display: block;
	line-height: 0;
}

.site-header__logo .custom-logo,
.site-header__logo img {
	display: block;
	width: clamp(calc(120px * 0.95), calc(13vw * 0.95), calc(189px * 0.95));
	height: auto;
	max-height: var(--salam-logo-max-height);
}

.site-header__menu {
	display: flex;
	align-items: center;
	gap: var(--salam-header-nav-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__menu > li {
	flex-shrink: 0;
}

.site-header__menu a {
	position: relative;
	display: inline-block;
	font-family: var(--salam-font-nav);
	font-size: var(--salam-font-size-nav);
	font-weight: 400;
	line-height: var(--salam-line-height-nav);
	color: var(--salam-color-text-inverse);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: var(--salam-letter-spacing-nav);
	white-space: nowrap;
	text-align: center;
	opacity: 0.9;
	transition: opacity var(--salam-transition);
}

.site-header__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 2px;
	background-color: rgba(255, 255, 255, 0.5);
	opacity: 0;
	transition: opacity var(--salam-transition);
}

.site-header__menu a:hover::after,
.site-header__menu a:focus-visible::after,
.site-header__menu a[aria-current="page"]::after,
.site-header__menu .current-menu-item > a::after,
.site-header__menu .current_page_item > a::after,
.site-header__menu .current-menu-ancestor > a::after {
	opacity: 1;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible {
	opacity: 1;
}

.site-header__menu .current-menu-item > a,
.site-header__menu .current_page_item > a,
.site-header__menu .current-menu-ancestor > a,
.site-header__menu a[aria-current="page"] {
	font-weight: 400;
}

.site-header__lang {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--salam-color-text-inverse);
	font-family: var(--salam-font-nav);
	font-size: var(--salam-font-size-nav);
	text-transform: uppercase;
	letter-spacing: var(--salam-letter-spacing-nav);
	white-space: nowrap;
}

.site-header__lang-toggle {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0;
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.site-header__lang-toggle:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
}

.site-header__lang-list {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 120;
	min-width: 4.5rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: #a12528;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-bottom: 4px solid #e3b541;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(26, 26, 26, 0.18);
}

.site-header__lang-list[hidden] {
	display: none;
}

.site-header__lang-option {
	display: block;
	padding: 0.45rem 0.85rem;
	color: var(--salam-color-text-inverse);
	text-decoration: none;
	text-align: center;
}

.site-header__lang-option:hover,
.site-header__lang-option:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.site-header__lang-option.is-current {
	font-weight: 700;
}

.site-header__lang--bar {
	display: none;
}

.site-header__lang-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--salam-color-text-inverse);
	line-height: 1;
}

.site-header__lang-icon-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.site-header__lang-chevron {
	font-size: 0.875rem;
	line-height: 1;
}

.site-header__toggle {
	display: none;
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 110;
}

.site-header__toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--salam-color-text-inverse);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.2s ease;
}

.site-header__mobile-nav {
	display: none;
}

/* Coque translatable : englobe header + contenu + footer. */
.site-frame {
	position: relative;
	z-index: 5;
	background-color: #f7f6f2;
}

/* ── Footer ───────────────────────────────────────────────────────── */

.site-footer {
	color: var(--salam-color-text-inverse);
	background-color: #f7f6f2;
}

.site-footer__crest {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	width: 100%;
}

.site-footer__border {
	display: block;
	width: 100%;
	height: auto;
}

.site-footer__logo-wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, calc(-50% - 2rem));
	width: clamp(120px, 13vw, 189px);
}

.site-footer__logo--badge .custom-logo,
.site-footer__logo--badge img {
	display: block;
	width: 100%;
	height: auto;
}

.site-footer__body {
	position: relative;
	overflow: hidden;
	background: var(--salam-gradient-header);
	padding: 1.25rem var(--salam-footer-padding-x) 0;
}

.site-footer__texture {
	position: absolute;
	inset: 0;
	background-image: var(--salam-bg-footer-texture);
	background-size: cover;
	background-position: center top;
	opacity: 0.3;
	mix-blend-mode: plus-lighter;
	pointer-events: none;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--salam-container-max);
	margin-inline: auto;
	padding-inline: 0;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: var(--salam-grid-footer);
	gap: 2.5rem;
	max-width: 51.375rem;
	margin-inline: auto;
	padding-block: 1rem 2rem;
}

.site-footer__title {
	margin: 0 0 1.5rem;
	font-family: var(--salam-font-body);
	font-size: var(--salam-font-size-footer-title);
	font-weight: 800;
	line-height: var(--salam-line-height-footer);
	letter-spacing: var(--salam-letter-spacing-footer-title);
	text-transform: uppercase;
	color: var(--salam-color-text-inverse);
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--salam-spacing-footer-link);
}

.site-footer__menu a {
	font-family: var(--salam-font-body);
	font-size: var(--salam-font-size-footer-link);
	font-weight: 400;
	line-height: var(--salam-line-height-footer);
	letter-spacing: var(--salam-letter-spacing-footer-link);
	color: var(--salam-color-text-inverse);
	text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
	opacity: 0.88;
}

.site-footer .salam-social-links {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.site-footer .salam-social-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--salam-color-text-inverse);
	font-size: 1.125rem;
	text-decoration: none;
	border-radius: var(--salam-radius-social);
	transition: opacity var(--salam-transition);
}

.site-footer .salam-social-links__link:hover,
.site-footer .salam-social-links__link:focus-visible {
	opacity: 0.85;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.25rem;
	padding-block: 0.5rem 2rem;
	font-family: var(--salam-font-body);
	font-size: var(--salam-font-size-footer-link);
	line-height: 1.5;
	color: var(--salam-footer-label);
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__legal a {
	color: var(--salam-footer-label);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	color: var(--salam-color-text-inverse);
}

/* ── Tablette & iPad Pro (768 → 1366) ─────────────────────────────── */

@media (min-width: 768px) and (max-width: 1366px) {
	.site-header__bar {
		padding-inline: clamp(16px, 2.25vw, 32px);
	}

	.site-header__panel--start {
		padding-inline: 0.5rem clamp(0.625rem, 1.25vw, 1rem);
	}

	.site-header__panel--end {
		padding-inline: clamp(0.625rem, 1.25vw, 1rem) 0.5rem;
		gap: 0.75rem;
	}

	.site-header__menu {
		gap: clamp(0.625rem, 1vw, 0.875rem);
	}

	.site-header__menu a,
	.site-header__lang {
		font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
		letter-spacing: 0.07rem;
	}
}

/* ── Header compact : menu mobile (≤ 1023px) ── */

@media (max-width: 1023px) {
.site-header .site-header__bar {
			position: relative;
			display: flex;
			align-items: center;
			gap: 0.5rem;
			padding-inline: 65px;
			min-height: var(--salam-header-height);
			background: transparent;
			border-bottom: none;
		}

		.site-header .site-header__panel {
			display: none;
		}

		.site-header .site-header__bar::before {
			display: block;
			inset: 0;
			width: 100%;
			max-width: none;
			height: 100%;
			max-height: none;
			background-image: var(--salam-bg-menu-mobile);
			background-repeat: no-repeat;
			background-position: center bottom;
			background-size: 100% 100%;
		}

		.site-header .site-header__logo {
			order: 2;
			flex: 1;
			display: flex;
			justify-content: center;
			margin: 0;
			transform: translateY(22px);
		}

		.site-header .site-header__logo .custom-logo,
		.site-header .site-header__logo img {
			width: clamp(calc(100px * 0.95 * 1.152), calc(28vw * 0.95 * 1.152), calc(140px * 0.95 * 1.152));
			max-height: calc(80px * 0.95 * 1.152);
		}

		.site-header .site-header__toggle {
			order: 1;
			display: flex;
			position: static;
			transform: none;
			flex-shrink: 0;
			margin-left: 0;
		}

		.site-header .site-header__lang--bar {
			order: 3;
			display: flex;
			flex-shrink: 0;
			z-index: 110;
		}

		/* ── Menu hors-canvas façon « push » ─────────────────────────────── */

		/* Panneau du menu : fixé derrière la coque, révélé quand elle glisse. */
		.site-header__mobile-nav {
			--salam-menu-width: min(80vw, 320px);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			z-index: 1;
			width: var(--salam-menu-width);
			height: 100vh;
			height: 100dvh;
			max-height: 100dvh;
			padding: 1.5rem 1.5rem 2rem;
			padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
			background-color: var(--salam-color-primary);
			background-image: none;
			overflow-y: auto;
			visibility: hidden;
		}

		body.is-menu-open .site-header__mobile-nav {
			visibility: visible;
			border-right: 3px solid var(--salam-color-accent);
		}

		.site-header__mobile-nav-head {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 100%;
			flex-shrink: 0;
			margin-bottom: 1.25rem;
		}

		.site-header__mobile-logo {
			line-height: 0;
		}

		.site-header__mobile-logo .custom-logo-link {
			display: block;
			line-height: 0;
		}

		.site-header__mobile-logo .custom-logo,
		.site-header__mobile-logo img {
			display: block;
			width: clamp(88px, 28vw, 120px);
			height: auto;
			max-height: 80px;
		}

		.site-header__mobile-close {
			position: absolute;
			top: -0.5rem;
			right: -0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			padding: 0;
			background: none;
			border: none;
			cursor: pointer;
			color: var(--salam-color-text-inverse);
			z-index: 1;
		}

		/* Zone de toucher élargie sans modifier l’icône visible */
		.site-header__mobile-close::before {
			content: "";
			position: absolute;
			inset: -14px;
		}

		.site-header__mobile-close-bar {
			position: absolute;
			display: block;
			width: 24px;
			height: 2px;
			background: currentColor;
			border-radius: 1px;
		}

		.site-header__mobile-close-bar:nth-child(1) {
			transform: rotate(45deg);
		}

		.site-header__mobile-close-bar:nth-child(2) {
			transform: rotate(-45deg);
		}

		.site-header__mobile-close:hover,
		.site-header__mobile-close:focus-visible {
			opacity: 0.85;
			outline: none;
		}

		.site-header__mobile-close:focus-visible {
			box-shadow: 0 0 0 2px var(--salam-color-text-inverse);
			border-radius: 4px;
		}

		.site-header__mobile-nav-body {
			width: 100%;
			flex: 1 1 auto;
			display: flex;
			flex-direction: column;
		}

		.site-header__mobile-nav-foot {
			width: 100%;
			flex-shrink: 0;
			margin-top: auto;
			padding-top: 2rem;
		}

		.site-header__mobile-nav-foot:not(:has(.salam-social-links)) {
			display: none;
		}

		.site-header__mobile-social {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 1rem;
			width: 100%;
		}

		.site-header__mobile-social-title {
			margin: 0;
			font-family: var(--salam-font-nav);
			font-size: 1.3125rem;
			font-weight: 400;
			line-height: 1.2;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			color: var(--salam-color-text-inverse);
			opacity: 0;
			transform: translateY(1rem);
			transition: opacity 0.35s ease, transform 0.35s ease;
		}

		body.is-menu-open .site-header__mobile-social-title {
			opacity: 1;
			transform: translateY(0);
			transition-delay: 0.4s;
		}

		.site-header__mobile-nav .salam-social-links {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-start;
			gap: 1.25rem;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.site-header__mobile-nav .salam-social-links__item {
			display: block;
			width: auto;
			opacity: 0;
			transform: translateY(1rem);
			transition: opacity 0.35s ease, transform 0.35s ease;
		}

		body.is-menu-open .site-header__mobile-nav .salam-social-links__item {
			opacity: 1;
			transform: translateY(0);
		}

		body.is-menu-open .site-header__mobile-nav .salam-social-links__item:nth-child(1) {
			transition-delay: 0.46s;
		}

		body.is-menu-open .site-header__mobile-nav .salam-social-links__item:nth-child(2) {
			transition-delay: 0.52s;
		}

		body.is-menu-open .site-header__mobile-nav .salam-social-links__item:nth-child(3) {
			transition-delay: 0.58s;
		}

		body.is-menu-open .site-header__mobile-nav .salam-social-links__item:nth-child(4) {
			transition-delay: 0.64s;
		}

		.site-header__mobile-nav .salam-social-links__link {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2rem;
			height: 2rem;
			font-size: 1.125rem;
			color: var(--salam-color-text-inverse);
			text-decoration: none;
			border-radius: var(--salam-radius-social);
			transition: opacity var(--salam-transition);
		}

		.site-header__mobile-nav .salam-social-links__link:hover,
		.site-header__mobile-nav .salam-social-links__link:focus-visible {
			opacity: 0.85;
		}

		.site-header__mobile-nav ul,
		.site-header__mobile-menu {
			list-style: none;
			margin: 0;
			padding: 0;
			text-align: start;
		}

		.site-header__mobile-menu {
			display: flex;
			flex-direction: column;
			width: 100%;
		}

		.site-header__mobile-menu li {
			display: block;
			width: 100%;
			opacity: 0;
			transform: translateY(1rem);
			transition: opacity 0.35s ease, transform 0.35s ease;
		}

		body.is-menu-open .site-header__mobile-menu li {
			opacity: 1;
			transform: translateY(0);
		}

		/* Apparition décalée des entrées quand le menu s'ouvre. */
		body.is-menu-open .site-header__mobile-menu li:nth-child(1) {
			transition-delay: 0.1s;
		}
		body.is-menu-open .site-header__mobile-menu li:nth-child(2) {
			transition-delay: 0.16s;
		}
		body.is-menu-open .site-header__mobile-menu li:nth-child(3) {
			transition-delay: 0.22s;
		}
		body.is-menu-open .site-header__mobile-menu li:nth-child(4) {
			transition-delay: 0.28s;
		}
		body.is-menu-open .site-header__mobile-menu li:nth-child(5) {
			transition-delay: 0.34s;
		}
		body.is-menu-open .site-header__mobile-menu li:nth-child(n + 6) {
			transition-delay: 0.4s;
		}

		.site-header .site-header__menu a,
		.site-header__mobile-menu a {
			font-size: 1.3125rem;
		}

		.site-header__mobile-menu a {
			display: block;
			width: 100%;
			padding-block: 10px;
			font-family: var(--salam-font-nav);
			line-height: 1.2;
			text-transform: uppercase;
			letter-spacing: 0.06em;
			color: var(--salam-color-text-inverse);
			text-decoration: none;
		}

		.site-header__mobile-menu a::after {
			content: none;
		}

}

@media (max-width: 1023px) {
	/* Coque : glisse et s'estompe pour révéler le menu. */
	.site-frame {
		min-height: 100vh;
		min-height: 100dvh;
		transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
			opacity 0.45s ease;
		will-change: transform, opacity;
	}

	body.is-menu-open {
		overflow: hidden;
	}

	body.is-menu-open .site-frame {
		transform: translateX(var(--salam-menu-width, min(80vw, 320px)));
		opacity: 0.4;
		overflow: hidden;
	}

	/* Le contenu poussé sert de zone de fermeture, avec un voile sombre léger. */
	body.is-menu-open .site-frame::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.25);
		cursor: pointer;
	}

	/* Le header (donc le burger) reste au-dessus de l'overlay de fermeture. */
	body.is-menu-open .site-header {
		z-index: 1000;
	}

	.site-header__toggle.is-active .site-header__toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.site-header__toggle.is-active .site-header__toggle-bar:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

	.site-header__toggle.is-active .site-header__toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-frame,
	.site-header__mobile-menu li,
	.site-header__mobile-social-title,
	.site-header__mobile-nav .salam-social-links__item {
		transition-duration: 0.001ms;
	}
}

/* ── Footer mobile ────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.site-footer__border {
		display: none;
	}

	.site-footer__logo--badge img,
	.site-footer__logo--badge .custom-logo {
		transform: translateY(31px);
	}

	.site-footer__body {
		background-image: var(--salam-bg-footer-mobile);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.site-footer__texture {
		display: none;
	}

	.site-footer__columns {
		grid-template-columns: 1fr;
		text-align: center;
		margin-top: 60px;
	}

	.site-footer__title {
		font-family: var(--salam-font-body);
		font-weight: 800;
		font-size: 20px;
		line-height: 1.1;
		letter-spacing: -0.04em;
		text-align: center;
	}

	.site-footer__menu a {
		font-family: var(--salam-font-body);
		font-weight: 400;
		font-size: 18px;
		line-height: 1.2;
		letter-spacing: -0.04em;
		text-align: center;
	}

	.site-footer .salam-social-links {
		justify-content: center;
		margin-top: 1.25rem;
		margin-bottom: 1.5rem;
	}

	.site-footer__bottom {
		flex-direction: column;
		margin-top: 1.5rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--salam-color-gold);
	}
}

@media (max-width: 479px) {
	.site-header__menu a,
	.site-header__mobile-menu a {
		font-size: 1.3125rem;
	}
}