/* ==========================================================================
   Chambres d'hôtes & Gîte de Aussé, feuille de styles unique
   Direction : « Pierre & bocage »
   ========================================================================== */

/* --- Polices auto-hébergées ------------------------------------------------ */

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/fraunces-latin.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: 400 600;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/inter-latin.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;
}

/* --- Jetons ---------------------------------------------------------------- */

:root {
	--creme: #faf8f4;
	--sable: #f1ebe1;
	--sable-bord: #e3d9c9;
	--granit: #4a4742;
	--granit-fonce: #2e2c29;
	--granit-clair: #6b665f;
	--vert: #3d5a45;
	--vert-fonce: #2c4132;
	--ocre: #b07d3f;        /* accents en grand corps uniquement */
	--ocre-texte: #8f5f2b;  /* petit texte et liens : 5,2:1 sur crème */
	--ocre-btn: #9a6a32;    /* fond de bouton : 4,7:1 avec du blanc */
	--blanc: #fff;

	--serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--rayon: 4px;
	--rayon-lg: 10px;
	--ombre: 0 1px 2px rgb(46 44 41 / 6%), 0 8px 24px -12px rgb(46 44 41 / 18%);
	--ombre-forte: 0 2px 4px rgb(46 44 41 / 8%), 0 18px 40px -16px rgb(46 44 41 / 28%);

	--largeur: 1180px;
	--gouttiere: clamp(1.25rem, 5vw, 3rem);
	--section-y: clamp(4rem, 9vw, 7.5rem);
}

/* --- Base ------------------------------------------------------------------ */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--creme);
	color: var(--granit);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.15;
	color: var(--granit-fonce);
	margin: 0 0 .6em;
	letter-spacing: -.015em;
}

h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 3rem); text-wrap: balance; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); text-wrap: balance; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ocre-texte); }

:focus-visible {
	outline: 3px solid var(--ocre-btn);
	outline-offset: 3px;
	border-radius: 2px;
}
/* Sur fond sombre, l'ocre de bouton tombe à 1,6:1 : on éclaircit l'anneau.
   #e0bd8d donne 4,3:1 sur le vert, bien au-dessus des 3:1 exigés. */
.section--vert :focus-visible,
.heros :focus-visible,
.lightbox :focus-visible,
.entete:not(.est-collee) :focus-visible {
	outline-color: #e0bd8d;
}

/* Le mot accentué des titres bicolores */
.accent { color: var(--ocre); font-style: italic; }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saut-contenu {
	position: absolute; top: -100px; left: 1rem; z-index: 200;
	background: var(--vert); color: var(--blanc);
	padding: .75rem 1.25rem; border-radius: var(--rayon);
	text-decoration: none; font-weight: 600;
	transition: top .15s;
}
.saut-contenu:focus { top: 1rem; }

/* --- Structure ------------------------------------------------------------- */

.enveloppe {
	max-width: var(--largeur);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section-y); }
.section--sable { background: var(--sable); }
.section--vert { background: var(--vert); color: #e9efe9; }
.section--vert h2, .section--vert h3 { color: var(--blanc); }
.section--vert .accent { color: #d9b382; }

.surtitre {
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--granit-clair);
	margin: 0 0 .9rem;
}
.section--vert .surtitre { color: #c2d0c3; }

.intro-section { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.intro-section--centre { margin-inline: auto; text-align: center; }

.chapo { font-size: 1.1875rem; color: var(--granit-clair); }
.section--vert .chapo { color: #c7d4c8; }

/* --- Pastilles ------------------------------------------------------------- */

.pastille {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--blanc);
	border: 1px solid var(--sable-bord);
	color: var(--ocre-texte);
	font-size: .8125rem; font-weight: 600;
	padding: .4rem .85rem;
	border-radius: 100px;
	margin-bottom: 1.25rem;
}
.pastille svg { width: 15px; height: 15px; flex: none; }

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

.bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 48px;
	padding: .8rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--rayon);
	font-family: var(--sans);
	font-size: 1rem; font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s, border-color .18s, transform .18s, color .18s;
}
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton:hover { transform: translateY(-2px); }

.bouton--principal { background: var(--ocre-btn); color: var(--blanc); }
.bouton--principal:hover { background: #82531f; }

.bouton--secondaire {
	background: transparent; color: var(--blanc);
	border-color: rgb(255 255 255 / 55%);
}
.bouton--secondaire:hover { background: rgb(255 255 255 / 14%); border-color: var(--blanc); }

.bouton--contour {
	background: transparent; color: var(--granit-fonce);
	border-color: var(--granit);
}
.bouton--contour:hover { background: var(--granit-fonce); color: var(--creme); border-color: var(--granit-fonce); }

.bouton--vert { background: var(--vert); color: var(--blanc); }
.bouton--vert:hover { background: var(--vert-fonce); }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: .85rem; }

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

.entete {
	position: fixed; inset: 0 0 auto; z-index: 100;
	transition: background-color .3s, box-shadow .3s, border-color .3s;
	border-bottom: 1px solid transparent;
}
.entete__interieur {
	max-width: var(--largeur); margin-inline: auto;
	padding: .9rem var(--gouttiere);
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.marque {
	font-family: var(--serif); font-weight: 600; font-size: 1.3rem;
	color: var(--blanc); text-decoration: none;
	line-height: 1.1; transition: color .3s;
}
.marque span {
	display: block; font-family: var(--sans);
	font-size: .625rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	opacity: .8;
}

.nav__liste {
	display: flex; align-items: center; gap: .35rem;
	list-style: none; margin: 0; padding: 0;
}
.nav__liste a {
	/* .6rem : porte la cible à 44,7px de haut (WCAG 2.5.5) */
	display: block; padding: .6rem .8rem;
	color: var(--blanc); text-decoration: none;
	font-size: .9375rem; font-weight: 500;
	border-radius: var(--rayon);
	transition: color .3s, background-color .18s, text-shadow .3s;
}
.nav__liste a:hover { background: rgb(255 255 255 / 14%); }

.entete__tel {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--ocre-btn); color: var(--blanc);
	padding: .6rem 1.1rem; min-height: 44px;
	border-radius: var(--rayon);
	text-decoration: none; font-weight: 600; font-size: .9375rem;
	white-space: nowrap;
	transition: background-color .18s;
}
.entete__tel:hover { background: #82531f; }
.entete__tel svg { width: 16px; height: 16px; flex: none; }

/* En-tête au défilement : passe en crème opaque */
.entete.est-collee {
	background: var(--creme);
	border-bottom-color: var(--sable-bord);
	box-shadow: 0 2px 16px -8px rgb(46 44 41 / 25%);
}
.entete.est-collee .marque,
.entete.est-collee .nav__liste a { color: var(--granit-fonce); text-shadow: none; }
.entete.est-collee .nav__liste a:hover { background: var(--sable); }
.entete.est-collee .bascule-menu span { background: var(--granit-fonce); }

.nav__liste a[aria-current] { color: var(--ocre); }
.entete.est-collee .nav__liste a[aria-current] { color: var(--ocre-texte); }

/* Bascule mobile */
.bascule-menu {
	display: none;
	width: 46px; height: 46px;
	align-items: center; justify-content: center;
	flex-direction: column; gap: 5px;
	background: transparent; border: 0; cursor: pointer; padding: 0;
}
.bascule-menu span {
	display: block; width: 24px; height: 2px;
	background: var(--blanc); border-radius: 2px;
	transition: transform .25s, opacity .25s, background-color .3s;
}
.bascule-menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bascule-menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.bascule-menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Héros ----------------------------------------------------------------- */

.heros {
	position: relative;
	min-height: 100svh;
	display: flex; align-items: center;
	padding-block: 8rem 3rem;
	overflow: hidden;
}
.heros__media { position: absolute; inset: 0; z-index: 0; }
.heros__media img { width: 100%; height: 100%; object-fit: cover; }
/* Voile : dense à gauche sous le texte, quasi nul à droite pour laisser
   la photo respirer. Les valeurs sont calées sur le contraste du titre. */
.heros__media::after {
	content: '';
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgb(28 26 23 / 45%) 0%, rgb(28 26 23 / 0%) 20%),
		linear-gradient(0deg, rgb(28 26 23 / 45%) 0%, rgb(28 26 23 / 0%) 26%),
		linear-gradient(90deg, rgb(28 26 23 / 86%) 0%, rgb(28 26 23 / 74%) 45%, rgb(28 26 23 / 34%) 72%, rgb(28 26 23 / 8%) 100%);
}
.heros__contenu { position: relative; z-index: 1; max-width: 42rem; color: var(--blanc); }
.heros h1 { color: var(--blanc); margin-bottom: .35em; text-wrap: balance; }
/* Ocre éclairci : l'ocre de marque ne tient pas le contraste sur la photo */
.heros .accent { color: #e0bd8d; }
.heros__lieu {
	font-size: .8125rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: #e7d9c3; margin-bottom: 1.5rem;
}
.heros__chapo {
	font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
	color: rgb(255 255 255 / 88%);
	margin-bottom: 2rem; max-width: 34rem;
}
.heros .groupe-boutons { margin-bottom: 2.5rem; }

.heros__reassurance {
	display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
	list-style: none; margin: 0; padding: 0;
	font-size: .875rem; color: rgb(255 255 255 / 85%);
}
.heros__reassurance li { display: flex; align-items: center; gap: .45rem; }
.heros__reassurance svg { width: 16px; height: 16px; flex: none; color: #d9b382; }

.heros__defiler {
	position: absolute; z-index: 1;
	bottom: 1.25rem; left: 50%; transform: translateX(-50%);
	padding: .35rem .75rem;
	display: flex; flex-direction: column; align-items: center; gap: .4rem;
	color: rgb(255 255 255 / 70%); text-decoration: none;
	font-size: .6875rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
}
.heros__defiler svg { width: 18px; height: 18px; animation: flottement 2.4s ease-in-out infinite; }
@keyframes flottement {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(5px); }
}

/* --- Accroche -------------------------------------------------------------- */

.accroche__grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.accroche__media img { border-radius: var(--rayon-lg); box-shadow: var(--ombre); }
.accroche__citation {
	margin: 1.75rem 0 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--ocre);
	font-family: var(--serif); font-style: italic;
	font-size: 1.125rem; color: var(--granit-clair);
}

/* --- Bande de chiffres ----------------------------------------------------- */

.chiffres {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.chiffre__icone {
	width: 30px; height: 30px;
	margin: 0 auto .7rem;
	color: var(--ocre);
}
.chiffre__valeur {
	font-family: var(--serif); font-weight: 600;
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	line-height: 1; color: var(--ocre);
	margin-bottom: .35rem;
}
.chiffre__titre { font-weight: 600; color: var(--granit-fonce); margin-bottom: .1rem; }
.chiffre__note { font-size: .875rem; color: var(--granit-clair); }

/* --- Cartes de choix ------------------------------------------------------- */

.choix {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.carte-choix {
	display: flex; flex-direction: column;
	background: var(--blanc);
	border: 1px solid var(--sable-bord);
	border-radius: var(--rayon-lg);
	overflow: hidden;
	transition: transform .22s, box-shadow .22s;
}
.carte-choix:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte-choix__media { aspect-ratio: 4 / 3; overflow: hidden; }
.carte-choix__media img { width: 100%; height: 100%; object-fit: cover; }
.carte-choix__corps { padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; flex: 1; }
.carte-choix h3 { margin-bottom: .3em; }
.carte-choix__meta {
	font-size: .875rem; font-weight: 600;
	color: var(--ocre-texte); margin-bottom: 1rem;
}
.carte-choix .liste-coches { margin-bottom: 1.75rem; }
.carte-choix .bouton { margin-top: auto; align-self: flex-start; }

/* --- Listes à coches ------------------------------------------------------- */

.liste-coches { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .6rem; }
/* Le picto est un marqueur positionné, pas un élément flex : sinon chaque
   <strong> de la puce deviendrait un élément flex à part et se ferait écraser. */
.liste-coches li { position: relative; padding-left: 1.75rem; }
.liste-coches svg {
	position: absolute; left: 0; top: .32em;
	width: 18px; height: 18px;
	color: var(--vert);
}
.section--vert .liste-coches svg { color: #d9b382; }

/* --- Blocs hébergement (photo + texte) ------------------------------------- */

.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.duo--inverse .duo__media { order: 2; }
/* La colonne texte est bien plus haute que la photo : on la fait suivre
   la lecture plutôt que de laisser un vide. */
.duo__media { position: sticky; top: 6rem; }
.duo__media img { border-radius: var(--rayon-lg); box-shadow: var(--ombre); }
.duo__media--pile { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.duo__media--pile img { height: 100%; object-fit: cover; }
.duo__media--pile :first-child { grid-column: 1 / -1; }

/* --- Tarifs ---------------------------------------------------------------- */

.tarifs {
	background: var(--blanc);
	border: 1px solid var(--sable-bord);
	border-radius: var(--rayon-lg);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-bottom: 1.5rem;
}
.section--sable .tarifs { background: var(--creme); }
.tarifs__titre {
	font-family: var(--sans); font-size: .8125rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--granit-clair);
	margin: 0 0 1rem;
}
.tarifs table { width: 100%; border-collapse: collapse; }
.tarifs th, .tarifs td { text-align: left; padding: .6rem 0; }
.tarifs th { font-weight: 400; }
.tarifs td { text-align: right; font-weight: 600; color: var(--granit-fonce); white-space: nowrap; }
.tarifs tr + tr th, .tarifs tr + tr td { border-top: 1px solid var(--sable-bord); }
.tarifs__note {
	font-size: .875rem; color: var(--granit-clair);
	margin: 1rem 0 0; padding-top: 1rem;
	border-top: 1px solid var(--sable-bord);
}

/* --- Équipements (compense l'absence de photos de cuisine) ----------------- */

.equipements {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	gap: .75rem;
	list-style: none; margin: 0 0 1.5rem; padding: 0;
}
.equipements li {
	display: flex; flex-direction: column; align-items: center;
	gap: .5rem; text-align: center;
	background: var(--blanc);
	border: 1px solid var(--sable-bord);
	border-radius: var(--rayon);
	padding: 1rem .5rem;
	font-size: .8125rem; font-weight: 500;
	color: var(--granit);
}
.equipements svg { width: 26px; height: 26px; color: var(--vert); }

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

/* --- Filtre de la galerie -------------------------------------------------- */

.filtre {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-bottom: 2rem;
}
.filtre__btn {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
	padding: .5rem 1rem;
	border: 1px solid var(--sable-bord);
	border-radius: 999px;
	background: var(--creme);
	color: var(--granit);
	font: 600 .875rem/1.2 var(--sans);
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.filtre__btn:hover { border-color: var(--vert); }
.filtre__btn[aria-pressed='true'] {
	background: var(--vert);
	border-color: var(--vert);
	color: #fff;
}
/* Couleurs explicites plutôt qu'une opacité : à 12 px, un blanc à 70 %
   retombe sous le seuil AA sur le crème comme sur le vert. */
.filtre__nb {
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
	color: var(--granit-clair);
}
.filtre__btn[aria-pressed='true'] .filtre__nb { color: #d5e0d7; }

/* Mosaïque en colonnes : chaque photo garde ses proportions réelles,
   aucun recadrage brutal entre portrait et paysage. */
.galerie {
	columns: 4;
	column-gap: .75rem;
}
.galerie__element {
	position: relative;
	display: block; width: 100%;
	padding: 0; border: 0;
	margin: 0 0 .75rem;
	background: var(--sable);
	border-radius: var(--rayon);
	overflow: hidden;
	cursor: zoom-in;
	break-inside: avoid;
	line-height: 0;
}
.galerie__element img {
	width: 100%; height: auto;
	transition: transform .4s ease;
}
.galerie__element:hover img { transform: scale(1.05); }
.galerie__element::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgb(30 28 25 / 45%));
	opacity: 0; transition: opacity .25s;
}
.galerie__element:hover::after { opacity: 1; }

/* Le display:block ci-dessus écrase l'attribut hidden : sans cette règle,
   le filtre ne masquerait rien. Même piège que le <dialog> de la lightbox. */
.galerie__element[hidden] { display: none; }

/* Badge d'appartenance, toujours visible : c'est lui qui dit à quel
   hébergement la photo se rapporte, sans toucher à la légende. */
.galerie__badge {
	position: absolute;
	left: .5rem;
	bottom: .5rem;
	z-index: 1;
	padding: .25rem .5rem;
	border-radius: 999px;
	background: rgb(30 28 25 / 78%);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--creme);
	font: 600 .6875rem/1.4 var(--sans);
	letter-spacing: .02em;
	white-space: nowrap;
	pointer-events: none;
}

/* --- Lightbox -------------------------------------------------------------- */

.lightbox {
	/* Fermée par défaut : ne jamais écraser le display:none natif de <dialog> */
	display: none;
	position: fixed; inset: 0; z-index: 200;
	align-items: center; justify-content: center;
	background: rgb(20 19 17 / 94%);
	border: 0; padding: 0;
	width: 100%; height: 100%;
	max-width: none; max-height: none;
}
.lightbox::backdrop { background: rgb(20 19 17 / 94%); }
.lightbox[open] { display: flex; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: min(94vw, 1200px); }
.lightbox__figure img {
	max-height: 78svh; width: auto; max-width: 100%;
	object-fit: contain; border-radius: var(--rayon);
}
.lightbox__legende { color: rgb(255 255 255 / 80%); font-size: .9375rem; text-align: center; margin: 0; }
.lightbox__compteur { color: rgb(255 255 255 / 45%); font-size: .8125rem; font-variant-numeric: tabular-nums; }

.lightbox__btn {
	position: absolute;
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 50%;
	color: var(--blanc); cursor: pointer;
	transition: background-color .18s;
}
.lightbox__btn:hover { background: rgb(255 255 255 / 24%); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__btn--fermer { top: 1.25rem; right: 1.25rem; }
.lightbox__btn--prec { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__btn--suiv { right: 1.25rem; top: 50%; transform: translateY(-50%); }

/* --- Région ---------------------------------------------------------------- */

.region {
	display: grid;
	/* 185px : laisse les 5 cartes tenir sur une ligne dans l'enveloppe à 1084px */
	grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-bottom: 3rem;
}
.carte-lieu {
	background: rgb(255 255 255 / 7%);
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: var(--rayon-lg);
	padding: 1.5rem;
}
.carte-lieu__distance {
	font-family: var(--serif); font-weight: 600;
	font-size: 1.75rem; line-height: 1;
	color: #d9b382; margin-bottom: .5rem;
}
.carte-lieu h3 { font-size: 1.0625rem; margin-bottom: .25em; }
/* Cibler le dernier <p> seulement : sinon cette règle écrase la taille
   de .carte-lieu__distance, qui est un <p> lui aussi. */
.carte-lieu p:last-child { font-size: .875rem; color: #c2d0c3; margin: 0; }

.region-plus {
	columns: 2; column-gap: 3rem;
	list-style: none; margin: 0; padding: 0;
}
.region-plus li {
	break-inside: avoid;
	padding: .55rem 0 .55rem 1.4rem;
	position: relative;
	border-bottom: 1px solid rgb(255 255 255 / 12%);
	font-size: .9375rem;
}
.region-plus li::before {
	content: ''; position: absolute;
	left: 0; top: 1.15em;
	width: 6px; height: 6px;
	background: #d9b382; border-radius: 50%;
}

/* --- FAQ ------------------------------------------------------------------- */

.faq { max-width: 52rem; }
.faq details {
	border-bottom: 1px solid var(--sable-bord);
}
.faq details[open] .faq__q { color: var(--ocre-texte); }
.faq__q {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
	padding: 1.35rem 0;
	font-family: var(--serif); font-size: 1.125rem; font-weight: 600;
	color: var(--granit-fonce);
	cursor: pointer;
	list-style: none;
	transition: color .18s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--ocre-texte); }
/* Le h3 porte la sémantique (navigation par titres au lecteur d'écran) ;
   l'apparence reste celle du summary. */
.faq__q h3 {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}
.faq__q svg {
	width: 20px; height: 20px; flex: none;
	margin-top: .2em; color: var(--ocre);
	transition: transform .25s;
}
.faq details[open] .faq__q svg { transform: rotate(180deg); }
.faq__r { padding: 0 0 1.5rem; max-width: 44rem; color: var(--granit-clair); }

/* --- Accès ----------------------------------------------------------------- */

.acces {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
/* La carte accompagne la lecture des itinéraires */
.acces__carte { position: sticky; top: 6rem; }
.carte-geo {
	border-radius: var(--rayon-lg);
	overflow: hidden;
	border: 1px solid var(--sable-bord);
	box-shadow: var(--ombre);
	background: var(--sable);
}
.carte-geo iframe { display: block; width: 100%; height: 420px; border: 0; }
.carte-geo__pied {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--blanc);
	border-top: 1px solid var(--sable-bord);
	font-size: .875rem;
}
.carte-geo__gps { font-variant-numeric: tabular-nums; color: var(--granit-clair); margin: 0; }
.carte-geo__gps strong { color: var(--granit-fonce); font-weight: 600; }

.itineraire h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.125rem; }
.itineraire h3 svg { width: 20px; height: 20px; color: var(--ocre); flex: none; }
.itineraire ul { margin: 0 0 2rem; padding-left: 1.1rem; }
.itineraire li { margin-bottom: .5rem; }
.itineraire li::marker { color: var(--ocre); }

.reperes {
	background: var(--sable);
	border-left: 3px solid var(--ocre);
	border-radius: 0 var(--rayon) var(--rayon) 0;
	padding: 1.25rem 1.5rem;
	font-size: .9375rem;
}
.reperes p { margin-bottom: .5rem; }
.reperes p:last-child { margin-bottom: 0; }

/* --- Réserver -------------------------------------------------------------- */

.reserver { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.contact-direct { display: grid; gap: 1rem; margin-bottom: 2rem; }
.contact-direct a {
	display: flex; align-items: center; gap: 1rem;
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: var(--rayon-lg);
	padding: 1.1rem 1.35rem;
	color: var(--blanc); text-decoration: none;
	transition: background-color .18s, transform .18s;
}
.contact-direct a:hover { background: rgb(255 255 255 / 16%); transform: translateY(-2px); }
.contact-direct svg { width: 22px; height: 22px; flex: none; color: #d9b382; }
.contact-direct__label { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #c2d0c3; }
.contact-direct__valeur { font-size: 1.125rem; font-weight: 600; }

.encart-info {
	background: rgb(255 255 255 / 7%);
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: var(--rayon-lg);
	padding: clamp(1.5rem, 3vw, 2rem);
	/* Les infos pratiques restent sous les yeux pendant la lecture */
	position: sticky; top: 6rem;
}
.encart-info h3 { font-size: 1.125rem; }
.encart-info dl { margin: 0; display: grid; gap: .9rem; }
.encart-info dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #c2d0c3; }
.encart-info dd { margin: .15rem 0 0; font-size: .9375rem; }

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

.pied {
	background: var(--sable);
	border-top: 1px solid var(--sable-bord);
	padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}
.pied__grille {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1.2fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: 3rem;
}
.pied__marque { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--granit-fonce); margin: 0 0 .5rem; }
.pied h3 {
	font-family: var(--sans); font-size: .8125rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--granit-clair); margin-bottom: 1.1rem;
}
.pied address { font-style: normal; font-size: .9375rem; line-height: 1.9; }
/* Ces liens étaient de la même couleur que le texte et sans soulignement :
   rien ne les identifiait comme liens hors survol (WCAG 1.4.1). */
.pied address a {
	color: var(--ocre-texte);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pied address a:hover { color: var(--granit-fonce); }
.pied__liens { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.pied__liens li { margin-bottom: .2rem; }
/* inline-block + padding : porte la cible à 28px de haut (WCAG 2.5.8) */
.pied__liens a {
	display: inline-block;
	padding-block: .3rem;
	color: var(--granit); text-decoration: none;
}
.pied__liens a:hover { color: var(--ocre-texte); text-decoration: underline; }

.horaires {
	background: var(--creme);
	border: 1px solid var(--sable-bord);
	border-radius: var(--rayon-lg);
	padding: 1.5rem;
}
.horaires__etat {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .8125rem; font-weight: 600; color: var(--vert);
	margin-bottom: .85rem;
}
.horaires__etat::before {
	content: ''; width: 8px; height: 8px;
	background: var(--vert); border-radius: 50%;
}
/* :not() pour ne pas écraser la taille de .horaires__etat, qui est un <p> */
.horaires p:not(.horaires__etat) { font-size: .9375rem; margin-bottom: .5rem; }
.horaires p:last-child { margin-bottom: 0; }

.pied__bas {
	border-top: 1px solid var(--sable-bord);
	padding-block: 1.5rem;
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
	justify-content: space-between;
	font-size: .8125rem; color: var(--granit-clair);
}
.pied__bas p { margin: 0; }
.pied__bas a { color: var(--granit-clair); }

/* --- Page intérieure (mentions légales, 404) -------------------------------- */

.page-simple { padding-block: 9rem var(--section-y); max-width: 46rem; }
.page-simple h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: 2.5rem; }
.page-simple h2:first-of-type { margin-top: 1.5rem; }

body.page-interieure .entete {
	background: var(--creme);
	border-bottom-color: var(--sable-bord);
}
body.page-interieure .marque,
body.page-interieure .nav__liste a { color: var(--granit-fonce); }
body.page-interieure .bascule-menu span { background: var(--granit-fonce); }

/* Chiffre décoratif de la 404. Il reste un filigrane, mais pas au point d'être
   illisible : aria-hidden le retire des lecteurs d'écran, il n'enlève rien à
   qui le voit mal. À cette taille (> 24 px) le seuil AA tombe à 3:1, d'où ce
   sable foncé qui tient 3,5:1 sur le crème sans écraser le titre. */
.chiffre-404 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(4.5rem, 15vw, 9rem);
	line-height: .85;
	color: var(--sable-bord);
	margin: 0 0 .75rem;
	letter-spacing: -.02em;
	user-select: none;
}

/* --- Easter egg : la vache traverse ---------------------------------------- */

.pature {
	position: fixed;
	inset: auto 0 0 0;
	height: 190px;
	overflow: hidden;   /* la vache sort du cadre sans créer de scroll latéral */
	pointer-events: none;
	z-index: 20;
}
.pature:not(.est-visible) { display: none; }

.vache {
	position: absolute;
	bottom: 1.5rem;
	left: 0;
	width: 132px;
	height: auto;
	/* 26 s pour traverser : c'est le propos. */
	animation: traverse 26s linear forwards;
}
@keyframes traverse {
	from { transform: translateX(-160px); }
	to   { transform: translateX(calc(100vw + 160px)); }
}

.pature__mot {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: .5rem .9rem;
	border-radius: 999px;
	background: var(--vert-fonce);
	color: #fff;
	font: 600 .8125rem/1.4 var(--sans);
	white-space: nowrap;
	opacity: 0;
	animation: mot-vache 26s ease-in-out forwards;
}
@keyframes mot-vache {
	0%, 32%  { opacity: 0; }
	42%, 62% { opacity: 1; }
	72%,100% { opacity: 0; }
}

@media (max-width: 620px) {
	.vache { width: 96px; }
	.pature__mot { font-size: .75rem; white-space: normal; max-width: 15rem; text-align: center; }
}

/* Liens de secours de la 404 : on réutilise .liste-coches (le picto y est un
   marqueur en position absolue) en remplaçant seulement ce qui doit l'être. */
.liens-secours { margin-top: 2rem; }
.liens-secours li { margin-bottom: .85rem; }
.liens-secours a {
	color: var(--ocre-texte);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.liens-secours a:hover { color: var(--vert-fonce); }

.secours-tel {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sable-bord);
	color: var(--granit-clair);
	font-size: .9375rem;
}
.secours-tel a { color: var(--ocre-texte); font-weight: 600; }

/* --- Apparition au défilement ---------------------------------------------- */

.apparait { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.apparait.est-visible { opacity: 1; transform: none; }

/* Voile de la navigation mobile : inactif tant qu'on n'est pas en petit écran */
.voile { display: none; }

/* --- Adaptatif ------------------------------------------------------------- */

@media (max-width: 1000px) {
	.acces, .reserver { grid-template-columns: 1fr; }
	.galerie { columns: 3; }
	.chiffres { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
}

@media (max-width: 860px) {
	.bascule-menu { display: flex; }

	.nav {
		position: fixed; inset: 0 0 0 auto;
		width: min(85vw, 340px);
		background: var(--creme);
		border-left: 1px solid var(--sable-bord);
		padding: 6rem 1.75rem 2rem;
		transform: translateX(100%);
		transition: transform .3s ease;
		overflow-y: auto;
		box-shadow: -20px 0 50px -20px rgb(46 44 41 / 35%);
	}
	.nav.est-ouverte { transform: none; }
	.nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__liste a,
	.entete.est-collee .nav__liste a,
	body.page-interieure .nav__liste a {
		color: var(--granit-fonce);
		padding: .9rem .5rem;
		font-size: 1.0625rem;
		border-bottom: 1px solid var(--sable-bord);
		border-radius: 0;
	}
	/* :not(.sr-only) impératif : sans lui, on masquerait aussi le nom
	   accessible et le bouton d'appel deviendrait une icône anonyme. */
	.entete__tel span:not(.sr-only) { display: none; }
	.entete__tel { padding: .6rem; width: 44px; justify-content: center; }
	.entete__interieur { gap: .75rem; }

	.voile {
		display: block;
		position: fixed; inset: 0; z-index: 99;
		background: rgb(30 28 25 / 45%);
		opacity: 0; pointer-events: none;
		transition: opacity .3s;
	}
	.voile.est-visible { opacity: 1; pointer-events: auto; }

	.accroche__grille, .duo, .choix { grid-template-columns: 1fr; }
	.duo--inverse .duo__media { order: 0; }
	/* En colonne unique, le sticky n'a plus de sens */
	.duo__media, .acces__carte, .encart-info { position: static; }

	/* Le texte occupe toute la largeur : un dégradé latéral laisserait la fin
	   des lignes sur la zone claire. On repasse en voile vertical. */
	.heros__media::after {
		background: linear-gradient(180deg,
			rgb(28 26 23 / 62%) 0%,
			rgb(28 26 23 / 58%) 35%,
			rgb(28 26 23 / 82%) 100%);
	}
	.region-plus { columns: 1; }
	.pied__grille { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.galerie { columns: 2; column-gap: .5rem; }
	/* Vignettes ~150 px de large : le badge doit tenir sans passer à la ligne. */
	.galerie__badge { left: .375rem; bottom: .375rem; padding: .2rem .45rem; font-size: .625rem; }
	.filtre { gap: .375rem; }
	.filtre__btn { padding: .4rem .75rem; font-size: .8125rem; }
	.galerie__element { margin-bottom: .5rem; }
	.chiffres { grid-template-columns: 1fr; }
	.heros { min-height: 88svh; }
	.groupe-boutons .bouton { flex: 1 1 100%; }
	.lightbox__btn--prec { left: .5rem; }
	.lightbox__btn--suiv { right: .5rem; }
	.carte-geo iframe { height: 320px; }
}

/* --- Mouvement réduit ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.apparait { opacity: 1; transform: none; }
	.bouton:hover, .carte-choix:hover, .contact-direct a:hover { transform: none; }
	/* La vache ne traverse pas : elle se pose. Sans cela la règle générique
	   ci-dessus la ferait filer en .001 ms et le mot ne s'afficherait jamais.
	   Le sélecteur de classe l'emporte sur le « * » malgré les !important. */
	.vache { left: 50%; transform: translateX(-50%); animation: none !important; }
	.pature__mot { bottom: 8.5rem; opacity: 1; animation: none !important; }
	.galerie__element:hover img { transform: none; }
}

/* --- Impression ------------------------------------------------------------ */

@media print {
	.entete, .heros__defiler, .galerie, .filtre, .lightbox, .voile, .bouton { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.section { padding-block: 1rem; }
	.section--vert { background: #fff; color: #000; }
	.section--vert h2, .section--vert h3 { color: #000; }
}