/*
 * Hameau du Prat : CSS résiduel de la refonte (palette « olive »).
 *
 * Principe :
 * 1. Les couleurs et typographies viennent des RÉGLAGES GLOBAUX ELEMENTOR
 *    (Site Settings) : les jetons --color-* et --text-* ci-dessous ne font que
 *    pointer vers les variables --e-global-* du kit (valeurs de secours entre
 *    parenthèses). Modifier une couleur globale dans Elementor met donc le site
 *    entier à jour.
 * 2. Les espacements fluides clamp() (--space-*, --gutter) n'existent pas dans
 *    les réglages globaux d'Elementor : ils sont déclarés ici.
 * 3. Les composants reprennent les classes de la refonte (assets/site.css),
 *    posées sur les conteneurs et widgets Elementor (onglet Avancé › Classes
 *    CSS). Les sélecteurs sont adaptés au balisage Elementor (widgets heading,
 *    text-editor, button, image) et portés par la classe .hdp du <body> pour
 *    passer devant les styles par défaut des widgets.
 * 4. Le sélecteur de palette de la refonte (outil de présentation) n'est pas repris.
 */

/* ───────── Jetons ───────── */
body {
	/* Couleurs : réglages globaux Elementor (palette olive) */
	--color-paper: var(--e-global-color-paper, #F4EFE5);
	--color-paper-2: var(--e-global-color-paper2, #ECE5D7);
	--color-sand: var(--e-global-color-sand, #DDD3C1);
	--color-sky: var(--e-global-color-sky, #DFE2D3);
	--color-sky-2: var(--e-global-color-sky2, #C5CBB4);
	--color-brown: var(--e-global-color-accent, #675C4F);
	--color-ink: var(--e-global-color-text, #40372F);
	--color-ink-blue: var(--e-global-color-secondary, #3F4A33);
	--color-accent: var(--e-global-color-primary, #59664A);
	--color-accent-h: var(--e-global-color-accenth, #47523A);
	--color-on-accent: var(--e-global-color-onaccent, #F4EFE5);
	--color-rule: var(--e-global-color-rule, #D8CFBF);
	--color-focus: var(--e-global-color-focus, #3F4A33);
	--color-error: var(--e-global-color-error, #A9231E);
	--color-success: var(--e-global-color-success, #236436);
	--color-veil: var(--e-global-color-veil, rgb(64 55 47 / .42));
	--color-veil-2: var(--e-global-color-veil2, rgb(52 45 38 / .6));
	--color-veil-soft: var(--e-global-color-veilsoft, rgb(64 55 47 / .28));
	--color-photo-a: var(--e-global-color-photoa, #8A9378);
	--color-photo-b: var(--e-global-color-photob, #A89A86);
	--color-mark: var(--e-global-color-mark, #C5CBB4);
	--color-on-dark-rule: rgb(244 239 229 / .3);

	/* Polices : réglages globaux Elementor (polices hébergées localement) */
	--font-display: var(--e-global-typography-primary-font-family, "Gloock"), Georgia, serif;
	--font-body: var(--e-global-typography-text-font-family, "Hanken Grotesk"), system-ui, sans-serif;

	/* Tailles de texte : typographies globales Elementor (valeurs fluides clamp()) */
	--text-xs: var(--e-global-typography-xsmall-font-size, .8125rem);
	--text-sm: var(--e-global-typography-small-font-size, .9375rem);
	--text-md: var(--e-global-typography-text-font-size, 1.0625rem);
	--text-lg: var(--e-global-typography-lead-font-size, 1.25rem);
	--text-xl: var(--e-global-typography-hxl-font-size, clamp(1.5rem, 1.2rem + 1.2vw, 2rem));
	--text-2xl: var(--e-global-typography-h2xl-font-size, clamp(2rem, 1.3rem + 3vw, 3.75rem));
	--text-3xl: var(--e-global-typography-h3xl-font-size, clamp(2.6rem, 1.2rem + 5.4vw, 6.5rem));
	--text-statement: var(--e-global-typography-statement-font-size, clamp(1.9rem, 1rem + 3.6vw, 4.4rem));
	--text-display: var(--e-global-typography-display-font-size, clamp(3.2rem, 1rem + 8.4vw, 9.5rem));

	/* Espacements fluides (non disponibles dans les réglages globaux Elementor) */
	--space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem; --space-lg: 1.5rem;
	--space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 7rem; --space-5xl: 10rem;
	--gutter: clamp(1rem, .5rem + 2.5vw, 3rem);
	--header-h: 88px;
	--radius-sm: 2px; --radius-pill: 999px;
	--rule: 1px solid var(--color-rule);

	--ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--dur-fast: 140ms; --dur-med: 280ms; --dur-slow: 900ms;
	/* Flèche des boutons de la maquette, utilisée en masque CSS (faux boutons, Cartes cadeaux) */
	--hdp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 700px) { body { --header-h: 72px; } }

html, body { overflow-x: clip; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
body.hdp { -webkit-font-smoothing: antialiased; }

/* Lien d'évitement de Hello : couleurs de la charte */
.hdp .skip-link:focus { background: var(--color-ink); color: var(--color-paper); }

.hdp {
	/* ───────── Base (adaptée au balisage Elementor) ───────── */
	img, video { display: block; max-width: 100%; }
	:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
	a { color: inherit; }
	.elementor :is(p, ul, ol, dl, address, blockquote, figure) { margin: 0; }
	.elementor-heading-title {
		font-family: var(--font-display); font-weight: 400; font-style: normal;
		line-height: 1.02; letter-spacing: -.015em; margin: 0; color: inherit;
		overflow-wrap: anywhere; min-width: 0;
	}
	.elementor-widget-text-editor :is(h1, h2, h3, h4) {
		font-family: var(--font-display); font-weight: 400; line-height: 1.02;
		letter-spacing: -.015em; margin: 0; overflow-wrap: anywhere;
	}
	.elementor-widget-text-editor, .elementor-widget-heading { color: inherit; }
	.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

	/* Conteneur centré de la refonte (.wrap) */
	.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
	.narrow { max-width: 880px; }

	/* Photo encadrée avec parallaxe (.px) : le widget Image est positionné dans le
	   cadre ; la parallaxe vient de l'effet de mouvement « Défilement vertical »
	   d'Elementor Pro réglé sur le widget. */
	.px { position: relative; overflow: hidden; background: var(--color-photo-b); }
	.px > .elementor-widget-image { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; }
	.px > .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; }
	.px--a { background: var(--color-photo-a); }

	/* ───────── Boutons & liens ─────────
	   Le style « accent » est celui des boutons globaux Elementor (Site Settings ›
	   Boutons). Ci-dessous : variantes ghost / line, flèche, et boutons inclus
	   dans un texte riche (a.btn, span.btn). */
	:is(a.btn, span.btn), .btn .elementor-button {
		display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
		white-space: nowrap; font: 600 var(--text-sm)/1 var(--font-body);
		padding: 1rem 1.4rem; border-radius: var(--radius-sm); border: 1.5px solid transparent;
		text-decoration: none; cursor: pointer;
		transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast);
	}
	:is(a, span).btn--accent, .btn--accent .elementor-button { background: var(--color-accent); color: var(--color-on-accent); }
	:is(a, span).btn--accent:hover, .btn--accent .elementor-button:hover { background: var(--color-accent-h); color: var(--color-on-accent); }
	.btn--accent .elementor-button:active { transform: translateY(1px); }
	:is(a, span).btn--ghost, .btn--ghost .elementor-button { background: transparent; border-color: currentColor; color: var(--color-paper); }
	:is(a, span).btn--ghost:hover, .btn--ghost .elementor-button:hover { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }
	:is(a, span).btn--line, .btn--line .elementor-button { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
	:is(a, span).btn--line:hover, .btn--line .elementor-button:hover { background: var(--color-ink); color: var(--color-paper); }
	.btn .elementor-button-content-wrapper { gap: var(--space-xs); align-items: center; }
	.btn .elementor-button-icon { display: inline-flex; }
	.btn .elementor-button-icon svg, .btn .arr, .gift .arr { width: .95em; height: .95em; flex: none; margin-right: -.15em; transition: transform var(--dur-fast) var(--ease-out); }
	:is(.arr, .arrowbtn svg, .gift svg, .btn .elementor-button-icon svg) path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
	.btn .elementor-button:hover .elementor-button-icon svg, a.btn:hover .arr, a:hover .btn .arr { transform: translateX(4px); }
	/* Liens dans les widgets Texte : style .link de la maquette (soulignés, gras) */
	.elementor-widget-text-editor a:not(.btn) { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
	.elementor-widget-text-editor a:not(.btn):hover { color: var(--color-accent); }
	.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; white-space: nowrap; }
	.link:hover { color: var(--color-accent); }

	/* Faux bouton d'une carte entièrement cliquable (widget Titre, balise span) : une carte-lien ne peut pas contenir
	   un second lien ; le libellé a l'apparence de .btn, flèche de la maquette en masque CSS */
	.btn-faux .elementor-heading-title {
		display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap;
		font: 600 var(--text-sm)/1 var(--font-body); letter-spacing: 0; padding: 1rem 1.4rem;
		border-radius: var(--radius-sm); border: 1.5px solid transparent;
		background: var(--color-paper); color: var(--color-accent);
		transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast);
	}
	.btn-faux .elementor-heading-title::after, .gift .elementor-button::after {
		content: ""; width: .95em; height: .95em; flex: none; margin-right: -.15em; background: currentColor;
		-webkit-mask: var(--hdp-arrow) center / contain no-repeat; mask: var(--hdp-arrow) center / contain no-repeat;
		transition: transform var(--dur-fast) var(--ease-out);
	}
	a.door:hover .btn-faux .elementor-heading-title { background: var(--color-sky-2); color: var(--color-ink); }
	a.door:hover .btn-faux .elementor-heading-title::after { transform: translateX(4px); }
	.door[data-primary="false"] .btn-faux .elementor-heading-title { background: transparent; border-color: currentColor; color: var(--color-paper); }
	a.door[data-primary="false"]:hover .btn-faux .elementor-heading-title { background: var(--color-sky-2); color: var(--color-ink); border-color: transparent; }

	/* CTA posés sur photo ou fond sombre : aplat ivoire, texte couleur d'accent */
	:is(.hero, .door, .phero, .foot) :is(.btn--accent .elementor-button, span.btn--accent, a.btn--accent) { background: var(--color-paper); color: var(--color-accent); }
	:is(.hero, .phero, .foot) .btn--accent .elementor-button:hover, a.door:hover span.btn--accent { background: var(--color-sky-2); color: var(--color-ink); }

	/* ───────── En-tête (Theme Builder) ───────── */
	.hdr { background: var(--color-paper); border-bottom: var(--rule); z-index: 30; transition: transform var(--dur-med) var(--ease-out); }
	.hdr.is-hidden { transform: translateY(-101%); }
	.hdr__in { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--space-xl); height: var(--header-h); padding-inline: var(--gutter); }
	.hdr__in > .elementor-element { width: auto; }
	.logo { flex: none; height: 100%; padding-block: 12px; display: flex; align-items: center; }
	.logo a { display: flex; height: 100%; }
	.logo img { height: 100%; width: auto; max-width: 220px; object-fit: contain; }
	.mainnav { flex: 1 1 auto !important; min-width: 0; display: flex; justify-content: center; }
	.mainnav .elementor-nav-menu--main .elementor-nav-menu { gap: clamp(1rem, 2vw, 2.25rem); }
	.mainnav .elementor-nav-menu--main .elementor-nav-menu::after { content: none; } /* clearfix d'Elementor : en flex, il ajoutait un écart après le dernier lien */
	.mainnav .elementor-nav-menu--main .elementor-item {
		font: 500 var(--text-sm)/1.6 var(--font-body); color: var(--color-ink); white-space: nowrap;
		padding: .5rem 0; border-bottom: 1.5px solid transparent; transition: border-color var(--dur-fast);
	}
	.mainnav .elementor-nav-menu--main .elementor-item::before, .mainnav .elementor-nav-menu--main .elementor-item::after { display: none; }
	.mainnav .elementor-nav-menu--main .elementor-item:hover { border-color: var(--color-rule); color: var(--color-ink); }
	.mainnav .elementor-nav-menu--main .elementor-item.elementor-item-active { border-color: var(--color-accent); }
	.hdr__end { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--space-lg); flex: none; width: auto; margin-left: auto; }
	.hdr__end > .elementor-element { width: auto; }
	.hdr__tel .elementor-heading-title { font: 600 var(--text-sm)/1.6 var(--font-body); letter-spacing: 0; white-space: nowrap; }
	.hdr__tel a { color: inherit; text-decoration: none; white-space: nowrap; }
	.hdr__tel a:hover { color: var(--color-accent); }
	/* Pastille de langue « NL » / « FR » (= .hdr__lang) : shortcode [hdp_lang] du thème enfant (functions.php) */
	.hdr__lang .hdp-lang { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-decoration: none; white-space: nowrap; border: var(--rule); padding: .35rem .5rem; border-radius: var(--radius-sm); color: inherit; }
	/* Menu mobile = feuille .sheet de la maquette : bouton « Menu » (widget Bouton) qui ouvre un widget Off-Canvas
	   plein écran ; contenu éditable (bouton Fermer, Menu de navigation vertical, bouton, téléphone, langues). */
	.menu-btn .elementor-button { background: none; border: 1.5px solid var(--color-ink); border-radius: var(--radius-sm); color: var(--color-ink); padding: .65rem 1rem; font: 600 var(--text-sm)/normal var(--font-body); white-space: nowrap; }
	.menu-btn .elementor-button:hover { background: var(--color-ink); color: var(--color-paper); }
	.sheet-canvas .e-off-canvas { z-index: 100; }
	.sheet-canvas .e-off-canvas__main, .sheet-canvas .e-off-canvas__content { background: var(--color-paper); border-radius: 0; box-shadow: none; }
	.sheet { display: flex; flex-direction: column; min-height: 100svh; padding: var(--space-lg) var(--gutter); background: var(--color-paper); color: var(--color-ink); overflow-y: auto; }
	.sheet__close { align-self: flex-end; width: auto; }
	.sheet__close .elementor-button { background: none; border: 1.5px solid var(--color-ink); border-radius: var(--radius-sm); font: 600 var(--text-sm)/normal var(--font-body); padding: .65rem 1rem; color: var(--color-ink); }
	.sheet__nav { margin: var(--space-xl) 0; }
	.sheet__nav .elementor-nav-menu--main .elementor-nav-menu { display: grid; gap: var(--space-sm); }
	.sheet__nav .elementor-nav-menu--main .elementor-item { font: 400 2.1rem/1.15 var(--font-display); color: var(--color-ink); padding: 0; letter-spacing: -.015em; }
	.sheet__nav .elementor-nav-menu--main .elementor-item::before, .sheet__nav .elementor-nav-menu--main .elementor-item::after { display: none; }
	.sheet__nav .elementor-nav-menu--main .elementor-item.elementor-item-active, .sheet__nav .elementor-nav-menu--main .elementor-item:hover { color: var(--color-accent); }
	.sheet__foot { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-top: auto; }
	.sheet__foot > .elementor-element { width: auto; }
	.sheet__tel .elementor-heading-title { font: 600 var(--text-md)/1.6 var(--font-body); letter-spacing: 0; }
	.sheet__tel a, .sheet__lang a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; white-space: nowrap; }
	.sheet__lang .hdp-lang { display: block; } /* élément de flex dans .sheet__foot de la maquette */
	.sheet__tel a:hover, .sheet__lang a:hover { color: var(--color-accent); } /* = .link:hover */
	@media (max-width: 1240px) { .mainnav, .hdr__lang { display: none; } .hdr__end { margin-left: auto; } }
	@media (max-width: 700px) { .hdr__tel { display: none; } .hdr__in { gap: var(--space-md); } .logo { padding-block: 10px; } }
	@media (max-width: 400px) { .hdr__end .btn { display: none; } }

	/* ───────── Hero accueil ───────── */
	/* Hauteur, voile et texte : site.css l.126-130. Les effets au défilement (parallaxe du média,
	   montée et fondu du texte, voile 0,72 → 1) viennent du script de la refonte (hdp-home.js) ;
	   aucun effet de défilement ni animation d'entrée Elementor n'est posé sur le hero. */
	.hero { position: relative; display: block; height: calc(100svh - var(--header-h)); min-height: 560px; overflow: hidden; color: var(--color-paper); background: var(--color-ink-blue); }
	.hero__media { position: absolute; inset: -6% 0 0; width: auto; height: auto; z-index: 0; will-change: transform; }
	.hero__media > .elementor-widget-image { position: absolute; inset: 0; }
	.hero__media img { width: 100%; height: 100%; object-fit: cover; }
	.hero__veil { position: absolute; inset: 0; width: auto; height: auto; z-index: 1; background: var(--color-veil-2); opacity: .72; }
	.hero__copy { position: absolute; inset: auto 0 0; width: auto; max-width: none; z-index: 2; opacity: 1; padding: 0 var(--gutter) clamp(2rem, 6vh, 5rem); will-change: transform, opacity; }
	.hero__copy .elementor-heading-title { font-size: var(--text-display); line-height: .92; margin-top: var(--space-md); max-width: 11ch; }
	.hero__row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg) var(--space-2xl); margin-top: var(--space-xl); }
	.hero__row > .elementor-element { width: auto; }
	.hero__lede { max-width: 44ch; font-size: var(--text-lg); line-height: 1.5; }
	.hero__ctas, .phero__ctas, .endcta__btns { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-sm); }
	.hero__ctas > .elementor-element, .phero__ctas > .elementor-element, .endcta__btns > .elementor-element { width: auto; }
	/* Elementor donne min-width: 0 aux conteneurs : un groupe de boutons rétrécirait au lieu de passer
	   à la ligne (boutons coupés). On rétablit le comportement de la refonte (min-width: auto = contenu). */
	:is(.hero__row, .endcta, .foot__top, .sec__head, .book__head, .gate__intro, .rooms__head) > .e-con { min-width: auto; }
	/* Repère de défilement : conteneur vide, trait animé en CSS */
	.scrollcue { position: absolute; left: 50%; bottom: var(--space-md); z-index: 2; width: 1.5px; height: 44px; padding: 0; background: rgb(244 239 229 / .35); overflow: hidden; }
	.scrollcue::after { content: ""; position: absolute; inset: 0; background: var(--color-paper); transform: translateY(-100%); animation: hdp-cue 2.2s var(--ease-in-out) infinite; }
	@media (max-width: 700px) { .scrollcue { display: none; } }

	/* ───────── Hero pages intérieures ───────── */
	.phero { position: relative; height: clamp(440px, 72svh, 820px); color: var(--color-paper); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
	.phero > .px { position: absolute; inset: 0; }
	.phero .px > .elementor-widget-image { height: 130%; top: -15%; }
	.phero__veil { position: absolute; inset: 0; z-index: 1; background: var(--color-veil-2); opacity: .85; }
	.phero > .px { z-index: 0; } .phero__copy { z-index: 2; }
	.phero__copy { position: relative; width: 100%; padding-bottom: clamp(2rem, 6vh, 4.5rem); }
	.phero__copy .elementor-widget-heading .elementor-heading-title { font-size: var(--text-3xl); line-height: .95; max-width: 14ch; margin-top: var(--space-md); }
	.phero__lede { max-width: 52ch; font-size: var(--text-lg); line-height: 1.5; margin-top: var(--space-lg); }
	.phero__ctas { margin-top: var(--space-xl); }
	.phero--plain { height: auto; color: var(--color-ink); padding-top: var(--space-4xl); }
	.phero--plain .phero__copy { padding-bottom: var(--space-2xl); }

	/* ───────── Sections génériques ───────── */
	.sec { padding-block: var(--space-4xl); }
	.sec--tight { padding-block: var(--space-3xl); }
	.sec--alt { background: var(--color-paper-2); }
	.sec--sky { background: var(--color-sky); }
	.sec--ink { background: var(--color-ink); color: var(--color-paper); }
	.sec__head { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-2xl); }
	.sec__head > .elementor-element { width: auto; }
	.sec__head .elementor-heading-title { font-size: var(--text-2xl); max-width: 18ch; }
	.sec__head p { max-width: 46ch; color: var(--color-brown); font-weight: 500; }
	.split2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
	.split2 > .elementor-widget-heading .elementor-heading-title { font-size: var(--text-2xl); }
	.prose { display: grid; gap: var(--space-md); max-width: 64ch; }
	.prose--lg { font-size: var(--text-lg); line-height: 1.55; }
	.prose h3 { font-size: var(--text-xl); margin-top: var(--space-lg); }
	.prose > h3:first-child, .prose > .elementor-widget:first-child h3 { margin-top: 0; }
	.prose ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-2xs); }
	@media (max-width: 860px) { .split2 { grid-template-columns: minmax(0, 1fr); } }

	.chips-static ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; }
	.chips-static li { border: var(--rule); padding: .4rem .8rem; border-radius: var(--radius-pill); font-size: var(--text-sm); white-space: nowrap; }

	/* faits chiffrés */
	/* Faits chiffrés : conteneur de « faits » (Titre = chiffre, Texte = libellé) */
	.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); border-top: 1.5px solid currentColor; padding-top: var(--space-lg); margin: 0; }
	.facts > .fact { min-width: 0; display: block; }
	.facts .fact__k .elementor-heading-title { font: 400 clamp(2rem, 1.3rem + 2.6vw, 4rem)/1 var(--font-display); letter-spacing: normal; overflow-wrap: normal; }
	.facts .fact__v { margin: var(--space-xs) 0 0; font-size: var(--text-sm); }
	@media (max-width: 760px) { .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

	/* liste d'équipements */
	.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--rule); }
	.feat > .feat__item { display: block; padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-bottom: var(--rule); min-width: 0; }
	.feat .elementor-heading-title { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
	.feat p { font-size: var(--text-sm); margin-top: var(--space-2xs); }
	@media (max-width: 960px) { .feat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
	@media (max-width: 560px) { .feat { grid-template-columns: minmax(0, 1fr); } }

	/* tableau de tarifs */
	/* Tarifs : Titre (légende) + widget « Liste de prix » présenté comme le tableau de la maquette */
	.ptable { display: block; font-size: var(--text-sm); }
	.ptable__caption .elementor-heading-title { font: 400 var(--text-xl)/1.1 var(--font-display); letter-spacing: normal; margin-bottom: var(--space-md); }
	.ptable .elementor-price-list { list-style: none; margin: 0; padding: 0; }
	.ptable .elementor-price-list .elementor-price-list-item { display: block; margin: 0; padding: .85rem 0; border-bottom: var(--rule); }
	.ptable .elementor-price-list-text { padding: 0; }
	.ptable .elementor-price-list-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin: 0; padding: 0; font: 400 var(--text-sm)/1.6 var(--font-body); color: inherit; }
	.ptable .elementor-price-list-title { font-weight: 400; max-width: none; }
	.ptable .elementor-price-list-separator { display: none; }
	.ptable .elementor-price-list-price { font-weight: 600; white-space: nowrap; text-align: right; }
	/* Les deux tableaux de tarifs s'étirent à la même hauteur, lignes réparties comme un <table> de la maquette */
	.tables > .ptable { display: flex; flex-direction: column; }
	.tables > .ptable > .elementor-widget-price-list { flex: 1 1 auto; display: flex; flex-direction: column; }
	.tables > .ptable .elementor-price-list { flex: 1 1 auto; display: flex; flex-direction: column; }
	.tables > .ptable .elementor-price-list .elementor-price-list-item { flex: 1 1 auto; }
	.tables { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl) var(--space-3xl); }
	@media (max-width: 860px) { .tables { grid-template-columns: minmax(0, 1fr); } }

	.note { border-left: 3px solid var(--color-accent); padding: var(--space-sm) var(--space-md); background: var(--color-paper); font-size: var(--text-sm); }

	/* Emplacement des widgets externes (Elloha, tarifs, Mariages.net) : seul le conteneur est stylé */
	.ext-widget { min-height: 1px; }
	.ext-widget--tarifs:empty, .ext-widget--tarifs > .elementor-widget-html:empty { display: none; }

	/* ───────── Seuil photo accueil ───────── */
	.gate { position: relative; z-index: 2; background: var(--color-paper); }
	.gate__intro { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md) var(--space-xl); padding-block: var(--space-4xl) var(--space-xl); }
	.gate__intro > .elementor-element { width: auto; }
	.gate__intro .elementor-heading-title { font-size: var(--text-2xl); max-width: 14ch; }
	.gate__note { font-size: var(--text-sm); font-weight: 500; color: var(--color-brown); max-width: 34ch; }
	.doors { display: grid; grid-template-columns: minmax(0, var(--a, 1fr)) minmax(0, var(--b, 1fr)); height: min(92svh, 900px); min-height: 560px; }
	.gate[data-season="ete"] .doors { --a: 3fr; --b: 2fr; }
	.gate[data-season="evenements"] .doors { --a: 2fr; --b: 3fr; }
	/* Cartes-liens (portes, piste des gîtes, cartes gîtes, actualités) : la carte entière est un lien,
	   son texte ne change jamais de couleur au survol (maquette l.218-233, 544-546) ; seuls l'image,
	   le voile et le bouton réagissent. */
	:is(a.door, a.room, a.gcard, a.card), :is(a.door, a.room, a.gcard, a.card):is(:hover, :focus, :active, :visited) { color: inherit; text-decoration: none; }
	.door, a.door, a.door:is(:hover, :focus, :active, :visited) { color: var(--color-paper); }
	.door { position: relative; display: block; overflow: hidden; text-decoration: none; min-width: 0; height: auto; }
	.door > .px { position: absolute; inset: 0; }
	.door .px img { transition: scale 1.2s var(--ease-out); }
	.door:hover .px img { scale: 1.05; }
	.door__veil { position: absolute; inset: 0; background: var(--color-veil); transition: background-color var(--dur-med) var(--ease-out); }
	.door:hover .door__veil { background: var(--color-veil-soft); }
	.door__copy { position: absolute; inset: auto 0 0; padding: var(--space-2xl) clamp(1.25rem, 3vw, 3.5rem); display: grid; gap: var(--space-md); justify-items: start; }
	.door__copy > .elementor-element { width: auto; }
	.door__now { background: var(--color-paper); color: var(--color-ink); padding: .3rem .6rem; border-radius: var(--radius-pill); letter-spacing: .04em; white-space: nowrap; }
	.door[data-primary="false"] .door__now { display: none; }
	.door h3.elementor-heading-title { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5.4rem); line-height: .95; max-width: 9ch; }
	.door p { max-width: 40ch; }
	/* Chiffres d'une porte : widget « Liste d'icônes » en ligne, sans icône */
	.door__facts .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; }
	.door__facts .elementor-icon-list-item { margin: 0; padding: 0; font: 600 var(--text-sm)/1.6 var(--font-body); color: inherit; white-space: nowrap; }
	.door__facts .elementor-icon-list-item::after { display: none; }
	.door__facts .elementor-icon-list-text { color: inherit; padding: 0; }
	.door + .door { border-left: 3px solid var(--color-paper); }
	@media (max-width: 860px) {
		.doors { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
		.door { height: 86svh; min-height: 540px; }
		.door + .door { border-left: 0; border-top: 3px solid var(--color-paper); }
		.gate[data-season="evenements"] .door--event { order: -1; border-top: 0; }
		.gate[data-season="evenements"] .door--stay { border-top: 3px solid var(--color-paper); }
	}

	/* ───────── Récit ───────── */
	.story { position: relative; padding-block: var(--space-5xl) var(--space-4xl); }
	.story__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg); }
	.statement { grid-column: 2 / span 10; }
	.statement .elementor-heading-title { font: 400 var(--text-statement)/1.12 var(--font-display); letter-spacing: -.01em; }
	.statement .w { opacity: .16; transition: opacity 300ms linear; }
	.statement .w.on { opacity: 1; }
	.collage { grid-column: 1 / -1; position: relative; display: block; height: clamp(460px, 54vw, 780px); margin-top: var(--space-3xl); }
	.collage > .e-con { position: absolute; margin: 0; }
	.collage .c1 { left: 0; top: 4%; width: 36%; }
	.collage .c2 { left: 42%; top: 0; width: 28%; }
	.collage .c3 { right: 0; top: 30%; width: 24%; }
	.collage .c1 .px { aspect-ratio: 4/5; } .collage .c2 .px { aspect-ratio: 3/4; } .collage .c3 .px { aspect-ratio: 4/5; }
	.collage .px { width: 100%; }
	.collage .figcap { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brown); margin-top: var(--space-xs); }
	.story__grid > .story__copy { grid-column: 7 / span 5; }
	.story__copy { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); font-size: var(--text-lg); line-height: 1.55; }
	.story__copy p + p { font-size: var(--text-md); }
	@media (max-width: 860px) {
		.statement { grid-column: 1 / -1; }
		.collage { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
		.collage > .e-con { position: relative; left: auto; right: auto; top: auto; width: auto; transform: none !important; }
		.collage .c1 { grid-column: 1 / -1; }
		.collage .c1 .px { aspect-ratio: 4/3; }
		.collage .c2 .px, .collage .c3 .px { aspect-ratio: 3/4; }
		.story__grid > .story__copy { grid-column: 1 / -1; }
	}

	/* ───────── Bande cinéma ───────── */
	.band { position: relative; height: 110svh; min-height: 620px; color: var(--color-paper); display: grid; place-items: end start; }
	.band--short { height: 80svh; min-height: 520px; }
	.band > .px { position: absolute; inset: 0; }
	.band .px > .elementor-widget-image { height: 130%; top: -15%; }
	.band__veil { position: absolute; inset: 0; z-index: 1; background: var(--color-veil-2); }
	.band > .px { z-index: 0; } .band__copy { z-index: 2; }
	.band__copy { position: relative; padding: 0 var(--gutter) var(--space-4xl); width: 100%; }
	.band__copy > .elementor-widget-heading .elementor-heading-title { font-size: var(--text-2xl); max-width: 16ch; }
	.band__copy .facts { margin-top: var(--space-2xl); border-top-color: var(--color-on-dark-rule); border-top-width: 1px; }
	.band__copy .btn { margin-top: var(--space-xl); width: auto; }

	/* ───────── Avis Mariages.net (widget officiel) ───────── */
	/* ───────── Avis des mariés (modèle partagé accueil / Mariages, widgets natifs) ─────────
	   Maquette : .reviews, .score, .reviews__rail, .rcard, .reviews__ctrl, .arrowbtn, .reviews__src.
	   Le carrousel est un conteneur à défilement horizontal natif (scroll-snap, glisser au doigt), comme la maquette ;
	   les flèches sont pilotées par hdp.js (script de la maquette). */
	.reviews { background: var(--color-sky); padding-block: var(--space-4xl); overflow: hidden; }
	.reviews__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: end; }
	.score { display: grid; gap: var(--space-sm); }
	.score__title .elementor-heading-title { font-size: var(--text-2xl); }
	.score__num .elementor-heading-title { font: 400 clamp(4.5rem, 2rem + 9vw, 10rem)/.85 var(--font-display); letter-spacing: -.03em; color: var(--color-ink); }
	.score__num small { font-size: .32em; letter-spacing: 0; margin-left: .15em; }
	.score__meta p { margin: 0; font-weight: 600; }
	.score__meta p span { display: block; font-weight: 400; font-size: var(--text-sm); } /* mention sous le nombre d'avis */
	/* Notes par critère (= dl.crit) : conteneurs Texte (libellé) + Titre (note) */
	.crit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding-top: var(--space-md); border-top: 1.5px solid var(--color-ink); }
	.crit__item { display: block; min-width: 0; }
	.crit__k p { margin: 0; font-size: var(--text-xs); font-weight: 600; line-height: 1.3; }
	.crit__v .elementor-heading-title { margin: var(--space-2xs) 0 0; font: 400 var(--text-xl)/1 var(--font-display); letter-spacing: normal; }
	.reviews__rail {
		display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--space-lg);
		overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scroll-padding-inline: var(--gutter);
		padding: var(--space-2xl) var(--gutter) var(--space-md); margin-top: var(--space-md);
	}
	.rcard { flex: 0 0 min(84vw, 400px); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; margin: 0; padding: var(--space-xl); background: var(--color-paper); }
	/* Étoiles (widget Notation, caractères ★) = .stars */
	.rcard .stars .elementor-star-rating { display: block; font-size: 1.1rem; line-height: 1.6; letter-spacing: .12em; white-space: nowrap; color: var(--color-accent); }
	.rcard .stars .elementor-star-rating { font-family: var(--font-body); } /* police de la maquette (Elementor : Arial) */
	.rcard .stars .elementor-star-rating i { margin: 0; font-style: normal; color: var(--color-accent); }
	.rcard .stars .elementor-star-rating i::before { color: var(--color-accent); } /* étoile pleine d'Elementor, orange par défaut */
	.rcard__title .elementor-heading-title { font-size: var(--text-xl); line-height: 1.1; }
	.rcard__quote blockquote { margin: 0; padding: 0; border: 0; font-size: var(--text-sm); font-style: normal; color: var(--color-ink); }
	.rcard__quote blockquote p { margin: 0; }
	.rcard__quote blockquote p + p { margin-top: var(--space-xs); }
	.rcard__cap { display: flex; flex-direction: row; justify-content: space-between; gap: var(--space-md); margin-top: auto; padding-top: var(--space-md); border-top: var(--rule); }
	.rcard__cap > .elementor-widget { width: auto; }
	.rcard__cap .elementor-heading-title { display: block; font: 600 var(--text-xs)/1.6 var(--font-body); letter-spacing: .04em; color: var(--color-ink); }
	.rcard__src .elementor-heading-title { color: var(--color-brown); white-space: nowrap; }
	.reviews__ctrl { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); }
	.reviews__ctrl > .e-con, .reviews__ctrl > .elementor-widget { width: auto; }
	.reviews__arrows { display: flex; flex-direction: row; gap: var(--space-xs); }
	/* Flèches (= .arrowbtn) : widget Bouton, texte réservé aux lecteurs d'écran */
	.arrowbtn .elementor-button {
		display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
		border: 1.5px solid var(--color-ink); border-radius: 50%; background: transparent; color: var(--color-ink);
		font: 600 1.1rem/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast);
	}
	.arrowbtn .elementor-button:hover, .arrowbtn .elementor-button:focus-visible { background: var(--color-ink); color: var(--color-paper); }
	.arrowbtn .elementor-button[aria-disabled="true"] { opacity: .3; cursor: default; background: transparent; color: var(--color-ink); }
	.arrowbtn .elementor-button-content-wrapper { display: block; }
	.arrowbtn .elementor-button-icon { display: block; margin: 0; }
	.arrowbtn .elementor-button-icon svg { display: block; width: 18px; height: 18px; }
	.arrowbtn--prev .elementor-button-icon svg { transform: scaleX(-1); } /* même icône que les boutons, retournée */
	.arrowbtn .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.reviews__src p { margin: 0; font-size: var(--text-xs); color: var(--color-ink); }
	@media (max-width: 960px) { .reviews__top { grid-template-columns: minmax(0, 1fr); } .crit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
	@media (max-width: 480px) { .crit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

	/* ───────── Gîtes : piste horizontale (accueil) ───────── */
	.rooms { position: relative; background: var(--color-paper); }
	.rooms__pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
	.rooms__head { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md); margin-bottom: var(--space-xl); }
	.rooms__head > .elementor-element { width: auto; }
	.rooms__head .elementor-heading-title { font-size: var(--text-2xl); }
	.rooms__hint { font-size: var(--text-sm); color: var(--color-brown); font-weight: 500; }
	.track { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--space-lg); padding-inline: var(--gutter); will-change: transform; }
	.room { flex: 0 0 min(78vw, 620px) !important; width: auto; display: grid; gap: var(--space-sm); align-content: start; text-decoration: none; color: inherit; }
	.room .px { aspect-ratio: 3/2; }
	.room .px img { transition: scale 1s var(--ease-out); }
	.room:hover .px img { scale: 1.04; }
	.room__line { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
	.room__line > .elementor-element { width: auto; }
	.room .elementor-heading-title { font-size: var(--text-xl); }
	.room .spec, .gcard .spec { font-weight: 600; font-size: var(--text-sm); color: var(--color-brown); }
	.room .spec { white-space: nowrap; }
	.room p { font-size: var(--text-sm); max-width: 52ch; }
	.room--end { flex-basis: min(70vw, 420px) !important; align-content: center; background: var(--color-sky); padding: var(--space-2xl); }
	.room--end .elementor-heading-title { font-size: var(--text-2xl); }
	/* Barre de progression de la piste : deux conteneurs vides, la largeur est pilotée par hdp-home.js */
	.progress { display: block; height: 2px; width: auto; background: var(--color-rule); margin: var(--space-xl) var(--gutter) 0; }
	.progress__bar { display: block; height: 100%; width: 100%; background: var(--color-ink); transform-origin: left; transform: scaleX(0); }
	.rooms.is-static { height: auto !important; }
	.rooms.is-static .rooms__pin { position: relative; height: auto; padding-block: var(--space-4xl); }
	.rooms.is-static .track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-md); transform: none !important; }
	.rooms.is-static .room { scroll-snap-align: start; flex-basis: min(84vw, 520px) !important; }
	.rooms.is-static .progress { display: none; }

	/* cartes gîtes (pages intérieures) */
	.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
	/* Modèle « Nos gîtes » : grille automatique sur les fiches gîtes (sans empilement à 900 px, comme le style en ligne de la maquette) */
	.gcards-host--auto .gcards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
	.gcard { display: grid; gap: var(--space-sm); align-content: start; text-decoration: none; color: inherit; min-width: 0; }
	.gcard .px { aspect-ratio: 4/5; }
	.gcard .px img { transition: scale 1s var(--ease-out); }
	.gcard:hover .px img { scale: 1.04; }
	.gcard .elementor-heading-title { font-size: var(--text-xl); }
	.gcard p { font-size: var(--text-sm); }
	a.gcard:hover .elementor-heading-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
	@media (max-width: 900px) { .gcards { grid-template-columns: minmax(0, 1fr); } .gcards-host--auto .gcards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .gcard .px { aspect-ratio: 3/2; } }

	/* fiche gîte */
	.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--color-ink); margin: 0; }
	.specs > .fact { display: block; padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: var(--rule); min-width: 0; }
	.specs .fact__k .elementor-heading-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brown); }
	.specs .fact__k .elementor-heading-title { font-family: var(--font-body); line-height: 1.6; letter-spacing: .06em; }
	.specs .fact__v { margin: var(--space-2xs) 0 0; font: 400 var(--text-xl)/1.1 var(--font-display); }
	@media (max-width: 760px) { .specs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

	/* ───────── Galeries (widget Galerie d'Elementor Pro, visionneuse native) ───────── */
	.gallery .e-gallery-item { background: var(--color-photo-b); overflow: hidden; }
	.gallery .e-gallery-item:nth-child(3n+2) { background: var(--color-photo-a); }
	.gallery .e-gallery-image { transition: scale 800ms var(--ease-out); }
	.gallery .e-gallery-item:hover .e-gallery-image { scale: 1.03; }
	/* Galerie « Photos » : colonnes CSS de la maquette (columns: 3 280px, ordre colonne par colonne) au lieu du
	   placement absolu en maçonnerie du widget. Chaque image garde sa hauteur relative (--item-height, calculée par
	   le widget). !important : le script de la galerie pose position/top/hauteur en styles en ligne. */
	.gallery:not(.gallery--strip) .e-gallery-masonry { display: block; height: auto !important; padding-bottom: 0 !important; margin-bottom: 0; columns: 3 280px; column-gap: var(--space-md); }
	.gallery:not(.gallery--strip) .e-gallery-masonry .e-gallery-item { position: relative !important; top: auto !important; left: auto !important; right: auto !important; display: block; width: auto !important; margin: 0 0 var(--space-md); break-inside: avoid; }
	.gallery:not(.gallery--strip) .e-gallery-masonry .e-gallery-item.e-gallery-item--hidden { display: none; }
	/* Bandes photos des fiches gîtes : format 4:5 de la refonte (le widget ne propose que 1:1, 3:2, 4:3…) */
	.gallery--strip .e-gallery-grid { --aspect-ratio: 125% !important; }
	.gallery .elementor-gallery__titles-container { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-xs); margin-bottom: var(--space-xl); }
	.gallery .elementor-gallery-title {
		font: 600 var(--text-sm)/normal var(--font-body); background: transparent; border: 1.5px solid var(--color-ink);
		color: var(--color-ink); padding: .5rem .9rem; border-radius: var(--radius-pill); margin: 0; white-space: nowrap;
	}
	.gallery .elementor-gallery-title::before, .gallery .elementor-gallery-title::after { display: none; }
	.gallery .elementor-gallery-title:hover { background: var(--color-sand); }
	.gallery .elementor-gallery-title.elementor-item-active { background: var(--color-ink); color: var(--color-paper); }

	/* ───────── Filtres (actualités) ───────── */
	.chips .e-filter { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-xs); }
	.chips .e-filter-item {
		font: 600 var(--text-sm)/normal var(--font-body); background: transparent; border: 1.5px solid var(--color-ink);
		color: var(--color-ink); padding: .5rem .9rem; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
	}
	.chips .e-filter-item:hover { background: var(--color-sand); }
	.chips .e-filter-item[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
	/* ordre des catégories de la refonte (le widget trie par ordre alphabétique) */
	.chips .e-filter-item[data-filter="__all"] { order: -1; }
	.chips .e-filter-item[data-filter="sejours"] { order: 1; }
	.chips .e-filter-item[data-filter="mariages"] { order: 2; }
	.chips .e-filter-item[data-filter="vie-du-hameau"] { order: 3; }
	/* mêmes positions pour les catégories NL (verblijf, bruiloften, dorpsleven) */
	.chips .e-filter-item[data-filter="verblijf"] { order: 1; }
	.chips .e-filter-item[data-filter="bruiloften"] { order: 2; }
	.chips .e-filter-item[data-filter="dorpsleven"] { order: 3; }

	/* ───────── Actualités (Loop Grid + modèles de boucle « carte » et « carte à la une ») ───────── */
	.news { background: var(--color-paper-2); padding-block: var(--space-4xl); }
	.feed { margin-top: var(--space-2xl); }
	.feed.elementor-widget { margin-bottom: 1em; } /* marge par défaut de la liste <ul class="feed"> de la maquette (Elementor remet à 0 la marge des widgets) */
	.feed .elementor-loop-container { gap: var(--space-2xl) var(--space-lg); }
	.card { min-width: 0; }
	.card > a, a.card { text-decoration: none; color: inherit; display: grid; gap: var(--space-sm); }
	.card .px { aspect-ratio: 4/5; }
	.card .elementor-heading-title { font-size: var(--text-lg); line-height: 1.2; margin-top: var(--space-xs); }
	.card .elementor-widget-theme-post-excerpt { font-size: var(--text-sm); margin-top: var(--space-xs); }
	.card:hover .elementor-heading-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
	a.card.card--lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: end; }
	.card--lead .px { aspect-ratio: 16/10; }
	.card--lead .elementor-heading-title { font-size: var(--text-2xl); line-height: 1.02; }
	.feed .px > .elementor-widget-theme-post-featured-image { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; }
	.feed .px > .elementor-widget-theme-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
	@media (max-width: 960px) { a.card.card--lead { grid-template-columns: minmax(0, 1fr); } }

	/* article */
	.article { padding-block: var(--space-3xl) var(--space-4xl); }
	.article .prose, .article .elementor-widget-theme-post-content { font-size: var(--text-lg); line-height: 1.65; margin-inline: auto; max-width: 64ch; }
	.article__meta { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
	.article__media { aspect-ratio: 16/10; margin-block: var(--space-xl); }

	/* ───────── FAQ ───────── */
	/* FAQ : widget « Accordéon » natif (details/summary), présenté comme la maquette */
	.faq .e-n-accordion { border-top: 1.5px solid var(--color-ink); gap: 0; }
	.faq .e-n-accordion-item { border: 0; border-bottom: var(--rule); margin: 0; }
	.faq .e-n-accordion-item-title { display: flex; justify-content: space-between; align-items: stretch; gap: var(--space-md); padding: var(--space-lg) 0; margin: 0; border: 0; background: none; cursor: pointer; list-style: none; font: 400 var(--text-xl)/1.15 var(--font-display); color: var(--color-ink); }
	.faq .e-n-accordion-item-title-header, .faq .e-n-accordion-item-title-text { display: block; font: inherit; color: inherit; letter-spacing: -.015em; margin: 0; }
	.faq .e-n-accordion-item-title-icon { display: none; }
	.faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
	.faq .e-n-accordion-item > .e-con { padding: 0 0 var(--space-lg); border: 0; }
	.faq .e-n-accordion-item > .e-con p { max-width: 68ch; }
	.faq .e-n-accordion-item-title::after { content: "+"; font-family: var(--font-body); font-weight: 400; transition: transform var(--dur-fast) var(--ease-out); flex: none; }
	.faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after { transform: rotate(45deg); }

	/* ───────── Plan du village ───────── */
	.plan { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: start; }
	.plan .elementor-widget-image { background: var(--color-paper-2); min-height: 320px; }
	.plan .elementor-widget-image img { width: 100%; height: auto; }
	.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1.5px solid var(--color-ink); }
	.legend li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule); font-size: var(--text-sm); }
	.legend b { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
	@media (max-width: 860px) { .plan { grid-template-columns: minmax(0, 1fr); } }

	/* références clients */
	.refs ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--rule); list-style: none; margin: 0; padding: 0; }
	.refs li { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: var(--rule); font: 400 var(--text-lg)/1.2 var(--font-display); min-width: 0; }
	@media (max-width: 760px) { .refs ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

	/* ───────── Contact : onglets + formulaires Gravity Forms ───────── */
	.formwrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-3xl); align-items: start; }
	@media (max-width: 960px) { .formwrap { grid-template-columns: minmax(0, 1fr); } }
	.tabs .e-n-tabs { gap: var(--space-xl); }
	/* Onglets : variables du widget natif réglées sur les couleurs de la maquette (.tab) */
	.tabs { --n-tabs-title-gap: 0px; --n-tabs-gap: var(--space-xl); --n-tabs-title-color: var(--color-ink); --n-tabs-title-color-active: var(--color-paper); --n-tabs-title-color-hover: var(--color-ink); --n-tabs-title-background-color: transparent; --n-tabs-title-background-color-active: var(--color-ink); --n-tabs-title-background-color-hover: var(--color-paper-2); --n-tabs-title-font-size: var(--text-sm); }
	.tabs .e-n-tab-title-text { font-size: inherit; line-height: normal; }
	.tabs .e-n-tabs-heading { display: flex; gap: 0; border: 1.5px solid var(--color-ink); border-radius: var(--radius-sm); width: max-content; max-width: 100%; justify-content: flex-start; }
	.tabs .e-n-tabs-heading .e-n-tab-title {
		font: 600 var(--text-sm)/1.2 var(--font-body); background: transparent; border: 0; border-radius: 0;
		padding: .85rem 1.2rem; color: var(--color-ink); white-space: nowrap; flex: none;
	}
	.tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
	.tabs .e-n-tabs-heading .e-n-tab-title:hover:not([aria-selected="true"]) { background: var(--color-paper-2); }
	.tabs .e-n-tabs-content > .e-con { padding: 0; border: 0; }
	@media (max-width: 560px) { .tabs .e-n-tabs-heading { flex-direction: column; width: 100%; } .tabs .e-n-tab-title { justify-content: flex-start; } }

	.aside { display: grid; gap: var(--space-xl); position: sticky; top: calc(var(--header-h) + var(--space-lg)); }
	.aside .box { background: var(--color-paper-2); padding: var(--space-xl); display: grid; gap: var(--space-sm); }
	.aside .elementor-heading-title { font-size: var(--text-xl); }
	.aside .addr p { line-height: 1.7; }

	/* Gravity Forms : couleurs et tailles de base = réglages natifs (filtre gform_default_styles, functions.php).
	   Ci-dessous, la mise en forme fine de la maquette (.form, .field, .check, .form__end). Gravity Forms pose ses
	   variables par formulaire avec un sélecteur d'identifiant : le préfixe reprend donc les identifiants des
	   deux formulaires (#1 séjour, #2 événement). */
	:is(#gform_wrapper_1, #gform_wrapper_2) { font-family: var(--font-body); color: var(--color-ink); }
	:is(#gform_wrapper_1, #gform_wrapper_2) .gform_fields { row-gap: var(--space-md); column-gap: var(--space-md); }
	:is(#gform_wrapper_1, #gform_wrapper_2) .gfield_label, :is(#gform_wrapper_1, #gform_wrapper_2) .gfield_label .gform-field-label__text { font: 600 var(--text-sm)/1.6 var(--font-body); color: var(--color-ink); margin: 0 0 var(--space-2xs); }
	:is(#gform_wrapper_1, #gform_wrapper_2) .gfield_required { color: var(--color-accent); font-size: inherit; margin: 0; padding: 0; } /* l'espace qui précède suffit, comme dans la maquette */
	/* Champ date : format affiché comme une valeur (champ date natif de la maquette), et non en texte d'aide grisé */
	:is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container_date input::placeholder { color: var(--color-ink); opacity: 1; font-size: inherit; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .gfield_required .gfield_required { margin: 0; }
	/* Dates : pleine largeur comme les champs date de la maquette */
	:is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container_date, :is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container_date input { width: 100%; max-width: none; }
	/* Consentement RGPD (exigé par le brief, absent de la maquette) : discret, sans encadré */
	:is(#gform_wrapper_1, #gform_wrapper_2) .gfield_consent_description, :is(#gform_wrapper_1, #gform_wrapper_2) .gfield_consent_description_text { border: 0; padding: var(--space-2xs) 0 0; background: none; max-height: none; overflow: visible; font-size: var(--text-xs); color: var(--color-brown); }
	:is(#gform_wrapper_1, #gform_wrapper_2) .gfield_consent_description a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
		font: 400 var(--text-md)/1.4 var(--font-body); color: var(--color-ink); background-color: var(--color-paper);
		border: 1.5px solid var(--color-rule); border-radius: var(--radius-sm); padding: .8rem .9rem; height: auto; min-height: 0; box-shadow: none;
		transition: border-color var(--dur-fast);
	}
	:is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container select { padding-right: 2.6rem; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container :is(input, select, textarea):hover { border-color: var(--color-brown); }
	:is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container :is(input, select, textarea):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); box-shadow: none; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container textarea[name] { height: 140px; min-height: 140px; resize: vertical; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .gfield_description { font-size: var(--text-xs); line-height: 1.6; color: var(--color-brown); padding: var(--space-2xs) 0 0; margin-top: 0; } /* .hint de la maquette : écart 2xs sous le champ */
	:is(#gform_wrapper_1, #gform_wrapper_2) .gfield_consent_description_text { padding: 0; }
	/* Champ date : pleine largeur, icône du calendrier posée dans le champ */
	:is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container_date { position: relative; display: block; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container_date .gform-datepicker-toggle { position: absolute; top: 50%; right: .9rem; margin: 0; transform: translateY(-50%); }
	/* Titres de section = <legend> de la maquette ; écart entre groupes : xl (gap md + marge md) */
	:is(#gform_wrapper_1, #gform_wrapper_2) .gsection { margin: var(--space-md) 0 0; padding: 0; border: 0; }
	:is(#field_1_1, #field_2_1).gsection { margin-top: 0; } /* première section (le champ anti-spam masqué la précède) */
	:is(#gform_wrapper_1, #gform_wrapper_2) .gsection_title { font: 400 var(--text-xl)/1.1 var(--font-display); letter-spacing: normal; color: var(--color-ink); margin: 0; }
	/* Cases à cocher « type de gîte » en pastilles (.check de la maquette) */
	:is(#gform_wrapper_1, #gform_wrapper_2) .hdp-pills .gfield_checkbox { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--space-xs); }
	:is(#gform_wrapper_1, #gform_wrapper_2) .hdp-pills .gchoice { position: relative; display: block; width: auto; flex: none; margin: 0; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .hdp-pills .gchoice input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .hdp-pills .gchoice label {
		display: block; max-width: none; margin: 0; padding: .55rem .95rem; border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill);
		font: 600 var(--text-sm)/1.6 var(--font-body); color: var(--color-ink); white-space: nowrap; cursor: pointer;
	}
	:is(#gform_wrapper_1, #gform_wrapper_2) .hdp-pills .gchoice input:checked + label { background: var(--color-ink); color: var(--color-paper); }
	:is(#gform_wrapper_1, #gform_wrapper_2) .hdp-pills .gchoice input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 3px; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .hdp-pills .gchoice input::before, :is(#gform_wrapper_1, #gform_wrapper_2) .hdp-pills .gchoice label::before { display: none; }
	/* Bouton d'envoi (.btn--accent + flèche) et mention « * champs requis » à côté (.form__end) */
	:is(#gform_wrapper_1, #gform_wrapper_2) .gform_footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin: var(--space-xl) 0 0; padding: 0; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .gform_footer .gform_button {
		display: inline-flex; align-items: center; align-self: center; gap: var(--space-xs); margin: 0; padding: 1rem 1.4rem; height: auto; min-height: 0;
		font: 600 var(--text-sm)/1 var(--font-body); color: var(--color-on-accent); background: var(--color-accent);
		border: 1.5px solid transparent; border-radius: var(--radius-sm); box-shadow: none; cursor: pointer;
		transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
	}
	:is(#gform_wrapper_1, #gform_wrapper_2) .gform_footer .gform_button::after {
		content: ""; font-size: inherit; width: .95em; height: .95em; margin-right: -.15em; background: currentColor; /* GF impose 20px aux pseudo-éléments */
		-webkit-mask: var(--hdp-arrow) center / contain no-repeat; mask: var(--hdp-arrow) center / contain no-repeat; transition: transform var(--dur-fast) var(--ease-out);
	}
	:is(#gform_wrapper_1, #gform_wrapper_2) .gform_footer .gform_button:hover { background: var(--color-accent-h); }
	:is(#gform_wrapper_1, #gform_wrapper_2) .gform_footer .gform_button:hover::after { transform: translateX(4px); }
	:is(#gform_wrapper_1, #gform_wrapper_2) .gfield.hdp-form-note { display: none; }
	:is(#gform_wrapper_1, #gform_wrapper_2) .hdp-form-note__end p { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--color-brown); }
	:is(#gform_wrapper_1, #gform_wrapper_2) .ginput_container_consent label { font: 400 var(--text-sm)/1.6 var(--font-body); color: var(--color-ink); }
	.gform_confirmation_wrapper { background: var(--color-sky); padding: var(--space-xl); }
	.gform_confirmation_message h3 { font: 400 var(--text-xl)/1.1 var(--font-display); margin: 0 0 var(--space-sm); }
	/* ───────── Pages légales ───────── */
	.legal { padding-block: var(--space-2xl) var(--space-4xl); }
	.legal .prose { max-width: 72ch; }
	.legal h2 { font-size: var(--text-xl); margin-top: var(--space-xl); }
	.legal dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); margin: 0; }
	.legal dt { font-weight: 600; }
	.legal dd { margin: 0; }
	@media (max-width: 560px) { .legal dl { grid-template-columns: minmax(0, 1fr); } .legal dd { margin-bottom: var(--space-sm); } }
	.toc ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0 0 var(--space-xl); padding: 0; }
	.toc a:not(.btn) { font-weight: 400; display: block; border: var(--rule); padding: .35rem .7rem; border-radius: var(--radius-pill); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
	.toc a:hover { border-color: var(--color-ink); }

	/* ───────── CTA final ───────── */
	.endcta { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-xl); }
	.endcta > .elementor-element { width: auto; }
	.endcta .elementor-heading-title { font-size: var(--text-2xl); max-width: 18ch; }

	/* ───────── Bloc réservation en ligne (accueil, widget Elloha) ───────── */
	.book { position: relative; z-index: 5; background: var(--color-paper-2); padding-block: var(--space-2xl) var(--space-xl); border-bottom: var(--rule); }
	.book__head { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-xs) var(--space-xl); margin-bottom: var(--space-lg); }
	.book__head > .elementor-element { width: auto; }
	.book__head .elementor-heading-title { font-size: var(--text-xl); }
	.book__head p { font-size: var(--text-sm); color: var(--color-brown); font-weight: 500; }
	/* Conteneur du widget Elloha : pas de cadre (le formulaire est posé sur le fond de la section, comme .book__form).
	   Habillage du widget lui-même : voir la section « Widget Elloha » en fin de fichier. */
	.ext-widget--elloha { min-height: calc(56px + 1.6rem); font-size: var(--text-sm); color: var(--color-brown); }
	/* Espace de la ligne d'état .book__status de la maquette (margin-top sm + min-height 1.4em) entre le formulaire et « Cartes cadeaux » */
	.ext-widget--elloha { padding-bottom: calc(var(--space-sm) + var(--text-sm) * 1.4); }
	/* Cartes cadeaux : widget Bouton (icône cadeau, texte en gras + texte), présenté comme .gift de la maquette */
	.gift { width: auto; margin-top: var(--space-sm); }
	.gift .elementor-button { display: flex; align-items: center; gap: var(--space-sm); width: max-content; max-width: 100%; padding: .75rem 1rem .75rem .85rem; background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-ink); border-radius: var(--radius-sm); font: 400 var(--text-sm)/1.6 var(--font-body); text-decoration: none; transition: background-color var(--dur-fast), color var(--dur-fast); }
	.gift .elementor-button-content-wrapper { gap: var(--space-sm); align-items: center; }
	.gift .elementor-button-icon svg { width: 20px; height: 20px; flex: none; }
	.gift .elementor-button-icon svg path { fill: none; stroke: currentColor; }
	.gift .elementor-button::after { width: 14px; height: 14px; }
	.gift b { font-weight: 700; margin-right: .35em; }
	.gift .elementor-button:hover { background: var(--color-ink); color: var(--color-paper); }
	.gift .elementor-button-text { text-align: left; } /* Elementor centre le texte des boutons */
	@media (max-width: 520px) { .gift .elementor-button-text { white-space: normal; } }

	/* ───────── Pied de page (Theme Builder) ───────── */
	.foot { background: var(--color-ink); color: var(--color-paper); padding-top: var(--space-4xl); overflow: hidden; }
	.foot__top { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xl); align-items: end; }
	.foot__top > .elementor-element { width: auto; }
	.foot__top p { font: 400 var(--text-xl)/1.2 var(--font-display); max-width: 22ch; }
	.foot__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-3xl); font-size: var(--text-sm); }
	.foot__col .elementor-widget-heading .elementor-heading-title { font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: var(--space-md); }
	.foot__col { display: block; }
	/* Listes de liens du pied : widget « Liste d'icônes », sans icône */
	.foot .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
	.foot .elementor-icon-list-item { margin: 0; padding: 0; font: 400 var(--text-sm)/1.6 var(--font-body); color: inherit; }
	.foot .elementor-icon-list-item::after { display: none; }
	.foot .elementor-icon-list-text { color: inherit; padding: 0; }
	.foot__links .elementor-icon-list-items { display: grid; gap: var(--space-xs); }
	.foot .elementor-icon-list-item a { color: inherit; text-decoration: none; white-space: nowrap; }
	.foot .elementor-icon-list-item a:hover { text-decoration: underline; text-underline-offset: .25em; }
	/* adresse + téléphones + e-mail : un seul bloc à interligne 1,7 comme l'<address> de la maquette */
	.foot .addr p { line-height: 1.7; }
	.foot__contact .elementor-icon-list-items { gap: 0; }
	.foot__contact .elementor-icon-list-item { line-height: 1.7; }
	/* Lien « Nederlands » / « Français » de la colonne Suivre : shortcode [hdp_lang format="name"] */
	.foot__lang { margin-top: var(--space-xs); } /* même écart que les lignes de la liste (gap de la liste d'icônes) */
	.foot__lang .elementor-shortcode { display: flex; align-items: center; min-height: 1.6em; } /* = ligne de la liste */
	.foot__lang .hdp-lang { color: inherit; text-decoration: none; white-space: nowrap; }
	.foot__lang .hdp-lang:hover { text-decoration: underline; text-underline-offset: .25em; }
	.foot__mark { margin-top: var(--space-3xl); will-change: transform; }
	.foot__mark .elementor-heading-title { font: 400 clamp(2.6rem, 12.6vw, 15rem)/.85 var(--font-display); letter-spacing: -.03em; white-space: nowrap; color: var(--color-mark); }
	.foot__legal { padding-block: var(--space-lg); }
	.foot__legal .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); opacity: .75; }
	.foot__legal .elementor-icon-list-item { font-size: var(--text-xs); white-space: nowrap; }
	.foot :focus-visible { outline-color: var(--color-paper); }
	@media (max-width: 1000px) { .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
	@media (max-width: 640px) { .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
	@media (max-width: 400px) { .foot__cols { grid-template-columns: minmax(0, 1fr); } }

	/* Éléments déplacés par script à chaque image (hero, piste, signature) : sans la transition de transform
	   (0,4 s) que les conteneurs Elementor portent par défaut, sinon le mouvement « traîne » derrière le défilement. */
	:is(.hero__media, .hero__copy, .hero__veil, .track, .progress__bar, .foot__mark, [data-speed], [data-speed-box]) { transition: none; }
	[data-speed], [data-speed-box] { will-change: transform; }

	/* Largeurs de lecture de la maquette posées sur des widgets : Elementor impose max-width: 100% aux widgets
	   d'un conteneur (.elementor.elementor .e-con > .elementor-widget), d'où ce sélecteur plus précis. */
	.elementor.elementor .e-con > .elementor-widget:is(.hero__lede) { max-width: 44ch; }
	.elementor.elementor .e-con > .elementor-widget:is(.phero__lede) { max-width: 52ch; }
	.elementor.elementor .e-con > .elementor-widget:is(.gate__note) { max-width: 34ch; }
	.elementor.elementor .e-con > .elementor-widget:is(.prose) { max-width: 64ch; }
	.elementor.elementor .legal .e-con > .elementor-widget:is(.prose) { max-width: 72ch; }
	/* Listes d'icônes en ligne : sans les marges latérales propres au widget (espacement = gap de la maquette) */
	.elementor-widget .elementor-icon-list-items.elementor-inline-items { margin-inline: 0; }
	.elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { margin-inline: 0; }

	/* Animation d'entrée Elementor « Fondu vers le haut » : amplitude de la refonte (28 px au lieu de 100 %) */
	.elementor-element.animated.fadeInUp { animation-name: hdp-rise; animation-duration: var(--dur-slow); animation-timing-function: var(--ease-out); }
}

/* ═════════ Widget Elloha (moteur de réservation, section #reserver de l'accueil) ═════════
 * Habillage du widget tiers pour reproduire la maquette (index.html #reserver ; site.css :
 * .book__form, .field, .occ__btn, .occ__edit, .occ__panel, .step, .book__go, media queries 1080, 520 et 420 px).
 *
 * ATTENTION : ces règles DÉPENDENT DE LA STRUCTURE ACTUELLE DU WIDGET ELLOHA, relevée dans Chromium
 * le 06/11/2026 sur le widget réel (widget-loader.min.js?v=39, custom-widget.css?v=43, CSS du compte
 * « BookingEngineCustomUi ») : #ConstellationWidget.co-widget (+ .co-widget-vertical sous ~400 px,
 * ajoutée par constellationWidgetSetAppearance), .co-widget-trip > .co-widget-date / .co-widget-duration,
 * #FieldDate, #IFieldDate, .co-widget-styled > #FieldDuration, .co-widget-occupancy > #lblTitleNbLoc,
 * #divResumeCapa (#tbResumeCapa, #btnResumeCapa), .co-widget-occupancy-define, .co-widget-occupancy-add,
 * .co-widget-search > #BtnLaunchBooking, #ConstellationWidgetLinks, calendrier .pika-cnstell-single (ajouté au body).
 * À REVÉRIFIER À CHAQUE MISE À JOUR DU WIDGET PAR ELLOHA.
 *
 * Ni le script ni le HTML d'Elloha ne sont modifiés : tout passe par la CSS ci-dessous.
 * La CSS d'Elloha est chargée APRÈS celle du site : chaque sélecteur combine l'identifiant du conteneur
 * et #ConstellationWidget (deux identifiants) pour l'emporter. !important n'est employé qu'en dernier
 * recours, là où custom-widget.css d'Elloha utilise lui-même !important (marqué « !important d'Elloha »).
 */
#ConstellationWidgetContainercb0e01cd-3cae-4be4-b23e-4d0661e3a863 {
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-md);

	/* Lien « Cartes cadeaux » du widget : remplacé par le lien .gift de la maquette (même URL) */
	& #ConstellationWidgetLinks { display: none; }

	/* Grille des champs : date · nuits · hébergements et voyageurs · bouton (= .book__form).
	   Alignement en haut : les trois libellés ont la même hauteur, le bouton est descendu d'autant,
	   ce qui revient à l'alignement en bas de la maquette tout en laissant le panneau des occupants
	   s'ouvrir sous son champ sans déplacer les autres. */
	& #ConstellationWidget.co-widget {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.5fr) auto;
		gap: calc(var(--space-md) + 1rem) var(--space-md);
		align-items: start;
		margin: 0; padding: 0 !important; /* !important d'Elloha (padding 15 / 20 px) */
		width: 100%; max-width: none; overflow: visible;
		background: none; border: 0; box-shadow: none;
		font-family: var(--font-body); font-size: var(--text-md) !important; /* !important d'Elloha (13 px) */
		color: var(--color-ink);
	}
	& #ConstellationWidget *, & #ConstellationWidget *::before, & #ConstellationWidget *::after { box-sizing: border-box; }
	/* Titre « Réservez en direct » du widget : masqué, le H2 de la section suffit */
	& #ConstellationWidget .co-widget-title { display: none; }
	/* Le bloc date + nuits (.co-widget-trip) est « déplié » : ses deux cellules deviennent des cellules de la grille */
	& #ConstellationWidget .co-widget-trip { display: contents; }
	& #ConstellationWidget :is(.co-widget-date, .co-widget-duration, .co-widget-occupancy, .co-widget-search) {
		float: none; width: auto; max-width: none; min-width: 0; margin: 0; padding: 0 !important; /* !important d'Elloha (vue étroite) */
		position: relative; display: grid; gap: var(--space-2xs); align-content: start;
	}

	/* Libellés au-dessus des champs (= .book .field label) ; Elloha les masque avec !important */
	& #ConstellationWidget :is(.co-widget-date, .co-widget-duration, .co-widget-occupancy) > label {
		display: block !important; /* !important d'Elloha (display: none) */
		width: auto; margin: 0; padding: 0;
		font: 600 var(--text-sm)/1.6 var(--font-body); color: var(--color-ink);
		line-height: 1.6 !important; /* !important d'Elloha (30 px) */
		text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	/* Libellé du champ voyageurs : « Nombre d'hébergements » chez Elloha, « Hébergements et voyageurs » dans la maquette.
	   Le texte d'Elloha est remplacé visuellement en français seulement ; en néerlandais, le libellé d'Elloha reste affiché. */
	html[lang^="fr"] & #ConstellationWidget #lblTitleNbLoc { font-size: 0; }
	html[lang^="fr"] & #ConstellationWidget #lblTitleNbLoc::after { content: "Hébergements et voyageurs"; font-size: var(--text-sm); }

	/* Champs : 56 px, fond ivoire, filet (= .book .field input/select) */
	& #ConstellationWidget :is(#FieldDate, #FieldDuration) {
		display: block; position: static; width: 100%; min-width: 0; height: 56px; margin: 0;
		padding: 0 .9rem; background: var(--color-paper); color: var(--color-ink);
		font: 400 var(--text-md)/1.4 var(--font-body);
		border: 1.5px solid var(--color-rule); border-radius: var(--radius-sm); box-shadow: none; outline: 0;
		transition: border-color var(--dur-fast); cursor: pointer;
	}
	& #ConstellationWidget #FieldDate { padding-right: 2.8rem; }
	& #ConstellationWidget #FieldDuration { appearance: none; -webkit-appearance: none; padding-right: 2.8rem; padding-left: calc(.9rem + 3px) !important; } /* retrait du texte d'une liste native ; !important d'Elloha (0 en vue étroite) */
	& #ConstellationWidget :is(#FieldDate, #FieldDuration):hover { border-color: var(--color-brown); }
	& #ConstellationWidget :is(#FieldDate, #FieldDuration):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
	& #ConstellationWidget #FieldDate::placeholder { color: var(--color-ink); opacity: 1; }
	/* Icône calendrier à droite du champ date, centrée verticalement (comme l'icône du champ date natif de la maquette) */
	& #ConstellationWidget #IFieldDate {
		position: absolute; right: calc(.9rem + 4px); left: auto; top: auto; bottom: 28px !important; /* !important d'Elloha (bottom: 9px) */
		transform: translateY(50%); margin: 0; font-size: 19px; line-height: 1; color: var(--color-ink); pointer-events: none;
	}
	/* Liste des nuits : Elloha place la liste en absolu dans un cadre de 30 px ; elle reprend sa place, flèche à droite */
	& #ConstellationWidget .co-widget-styled {
		position: relative; display: block; width: 100%; height: 56px; margin: 0; padding: 0;
		overflow: visible; border: 0; background: none;
	}
	& #ConstellationWidget .co-widget-styled.co-widget-chevron-down::before {
		position: absolute; z-index: 1; right: .3rem; top: 50%; float: none; /* place de la flèche native de la maquette */
		margin: 0 !important; /* !important d'Elloha (margin-top: 8px) */
		transform: translateY(-50%); font-size: 10px; color: var(--color-ink); pointer-events: none;
	}

	/* Résumé « 1 hébergement / 2 adultes » + « Modifier » (= .occ__btn / .occ__edit).
	   Seul le bouton « Modifier » ouvre le panneau chez Elloha : il est étendu à tout le champ (calque transparent),
	   son texte reste aligné à droite, comme le champ-bouton de la maquette. */
	& #ConstellationWidget #divResumeCapa {
		position: relative; display: flex; align-items: center;
		width: 100%; min-width: 0; height: 56px; margin: 0; padding: 0 .9rem;
		background: var(--color-paper); border: 1.5px solid var(--color-rule); border-radius: var(--radius-sm);
		font-size: var(--text-md); transition: border-color var(--dur-fast);
	}
	& #ConstellationWidget #divResumeCapa:hover { border-color: var(--color-brown); }
	& #ConstellationWidget #divResumeCapa:focus-within { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
	& #ConstellationWidget #tbResumeCapa {
		flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0 6.5rem 0 0;
		background: transparent; border: 0; box-shadow: none; outline: 0;
		font: 400 var(--text-md)/1.4 var(--font-body); color: var(--color-ink); text-transform: lowercase; /* « 2 Adultes » chez Elloha */
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
	}
	& #ConstellationWidget #btnResumeCapa {
		position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end;
		width: 100% !important; /* !important d'Elloha (width: auto) */
		height: 100%; margin: 0; padding: 0 .9rem; background: transparent; border: 0; box-shadow: none;
		font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
		color: var(--color-accent); white-space: nowrap; cursor: pointer;
	}
	& #ConstellationWidget #btnResumeCapa:focus-visible { outline: 0; }

	/* Panneau des occupants (= .occ__panel / .step), visible quand Elloha retire .co-widget-d-none.
	   Il s'ouvre sous le champ, dans le flux (le bouton « Ajouter un hébergement » qui le suit ne peut pas être
	   rattaché à un panneau flottant sans modifier le HTML). */
	& #ConstellationWidget .co-widget-occupancy-define:not(.co-widget-d-none) {
		display: grid; gap: var(--space-xs); margin: 2px 0 0; padding: var(--space-md) var(--space-lg);
		background: var(--color-paper); border: 1.5px solid var(--color-ink); border-radius: 0; box-shadow: none; float: none; width: auto;
	}
	& #ConstellationWidget .co-widget-occupancy-define > div {
		display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
		height: auto; overflow: visible; margin: 0; padding: var(--space-xs) 0; border: 0; border-bottom: var(--rule);
		line-height: 1.4 !important; /* !important d'Elloha (30 px) */
	}
	& #ConstellationWidget .co-widget-occupancy-define > div > div { line-height: 1.4 !important; } /* !important d'Elloha */
	& #ConstellationWidget .co-widget-occupancy-define > div:last-child { border-bottom: 0; padding-bottom: 0; }
	& #ConstellationWidget .co-widget-occupancy-define .co-widget-title-room { font: 400 var(--text-lg)/1.2 var(--font-display); color: var(--color-ink); text-transform: none; }
	& #ConstellationWidget .co-widget-occupancy-define .co-widget-room { display: block; font: 400 var(--text-lg)/1.2 var(--font-display); letter-spacing: 0; text-transform: lowercase; color: var(--color-ink); } /* « HÉBERGEMENT » en capitales grasses chez Elloha */
	& #ConstellationWidget .co-widget-occupancy-define .co-widget-room::first-letter { text-transform: uppercase; }
	& #ConstellationWidget .co-widget-occupancy-define .co-widget-room-number { margin-left: .25em; font: inherit; }
	& #ConstellationWidget .co-widget-occupancy-define .co-widget-remove:not(.co-widget-d-none) { display: flex; justify-content: flex-end; align-items: center; gap: .4em; font: 600 var(--text-xs)/1 var(--font-body); color: var(--color-accent); cursor: pointer; }
	& #ConstellationWidget .co-widget-occupancy-define :is(.co-widget-col-6, .co-widget-text-right) { float: none; width: auto; padding: 0; margin: 0; }
	& #ConstellationWidget .co-widget-occupancy-define .co-widget-text-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); }
	& #ConstellationWidget .co-widget-occupancy-define label { display: inline-block; margin: 0; font: 600 var(--text-sm)/1.4 var(--font-body); color: var(--color-ink); }
	& #ConstellationWidget .co-widget-occupancy-define :is(.lbl-number-a, .lbl-number-c) { min-width: 2ch; text-align: center; font: 400 var(--text-lg)/1 var(--font-display); color: var(--color-ink); }
	/* Boutons − / + ronds (= .step__ctl button) */
	& #ConstellationWidget .co-widget-occupancy-define a.co-widget-action {
		display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0;
		border: 1.5px solid var(--color-ink); border-radius: 50%; background: transparent; color: var(--color-ink);
		text-decoration: none; cursor: pointer;
	}
	& #ConstellationWidget .co-widget-occupancy-define a.co-widget-action:hover { background: var(--color-ink); color: var(--color-paper); }
	& #ConstellationWidget .co-widget-occupancy-define a.co-widget-action i { margin: 0; color: inherit; font-size: 12px; line-height: 1; }
	& #ConstellationWidget .co-widget-occupancy-define .co-widget-div-age:not(.co-widget-d-none) { display: grid; gap: var(--space-2xs); justify-content: stretch; text-align: left; }
	& #ConstellationWidget .co-widget-occupancy-define .co-widget-div-age label { display: block !important; } /* !important d'Elloha */
	& #ConstellationWidget .co-widget-select-age:not(.co-widget-d-none) {
		display: block; width: 100%; height: 44px; margin: 0; padding: 0 .9rem; background: var(--color-paper); color: var(--color-ink);
		border: 1.5px solid var(--color-rule); border-radius: var(--radius-sm); font: 400 var(--text-md) var(--font-body);
	}
	/* « Ajouter un hébergement » (= .btn--line) */
	& #ConstellationWidget .co-widget-occupancy-add:not(.co-widget-d-none) { display: flex; justify-content: flex-end; margin: var(--space-xs) 0 0; }
	& #ConstellationWidget .co-widget-occupancy-add .co-widget-btn-resume-capa {
		position: static; width: auto !important; /* !important d'Elloha */
		height: auto; margin: 0; padding: .7rem 1.1rem; background: transparent; color: var(--color-ink);
		border: 1.5px solid var(--color-ink); border-radius: var(--radius-sm) !important; /* !important d'Elloha (0) */
		font: 600 var(--text-sm)/1 var(--font-body); letter-spacing: 0; text-transform: none; cursor: pointer;
	}
	& #ConstellationWidget .co-widget-occupancy-add .co-widget-btn-resume-capa:hover { background: var(--color-ink); color: var(--color-paper); }

	/* Bouton « Rechercher » (= .btn.btn--accent.book__go), flèche de la maquette.
	   Le libellé d'Elloha est « RECHERCHER » : minuscules + première lettre en capitale (::first-letter ne
	   s'applique qu'à un bloc, d'où display: block et une flèche en ligne). */
	& #ConstellationWidget .co-widget-search { align-self: start; padding-top: calc(var(--text-sm) * 1.6 + var(--space-2xs)) !important; margin: 0; }
	& #ConstellationWidget #BtnLaunchBooking {
		display: block; width: 100%; height: 56px; margin: 0; padding: 0 2rem;
		background: var(--color-accent); color: var(--color-on-accent);
		border: 1.5px solid transparent; border-radius: var(--radius-sm); box-shadow: none;
		font: 600 var(--text-sm)/53px var(--font-body); letter-spacing: 0; text-align: center;
		text-transform: lowercase; white-space: nowrap; cursor: pointer;
		transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
	}
	& #ConstellationWidget #BtnLaunchBooking::first-letter { text-transform: uppercase; }
	& #ConstellationWidget #BtnLaunchBooking::after {
		content: ""; display: inline-block; vertical-align: -.12em; width: .95em; height: .95em; margin: 0 -.15em 0 var(--space-xs);
		background: currentColor;
		-webkit-mask: var(--hdp-arrow) center / contain no-repeat; mask: var(--hdp-arrow) center / contain no-repeat;
		transition: transform var(--dur-fast) var(--ease-out);
	}
	& #ConstellationWidget #BtnLaunchBooking:hover { background: var(--color-accent-h); }
	& #ConstellationWidget #BtnLaunchBooking:hover::after { transform: translateX(4px); }
	& #ConstellationWidget #BtnLaunchBooking:active { transform: translateY(1px); }
	& #ConstellationWidget #BtnLaunchBooking:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

	/* Tablette (≤ 1080 px) : 2 colonnes, voyageurs et bouton sur toute la largeur */
	@media (max-width: 1080px) {
		& #ConstellationWidget.co-widget { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
		& #ConstellationWidget :is(.co-widget-occupancy, .co-widget-search) { grid-column: 1 / -1; }
		& #ConstellationWidget .co-widget-search { padding-top: 0 !important; }
	}
	/* Mobile (≤ 520 px) : une colonne */
	@media (max-width: 520px) {
		& #ConstellationWidget.co-widget { grid-template-columns: minmax(0, 1fr); }
	}
	/* ≤ 420 px : « Modifier » masqué comme .occ__edit ; le champ entier reste cliquable (calque du bouton) */
	@media (max-width: 420px) {
		& #ConstellationWidget #btnResumeCapa { color: transparent; }
		& #ConstellationWidget #tbResumeCapa { padding-right: 0; }
	}
	@media (prefers-reduced-motion: reduce) {
		& #ConstellationWidget #BtnLaunchBooking, & #ConstellationWidget #BtnLaunchBooking::after { transition: none; }
		& #ConstellationWidget #BtnLaunchBooking:hover::after { transform: none; }
	}
}

/* Calendrier d'Elloha (.pika-cnstell-single, ajouté au <body> à l'ouverture du champ date).
 * Les styles de bouton globaux d'Elementor (.elementor-kit-4 button : fond accent, marges internes 16 × 22 px,
 * police) s'appliquaient à ses boutons : la grille débordait et les flèches devenaient des boutons verts.
 * On rend aux boutons le dessin prévu par Elloha. Le code couleur des disponibilités d'Elloha (vert disponible,
 * orange arrivée impossible, rouge indisponible) est une information du moteur : il est conservé. */
.hdp .pika-cnstell-single { font-family: var(--font-body); }
.hdp .pika-cnstell-single .pika-cnstell-label { font: 600 var(--text-sm)/20px var(--font-body); color: var(--color-ink); }
.hdp .pika-cnstell-single button.pika-cnstell-button {
	min-width: 0; height: 35px; margin: 0; padding: 0 5px; border-radius: 0;
	font: 400 13px/1 var(--font-body); letter-spacing: 0; text-transform: none; text-align: center;
}
.hdp .pika-cnstell-single .is-today button.pika-cnstell-button, .hdp .pika-cnstell-single .is-selected button.pika-cnstell-button { font-weight: 700; }
.hdp .pika-cnstell-single button:is(.pika-cnstell-prev, .pika-cnstell-next) {
	min-width: 20px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 0;
	background-color: transparent; color: transparent; font-size: 13px; box-shadow: none;
}
.hdp .pika-cnstell-single button:is(.pika-cnstell-prev, .pika-cnstell-next):hover { background-color: transparent; }

@keyframes hdp-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@keyframes hdp-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }

/* Filets de sécurité des animations d'entrée d'Elementor (.elementor-invisible = visibility: hidden jusqu'à ce que
 * le script d'Elementor lance l'animation) : aucun contenu ne doit rester caché si le JavaScript échoue.
 * - JavaScript désactivé (pas de classe hdp-js, posée dans le <head> par functions.php) : contenu visible tout de suite ;
 * - script d'Elementor en erreur, bloqué ou non initialisé : contenu rendu visible au bout de 3 s (animation CSS).
 *   Quand le script d'Elementor est initialisé, hdp.js pose la classe hdp-anim-ok sur <html> et ce filet est
 *   levé : les éléments hors écran restent masqués jusqu'à leur animation d'entrée, sans clignotement.
 * Mouvement réduit : voir le bloc suivant (visible immédiatement, sans animation). */
html:not(.hdp-js) .elementor-invisible { visibility: visible; }
html:not(.hdp-anim-ok) .hdp .elementor-invisible { animation: hdp-failsafe 0s 3s forwards; }
@keyframes hdp-failsafe { to { visibility: visible; } }

/* Mouvement réduit : pas d'animation d'entrée, ni de parallaxe, ni d'effets de défilement */
@media (prefers-reduced-motion: reduce) {
	.hdp *, .hdp *::before, .hdp *::after { transition-duration: 120ms !important; animation: none !important; }
	.hdp .elementor-invisible { visibility: visible !important; }
	.hdp .elementor-motion-effects-element, .hdp .elementor-motion-effects-layer { transform: none !important; opacity: 1 !important; }
	.hdp .statement .w { opacity: 1; }
	.hdp :is([data-speed], [data-speed-box]) { transform: none !important; }
	.hdp :is(.door, .room, .gcard, .card):hover .px img, .hdp .gallery .e-gallery-item:hover .e-gallery-image { scale: 1; transition: none; }
}

/* Pages légales : encadré « À compléter » de la maquette (.todo), saisi comme citation dans le widget Texte */
.hdp .legal .prose blockquote { display: grid; gap: var(--space-xs); margin: 0; padding: var(--space-lg); border: 1.5px dashed var(--color-brown); font-size: var(--text-sm); font-style: normal; color: var(--color-brown); }
.hdp .legal .prose blockquote p { margin: 0; }
.hdp .legal .prose blockquote strong { color: var(--color-ink); }