/**
 * Le Gîte du Longeard — feuille de style unique.
 *
 * Pas d'étape de build : le cache est cassé par filemtime() (voir inc/assets.php).
 * L'ordre des couches est déclaré ici une fois pour toutes, ce qui rend la
 * spécificité prévisible sans jamais recourir à !important.
 */

@layer reset, tokens, base, layout, components, utilities;

/* ==========================================================================
   POLICES — auto-hébergées, aucune requête vers Google
   ========================================================================== */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700; /* Police variable : un seul fichier pour toutes les graisses. */
	font-display: swap;
	src: url("../fonts/cormorant-garamond.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/inter-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   RESET
   ========================================================================== */

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	p,
	h1,
	h2,
	h3,
	h4 {
		overflow-wrap: break-word;
	}

	ul[class],
	ol[class] {
		list-style: none;
		padding: 0;
	}
}

/* ==========================================================================
   JETONS
   ========================================================================== */

@layer tokens {
	:root {
		/* Palette « Pierre & lin ». */
		--c-lin: #faf8f4;
		--c-pierre: #e8e2d8;
		--c-pierre-fonce: #d6cdbe;
		--c-anthracite: #2b2b28;
		--c-anthracite-doux: #55554e;
		--c-vert: #6b7a63;
		--c-vert-fonce: #4e5a48;
		--c-laiton: #a8874f;
		--c-laiton-clair: #c4a870;
		--c-blanc: #fffefb;

		/* Rôles — on ne référence jamais une couleur brute dans un composant. */
		--fond: var(--c-lin);
		--fond-alt: var(--c-pierre);
		--texte: var(--c-anthracite);
		--texte-doux: var(--c-anthracite-doux);
		--accent: var(--c-laiton);
		--filet: color-mix(in srgb, var(--c-anthracite) 12%, transparent);

		--font-titre: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
		--font-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

		/* Échelle typographique fluide, de 320 px à 1440 px de viewport. */
		--pas--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.89rem);
		--pas-0: clamp(1rem, 0.96rem + 0.22vw, 1.13rem);
		--pas-1: clamp(1.2rem, 1.13rem + 0.36vw, 1.42rem);
		--pas-2: clamp(1.44rem, 1.32rem + 0.58vw, 1.8rem);
		--pas-3: clamp(1.73rem, 1.55rem + 0.9vw, 2.27rem);
		--pas-4: clamp(2.07rem, 1.8rem + 1.36vw, 2.87rem);
		--pas-5: clamp(2.49rem, 2.08rem + 2.03vw, 3.62rem);
		--pas-6: clamp(2.99rem, 2.4rem + 2.96vw, 4.57rem);

		/* Espacement. */
		--esp-3xs: 0.25rem;
		--esp-2xs: 0.5rem;
		--esp-xs: 0.75rem;
		--esp-s: 1rem;
		--esp-m: 1.5rem;
		--esp-l: 2.25rem;
		--esp-xl: 3.5rem;
		--esp-2xl: 5.5rem;
		--esp-3xl: 8rem;

		--gouttiere: clamp(1.25rem, 5vw, 3rem);
		--mesure: 66ch;

		--rayon: 2px; /* Presque droit : l'arrondi marqué fait « application », pas « maison ». */
		--transition: 320ms cubic-bezier(0.33, 1, 0.68, 1);

		--ombre-douce: 0 1px 2px rgb(43 43 40 / 4%), 0 8px 24px -12px rgb(43 43 40 / 10%);
		--ombre-portee: 0 2px 4px rgb(43 43 40 / 5%), 0 20px 50px -20px rgb(43 43 40 / 18%);
	}
}

/* ==========================================================================
   BASE
   ========================================================================== */

@layer base {
	body {
		background: var(--fond);
		color: var(--texte);
		font-family: var(--font-texte);
		font-size: var(--pas-0);
		font-weight: 400;
		line-height: 1.65;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	h1,
	h2,
	h3 {
		font-family: var(--font-titre);
		font-weight: 400;
		line-height: 1.12;
		letter-spacing: -0.005em;
		text-wrap: balance;
	}

	h1 {
		font-size: var(--pas-6);
	}

	h2 {
		font-size: var(--pas-4);
	}

	h3 {
		font-size: var(--pas-2);
	}

	p {
		text-wrap: pretty;
	}

	a {
		color: inherit;
		text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent);
		text-underline-offset: 0.22em;
		text-decoration-thickness: 1px;
		transition: text-decoration-color var(--transition), color var(--transition);
	}

	a:hover {
		text-decoration-color: currentcolor;
	}

	:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 3px;
		border-radius: 1px;
	}

	strong {
		font-weight: 600;
	}

	::selection {
		background: var(--c-laiton-clair);
		color: var(--c-anthracite);
	}
}

/* ==========================================================================
   MISE EN PAGE
   ========================================================================== */

@layer layout {
	/**
	 * Grille éditoriale à lignes nommées.
	 *
	 * Un enfant se place dans `content` par défaut ; il peut demander `wide`
	 * ou `full` sans qu'on ait besoin d'imbriquer des conteneurs. C'est ce qui
	 * permet à une photo de filer d'un bord à l'autre au milieu d'un texte
	 * sans casser l'alignement du reste.
	 */
	.l-shell {
		display: grid;
		grid-template-columns:
			[full-start] minmax(var(--gouttiere), 1fr)
			[wide-start] minmax(0, 7rem)
			[content-start] min(100% - 2 * var(--gouttiere), 68rem) [content-end]
			minmax(0, 7rem) [wide-end]
			minmax(var(--gouttiere), 1fr) [full-end];
	}

	.l-shell > * {
		grid-column: content;
	}

	.l-shell > .u-wide {
		grid-column: wide;
	}

	.l-shell > .u-full {
		grid-column: full;
	}

	.l-section {
		padding-block: var(--esp-2xl);
	}

	.l-section--serre {
		padding-block: var(--esp-xl);
	}

	.l-section--pierre {
		background: var(--fond-alt);
	}

	.l-section--sombre {
		background: var(--c-anthracite);
		color: var(--c-lin);
	}

	/* Rythme vertical : on espace les frères, jamais le premier ni le dernier. */
	.l-flow > * + * {
		margin-block-start: var(--flow, var(--esp-m));
	}

	.l-prose {
		max-width: var(--mesure);
	}

	.l-prose p + p {
		margin-block-start: var(--esp-m);
	}

	.l-grid {
		display: grid;
		gap: var(--esp-l);
		grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	}

	.l-grid--2 {
		grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
	}

	.l-cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--esp-s);
		align-items: center;
	}

	.l-center {
		text-align: center;
		margin-inline: auto;
	}
}

/* ==========================================================================
   COMPOSANTS
   ========================================================================== */

@layer components {

	/* --- Lien d'évitement ------------------------------------------------ */

	.c-skip {
		position: absolute;
		inset-inline-start: var(--esp-s);
		inset-block-start: -100%;
		z-index: 100;
		padding: var(--esp-2xs) var(--esp-s);
		background: var(--c-anthracite);
		color: var(--c-lin);
		text-decoration: none;
	}

	.c-skip:focus {
		inset-block-start: var(--esp-s);
	}

	/* --- Image ----------------------------------------------------------- */

	/**
	 * Le thème impose le cadrage, jamais la photo.
	 *
	 * Chaque emplacement porte un `aspect-ratio` fixe et l'image le remplit en
	 * `object-fit: cover`. Conséquence directe : les propriétaires peuvent
	 * remplacer n'importe quelle photo par n'importe quelle autre, quelle que
	 * soit sa forme d'origine, sans jamais décaler la mise en page.
	 */
	.c-img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: var(--focal, center);
	}

	.c-frame {
		position: relative;
		overflow: hidden;
		background: var(--c-pierre-fonce);
		border-radius: var(--rayon);
		aspect-ratio: var(--ratio, 3 / 2);
	}

	.c-frame--portrait {
		--ratio: 4 / 5;
	}

	.c-frame--carre {
		--ratio: 1 / 1;
	}

	.c-frame--large {
		--ratio: 16 / 9;
	}

	/* Zoom très léger au survol : on sent que c'est cliquable, sans effet de mode. */
	.c-frame--zoom .c-img {
		transition: transform 700ms cubic-bezier(0.33, 1, 0.68, 1);
	}

	.c-frame--zoom:hover .c-img,
	.c-frame--zoom:focus-within .c-img {
		transform: scale(1.03);
	}

	/* --- Wordmark -------------------------------------------------------- */

	.c-wordmark {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 0.15em;
		font-family: var(--font-titre);
		line-height: 1;
		text-decoration: none;
		color: inherit;
	}

	.c-wordmark__nom {
		font-size: var(--pas-1);
		font-weight: 500;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.c-wordmark__filet {
		inline-size: 100%;
		block-size: 1px;
		background: currentcolor;
		opacity: 0.35;
	}

	.c-wordmark__lieu {
		font-family: var(--font-texte);
		font-size: 0.6rem;
		font-weight: 500;
		letter-spacing: 0.34em;
		text-indent: 0.34em; /* Compense l'interlettrage, qui décentre le mot. */
		text-transform: uppercase;
		opacity: 0.7;
	}

	/* --- En-tête --------------------------------------------------------- */

	.c-header {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 20;
		padding-block: var(--esp-m);
		color: var(--c-blanc);
	}

	/* Sur les pages sans grande photo, l'en-tête redevient opaque et sombre. */
	.c-header--solide {
		position: sticky;
		background: var(--c-lin);
		color: var(--texte);
		border-block-end: 1px solid var(--filet);
	}

	.c-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--esp-m);
	}

	/* Un léger voile sombre derrière le texte blanc du hero : sans lui, le titre
	   devient illisible dès qu'une photo a un ciel clair. */
	.c-header:not(.c-header--solide)::before {
		content: "";
		position: absolute;
		inset: 0;
		block-size: 180%;
		background: linear-gradient(to bottom, rgb(20 20 18 / 45%), transparent);
		pointer-events: none;
		z-index: -1;
	}

	/* --- Navigation ------------------------------------------------------ */

	.c-nav__list {
		display: flex;
		align-items: center;
		gap: var(--esp-m);
		margin: 0;
	}

	.c-nav__list a {
		position: relative;
		font-size: var(--pas--1);
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-decoration: none;
		padding-block: var(--esp-3xs);
	}

	.c-nav__list a::after {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline-start: 0;
		inline-size: 0;
		block-size: 1px;
		background: currentcolor;
		transition: inline-size var(--transition);
	}

	.c-nav__list a:hover::after,
	.c-nav__list .current-menu-item > a::after {
		inline-size: 100%;
	}

	/* Ces deux boutons n'existent que pour la superposition mobile. Sans ce
	   `display: none` de base, le bouton « Fermer » resterait visible en plein
	   milieu de l'en-tête sur grand écran. */
	.c-nav__toggle,
	.c-nav__close {
		display: none;
		background: none;
		border: 0;
		padding: var(--esp-2xs);
		color: inherit;
		cursor: pointer;
		font-size: var(--pas--1);
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	@media (max-width: 60rem) {
		.c-nav__toggle {
			display: block;
		}

		.c-nav {
			position: fixed;
			inset: 0;
			z-index: 30;
			display: grid;
			place-items: center;
			background: var(--c-anthracite);
			color: var(--c-lin);
			opacity: 0;
			visibility: hidden;
			transition: opacity var(--transition), visibility var(--transition);
		}

		.c-nav[data-open="true"] {
			opacity: 1;
			visibility: visible;
		}

		.c-nav__list {
			flex-direction: column;
			gap: var(--esp-l);
		}

		.c-nav__list a {
			font-family: var(--font-titre);
			font-size: var(--pas-3);
			letter-spacing: 0;
			text-transform: none;
		}

		.c-nav__close {
			display: block;
			position: absolute;
			inset-block-start: var(--esp-m);
			inset-inline-end: var(--gouttiere);
		}
	}

	/* --- Sélecteur de langue --------------------------------------------- */

	.c-lang__list {
		display: flex;
		gap: var(--esp-2xs);
		margin: 0;
		font-size: var(--pas--1);
		letter-spacing: 0.08em;
	}

	.c-lang__item + .c-lang__item::before {
		content: "/";
		margin-inline-end: var(--esp-2xs);
		opacity: 0.4;
	}

	.c-lang__link {
		text-decoration: none;
		opacity: 0.6;
	}

	.c-lang__link.is-current {
		opacity: 1;
		font-weight: 600;
	}

	/* --- Boutons --------------------------------------------------------- */

	.c-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--esp-2xs);
		padding: 0.9em 1.9em;
		border: 1px solid currentcolor;
		border-radius: var(--rayon);
		background: transparent;
		color: inherit;
		font-size: var(--pas--1);
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-decoration: none;
		cursor: pointer;
		transition: background var(--transition), color var(--transition),
			border-color var(--transition);
	}

	.c-btn:hover {
		background: var(--c-anthracite);
		border-color: var(--c-anthracite);
		color: var(--c-lin);
	}

	.c-btn--plein {
		background: var(--c-anthracite);
		border-color: var(--c-anthracite);
		color: var(--c-lin);
	}

	.c-btn--plein:hover {
		background: var(--c-vert-fonce);
		border-color: var(--c-vert-fonce);
	}

	.c-btn--clair:hover {
		background: var(--c-lin);
		border-color: var(--c-lin);
		color: var(--c-anthracite);
	}

	/* --- Hero ------------------------------------------------------------ */

	.c-hero {
		position: relative;
		min-block-size: 100svh;
		display: grid;
		place-items: end center;
		overflow: hidden;
		background: var(--c-anthracite);
	}

	.c-hero__media {
		position: absolute;
		inset: 0;
	}

	.c-hero__slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 1400ms ease-in-out;
	}

	.c-hero__slide[data-active="true"] {
		opacity: 1;
	}

	/* <picture> est un conteneur en ligne, sans hauteur propre : sans cette règle,
	   le `block-size: 100%` de l'image ne se résout sur rien et la photo garde sa
	   hauteur naturelle au lieu de remplir le hero. */
	.c-hero__slide picture {
		display: block;
		inline-size: 100%;
		block-size: 100%;
	}

	.c-hero__slide img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: var(--focal, center);
	}

	/**
	 * Dégradé bas.
	 *
	 * Il n'est pas décoratif : le titre se pose sur une photo que les
	 * propriétaires pourront changer, et rien ne garantit qu'elle aura une zone
	 * sombre au bon endroit. Sans ce voile, un ciel clair ou une table dressée
	 * rendent le titre blanc illisible. Il doit donc être assez appuyé pour que
	 * le contraste tienne sur n'importe quelle image — c'est le prix à payer
	 * pour que le site reste sûr en édition.
	 */
	.c-hero__voile {
		position: absolute;
		inset: 0;
		background:
			linear-gradient(
				to top,
				rgb(18 18 16 / 82%) 0%,
				rgb(18 18 16 / 55%) 22%,
				rgb(18 18 16 / 18%) 48%,
				transparent 75%
			),
			linear-gradient(to bottom, rgb(18 18 16 / 35%) 0%, transparent 22%);
	}

	.c-hero__contenu {
		position: relative;
		z-index: 2;
		padding-block-end: var(--esp-2xl);
		text-align: center;
		color: var(--c-blanc);
	}

	.c-hero__titre {
		font-size: var(--pas-6);
		font-weight: 300;
		letter-spacing: 0.01em;
		text-shadow: 0 2px 40px rgb(0 0 0 / 30%);
	}

	.c-hero__phrase {
		margin-block-start: var(--esp-s);
		font-size: var(--pas-1);
		font-weight: 300;
		letter-spacing: 0.02em;
		opacity: 0.92;
	}

	.c-hero__actions {
		margin-block-start: var(--esp-l);
		justify-content: center;
	}

	.c-hero__controles {
		position: absolute;
		inset-block-end: var(--esp-m);
		inset-inline-end: var(--gouttiere);
		z-index: 3;
		display: flex;
		align-items: center;
		gap: var(--esp-xs);
	}

	.c-hero__pause {
		display: grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border: 1px solid rgb(255 255 255 / 45%);
		border-radius: 50%;
		background: rgb(0 0 0 / 20%);
		color: var(--c-blanc);
		cursor: pointer;
		transition: background var(--transition);
	}

	.c-hero__pause:hover {
		background: rgb(0 0 0 / 45%);
	}

	.c-hero__puces {
		display: flex;
		gap: var(--esp-2xs);
		margin: 0;
	}

	.c-hero__puce {
		inline-size: 2rem;
		block-size: 2px;
		padding: 0;
		border: 0;
		background: rgb(255 255 255 / 40%);
		cursor: pointer;
		transition: background var(--transition);
	}

	.c-hero__puce[aria-current="true"] {
		background: var(--c-blanc);
	}

	/* Indicateur de défilement, discret. */
	.c-hero__scroll {
		position: absolute;
		inset-block-end: var(--esp-m);
		inset-inline-start: var(--gouttiere);
		z-index: 3;
		font-size: 0.62rem;
		letter-spacing: 0.28em;
		text-transform: uppercase;
		color: rgb(255 255 255 / 70%);
	}

	@media (max-width: 40rem) {
		.c-hero__scroll {
			display: none;
		}
	}

	/* --- En-tête de page interne ----------------------------------------- */

	.c-pagehead {
		position: relative;
		min-block-size: 60svh;
		display: grid;
		place-items: center;
		overflow: hidden;
		background: var(--c-anthracite);
		text-align: center;
		color: var(--c-blanc);
	}

	.c-pagehead__media {
		position: absolute;
		inset: 0;
	}

	.c-pagehead__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.c-pagehead__voile {
		position: absolute;
		inset: 0;
		background: rgb(20 20 18 / 40%);
	}

	.c-pagehead__contenu {
		position: relative;
		z-index: 2;
		padding-block-start: var(--esp-2xl);
	}

	.c-pagehead__titre {
		font-size: var(--pas-5);
		font-weight: 300;
	}

	/* Sans photo : un bandeau sobre, pas une image cassée. */
	.c-pagehead--nu {
		min-block-size: auto;
		background: var(--fond);
		color: var(--texte);
		padding-block: calc(var(--esp-3xl) + var(--esp-l)) var(--esp-xl);
	}

	/* --- Titres de section ----------------------------------------------- */

	.c-section-head {
		margin-block-end: var(--esp-xl);
	}

	.c-eyebrow {
		margin-block-end: var(--esp-xs);
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.26em;
		text-transform: uppercase;
		color: var(--accent);
	}

	.c-section-title {
		font-size: var(--pas-4);
	}

	/* --- Atouts ---------------------------------------------------------- */

	.c-pillars {
		display: grid;
		gap: var(--esp-l);
		grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
		border-block-start: 1px solid var(--filet);
		padding-block-start: var(--esp-l);
	}

	.c-pillar__titre {
		font-family: var(--font-titre);
		font-size: var(--pas-2);
		margin-block-end: var(--esp-2xs);
	}

	.c-pillar__texte {
		color: var(--texte-doux);
		font-size: var(--pas--1);
	}

	/* --- Chiffres clés --------------------------------------------------- */

	.c-facts {
		display: grid;
		gap: 1px;
		grid-template-columns: repeat(auto-fit, minmax(min(10rem, 50%), 1fr));
		background: var(--filet);
		border: 1px solid var(--filet);
	}

	.c-fact {
		padding: var(--esp-m) var(--esp-s);
		background: var(--fond);
		text-align: center;
	}

	.c-fact__valeur {
		display: block;
		font-family: var(--font-titre);
		font-size: var(--fact-taille, var(--pas-3));
		line-height: 1;
	}

	/* Les conditions de séjour (arrivée, départ, séjour minimum, caution) portent
	   des phrases — « entre 17h et 19h » — là où l'accueil affiche des chiffres.
	   Elles ont donc besoin d'un cran de moins. C'est un variant du composant, et
	   il vit ici : la même règle traînait en `style=""` dans le modèle de page. */
	.c-facts--conditions {
		--fact-taille: var(--pas-1);

		margin-block-start: var(--esp-xl);
	}

	.c-fact__label {
		display: block;
		margin-block-start: var(--esp-2xs);
		font-size: 0.7rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--texte-doux);
	}

	/* --- Aperçu des espaces (accueil) ------------------------------------ */

	.c-preview {
		display: grid;
		gap: var(--esp-l);
		grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	}

	.c-preview__titre {
		margin-block-start: var(--esp-s);
		font-family: var(--font-titre);
		font-size: var(--pas-2);
	}

	.c-preview__texte {
		margin-block-start: var(--esp-3xs);
		color: var(--texte-doux);
		font-size: var(--pas--1);
	}

	/* --- Pièce / chambre : alternance texte-image ------------------------ */

	.c-room {
		display: grid;
		gap: var(--esp-l);
		align-items: center;
		grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	}

	.c-room + .c-room {
		margin-block-start: var(--esp-2xl);
	}

	/* Une rangée sur deux s'inverse : le regard rebondit au lieu de descendre
	   en colonne, et la page respire sans qu'on ajoute d'ornement. */
	.c-room:nth-child(even) .c-room__media {
		order: 2;
	}

	.c-room__nom {
		font-family: var(--font-titre);
		font-size: var(--pas-3);
	}

	.c-room__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--esp-2xs) var(--esp-s);
		margin-block: var(--esp-s);
		padding-block: var(--esp-s);
		border-block: 1px solid var(--filet);
		font-size: var(--pas--1);
		color: var(--texte-doux);
	}

	.c-room__meta span {
		display: inline-flex;
		align-items: center;
		gap: var(--esp-3xs);
	}

	.c-room__meta span + span::before {
		content: "·";
		margin-inline-end: var(--esp-2xs);
		opacity: 0.5;
	}

	.c-room__vignettes {
		display: flex;
		gap: var(--esp-2xs);
		margin-block-start: var(--esp-s);
	}

	.c-room__vignette {
		flex: 1;
		max-inline-size: 6rem;
		border: 0;
		padding: 0;
		background: none;
		cursor: pointer;
	}

	/* --- Équipements ----------------------------------------------------- */

	.c-equip {
		display: grid;
		gap: var(--esp-l);
		grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	}

	.c-equip__groupe-titre {
		margin-block-end: var(--esp-s);
		padding-block-end: var(--esp-2xs);
		border-block-end: 1px solid var(--filet);
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--accent);
	}

	.c-equip__liste {
		font-size: var(--pas--1);
		color: var(--texte-doux);
	}

	.c-equip__liste li + li {
		margin-block-start: var(--esp-2xs);
	}

	/* --- Galerie --------------------------------------------------------- */

	.c-gallery {
		display: grid;
		gap: var(--esp-2xs);
		grid-template-columns: repeat(auto-fit, minmax(min(14rem, 45%), 1fr));
	}

	.c-gallery__item {
		border: 0;
		padding: 0;
		background: none;
		cursor: zoom-in;
	}

	/* Une image sur cinq occupe deux colonnes : la grille cesse d'être un damier
	   régulier, ce qui suffit à lui donner un rythme éditorial. */
	.c-gallery__item:nth-child(5n + 1) {
		grid-column: span 2;
	}

	@media (max-width: 40rem) {
		.c-gallery__item:nth-child(5n + 1) {
			grid-column: span 1;
		}
	}

	/* --- Visionneuse ----------------------------------------------------- */

	/**
	 * Un <dialog> fermé est masqué par la feuille de style du NAVIGATEUR
	 * (`dialog:not([open]) { display: none }`). Or toute déclaration d'auteur bat
	 * la feuille du navigateur, quelle que soit sa spécificité — c'est une
	 * question d'origine dans la cascade, pas de poids.
	 *
	 * Résultat : un simple `display: grid` posé sur `.c-lightbox` ré-affichait la
	 * visionneuse EN PERMANENCE. Et comme le navigateur dimensionne un <dialog>
	 * en `width: fit-content` avec `margin: auto`, la boîte se réduisait à presque
	 * rien — avec les flèches et la croix, positionnées en absolu par rapport à
	 * elle, qui restaient accrochées dans un coin de la page.
	 *
	 * D'où les deux règles ci-dessous : masquer explicitement à l'état fermé, et
	 * ne styler la mise en page qu'à l'état [open].
	 */
	.c-lightbox {
		display: none;
	}

	.c-lightbox[open] {
		display: grid;
		place-items: center;
	}

	.c-lightbox {
		position: fixed;
		inset: 0;
		z-index: 60;

		/* Le navigateur impose width/height: fit-content et un max-width de
		   calc(100% - 6px - 2em). Sans ces quatre lignes, la visionneuse
		   s'ouvrait de travers, décalée sur le côté. */
		inline-size: 100%;
		block-size: 100%;
		max-inline-size: none;
		max-block-size: none;
		margin: 0;

		padding: var(--esp-xl) var(--gouttiere);
		border: 0;
		background: rgb(18 18 16 / 95%);
		color: var(--c-blanc);
		overflow: hidden;
	}

	.c-lightbox::backdrop {
		background: rgb(18 18 16 / 90%);
	}

	.c-lightbox figure {
		display: grid;
		place-items: center;
		max-inline-size: 100%;
		max-block-size: 100%;
		margin: 0;
	}

	.c-lightbox img {
		max-block-size: 78svh;
		max-inline-size: 100%;
		inline-size: auto;
		block-size: auto;
		object-fit: contain;
	}

	.c-lightbox__legende {
		margin-block-start: var(--esp-s);
		text-align: center;
		color: rgb(255 255 255 / 75%);
		font-size: var(--pas--1);
	}

	.c-lightbox__btn {
		position: absolute;
		display: grid;
		place-items: center;
		inline-size: 3rem;
		block-size: 3rem;
		border: 1px solid rgb(255 255 255 / 25%);
		border-radius: 50%;
		background: transparent;
		color: var(--c-blanc);
		cursor: pointer;
		transition: background var(--transition);
	}

	.c-lightbox__btn:hover {
		background: rgb(255 255 255 / 12%);
	}

	.c-lightbox__btn--prev {
		inset-inline-start: var(--gouttiere);
	}

	.c-lightbox__btn--next {
		inset-inline-end: var(--gouttiere);
	}

	.c-lightbox__btn--close {
		inset-block-start: var(--esp-m);
		inset-inline-end: var(--gouttiere);
	}

	/* --- Mot de l'hôte --------------------------------------------------- */

	.c-hote {
		display: grid;
		gap: var(--esp-xl);
		align-items: center;
		grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	}

	.c-hote__texte {
		font-family: var(--font-titre);
		font-size: var(--pas-2);
		line-height: 1.45;
		font-style: italic;
		color: var(--texte);
	}

	.c-hote__signature {
		margin-block-start: var(--esp-m);
		font-size: var(--pas--1);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--accent);
	}

	/* --- Avis des voyageurs ---------------------------------------------- */

	/**
	 * Des cartes, et pourquoi des cartes.
	 *
	 * La difficulté du composant tient aux longueurs : douze mots ici,
	 * quatre-vingt-dix là. La grille, elle, ne dépend d'aucune longueur — les
	 * cartes d'une même rangée sont étirées à la même hauteur, la carte est une
	 * colonne flex, et son pied porte `margin-block-start: auto` : l'espace
	 * excédentaire n'a plus qu'UN seul endroit où se loger, juste au-dessus du
	 * filet du pied. Les prénoms s'alignent donc d'une carte à l'autre, sans JS,
	 * sans hauteur imposée, et sans jamais tronquer un texte : on n'ampute pas la
	 * parole d'un voyageur, c'est elle qui fait réserver en direct.
	 *
	 * LE FOND BLANC DES CARTES N'EST PAS DÉCORATIF. Le laiton des étoiles tient
	 * le rapport de 3:1 exigé pour un objet graphique sur du blanc (3,3:1), mais
	 * pas sur le fond pierre de la section (2,6:1). C'est la carte qui permet de
	 * garder à la fois l'alternance lin / pierre / anthracite et des étoiles en
	 * laiton. Ne pas retirer ce fond sans repasser la section sur --fond.
	 *
	 * Rien n'est cliquable ici — la source est citée, jamais liée — donc aucun
	 * état de survol : rien ne doit faire mine d'être un bouton.
	 */
	.c-avis {
		display: grid;
		gap: var(--esp-m);
		/**
		 * 21rem, et le chiffre est calculé, pas choisi au jugé.
		 *
		 * La colonne `wide` de .l-shell plafonne à 7 + 68 + 7 = 82rem, soit 1312 px.
		 * Une quatrième piste exigerait 4 × 21rem + 3 × 1,5rem d'écart = 88,5rem :
		 * elle ne peut donc jamais tenir, à aucune largeur d'écran. Trois pistes,
		 * elles, tiennent toujours (67,5rem).
		 *
		 * À 19rem — la valeur d'origine — quatre colonnes de 304 px et trois écarts
		 * de 24 px font 1288 px : elles PASSAIENT, dès 1384 px de fenêtre. Neuf avis
		 * s'affichaient alors en 4 + 4 + 1 au lieu de 3 + 3 + 3, en cartes étroites.
		 */
		grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
	}

	/**
	 * L'avis seul.
	 *
	 * `auto-fit` efface les colonnes vides : avec un unique avis, les deux autres
	 * colonnes disparaissent et la carte s'étale sur toute la largeur — soixante
	 * caractères de citation dans un cadre de quatre-vingts rem. On la plafonne
	 * donc et on la centre. Sans effet quand la rangée est pleine : les colonnes
	 * y sont déjà plus étroites que ce plafond.
	 */
	.c-avis > li {
		display: flex;
		inline-size: 100%;
		max-inline-size: 34rem;
		margin-inline: auto;
	}

	.c-avis__carte {
		display: flex;
		flex-direction: column;
		gap: var(--esp-s);
		inline-size: 100%;
		margin: 0;
		padding: var(--esp-l);
		background: var(--c-blanc); /* Lire la note ci-dessus avant d'y toucher. */
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		box-shadow: var(--ombre-douce);
	}

	.c-avis__note {
		display: flex;
		gap: 0.15em;
		font-size: 1rem; /* Sert d'unité aux étoiles, dimensionnées en `em`. */
		color: var(--accent);
	}

	.c-avis__etoile {
		inline-size: 1em;
		block-size: 1em;
		fill: currentcolor;
	}

	/**
	 * L'étoile non acquise est CREUSE, pas seulement plus pâle.
	 *
	 * Une étoile pleine en pierre foncée sur la carte blanche ne tient que 1,6:1 :
	 * elle s'efface, et la différence ne tiendrait qu'à la couleur — donc perdue
	 * pour qui distingue mal les teintes. On change la FORME.
	 *
	 * Le contour est délibérément discret. Un contour appuyé pèserait
	 * visuellement plus lourd que l'étoile pleine en laiton, et la note se lirait
	 * à l'envers : l'étoile éteinte doit se compter, pas se remarquer.
	 */
	.c-avis__etoile--vide {
		fill: none;
		stroke: color-mix(in srgb, var(--texte) 55%, transparent);
		stroke-width: 1.6;
		stroke-linejoin: round;
	}

	/* Le voyageur parle en serif ROMAIN ; l'italique reste la voix des hôtes
	   (.c-hote__texte). Même famille, deux registres : la maison ne se cite pas
	   elle-même en se faisant passer pour ses clients. */
	.c-avis__texte {
		margin: 0;
		font-family: var(--font-titre);
		font-size: var(--pas-1);
		line-height: 1.5;
	}

	.c-avis__texte p + p {
		margin-block-start: var(--esp-s);
	}

	.c-avis__traduit {
		font-size: 0.66rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--texte-doux);
	}

	.c-avis__pied {
		display: flex;
		align-items: center;
		gap: var(--esp-s);
		margin-block-start: auto; /* La clé : le pied tombe au fond et aligne les cartes. */
		padding-block-start: var(--esp-m);
		border-block-start: 1px solid var(--filet);
	}

	/* La pastille : la photo du voyageur, ou son initiale. Le cadre est le même
	   dans les deux cas — une rangée d'avis reste alignée qu'ils aient tous une
	   photo, aucune, ou seulement certains. */
	.c-avis__pastille {
		position: relative;
		flex: none;
		display: grid;
		place-items: center;
		overflow: hidden;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border-radius: 50%; /* Le seul rond de la charte : c'est un visage, pas une carte. */
		background: var(--c-pierre-fonce);

		/* Une vraie bordure, et non une ombre interne : la photo est un enfant
		   positionné en `inset: 0`, donc peinte APRÈS l'ombre interne, qu'elle
		   recouvrirait entièrement. Le cerne disparaîtrait précisément dans le seul
		   cas où il sert — une photo claire posée sur une carte blanche. La bordure,
		   elle, réduit la boîte de rembourrage : l'image s'arrête avant. */
		border: 1px solid var(--filet);
	}

	.c-avis__pastille .c-img {
		position: absolute;
		inset: 0;
	}

	/* L'initiale gravée dans la pierre : anthracite sur pierre foncée. Le laiton,
	   tentant, aurait été trop pâle — et il appartient à la note. */
	.c-avis__initiale {
		font-family: var(--font-titre);
		font-size: var(--pas-1);
		line-height: 1;
		color: var(--texte);
		user-select: none;
	}

	.c-avis__identite {
		min-inline-size: 0; /* Un nom long passe à la ligne au lieu de pousser la pastille. */
	}

	.c-avis__auteur {
		display: block;
		font-family: var(--font-titre);
		font-size: var(--pas-1);
		line-height: 1.2;
	}

	.c-avis__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--esp-2xs);
		margin-block-start: var(--esp-3xs);
		font-size: 0.7rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--texte-doux);
	}

	/* Séparateur INERTE : un filet, jamais un caractère. Un `content: "·"` est
	   annoncé « point médian » par certains lecteurs d'écran, au milieu de
	   « AIRBNB · MAI 2026 ». Un filet n'a rien à annoncer — et il disparaît tout
	   seul le jour où la source ou la date manque. */
	.c-avis__meta > * + * {
		padding-inline-start: var(--esp-2xs);
		border-inline-start: 1px solid var(--filet);
	}

	.c-avis__resume {
		margin-block-start: var(--esp-xs);
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--texte-doux);
	}

	/* Dit d'où viennent les avis sans jamais y renvoyer : la source est une
	   information, pas une porte de sortie vers 15 % de commission. */
	.c-avis__mention {
		margin-block-start: var(--esp-xl);
		margin-inline: auto;
		max-inline-size: 62ch;
		font-size: var(--pas--1);
		color: var(--texte-doux);
		text-align: center;
		text-wrap: pretty;
	}

	@media (max-width: 40rem) {
		.c-avis__carte {
			padding: var(--esp-m);
		}
	}

	/* --- Le tarif --------------------------------------------------------- */

	/**
	 * Un seul prix, donc pas un tableau.
	 *
	 * Ici se trouvait une table à cinq colonnes (saison × semaine/week-end/nuit),
	 * repliée en fiches sur mobile à coups de `content: attr(data-label)`. La
	 * maison se loue désormais au même prix toute l'année : un tableau d'une
	 * ligne aurait l'air cassé, et le repliement `display:block` d'un <table>
	 * détruit sa sémantique pour plusieurs lecteurs d'écran. Une carte le dit
	 * mieux, et se lit à toutes les largeurs sans une seule media query.
	 */
	.c-tarif {
		margin-inline: auto;
		max-inline-size: 40rem;
		padding: var(--esp-xl) var(--esp-l);
		background: var(--c-blanc);
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		box-shadow: var(--ombre-douce);
		text-align: center;
	}

	.c-tarif__periode {
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--texte-doux);
	}

	.c-tarif__montant {
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: var(--esp-2xs);
		flex-wrap: wrap;
		margin-block-start: var(--esp-xs);
	}

	.c-tarif__somme {
		font-family: var(--font-titre);
		font-size: var(--pas-5);
		font-weight: 300;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	.c-tarif__unite {
		font-size: var(--pas-1);
		color: var(--texte-doux);
	}

	.c-tarif__precision {
		margin-block-start: var(--esp-xs);
		margin-inline: auto;
		max-inline-size: 42ch;
		font-size: var(--pas--1);
		color: var(--texte-doux);
		text-wrap: pretty;
	}

	/* Les frais obligatoires. Ils sont dans la même carte que le prix, et non
	   relégués en note de bas de page : c'est ensemble qu'ils font le prix payé. */
	.c-tarif__sup-titre {
		margin-block-start: var(--esp-l);
		padding-block-start: var(--esp-m);
		border-block-start: 1px solid var(--filet);
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--texte-doux);
	}

	.c-tarif__sup {
		margin-block-start: var(--esp-s);
		display: grid;
		gap: var(--esp-xs);
	}

	.c-tarif__ligne {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--esp-s);
		text-align: start;
	}

	.c-tarif__poste {
		font-size: var(--pas--1);
	}

	.c-tarif__valeur {
		margin-inline-start: 0; /* Le <dd> a une marge par défaut. */
		text-align: end;
	}

	.c-tarif__somme-sup {
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.c-tarif__unite-sup {
		display: block;
		font-size: 0.7rem;
		color: var(--texte-doux);
	}

	.c-tarif__note,
	.c-tarif__total {
		margin-block-start: var(--esp-m);
		font-size: var(--pas--1);
		color: var(--texte-doux);
		text-wrap: pretty;
	}

	.c-tarif__total {
		padding-block-start: var(--esp-m);
		border-block-start: 1px solid var(--filet);
		color: var(--texte);
	}

	/* --- Listes à cocher ------------------------------------------------- */

	.c-liste-check li {
		position: relative;
		padding-inline-start: 1.6em;
	}

	.c-liste-check li + li {
		margin-block-start: var(--esp-2xs);
	}

	.c-liste-check li::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0.62em;
		inline-size: 0.5em;
		block-size: 0.5em;
		border-radius: 50%;
		background: var(--c-vert);
	}

	.c-liste-check--non li::before {
		background: var(--c-pierre-fonce);
	}

	/* --- Formulaire ------------------------------------------------------ */

	.c-form {
		display: grid;
		gap: var(--esp-m);
	}

	.c-form__grid {
		display: grid;
		gap: var(--esp-m);
		grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
	}

	.c-field label,
	.c-form label {
		display: block;
		margin-block-end: var(--esp-3xs);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--texte-doux);
	}

	.c-form input[type="text"],
	.c-form input[type="email"],
	.c-form input[type="tel"],
	.c-form input[type="date"],
	.c-form input[type="number"],
	.c-form textarea {
		inline-size: 100%;
		padding: 0.8em 0.9em;
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		background: var(--c-blanc);
		font-size: var(--pas-0);
		transition: border-color var(--transition), box-shadow var(--transition);
	}

	.c-form input:focus,
	.c-form textarea:focus {
		border-color: var(--accent);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
		outline: none;
	}

	.c-form textarea {
		min-block-size: 8rem;
		resize: vertical;
	}

	/* La case RGPD : jamais pré-cochée, et son libellé se lit comme une phrase,
	   pas comme une étiquette de champ. */
	.c-form .c-consent label {
		display: flex;
		align-items: start;
		gap: var(--esp-2xs);
		font-size: var(--pas--1);
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		color: var(--texte-doux);
		line-height: 1.5;
	}

	.c-form .c-consent input {
		margin-block-start: 0.3em;
		accent-color: var(--c-vert);
	}

	.c-form .wpcf7-submit {
		justify-self: start;
	}

	/* Le champ-piège : hors flux et hors lecture d'écran, mais présent dans le
	   DOM — c'est précisément ce qui attrape les robots. */
	.longeard-hp {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Messages de Contact Form 7. */
	.wpcf7-response-output {
		margin: var(--esp-m) 0 0;
		padding: var(--esp-s) var(--esp-m);
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		font-size: var(--pas--1);
	}

	.wpcf7 form.sent .wpcf7-response-output {
		border-color: var(--c-vert);
		background: color-mix(in srgb, var(--c-vert) 8%, transparent);
	}

	.wpcf7 form.invalid .wpcf7-response-output,
	.wpcf7 form.failed .wpcf7-response-output {
		border-color: #b0503c;
		background: color-mix(in srgb, #b0503c 8%, transparent);
	}

	.wpcf7-not-valid-tip {
		margin-block-start: var(--esp-3xs);
		font-size: var(--pas--1);
		color: #b0503c;
	}

	/* --- Calendrier de disponibilités ------------------------------------ */

	/**
	 * Les états d'un jour tiennent dans data-state, jamais dans une classe :
	 * c'est la convention du thème, et cela permet au JS de basculer un état
	 * sans manipuler de liste de classes.
	 *
	 *   libre    la nuit est réservable
	 *   occupee  la nuit est prise, la veille aussi
	 *   debut    un séjour commence : libre le matin, pris le soir
	 *   fin      un séjour s'achève : pris le matin, libre le soir
	 *   passe    date révolue
	 *
	 * Les deux états de transition sont rendus en diagonale, dans le sens de la
	 * journée : le triangle plein indique la moitié occupée. C'est ce qui rend
	 * lisible qu'on peut arriver le jour même où d'autres repartent.
	 */

	.c-calendar {
		--jour-occupe: var(--c-pierre-fonce);
		--jour-choisi: var(--c-vert);
		margin-block-end: var(--esp-l);
	}

	.c-calendar__intro,
	.c-calendar__legend {
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--texte-doux);
	}

	/* Un seul mois s'affiche à la fois — la grille ne sert donc qu'au repli
	   sans JavaScript, où les douze arrivent à la suite. */
	.c-calendar__months {
		display: grid;
		gap: var(--esp-l);
		grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
		margin-block: var(--esp-s);
	}

	.c-calendar__month {
		max-inline-size: 24rem;
		margin-inline: auto;
		inline-size: 100%;
	}

	.c-calendar__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--esp-2xs);
		margin-block: var(--esp-2xs);
	}

	.c-calendar__step {
		display: grid;
		place-items: center;
		inline-size: 2rem;
		block-size: 2rem;
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		background: var(--c-blanc);
		font-size: var(--pas-1);
		line-height: 1;
		color: var(--texte);
		cursor: pointer;
		transition: border-color var(--transition);
	}

	.c-calendar__step:hover:not(:disabled),
	.c-calendar__step:focus-visible {
		border-color: var(--accent);
	}

	.c-calendar__step:disabled {
		opacity: 0.3;
		cursor: default;
	}

	.c-calendar__select {
		padding: 0.4em 0.6em;
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		background: var(--c-blanc);
		font-family: var(--font-titre);
		font-size: var(--pas-0);
		color: var(--texte);
		text-transform: capitalize;
		cursor: pointer;
	}

	.c-calendar__select:focus-visible {
		border-color: var(--accent);
		outline: none;
	}

	.c-calendar__title {
		margin: 0 0 var(--esp-2xs);
		font-family: var(--font-titre);
		font-size: var(--pas-1);
		font-weight: 400;
		text-align: center;
		text-transform: capitalize;
	}

	.c-calendar__grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.c-calendar__dow {
		padding-block: var(--esp-3xs);
		font-size: 0.65rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-align: center;
		color: var(--texte-doux);
	}

	.c-calendar__day {
		display: grid;
		place-items: center;
		aspect-ratio: 1;
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		background: var(--c-blanc);
		font-size: var(--pas--1);
		font-variant-numeric: tabular-nums;
	}

	.c-calendar__day time {
		/* Le chiffre reste lisible par-dessus la diagonale. */
		position: relative;
		z-index: 1;
	}

	.c-calendar__day[data-state="occupee"] {
		background: var(--jour-occupe);
		color: var(--texte-doux);
	}

	.c-calendar__day[data-state="debut"] {
		background: linear-gradient(to bottom right, var(--c-blanc) 49.5%, var(--jour-occupe) 50.5%);
	}

	.c-calendar__day[data-state="fin"] {
		background: linear-gradient(to bottom right, var(--jour-occupe) 49.5%, var(--c-blanc) 50.5%);
	}

	.c-calendar__day[data-state="passe"] {
		border-color: transparent;
		background: transparent;
		color: var(--texte-doux);
		opacity: 0.35;
	}

	/* --- Interaction (ajoutée par calendar.js) --- */

	.c-calendar__day[role="button"] {
		cursor: pointer;
		transition: background var(--transition), border-color var(--transition);
	}

	.c-calendar__day[aria-disabled="true"] {
		cursor: not-allowed;
	}

	.c-calendar__day[role="button"]:not([aria-disabled="true"]):hover,
	.c-calendar__day:focus-visible {
		border-color: var(--accent);
		outline: none;
	}

	.c-calendar__day[data-selected] {
		border-color: var(--jour-choisi);
		background: color-mix(in srgb, var(--jour-choisi) 18%, var(--c-blanc));
	}

	.c-calendar__day[data-selected="borne"] {
		background: var(--jour-choisi);
		border-color: var(--jour-choisi);
		color: var(--c-blanc);
		font-weight: 600;
	}

	.c-calendar__legend {
		display: flex;
		align-items: center;
		gap: var(--esp-2xs);
		flex-wrap: wrap;
	}

	.c-calendar__key {
		inline-size: 0.9rem;
		block-size: 0.9rem;
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		background: var(--c-blanc);
	}

	.c-calendar__key[data-state="occupee"] {
		background: var(--jour-occupe);
	}

	/* Le récapitulatif de la sélection, écrit par le JS. */
	.c-calendar__resume {
		margin-block: var(--esp-2xs);
		font-size: var(--pas-0);
		color: var(--texte);
	}

	.c-calendar__resume[data-error="true"] {
		color: #b0503c;
	}

	.c-calendar__clear {
		border: 0;
		padding: 0;
		background: none;
		font: inherit;
		font-size: var(--pas--1);
		color: var(--texte-doux);
		text-decoration: underline;
		cursor: pointer;
	}

	/* Les champs de date natifs, une fois le calendrier en place : masqués pour
	   l'œil, jamais retirés du DOM — c'est eux que Contact Form 7 lit. */
	.c-field[hidden] {
		display: none;
	}

	/* --- Carte (chargement au clic) -------------------------------------- */

	/**
	 * Aucune requête vers Google avant le clic du visiteur.
	 *
	 * C'est ce qui permet au site de ne déposer aucun cookie tiers, et donc
	 * de se passer entièrement de bandeau de consentement. Ne pas remplacer
	 * ce bloc par une iframe chargée d'emblée.
	 */
	.c-map {
		position: relative;
		aspect-ratio: 16 / 10;
		display: grid;
		place-items: center;
		gap: var(--esp-s);
		padding: var(--esp-l);
		background: var(--c-pierre);
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		text-align: center;
	}

	.c-map iframe {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		border: 0;
	}

	.c-map__note {
		max-inline-size: 34ch;
		font-size: var(--pas--1);
		color: var(--texte-doux);
	}

	/* --- Coordonnées ----------------------------------------------------- */

	.c-coords dt {
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--accent);
	}

	.c-coords dd {
		margin: var(--esp-3xs) 0 var(--esp-m);
		font-size: var(--pas-1);
		font-family: var(--font-titre);
	}

	/* --- Bandeau d'appel ------------------------------------------------- */

	.c-cta {
		text-align: center;
	}

	.c-cta__titre {
		font-size: var(--pas-5);
		font-weight: 300;
	}

	.c-cta__texte {
		margin-block: var(--esp-m) var(--esp-l);
		margin-inline: auto;
		max-inline-size: 42ch;
		opacity: 0.85;
	}

	/* --- Pied de page ---------------------------------------------------- */

	.c-footer {
		padding-block: var(--esp-2xl) var(--esp-l);
		background: var(--c-anthracite);
		color: var(--c-lin);
	}

	.c-footer__grid {
		display: grid;
		gap: var(--esp-xl);
		grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
		padding-block-end: var(--esp-xl);
		border-block-end: 1px solid rgb(250 248 244 / 12%);
	}

	.c-footer__titre {
		margin-block-end: var(--esp-s);
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--c-laiton-clair);
	}

	.c-footer a {
		text-decoration: none;
	}

	.c-footer a:hover {
		text-decoration: underline;
		text-underline-offset: 0.22em;
	}

	.c-footer__liste li + li {
		margin-block-start: var(--esp-2xs);
	}

	.c-footer__bas {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--esp-s);
		padding-block-start: var(--esp-l);
		font-size: var(--pas--1);
		opacity: 0.6;
	}

	.c-footer__legal {
		display: flex;
		flex-wrap: wrap;
		gap: var(--esp-m);
		margin: 0;
	}

	/* --- Contenu éditorial (pages légales) ------------------------------- */

	.c-editorial {
		max-inline-size: var(--mesure);
	}

	.c-editorial > * + * {
		margin-block-start: var(--esp-m);
	}

	.c-editorial h2 {
		margin-block-start: var(--esp-xl);
		font-size: var(--pas-2);
	}

	.c-editorial h3 {
		margin-block-start: var(--esp-l);
		font-size: var(--pas-1);
	}

	.c-editorial ul {
		padding-inline-start: 1.2em;
	}

	.c-editorial li + li {
		margin-block-start: var(--esp-2xs);
	}

	/* --- Avis destiné aux administrateurs -------------------------------- */

	.c-notice {
		padding: var(--esp-s) var(--esp-m);
		border: 1px dashed var(--accent);
		border-radius: var(--rayon);
		background: color-mix(in srgb, var(--accent) 6%, transparent);
		font-size: var(--pas--1);
	}
}

/* ==========================================================================
   UTILITAIRES
   ========================================================================== */

@layer utilities {
	.u-sr-only {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.u-mt-0 {
		margin-block-start: 0;
	}

	.u-center {
		text-align: center;
	}
}