/* --------------------------------------------------------------------------
   Styles des widgets Elementor du thème.

   Règle de conduite : on ne pose ici que le structurel. Tout ce qui est
   réglable depuis le panneau (couleurs, tailles, marges) est écrit par
   Elementor via les « selectors » des contrôles, et reste donc absent d'ici
   pour ne pas entrer en conflit.
   -------------------------------------------------------------------------- */

/* Section désactivée temporairement : son contenu reste en base, seulement
   masqué. Pour la réactiver, retirer la classe « mhc-section-disabled » du
   conteneur (ou cette règle). Sert au Programme tant qu'il n'est pas monté. */
.mhc-section-disabled { display: none !important; }

/* ==========================================================================
   Bandeau vidéo
   ========================================================================== */
.mhc-hero-video {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: var(--mhc-space-xl) var(--mhc-space-m);
	color: #fff;
	isolation: isolate;
}

.mhc-hero-video__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mhc-hero-video__poster {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.mhc-hero-video__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* Une iframe ne se recadre pas comme une vidéo : on l'agrandit au-delà du
   cadre et on la recentre pour obtenir le même effet de remplissage. */
.mhc-hero-video__media--embed {
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.77vh;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.mhc-hero-video__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.mhc-hero-video--patterned::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--mhc-pattern);
	opacity: 0.5;
	mix-blend-mode: overlay;
	pointer-events: none;
}

.mhc-hero-video__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--mhc-space-s);
	width: 100%;
}

.mhc-hero-video__eyebrow {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.mhc-hero-video__title {
	margin: 0;
	font-family: var(--mhc-font-display);
	font-weight: 800;
	/* Le titre porte une promesse, plus un nom de marque : il descend d'un
	   cran pour laisser les chiffres et les boutons exister. */
	font-size: clamp(2rem, 4.6vw, 3.75rem);
	line-height: 1.06;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

.mhc-hero-video__subtitle {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	line-height: 1.55;
}
.mhc-hero-video__subtitle { margin-inline: inherit; }

/* --- Chiffres du bandeau ---------------------------------------------------
   Ils portent la promesse à la place du nom de marque : ce que le visiteur
   vient chercher, pas ce que l'évènement s'appelle.
   -------------------------------------------------------------------------- */
.mhc-hero-video__figures {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin: var(--mhc-space-s) 0 0;
}

.mhc-hero-figure { text-align: inherit; }

.mhc-hero-figure__value {
	white-space: nowrap;
	margin: 0;
	font-family: var(--mhc-font-display);
	font-size: clamp(2.25rem, 5vw, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.012em;
	/* Chiffres de largeur fixe : le bloc ne tressaute pas pendant le comptage. */
	font-variant-numeric: tabular-nums;
	color: var(--mhc-accent);
}

.mhc-hero-figure__label {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 74%);
}

/* La rangée suit l'alignement décidé pour le bandeau : le conteneur est en
   colonne, « align-items » place donc déjà le bloc, et « justify-content »
   répartit les chiffres à l'intérieur. */
.mhc-hero-video__figures { justify-content: inherit; }

@media (max-width: 560px) {
	.mhc-hero-video__figures { gap: 1.25rem 2rem; }
	.mhc-hero-figure__value { font-size: 2rem; }
}

.mhc-hero-video__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mhc-space-s);
	margin-top: var(--mhc-space-m);
}

/* Indicateur de défilement : un trait qui descend en boucle. */
.mhc-hero-video__scroll {
	position: absolute;
	bottom: var(--mhc-space-m);
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 56px;
	overflow: hidden;
	background: rgb(255 255 255 / 25%);
}
.mhc-hero-video__scroll-line {
	display: block;
	width: 100%;
	height: 40%;
	background: var(--mhc-accent);
	animation: mhc-scroll-hint 2.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes mhc-scroll-hint {
	0%   { transform: translateY(-100%); }
	100% { transform: translateY(250%); }
}

/* Sur mobile, l'image de repli remplace la vidéo : chargement plus léger. */
@media (max-width: 780px) {
	.mhc-hero-video--poster-on-mobile .mhc-hero-video__media { display: none; }
	.mhc-hero-video__scroll { display: none; }
}

/* ==========================================================================
   Compte à rebours
   ========================================================================== */
.mhc-countdown { text-align: center; }

.mhc-countdown__intro {
	margin: 0 0 var(--mhc-space-s);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mhc-muted);
}

.mhc-countdown__units {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mhc-space-s);
}

.mhc-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	min-width: 96px;
	padding: var(--mhc-space-s) var(--mhc-space-m);
	border: 1px solid var(--mhc-line);
	border-radius: var(--mhc-radius);
}

.mhc-countdown__value {
	margin: 0;
	font-family: var(--mhc-font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.018em;
	/* Chiffres de largeur fixe : le bloc ne tressaute pas à chaque seconde. */
	font-variant-numeric: tabular-nums;
	color: var(--mhc-primary);
}

.mhc-countdown__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mhc-muted);
}

/* Le message de fin ne paraît qu'une fois la date atteinte. */
.mhc-countdown__elapsed { display: none; }
.mhc-countdown.is-elapsed .mhc-countdown__units { display: none; }
.mhc-countdown.is-elapsed .mhc-countdown__elapsed {
	display: block;
	margin: 0;
	font-family: var(--mhc-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--mhc-primary);
}

/* ==========================================================================
   Chiffres clés
   ========================================================================== */
.mhc-stats {
	display: grid;
	gap: var(--mhc-space-m);
}

.mhc-stat { text-align: center; padding-inline: var(--mhc-space-s); }

.mhc-stats--separated .mhc-stat + .mhc-stat {
	border-inline-start: 1px solid var(--mhc-line);
}

/* La valeur et son unité forment un tout : « 20 000 m² » coupé sur deux
   lignes se lit comme deux informations. */
.mhc-stat__value {
	white-space: nowrap;
	margin: 0 0 0.25rem;
	font-family: var(--mhc-font-display);
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.012em;
	font-variant-numeric: tabular-nums;
	color: var(--mhc-primary);
}

.mhc-stat__label {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--mhc-muted);
	text-wrap: balance;
}

@media (max-width: 640px) {
	.mhc-stats--separated .mhc-stat:nth-child(odd) { border-inline-start: 0; }
}

/* ==========================================================================
   Pavillons

   Carrousel horizontal, mobile comme ordinateur : les pavillons se suivent sur
   une seule ligne qu'on fait défiler (au doigt, à la molette ou au trackpad).
   Chaque carte s'accroche au défilement, et la suivante dépasse pour indiquer
   qu'il y en a d'autres. La largeur des cartes est fixée en absolu/vw : un
   grand écran en montre plusieurs, un petit une seule.
   ========================================================================== */
.mhc-pavilions {
	display: flex;
	gap: var(--mhc-space-m);
	overflow-x: auto;
	/* Pas d'accroche « snap » : le défilement automatique est continu, une
	   accroche le rendrait saccadé. Le geste manuel reste libre. */
	-webkit-overflow-scrolling: touch;
	/* Air en haut et en bas : le soulèvement et l'ombre des cartes au survol ne
	   doivent pas être rognés par le conteneur de défilement. */
	padding-block: var(--mhc-space-s);
	/* Barre de défilement native masquée : le dépassement de la carte suivante
	   suffit à signaler qu'on peut faire défiler. */
	scrollbar-width: none;
	/* Pleine largeur d'écran : le carrousel sort de la colonne de contenu pour
	   occuper toute la fenêtre. La marge négative le tire jusqu'aux bords, le
	   retrait intérieur empêche les cartes de coller aux bords de l'écran. */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: clamp(var(--mhc-space-m), 5vw, var(--mhc-space-xl));
	scroll-padding-inline: clamp(var(--mhc-space-m), 5vw, var(--mhc-space-xl));
}
.mhc-pavilions::-webkit-scrollbar { display: none; }

.mhc-pavilion {
	/* Une carte occupe 78 % de la fenêtre sur mobile, plafonnée à 340 px sur
	   grand écran : de quoi en aligner plusieurs à l'ordinateur. */
	flex: 0 0 clamp(260px, 78vw, 340px);
	scroll-snap-align: start;
	display: block;
	text-decoration: none;
	/* L'opacité est animée, sinon le grisement des cartes voisines saute d'un
	   coup : cette règle-ci, chargée après art-direction.css, l'emportait en ne
	   transitionnant que la transformation. */
	transition:
		opacity 560ms var(--mhc-anim-ease),
		transform 720ms var(--mhc-anim-ease),
		box-shadow 720ms var(--mhc-anim-ease);
}
.mhc-pavilion:hover,
.mhc-pavilion:focus-visible { transform: translateY(-10px); }

.mhc-pavilion__media {
	position: relative;
	display: block;
	overflow: hidden;
	/* Hauteur garantie en filet de sécurité. La proportion réelle est fixée
	   par le réglage Elementor (plus spécifique, il l'emporte quand il est
	   là) ; mais si son CSS de page manque ou est périmé, sans cette valeur la
	   carte s'effondrerait à 0 et ses enfants en position absolue (image,
	   titre, sceau) se répandraient par-dessus les autres sections. */
	aspect-ratio: 3 / 4;
	background: var(--mhc-primary-dark);
	/* Filet doré porté par la carte elle-même : sa bordure suit la courbe, si
	   bien que la couleur épouse l'arche dès le repos, pas seulement au survol.
	   C'est le premier des deux traits qui l'encadrent (le second court à
	   l'intérieur, voir « ::before »). */
	border: 2px solid rgb(217 164 65 / 60%);
	/* Deux ombres superposées : une courte et dense qui pose la carte sur le
	   fond, une longue et diffuse qui donne la hauteur. Une seule ombre
	   large paraît toujours artificielle. */
	box-shadow:
		0 1px 2px rgb(34 17 9 / 6%),
		0 6px 14px rgb(34 17 9 / 5%);
	transition:
		box-shadow 720ms var(--mhc-anim-ease),
		border-color 520ms var(--mhc-anim-ease);
}
.mhc-pavilion:hover .mhc-pavilion__media,
.mhc-pavilion:focus-visible .mhc-pavilion__media {
	border-color: var(--mhc-accent);
	box-shadow:
		0 4px 10px rgb(34 17 9 / 10%),
		0 18px 34px rgb(34 17 9 / 14%),
		0 36px 70px rgb(34 17 9 / 12%);
}

/* L'image déborde volontairement de son cadre : la parallaxe la déplace
   sans jamais découvrir de vide sur les bords. */
.mhc-pavilion__media img {
	position: absolute;
	inset: -8% 0;
	width: 100%;
	height: 116%;
	object-fit: cover;
	transition: transform 1100ms var(--mhc-anim-ease);
}
.mhc-pavilion:hover .mhc-pavilion__media img {
	transform: translate3d(0, var(--mhc-parallax-y, 0), 0) scale(1.07);
}

/* Voile de lisibilité, réglable depuis le panneau. Il est peint après
   l'image mais avant le texte, d'où les z-index explicites : sans eux le
   pseudo-élément, dernier dans l'ordre du document, recouvrirait le titre. */
.mhc-pavilion__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Voile de lisibilité, maintenant que les pavillons portent des
	   photographies : sombre en bas où se pose le titre, à peine marqué en haut
	   pour le numéro, presque transparent au milieu pour laisser voir l'image.
	   Sans lui, le titre blanc se perdrait sur les zones claires d'une photo. */
	background: linear-gradient(
		to top,
		rgb(34 17 9 / 86%) 0%,
		rgb(34 17 9 / 52%) 24%,
		rgb(34 17 9 / 10%) 50%,
		rgb(34 17 9 / 24%) 100%
	);
}

/* Numéro d'ordre, discret, en haut de l'arche. Au survol, il s'efface en
   douceur pour laisser la place au sceau, qui paraît au même endroit. */
.mhc-pavilion__index {
	position: absolute;
	z-index: 2;
	top: var(--mhc-space-m);
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--mhc-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--mhc-accent);
	opacity: 0.9;
	transition: opacity 420ms var(--mhc-anim-ease), transform 420ms var(--mhc-anim-ease);
}
.mhc-pavilion:hover .mhc-pavilion__index,
.mhc-pavilion:focus-within .mhc-pavilion__index {
	opacity: 0;
	transform: translateX(-50%) translateY(-6px);
}

.mhc-pavilion__body {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	bottom: 0;
	color: #fff;
	padding: var(--mhc-space-m);
	text-align: center;
}

.mhc-pavilion__title {
	margin: 0;
	font-family: var(--mhc-font-display);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.012em;
	line-height: 1.2;
}

/* Un filet doré se déploie sous le nom au survol. */
.mhc-pavilion__title::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	margin: 0.625rem auto 0;
	background: var(--mhc-accent);
	transition: width 680ms var(--mhc-anim-ease);
}
.mhc-pavilion:hover .mhc-pavilion__title::after,
.mhc-pavilion:focus-visible .mhc-pavilion__title::after { width: 44px; }

/* La description reste repliée et se déploie au survol : la grille garde
   une silhouette régulière, l'information vient à la demande. */
.mhc-pavilion__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-height 680ms var(--mhc-anim-ease),
		opacity 560ms var(--mhc-anim-ease) 60ms,
		margin 680ms var(--mhc-anim-ease);
}
.mhc-pavilion:hover .mhc-pavilion__text,
.mhc-pavilion:focus-visible .mhc-pavilion__text,
.mhc-pavilion:not(a) .mhc-pavilion__text {
	max-height: 12em;
	opacity: 1;
	margin-top: var(--mhc-space-xs);
}

/* Chevron d'invitation, présent seulement sur les cartes cliquables. */
.mhc-pavilion__chevron {
	position: absolute;
	z-index: 2;
	right: var(--mhc-space-m);
	bottom: var(--mhc-space-m);
	width: 32px;
	height: 32px;
	border: 1px solid rgb(255 255 255 / 45%);
	border-radius: 50%;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 380ms var(--mhc-anim-ease), transform 380ms var(--mhc-anim-ease);
}
.mhc-pavilion__chevron::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid var(--mhc-accent);
	border-right: 1.5px solid var(--mhc-accent);
	transform: translate(-65%, -50%) rotate(45deg);
}
a.mhc-pavilion:hover .mhc-pavilion__chevron,
a.mhc-pavilion:focus-visible .mhc-pavilion__chevron {
	opacity: 1;
	transform: translateX(0);
}

/* --- Ornement des arches : cadre et sceau ----------------------------------
   Les cartes empruntent le vocabulaire du bouton de retour en haut : une
   plaque à coins coupés semée de zellige doré, et un filet qui épouse l'arche.
   Le picto de la marque s'y pose au survol. Le sceau remplace le chevron : il
   signe la carte et invite au clic à la fois.
   -------------------------------------------------------------------------- */

/* Second filet, à l'intérieur du premier : les deux traits dorés courent
   parallèles le long de l'arche et l'ornent dès le repos, à la manière des
   liserés qui bordent une niche de zellige. Au survol, il s'avive et se
   resserre légèrement. */
.mhc-pavilion__media::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 7px;
	border: 1px solid rgb(217 164 65 / 45%);
	border-radius: 999px 999px var(--mhc-arch-foot, 8px) var(--mhc-arch-foot, 8px);
	transition:
		transform 640ms var(--mhc-anim-ease),
		border-color 560ms var(--mhc-anim-ease);
	pointer-events: none;
}
.mhc-pavilion:hover .mhc-pavilion__media::before,
.mhc-pavilion:focus-within .mhc-pavilion__media::before {
	transform: scale(0.985);
	border-color: var(--mhc-accent);
}

/* Sceau : la plaque du bouton de retour en haut, en petit, portant le picto.
   Coins coupés, fond sombre semé de zellige, filet doré. Il est centré en haut
   de l'arche et prend la place du numéro au survol : ce dernier s'efface tandis
   que le sceau descend s'y poser. */
.mhc-pavilion__seal {
	position: absolute;
	z-index: 3;
	top: var(--mhc-space-m);
	left: 50%;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px 4px 12px 4px;
	border: 1px solid rgb(217 164 65 / 45%);
	background-color: rgb(34 17 9 / 52%);
	background-image: var(--mhc-tex-zellige-dark);
	background-size: 64px 64px;
	opacity: 0;
	transform: translateX(-50%) translateY(-8px) scale(0.85) rotate(-6deg);
	transition:
		opacity 480ms var(--mhc-anim-ease),
		transform 560ms var(--mhc-anim-ease),
		border-color 420ms var(--mhc-anim-ease);
	pointer-events: none;
}
.mhc-pavilion__seal::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--mhc-accent);
	-webkit-mask: var(--mhc-picto) center / contain no-repeat;
	mask: var(--mhc-picto) center / contain no-repeat;
}
.mhc-pavilion:hover .mhc-pavilion__seal,
.mhc-pavilion:focus-within .mhc-pavilion__seal {
	opacity: 1;
	transform: translateX(-50%) translateY(0) scale(1) rotate(0);
	border-color: rgb(217 164 65 / 78%);
}

@media (prefers-reduced-motion: reduce) {
	.mhc-pavilion__media::before,
	.mhc-pavilion__seal { transition: none; }
}

/* Sur écran tactile, le survol n'existe pas : tout reste ouvert. */
@media (hover: none) {
	.mhc-pavilion__text {
		max-height: 12em;
		opacity: 1;
		margin-top: var(--mhc-space-xs);
	}
	.mhc-pavilion__title::after { width: 44px; }
}

/* ==========================================================================
   Destinations : la carte du monde en perspective

   Une vraie carte du monde (svg géographique, silhouette dorée via masque),
   posée à plat puis basculée en perspective. Chaque destination est un pin qui
   se dresse verticalement sur la carte, à sa place réelle, et surgit en rebond
   à l'entrée de la section (révélation is-inview du thème). Une mosaïque des
   photos habille le fond de toute la section, estompée. Corporate et ludique.

   L'inclinaison est portée par --mhc-tilt : le plan la prend, chaque pin la
   contre-tourne pour rester debout.
   ========================================================================== */
.mhc-destinations { text-align: center; }
.mhc-destinations__title { margin: 0 0 var(--mhc-space-s); }
.mhc-destinations__intro {
	max-width: 58ch;
	margin: 0 auto;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: rgb(253 246 234 / 78%);
}

/* --- Le fond photo de la section ----------------------------------------- */
/* La section entière sert de repère au fond : il la remplit. Aucun espace
   sous l'atlas : la section s'arrête au bas de la carte. */
#destinations { position: relative; overflow: hidden; padding-bottom: 0 !important; }
#destinations > .e-con-inner { padding-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   Mobile : padding vertical des sections

   Réglés pour le bureau, les paddings verticaux des sections (~100 px) sont
   beaucoup trop grands sur mobile et créent de grands vides qui déstructurent
   la page. On les ramène à une valeur mesurée. On ne vise que les sections de
   premier niveau à conteneur interne : les pleines largeurs (héros, marquees)
   n'ont pas de conteneur interne et gardent leur mise en page. La destination
   garde son bas collé (règle #destinations ci-dessus, plus spécifique).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.mhc-main .e-con.e-parent > .e-con-inner {
		padding-top: clamp(2.25rem, 9vw, 3.5rem) !important;
		padding-bottom: clamp(2.25rem, 9vw, 3.5rem) !important;
	}
	/* Ces deux sections pleine largeur portent leur padding sur le conteneur
	   lui-même (pas d'interne) : on les réduit à part. */
	.mhc-main .elementor-element-cta00001 {
		padding-top: clamp(2.5rem, 10vw, 3.75rem) !important;
		padding-bottom: clamp(2.5rem, 10vw, 3.75rem) !important;
	}
	.mhc-main .elementor-element-marq0002 {
		padding-bottom: clamp(1.75rem, 7vw, 2.75rem) !important;
	}
}

/* Le fond déborde le conteneur boxé pour couvrir toute la largeur de la
   section (et le motif d'étoiles), sans se soucier de son padding. */
.mhc-destinations__bg {
	position: absolute;
	top: -340px;
	bottom: -340px;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
/* La mosaïque est floutée : les découpes rectangulaires disparaissent, il ne
   reste qu'un fond photographique. Le débord (inset négatif) évite que le flou
   laisse voir un bord. */
.mhc-destinations__mosaic {
	position: absolute;
	inset: -24px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-auto-rows: 116px;
	grid-auto-flow: dense;
	filter: saturate(0.85) brightness(0.72) sepia(0.1) blur(6px);
	opacity: 0.66;
}
.mhc-mtile { width: 100%; height: 100%; object-fit: cover; }
/* Tailles et cadrages variés : deux exemplaires d'une photo ne se repèrent
   plus, et la grille perd sa régularité. */
.mhc-mtile--0  { grid-column: span 2; grid-row: span 2; object-position: 30% 35%; }
.mhc-mtile--1  { object-position: 72% 30%; }
.mhc-mtile--2  { grid-row: span 2; object-position: 48% 20%; }
.mhc-mtile--3  { grid-column: span 2; object-position: 60% 55%; }
.mhc-mtile--4  { object-position: 25% 65%; }
.mhc-mtile--5  { object-position: 82% 60%; }
.mhc-mtile--6  { grid-row: span 2; object-position: 38% 42%; }
.mhc-mtile--7  { object-position: 55% 78%; }
.mhc-mtile--8  { grid-column: span 2; object-position: 45% 45%; }
.mhc-mtile--9  { object-position: 68% 40%; }
.mhc-mtile--10 { object-position: 22% 50%; }
.mhc-mtile--11 { object-position: 60% 25%; }

/* Dégradé radial : cœur transparent, extrémités foncées, pour la profondeur. */
.mhc-destinations__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 84% 80% at 50% 46%,
		transparent 0%,
		rgb(20 10 5 / 14%) 34%,
		rgb(18 9 4 / 62%) 72%,
		rgb(11 6 3 / 95%) 100%);
}

.mhc-destinations__inner { position: relative; z-index: 1; }

/* --- La scène en perspective --------------------------------------------- */
/* L'atlas déborde lui aussi le conteneur boxé : la carte prend toute la
   largeur, la scène grandit avec elle. Débord par marge négative (l'atlas est
   en flux, contrairement au fond qui est en absolu). */
.mhc-atlas {
	--mhc-tilt: 52deg;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: clamp(0.25rem, 0.8vw, 0.6rem);
}
.mhc-atlas__stage {
	position: relative;
	height: 38vw;
	overflow: hidden;
	/* La profondeur suit la largeur, pour garder la même perspective à toutes
	   les tailles (sinon le premier plan se déforme). */
	perspective: 100vw;
	perspective-origin: 50% 46%;
}
/* Le plan de la carte, basculé. Sa boîte garde le rapport de la carte pour
   qu'aucune terre ne se déforme ; le débord haut / bas (océans, pôles) est
   rogné par la scène. */
.mhc-atlas__plane {
	position: absolute;
	left: 0;
	right: 0;
	top: 45%;
	aspect-ratio: 510 / 310;
	transform: translateY(-50%) rotateX(var(--mhc-tilt));
	transform-style: preserve-3d;
}
/* La grille du planisphère : ce sont ses lignes qui fuient qui donnent à voir
   la perspective. Les bords s'estompent pour ne pas faire boîte. */
.mhc-atlas__plane::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgb(233 190 100 / 24%) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(233 190 100 / 24%) 1px, transparent 1px);
	background-size: 6.25% 8.333%;
	-webkit-mask: radial-gradient(ellipse at 50% 50%, #000 52%, transparent 86%);
	mask: radial-gradient(ellipse at 50% 50%, #000 52%, transparent 86%);
	pointer-events: none;
}
/* Un halo doux assoit la carte sur le fond. */
.mhc-atlas__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 52%, rgb(217 164 65 / 12%), transparent 62%);
	pointer-events: none;
}

/* La carte : silhouette dorée découpée par le masque, avec un reflet qui
   balaie les terres. */
.mhc-atlas__world {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(115deg, transparent 42%, rgb(255 238 200 / 42%) 50%, transparent 58%),
		linear-gradient(160deg, rgb(233 183 93), rgb(188 141 66));
	background-size: 260% 100%, 100% 100%;
	background-position: 150% 0, 0 0;
	-webkit-mask: url("../img/world.svg") 68% 70.2% / 198% 214.9% no-repeat;
	mask: url("../img/world.svg") 68% 70.2% / 198% 214.9% no-repeat;
	filter: drop-shadow(0 8px 12px rgb(10 5 2 / 55%));
	animation: mhc-map-shimmer 7.5s linear infinite;
}
@keyframes mhc-map-shimmer {
	to { background-position: -170% 0, 0 0; }
}

/* --- Les pins qui se dressent -------------------------------------------- */
.mhc-pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -100%) rotateX(calc(-1 * var(--mhc-tilt)));
	transform-origin: 50% 100%;
	transform-style: preserve-3d;
	z-index: 2;
	pointer-events: none; /* seule la pastille capte le survol (voir plus bas) */
}
.mhc-pin__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	transform-origin: 50% 100%;
	opacity: 0;
	transform: translateY(14px) scale(0.5);
	transition:
		opacity 460ms var(--mhc-anim-ease),
		transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mhc-atlas.is-inview .mhc-pin__inner {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition-delay: calc(var(--i) * 85ms);
}

/* Le nom : masqué au repos (la carte reste nette), il surgit au survol. */
.mhc-pin__name {
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	padding: 2px 9px;
	font-family: var(--mhc-font-display);
	font-size: clamp(0.72rem, 1.3vw, 0.9rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--mhc-cream, #fdf6ea);
	background: rgb(26 13 6 / 88%);
	border: 1px solid rgb(217 164 65 / 45%);
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgb(10 5 2 / 55%);
	opacity: 0;
	transform: translateX(-50%) translateY(5px) scale(0.85);
	transform-origin: 50% 120%;
	transition:
		opacity 200ms var(--mhc-anim-ease),
		transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}
.mhc-pin__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(48px, 5.2vw, 60px);
	height: clamp(48px, 5.2vw, 60px);
	border-radius: 50%;
	background: rgb(30 15 8 / 94%);
	border: 2px solid var(--mhc-accent);
	box-shadow: 0 6px 16px rgb(10 5 2 / 60%);
	pointer-events: auto; /* la zone de survol se limite au disque */
	cursor: pointer;
	transition: transform 200ms var(--mhc-anim-ease), border-color 200ms var(--mhc-anim-ease);
}
.mhc-pin__flag { font-size: clamp(24px, 2.8vw, 30px); line-height: 1; }
/* L'onde qui pulse, comme un signal sur la carte. */
.mhc-pin__dot::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1px solid rgb(217 164 65 / 60%);
	animation: mhc-pin-pulse 2.8s var(--mhc-anim-ease) infinite;
}
@keyframes mhc-pin-pulse {
	0%   { transform: scale(1); opacity: 0.6; }
	70%  { transform: scale(2.1); opacity: 0; }
	100% { opacity: 0; }
}
/* Le piquet qui plante le pin dans la carte. */
.mhc-pin__stick {
	width: 2px;
	height: clamp(14px, 2vw, 22px);
	background: linear-gradient(var(--mhc-accent), rgb(217 164 65 / 0%));
}

/* Survol / focus de la pastille : le pin passe devant (classe is-active posée
   par le JavaScript au survol de la seule pastille) et son nom surgit. Ainsi
   chaque pays répond exactement là où on le voit, sans que les voisins ne
   captent le survol. La pastille grandit sur elle-même : le curseur ne la perd
   jamais. */
.mhc-pin.is-active { z-index: 30; }
.mhc-pin.is-active .mhc-pin__name {
	opacity: 1;
	transform: translateX(-50%) translateY(0) scale(1);
}
.mhc-pin__dot:hover,
.mhc-pin__dot:focus {
	border-color: #f4d58a;
	transform: scale(1.12);
	outline: none;
}
.mhc-pin__dot:hover::before { animation: none; }
.mhc-pin:focus-visible { outline: none; }

/* --- L'avion Marhaba ----------------------------------------------------- */
.mhc-plane {
	position: absolute;
	z-index: 6;
	--plane-left: 74%; /* position de repos (bord droit) ; le mobile la réduit */
	left: var(--plane-left);
	top: 0%;
	/* Compromis : l'image native ne fait que 471 px, donc au-delà elle
	   s'adoucit sur écran Retina. ~340 px reste grand sans redoubler l'image. */
	width: clamp(190px, 26vw, 340px);
	opacity: 0;
	pointer-events: none; /* ne bloque jamais le survol des pays */
	filter: drop-shadow(0 12px 16px rgb(8 4 2 / 50%));
	will-change: left, top, opacity;
}
.mhc-plane__img { display: block; width: 100%; }

/* Chargement : l'avion entre par la droite et glisse dans le ciel (zone vide
   au-dessus de l'Asie), sans jamais passer sur les pays, puis se pose. */
.mhc-atlas.is-inview .mhc-plane {
	animation: mhc-plane-load 2.4s cubic-bezier(0.16, 0.72, 0.24, 1) forwards;
}
@keyframes mhc-plane-load {
	0%   { left: 112%; top: 3%; opacity: 0; }
	14%  { opacity: 1; }
	100% { left: var(--plane-left); top: 0%; opacity: 1; }
}
/* Posé, il flotte à peine (indépendamment du vol, aucune interaction). */
.mhc-atlas.is-inview .mhc-plane__img {
	animation: mhc-plane-float 6s ease-in-out 2.4s infinite;
}
@keyframes mhc-plane-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

.mhc-destinations__note {
	position: relative;
	margin: var(--mhc-space-l) 0 0;
	font-size: 0.9375rem;
	font-style: italic;
	color: rgb(253 246 234 / 62%);
}

@media (max-width: 700px) {
	.mhc-atlas { --mhc-tilt: 34deg; }
	.mhc-atlas__stage { height: 60vw; }
	/* Pastilles et avion nettement plus petits : sur la petite carte, plus
	   aucun chevauchement, tous les pays restent bien visibles. */
	.mhc-pin__dot {
		width: clamp(15px, 4.6vw, 23px);
		height: clamp(15px, 4.6vw, 23px);
		border-width: 1.5px;
	}
	.mhc-pin__flag { font-size: clamp(10px, 2.9vw, 14px); }
	.mhc-pin__stick { height: 8px; }
	.mhc-pin__name { font-size: 0.58rem; padding: 1px 6px; }
	.mhc-plane { --plane-left: 56%; width: clamp(120px, 38vw, 180px); }
}

@media (prefers-reduced-motion: reduce) {
	.mhc-pin__inner { opacity: 1; transform: none; transition: none; }
	.mhc-pin__dot::before,
	.mhc-atlas__world,
	.mhc-plane,
	.mhc-plane__img { animation: none; }
	.mhc-plane { opacity: 1; }
}

/* ==========================================================================
   Bande d'action
   ========================================================================== */
.mhc-cta-band {
	position: relative;
	overflow: hidden;
	color: #fff;
	text-align: center;
	isolation: isolate;
}

.mhc-cta-band--patterned::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--mhc-pattern);
	opacity: 0.45;
	pointer-events: none;
}

.mhc-cta-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mhc-space-s);
	max-width: 760px;
	margin-inline: auto;
}

.mhc-cta-band__eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mhc-accent);
}

.mhc-cta-band__title {
	margin: 0;
	font-family: var(--mhc-font-display);
	font-size: clamp(1.875rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

.mhc-cta-band__text {
	margin: 0;
	max-width: 52ch;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.mhc-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mhc-space-s);
	margin-top: var(--mhc-space-s);
}

/* ==========================================================================
   Bandeau simple (pages intérieures)
   ========================================================================== */
.mhc-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}
.mhc-hero::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.mhc-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--mhc-space-s);
	width: 100%;
}
.mhc-hero__eyebrow {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mhc-accent);
}
.mhc-hero__title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.5rem);
}
.mhc-hero__text { margin: 0; font-size: 1.0625rem; color: var(--mhc-muted); }
.mhc-hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--mhc-space-s);
	padding: 0.875rem 1.75rem;
	border-radius: var(--mhc-radius);
	background: var(--mhc-primary);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--mhc-transition), color var(--mhc-transition);
}
.mhc-hero__button:hover,
.mhc-hero__button:focus { background: var(--mhc-accent); color: var(--mhc-primary-dark); }

/* ==========================================================================
   Divers
   ========================================================================== */

/* Message affiché dans l'éditeur quand un widget manque de configuration. */
.mhc-notice {
	margin: 0;
	padding: var(--mhc-space-s) var(--mhc-space-m);
	border: 1px dashed var(--mhc-line);
	border-radius: var(--mhc-radius);
	font-size: 0.875rem;
	color: var(--mhc-muted);
	text-align: center;
}

/* Arche en filet derrière le titre du bandeau : elle donne une profondeur
   et un ancrage culturel sans rien masquer de la vidéo. */
.mhc-hero-video__arch {
	position: absolute;
	bottom: -8%;
	left: 50%;
	width: min(62vw, 900px);
	height: min(94vh, 1060px);
	margin-left: calc(min(62vw, 900px) / -2);
	pointer-events: none;
	z-index: -1;
}

/* Variante en filet : la forme est dessinée par la bordure du bloc. */
.mhc-hero-video__arch--line {
	border: 1px solid currentColor;
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
	color: var(--mhc-accent);
}

/* Variante en mosaïque : le SVG occupe tout le bloc et porte la forme. */
.mhc-hero-video__arch--mosaic { color: transparent; }

@media (max-width: 780px) {
	.mhc-hero-video__arch {
		width: min(88vw, 520px);
		margin-left: calc(min(88vw, 520px) / -2);
	}
}

/* Titre du bandeau : échelle d'affichage, une fois la révélation en place. */
.mhc-hero-video__title .mhc-word { vertical-align: bottom; }

/* Le titre du bandeau hérite de la couleur de contour définie plus haut ;
   sur fond sombre, l'or est le seul trait qui tienne. */
.mhc-hero-video { --mhc-outline-color: var(--mhc-accent); }
.mhc-hero-video__title .mhc-outline {
	color: transparent;
	-webkit-text-stroke: 2px var(--mhc-outline-color);
	paint-order: stroke fill;
}

/* --------------------------------------------------------------------------
   Bandeau : masque en arche et perspective au pointeur
   -------------------------------------------------------------------------- */

/* Arche discrète : les deux angles hauts se courbent, le bas reste droit.
   Le rayon est elliptique : large horizontalement, faible verticalement,
   ce qui donne une arche surbaissée plutôt qu'un simple coin arrondi. */
.mhc-hero-video--arched {
	border-radius:
		var(--mhc-hero-arch-h, 22vw) var(--mhc-hero-arch-h, 22vw) 0 0 /
		var(--mhc-hero-arch-v, 6vw)  var(--mhc-hero-arch-v, 6vw)  0 0;
}

/* --- Arcades en enfilade ---------------------------------------------------
   Trois arches de lumière superposées remplacent la découpe blanche nette.
   Chacune n'est qu'un dégradé qui s'éteint vers le bas : posées les unes
   dans les autres et déplacées à des vitesses différentes, elles donnent au
   bandeau la profondeur d'un couloir d'arcades.
   -------------------------------------------------------------------------- */
.mhc-hero-video__arcade {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.mhc-hero-video__arcade-ring {
	position: absolute;
	top: calc( -6% - var(--mhc-depth) * 5% );
	left: 50%;

	/* Chaque rang est plus large et plus haut que le précédent. */
	width: calc( 46% + var(--mhc-depth) * 17% );
	height: calc( 52% + var(--mhc-depth) * 14% );
	margin-left: calc( ( 46% + var(--mhc-depth) * 17% ) / -2 );

	border-radius: 999px 999px 0 0;

	/* Le blanc ne fait qu'effleurer le haut de l'arche puis s'efface : c'est
	   une lueur, pas une forme pleine. Les valeurs restent basses : au-delà,
	   l'arche se lit comme un bandeau posé sur la vidéo au lieu d'une
	   variation de lumière. */
	/* « --mhc-arcade-force » vient du panneau : elle multiplie l'ensemble des
	   opacités, ce qui laisse doser la présence des arcades sans toucher au
	   rapport entre les trois plans. */
	background: linear-gradient(
		180deg,
		rgb(255 255 255 / calc( ( 9% - var(--mhc-depth) * 1.8% ) * var(--mhc-arcade-force, 1) )) 0%,
		rgb(255 255 255 / calc( ( 4% - var(--mhc-depth) * 0.9% ) * var(--mhc-arcade-force, 1) )) 30%,
		rgb(255 255 255 / 0%) 88%
	);

	/* Filet d'arête : c'est lui qui rend la retombée de l'arc perceptible.
	   Le remplissage seul, à ces opacités, ne se distingue pas du fond. */
	box-shadow: inset 0 1px 0 rgb(255 255 255 / calc( ( 20% - var(--mhc-depth) * 4.5% ) * var(--mhc-arcade-force, 1) ));

	/* Le masque éteint l'ensemble (fond comme filet) vers le bas. Sans lui,
	   l'arête resterait nette alors que le remplissage a déjà disparu, et le
	   trait se détacherait tout seul sur la vidéo. */
	-webkit-mask-image: linear-gradient( 180deg, #000 0%, rgb(0 0 0 / 55%) 45%, transparent 82% );
	mask-image: linear-gradient( 180deg, #000 0%, rgb(0 0 0 / 55%) 45%, transparent 82% );
}

/* Perspective : l'arche du premier plan se déplace le plus, celle du fond
   à peine. C'est cet écart, et non le déplacement lui-même, que l'œil lit
   comme de la profondeur. */
.mhc-hero-video--tilt .mhc-hero-video__arcade-ring {
	transform: translate3d(
		calc( var(--mhc-tilt-x, 0) * ( 6px + var(--mhc-depth) * 7px ) * var(--mhc-tilt-strength) ),
		calc( var(--mhc-tilt-y, 0) * ( 4px + var(--mhc-depth) * 5px ) * var(--mhc-tilt-strength) ),
		0
	);
}

@media (prefers-reduced-motion: reduce) {
	.mhc-hero-video--tilt .mhc-hero-video__arcade-ring { transform: none; }
}

/* Sur petit écran la courbe mangerait le titre : on la resserre. */
@media (max-width: 780px) {
	.mhc-hero-video--arched {
		border-radius: 14vw 14vw 0 0 / 5vw 5vw 0 0;
	}
}

/* --- Perspective ---------------------------------------------------------- */
.mhc-hero-video--tilt {
	--mhc-tilt-strength: 1;
	perspective: 1400px;
	transform-style: preserve-3d;
}

/* Chaque plan choisit son amplitude : le fond se déplace à contresens et
   plus fort que le contenu, ce qui creuse l'image. Les variables sont
   écrites par le script ; leur repli à 0 laisse la page immobile si le
   JavaScript ne s'exécute pas. */
.mhc-hero-video--tilt .mhc-hero-video__bg {
	transform:
		translate3d(
			calc( var(--mhc-tilt-x, 0) * -20px * var(--mhc-tilt-strength) ),
			calc( var(--mhc-tilt-y, 0) * -14px * var(--mhc-tilt-strength) ),
			0
		)
		/* Agrandissement léger : le déplacement ne doit jamais découvrir de bord. */
		scale(1.06);
}

.mhc-hero-video--tilt .mhc-hero-video__arch {
	transform: translate3d(
		calc( var(--mhc-tilt-x, 0) * 30px * var(--mhc-tilt-strength) ),
		calc( var(--mhc-tilt-y, 0) * 20px * var(--mhc-tilt-strength) ),
		0
	);
}

.mhc-hero-video--tilt .mhc-hero-video__inner {
	transform:
		rotateY( calc( var(--mhc-tilt-x, 0) *  1.7deg * var(--mhc-tilt-strength) ) )
		rotateX( calc( var(--mhc-tilt-y, 0) * -1.7deg * var(--mhc-tilt-strength) ) )
		translate3d(
			calc( var(--mhc-tilt-x, 0) * 12px * var(--mhc-tilt-strength) ),
			calc( var(--mhc-tilt-y, 0) *  9px * var(--mhc-tilt-strength) ),
			0
		);
}

/* Le motif suit à peine : c'est le plan le plus proche du fond. */
.mhc-hero-video--tilt.mhc-hero-video--patterned::before {
	transform: translate3d(
		calc( var(--mhc-tilt-x, 0) * -8px * var(--mhc-tilt-strength) ),
		calc( var(--mhc-tilt-y, 0) * -6px * var(--mhc-tilt-strength) ),
		0
	);
}

@media (prefers-reduced-motion: reduce) {
	.mhc-hero-video--tilt .mhc-hero-video__bg,
	.mhc-hero-video--tilt .mhc-hero-video__arch,
	.mhc-hero-video--tilt .mhc-hero-video__inner,
	.mhc-hero-video--tilt.mhc-hero-video--patterned::before {
		transform: none;
	}
}

/* --- Écoinçons du bandeau --------------------------------------------------
   L'écoinçon est le triangle curviligne laissé libre entre un arc et le
   cadre. C'est là que le zellige se pose dans les portiques : la mosaïque
   comble l'angle que l'arc ne remplit pas.
   -------------------------------------------------------------------------- */
.mhc-hero-video__spandrel {
	position: absolute;
	top: 0;
	z-index: -1;
	width: var(--mhc-spandrel-size, 340px);
	height: var(--mhc-spandrel-size, 340px);
	opacity: var(--mhc-spandrel-opacity, 1);
	pointer-events: none;
}
.mhc-hero-video__spandrel--left  { left: 0; }
.mhc-hero-video__spandrel--right { right: 0; }

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

/* Les deux angles se déplacent en sens contraire sous le pointeur : le
   bandeau paraît s'ouvrir. */
.mhc-hero-video--tilt .mhc-hero-video__spandrel--left {
	transform: translate3d(
		calc( var(--mhc-tilt-x, 0) * -16px * var(--mhc-tilt-strength) ),
		calc( var(--mhc-tilt-y, 0) * -10px * var(--mhc-tilt-strength) ),
		0
	);
}
.mhc-hero-video--tilt .mhc-hero-video__spandrel--right {
	transform: translate3d(
		calc( var(--mhc-tilt-x, 0) * 16px * var(--mhc-tilt-strength) ),
		calc( var(--mhc-tilt-y, 0) * -10px * var(--mhc-tilt-strength) ),
		0
	);
}

@media (max-width: 780px) {
	.mhc-hero-video__spandrel { width: 46vw; height: 46vw; }
}

@media (prefers-reduced-motion: reduce) {
	.mhc-hero-video--tilt .mhc-hero-video__spandrel--left,
	.mhc-hero-video--tilt .mhc-hero-video__spandrel--right { transform: none; }
}

/* Liseré sur l'arête du bandeau : il referme la voûte de l'en-tête sur la
   découpe des angles. */
.mhc-hero-video--arched {
	box-shadow: 0 -1px 0 0 rgb(217 164 65 / 30%);
}

/* --- Date du bandeau -------------------------------------------------------
   La date ouvre le bandeau et se lit avant tout le reste : c'est ce qu'un
   visiteur cherche en premier. Les jours sont portés à l'échelle d'un titre,
   le mois et le lieu les accompagnent en capitales espacées, entre deux
   filets qui tiennent la ligne.
   -------------------------------------------------------------------------- */
.mhc-hero-date {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: 0.5rem;
	margin-bottom: var(--mhc-space-s);
}

.mhc-hero-date__days {
	margin: 0;
	font-family: var(--mhc-font-display);
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.012em;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.mhc-hero-date__place {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: clamp(0.8125rem, 1.3vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mhc-accent);
}

/* Filets de part et d'autre de la ligne, et losange entre le mois et le lieu. */
.mhc-hero-date__place::before,
.mhc-hero-date__place::after {
	content: "";
	width: clamp(20px, 4vw, 56px);
	height: 1px;
	flex-shrink: 0;
	background: currentColor;
	opacity: 0.6;
}

.mhc-hero-date__place span + span {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}
.mhc-hero-date__place span + span::before {
	content: "";
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	background: currentColor;
	transform: rotate(45deg);
}

@media (max-width: 560px) {
	.mhc-hero-date__place { letter-spacing: 0.14em; gap: 0.5rem; }
	.mhc-hero-date__place::before,
	.mhc-hero-date__place::after { width: 16px; }
}

/* --------------------------------------------------------------------------
   Bandeau sur petit écran

   Trois réglages pensés pour le grand écran deviennent nuisibles ici : les
   écoinçons, dimensionnés en unités de fenêtre, mangent la moitié de la
   largeur ; les boutons alignés côte à côte deviennent trop étroits pour
   être visés ; et la hauteur en « vh » se mesure au départ sur la fenêtre
   barres d'interface comprises, ce qui décale la mise en page dès que
   celles-ci se rétractent.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.mhc-hero-video {
		padding: var(--mhc-space-m) var(--mhc-space-m);

		/* La hauteur est calculée, non estimée : on retire ce qui occupe déjà
		   l'écran (la barre d'informations et la navigation) puis une part
		   de plus, pour que le ruban suivant dépasse sous la ligne de
		   flottaison. Voir qu'un contenu commence invite à faire défiler bien
		   mieux qu'une flèche.

		   « dvh » suit la hauteur réellement disponible, contrairement à
		   « vh » qui reste figé sur la fenêtre barres déployées. */
		min-height: calc( 100dvh - var(--mhc-fold-reserve, 172px) );
	}

	.mhc-hero-video__spandrel { width: 34vw; height: 34vw; }

	.mhc-hero-date { margin-bottom: 0.75rem; }
	.mhc-hero-date__days { font-size: clamp(2.75rem, 13vw, 4rem); }

	.mhc-hero-video__title { font-size: clamp(1.75rem, 6.4vw, 2.5rem); }
	.mhc-hero-video__subtitle { font-size: 1rem; max-width: 34ch; }

	.mhc-hero-video__actions {
		gap: 0.625rem;
		margin-top: var(--mhc-space-s);
	}
	.mhc-hero-video__actions .mhc-btn {
		padding-block: 0.8125rem;
		font-size: 0.875rem;
	}
	.mhc-btn__icon { width: 16px; height: 16px; }

	/* Le bandeau se resserre pour dégager la place : chaque bloc perd un
	   cran, aucun ne disparaît. */
	.mhc-hero-video__inner { gap: 0.625rem; }
	.mhc-hero-video__subtitle { font-size: 0.9375rem; line-height: 1.5; }
}

/* Sous cette largeur seulement, les actions passent l'une sous l'autre et
   s'étirent : viser au pouce demande de la surface. Au-dessus, deux boutons
   tiennent côte à côte sans devenir étroits, et les étirer les rendrait
   démesurés. */
@media (max-width: 640px) {
	.mhc-hero-video__actions {
		flex-direction: column;
		align-self: stretch;
		width: 100%;
	}
	.mhc-hero-video__actions .mhc-btn {
		width: 100%;
		padding-block: 0.8125rem;
	}
}

@media (max-width: 560px) {
	.mhc-hero-video {
		padding-inline: var(--mhc-space-s);
		--mhc-fold-reserve: 164px;
	}
	.mhc-hero-date { margin-bottom: 0.5rem; }
	.mhc-hero-date__days { font-size: clamp(2.5rem, 12vw, 3.5rem); }
	.mhc-hero-video__title { font-size: clamp(1.625rem, 6vw, 2.125rem); }
	.mhc-hero-video__spandrel { width: 40vw; height: 40vw; }
	.mhc-hero-date__place { font-size: 0.6875rem; }

	/* Le voile se renforce : sur une petite surface, le texte se superpose à
	   une part bien plus grande de l'image. */
	.mhc-hero-video__veil { background: linear-gradient( 180deg, rgba(34,17,9,0.58) 0%, rgba(34,17,9,0.92) 100% ); }
}

/* La perspective au pointeur n'a pas de sens sans souris, et le calcul
   coûterait pour rien. */
@media (hover: none) {
	.mhc-hero-video--tilt .mhc-hero-video__bg,
	.mhc-hero-video--tilt .mhc-hero-video__inner,
	.mhc-hero-video--tilt .mhc-hero-video__spandrel--left,
	.mhc-hero-video--tilt .mhc-hero-video__spandrel--right { transform: none; }
}


/* --------------------------------------------------------------------------
   Finitions à l'orange sur les widgets

   Même principe que dans art-direction.css : l'orange ne prend aucune
   surface, seulement les plus petits éléments. Ces règles vivent ici parce
   que les composants qu'elles visent y sont définis : écrites ailleurs,
   elles seraient écrasées, cette feuille étant chargée en dernier.
   -------------------------------------------------------------------------- */

/* Le trait qui descend dans l'indicateur de défilement. */
.mhc-hero-video__scroll-line { background: var(--mhc-orange); }

/* Le losange entre le mois et le lieu. */
.mhc-hero-date__place span + span::before { background: var(--mhc-orange); }

/* Numéro d'ordre des cartes de pavillon, et le chevron qui les invite. */
.mhc-pavilion__index { color: var(--mhc-orange); }
.mhc-pavilion__chevron::before {
	border-top-color: var(--mhc-orange);
	border-right-color: var(--mhc-orange);
}

/* Le filet doré qui se déploie sous le nom d'un pavillon reste doré : il
   fait quarante pixels de long et deux de haut, mais il accompagne le titre
   et doit rester dans sa famille de couleur.
   En revanche le filet sous les libellés des chiffres clés, lui, marque un
   état de survol : c'est une finition. */
.mhc-stat__label::after { background: var(--mhc-orange); }

/* --------------------------------------------------------------------------
   Ouverture en portail

   Deux panneaux couvrent le bandeau au chargement. Leurs bords intérieurs se
   répondent pour dessiner une arche, la même que celle du bandeau, et ils
   s'écartent vers les côtés. Le bandeau ne se dévoile pas : on y entre.

   Le contenu commence à paraître pendant l'ouverture, pas après. Attendre la
   fin donnerait une succession de temps morts ; se chevaucher donne un seul
   mouvement.
   -------------------------------------------------------------------------- */
.mhc-hero-curtain {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}

.mhc-hero-curtain__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Un demi-point de recouvrement : sans lui, un liseré du fond apparaît
	   entre les deux panneaux sur les écrans à densité fractionnaire. */
	width: 50.4%;
	background-color: var(--mhc-primary-dark);
	background-image: var(--mhc-pattern);
	will-change: transform;
}

.mhc-hero-curtain__panel--left {
	left: 0;
	/* La courbe intérieure reprend celle du bandeau : c'est la même arche,
	   coupée en deux. */
	border-top-right-radius: 100% var(--mhc-hero-arch-v, 3.5vw);
	animation: mhc-curtain-left 1250ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.mhc-hero-curtain__panel--right {
	right: 0;
	border-top-left-radius: 100% var(--mhc-hero-arch-v, 3.5vw);
	animation: mhc-curtain-right 1250ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes mhc-curtain-left {
	0%, 14%  { transform: none; }
	100%     { transform: translateX(-101%); }
}

@keyframes mhc-curtain-right {
	0%, 14%  { transform: none; }
	100%     { transform: translateX(101%); }
}

/* --- Zoom lent -------------------------------------------------------------
   Le fond démarre agrandi et revient à sa taille. Le mouvement est trop lent
   pour être suivi, assez présent pour que l'image ne paraisse jamais figée.
   -------------------------------------------------------------------------- */
@keyframes mhc-hero-zoom {
	from { transform: scale(1.14); }
	to   { transform: scale(1); }
}

.mhc-hero-video--zoom .mhc-hero-video__media,
.mhc-hero-video--zoom .mhc-hero-video__poster {
	animation: mhc-hero-zoom 9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Sous le pointeur, le déplacement du fond prime : le zoom ne doit pas
   écraser sa transformation. */
.mhc-hero-video--tilt.mhc-hero-video--zoom .mhc-hero-video__bg {
	will-change: transform;
}

/* --- Défilement des dates --------------------------------------------------
   Le chiffre en cours de défilement est mis en retrait : l'œil comprend
   qu'il n'est pas encore la valeur définitive.
   -------------------------------------------------------------------------- */
.mhc-hero-date__days[data-mhc-roll] { font-variant-numeric: tabular-nums; }
.mhc-hero-date__days .mhc-rolling { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
	.mhc-hero-curtain { display: none; }
	.mhc-hero-video--zoom .mhc-hero-video__media,
	.mhc-hero-video--zoom .mhc-hero-video__poster { animation: none; }
}

/* --------------------------------------------------------------------------
   Le picto dans le portail

   La forme est un coup de pinceau, montant du bas-gauche vers le haut-droite.
   Le geste juste n'est donc pas de la faire apparaître mais de la tracer dans
   son sens, comme si la main la posait.

   Le tracé passe par un masque en dégradé plus large que le picto, que l'on
   fait glisser : la zone opaque du dégradé découvre la forme de proche en
   proche. Cette méthode vaut pour n'importe quel dessin : un « stroke-
   dasharray » n'aurait pas fonctionné ici, la forme étant pleine et sans
   contour.
   -------------------------------------------------------------------------- */
.mhc-hero-curtain__mark {
	position: fixed;
	top: 50%;
	left: 50%;
	/* Au-dessus des battants, qui montent à 50. */
	z-index: 51;
	/* Purement décoratif : une fois fondu, il ne doit jamais intercepter le
	   survol (il reste fixé au centre de l'écran et bloquerait la carte). */
	pointer-events: none;
	width: clamp(84px, 11vw, 148px);
	aspect-ratio: 44 / 44.2;
	/* Aucune marge ici : exprimée en pourcentage, elle se rapporterait à la
	   largeur du bandeau et non à celle du picto : c'est ce qui le décentrait.
	   Le seul décalage est celui de « translate », relatif à l'élément. */
	transform: translate(-50%, -50%);
	color: var(--mhc-accent);
	animation: mhc-mark-out 460ms var(--mhc-anim-ease) 950ms forwards;
}

.mhc-picto {
	display: block;
	width: 100%;
	height: 100%;

	/* Le tracé passe par une découpe qui s'ouvre de gauche à droite. La forme
	   montant du bas-gauche vers le haut-droite, ce balayage la découvre dans
	   son propre sens, comme si la main la posait.

	   J'avais d'abord employé un masque en dégradé que l'on fait glisser.
	   C'était plus fin, mais impossible à borner : au-delà d'une certaine
	   course le dégradé quitte entièrement le dessin, qui disparaît au lieu de
	   rester découvert. Une découpe, elle, s'arrête à zéro et ne peut pas
	   dépasser. */
	clip-path: inset(0 100% 0 0);
	animation: mhc-mark-draw 800ms cubic-bezier(0.55, 0, 0.25, 1) 140ms forwards;
	filter: drop-shadow(0 6px 22px rgb(217 164 65 / 30%));
}

@keyframes mhc-mark-draw {
	0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
	10%  { opacity: 1; }
	100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* Un reflet accompagne la pointe du tracé et s'éteint avec lui : c'est ce
   qui donne l'impression d'une matière, plutôt que d'une forme qui se
   dévoile. */
.mhc-hero-curtain__mark::before {
	content: "";
	position: absolute;
	/* Le reflet reste dans les limites du picto : débordant, on voyait ses
	   bords s'arrêter net sur le fond, ce qui trahissait le rectangle. */
	inset: 0;
	z-index: 1;
	background: linear-gradient( 48deg,
		transparent 38%,
		rgb(255 255 255 / 22%) 47%,
		rgb(239 217 163 / 34%) 50%,
		transparent 58%
	);
	/* Diffusé, le reflet se lit comme une lumière et non comme une bande. */
	filter: blur(10px);
	/* Le fondu des quatre bords supprime toute arête : la lueur se dissout
	   au lieu de finir sur une ligne droite. */
	-webkit-mask-image: radial-gradient( closest-side, #000 42%, transparent 100% );
	mask-image: radial-gradient( closest-side, #000 42%, transparent 100% );
	mix-blend-mode: screen;
	opacity: 0;
	animation: mhc-mark-sheen 800ms cubic-bezier(0.55, 0, 0.25, 1) 140ms forwards;
	pointer-events: none;
}

@keyframes mhc-mark-sheen {
	0%   { opacity: 0; transform: translate(-42%, 42%); }
	22%  { opacity: 0.9; }
	78%  { opacity: 0.9; }
	100% { opacity: 0; transform: translate(42%, -42%); }
}

/* Une fois tracé, le picto s'efface avec les panneaux plutôt que de rester
   sur la vidéo. */
@keyframes mhc-mark-out {
	from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	to   { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

/* Halo doré qui souligne le moment où le tracé s'achève. */
.mhc-hero-curtain__mark::after {
	content: "";
	position: absolute;
	/* Un halo qui déborde trop finit par se voir comme un disque : celui-ci
	   reste près du tracé, et son dégradé s'éteint bien avant son bord. */
	inset: -28%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient( circle,
		rgb(217 164 65 / 20%) 0%,
		rgb(217 164 65 / 10%) 30%,
		rgb(217 164 65 / 3%) 52%,
		transparent 74%
	);
	filter: blur(6px);
	opacity: 0;
	animation: mhc-mark-glow 1100ms cubic-bezier(0.3, 0, 0.35, 1) 520ms forwards;
	pointer-events: none;
}

@keyframes mhc-mark-glow {
	0%   { opacity: 0;    transform: scale(0.78); }
	30%  { opacity: 1;    transform: scale(1); }
	52%  { opacity: 0.85; transform: scale(1.04); }
	78%  { opacity: 0.35; transform: scale(1.12); }
	100% { opacity: 0;    transform: scale(1.18); }
}

/* --------------------------------------------------------------------------
   Les portes

   Deux battants, pas deux rectangles qui glissent. La différence tient à
   quatre choses : ils pivotent légèrement sur leur bord extérieur, leur
   surface reçoit une lumière rasante, leur arête intérieure porte une ombre
   qui leur donne de l'épaisseur, et le fond reste flou tant qu'ils sont là.
   -------------------------------------------------------------------------- */
/* Le rideau est fixé à la fenêtre, non à la section.

   Le portail ouvre sur le site, pas sur un bloc : arrimé au bandeau, il n'en
   couvrait que la hauteur, et sur un écran où celui-ci ne remplit pas la
   page, on voyait défiler la section suivante derrière des portes encore
   closes. Il se place aussi sous l'en-tête plutôt que par-dessus, pour que la
   navigation reste lisible pendant l'ouverture. */
.mhc-hero-curtain {
	position: fixed;
	inset: 0;
	/* Sous l'en-tête, qui monte à 100. */
	z-index: 50;
	overflow: hidden;
	pointer-events: none;
	/* Sans profondeur déclarée, la rotation des battants serait plate. */
	perspective: 1600px;
	perspective-origin: 50% 42%;
}

/* --- Montée en lumière -----------------------------------------------------
   Avant de s'ouvrir, les battants s'éclairent. C'est ce que ferait une porte
   close devant une pièce qu'on allume : la lumière l'atteint avant de la
   franchir. Sans ce temps, ils paraissent inertes jusqu'à l'ouverture, et
   celle-ci arrive sans avoir été annoncée.

   L'éclairement porte sur la luminosité et non sur une couche posée par-
   dessus : c'est la matière du battant qui se révèle, motif compris, et non
   un voile qui s'enlève.
   -------------------------------------------------------------------------- */
@keyframes mhc-panel-wake {
	0% {
		filter: brightness(0.06) saturate(0.2) contrast(1.3);
	}
	/* Le noir tient un instant avant de céder : c'est cette retenue, et non
	   sa profondeur, qui fait sentir l'obscurité. Une valeur basse traversée
	   au premier vingtième de seconde ne se voit pas. */
	18% {
		filter: brightness(0.13) saturate(0.34) contrast(1.24);
	}
	64% {
		filter: brightness(0.84) saturate(0.94) contrast(1.02);
	}
	100% {
		filter: brightness(1) saturate(1) contrast(1);
	}
}

/* L'ombre qui pèse sur les angles extérieurs se retire à mesure : la lumière
   vient du centre, donc les bords s'éclairent en dernier.

   Elle est posée sur le conteneur et non sur les battants, dont les deux
   pseudo-éléments servent déjà à l'arête et au reflet. Elle se retire en
   500 ms, soit avant les 540 ms où l'écartement commence : le voile a
   disparu quand la vidéo se découvre, et rien n'est rallongé. */
@keyframes mhc-panel-shadow {
	0%   { opacity: 1; }
	70%  { opacity: 0.45; }
	100% { opacity: 0; }
}

.mhc-hero-curtain::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Au-dessus des battants (sans rang propre), sous le rai (4) et le
	   picto (51) : l'obscurité pèse sur la porte, pas sur ce qui l'éclaire. */
	z-index: 3;
	pointer-events: none;
	background:
		radial-gradient( 62% 54% at 50% 44%,
			rgb(0 0 0 / 34%) 0%,
			rgb(0 0 0 / 72%) 58%,
			rgb(0 0 0 / 92%) 100%
		);
	animation: mhc-panel-shadow 500ms cubic-bezier(0.32, 0, 0.24, 1) both;
}

.mhc-hero-curtain__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50.4%;
	animation: mhc-panel-wake 620ms cubic-bezier(0.4, 0, 0.3, 1) both;
	background-color: var(--mhc-primary-dark);
	background-image:
		/* Lumière rasante : le battant est plus clair près de son arête
		   intérieure, comme éclairé par l'ouverture. */
		linear-gradient( var(--mhc-panel-light, 100deg),
			rgb(217 164 65 / 0%) 42%,
			rgb(217 164 65 / 6%) 72%,
			rgb(239 217 163 / 11%) 96%
		),
		/* Trame propre au portail : maille plus large, trait plus fin, et le
		   picto en filigrane au centre de chaque losange. */
		var(--mhc-panel-pattern);
	will-change: transform;
	backface-visibility: hidden;
}

/* Épaisseur : une arête claire, puis une ombre portée vers l'intérieur. */
.mhc-hero-curtain__panel::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 90px;
	pointer-events: none;
}

/* Ombre des angles extérieurs, qui se retire pendant la montée en lumière. */
.mhc-hero-curtain__panel--left,
.mhc-hero-curtain__panel--right {
	isolation: isolate;
}

.mhc-hero-curtain__panel--left::before,
.mhc-hero-curtain__panel--right::before {
	z-index: 2;
}

.mhc-hero-curtain__panel--left {
	left: 0;
	transform-origin: left center;
	border-top-right-radius: 100% var(--mhc-hero-arch-v, 3.5vw);
	box-shadow: 14px 0 44px rgb(0 0 0 / 45%);
	animation: mhc-curtain-left 880ms cubic-bezier(0.62, 0.04, 0.2, 1) 540ms forwards;
}
.mhc-hero-curtain__panel--left::after {
	right: 0;
	background: linear-gradient( 90deg, transparent, rgb(239 217 163 / 16%) 82%, rgb(217 164 65 / 34%) 100% );
}

.mhc-hero-curtain__panel--right {
	right: 0;
	transform-origin: right center;
	border-top-left-radius: 100% var(--mhc-hero-arch-v, 3.5vw);
	box-shadow: -14px 0 44px rgb(0 0 0 / 45%);
	--mhc-panel-light: 80deg;
	animation: mhc-curtain-right 880ms cubic-bezier(0.62, 0.04, 0.2, 1) 540ms forwards;
}
.mhc-hero-curtain__panel--right::after {
	left: 0;
	background: linear-gradient( 270deg, transparent, rgb(239 217 163 / 16%) 82%, rgb(217 164 65 / 34%) 100% );
}

/* Le battant pivote d'abord sur lui-même, puis part sur le côté : c'est ce
   décalage entre rotation et translation qui donne le mouvement d'une porte
   plutôt que d'un panneau coulissant. */
@keyframes mhc-curtain-left {
	0%   { transform: none; }
	18%  { transform: rotateY(-11deg) translateX(-2%); }
	100% { transform: rotateY(-24deg) translateX(-104%); }
}

@keyframes mhc-curtain-right {
	0%   { transform: none; }
	18%  { transform: rotateY(11deg) translateX(2%); }
	100% { transform: rotateY(24deg) translateX(104%); }
}

/* --- Flou du fond ----------------------------------------------------------
   Tant que les portes sont fermées, ce qu'on devine derrière reste trouble.
   La netteté arrive avec l'ouverture : le regard fait le point en même temps
   que la scène se découvre.
   -------------------------------------------------------------------------- */
@keyframes mhc-hero-focus {
	0%   { filter: blur(14px) saturate(0.86); }
	100% { filter: blur(0) saturate(1); }
}

/* Le fond se fait net pendant que les battants s'écartent, pas après : la
   scène est déjà là quand on la découvre. */
.mhc-hero-video--intro .mhc-hero-video__bg {
	animation: mhc-hero-focus 1000ms cubic-bezier(0.3, 0, 0.2, 1) 480ms both;
}

/* --- Zoom lent -------------------------------------------------------------
   Le fond démarre agrandi et revient à sa taille. Le mouvement est trop lent
   pour être suivi, assez présent pour que l'image ne paraisse jamais figée.
   -------------------------------------------------------------------------- */
@keyframes mhc-hero-zoom {
	from { transform: scale(1.16); }
	to   { transform: scale(1); }
}

.mhc-hero-video--zoom .mhc-hero-video__media,
.mhc-hero-video--zoom .mhc-hero-video__poster {
	animation: mhc-hero-zoom 11s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --- Défilement des dates --------------------------------------------------
   Le chiffre en cours de défilement est mis en retrait : l'œil comprend
   qu'il n'est pas encore la valeur définitive.
   -------------------------------------------------------------------------- */
.mhc-hero-date__days[data-mhc-roll] { font-variant-numeric: tabular-nums; }
.mhc-hero-date__days .mhc-rolling { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
	.mhc-hero-curtain { display: none; }
	.mhc-hero-video--intro .mhc-hero-video__bg,
	.mhc-hero-video--zoom .mhc-hero-video__media,
	.mhc-hero-video--zoom .mhc-hero-video__poster { animation: none; }
	.mhc-hero-curtain__mark,
	.mhc-picto,
	.mhc-hero-curtain__mark::after { animation: none; }
}

/* --- Le rai de lumière ------------------------------------------------------
   Une pièce éclairée derrière une porte laisse passer un trait de lumière qui
   s'élargit à mesure que le battant s'écarte. C'est ce que reproduit cet
   élément : il naît dans l'axe de la fente, s'étend avec elle, puis s'éteint
   quand l'ouverture devient assez large pour que la lumière ne se distingue
   plus du reste.
   -------------------------------------------------------------------------- */
.mhc-hero-curtain__light {
	position: absolute;
	top: -6%;
	bottom: -6%;
	left: 50%;
	z-index: 4;
	width: 3px;
	margin-left: -1.5px;
	background: linear-gradient( 180deg,
		rgb(255 250 240 / 0%) 0%,
		rgb(255 246 224 / 92%) 18%,
		rgb(255 240 210 / 100%) 50%,
		rgb(255 246 224 / 92%) 82%,
		rgb(255 250 240 / 0%) 100%
	);
	opacity: 0;
	filter: blur(2px);
	mix-blend-mode: screen;
	pointer-events: none;
	animation: mhc-curtain-light 1240ms cubic-bezier(0.5, 0, 0.25, 1) 240ms forwards;
}

/* Halo latéral : la lumière ne reste pas confinée au trait, elle déborde sur
   les battants voisins comme le ferait une source réelle. */
.mhc-hero-curtain__light::after {
	content: "";
	position: absolute;
	inset: 0 -34px;
	background: linear-gradient( 90deg,
		transparent 0%,
		rgb(255 236 196 / 26%) 42%,
		rgb(255 240 210 / 42%) 50%,
		rgb(255 236 196 / 26%) 58%,
		transparent 100%
	);
	filter: blur(14px);
}

@keyframes mhc-curtain-light {
	/* Le trait naît faible et fin pendant que les battants s'éclairent, puis
	   s'élargit quand ils s'écartent. */
	0%   { opacity: 0;   transform: scaleX(1) scaleY(0.3); }
	14%  { opacity: 0.5; transform: scaleX(1) scaleY(0.9); }
	32%  { opacity: 1;   transform: scaleX(1.4) scaleY(1); }
	58%  { opacity: 0.9; transform: scaleX(26) scaleY(1); }
	100% { opacity: 0;   transform: scaleX(90) scaleY(1); }
}

/* --- Lumière rasante sur les battants ---------------------------------------
   Pendant qu'ils pivotent, une bande claire glisse sur leur surface : c'est
   le reflet d'une source fixe sur un plan qui tourne. Sans lui, les battants
   paraissent plats malgré la rotation.
   -------------------------------------------------------------------------- */
.mhc-hero-curtain__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 104deg,
		transparent 30%,
		rgb(255 240 214 / 9%) 46%,
		rgb(255 246 228 / 15%) 52%,
		transparent 68%
	);
	opacity: 0;
	pointer-events: none;
	animation: mhc-panel-sheen 950ms ease-out 560ms forwards;
}

.mhc-hero-curtain__panel--right::before {
	background: linear-gradient( 76deg,
		transparent 30%,
		rgb(255 240 214 / 9%) 46%,
		rgb(255 246 228 / 15%) 52%,
		transparent 68%
	);
}

@keyframes mhc-panel-sheen {
	0%   { opacity: 0; transform: translateX(0); }
	26%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(38%); }
}

@media (prefers-reduced-motion: reduce) {
	.mhc-hero-curtain__light,
	.mhc-hero-curtain__panel::before { display: none; }
	.mhc-hero-curtain__panel { animation: none; filter: none; }
	.mhc-hero-curtain::before { display: none; }
}

/* --------------------------------------------------------------------------
   Partenaires

   Une trentaine de marques ne se parcourt pas, elle se survole du regard.
   D'où le parti pris : une trame régulière de cellules identiques, logos
   désaturés, dont chacune se détache au survol. Coloriés d'emblée, trente
   logos se disputent l'attention et aucun ne ressort.

   Les cellules reprennent la silhouette des boutons : deux angles arrondis
   sur la diagonale : pour que la grille appartienne au même vocabulaire que
   le reste.
   -------------------------------------------------------------------------- */
.mhc-partners {
	display: grid;
	gap: 14px;
}

.mhc-partner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 108px;
	padding: var(--mhc-space-s);
	border: 1px solid var(--mhc-line);
	border-radius: var(--mhc-btn-corner, 14px) 0 var(--mhc-btn-corner, 14px) 0;
	background-color: var(--mhc-background);
	text-decoration: none;
	transition:
		opacity 420ms var(--mhc-anim-ease),
		transform 520ms var(--mhc-anim-ease),
		border-color 420ms var(--mhc-anim-ease),
		box-shadow 520ms var(--mhc-anim-ease);
}

.mhc-partner img {
	display: block;
	max-width: 72%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: filter 420ms var(--mhc-anim-ease), opacity 420ms var(--mhc-anim-ease);
}

/* Désaturés et légèrement effacés, les logos forment une trame homogène
   quelles que soient leurs couleurs d'origine. */
.mhc-partners--grey .mhc-partner img {
	filter: grayscale(1);
	opacity: 0.52;
}

/* Les logos paraissent en couleur au repos, à plat. Au survol, la cellule
   visée se détache d'un cran : elle grandit à peine et prend le filet doré,
   les autres se grisent en retrait. Le geste reste discret : on isole une
   marque sans bousculer la grille. L'agrandissement est assez faible pour
   rester dans l'écart entre cellules, ce qui évite tout chevauchement. */
.mhc-partners:has(.mhc-partner:hover) .mhc-partner:not(:hover) { opacity: 0.55; }
.mhc-partners:has(.mhc-partner:hover) .mhc-partner:not(:hover) img { filter: grayscale(1); }

.mhc-partners .mhc-partner:hover,
.mhc-partners .mhc-partner:focus-within {
	opacity: 1;
	z-index: 2;
	transform: translateY(-3px) scale(1.05);
	border-color: var(--mhc-accent);
	box-shadow:
		0 3px 8px rgb(34 17 9 / 7%),
		0 12px 26px rgb(34 17 9 / 12%);
}

.mhc-partners .mhc-partner:hover img,
.mhc-partners .mhc-partner:focus-within img {
	filter: none;
	opacity: 1;
}

.mhc-partner__name {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--mhc-muted);
}

/* Sur fond sombre, la trame s'inverse : cellules discrètes, logos éclaircis. */
.mhc-section--dark .mhc-partner,
.mhc-section--deep .mhc-partner {
	background-color: rgb(253 246 234 / 5%);
	border-color: rgb(253 246 234 / 12%);
}
.mhc-section--dark .mhc-partners--grey .mhc-partner img,
.mhc-section--deep .mhc-partners--grey .mhc-partner img {
	filter: grayscale(1) brightness(2.2) contrast(0.7);
	opacity: 0.6;
}

@media (hover: none) {
	.mhc-partners--grey .mhc-partner img { filter: none; opacity: 0.85; }
	.mhc-partners:hover .mhc-partner { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mhc-partner,
	.mhc-partner img { transition: none; }
	.mhc-partners .mhc-partner:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Programme
   -------------------------------------------------------------------------- */
.mhc-programme {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--mhc-space-m);
}

.mhc-day {
	position: relative;
	padding: var(--mhc-space-m);
	border: 1px solid var(--mhc-line);
	border-radius: var(--mhc-btn-corner, 14px) 0 var(--mhc-btn-corner, 14px) 0;
	background-color: var(--mhc-background);
	transition:
		transform 520ms var(--mhc-anim-ease),
		border-color 420ms var(--mhc-anim-ease),
		box-shadow 520ms var(--mhc-anim-ease);
}

.mhc-programme:has(.mhc-day:hover) .mhc-day:not(:hover) { opacity: 0.68; }
.mhc-programme .mhc-day:hover {
	opacity: 1;
	transform: translateY(-6px);
	border-color: var(--mhc-accent);
	box-shadow: 0 3px 8px rgb(34 17 9 / 6%), 0 14px 30px rgb(34 17 9 / 10%);
}
.mhc-day { transition-property: opacity, transform, border-color, box-shadow; }

.mhc-day__index {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--mhc-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--mhc-orange);
}

.mhc-day__title {
	margin: 0;
	font-family: var(--mhc-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.012em;
	color: var(--mhc-primary);
}

.mhc-day__hours {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--mhc-accent-deep);
}

.mhc-day__theme {
	margin: var(--mhc-space-xs) 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mhc-muted);
}

.mhc-day__list {
	margin: var(--mhc-space-m) 0 0;
	padding: var(--mhc-space-s) 0 0;
	border-top: 1px solid var(--mhc-line);
	list-style: none;
}
.mhc-day__list li {
	position: relative;
	padding-left: 1.375rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--mhc-ink);
}
.mhc-day__list li + li { margin-top: 0.5rem; }

/* Le picto de la marque sert de puce. */
.mhc-day__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 11px;
	height: 11px;
	background: var(--mhc-orange);
	-webkit-mask-image: var(--mhc-picto);
	mask-image: var(--mhc-picto);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Questions fréquentes

   Le pliage repose sur « details » et « summary » : le navigateur s'en charge
   sans script, et un lecteur d'écran annonce l'état ouvert ou fermé. Une
   question reste donc consultable même si le JavaScript échoue.
   -------------------------------------------------------------------------- */
/* Chaque question est une carte, comme le programme et les témoignages, et
   non une ligne séparée d'un simple filet. Elle reprend donc la silhouette
   commune : deux angles coupés, un filet complet, un fond. Sur la section
   sombre où la FAQ est posée, ce fond et ce filet sont déjà réglés plus bas
   (voir « Sections sombres »), qui supposaient d'ailleurs cette carte. */
.mhc-faq {
	display: grid;
	gap: 0.75rem;
	max-width: 820px;
	margin-inline: auto;
}

.mhc-faq__item {
	border: 1px solid var(--mhc-line);
	border-radius: var(--mhc-btn-corner, 14px) 0 var(--mhc-btn-corner, 14px) 0;
	background-color: var(--mhc-background);
	transition:
		opacity 420ms var(--mhc-anim-ease),
		border-color 420ms var(--mhc-anim-ease),
		box-shadow 520ms var(--mhc-anim-ease);
}

/* Même principe que partout ailleurs : au survol de la liste, les cartes
   reculent d'un cran ; celle qu'on vise, ou celle qui est ouverte, reste
   nette et prend le filet doré. L'attention se porte sur une question à la
   fois. La carte ouverte se signale sans qu'on ait à la survoler. */
.mhc-faq:has(.mhc-faq__item:hover) .mhc-faq__item:not(:hover):not([open]) { opacity: 0.68; }
.mhc-faq .mhc-faq__item:hover,
.mhc-faq .mhc-faq__item[open] {
	opacity: 1;
	border-color: var(--mhc-accent);
	box-shadow: 0 3px 8px rgb(34 17 9 / 6%), 0 14px 30px rgb(34 17 9 / 10%);
}

/* L'en-tête occupe toute la carte : la cible cliquable ne laisse aucun bord
   mort. Vertical resserré, la liste des questions se parcourt d'un coup d'œil
   tant qu'aucune n'est ouverte. */
.mhc-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mhc-space-s);
	padding: var(--mhc-space-s) var(--mhc-space-m);
	font-family: var(--mhc-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.008em;
	color: var(--mhc-primary);
	cursor: pointer;
	list-style: none;
	transition: color var(--mhc-transition);
}
/* Le triangle par défaut du navigateur cède la place au signe dessiné. */
.mhc-faq__question::-webkit-details-marker { display: none; }
.mhc-faq__question::marker { content: ""; }
.mhc-faq__question:hover { color: var(--mhc-accent-deep); }

/* Signe plus, qui devient moins une fois la question ouverte. */
.mhc-faq__sign {
	position: relative;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--mhc-accent);
	transition: transform 320ms var(--mhc-anim-ease);
}
/* Léger appui du signe quand on approche de la carte. */
.mhc-faq__item:hover .mhc-faq__sign { transform: scale(1.08); }
.mhc-faq__sign::before,
.mhc-faq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--mhc-primary-dark);
	transform: translate(-50%, -50%);
	transition: opacity 320ms var(--mhc-anim-ease), transform 320ms var(--mhc-anim-ease);
}
.mhc-faq__sign::before { width: 10px; height: 2px; }
.mhc-faq__sign::after  { width: 2px; height: 10px; }
.mhc-faq__item[open] .mhc-faq__sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

/* La réponse est détachée de la question par un filet interne, comme la liste
   du programme sous son titre. Le filet est doré translucide plutôt que le
   filet clair du thème : il se lit aussi bien sur le fond sombre de la
   section que sur un fond clair, sans dépendre du contexte. */
.mhc-faq__answer {
	margin: 0 var(--mhc-space-m);
	padding: var(--mhc-space-s) 0 var(--mhc-space-m);
	border-top: 1px solid rgb(217 164 65 / 22%);
	color: var(--mhc-muted);
	line-height: 1.7;
}
.mhc-faq__answer p { margin: 0 0 0.75rem; }
.mhc-faq__answer p:last-child { margin-bottom: 0; }

/* La réponse se glisse en place à l'ouverture, au lieu de paraître d'un bloc :
   le geste accompagne le dépliage plutôt que de le trancher. */
.mhc-faq__item[open] .mhc-faq__answer {
	animation: mhc-faq-answer 460ms var(--mhc-anim-ease);
}
@keyframes mhc-faq-answer {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

/* Sur écran tactile, le retrait des voisines n'a pas de sens : rien ne survole. */
@media (hover: none) {
	.mhc-faq:hover .mhc-faq__item { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mhc-faq__item,
	.mhc-faq__sign,
	.mhc-faq__sign::before,
	.mhc-faq__sign::after { transition: none; }
	.mhc-faq__item[open] .mhc-faq__answer { animation: none; }
}

/* --------------------------------------------------------------------------
   Témoignages
   -------------------------------------------------------------------------- */
.mhc-testimonials {
	display: grid;
	gap: var(--mhc-space-m);
}

.mhc-testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--mhc-space-m);
	margin: 0;
	padding: var(--mhc-space-m);
	border: 1px solid var(--mhc-line);
	border-radius: var(--mhc-btn-corner, 14px) 0 var(--mhc-btn-corner, 14px) 0;
	background-color: var(--mhc-background);
	transition:
		opacity 480ms var(--mhc-anim-ease),
		transform 560ms var(--mhc-anim-ease),
		border-color 420ms var(--mhc-anim-ease),
		box-shadow 560ms var(--mhc-anim-ease);
}

.mhc-testimonials:has(.mhc-testimonial:hover) .mhc-testimonial:not(:hover) { opacity: 0.68; }
.mhc-testimonials .mhc-testimonial:hover {
	opacity: 1;
	transform: translateY(-6px);
	border-color: var(--mhc-accent);
	box-shadow: 0 3px 8px rgb(34 17 9 / 6%), 0 14px 30px rgb(34 17 9 / 10%);
}

.mhc-testimonial__quote {
	position: relative;
	margin: 0;
	padding-top: var(--mhc-space-m);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--mhc-ink);
}

/* Guillemet ouvrant, dessiné en gros et en retrait. */
.mhc-testimonial__quote::before {
	content: "«";
	position: absolute;
	top: -0.24em;
	left: -0.06em;
	font-family: var(--mhc-font-display);
	font-size: 3.25rem;
	font-weight: 800;
	line-height: 1;
	color: var(--mhc-accent);
	opacity: 0.28;
}

.mhc-testimonial__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: var(--mhc-space-s);
	border-top: 1px solid var(--mhc-line);
}

.mhc-testimonial__portrait {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.mhc-testimonial__name {
	display: block;
	font-family: var(--mhc-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--mhc-primary);
}

.mhc-testimonial__role {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mhc-muted);
}

@media (hover: none) {
	.mhc-programme:hover .mhc-day,
	.mhc-testimonials:hover .mhc-testimonial { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Présentation illustrée

   Une image dominante, des vignettes qui la chevauchent, un texte en regard.
   Trois images de même taille alignées se regardent comme un catalogue ;
   c'est la hiérarchie entre elles qui fait une scène.
   -------------------------------------------------------------------------- */
.mhc-showcase {
	/* Partagées entre les vignettes, la marge du bloc d'images et la réserve
	   de la légende : ces trois valeurs doivent rester d'accord. */
	--mhc-thumb-size: clamp(88px, 12vw, 148px);
	--mhc-thumb-gap: clamp(0.75rem, 1.6vw, 1.25rem);
	--mhc-images-inset: clamp(2rem, 5vw, 4rem);

	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
	gap: clamp(2rem, 6vw, 5.5rem);
}

/* Les images passent à droite sans changer l'ordre du document : ce que lit
   un lecteur d'écran reste le texte d'abord. */
.mhc-showcase--right .mhc-showcase__images { order: 2; }

.mhc-showcase__images {
	position: relative;
	/* Les vignettes débordent du cadre : elles doivent pouvoir sortir. */
	padding-bottom: clamp(3rem, 7vw, 5.5rem);
	padding-inline-end: var(--mhc-images-inset);
}

/* --- Image principale ------------------------------------------------------ */
.mhc-showcase__main {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--mhc-surface);
	box-shadow: 0 24px 60px rgb(34 17 9 / 16%);
}

.mhc-showcase__main img {
	position: absolute;
	/* Débordement volontaire : la parallaxe déplace l'image sans jamais
	   découvrir de vide sur les bords. */
	inset: -7% 0;
	width: 100%;
	height: 114%;
	object-fit: cover;
}

/* La légende s'aligne à gauche et réserve la place que prennent les
   vignettes : centrée, elle passait dessous et devenait illisible. La marge
   de droite suit la largeur des vignettes, qui varie avec l'écran. */
.mhc-showcase__main figcaption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--mhc-space-m) var(--mhc-space-m) var(--mhc-space-s);
	/* Seule compte la part des vignettes qui recouvre l'image : elles
	   débordent du bloc, et réserver leur largeur entière laissait la légende
	   à l'étroit sans raison. */
	padding-inline-end: calc(
		var(--mhc-thumb-size) * 2 + var(--mhc-thumb-gap) - var(--mhc-images-inset) + 0.75rem
	);
	background: linear-gradient( 180deg, transparent, rgb(34 17 9 / 82%) 62% );
	color: #fff;
	/* Chasse et interlettrage resserrés : la place laissée par les vignettes
	   est étroite, et la légende y tient alors sur une seule ligne. */
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.4;
	text-transform: uppercase;
	text-align: left;
}

/* --- Vignettes -------------------------------------------------------------
   Elles chevauchent l'image principale par le bas et débordent du côté
   opposé au texte : le regard va de la grande image aux petites, puis au
   texte, sans revenir en arrière.
   -------------------------------------------------------------------------- */
.mhc-showcase__thumbs {
	position: absolute;
	bottom: 0;
	inset-inline-end: 0;
	display: flex;
	gap: var(--mhc-thumb-gap);
}

.mhc-showcase__thumb {
	position: relative;
	width: var(--mhc-thumb-size);
	aspect-ratio: 1 / 1;
	margin: 0;
	overflow: hidden;
	/* Silhouette en tesselle, celle des boutons et des cartes. */
	border-radius: var(--mhc-btn-corner, 14px) 0 var(--mhc-btn-corner, 14px) 0;
	border: 3px solid var(--mhc-cream);
	background: var(--mhc-surface);
	box-shadow: 0 10px 28px rgb(34 17 9 / 18%);
	transition: transform 560ms var(--mhc-anim-ease), box-shadow 560ms var(--mhc-anim-ease);
}

.mhc-showcase__thumb img {
	position: absolute;
	inset: -9% 0;
	width: 100%;
	height: 118%;
	object-fit: cover;
}

.mhc-showcase__thumbs:hover .mhc-showcase__thumb { opacity: 0.72; }
.mhc-showcase__thumbs .mhc-showcase__thumb:hover {
	opacity: 1;
	transform: translateY(-6px);
	box-shadow: 0 16px 38px rgb(34 17 9 / 24%);
}
.mhc-showcase__thumb { transition-property: opacity, transform, box-shadow; }

/* --- Médaillon -------------------------------------------------------------
   Posé sur l'arête de l'arche, à l'opposé des vignettes.
   -------------------------------------------------------------------------- */
.mhc-showcase__badge {
	position: absolute;
	top: clamp(1.5rem, 4vw, 3rem);
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(84px, 9vw, 108px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--mhc-accent);
	color: var(--mhc-primary-dark);
	box-shadow: 0 12px 30px rgb(217 164 65 / 34%);
}

.mhc-showcase__badge-value {
	font-family: var(--mhc-font-display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.mhc-showcase__badge-label {
	margin-top: 0.125rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* --- Texte ------------------------------------------------------------------ */
.mhc-showcase__title { margin: 0 0 var(--mhc-space-s); }

.mhc-showcase__text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--mhc-muted);
}
.mhc-showcase__text p { margin: 0 0 0.875rem; }
.mhc-showcase__text p:last-child { margin-bottom: 0; }

.mhc-showcase__points {
	margin: var(--mhc-space-m) 0 0;
	padding: 0;
	list-style: none;
}
.mhc-showcase__points li {
	position: relative;
	padding-left: 1.625rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--mhc-ink);
}
.mhc-showcase__points li + li { margin-top: 0.625rem; }

/* Le picto sert de puce, comme dans le programme. */
.mhc-showcase__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 13px;
	height: 13px;
	background: var(--mhc-orange);
	-webkit-mask-image: var(--mhc-picto);
	mask-image: var(--mhc-picto);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.mhc-showcase__body .mhc-btn { margin-top: var(--mhc-space-m); }

@media (max-width: 900px) {
	.mhc-showcase { grid-template-columns: 1fr; gap: var(--mhc-space-l); }
	.mhc-showcase--right .mhc-showcase__images { order: 0; }
	.mhc-showcase__main { aspect-ratio: 4 / 3; }
	.mhc-showcase { --mhc-images-inset: clamp(1rem, 8vw, 3rem); }
}

@media (max-width: 560px) {
	.mhc-showcase { --mhc-thumb-gap: 0.5rem; --mhc-thumb-size: 26vw; }
	.mhc-showcase__thumb { border-width: 2px; }
	.mhc-showcase__badge { width: 76px; }
}

@media (hover: none) {
	.mhc-showcase__thumbs:hover .mhc-showcase__thumb { opacity: 1; }
}

/* --- Le picto de la présentation -------------------------------------------
   Posé à cheval sur le bord de l'image, du côté du texte : il fait la couture
   entre les deux colonnes au lieu de flotter dans l'une ou l'autre. Son tracé
   se dessine à l'arrivée, comme celui du portail.
   -------------------------------------------------------------------------- */
.mhc-showcase__picto {
	position: absolute;
	top: 50%;
	inset-inline-end: 0;
	z-index: 3;
	display: block;
	width: 132px;
	aspect-ratio: 44 / 44.2;
	transform: translate(38%, -50%);
	color: var(--mhc-accent);
	pointer-events: none;
	filter: drop-shadow(0 10px 26px rgb(217 164 65 / 34%));
}

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

/* Tracé à l'arrivée : la découpe s'ouvre de gauche à droite, dans le sens du
   coup de pinceau. Bornée à zéro, elle ne peut pas dépasser la forme. */
.mhc-showcase__picto[data-mhc-draw] svg {
	clip-path: inset(0 100% 0 0);
	opacity: 0;
}

.mhc-showcase__picto[data-mhc-draw].is-drawn svg {
	clip-path: inset(0 0 0 0);
	opacity: 1;
	transition:
		clip-path 1100ms cubic-bezier(0.55, 0, 0.25, 1),
		opacity 240ms ease;
}

/* Au survol de la composition, le picto respire et son ombre s'ouvre. */
.mhc-showcase__images:hover .mhc-showcase__picto {
	transform: translate(38%, -50%) scale(1.08) rotate(-4deg);
	filter: drop-shadow(0 14px 34px rgb(217 164 65 / 46%));
}
.mhc-showcase__picto {
	transition:
		transform 720ms var(--mhc-anim-ease),
		filter 720ms var(--mhc-anim-ease);
}

/* --- Réactions au survol de la composition --------------------------------- */
.mhc-showcase__main img {
	transition: transform 1200ms var(--mhc-anim-ease);
}
.mhc-showcase__images:hover .mhc-showcase__main img {
	transform: translate3d(0, var(--mhc-parallax-y, 0), 0) scale(1.05);
}

/* Le médaillon tourne d'un huitième de tour et se rapproche. */
.mhc-showcase__badge {
	transition:
		transform 820ms var(--mhc-anim-ease),
		box-shadow 720ms var(--mhc-anim-ease);
}
.mhc-showcase__images:hover .mhc-showcase__badge {
	transform: rotate(-8deg) scale(1.06);
	box-shadow: 0 18px 40px rgb(217 164 65 / 46%);
}

/* --- Arrivée des points clés -----------------------------------------------
   Ils se posent l'un après l'autre : une liste qui paraît d'un bloc se lit
   comme un pavé, alors qu'échelonnée elle se parcourt.
   -------------------------------------------------------------------------- */
.mhc-showcase__points li {
	opacity: 0;
	transform: translateX(-12px);
	transition:
		opacity 520ms var(--mhc-anim-ease),
		transform 620ms var(--mhc-anim-ease);
}
.mhc-showcase__points.is-inview li { opacity: 1; transform: none; }
.mhc-showcase__points.is-inview li:nth-child(1) { transition-delay: 60ms; }
.mhc-showcase__points.is-inview li:nth-child(2) { transition-delay: 150ms; }
.mhc-showcase__points.is-inview li:nth-child(3) { transition-delay: 240ms; }
.mhc-showcase__points.is-inview li:nth-child(4) { transition-delay: 330ms; }
.mhc-showcase__points.is-inview li:nth-child(n+5) { transition-delay: 420ms; }

/* La puce grossit au survol de sa ligne. */
.mhc-showcase__points li::before {
	transition: transform 420ms var(--mhc-anim-ease), background-color 320ms ease;
}
.mhc-showcase__points li:hover::before {
	transform: scale(1.3) rotate(-12deg);
	background: var(--mhc-accent);
}

@media (prefers-reduced-motion: reduce) {
	.mhc-showcase__picto,
	.mhc-showcase__badge,
	.mhc-showcase__main img,
	.mhc-showcase__points li { transition: none; }
	.mhc-showcase__points li { opacity: 1; transform: none; }
	.mhc-showcase__picto[data-mhc-draw] svg { clip-path: none; opacity: 1; }
}

@media (max-width: 900px) {
	.mhc-showcase__picto {
		top: auto;
		bottom: 0;
		inset-inline-end: auto;
		inset-inline-start: 0;
		transform: translate(-24%, 28%);
		width: 96px;
	}
	.mhc-showcase__images:hover .mhc-showcase__picto {
		transform: translate(-24%, 28%) scale(1.06) rotate(-4deg);
	}
}

/* --------------------------------------------------------------------------
   Bande d'images

   Des hauteurs inégales, volontairement : une rangée d'images de même
   hauteur se lit comme une planche-contact, alors qu'un décalage donne le
   rythme d'un reportage.
   -------------------------------------------------------------------------- */
.mhc-strip {
	--mhc-strip-height: 260px;

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: end;
	gap: 16px;
}

.mhc-strip__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--mhc-surface);
	box-shadow: 0 10px 30px rgb(34 17 9 / 12%);
	transition:
		opacity 480ms var(--mhc-anim-ease),
		transform 620ms var(--mhc-anim-ease),
		box-shadow 620ms var(--mhc-anim-ease);
}

.mhc-strip__item--small  { height: calc( var(--mhc-strip-height) * 0.72 ); }
.mhc-strip__item--medium { height: var(--mhc-strip-height); }
.mhc-strip__item--tall   { height: calc( var(--mhc-strip-height) * 1.26 ); }

.mhc-strip__item img {
	position: absolute;
	/* Débordement : la parallaxe déplace l'image sans découvrir de vide. */
	inset: -8% 0;
	width: 100%;
	height: 116%;
	object-fit: cover;
}

/* Formes, empruntées au reste du vocabulaire. */
.mhc-strip--tessera .mhc-strip__item {
	border-radius: var(--mhc-btn-corner, 14px) 0 var(--mhc-btn-corner, 14px) 0;
}
.mhc-strip--arch .mhc-strip__item {
	border-radius: 999px 999px var(--mhc-arch-foot, 8px) var(--mhc-arch-foot, 8px);
}
.mhc-strip--square .mhc-strip__item { border-radius: var(--mhc-radius); }

.mhc-strip__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--mhc-space-m) var(--mhc-space-s) 0.75rem;
	background: linear-gradient( 180deg, transparent, rgb(34 17 9 / 84%) 60% );
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
}

/* Même principe qu'ailleurs : la bande recule, l'image visée reste nette. */
.mhc-strip:hover .mhc-strip__item { opacity: 0.66; }
.mhc-strip .mhc-strip__item:hover {
	opacity: 1;
	transform: translateY(-8px);
	box-shadow: 0 18px 44px rgb(34 17 9 / 22%);
}

@media (max-width: 900px) {
	.mhc-strip {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, 1fr);
	}
	.mhc-strip__item--tall { height: var(--mhc-strip-height); }
}

@media (max-width: 480px) {
	.mhc-strip { grid-template-columns: 1fr; }
	.mhc-strip__item,
	.mhc-strip__item--small,
	.mhc-strip__item--tall { height: calc( var(--mhc-strip-height) * 0.82 ); }
}

@media (hover: none) {
	.mhc-strip:hover .mhc-strip__item { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Textures de section

   Le motif se pose sur un pseudo-élément et non sur la section : celle-ci
   porte souvent déjà une image de fond, et « background-image » ne se cumule
   pas : la texture l'effacerait.

   Le pseudo-élément passe sous le contenu mais au-dessus du fond, d'où le
   rang zéro et la position relative sur la section. Les conteneurs Elementor
   déclarent déjà « position: relative », mais on l'écrit ici pour que la
   classe reste valable hors de l'éditeur.
   -------------------------------------------------------------------------- */
.mhc-tex { position: relative; }

.mhc-tex > * { position: relative; z-index: 1; }

.mhc-tex::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--mhc-tex-zellige);
	background-repeat: repeat;
	pointer-events: none;
}

/* Les figures de la même famille. */
.mhc-tex--arcs::before {
	background-image: var(--mhc-tex-arcs);
	/* L'arche se répète en bas de section, comme une frise, et non sur toute
	   la surface : répétée partout elle devient un papier peint. */
	background-repeat: repeat-x;
	background-position: bottom center;
}
.mhc-tex--stars::before { background-image: var(--mhc-tex-stars); }

/* Sur fond sombre, le brun disparaît : c'est la déclinaison dorée qui prend
   le relais. */
.mhc-tex--dark::before { background-image: var(--mhc-tex-zellige-dark); }
.mhc-tex--dark.mhc-tex--arcs::before { background-image: var(--mhc-tex-arcs-dark); }
.mhc-tex--dark.mhc-tex--stars::before { background-image: var(--mhc-tex-stars-dark); }

/* La trame s'efface vers le haut ou vers le bas selon la section, pour que le
   raccord entre deux sections ne montre pas une couture. */
.mhc-tex--fade-top::before {
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 100%);
	mask-image: linear-gradient(180deg, transparent, #000 22%, #000 100%);
}
.mhc-tex--fade-bottom::before {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent);
	mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent);
}

/* --------------------------------------------------------------------------
   Image de fond en superposition

   Une photographie posée sous une section a toujours besoin de son voile :
   sans lui le texte devient illisible dès que l'image change. Le voile est
   donné en dégradé plutôt qu'à plat : une opacité constante aplatit l'image
   autant qu'un aplat de couleur, et autant alors ne pas mettre d'image.
   -------------------------------------------------------------------------- */
.mhc-bg { position: relative; }
.mhc-bg > * { position: relative; z-index: 2; }

.mhc-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient( 172deg,
		rgb(253 246 234 / 97%) 0%,
		rgb(253 246 234 / 92%) 42%,
		rgb(246 234 218 / 96%) 100%
	);
}

.mhc-bg--dark::after {
	background: linear-gradient( 172deg,
		rgb(34 17 9 / 95%) 0%,
		rgb(34 17 9 / 88%) 44%,
		rgb(62 36 21 / 94%) 100%
	);
}

/* La section des témoignages laisse mieux voir sa photographie : son voile est
   allégé par rapport au réglage commun aux fonds sombres. On reste toutefois
   assez sombre pour que les citations, en clair, gardent leur lisibilité.
   L'override ne vise que cette section (par son identifiant d'ancre) : le
   programme, qui partage la classe, conserve son voile plus dense. */
#temoignages.mhc-bg--dark::after {
	background: linear-gradient( 172deg,
		rgb(34 17 9 / 78%) 0%,
		rgb(34 17 9 / 62%) 44%,
		rgb(62 36 21 / 80%) 100%
	);
}

/* La texture se pose par-dessus le voile, sinon l'image la noierait. */
.mhc-bg.mhc-tex::before { z-index: 2; }
.mhc-bg.mhc-tex > * { z-index: 3; }

@media (prefers-reduced-motion: no-preference) {
	/* L'image se décale très lentement au défilement : assez pour que la
	   section ne paraisse pas collée à la page, pas assez pour qu'on
	   remarque le mouvement. « fixed » ferait le même effet sans le coût,
	   mais iOS l'ignore et pose l'image de travers. */
	.mhc-bg { background-attachment: scroll; }
}

/* ==========================================================================
   Sections sombres : traitement complet

   Les modificateurs plus haut ne repeignaient que les titres. Une section
   qui bascule emporte avec elle tout ce qu'elle contient : surtitres,
   paragraphes, chiffres, cartes, filets. Sans quoi le fond devient noir et
   le texte reste noir.

   Les règles sont écrites une fois pour les deux fonds sombres, l'uni et le
   dégradé, qui ne se distinguent que par leur couleur de fond.

   Ce bloc vit dans cette feuille et non dans « art-direction.css » : les
   composants qu'il repeint sont définis ici, avec la même spécificité, et
   c'est la feuille chargée en dernier qui l'emporte. Écrites plus haut, ces
   règles perdaient sans bruit : les listes du programme restaient brunes sur
   brun.
   ========================================================================== */
.mhc-section--dark,
.mhc-section--deep {
	color: rgb(253 246 234 / 84%);
}

/* --- Titres et surtitres --------------------------------------------------- */
.mhc-section--dark .mhc-eyebrow,
.mhc-section--deep .mhc-eyebrow { color: var(--mhc-accent); }

.mhc-section--dark .mhc-display,
.mhc-section--deep .mhc-display { color: var(--mhc-cream, #fdf6ea); }

/* Le titre en contour : sa couleur était nommée en dur pour un fond clair.
   Sur fond sombre elle disparaissait : un trait brun sur du brun. */
.mhc-section--dark .mhc-outline,
.mhc-section--deep .mhc-outline {
	-webkit-text-stroke-color: var(--mhc-gold-soft, #efd9a3);
	color: transparent;
}

/* Le numéro de section, posé en très grand derrière le titre. */
.mhc-section--dark .mhc-index,
.mhc-section--deep .mhc-index { color: rgb(253 246 234 / 7%); }

/* Les listes autant que les paragraphes : les puces du programme portaient
   la couleur d'encre du thème, un brun foncé qui disparaissait sur le brun
   du fond. Un texte sans couleur propre doit suivre celle de sa section. */
.mhc-section--dark p,
.mhc-section--dark li,
.mhc-section--dark dd,
.mhc-section--dark small,
.mhc-section--deep p,
.mhc-section--deep li,
.mhc-section--deep dd,
.mhc-section--deep small { color: rgb(253 246 234 / 72%); }

.mhc-section--dark strong,
.mhc-section--dark dt,
.mhc-section--deep strong,
.mhc-section--deep dt { color: var(--mhc-cream, #fdf6ea); }

/* --- Compte à rebours ------------------------------------------------------ */
.mhc-section--dark .mhc-countdown__value,
.mhc-section--deep .mhc-countdown__value { color: var(--mhc-cream, #fdf6ea); }

.mhc-section--dark .mhc-countdown__unit,
.mhc-section--dark .mhc-countdown__label,
.mhc-section--deep .mhc-countdown__unit,
.mhc-section--deep .mhc-countdown__label { color: rgb(253 246 234 / 58%); }

.mhc-section--dark .mhc-countdown__units,
.mhc-section--deep .mhc-countdown__units { border-color: rgb(217 164 65 / 26%); }

/* --- Cartes : pavillons, journées, questions ------------------------------- */
.mhc-section--dark .mhc-day,
.mhc-section--dark .mhc-faq__item,
.mhc-section--dark .mhc-quote,
.mhc-section--deep .mhc-day,
.mhc-section--deep .mhc-faq__item,
.mhc-section--deep .mhc-quote {
	background-color: rgb(253 246 234 / 5%);
	border-color: rgb(253 246 234 / 12%);
}

.mhc-section--dark .mhc-day__title,
.mhc-section--dark .mhc-faq__question,
.mhc-section--deep .mhc-day__title,
.mhc-section--deep .mhc-faq__question { color: var(--mhc-cream, #fdf6ea); }

.mhc-section--dark .mhc-day__index,
.mhc-section--dark .mhc-day__hours,
.mhc-section--dark .mhc-day__theme,
.mhc-section--deep .mhc-day__index,
.mhc-section--deep .mhc-day__hours,
.mhc-section--deep .mhc-day__theme { color: rgb(253 246 234 / 62%); }

.mhc-section--dark .mhc-faq__answer,
.mhc-section--deep .mhc-faq__answer { color: rgb(253 246 234 / 70%); }

.mhc-section--dark .mhc-faq__sign,
.mhc-section--deep .mhc-faq__sign { color: var(--mhc-accent); }

/* --- Boutons fantômes ------------------------------------------------------ */
.mhc-section--dark .mhc-btn--ghost,
.mhc-section--deep .mhc-btn--ghost {
	color: var(--mhc-cream, #fdf6ea);
	border-color: rgb(239 217 163 / 42%);
}
.mhc-section--dark .mhc-btn--ghost:hover,
.mhc-section--deep .mhc-btn--ghost:hover {
	border-color: var(--mhc-accent);
	color: #fff;
}

/* --- Filets ---------------------------------------------------------------- */
.mhc-section--dark hr,
.mhc-section--deep hr { border-color: rgb(253 246 234 / 14%); }

/* ==========================================================================
   Ajustements d'espacement propres au contenu

   Elementor pose l'espacement des sections dans ses propres variables. Pour le
   corriger depuis le thème sans repasser par l'éditeur, on écrit dans ces
   variables en visant l'élément par sa classe d'identifiant, doublée de
   « .e-con » pour dépasser la spécificité de la règle générée par Elementor.
   C'est le procédé déjà employé pour l'arche de séparation.
   ========================================================================== */

/* Le ruban « Marhaba » et la section des partenaires (06) étaient séparés par
   208 pixels de vide, 104 sous le ruban et 104 au-dessus du titre. Le ruban
   annonce la section qui suit : il doit lui rester soudé. On supprime les deux
   retraits, et on donne au conteneur du ruban le fond crème des partenaires :
   transparent, il laissait voir une bande blanche entre le fond sombre des
   témoignages et le crème de la section 06. */
.e-con.elementor-element-marq0002 {
	--padding-bottom: 0px;
	background-color: var(--mhc-cream);
}
.e-con.elementor-element-partners1 { --padding-top: 0px; }

/* Bande billetterie : dernière section avant le pied de page. Son texte est
   blanc (elle est pensée pour un fond sombre), mais Elementor lui avait posé
   un fond beige clair qui le rendait illisible et la détachait comme un
   encart. On la repeint dans le brun profond, sur toute la largeur, et on la
   soude au pied de page en retirant la bande blanche qui l'en séparait (la
   marge haute du pied). La condition « :has » borne le retrait aux pages qui
   portent cette bande, les pages intérieures gardant leur respiration. */
#billetterie { background-color: var(--mhc-primary-dark); }
body:has(#billetterie) .mhc-footer { margin-top: 0; }

/* Retrait du conteneur supprimé sur les quatre côtés : le fond brun couvre la
   section d'un bord à l'autre, sans marge intérieure qui la détacherait. */
.e-con.elementor-element-cta00001 {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

/* La respiration reste portée par le widget lui-même (son propre réglage de
   marge intérieure et son fond dégradé) : le conteneur n'a plus qu'à ne pas
   ajouter de cadre autour. */