/* --------------------------------------------------------------------------
   Vocabulaire graphique du site.

   Quatre gestes portent l'identité :
     l'arche      : forme de masquage, empruntée aux architectures méditerranéennes ;
     le contraste : alternance franche de sections sombres et claires ;
     le nombre    : chiffres surdimensionnés servant d'ancres visuelles ;
     le ruban     : bandeau défilant, qui met la page en mouvement.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. L'arche
   Plein cintre : le haut décrit un demi-cercle, le bas reste droit. Un rayon
   volontairement démesuré laisse le navigateur le ramener à la moitié de la
   largeur, quelle que soit la taille de la carte.
   ========================================================================== */
.mhc-arch {
	border-radius: 999px 999px var(--mhc-arch-foot, 8px) var(--mhc-arch-foot, 8px);
	overflow: hidden;
}

/* Variante surbaissée, pour les formats larges. */
.mhc-arch--low {
	border-radius: 50% 50% var(--mhc-arch-foot, 8px) var(--mhc-arch-foot, 8px) / 32% 32% 0 0;
}

/* Arche dessinée en filet, posée en décor derrière un contenu. */
.mhc-arch-outline {
	position: absolute;
	border: 1px solid currentColor;
	border-radius: 999px 999px 0 0;
	opacity: 0.22;
	pointer-events: none;
}

/* ==========================================================================
   2. Sections contrastées
   ========================================================================== */
.mhc-section { position: relative; }

.mhc-section--dark {
	background: var(--mhc-primary-dark);
	color: #fff;
}
.mhc-section--dark h1,
.mhc-section--dark h2,
.mhc-section--dark h3 { color: #fff; }

.mhc-section--deep {
	background: linear-gradient(160deg, var(--mhc-primary) 0%, var(--mhc-primary-dark) 100%);
	color: #fff;
}
.mhc-section--deep h1,
.mhc-section--deep h2,
.mhc-section--deep h3 { color: #fff; }

.mhc-section--cream { background: var(--mhc-cream); }

/* Trame géométrique en filigrane sur les fonds sombres. */
.mhc-section--patterned::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--mhc-pattern);
	opacity: 0.4;
	pointer-events: none;
}

/* ==========================================================================
   3. Surtitre
   Un filet court précède le texte : il ancre le titre et rythme la page.
   ========================================================================== */
.mhc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--mhc-space-s);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mhc-accent);
}
.mhc-eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: currentColor;
}
.mhc-eyebrow--centered { justify-content: center; }

/* ==========================================================================
   4. Nombre surdimensionné
   Dessiné en contour, il occupe la page sans concurrencer le titre.
   ========================================================================== */
.mhc-index {
	font-family: var(--mhc-font-display);
	font-size: clamp(4rem, 11vw, 10rem);
	font-weight: 800;
	line-height: 0.82;
	letter-spacing: -0.03em;
	color: transparent;
	-webkit-text-stroke: 1px var(--mhc-accent);
	opacity: 0.38;
	pointer-events: none;
	user-select: none;
}

/* ==========================================================================
   5. Ruban défilant
   Deux exemplaires identiques se suivent ; quand le premier a parcouru sa
   propre largeur, le second occupe exactement sa place et la boucle est
   invisible.
   ========================================================================== */
.mhc-marquee {
	position: relative;
	overflow: hidden;
	user-select: none;
}

/* Le fondu des extrémités s'applique à l'enveloppe du contenu, non au ruban.

   Posé sur le ruban lui-même, il effaçait aussi son fond : les extrémités
   devenaient transparentes et laissaient voir la page au travers, ce qui
   produisait deux dégradés vers le blanc aux deux bouts d'une bande pourtant
   pleine. Le fond reste donc sur le ruban, le fondu sur ce qui défile. */
.mhc-marquee__viewport {
	display: flex;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.mhc-marquee__track {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--mhc-marquee-gap, 3rem);
	padding-inline-end: var(--mhc-marquee-gap, 3rem);
	animation: mhc-marquee var(--mhc-marquee-duration, 34s) linear infinite;
}
.mhc-marquee--reverse .mhc-marquee__track { animation-direction: reverse; }

/* Le défilement s'arrête sous le pointeur : sans cela, viser un mot serait
   impossible. */
.mhc-marquee:hover .mhc-marquee__track { animation-play-state: paused; }

@keyframes mhc-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.mhc-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--mhc-marquee-gap, 3rem);
	white-space: nowrap;
	/* En capitales et en graisse forte, l'espace des mots se referme :
	   « STREET FOOD » se lirait « STREETFOOD ». On l'élargit. */
	word-spacing: 0.22em;
	font-family: var(--mhc-font-display);
	font-size: clamp(1.5rem, 3.6vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.012em;
	text-transform: uppercase;
}

/* Séparateur entre deux entrées : l'étoile à huit branches du zellige,
   reprise ici en petit. Elle est posée en masque plutôt qu'en image, ce qui
   lui laisse prendre la couleur choisie dans le panneau. */
.mhc-marquee__item::after {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background: var(--mhc-accent);
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'><polygon%20points='12.00%2C0.00%2013.90%2C7.41%2020.49%2C3.51%2016.59%2C10.10%2024.00%2C12.00%2016.59%2C13.90%2020.49%2C20.49%2013.90%2C16.59%2012.00%2C24.00%2010.10%2C16.59%203.51%2C20.49%207.41%2C13.90%200.00%2C12.00%207.41%2C10.10%203.51%2C3.51%2010.10%2C7.41'%20fill='black'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'><polygon%20points='12.00%2C0.00%2013.90%2C7.41%2020.49%2C3.51%2016.59%2C10.10%2024.00%2C12.00%2016.59%2C13.90%2020.49%2C20.49%2013.90%2C16.59%2012.00%2C24.00%2010.10%2C16.59%203.51%2C20.49%207.41%2C13.90%200.00%2C12.00%207.41%2C10.10%203.51%2C3.51%2010.10%2C7.41'%20fill='black'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Variante évidée : seul le contour des lettres subsiste.

   Deux précautions s'imposent. La couleur du trait est nommée, jamais
   héritée d'un « color » que l'on vient de rendre transparent. Et les
   lettres sont écartées : le trait se dessine à cheval sur le contour du
   glyphe, moitié dedans moitié dehors, si bien qu'à chasse serrée les
   traits de deux lettres voisines se croisent et le mot devient illisible.
   « paint-order » fait en outre passer le remplissage par-dessus le trait,
   ce qui nettoie les intersections à l'intérieur d'une même lettre. */
.mhc-marquee--outline .mhc-marquee__item {
	color: transparent;
	-webkit-text-stroke: 1.2px var(--mhc-marquee-stroke, var(--mhc-primary));
	paint-order: stroke fill;
	letter-spacing: 0.06em;
}

/* Alternance pleine et évidée : le rythme naît du contraste entre les deux
   traitements, et chaque mot plein sert de repère de lecture. */
.mhc-marquee--outline .mhc-marquee__item:nth-child(even) {
	color: var(--mhc-marquee-stroke, var(--mhc-primary));
	-webkit-text-stroke-width: 0;
	letter-spacing: 0.01em;
}

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

/* ==========================================================================
   6. Parallaxe
   Le décalage est écrit par le script dans une variable ; la transformation
   reste décrite ici.
   ========================================================================== */
[data-mhc-parallax] {
	transform: translate3d(0, var(--mhc-parallax-y, 0), 0);
	will-change: transform;
}

/* ==========================================================================
   7. Titres révélés mot à mot
   ========================================================================== */
.mhc-word {
	display: inline-block;
	overflow: hidden;
	/* Marge basse : sans elle les jambages seraient rognés. */
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
	vertical-align: bottom;
}
.mhc-word__inner {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 720ms var(--mhc-anim-ease);
}
[data-mhc-split].is-inview .mhc-word__inner { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.mhc-word__inner {
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   8. Échelle typographique d'affichage
   ========================================================================== */
.mhc-display {
	font-family: var(--mhc-font-display);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.022em;
	text-wrap: balance;
	margin: 0;
}
.mhc-display--xl { font-size: clamp(2.75rem, 8vw, 6.5rem); }
.mhc-display--l  { font-size: clamp(2.25rem, 5.5vw, 4.25rem); }
.mhc-display--m  { font-size: clamp(1.875rem, 4vw, 3rem); }

/* Le fragment mis en valeur passe en contour : la hiérarchie se joue sur la
   texture autant que sur la couleur.

   La couleur du contour est nommée explicitement. « currentColor » serait
   piégeux ici : sur un élément qui déclare lui-même « color: transparent »,
   il se résout vers transparent, et le contour disparaîtrait avec le
   remplissage. */
.mhc-display .mhc-outline {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--mhc-outline-color, var(--mhc-accent));
	paint-order: stroke fill;
}

/* ==========================================================================
   9. Titre de section
   ========================================================================== */
.mhc-section-heading {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Le numéro chevauche le surtitre : les deux forment un seul bloc. */
.mhc-section-heading .mhc-index {
	display: block;
	margin-bottom: -0.18em;
}

.mhc-section-heading__title { margin: 0; }

.mhc-section-heading__text {
	margin: var(--mhc-space-s) 0 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--mhc-muted);
}
.mhc-section--dark .mhc-section-heading__text,
.mhc-section--deep .mhc-section-heading__text { color: rgb(255 255 255 / 78%); }

/* ==========================================================================
   10. Grain

   Une trame de bruit couvre la page en permanence. Presque invisible prise
   isolément, elle enlève aux aplats leur aspect numérique et donne aux
   fonds sombres une matière proche du papier teinté.
   ========================================================================== */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Dans l'éditeur, la trame gênerait la manipulation des blocs. */
.elementor-editor-active body::after { display: none; }

/* ==========================================================================
   11. Boutons : remplissage montant

   Au survol, une couleur monte depuis le bas et remplace le fond. Le
   contenu reste au-dessus grâce à l'empilement déclaré ici.
   ========================================================================== */
.mhc-btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.mhc-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mhc-btn-fill, var(--mhc-orange));
	transform: translateY(101%);
	transition: transform 480ms var(--mhc-anim-ease);
}
.mhc-btn:hover::before,
.mhc-btn:focus-visible::before { transform: translateY(0); }

/* Le remplissage prend le relais de la couleur de fond : chaque variante
   annonce la teinte qui monte et celle que prend son texte. */
.mhc-btn--primary,
.mhc-btn--gold   { --mhc-btn-fill: var(--mhc-primary-dark); }
.mhc-btn--primary:hover,
.mhc-btn--gold:hover,
.mhc-btn--primary:focus-visible,
.mhc-btn--gold:focus-visible { color: var(--mhc-accent); background-color: transparent; }

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

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

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

/* ==========================================================================
   12. Séparateur en arche

   La section suivante remonte en arche sur celle qui la précède. C'est la
   même courbe que les cartes, à l'échelle de la page.
   ========================================================================== */
.mhc-arch-top {
	--mhc-arch-span: 62vw;
	--mhc-arch-rise: 7vw;

	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: var(--mhc-arch-span) var(--mhc-arch-span) 0 0 /
	               var(--mhc-arch-rise) var(--mhc-arch-rise) 0 0;
	/* La courbe recouvre la section précédente, elle ne s'ajoute pas après. */
	margin-top: calc( var(--mhc-arch-rise) * -1 );
}

/* Sur un conteneur Elementor, les marges et l'arrondi ne se posent pas
   directement : Elementor les lit dans ses propres variables, avec une
   spécificité qu'une règle de thème ne peut pas dépasser. On écrit donc
   dans ces variables plutôt que contre elles. */
.e-con.mhc-arch-top {
	--border-radius: var(--mhc-arch-span) var(--mhc-arch-span) 0 0 /
	                 var(--mhc-arch-rise) var(--mhc-arch-rise) 0 0;
	--margin-top: calc( var(--mhc-arch-rise) * -1 );
	--margin-block-start: calc( var(--mhc-arch-rise) * -1 );
	overflow: hidden;
}

/* Une courbe calculée en unités de fenêtre devient énorme sur mobile :
   on la resserre pour qu'elle reste un accent, pas une amputation. */
@media (max-width: 780px) {
	.mhc-arch-top,
	.e-con.mhc-arch-top {
		--mhc-arch-span: 90vw;
		--mhc-arch-rise: 9vw;
	}
}

/* ==========================================================================
   13. En-tête au défilement

   Passé les premiers pixels, la barre se resserre et s'opacifie : elle
   cesse d'être un bandeau de page pour devenir un outil de navigation.
   ========================================================================== */
.mhc-header {
	transition:
		background-color 320ms ease,
		box-shadow 320ms ease,
		border-color 320ms ease;
}
.mhc-header__inner {
	transition: min-height 320ms var(--mhc-anim-ease);
}

.mhc-header.is-scrolled {
	background-color: rgb(253 246 234 / 92%);
	backdrop-filter: blur(12px);
	box-shadow: 0 6px 28px rgb(34 17 9 / 8%);
	border-bottom-color: transparent;
}
.mhc-header.is-scrolled .mhc-header__inner { min-height: 60px; }
.mhc-header.is-scrolled .mhc-brand__tagline {
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms ease, visibility 220ms ease;
}
.mhc-header.is-scrolled .mhc-brand__mark {
	transform: scale(0.85);
}

/* La barre d'informations se replie : passé le premier écran, les dates ont
   été lues et la place revient à la navigation. */
.mhc-topbar {
	transition: max-height 420ms var(--mhc-anim-ease), opacity 320ms ease;
	max-height: 60px;
	overflow: hidden;
}
.mhc-is-scrolled .mhc-topbar {
	max-height: 0;
	opacity: 0;
}

/* ==========================================================================
   14. Progression de lecture

   Un filet doré en haut de l'écran indique la position dans la page.
   ========================================================================== */
.mhc-progress {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 200;
	height: 2px;
	background: transparent;
	pointer-events: none;
}
.mhc-progress__bar {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--mhc-accent), var(--mhc-orange));
	transform: scaleX(var(--mhc-progress, 0));
	transform-origin: left center;
}

/* ==========================================================================
   15. Arche en mosaïque

   Le générateur écrit deux valeurs sur chaque tesselle : « --i », son rang
   d'apparition, et « --o », son opacité propre : les tesselles pâlissent
   vers le bas pour que le texte posé par-dessus reste lisible.
   ========================================================================== */
.mhc-mosaic {
	display: block;
	width: 100%;
	height: 100%;
}

.mhc-tess { opacity: var(--o, 1); }

.mhc-mosaic__outline {
	stroke-width: 1.5;
	opacity: 0.55;
}

/* Apparition en cascade : les tesselles se posent une à une, du bas de
   l'arche vers son sommet, comme un carrelage que l'on monte. */
.mhc-mosaic--animated .mhc-tess {
	opacity: 0;
	/* Sans « transform-box », l'origine d'un polygone SVG se calcule sur le
	   repère du dessin entier : chaque tesselle partirait de travers. */
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.35) rotate(-25deg);
	transition:
		opacity 520ms ease,
		transform 620ms var(--mhc-anim-ease);
	transition-delay: calc( var(--i) * 5ms );
}
.mhc-mosaic--animated.is-inview .mhc-tess,
.is-inview .mhc-mosaic--animated .mhc-tess {
	opacity: var(--o, 1);
	transform: scale(1) rotate(0);
}

.mhc-mosaic--animated .mhc-mosaic__outline {
	stroke-dasharray: 2600;
	stroke-dashoffset: 2600;
	transition: stroke-dashoffset 2200ms var(--mhc-anim-ease) 200ms;
}
.mhc-mosaic--animated.is-inview .mhc-mosaic__outline,
.is-inview .mhc-mosaic--animated .mhc-mosaic__outline {
	stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mhc-mosaic--animated .mhc-tess {
		opacity: var(--o, 1);
		transform: none;
		transition: none;
	}
	.mhc-mosaic--animated .mhc-mosaic__outline {
		stroke-dashoffset: 0;
		transition: none;
	}
}

/* ==========================================================================
   16. Interactions

   Principe commun : survoler un élément d'une série met cet élément en
   avant et retire les autres d'un cran. L'attention se porte sur un seul
   endroit à la fois, au lieu que tout brille en même temps.
   ========================================================================== */

/* --- Chiffres clés -------------------------------------------------------- */
.mhc-stat {
	position: relative;
	transition:
		opacity 380ms var(--mhc-anim-ease),
		transform 480ms var(--mhc-anim-ease);
}

/* Les voisins reculent dès qu'un chiffre est survolé. La condition porte sur
   « :has » et non sur le survol du conteneur : survoler la zone entre les
   éléments les grisait tous sans en désigner aucun. Le retrait ne se déclenche
   donc que si un élément de la série est réellement visé. */
.mhc-stats:has(.mhc-stat:hover) .mhc-stat:not(:hover) { opacity: 0.38; }
.mhc-stats .mhc-stat:hover {
	opacity: 1;
	transform: translateY(-8px);
}

/* Arche qui se lève derrière le chiffre : la forme signature, à l'échelle
   d'un détail. */
.mhc-stat::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: -0.75rem;
	width: 118px;
	height: 118px;
	margin-left: -59px;
	border: 1px solid var(--mhc-accent);
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
	opacity: 0;
	transform: translateY(14px) scale(0.86);
	transition:
		opacity 480ms var(--mhc-anim-ease),
		transform 560ms var(--mhc-anim-ease);
}
.mhc-stat:hover::before {
	opacity: 0.5;
	transform: translateY(0) scale(1);
}

.mhc-stat__value {
	transition: color 380ms var(--mhc-anim-ease);
}
.mhc-stat:hover .mhc-stat__value { color: var(--mhc-orange); }

/* Filet qui se déploie sous le libellé. */
.mhc-stat__label::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	margin: 0.625rem auto 0;
	background: var(--mhc-orange);
	transition: width 520ms var(--mhc-anim-ease);
}
.mhc-stat:hover .mhc-stat__label::after { width: 36px; }

/* --- Compte à rebours ----------------------------------------------------- */
.mhc-countdown__unit {
	transition:
		border-color 380ms var(--mhc-anim-ease),
		transform 480ms var(--mhc-anim-ease),
		background-color 380ms var(--mhc-anim-ease);
}
.mhc-countdown__units:has(.mhc-countdown__unit:hover) .mhc-countdown__unit:not(:hover) { opacity: 0.55; }
.mhc-countdown__units .mhc-countdown__unit:hover {
	opacity: 1;
	transform: translateY(-6px);
	border-color: var(--mhc-accent);
}

/* --- Navigation ----------------------------------------------------------- */
/* Le filet part de la gauche à l'arrivée du pointeur et se retire par la
   droite au départ : le trait suit le sens de lecture. */
.mhc-nav a {
	position: relative;
	border-bottom: 0 !important;
}
.mhc-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--mhc-accent);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 380ms var(--mhc-anim-ease);
}
.mhc-nav a:hover::after,
.mhc-nav a:focus-visible::after,
.mhc-nav .current-menu-item > a::after,
.mhc-nav .current_page_item > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* --- Sélecteur de langue -------------------------------------------------- */
.mhc-langs__item.is-current a { color: var(--mhc-accent-deep); }
.mhc-langs a { position: relative; }
.mhc-langs a::after {
	content: "";
	position: absolute;
	left: 0.5rem;
	right: 0.5rem;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transition: transform 320ms var(--mhc-anim-ease);
}
.mhc-langs a:hover::after { transform: scaleX(1); }

/* --- Pavillons ------------------------------------------------------------ */
/* Même principe que les chiffres : la grille recule, la carte survolée
   reste nette. */
/* Retrait modéré : les voisines s'effacent sans disparaître, pour que la
   grille reste lisible d'un coup d'œil. */
.mhc-pavilions:has(.mhc-pavilion:hover) .mhc-pavilion:not(:hover) { opacity: 0.72; }
.mhc-pavilions .mhc-pavilion:hover,
.mhc-pavilions .mhc-pavilion:focus-within { opacity: 1; }
.mhc-pavilion {
	transition:
		opacity 620ms var(--mhc-anim-ease),
		transform 720ms var(--mhc-anim-ease),
		box-shadow 720ms var(--mhc-anim-ease);
}

/* --- Titre de section ----------------------------------------------------- */
/* Le numéro s'affirme quand on approche du bloc. */
.mhc-section-heading .mhc-index {
	transition: opacity 520ms var(--mhc-anim-ease), transform 620ms var(--mhc-anim-ease);
}
.mhc-section-heading:hover .mhc-index {
	opacity: 0.62;
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
	.mhc-stat,
	.mhc-stat::before,
	.mhc-stat__label::after,
	.mhc-countdown__unit,
	.mhc-nav a::after,
	.mhc-langs a::after,
	.mhc-pavilion,
	.mhc-section-heading .mhc-index {
		transition: none;
	}
}

/* ==========================================================================
   17. Halo de curseur

   Un anneau doré suit le pointeur avec un léger retard et s'élargit sur ce
   qui est cliquable. Le curseur du système reste visible : l'anneau
   l'accompagne, il ne le remplace pas : remplacer un curseur, c'est priver
   la personne des repères de son propre système.
   ========================================================================== */
.mhc-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 1px solid var(--mhc-accent);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transform: translate3d( var(--mhc-cursor-x, 50vw), var(--mhc-cursor-y, 50vh), 0 ) scale(1);
	transition:
		opacity 320ms ease,
		width 280ms var(--mhc-anim-ease),
		height 280ms var(--mhc-anim-ease),
		margin 280ms var(--mhc-anim-ease),
		background-color 280ms ease;
}
.mhc-cursor.is-visible { opacity: 0.75; }

/* Sur un élément cliquable, l'anneau s'ouvre et se teinte. */
.mhc-cursor.is-active {
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	background: rgb(217 164 65 / 12%);
}

/* Écran tactile ou mouvement réduit : pas de halo du tout. */
@media (hover: none), (prefers-reduced-motion: reduce) {
	.mhc-cursor { display: none; }
}

/* ==========================================================================
   18. Angles ornés

   Quatre traits dorés marquent les angles d'une section sombre. Discret,
   mais c'est ce qui distingue un aplat d'un cadre composé.
   ========================================================================== */
.mhc-framed { position: relative; }
.mhc-framed::before,
.mhc-framed::after {
	content: "";
	position: absolute;
	width: 56px;
	height: 56px;
	border: 1px solid var(--mhc-accent);
	opacity: 0.35;
	pointer-events: none;
}
.mhc-framed::before {
	top: 28px;
	left: 28px;
	border-right: 0;
	border-bottom: 0;
}
.mhc-framed::after {
	right: 28px;
	bottom: 28px;
	border-left: 0;
	border-top: 0;
}

@media (max-width: 780px) {
	.mhc-framed::before,
	.mhc-framed::after { display: none; }
}

/* --- Ruban : traitement au survol ------------------------------------------
   Le ruban s'immobilise, les mots reculent, et celui que vise le pointeur
   se remplit et s'éclaire. Le principe est le même que pour les chiffres
   clés : une seule chose retient l'attention à la fois.
   -------------------------------------------------------------------------- */
.mhc-marquee__item {
	cursor: default;
	transition:
		color 420ms var(--mhc-anim-ease),
		opacity 420ms var(--mhc-anim-ease),
		transform 520ms var(--mhc-anim-ease),
		text-shadow 520ms var(--mhc-anim-ease),
		-webkit-text-stroke-color 420ms var(--mhc-anim-ease);
}

.mhc-marquee:hover .mhc-marquee__item { opacity: 0.35; }

.mhc-marquee .mhc-marquee__item:hover {
	opacity: 1;
	transform: scale(1.06);
	/* Halo diffus plutôt qu'une ombre portée : le mot rayonne au lieu de
	   se décoller du fond. */
	text-shadow: 0 0 34px rgb(217 164 65 / 45%);
}

/* Sous le pointeur, le mot évidé se remplit : c'est le contraste qui
   signale la cible, pas un simple changement de teinte. */
.mhc-marquee--outline .mhc-marquee__item:hover {
	color: var(--mhc-accent);
	-webkit-text-stroke-color: transparent;
}
.mhc-marquee--outline .mhc-marquee__item:nth-child(even):hover {
	color: var(--mhc-accent);
}

/* L'étoile de séparation tourne d'un huitième de tour : la rotation
   ramène chaque branche sur la position de la suivante, si bien que le
   mouvement se voit sans que la forme change. */
.mhc-marquee__item::after {
	transition: transform 620ms var(--mhc-anim-ease), background-color 420ms ease;
}
.mhc-marquee__item:hover::after {
	transform: rotate(45deg) scale(1.35);
	background: var(--mhc-orange);
}

@media (prefers-reduced-motion: reduce) {
	.mhc-marquee__item,
	.mhc-marquee__item::after { transition: none; }
	.mhc-marquee .mhc-marquee__item:hover { transform: none; }
}

/* ==========================================================================
   19. Finitions à l'orange

   L'orange ne prend aucune surface : il se pose sur les plus petits éléments
   - puces, losanges, filets courts, chevrons, indicateurs. Réparti ainsi,
   il crée un rythme le long de la page sans jamais concurrencer le doré, qui
   reste la couleur de marque.

   La règle est simple : si l'élément dépasse quelques pixels, il n'est pas
   candidat.
   ========================================================================== */

/* Le filet du surtitre, court par nature. */
.mhc-eyebrow::before { background: var(--mhc-orange); }

/* La puce en étoile de la barre d'informations. */
.mhc-topbar__item::before { background: var(--mhc-orange); }

/* Filet actif du menu : il ne fait que deux pixels de haut. */
.mhc-nav a::after { background: var(--mhc-orange); }

/* Puce de la liste des langues au survol. */
.mhc-langs a:hover { color: var(--mhc-orange); }

/* Le point d'ancrage du halo de curseur. */
.mhc-cursor.is-active { border-color: var(--mhc-orange); }

/* Les liens dans le corps de texte, au survol seulement. */
.mhc-prose a:hover,
.mhc-section-heading__text a:hover { color: var(--mhc-orange); }

/* Sur petit écran, le ruban se resserre : il n'a plus à porter un mot à
   pleine échelle, seulement à signaler qu'un contenu commence. */
@media (max-width: 860px) {
	.mhc-marquee__item { font-size: clamp(1.125rem, 5vw, 1.75rem); }
	.mhc-marquee { --mhc-marquee-gap: 28px; }
}

/* ==========================================================================
   20. Le picto comme signe récurrent

   Le picto de la marque ne sert pas qu'à l'ouverture : il revient en petit
   là où le regard s'arrête. La règle de répartition est la même que pour
   l'orange : il ponctue, il ne meuble pas.

   L'étoile de zellige garde la trame de fond ; le picto marque les moments.
   ========================================================================== */

/* Puce du surtitre : le filet cède la place à la signature. */
.mhc-eyebrow::before {
	width: 15px;
	height: 15px;
	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;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Séparateur du ruban : le picto remplace l'étoile. Le ruban porte le nom
   des univers du salon : la signature de la marque y a davantage sa place
   qu'un motif de trame. */
.mhc-marquee__item::after {
	width: 18px;
	height: 18px;
	-webkit-mask-image: var(--mhc-picto);
	mask-image: var(--mhc-picto);
}

/* Filigrane : un grand picto en retrait derrière les titres de section. Il
   se lit comme une texture, pas comme un élément à déchiffrer. */
.mhc-section-heading { position: relative; }
.mhc-section-heading::before {
	content: "";
	position: absolute;
	top: -18%;
	right: -4%;
	width: clamp(120px, 15vw, 240px);
	aspect-ratio: 44 / 44.2;
	background: currentColor;
	opacity: 0.055;
	-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;
	pointer-events: none;
}

/* Centré, le filigrane s'écarte du texte au lieu de passer dessous. */
.mhc-section-heading[style*="center"]::before,
.mhc-section-heading::before { z-index: 0; }
.mhc-section-heading > * { position: relative; z-index: 1; }

@media (max-width: 780px) {
	.mhc-section-heading::before { display: none; }
}

/* --- Filets du ruban -------------------------------------------------------
   Deux traits dorés bornent la bande. Sans eux, le ruban flottait entre deux
   sections sans jamais commencer ni finir : d'autant que ses extrémités
   s'effacent.
   -------------------------------------------------------------------------- */
.mhc-marquee::before,
.mhc-marquee::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	z-index: 1;
	height: 1px;
	background: linear-gradient( 90deg,
		transparent,
		rgb(217 164 65 / 32%) 16%,
		rgb(217 164 65 / 32%) 84%,
		transparent
	);
	pointer-events: none;
}
.mhc-marquee::before { top: 0; }
.mhc-marquee::after  { bottom: 0; }

/* Sur fond clair, le filet doré passe inaperçu : il s'assombrit d'un cran. */
.mhc-marquee:not(.mhc-marquee--reverse)::before,
.mhc-marquee:not(.mhc-marquee--reverse)::after {
	background: linear-gradient( 90deg,
		transparent,
		rgb(168 122 34 / 26%) 16%,
		rgb(168 122 34 / 26%) 84%,
		transparent
	);
}