/* --------------------------------------------------------------------------
   Structure du site : en-tête, navigation, contenu, pied de page.
   Tout ce qui n'est pas piloté par Elementor.
   -------------------------------------------------------------------------- */

.mhc-container {
	width: 100%;
	max-width: var(--mhc-wide);
	margin-inline: auto;
	padding-inline: var(--mhc-space-m);
}

/* --- Barre d'informations -------------------------------------------------
   Fine bande sombre au-dessus de la navigation : elle porte ce qu'un
   visiteur cherche en premier (quand, où) et les liens de service.
   -------------------------------------------------------------------------- */
.mhc-topbar {
	position: relative;
	background: var(--mhc-primary-dark);
	color: rgb(253 246 234 / 80%);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Trame de zellige en filigrane : la bande n'est pas un aplat. */
.mhc-topbar::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--mhc-pattern);
	opacity: 0.35;
	pointer-events: none;
}

.mhc-topbar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mhc-space-m);
	min-height: 38px;
}

.mhc-topbar__event {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mhc-space-s);
	margin: 0;
	font-weight: 600;
}

/* Chaque information est précédée d'une étoile : la puce reprend le motif
   du site plutôt qu'un point neutre. */
.mhc-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.mhc-topbar__item::before {
	content: "";
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	background: var(--mhc-accent);
	-webkit-mask-image: var(--mhc-star);
	mask-image: var(--mhc-star);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.mhc-topbar__tools {
	display: flex;
	align-items: center;
	gap: var(--mhc-space-s);
}

/* Sur fond sombre, le sélecteur de langue s'éclaircit. */
.mhc-topbar .mhc-langs a { color: rgb(253 246 234 / 70%); }
.mhc-topbar .mhc-langs a:hover,
.mhc-topbar .mhc-langs__item.is-current a { color: var(--mhc-accent); }
.mhc-topbar .mhc-langs--inline .mhc-langs__item + .mhc-langs__item {
	border-inline-start-color: rgb(253 246 234 / 22%);
}

/* --- Réseaux sociaux ------------------------------------------------------ */
.mhc-socials {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--mhc-space-s);
	border-inline-start: 1px solid rgb(253 246 234 / 22%);
}
.mhc-socials a {
	display: block;
	color: rgb(253 246 234 / 62%);
	text-decoration: none;
	transition: color var(--mhc-transition), transform var(--mhc-transition);
}
.mhc-socials a:hover,
.mhc-socials a:focus-visible {
	color: var(--mhc-accent);
	transform: translateY(-2px);
}

.mhc-social__icon {
	display: block;
	width: 17px;
	height: 17px;
}

@media (max-width: 860px) {
	.mhc-topbar__event .mhc-topbar__item:nth-child(n+2) { display: none; }
	.mhc-socials { display: none; }
}

/* --- En-tête -------------------------------------------------------------- */
.mhc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--mhc-cream);
	border-bottom: 1px solid var(--mhc-line);
}

.mhc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mhc-space-m);
	/* Le logo a besoin d'air au-dessus et au-dessous : une marge intérieure
	   plutôt qu'une hauteur imposée, pour que la barre s'adapte si le logo
	   change de format. */
	padding-block: var(--mhc-space-s);
	min-height: 92px;
}

/* --- Marque --------------------------------------------------------------- */
.mhc-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

/* L'étoile pivote lentement au survol du nom : le geste signale le lien
   sans déplacer quoi que ce soit. */
.mhc-brand__mark {
	display: block;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: var(--mhc-accent);
	transition: transform 720ms var(--mhc-anim-ease, ease);
}
.mhc-brand__mark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.mhc-brand:hover .mhc-brand__mark { transform: rotate(45deg); }

.mhc-brand__text { display: block; }

.mhc-brand__title {
	display: block;
	font-family: var(--mhc-font-display);
	font-size: 1.3125rem;
	font-weight: 800;
	letter-spacing: -0.012em;
	line-height: 1.1;
	color: var(--mhc-primary);
}
.mhc-brand__tagline {
	display: block;
	margin-top: 1px;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mhc-muted);
}
/* Variante avec logo envoyé depuis l'administration. */
.mhc-brand--image img { display: block; max-height: 52px; width: auto; }
.mhc-brand--image .custom-logo-link { display: block; }

/* --- Bouton d'action ------------------------------------------------------ */
.mhc-header__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	flex-shrink: 0;
	padding: 0.5rem 0.9375rem;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid var(--mhc-primary);
	border-radius: var(--mhc-radius);
	background: var(--mhc-primary);
	color: var(--mhc-cream);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 420ms var(--mhc-anim-ease, ease), border-color 420ms ease;
}

/* Le doré monte depuis le bas, comme sur les autres boutons du site. */
.mhc-header__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mhc-accent);
	transform: translateY(101%);
	transition: transform 480ms var(--mhc-anim-ease, ease);
}
.mhc-header__cta:hover,
.mhc-header__cta:focus-visible {
	color: var(--mhc-primary-dark);
	border-color: var(--mhc-accent);
}
.mhc-header__cta:hover::before,
.mhc-header__cta:focus-visible::before { transform: translateY(0); }

/* Flèche dessinée en bordures : deux traits suffisent, aucune image. */
.mhc-header__cta-arrow {
	width: 6px;
	height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 420ms var(--mhc-anim-ease, ease);
}
.mhc-header__cta:hover .mhc-header__cta-arrow { transform: rotate(45deg) translate(2px, -2px); }

/* --- Navigation ---------------------------------------------------------- */
.mhc-nav ul {
	display: flex;
	align-items: center;
	gap: var(--mhc-space-m);
	list-style: none;
	margin: 0;
	padding: 0;
}
.mhc-nav a {
	display: block;
	padding: var(--mhc-space-xs) 0;
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--mhc-primary);
	border-bottom: 2px solid transparent;
}
.mhc-nav a:hover,
.mhc-nav .current-menu-item > a,
.mhc-nav .current_page_item > a {
	color: var(--mhc-primary);
	border-bottom-color: var(--mhc-accent);
}

/* Bouton hamburger : masqué au-dessus de 860px. */
.mhc-nav-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid var(--mhc-line);
	border-radius: var(--mhc-radius);
	padding: 0.5rem 0.75rem;
	font: inherit;
	font-size: 0.875rem;
	color: var(--mhc-ink);
	cursor: pointer;
}
.mhc-nav-toggle__bars {
	display: block;
	width: 18px; height: 2px;
	background: currentColor;
	position: relative;
}
.mhc-nav-toggle__bars::before,
.mhc-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px; height: 2px;
	background: currentColor;
}
.mhc-nav-toggle__bars::before { top: -6px; }
.mhc-nav-toggle__bars::after  { top: 6px; }

@media (max-width: 860px) {
	.mhc-nav-toggle { display: inline-flex; }
	.mhc-nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--mhc-background);
		border-bottom: 1px solid var(--mhc-line);
		padding: var(--mhc-space-s) var(--mhc-space-m) var(--mhc-space-m);
		box-shadow: 0 8px 24px rgb(0 0 0 / 6%);
	}
	.mhc-nav.is-open { display: block; }
	.mhc-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.mhc-nav li { border-bottom: 1px solid var(--mhc-line); }
	.mhc-nav li:last-child { border-bottom: 0; }
	.mhc-nav a { padding: var(--mhc-space-s) 0; border-bottom: 0; }
}

/* --- Contenu ------------------------------------------------------------- */
.mhc-main { min-height: 50vh; }

/* Marges verticales appliquées aux gabarits classiques uniquement :
   une page montée avec Elementor gère ses propres espacements. */
.mhc-main--classic { padding-block: var(--mhc-space-xl); }

.mhc-article__header { margin-bottom: var(--mhc-space-l); }
.mhc-article__title { font-size: clamp(2rem, 4vw, 3rem); }
.mhc-article__meta {
	color: var(--mhc-muted);
	font-size: 0.875rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mhc-space-s);
}
.mhc-article__thumb { margin-bottom: var(--mhc-space-l); }
.mhc-article__thumb img { width: 100%; border-radius: var(--mhc-radius); }

/* Largeur de lecture confortable pour le contenu éditorial. */
.mhc-prose {
	max-width: var(--mhc-content);
	margin-inline: auto;
}
.mhc-prose > .alignwide  { max-width: var(--mhc-wide);  margin-inline: auto; }
.mhc-prose > .alignfull  { max-width: none; margin-inline: calc(50% - 50vw); width: 100vw; }

/* --- Liste d'articles ---------------------------------------------------- */
.mhc-archive__header { margin-bottom: var(--mhc-space-l); }
.mhc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--mhc-space-l);
}
.mhc-card {
	display: flex;
	flex-direction: column;
	gap: var(--mhc-space-s);
}
.mhc-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--mhc-radius);
}
.mhc-card__title { font-size: 1.25rem; margin: 0; }
.mhc-card__title a { text-decoration: none; }
.mhc-card__meta { color: var(--mhc-muted); font-size: 0.8125rem; }
.mhc-card__excerpt { color: var(--mhc-muted); margin: 0; }

/* --- Pagination ---------------------------------------------------------- */
.mhc-pagination { margin-top: var(--mhc-space-xl); }
.mhc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mhc-space-xs);
	justify-content: center;
}
.mhc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--mhc-line);
	border-radius: var(--mhc-radius);
	text-decoration: none;
}
.mhc-pagination .page-numbers.current {
	background: var(--mhc-primary);
	border-color: var(--mhc-primary);
	color: #fff;
}

/* --- Pied de page ----------------------------------------------------------
   Le pied de page referme ce que la barre du haut a ouvert : même fond
   sombre, mêmes arches de zellige aux extrémités, même trame. Ce n'est pas
   une zone de service reléguée en bas de page, c'est la dernière chose que
   voit un visiteur.
   -------------------------------------------------------------------------- */
.mhc-footer {
	position: relative;
	margin-top: var(--mhc-space-xl);
	overflow: hidden;
	background: var(--mhc-primary-dark);
	color: rgb(253 246 234 / 72%);
	font-size: 0.9375rem;
}

/* Trame en filigrane, celle des battants du portail. */
.mhc-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--mhc-panel-pattern);
	opacity: 0.6;
	pointer-events: none;
}

/* Arches d'encadrement, comme dans l'en-tête. */
.mhc-footer__ornament {
	position: absolute;
	top: 0;
	width: 260px;
	height: 230px;
	overflow: hidden;
	opacity: 0.16;
	pointer-events: none;
}
.mhc-footer__ornament--left  { left: 0; }
.mhc-footer__ornament--right { right: 0; transform: scaleX(-1); }
.mhc-footer__ornament svg { display: block; width: 100%; height: 100%; }

.mhc-footer__inner {
	position: relative;
	display: grid;
	/* La marque tient plus large, les trois listes de liens se resserrent, et
	   le bloc de coordonnées reprend de l'air : trois liens par colonne dans
	   une colonne aussi large qu'une autre laissaient du vide partout. */
	grid-template-columns: 1.25fr repeat(3, 0.9fr) 1.35fr;
	gap: var(--mhc-space-l);
	padding-block: var(--mhc-space-xl) var(--mhc-space-l);
}

/* --- Colonne de marque ----------------------------------------------------- */
/* Version claire du logo : les dimensions déclarées sur l'image réservent sa
   place avant qu'elle n'arrive, et la mise en page ne saute pas. */
.mhc-footer__logo {
	display: block;
	max-width: 232px;
	margin-bottom: var(--mhc-space-s);
}
.mhc-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Repli typographique, employé si le fichier venait à manquer. */
.mhc-footer__picto {
	display: block;
	width: 42px;
	height: 42px;
	margin-bottom: var(--mhc-space-s);
	color: var(--mhc-accent);
}
.mhc-footer__picto svg { display: block; width: 100%; height: 100%; }

.mhc-footer__name {
	margin: 0;
	font-family: var(--mhc-font-display);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.012em;
	color: #fff;
}

.mhc-footer__tagline {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mhc-accent);
}

/* Dates et lieu, séparés par un losange comme dans le bandeau. */
.mhc-footer__event {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: var(--mhc-space-m) 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(253 246 234 / 88%);
}
.mhc-footer__event span + span { display: inline-flex; align-items: center; gap: 0.75rem; }
.mhc-footer__event span + span::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--mhc-orange);
	transform: rotate(45deg);
}

.mhc-footer__socials {
	display: flex;
	gap: 0.875rem;
	list-style: none;
	margin: var(--mhc-space-m) 0 0;
	padding: 0;
}
.mhc-footer__socials a {
	display: block;
	color: rgb(253 246 234 / 62%);
	transition: color var(--mhc-transition), transform var(--mhc-transition);
}
.mhc-footer__socials a:hover,
.mhc-footer__socials a:focus-visible {
	color: var(--mhc-accent);
	transform: translateY(-2px);
}
.mhc-footer__socials .mhc-social__icon { width: 20px; height: 20px; }

/* Réseaux à gauche, langues à droite, une seule ligne. */
.mhc-footer__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mhc-space-s);
	margin-top: var(--mhc-space-s);
}
.mhc-footer__aside .mhc-footer__socials { margin: 0; }

/* --- Sélecteur de langue --------------------------------------------------- */
.mhc-footer__langs { display: flex; align-items: center; }

.mhc-footer__langs .mhc-langs__list {
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Chaque langue est un choix posé, pas une abréviation glissée dans une ligne
   de mentions : le drapeau, le nom, et une cible assez large pour le doigt. */
.mhc-footer__langs .mhc-langs__item + .mhc-langs__item { border-inline-start: 0; }

.mhc-footer__langs .mhc-langs__list { gap: 0.375rem; }

.mhc-footer__langs .mhc-langs a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3125rem 0.5rem;
	border-radius: 8px 0 8px 0;
	border: 1px solid rgb(217 164 65 / 24%);
	color: rgb(253 246 234 / 70%);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background var(--mhc-transition), border-color var(--mhc-transition), color var(--mhc-transition);
}
.mhc-footer__langs .mhc-langs a:hover,
.mhc-footer__langs .mhc-langs a:focus-visible {
	background: rgb(217 164 65 / 12%);
	border-color: var(--mhc-accent);
	color: #fff;
}

/* La langue affichée se distingue sans devenir un bouton de plus : elle est
   déjà là, il n'y a rien à y faire. */
.mhc-footer__langs .mhc-langs__item.is-current a {
	background: rgb(217 164 65 / 16%);
	border-color: rgb(217 164 65 / 52%);
	color: var(--mhc-cream, #fdf6ea);
}

.mhc-footer__langs .mhc-langs__flag { width: 17px; height: 12px; }

/* --- Colonnes de liens ----------------------------------------------------- */
.mhc-footer__column-title {
	margin: 0 0 var(--mhc-space-s);
	font-family: var(--mhc-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mhc-accent);
}

.mhc-footer__column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mhc-footer__column li + li { margin-top: 0.625rem; }

.mhc-footer__column a {
	position: relative;
	display: inline-block;
	color: rgb(253 246 234 / 72%);
	text-decoration: none;
	transition: color var(--mhc-transition);
}
.mhc-footer__column a:hover,
.mhc-footer__column a:focus-visible { color: #fff; }

/* Sur une page unique, le lien du pied de page signale lui aussi la section
   qu'on est en train de lire. */
.mhc-footer__column a.is-current-section { color: var(--mhc-accent); }

/* Le filet suit le sens de lecture, comme dans la navigation du haut. */
.mhc-footer__column a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--mhc-orange);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 340ms var(--mhc-anim-ease, ease);
}
.mhc-footer__column a:hover::after,
.mhc-footer__column a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* --- Zone de widgets ------------------------------------------------------- */
.mhc-footer__widgets {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--mhc-space-l);
	padding-bottom: var(--mhc-space-l);
}
.mhc-footer__widgets:empty { display: none; padding: 0; }
.mhc-footer .mhc-widget__title {
	margin: 0 0 var(--mhc-space-s);
	font-family: var(--mhc-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mhc-accent);
}

/* --- Barre de mentions ----------------------------------------------------- */
.mhc-footer__bar {
	position: relative;
	border-top: 1px solid rgb(253 246 234 / 12%);
	background: rgb(0 0 0 / 18%);
}

.mhc-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mhc-space-s);
	padding-block: var(--mhc-space-s);
	font-size: 0.8125rem;
}

.mhc-footer__copyright { margin: 0; color: rgb(253 246 234 / 58%); }

.mhc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mhc-space-s);
	list-style: none;
	margin: 0;
	padding: 0;
}
.mhc-footer__legal a {
	color: rgb(253 246 234 / 58%);
	text-decoration: none;
	transition: color var(--mhc-transition);
}
.mhc-footer__legal a:hover { color: var(--mhc-accent); }

/* Sur fond sombre, le sélecteur de langue s'éclaircit. */
.mhc-footer__bar .mhc-langs a { color: rgb(253 246 234 / 58%); }
.mhc-footer__bar .mhc-langs a:hover,
.mhc-footer__bar .mhc-langs__item.is-current a { color: var(--mhc-accent); }
.mhc-footer__bar .mhc-langs--inline .mhc-langs__item + .mhc-langs__item {
	border-inline-start-color: rgb(253 246 234 / 18%);
}

/* --- Rappel d'action, au seuil du pied de page -----------------------------
   Le visiteur qui descend jusqu'ici n'a pas trouvé plus haut ce qu'il
   cherchait, ou vient de finir sa lecture. Dans les deux cas les deux gestes
   du site lui sont redonnés, une dernière fois, avant les liens.
   -------------------------------------------------------------------------- */
.mhc-footer__call {
	position: relative;
	z-index: 1;
	border-bottom: 1px solid rgb(217 164 65 / 22%);
	background:
		linear-gradient( 100deg,
			rgb(217 164 65 / 10%) 0%,
			rgb(230 125 50 / 7%) 46%,
			rgb(217 164 65 / 4%) 100%
		);
}

.mhc-footer__call-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mhc-space-m);
	padding-block: var(--mhc-space-m);
}

.mhc-footer__call-text {
	margin: 0;
	font-family: var(--mhc-font-heading, inherit);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--mhc-cream, #fdf6ea);
}

.mhc-footer__call-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* --- Coordonnées ---------------------------------------------------------- */
.mhc-footer__dates {
	margin: 0 0 0.875rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mhc-accent);
}

.mhc-footer__coords {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.mhc-footer__coords li {
	display: grid;
	/* L'icône garde sa colonne : sur une adresse qui passe à la ligne, un
	   simple « flex » laisserait la seconde ligne se glisser sous elle. */
	grid-template-columns: 18px 1fr;
	gap: 0.625rem;
	align-items: start;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgb(253 246 234 / 72%);
	/* Une adresse électronique n'a pas de point de coupure : sans cela elle
	   force la colonne à sa largeur ou se brise au milieu d'un mot. */
	overflow-wrap: anywhere;
}

.mhc-footer__coord-icon {
	width: 18px;
	height: 18px;
	margin-top: 0.125rem;
	color: var(--mhc-accent);
	opacity: 0.85;
}

.mhc-footer__coords a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgb(217 164 65 / 28%);
	transition: color var(--mhc-transition), border-color var(--mhc-transition);
}
.mhc-footer__coords a:hover,
.mhc-footer__coords a:focus-visible {
	color: #fff;
	border-bottom-color: var(--mhc-accent);
}

/* --- Gestes pratiques ------------------------------------------------------ */
/* Le sélecteur passe par la colonne : « .mhc-footer__column ul » remet les
   marges à zéro et l'emporte sur un simple nom de classe. Le bouton restait
   collé à l'adresse malgré la marge écrite ici. */
.mhc-footer__column .mhc-footer__actions {
	/* L'écart avec l'adresse est plus grand que celui qui sépare les
	   coordonnées entre elles, 28 pixels contre 22 : le bouton n'appartient
	   pas à la liste, il la suit. Serré de près, il se lisait comme une
	   quatrième coordonnée. */
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	justify-items: start;
	gap: 0.4375rem;
}

.mhc-footer__action {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.375rem 0.6875rem;
	/* Deux angles sur quatre : la même coupe que les boutons du site. */
	border-radius: 9px 0 9px 0;
	border: 1px solid rgb(217 164 65 / 30%);
	background: rgb(217 164 65 / 7%);
	color: rgb(253 246 234 / 88%);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--mhc-transition), border-color var(--mhc-transition),
		color var(--mhc-transition), transform var(--mhc-transition);
}
.mhc-footer__action:hover,
.mhc-footer__action:focus-visible {
	background: rgb(217 164 65 / 16%);
	border-color: var(--mhc-accent);
	color: #fff;
	transform: translateX(3px);
}

.mhc-footer__action-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--mhc-accent);
}

/* --- Choix de l'agenda ------------------------------------------------------
   Le pliage revient au navigateur : « details » sait s'ouvrir, se fermer et
   s'annoncer aux lecteurs d'écran, et il fonctionne sans script.
   -------------------------------------------------------------------------- */
.mhc-footer__agenda { position: relative; }

/* Le triangle par défaut cède la place au chevron dessiné. */
.mhc-footer__agenda summary { list-style: none; }
.mhc-footer__agenda summary::-webkit-details-marker { display: none; }

.mhc-footer__agenda-chevron {
	width: 7px;
	height: 7px;
	margin-inline-start: 0.125rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.62;
	transition: transform 240ms var(--mhc-anim-ease, ease);
}
.mhc-footer__agenda[open] .mhc-footer__agenda-chevron {
	transform: translateY(1px) rotate(-135deg);
}

.mhc-footer__agenda[open] summary {
	background: rgb(217 164 65 / 16%);
	border-color: var(--mhc-accent);
	color: #fff;
}

/* La liste se pose sous le bouton, dans le flux : en position absolue elle
   passerait derrière la bande suivante, et il n'y a pas de place à gagner
   dans une colonne qui a déjà la sienne. */
.mhc-footer__agenda-list {
	margin: 0.375rem 0 0;
	padding: 0.3125rem;
	list-style: none;
	display: grid;
	gap: 0.125rem;
	border-radius: 9px 0 9px 0;
	border: 1px solid rgb(217 164 65 / 22%);
	background: rgb(34 17 9 / 62%);
}

.mhc-footer__agenda-list a {
	display: block;
	padding: 0.3125rem 0.5rem;
	border-radius: 6px 0 6px 0;
	color: rgb(253 246 234 / 74%);
	font-size: 0.75rem;
	text-decoration: none;
	transition: background var(--mhc-transition), color var(--mhc-transition);
}
.mhc-footer__agenda-list a:hover,
.mhc-footer__agenda-list a:focus-visible {
	background: rgb(217 164 65 / 14%);
	color: #fff;
}


/* La colonne de contact porte maintenant l'adresse et les deux gestes qui
   s'y rapportent : resserrée, elle grimpait à 317 pixels quand ses voisines
   en faisaient 170. On lui rend la largeur qu'il faut pour que l'adresse
   tienne en deux lignes. */
@media (max-width: 1180px) {
	.mhc-footer__inner { grid-template-columns: 1.1fr repeat(3, 0.86fr) 1.5fr; }
}

/* Sous 1080 pixels, cinq colonnes deviennent cinq filets. La marque passe
   alors sur toute la largeur : c'est le bloc le plus haut, et l'étaler
   remet les quatre autres au même niveau : les coordonnées s'alignent sur
   une ligne au lieu de s'écraser dans une colonne trop courte. */
@media (max-width: 1080px) {
	.mhc-footer__inner { grid-template-columns: repeat(3, 0.85fr) 1.45fr; }

	.mhc-footer__brand {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--mhc-space-m);
		padding-bottom: var(--mhc-space-s);
		border-bottom: 1px solid rgb(217 164 65 / 14%);
	}

	/* À plat, le logo n'a plus à porter la marge qui l'espaçait de ce qui le
	   suivait verticalement. */
	.mhc-footer__brand > * { margin: 0; }
	.mhc-footer__socials { margin-inline-start: auto; }
}

@media (max-width: 980px) {
	.mhc-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--mhc-space-m); }
	.mhc-footer__brand { grid-column: 1 / -1; }
	/* Le contact reste une colonne parmi les quatre : mis sur toute la
	   largeur, il laissait « Exposer » seul sur sa rangée avec un vide à
	   droite. Sur deux colonnes, les quatre listes forment un carré plein. */
	.mhc-footer__coords { grid-auto-flow: row; grid-auto-columns: auto; gap: 0.75rem; }
	.mhc-footer__ornament { width: 180px; height: 160px; }
	.mhc-footer__call-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
	/* La marque revient en pile : à plat, la signature se retrouvait à côté
	   du numéro d'édition, et son filet traversait la ligne entre les deux. */
	.mhc-footer__brand {
		display: block;
		border-bottom: 0;
		padding-bottom: 0;
	}
	.mhc-footer__brand > * { margin-top: var(--mhc-space-s); }
	.mhc-footer__socials { margin-inline-start: 0; }
}

@media (max-width: 560px) {
	.mhc-footer__inner { grid-template-columns: 1fr; }
	.mhc-footer__ornament { display: none; }
	.mhc-footer__bar-inner { justify-content: flex-start; }
	.mhc-footer__call-actions { width: 100%; }
	.mhc-footer__call-actions .mhc-btn { flex: 1; justify-content: center; }
}

/* --- Recherche / 404 ----------------------------------------------------- */
.mhc-search-form { display: flex; gap: var(--mhc-space-xs); max-width: 420px; }
.mhc-search-form input[type="search"] {
	flex: 1;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--mhc-line);
	border-radius: var(--mhc-radius);
	font: inherit;
}
.mhc-search-form button {
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: var(--mhc-radius);
	background: var(--mhc-primary);
	color: #fff;
	font: inherit;
	cursor: pointer;
	transition: background var(--mhc-transition);
}
.mhc-search-form button:hover { background: var(--mhc-accent); color: var(--mhc-ink); }

.mhc-404 { text-align: center; padding-block: var(--mhc-space-xl); }
.mhc-404__code {
	font-family: var(--mhc-font-display);
	font-weight: 800;
	font-size: clamp(4rem, 12vw, 8rem);
	color: var(--mhc-line);
	line-height: 1;
	margin: 0;
}
.mhc-404 .mhc-search-form { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Boutons
   Partagés entre les gabarits du thème et les widgets Elementor.
   -------------------------------------------------------------------------- */
.mhc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9375rem 2rem;
	border: 1px solid transparent;

	/* Deux angles arrondis, deux angles vifs : la silhouette reprend la
	   découpe des tesselles du zellige, où carrés et losanges s'imbriquent.
	   L'arrondi porte sur la diagonale haut-gauche / bas-droite, dans le sens
	   de lecture. */
	border-radius: var(--mhc-btn-corner, 14px) 0 var(--mhc-btn-corner, 14px) 0;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--mhc-transition),
		border-color var(--mhc-transition),
		color var(--mhc-transition),
		transform var(--mhc-transition);
}
.mhc-btn:hover,
.mhc-btn:focus-visible { transform: translateY(-2px); }

.mhc-btn--primary {
	background: var(--mhc-accent);
	border-color: var(--mhc-accent);
	color: var(--mhc-primary-dark);
}
.mhc-btn--primary:hover,
.mhc-btn--primary:focus-visible {
	background: var(--mhc-accent-soft);
	border-color: var(--mhc-accent-soft);
	color: var(--mhc-primary-dark);
}

.mhc-btn--secondary {
	background: rgb(255 255 255 / 10%);
	border-color: rgb(255 255 255 / 55%);
	color: #fff;
	backdrop-filter: blur(6px);
}
.mhc-btn--secondary:hover,
.mhc-btn--secondary:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--mhc-primary-dark);
}

.mhc-btn--gold {
	background: var(--mhc-accent);
	border-color: var(--mhc-accent);
	color: var(--mhc-primary-dark);
}
.mhc-btn--gold:hover,
.mhc-btn--gold:focus-visible {
	background: #fff;
	border-color: #fff;
}

.mhc-btn--ghost {
	background: transparent;
	border-color: rgb(255 255 255 / 45%);
	color: #fff;
}
.mhc-btn--ghost:hover,
.mhc-btn--ghost:focus-visible {
	background: rgb(255 255 255 / 12%);
	border-color: #fff;
}

.mhc-btn--solid {
	background: var(--mhc-primary);
	border-color: var(--mhc-primary);
	color: #fff;
}
.mhc-btn--solid:hover,
.mhc-btn--solid:focus-visible {
	background: var(--mhc-primary-dark);
	border-color: var(--mhc-primary-dark);
}

/* --------------------------------------------------------------------------
   Sélecteur de langue
   -------------------------------------------------------------------------- */
.mhc-langs__list {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mhc-langs a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--mhc-muted);
	transition: color var(--mhc-transition);
}

/* Le drapeau reste sobre : petit, légèrement arrondi, et grisé tant que la
   langue n'est pas active. Le sélecteur doit se lire d'un coup d'œil, pas
   attirer l'œil en permanence. */
.mhc-langs__flag {
	display: block;
	width: 18px;
	height: 12px;
	flex-shrink: 0;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
	opacity: 0.55;
	filter: saturate(0.65);
	transition: opacity var(--mhc-transition), filter var(--mhc-transition);
}
.mhc-langs a:hover .mhc-langs__flag,
.mhc-langs__item.is-current .mhc-langs__flag {
	opacity: 1;
	filter: none;
}
.mhc-langs a:hover { color: var(--mhc-primary); }
.mhc-langs__item.is-current a { color: var(--mhc-primary); }

/* Séparateur discret entre les langues. */
.mhc-langs--inline .mhc-langs__item + .mhc-langs__item {
	border-inline-start: 1px solid var(--mhc-line);
}

/* Variante déroulante. */
.mhc-langs--dropdown { position: relative; }
.mhc-langs--dropdown .mhc-langs__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.625rem;
	background: none;
	border: 1px solid var(--mhc-line);
	border-radius: var(--mhc-radius);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--mhc-ink);
	cursor: pointer;
}
.mhc-langs__chevron {
	width: 0; height: 0;
	border-inline: 4px solid transparent;
	border-block-start: 5px solid currentColor;
}
.mhc-langs--dropdown .mhc-langs__list {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 6px);
	z-index: 20;
	display: none;
	flex-direction: column;
	align-items: stretch;
	min-width: 128px;
	padding: 0.25rem;
	background: var(--mhc-background);
	border: 1px solid var(--mhc-line);
	border-radius: var(--mhc-radius);
	box-shadow: 0 12px 32px rgb(0 0 0 / 10%);
}
.mhc-langs--dropdown.is-open .mhc-langs__list { display: flex; }
.mhc-langs--dropdown .mhc-langs__item + .mhc-langs__item { border: 0; }
.mhc-langs--dropdown .mhc-langs a { padding: 0.5rem 0.75rem; }


/* --- Pied du panneau de navigation ----------------------------------------
   Sur petit écran, il reprend les outils que la barre d'informations masque.
   -------------------------------------------------------------------------- */
/* Ces deux blocs n'existent que dans le panneau déroulant.

   Le sélecteur du bouton passe par « .mhc-nav » : c'est un lien, et la règle
   qui donne « display: block » aux entrées du menu est plus spécifique qu'une
   simple classe. Sans cela, le bouton reste affiché sur grand écran, au
   milieu de la barre, son icône dépliée faute de dimensions. */
.mhc-nav__foot { display: none; }
.mhc-nav .mhc-nav__cta { display: none; }

/* Dimensions posées hors de toute condition : une icône sans taille se
   déploie à la dimension de son cadre. */
.mhc-nav__cta svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

@media (max-width: 860px) {
	.mhc-nav__foot {
		display: block;
		margin-top: var(--mhc-space-s);
		padding-top: var(--mhc-space-s);
		border-top: 1px solid var(--mhc-line);
	}
	.mhc-nav__foot .mhc-langs__list { justify-content: flex-start; }
	.mhc-nav__foot .mhc-langs a { padding: 0.5rem 0.75rem 0.5rem 0; }
}

/* Sur écran étroit, le bouton d'action se resserre plutôt que de disparaître :
   c'est l'action principale du site. */
@media (max-width: 980px) {
	.mhc-header__cta {
		padding: 0.6875rem 1rem;
		font-size: 0.8125rem;
	}
	.mhc-header__cta-arrow { display: none; }
}

@media (max-width: 560px) {
	.mhc-brand__tagline { display: none; }
	.mhc-header__inner { min-height: 72px; padding-block: 0.75rem; }
}

/* --- Encadrement du header ------------------------------------------------
   Une arche de zellige à chaque extrémité de la barre. Elles sont posées en
   retrait, sous le contenu, et s'effacent dès que la place manque.
   -------------------------------------------------------------------------- */
.mhc-header { position: sticky; }

/* L'encadrement se recadre lui-même, puisque la barre ne masque plus ce qui
   dépasse d'elle. */
.mhc-header__ornament {
	position: absolute;
	overflow: hidden;
	bottom: 0;
	z-index: 0;
	width: 220px;
	height: 100%;
	opacity: 0.22;
	pointer-events: none;
	transition: opacity 420ms var(--mhc-anim-ease, ease);
}
.mhc-header__ornament--left  { left: 0; }
.mhc-header__ornament--right { right: 0; transform: scaleX(-1); }

.mhc-header__ornament svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Le contenu de la barre passe devant l'encadrement. */
.mhc-header__inner { position: relative; z-index: 1; }

/* Barre resserrée : l'encadrement s'efface pour ne pas encombrer. */
.mhc-header.is-scrolled .mhc-header__ornament { opacity: 0.1; }

/* Sous 1200 px, la barre est pleine : l'encadrement gênerait la lecture. */
@media (max-width: 1200px) {
	.mhc-header__ornament { display: none; }
}


/* --- Voûte de l'en-tête ----------------------------------------------------
   Trois arcs pendent sous la barre et prolongent la courbe du bandeau. Comme
   ils appartiennent à l'en-tête, qui est collant, ils suivent le défilement.

   La difficulté est qu'ils passent au-dessus de sections tantôt claires,
   tantôt sombres. Un trait doré discret disparaît sur le crème ; un trait
   franc alourdit le marron. D'où le parti pris : les arcs sont portés par
   une retombée qui prolonge la couleur de la barre, et c'est ce fond qui
   leur donne un contraste constant, quelle que soit la section traversée.
   -------------------------------------------------------------------------- */
.mhc-header__vault {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	height: var(--mhc-vault-height, 46px);
	overflow: hidden;
	pointer-events: none;

	/* Un z-index négatif la ferait peindre avant les blocs en flux du
	   contexte, et le contenu de la page la recouvrirait dès qu'il défile
	   dessous. Elle est géométriquement sous la barre : rien n'entre en
	   concurrence, elle peut passer devant. */
	z-index: 1;
}

/* Retombée : la couleur de la barre se prolonge et s'éteint. C'est elle qui
   rend les arcs lisibles sur n'importe quel fond. */
.mhc-header__vault::before {
	content: "";
	position: absolute;
	inset-inline: -2vw;
	top: -1px;
	height: 100%;
	background: linear-gradient( 180deg,
		var(--mhc-cream) 0%,
		rgb(253 246 234 / 62%) 38%,
		rgb(253 246 234 / 0%) 100%
	);
	border-radius:
		var(--mhc-hero-arch-h, 34vw) var(--mhc-hero-arch-h, 34vw) 0 0 /
		var(--mhc-hero-arch-v, 3.5vw) var(--mhc-hero-arch-v, 3.5vw) 0 0;
	/* La retombée s'efface sur les côtés pour rejoindre le bord de la page
	   sans marquer de rupture. */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
}

.mhc-header__vault-ring {
	position: absolute;
	top: calc( var(--mhc-ring) * -3px );
	left: calc( ( var(--mhc-ring) + 1 ) * -1.6vw );
	right: calc( ( var(--mhc-ring) + 1 ) * -1.6vw );
	height: 26vw;

	border-top: 1px solid rgb(168 122 34 / 40%);
	border-top-color: rgb( from var(--mhc-accent-deep) r g b / calc( 46% - var(--mhc-ring) * 13% ) );
	border-radius:
		calc( var(--mhc-hero-arch-h, 34vw) + var(--mhc-ring) * 5vw )
		calc( var(--mhc-hero-arch-h, 34vw) + var(--mhc-ring) * 5vw ) 0 0 /
		calc( var(--mhc-hero-arch-v, 3.5vw) + var(--mhc-ring) * 1vw )
		calc( var(--mhc-hero-arch-v, 3.5vw) + var(--mhc-ring) * 1vw ) 0 0;

	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 16%, #000 84%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 16%, #000 84%, transparent );
}

/* Barre resserrée : la retombée se raccourcit, sans disparaître. */
.mhc-header.is-scrolled .mhc-header__vault { --mhc-vault-height: 34px; }

.mhc-header__vault {
	transition: height 320ms var(--mhc-anim-ease, ease);
}

@media (max-width: 780px) {
	.mhc-header__vault { --mhc-vault-height: 32px; }
}


/* --- Entrée du menu --------------------------------------------------------
   Les entrées se posent l'une après l'autre au chargement. Le mouvement est
   court et ne se joue qu'une fois : il accompagne l'arrivée sur la page, il
   ne cherche pas à se faire remarquer.
   -------------------------------------------------------------------------- */
@keyframes mhc-nav-in {
	from { opacity: 0; transform: translateY(-9px); }
	to   { opacity: 1; transform: none; }
}

.mhc-nav > ul > li {
	opacity: 0;
	animation: mhc-nav-in 520ms var(--mhc-anim-ease, ease) forwards;
}

.mhc-nav > ul > li:nth-child(1) { animation-delay: 120ms; }
.mhc-nav > ul > li:nth-child(2) { animation-delay: 180ms; }
.mhc-nav > ul > li:nth-child(3) { animation-delay: 240ms; }
.mhc-nav > ul > li:nth-child(4) { animation-delay: 300ms; }
.mhc-nav > ul > li:nth-child(5) { animation-delay: 360ms; }
.mhc-nav > ul > li:nth-child(6) { animation-delay: 420ms; }
.mhc-nav > ul > li:nth-child(7) { animation-delay: 480ms; }
.mhc-nav > ul > li:nth-child(8) { animation-delay: 540ms; }
.mhc-nav > ul > li:nth-child(n+9) { animation-delay: 600ms; }

/* Le panneau déroulant sur petit écran s'ouvre à la demande : rejouer
   l'entrée à chaque ouverture serait pénible. */
@media (max-width: 860px) {
	.mhc-nav > ul > li { opacity: 1; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mhc-nav > ul > li,
	.mhc-header__cta { opacity: 1; animation: none; }
}


/* Icône du bouton d'action : un stand, auvent et comptoir. */
.mhc-header__cta-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	transition: transform 420ms var(--mhc-anim-ease, ease);
}
.mhc-header__cta:hover .mhc-header__cta-icon { transform: translateY(-1px) scale(1.06); }

/* --- Arrivée de la marque --------------------------------------------------
   Le logo se pose d'abord au centre de la barre, s'y tient un instant, puis
   rejoint sa place à gauche.

   La distance à parcourir est calculée, non devinée : la barre est centrée
   et large d'au plus 1200 px, donc son bord gauche se trouve à 600 px du
   centre, moins la marge intérieure. Reste à retrancher la moitié de la
   largeur du logo : d'où le « 50 % », qui se rapporte à l'élément lui-même.
   -------------------------------------------------------------------------- */
.mhc-brand {
	--mhc-brand-travel: calc( 50vw - var(--mhc-space-m) - 50% );
}

@media (min-width: 1200px) {
	.mhc-brand {
		--mhc-brand-travel: calc( 600px - var(--mhc-space-m) - 50% );
	}
}

@keyframes mhc-brand-in {
	0% {
		opacity: 0;
		transform: translateX( var(--mhc-brand-travel) ) scale(1.06);
	}
	/* Le logo est posé et lisible dès le tiers de la séquence. */
	34% {
		opacity: 1;
		transform: translateX( var(--mhc-brand-travel) ) scale(1);
	}
	/* Palier bref : juste de quoi marquer le temps d'arrêt, sans faire
	   attendre. */
	44% {
		opacity: 1;
		transform: translateX( var(--mhc-brand-travel) ) scale(1);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.mhc-brand {
	opacity: 0;
	animation: mhc-brand-in 1080ms var(--mhc-anim-ease, ease) 100ms forwards;
}

/* --- Arrivée de la barre d'informations ------------------------------------
   Elle reste hors champ tant que les battants sont fermés, puis se glisse
   au-dessus de la navigation au moment où ils s'écartent : la barre paraît
   s'épaissir plutôt que d'avoir toujours été là.

   Le retrait passe par une marge négative et non par un déplacement : ainsi
   elle n'occupe aucune place tant qu'elle est absente, et la page ne réserve
   pas un vide en haut. */
@keyframes mhc-topbar-drop {
	from { margin-top: -64px; opacity: 0; }
	60%  { opacity: 1; }
	to   { margin-top: 0; opacity: 1; }
}

@keyframes mhc-topbar-content-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.mhc-topbar {
	animation: mhc-topbar-drop 640ms cubic-bezier(0.34, 0.8, 0.3, 1) 820ms both;
}
.mhc-topbar__inner > * {
	opacity: 0;
	animation: mhc-topbar-content-in 460ms ease 1180ms forwards;
}
.mhc-topbar__tools { animation-delay: 1290ms; }

/* Le menu attend que le logo ait rejoint sa place. */
.mhc-nav > ul > li:nth-child(1) { animation-delay: 860ms; }
.mhc-nav > ul > li:nth-child(2) { animation-delay: 915ms; }
.mhc-nav > ul > li:nth-child(3) { animation-delay: 970ms; }
.mhc-nav > ul > li:nth-child(4) { animation-delay: 1025ms; }
.mhc-nav > ul > li:nth-child(5) { animation-delay: 1080ms; }
.mhc-nav > ul > li:nth-child(6) { animation-delay: 1135ms; }
.mhc-nav > ul > li:nth-child(7) { animation-delay: 1190ms; }
.mhc-nav > ul > li:nth-child(8) { animation-delay: 1245ms; }
.mhc-nav > ul > li:nth-child(n+9) { animation-delay: 1300ms; }

/* Le bouton d'action entre par la droite, en dernier. */
.mhc-header__cta { opacity: 0; }

@keyframes mhc-cta-in {
	from { opacity: 0; transform: translateX(28px); }
	to   { opacity: 1; transform: none; }
}
.mhc-header__cta {
	animation: mhc-cta-in 520ms var(--mhc-anim-ease, ease) 1340ms forwards;
}

@media (prefers-reduced-motion: reduce) {
	.mhc-brand,
	.mhc-topbar,
	.mhc-topbar__inner > *,
	.mhc-header__cta {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   En-tête sur petit écran

   La barre doit tenir trois choses dans très peu de place : l'identité, la
   navigation et l'action principale. L'ordre de sacrifice est celui-ci,
   le slogan part le premier, puis le libellé du menu, puis le bouton, qui
   réapparaît en pleine largeur dans le panneau déroulant où il est bien plus
   facile à atteindre.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	/* Le logo ne doit jamais être comprimé par ses voisins. */
	.mhc-brand { flex-shrink: 0; }
	.mhc-brand--image img { max-height: 44px; }
}

@media (max-width: 860px) {
	.mhc-header__inner {
		min-height: 76px;
		padding-block: 0.75rem;
		gap: var(--mhc-space-s);
	}

	/* Le bouton passe dans le panneau : dans la barre, il rivalisait avec le
	   menu pour quelques pixels et rendait les deux difficiles à viser. */
	.mhc-header__cta { display: none; }

	.mhc-nav-toggle {
		margin-inline-start: auto;
		padding: 0.5rem 0.75rem;
	}

	/* Le panneau reprend le bouton, en pleine largeur.

	   Le sélecteur passe par « .mhc-nav » : sans cela, la règle qui colore
	   les entrées du menu l'emporterait en spécificité et peindrait le
	   libellé en marron sur un fond marron. */
	.mhc-nav .mhc-nav__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: var(--mhc-space-m);
		padding: 1rem 1.25rem;
		border: 0;
		border-radius: var(--mhc-radius);
		background: var(--mhc-primary);
		color: var(--mhc-cream);
		font-size: 0.9375rem;
		font-weight: 700;
		text-decoration: none;
	}
	.mhc-nav .mhc-nav__cta:hover,
	.mhc-nav .mhc-nav__cta:focus-visible {
		background: var(--mhc-accent);
		color: var(--mhc-primary-dark);
	}

	/* Le filet qui souligne les entrées n'a pas lieu d'être sur un bouton. */
	.mhc-nav .mhc-nav__cta::after { display: none; }

	.mhc-nav .mhc-nav__cta svg {
		width: 17px;
		height: 17px;
		flex-shrink: 0;
		margin-inline-end: 0.5rem;
	}

	/* L'entrée du panneau ne porte pas de séparateur sous le bouton. */
	.mhc-nav li:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
	.mhc-header__inner { min-height: 68px; padding-block: 0.625rem; }
	.mhc-brand--image img { max-height: 38px; }

	/* Le libellé « Menu » cède la place : l'icône est comprise sans lui. */
	.mhc-nav-toggle span:not(.mhc-nav-toggle__bars) {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.mhc-nav-toggle {
		width: 44px; height: 44px;
		justify-content: center;
		padding: 0;
	}

	/* La barre d'informations garde les dates, seule information vraiment
	   utile à cette taille. */
	.mhc-topbar { font-size: 0.6875rem; letter-spacing: 0.1em; }
	.mhc-topbar__inner { min-height: 34px; }
	.mhc-langs a { padding: 0.25rem 0.375rem; }
	.mhc-langs__flag { width: 16px; height: 11px; }
}

/* Le panneau déroulant occupe toute la hauteur restante et défile : avec un
   menu long, les dernières entrées devenaient inatteignables. */
@media (max-width: 860px) {
	.mhc-nav {
		max-height: calc( 100vh - 76px );
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.mhc-nav a { font-size: 1rem; }
}


/* Icône de bouton : elle précède le libellé et se décale légèrement au
   survol, dans le même sens que le remplissage qui monte. */
.mhc-btn__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform 420ms var(--mhc-anim-ease, ease);
}
.mhc-btn:hover .mhc-btn__icon,
.mhc-btn:focus-visible .mhc-btn__icon { transform: translateY(-2px); }

/* Le bouton d'en-tête suit la même silhouette, à son échelle. */
.mhc-header__cta { --mhc-btn-corner: 10px; }
.mhc-header__cta {
	border-radius: var(--mhc-btn-corner) 0 var(--mhc-btn-corner) 0;
}
.mhc-nav .mhc-nav__cta {
	border-radius: var(--mhc-btn-corner, 12px) 0 var(--mhc-btn-corner, 12px) 0;
}

/* --- Voûte et portail ------------------------------------------------------
   La voûte pend sous la navigation, donc au-dessus du bandeau. Tant que les
   battants sont fermés, elle n'a rien à surplomber : elle passerait par-dessus
   eux comme une barre dorée en travers d'une porte close. Elle attend donc
   leur écartement pour se poser.

   La condition porte sur la présence d'un portail dans la page : ailleurs, la
   voûte s'affiche sans délai.
   -------------------------------------------------------------------------- */
@keyframes mhc-vault-in {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

body:has(.mhc-hero-video--intro) .mhc-header__vault {
	opacity: 0;
	animation: mhc-vault-in 600ms var(--mhc-anim-ease, ease) 980ms forwards;
}

/* Le liseré qui referme la voûte sur l'arête du bandeau attend lui aussi.

   Il est porté par une ombre, non par un élément : c'est donc elle qu'on
   retarde, et surtout pas l'opacité du bandeau. Une animation posée sur ce
   dernier avec « both » applique son état de départ dès le premier instant :
   le bandeau restait transparent jusqu'au délai, et la page s'ouvrait sur du
   vide. */
@keyframes mhc-hero-edge-in {
	from { box-shadow: 0 -1px 0 0 rgb(217 164 65 / 0%); }
	to   { box-shadow: 0 -1px 0 0 rgb(217 164 65 / 30%); }
}

body:has(.mhc-hero-video--intro) .mhc-hero-video--arched {
	animation: mhc-hero-edge-in 600ms var(--mhc-anim-ease, ease) 980ms both;
}

@media (prefers-reduced-motion: reduce) {
	body:has(.mhc-hero-video--intro) .mhc-header__vault {
		opacity: 1;
		transform: none;
		animation: none;
	}
	body:has(.mhc-hero-video--intro) .mhc-hero-video--arched {
		animation: none;
		box-shadow: 0 -1px 0 0 rgb(217 164 65 / 30%);
	}
}

/* --- Crédit de l'organisateur ----------------------------------------------
   Le groupe qui produit le salon est cité sous la marque de l'évènement,
   séparé par un filet. C'est une signature, pas une seconde marque : la
   mention reste petite, le nom se lit sans effort, et rien ne vient
   concurrencer le nom du salon placé au-dessus.
   -------------------------------------------------------------------------- */
.mhc-organiser {
	margin-top: var(--mhc-space-s);
	padding-top: var(--mhc-space-s);
	border-top: 1px solid rgb(253 246 234 / 12%);
}

.mhc-organiser__label {
	margin: 0 0 0.3125rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgb(253 246 234 / 48%);
}

.mhc-organiser__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: rgb(253 246 234 / 88%);
	transition: color var(--mhc-transition);
}
.mhc-organiser__link:hover,
.mhc-organiser__link:focus-visible { color: var(--mhc-accent); }

.mhc-organiser__name {
	font-family: var(--mhc-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.008em;
}

.mhc-organiser__logo {
	display: block;
	max-width: 126px;
	max-height: 28px;
	width: auto;
	height: auto;
}

/* Flèche dessinée en bordures, comme celle du bouton d'en-tête. */
.mhc-organiser__arrow {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--mhc-transition);
}
.mhc-organiser__link:hover .mhc-organiser__arrow {
	transform: rotate(45deg) translate(2px, -2px);
}

/* Logo de l'organisateur, injecté dans la page pour prendre la couleur du
   pied : ses tracés d'origine sont d'un brun presque noir, illisible ici. */
.mhc-organiser__mark {
	display: block;
	/* Réduit d'un tiers : sous le logo Marhaba, la signature créditait à
	   voix aussi haute que la marque qu'elle signe. */
	width: 118px;
	height: auto;
	fill: currentColor;
}

/* Il s'éclaire au survol comme le reste du bloc. */
.mhc-organiser__link:hover .mhc-organiser__mark { color: var(--mhc-accent); }

/* --- Numéro d'édition ------------------------------------------------------
   Il ouvre la barre d'informations, détaché du reste par un fond : c'est un
   repère de notoriété : une cinquième édition n'est pas un premier essai,
   et il doit se lire avant les dates.
   -------------------------------------------------------------------------- */
.mhc-topbar__edition {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.5rem;
	border-radius: 3px 0 3px 0;
	background: var(--mhc-accent);
	color: var(--mhc-primary-dark);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

/* Dans la barre, il ne porte pas la puce en étoile des autres informations. */
.mhc-topbar__edition::before { content: none; }

.mhc-footer__edition {
	display: inline-flex;
	align-items: center;
	margin: var(--mhc-space-s) 0 0;
	padding: 0.25rem 0.625rem;
	border: 1px solid rgb(217 164 65 / 42%);
	border-radius: 4px 0 4px 0;
	color: var(--mhc-accent);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (max-width: 560px) {
	.mhc-topbar__edition { padding: 0.125rem 0.375rem; letter-spacing: 0.08em; }
}

/* --------------------------------------------------------------------------
   Bandeau de consentement

   Posé en bas et non en plein écran : le visiteur doit pouvoir lire la page
   pour décider en connaissance de cause. Un voile modal qui bloque tout
   pousse à cliquer « accepter » pour s'en débarrasser, ce qui n'est pas un
   consentement.
   -------------------------------------------------------------------------- */
.mhc-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	/* Au-dessus de l'en-tête (100), sous les battants d'ouverture. */
	z-index: 120;
	padding: var(--mhc-space-s);
	transform: translateY(110%);
	transition: transform 420ms var(--mhc-anim-ease, cubic-bezier(0.22, 1, 0.36, 1));
	/* Le conteneur est pleine largeur mais transparent autour de sa carte : il
	   ne doit pas intercepter le pointeur dans ces marges vides, sans quoi il
	   bloque le survol du contenu placé dessous (les pavillons, par exemple).
	   Seule la carte visible, plus bas, reprend les évènements. */
	pointer-events: none;
}
.mhc-consent__inner { pointer-events: auto; }
.mhc-consent.is-open { transform: none; }
.mhc-consent[hidden] { display: none; }

.mhc-consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mhc-space-m);
	max-width: 1180px;
	margin-inline: auto;
	padding: var(--mhc-space-m);
	/* La même coupe que les boutons, deux angles sur quatre. */
	border-radius: 16px 0 16px 0;
	border: 1px solid rgb(217 164 65 / 34%);
	background: var(--mhc-espresso, #221109);
	box-shadow: 0 18px 60px rgb(34 17 9 / 46%);
}

.mhc-consent__text { flex: 1 1 30ch; }

.mhc-consent__title {
	margin: 0 0 0.375rem;
	font-family: var(--mhc-font-heading, inherit);
	font-size: 1rem;
	font-weight: 700;
	color: var(--mhc-cream, #fdf6ea);
}

.mhc-consent__body {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: rgb(253 246 234 / 70%);
}

.mhc-consent__body a {
	color: var(--mhc-accent);
	text-decoration: none;
	border-bottom: 1px solid rgb(217 164 65 / 40%);
}
.mhc-consent__body a:hover { border-bottom-color: var(--mhc-accent); }

.mhc-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

/* Les deux réponses ont la même taille et la même place : refuser ne doit pas
   coûter plus cher qu'accepter. */
.mhc-consent__button {
	min-width: 128px;
	justify-content: center;
	padding-block: 0.625rem;
	font-size: 0.8125rem;
}

@media (max-width: 620px) {
	.mhc-consent__inner { padding: var(--mhc-space-s); }
	.mhc-consent__actions { width: 100%; }
	.mhc-consent__button { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mhc-consent { transition: none; }
}

/* Le lien de révocation est un bouton : il n'emmène nulle part, il rouvre le
   bandeau. Il prend l'apparence de ses voisins sans en usurper la nature. */
.mhc-footer__consent {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: rgb(253 246 234 / 58%);
	cursor: pointer;
	transition: color var(--mhc-transition);
}
.mhc-footer__consent:hover,
.mhc-footer__consent:focus-visible { color: var(--mhc-accent); }


/* --------------------------------------------------------------------------
   Retour en haut

   L'anneau du pourtour porte l'avancée de la lecture. Il est dessiné en
   « conic-gradient » masqué en son centre : la couleur tourne avec la
   progression, et le masque n'en laisse que l'anneau. Un SVG aurait fait la
   même chose au prix d'un élément de plus et d'un « stroke-dasharray » à
   recalculer à chaque redimensionnement.
   -------------------------------------------------------------------------- */
.mhc-totop {
	position: fixed;
	right: clamp(1rem, 2.5vw, 2rem);
	bottom: clamp(1rem, 2.5vw, 2rem);
	/* Au-dessus de l'en-tête (100), sous le bandeau de consentement (120) :
	   tant qu'un choix n'est pas fait, il ne dispute pas la place. */
	z-index: 110;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0;
	transform: translateY(14px) scale(0.9);
	transition: opacity 320ms var(--mhc-anim-ease, ease),
		transform 320ms var(--mhc-anim-ease, ease);
}
.mhc-totop[hidden] { display: none; }
.mhc-totop.is-visible { opacity: 1; transform: none; }

/* Le corps du bouton : la coupe du site, le motif du portail en filigrane. */
.mhc-totop::before {
	content: "";
	position: absolute;
	inset: 4px;
	/* Les mêmes rayons que le tracé : deux angles francs de 13, deux
	   adoucis de 6. Un dessin qui ne suit pas son anneau se voit tout de
	   suite, le corps débordant d'un côté et rentrant de l'autre. */
	border-radius: 11px 4px 11px 4px;
	background-color: var(--mhc-espresso, #221109);
	background-image: var(--mhc-tex-zellige-dark);
	background-size: 74px 74px;
	box-shadow: 0 10px 30px rgb(34 17 9 / 42%);
	transition: background-color var(--mhc-transition), box-shadow var(--mhc-transition);
}

/* L'anneau de progression : deux tracés superposés, l'un continu pour la
   rainure, l'autre coupé à la mesure de ce qui a été lu.

   La longueur du contour est mesurée en JavaScript et posée dans
   « --mhc-ring ». L'attribut « pathLength » aurait dû suffire à ramener
   cette longueur à l'unité, mais le pointillé restait exprimé en pixels et
   l'anneau ne bougeait plus entre un quart et la totalité. Une mesure vaut
   mieux qu'une déclaration qu'on croit comprise. */
.mhc-totop__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	overflow: visible;
}

/* La rainure est brune et non dorée : en or pâle sur un fond crème, elle se
   confondait avec la progression et l'anneau paraissait plein en
   permanence. C'est le contraste entre les deux tracés qui porte
   l'information, non leur présence. */
.mhc-totop__track {
	stroke: rgb(62 36 21 / 16%);
	stroke-width: 1.5;
}

.mhc-totop__progress {
	stroke: var(--mhc-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	/* Le pointillé est posé par le script, en nombres. Écrit ici en
	   « calc() » sur des variables, il se calculait juste : le navigateur
	   rendait bien « 47.69px, 167.7px » : sans jamais couper le tracé, qui
	   restait plein. */
}

.mhc-totop__arrow {
	position: relative;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--mhc-gold-soft, #efd9a3);
	border-left: 2px solid var(--mhc-gold-soft, #efd9a3);
	transform: translateY(2px) rotate(45deg);
	transition: transform 320ms var(--mhc-anim-ease, ease), border-color var(--mhc-transition);
}

.mhc-totop:hover::before,
.mhc-totop:focus-visible::before {
	background-color: var(--mhc-brown, #3e2415);
	box-shadow: 0 14px 38px rgb(34 17 9 / 54%);
}
.mhc-totop:hover .mhc-totop__arrow,
.mhc-totop:focus-visible .mhc-totop__arrow {
	transform: translateY(-1px) rotate(45deg);
	border-color: var(--mhc-accent);
}

.mhc-totop:focus-visible { outline: 2px solid var(--mhc-accent); outline-offset: 3px; }

@media (max-width: 560px) {
	.mhc-totop { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.mhc-totop { transition: none; }
	.mhc-totop__arrow { transition: none; }
}