/*
Theme Name: Aurore Home
Theme URI: https://aurorehome.fr
Author: Florian Delage — enovSEO
Author URI: https://enovseo.fr
Description: Thème sur-mesure pour Aurore Home, locations saisonnières à Antibes et Juan-les-Pins. Codé à la main, sans constructeur de page ni framework CSS.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: Propriétaire
Text Domain: aurore-home
Tags: custom-theme, seo, bilingue
*/

/* ==========================================================================
   1. Polices — auto-hébergées, extraites de la maquette validée.
      Fichiers variables : une seule ressource couvre les graisses 300 à 500.
   ========================================================================== */

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-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: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-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: 'Jost';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('assets/fonts/jost-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: 'Jost';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('assets/fonts/jost-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;
}

/* ==========================================================================
   2. Jetons de design — relevés sur la maquette validée par la cliente.
   ========================================================================== */

:root {
	/* Couleurs */
	--ah-ink: #16181a;        /* Texte principal, fond du pied de page */
	--ah-sea: #2f4f4a;        /* Vert profond — toutes les actions */
	--ah-brass: #a8834e;      /* Laiton — chiffres clés, accents rares */
	--ah-sand: #f2ede4;       /* Sable — fonds de blocs */
	--ah-page: #faf8f4;       /* Fond de page */
	--ah-mute: #7a766c;       /* Texte secondaire */
	--ah-line: #e6e0d5;       /* Filets et bordures */
	--ah-white: #fff;

	/* Typographies */
	--ah-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--ah-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Rythme horizontal — 110px sur la maquette large, réduit en mobile */
	--ah-gutter: 24px;
	--ah-maxw: 1440px;

	/* Rayons et ombres */
	--ah-radius: 6px;
	--ah-radius-lg: 8px;
	--ah-shadow: 0 20px 50px rgba(22, 24, 26, .16);
	--ah-shadow-soft: 0 12px 30px rgba(22, 24, 26, .07);

	/* Hauteur d'en-tête, utilisée pour compenser le header fixe */
	--ah-header-h: 84px;
}

@media (min-width: 768px) {
	:root {
		--ah-gutter: 48px;
	}
}

@media (min-width: 1200px) {
	:root {
		--ah-gutter: 110px;
		--ah-header-h: 112px;
	}
}

/* ==========================================================================
   3. Reset — volontairement minimal.
   ========================================================================== */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

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

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

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

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

button {
	background: none;
	border: 0;
	cursor: pointer;
}

/* ==========================================================================
   4. Base
   ========================================================================== */

body {
	background: var(--ah-page);
	color: var(--ah-ink);
	font-family: var(--ah-sans);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

a {
	color: var(--ah-sea);
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
}

a:hover {
	color: var(--ah-ink);
}

/* Anneau de focus visible au clavier — accessibilité, jamais supprimé. */
:focus-visible {
	outline: 2px solid var(--ah-sea);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ==========================================================================
   5. Échelle typographique
      Titres fluides : pas de palier brutal entre mobile et grand écran.
   ========================================================================== */

.ah-h1,
.ah-h2,
.ah-h3 {
	font-family: var(--ah-serif);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -.015em;
	text-wrap: pretty;
}

.ah-h1 {
	font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
}

.ah-h2 {
	font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.5rem);
}

.ah-h3 {
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.625rem);
	line-height: 1.15;
	font-weight: 400;
}

/* Intitulé en capitales espacées — la signature graphique du site. */
.ah-label {
	font-family: var(--ah-sans);
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #a8a297;
}

.ah-lede {
	color: var(--ah-mute);
	text-wrap: pretty;
}

.ah-filet {
	height: 1px;
	background: rgba(0, 0, 0, .1);
	border: 0;
	margin: 28px 0;
}

/* ==========================================================================
   6. Boutons
   ========================================================================== */

.ah-btn {
	display: inline-block;
	padding: 17px 34px;
	border: 0;
	border-radius: var(--ah-radius);
	background: var(--ah-sea);
	color: var(--ah-white);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.ah-btn:hover {
	background: var(--ah-ink);
	color: var(--ah-white);
}

.ah-btn--ghost {
	background: transparent;
	border: 1px solid var(--ah-ink);
	color: var(--ah-ink);
}

.ah-btn--ghost:hover {
	background: var(--ah-ink);
	color: var(--ah-white);
}

/* Lien souligné en capitales — « Découvrir », « Lire ». */
.ah-more {
	display: inline-block;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--ah-sea);
	color: var(--ah-sea);
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
}

/* ==========================================================================
   7. Structure
   ========================================================================== */

.ah-wrap {
	width: 100%;
	max-width: var(--ah-maxw);
	margin-inline: auto;
	padding-inline: var(--ah-gutter);
}

.ah-section {
	padding-block: clamp(56px, 8vw, 96px);
}

/* Saut vers le contenu — visible seulement au clavier. */
.ah-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 14px 22px;
	background: var(--ah-ink);
	color: var(--ah-white);
	text-decoration: none;
}

.ah-skip:focus {
	left: var(--ah-gutter);
	top: 12px;
	color: var(--ah-white);
}

/* Masqué à l'écran, lu par les lecteurs d'écran. */
.ah-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   8. Apparition au défilement
      Règle de sécurité : l'état masqué n'est appliqué QUE si la classe « js »
      est présente sur <html>. Sans JavaScript, ou si le script échoue, le
      contenu reste visible — jamais de page blanche.
   ========================================================================== */

.js .ah-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease, transform .7s ease;
	will-change: opacity, transform;
}

.js .ah-reveal.is-in {
	opacity: 1;
	transform: none;
}

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

	.js .ah-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

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

/* ==========================================================================
   9. En-tête et navigation
   ========================================================================== */

.ah-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ah-page);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	transition: background-color .3s ease, border-color .3s ease;
}

/* Page d'accueil : posé sur la photo, sans fond, jusqu'au premier défilement. */
.ah-header--over {
	position: absolute;
	inset: 0 0 auto;
	background: linear-gradient(rgba(0, 0, 0, .42), transparent);
	border-bottom-color: transparent;
	color: var(--ah-white);
}

.ah-header--over.is-scrolled {
	position: fixed;
	background: var(--ah-page);
	border-bottom-color: rgba(0, 0, 0, .08);
	color: var(--ah-ink);
}

.ah-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--ah-maxw);
	margin-inline: auto;
	padding: 22px var(--ah-gutter);
}

@media (min-width: 1200px) {
	.ah-header__inner {
		padding-block: 30px;
	}
}

.ah-brand__text {
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: currentColor;
	text-decoration: none;
}

.ah-header .custom-logo-link {
	display: block;
}

.ah-header .custom-logo {
	width: auto;
	height: 54px;
}

/* --- Bouton du menu mobile --- */

.ah-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 34px;
	height: 34px;
	padding: 0;
	color: currentColor;
}

.ah-burger__bar {
	display: block;
	height: 1px;
	background: currentColor;
	transition: transform .3s ease, opacity .3s ease;
}

.ah-burger[aria-expanded="true"] .ah-burger__bar:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.ah-burger[aria-expanded="true"] .ah-burger__bar:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* --- Navigation --- */

.ah-nav {
	position: fixed;
	inset: 0;
	z-index: 55;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: var(--ah-gutter);
	background: var(--ah-page);
	color: var(--ah-ink);
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s ease, visibility .3s ease;
}

.ah-nav.is-open {
	visibility: visible;
	opacity: 1;
}

.ah-nav__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ah-nav__list a {
	font-family: var(--ah-serif);
	font-size: 30px;
	font-weight: 300;
	color: var(--ah-ink);
	text-decoration: none;
}

.ah-nav__aside {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* --- Le choix de la langue dans le menu du téléphone ---------------------

   Deux problèmes réglés ici.

   Le premier était un vrai bug : sur l'accueil, tant que la page n'est pas
   défilée, l'en-tête est posé sur la photo et le sélecteur passe en blanc.
   Le menu du téléphone, lui, s'ouvre sur un fond crème — le choix de la
   langue devenait donc invisible, blanc sur crème, exactement là où un
   visiteur étranger le cherche.

   Le second est une question de confort : trois codes de langue collés à
   11 px se ratent au doigt. Dans le menu ouvert ils deviennent trois
   pastilles espacées, avec la langue en cours marquée.
   ---------------------------------------------------------------------- */
.ah-nav.is-open .ah-nav__aside {
	flex-direction: column;
	gap: 28px;
}

.ah-nav.is-open .ah-lang,
.ah-header--over:not(.is-scrolled) .ah-nav.is-open .ah-lang {
	gap: 10px;
	color: var(--ah-mute);
}

.ah-nav.is-open .ah-lang__link,
.ah-nav.is-open .ah-lang__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	min-height: 38px;
	padding: 0 6px;
	border: 1px solid var(--ah-line, rgba(16, 20, 18, .16));
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: .1em;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ah-nav.is-open .ah-lang__current {
	background: var(--ah-ink);
	border-color: var(--ah-ink);
	color: var(--ah-white);
}

.ah-nav.is-open .ah-lang__link:hover,
.ah-nav.is-open .ah-lang__link:focus-visible {
	border-color: var(--ah-ink);
	color: var(--ah-ink);
	text-decoration: none;
}

/* Le séparateur « / » n'a plus de sens entre des pastilles. */
.ah-nav.is-open .ah-lang__sep {
	display: none;
}

.ah-nav__cta {
	padding: 11px 20px;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: currentColor;
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease, color .25s ease;
}

.ah-nav__cta:hover {
	background: var(--ah-ink);
	border-color: var(--ah-ink);
	color: var(--ah-white);
}

.ah-header--over:not(.is-scrolled) .ah-nav__cta:hover {
	background: var(--ah-white);
	border-color: var(--ah-white);
	color: var(--ah-ink);
}

body.ah-no-scroll {
	overflow: hidden;
}

@media (min-width: 1024px) {
	.ah-burger {
		display: none;
	}

	.ah-nav {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 36px;
		padding: 0;
		background: none;
		color: inherit;
		visibility: visible;
		opacity: 1;
	}

	.ah-nav__list {
		flex-direction: row;
		gap: 36px;
	}

	.ah-nav__list a {
		font-family: var(--ah-sans);
		font-size: 12.5px;
		font-weight: 400;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #4c4a44;
	}

	.ah-header--over:not(.is-scrolled) .ah-nav__list a {
		color: rgba(255, 255, 255, .88);
	}

	.ah-nav__list a:hover {
		color: currentColor;
	}
}

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

/* Les codes de langue étaient posés à 11 px avec un interlettrage de
   .12em. Dans le Jost, un T à cette taille et si espacé se lit comme un
   L : « IT » passait pour « IL ». Deux pixels de plus et un tiers de
   l'espacement en moins, et chaque code redevient lisible du premier
   coup d'œil — c'est le seul endroit du site où trois lettres décident
   si un visiteur étranger reste ou part. */
.ah-lang {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	letter-spacing: .05em;
	color: var(--ah-mute);
}

.ah-lang__current,
.ah-lang__link {
	font-variant-numeric: tabular-nums;
}

.ah-header--over:not(.is-scrolled) .ah-lang {
	color: rgba(255, 255, 255, .65);
}

.ah-lang__link {
	color: inherit;
	text-decoration: none;
}

.ah-lang__link:hover {
	color: currentColor;
	text-decoration: underline;
}

/* Langue pas encore publiée sur cet aperçu (export-statique.py neutralise
   le lien). Sans ce style, le clic ne fait strictement rien — Aurore l'a
   pris pour un bug plutôt que pour un « bientôt ». Le curseur et l'opacité
   signalent l'état avant même le clic ; l'info-bulle confirme au clic. */
.ah-lang__link[data-ah-bientot] {
	position: relative;
	opacity: .45;
	cursor: default;
	text-decoration: none;
}

.ah-lang__link[data-ah-bientot]:hover {
	color: inherit;
	text-decoration: none;
}

.ah-lang__bientot {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	padding: 6px 10px;
	border-radius: var(--ah-radius);
	background: var(--ah-ink);
	color: var(--ah-white);
	font-size: 10px;
	letter-spacing: .06em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.ah-lang__link[data-ah-bientot].est-touche .ah-lang__bientot {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.ah-lang__current {
	color: currentColor;
}

.ah-lang__sep {
	opacity: .5;
}

/* ==========================================================================
   10. Contenu courant
   ========================================================================== */

.ah-main {
	display: block;
	min-height: 40vh;
}

.ah-page-head {
	padding-block: clamp(40px, 7vw, 72px) 0;
}

.ah-prose {
	max-width: 780px;
	padding-block: 32px clamp(56px, 8vw, 96px);
	color: #4c4a44;
}

.ah-prose > * + * {
	margin-top: 1.4em;
}

.ah-prose h2 {
	font-family: var(--ah-serif);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
	font-weight: 300;
	line-height: 1.15;
	color: var(--ah-ink);
	margin-top: 2em;
}

.ah-prose h3 {
	font-family: var(--ah-sans);
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--ah-ink);
	margin-top: 1.8em;
}

.ah-prose img {
	border-radius: var(--ah-radius);
}

.ah-list__item + .ah-list__item {
	margin-top: 44px;
}

.ah-404 {
	max-width: 640px;
}

.ah-404 .ah-lede {
	margin-block: 18px 32px;
}

/* ==========================================================================
   11. Pied de page
   ========================================================================== */

/* Taupe plutôt que noir, demandé par Aurore le 12/08/2026.
   La variable --ah-ink n'est pas touchée : elle sert aussi au texte de tout
   le site, la changer aurait repeint chaque paragraphe. Le pied de page a
   donc sa propre couleur.
   #6b6156 : contraste de 6,3:1 avec le texte crème — au-dessus du seuil
   d'accessibilité, ce qu'un beige plus clair n'aurait pas tenu. */
.ah-footer {
	background: #c0b6a6;
	color: var(--ah-ink);
	padding-block: clamp(32px, 4.5vw, 44px) 30px;
}

.ah-footer a {
	color: rgba(22, 24, 26, .84);
	text-decoration: none;
}

.ah-footer a:hover {
	color: var(--ah-ink);
	text-decoration: underline;
}

.ah-footer .ah-label {
	color: rgba(22, 24, 26, .72);
}

.ah-footer__grid {
	display: grid;
	gap: 26px;
}

@media (min-width: 768px) {
	.ah-footer__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
		gap: 36px;
	}
}

.ah-footer__name {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .34em;
	text-transform: uppercase;
}

.ah-footer__baseline {
	max-width: 300px;
	margin-top: 12px;
	font-size: 12.5px;
	color: rgba(22, 24, 26, .74);
}

.ah-footer__list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.ah-footer__list li {
	padding-block: 4px;
	font-size: 13px;
}

.ah-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 26px;
	padding-top: 16px;
	border-top: 1px solid rgba(22, 24, 26, .18);
	font-size: 11.5px;
	color: rgba(22, 24, 26, .74);
}

.ah-footer__bar .ah-lang {
	color: rgba(22, 24, 26, .74);
}

/* ==========================================================================
   12. Page d'accueil — bandeau
   ========================================================================== */

/*
 * Les trois calques — photo, voile, texte — occupent la même cellule de
 * grille. L'alignement se règle sur le texte seul : mettre « align-items: end »
 * sur le conteneur réduirait le voile à une hauteur nulle.
 */
.ah-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	min-height: min(88vh, 760px);
	background: #d8d3c8;
	overflow: hidden;
}

.ah-hero__image,
.ah-hero > img,
.ah-hero > picture {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}

.ah-hero__image,
.ah-hero > img,
.ah-hero > picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Double voile. Le dégradé du bas garantit la lisibilité du titre quelle que
 * soit la photo choisie par la cliente — une mer en plein soleil derrière du
 * texte blanc, c'est illisible sans cette précaution. Le voile du haut
 * détache la navigation.
 */
.ah-hero__voile {
	grid-area: 1 / 1;
	background:
		linear-gradient(to top, rgba(14, 18, 16, .82) 0%, rgba(14, 18, 16, .55) 28%, rgba(14, 18, 16, .12) 62%, transparent 100%),
		linear-gradient(to bottom, rgba(14, 18, 16, .38), transparent 22%);
}

.ah-hero__texte {
	grid-area: 1 / 1;
	align-self: end;
	width: 100%;
	max-width: var(--ah-maxw);
	margin-inline: auto;
	padding: 0 var(--ah-gutter) clamp(84px, 12vw, 150px);
	color: var(--ah-white);
}

.ah-label--clair {
	color: rgba(255, 255, 255, .8);
}

.ah-hero__titre {
	max-width: 12em;
	margin-top: 20px;
	color: var(--ah-white);
}

.ah-hero__accroche {
	max-width: 34em;
	margin-top: 18px;
	color: rgba(255, 255, 255, .85);
	text-wrap: pretty;
}

/* ==========================================================================
   13. Barre de recherche
   ========================================================================== */

.ah-recherche {
	position: relative;
	z-index: 5;
	display: grid;
	gap: 1px;
	margin-top: -28px;
	background: var(--ah-line);
	border-radius: var(--ah-radius-lg);
	box-shadow: var(--ah-shadow);
	overflow: hidden;
}

@media (min-width: 900px) {
	.ah-recherche {
		grid-template-columns: repeat(4, 1fr) auto;
		align-items: stretch;
		margin-top: -56px;
	}
}

.ah-recherche__champ {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 14px 20px;
	background: var(--ah-white);
}

.ah-recherche__champ input,
.ah-recherche__champ select {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ah-ink);
	font-family: var(--ah-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	appearance: none;
}

.ah-recherche__champ select {
	cursor: pointer;
}

.ah-recherche__bouton {
	padding: 20px 44px;
	background: var(--ah-sea);
	color: var(--ah-white);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: background-color .25s ease;
}

.ah-recherche__bouton:hover {
	background: var(--ah-ink);
}

/* ==========================================================================
   14. En-têtes de section et cartes
   ========================================================================== */

.ah-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
}

.ah-entete .ah-h2 {
	margin-top: 16px;
}

.ah-entete__note {
	max-width: 34ch;
}

.ah-cartes {
	display: grid;
	gap: 34px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.ah-cartes {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ah-carte__lien {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ah-carte__photo {
	overflow: hidden;
	border-radius: var(--ah-radius);
	background: #d8d3c8;
	aspect-ratio: 4 / 3;
}

.ah-carte__photo--basse {
	aspect-ratio: 16 / 11;
}

.ah-carte__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}

.ah-carte__lien:hover .ah-carte__photo img {
	transform: scale(1.04);
}

.ah-carte__titre {
	margin-top: 18px;
	font-family: var(--ah-serif);
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.625rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--ah-ink);
}

.ah-carte__details {
	margin-top: 8px;
	color: var(--ah-mute);
	font-size: 13px;
	line-height: 1.7;
}

.ah-carte .ah-more {
	margin-top: 16px;
}

/* ==========================================================================
   15. Argument « sans commission »
   ========================================================================== */

.ah-argument {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: clamp(56px, 8vw, 96px);
}

@media (min-width: 900px) {
	.ah-argument {
		grid-template-columns: 1fr 1fr;
	}
}

.ah-argument__photo {
	background: #d8d3c8;
	min-height: 260px;
}

.ah-argument__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ah-argument__texte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: clamp(44px, 7vw, 80px) clamp(28px, 6vw, 90px);
	background: var(--ah-sand);
}

.ah-argument__texte .ah-lede {
	max-width: 42ch;
}

.ah-chiffres {
	display: flex;
	gap: 48px;
	margin: 14px 0 0;
}

.ah-chiffres__valeur {
	font-family: var(--ah-serif);
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
	color: var(--ah-brass);
}

.ah-chiffres__note {
	margin: 8px 0 0;
	color: var(--ah-mute);
	font-size: 12px;
	line-height: 1.6;
}

/* ==========================================================================
   16. Fiche logement
   ========================================================================== */

.ah-logement .ah-galerie {
	display: grid;
	gap: 14px;   /* Repris du site de Laurine : les photos respirent au lieu
	                de former un bloc. */
	grid-template-columns: 1fr;
	margin-top: clamp(24px, 4vw, 40px);
}

/* Le bandeau avait une hauteur fixe de 460 px pour une grande case large de
   ~820 px : du 16/9 pour des photos en 4/3. « object-fit: cover » rognait
   donc un quart de l'image en haut et en bas, et tout paraissait zoomé —
   une chaise coupée, un plafond absent, un lit qui déborde.

   On ne fixe plus la hauteur : ce sont les proportions des photos qui la
   donnent. Les trois cases tombent alors d'elles-mêmes en 4/3, et l'image
   est cadrée comme elle a été prise. */
@media (min-width: 800px) {
	.ah-logement .ah-galerie {
		grid-template-columns: 2fr 1fr;
	}

	.ah-galerie__vignette:first-child {
		grid-row: span 2;
	}
}

.ah-galerie__vignette {
	position: relative;
	display: block;
	padding: 0;
	overflow: hidden;
	background: #d8d3c8;
	border-radius: var(--ah-radius);
	aspect-ratio: 4 / 3;
}

@media (min-width: 800px) {
	/* Chaque photo garde ses quatre coins arrondis : séparées par un vrai
	   écart, elles se lisent comme trois images et non comme un bloc découpé.
	   Le 4/3 est conservé — c'est lui qui règle la hauteur du bandeau. */
}

.ah-galerie__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s ease, filter .4s;
}

.ah-galerie__vignette:hover img {
	transform: scale(1.03);
	filter: brightness(.92);
}

.ah-galerie__compteur {
	position: absolute;
	right: 16px;
	bottom: 16px;
	padding: 10px 16px;
	background: rgba(255, 255, 255, .94);
	border-radius: 4px;
	color: var(--ah-ink);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* --- Corps de la fiche --- */

.ah-logement__corps {
	display: grid;
	gap: clamp(40px, 6vw, 80px);
	grid-template-columns: 1fr;
	padding-block: clamp(40px, 6vw, 56px) clamp(56px, 8vw, 100px);
}

@media (min-width: 1000px) {
	.ah-logement__corps {
		grid-template-columns: minmax(0, 1fr) 380px;
	}
}

.ah-logement__titre {
	margin-top: 16px;
}

.ah-logement__corps .ah-lede {
	margin-top: 12px;
}

.ah-logement__accroche {
	margin-top: 18px;
	font-family: var(--ah-serif);
	font-size: clamp(1.2rem, 1rem + .9vw, 1.5rem);
	line-height: 1.45;
	color: var(--ah-ink);
	text-wrap: pretty;
}

.ah-prose--nu {
	max-width: 62ch;
	padding: 0;
}

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

.ah-equip {
	display: grid;
	gap: 14px 30px;
	grid-template-columns: 1fr;
	max-width: 540px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.ah-equip {
		grid-template-columns: 1fr 1fr;
	}
}

.ah-equip__item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #4c4a44;
	font-size: 14px;
	line-height: 1.4;
}

.ah-equip__icone {
	flex: none;
	color: var(--ah-brass);
}

/* Conditions et règles
   ------------------------------------------------------------------
   Une liste de définitions : le libellé et sa valeur restent liés même
   si la mise en page change. Deux colonnes dès qu'il y a la place, une
   seule sur téléphone — jamais un tableau, qui déborderait. */

.ah-conditions {
	max-width: 540px;
	margin: 20px 0 0;
}

.ah-conditions__ligne {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px 24px;
	padding: 11px 0;
	border-top: 1px solid var(--ah-line);
}

.ah-conditions__ligne:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 560px) {
	.ah-conditions__ligne {
		grid-template-columns: 150px 1fr;
		align-items: baseline;
	}
}

.ah-conditions__libelle {
	color: var(--ah-mute);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ah-conditions__valeur {
	margin: 0;
	color: #4c4a44;
	font-size: 14px;
	line-height: 1.5;
}

.ah-declaration {
	color: var(--ah-mute);
	font-size: 12.5px;
}

.ah-declaration span {
	color: var(--ah-ink);
	font-variant-numeric: tabular-nums;
}

/* --- Bloc de réservation --- */

.ah-reservation__bloc {
	position: sticky;
	top: calc(var(--ah-header-h) + 16px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--ah-radius-lg);
	box-shadow: var(--ah-shadow-soft);
}

.ah-reservation__rappel {
	padding: 12px 16px;
	background: var(--ah-sand);
	border-radius: var(--ah-radius);
	color: #4c4a44;
	font-size: 13px;
	line-height: 1.6;
}

.ah-reservation__attente {
	color: var(--ah-mute);
	font-size: 13.5px;
	line-height: 1.7;
}

.ah-reservation__bouton {
	display: block;
}

.ah-reservation__note {
	color: var(--ah-mute);
	font-size: 11.5px;
	line-height: 1.7;
	text-align: center;
}

.ah-reservation__telephone {
	padding: 12px;
	border-radius: var(--ah-radius);
	background: var(--ah-sand);
	font-size: 12.5px;
	line-height: 1.5;
	text-align: center;
}

.ah-reservation__telephone a {
	display: block;
	margin-top: 2px;
	font-family: var(--ah-serif);
	font-size: 17px;
	font-weight: 500;
	color: var(--ah-ink);
	text-decoration: none;
}

.ah-reservation__telephone a:hover {
	color: var(--ah-sea);
}

/* --- Visionneuse --- */

.ah-visionneuse {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	padding: 0;
	border: 0;
	background: var(--ah-ink);
	color: var(--ah-white);
	overflow: hidden;
}

.ah-visionneuse::backdrop {
	background: rgba(16, 20, 18, .96);
}

/* Rien de ce qui se passe dans la visionneuse ne doit atteindre la page :
   sans cela, un geste de zoom faisait défiler la fiche par-dessous. */
.ah-visionneuse,
.ah-visionneuse__scene {
	overscroll-behavior: contain;
}

.ah-visionneuse__scene {
	display: flex;
	align-items: center;
	height: 100%;
}

/* La piste défile horizontalement et se cale sur chaque photo. Le calage est
   fait par le navigateur : le geste reste fluide même sur un vieux téléphone,
   et rien ne dépend du JavaScript. */
.ah-visionneuse__piste {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* « contain » sur les deux axes, pas seulement l'horizontal : au
	   pincement pour zoomer, le doigt entraînait aussi la page sous la
	   visionneuse, et l'écran basculait de gauche à droite. */
	overscroll-behavior: contain;
	/* On annonce ce que le doigt peut faire : glisser à l'horizontale et
	   pincer pour zoomer. Sans cette ligne le navigateur autorise aussi le
	   balayage vertical, qui déplaçait la vue en diagonale. */
	touch-action: pan-x pinch-zoom;
}

.ah-visionneuse__piste::-webkit-scrollbar {
	display: none;
}

.ah-visionneuse__piste:focus-visible {
	outline: none;
}

/* Marges de la visionneuse : en haut la croix, en bas la légende. On les
   nomme pour pouvoir en déduire la hauteur maximale de l'image — c'est ce
   calcul qui empêche tout débordement. */
:root {
	--ah-vis-haut: clamp(64px, 9vh, 104px);
	--ah-vis-bas: clamp(72px, 11vh, 128px);
	--ah-vis-cote: clamp(16px, 6vw, 120px);
}

.ah-visionneuse__vue {
	flex: 0 0 100%;          /* Sans cela, les photos se partagent la largeur
	                            et s'écrasent — c'est le piège de flex. */
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: var(--ah-vis-haut) var(--ah-vis-cote) var(--ah-vis-bas);
	box-sizing: border-box;
}

/* Le <picture> doit s'effacer du calcul de taille.
   Une hauteur en pourcentage se mesure sur celle du parent ; celle du
   <picture> vaut « auto », donc « max-height: 100% » sur l'image ne
   contraignait rien et la photo débordait sous le bas de l'écran — elle
   paraissait zoomée et coupée. Avec « display: contents », l'image devient
   l'enfant direct de la grille, dont la hauteur est connue. */
.ah-visionneuse__vue picture {
	display: contents;
}

/* La hauteur maximale se calcule sur la fenêtre, jamais en pourcentage.
   Un « max-height: 100% » se mesure sur le parent ; celui-ci était une
   grille dont la ligne s'ajustait au contenu, donc de hauteur indéterminée —
   la limite ne s'appliquait à rien et la photo sortait sous l'écran. En
   partant de « 100dvh » moins les marges, la valeur est toujours connue. */
.ah-visionneuse__vue img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100dvh - var(--ah-vis-haut) - var(--ah-vis-bas));
	object-fit: contain;
	border-radius: var(--ah-radius-lg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
	animation: ah-apparait .5s ease both;
}

@keyframes ah-apparait {
	from { opacity: 0; transform: scale(.985); }
	to   { opacity: 1; transform: none; }
}

.ah-visionneuse__fleche {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	background: rgba(250, 248, 244, .1);
	border: 1px solid rgba(250, 248, 244, .3);
	border-radius: 50%;
	color: var(--ah-white);
	font-size: 26px;
	line-height: 1;
	backdrop-filter: blur(6px);
	transition: background-color .25s ease, border-color .25s ease;
}

.ah-visionneuse__fleche:hover {
	background: rgba(250, 248, 244, .22);
	border-color: rgba(250, 248, 244, .6);
}

.ah-visionneuse__fleche--avant { left: clamp(10px, 2vw, 26px); }
.ah-visionneuse__fleche--apres { right: clamp(10px, 2vw, 26px); }

/* --- Visionneuse sur téléphone et tablette -------------------------------
   Un carrousel horizontal impose « object-fit: contain » : sur un écran
   debout, une photo couchée est limitée par la largeur, ne fait plus que le
   tiers de la hauteur, et flotte au milieu d'un grand rectangle noir.

   On empile donc les photos et on les fait défiler verticalement, pleine
   largeur — c'est ce que font les sites de location, et c'est le geste
   naturel sur un téléphone. Le carrousel reste sur grand écran, où la photo
   a la place de s'afficher en entier. */

@media (max-width: 1023px) {
	/* Une photo à la fois, comme sur grand écran : on la fait défiler au
	   doigt. La pile verticale essayée d'abord donnait une liste à parcourir
	   plutôt qu'une visionneuse — on ne pouvait plus regarder une image,
	   seulement passer devant. */
	:root {
		--ah-vis-haut: 60px;
		--ah-vis-bas: 68px;
		--ah-vis-cote: 0px;   /* Bord à bord : une photo paysage sur un écran
		                         vertical est déjà petite, la marge la réduisait
		                         encore pour ne gagner que du noir. */
	}

	/* Bord à bord, donc plus de coins arrondis ni d'ombre : ils ne se
	   verraient que d'un côté. */
	.ah-visionneuse__vue img {
		border-radius: 0;
		box-shadow: none;
	}

	.ah-visionneuse__fleche { display: none; }   /* On fait défiler au doigt. */

	/* La croix reste accrochée à l'écran : posée en absolu, elle défilait
	   avec la première photo et devenait introuvable à la huitième. */
	.ah-visionneuse__fermer {
		position: fixed;
		top: max(14px, env(safe-area-inset-top));
		right: 14px;
	}

	/* Le rang revient : on est de nouveau dans un carrousel, et sans lui on
	   ne sait plus où l'on en est dans la série. */
}

.ah-visionneuse__rang {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	margin: 0;
	font-size: 12px;
	letter-spacing: .2em;
	color: rgba(250, 248, 244, .75);
	font-variant-numeric: tabular-nums;
}

.ah-visionneuse__fermer {
	position: absolute;
	top: 16px;
	right: 18px;
	z-index: 4;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	background: rgba(250, 248, 244, .1);
	border: 1px solid rgba(250, 248, 244, .3);
	border-radius: 50%;
	color: var(--ah-white);
	font-size: 24px;
	line-height: 1;
	backdrop-filter: blur(6px);
}

/* ==========================================================================
   17. Bandeau de page intérieure
   ========================================================================== */

.ah-banniere {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	min-height: clamp(280px, 38vw, 420px);
	background: #d8d3c8;
	overflow: hidden;
}

/* Deux écritures coexistent dans les gabarits : wp_get_attachment_image(),
   qui rend un <img>, et ah_image(), qui l'enveloppe dans un <picture> pour
   proposer le WebP. Une règle visant « > img » ne voyait pas la seconde :
   l'image sortait sans hauteur ni recadrage, et le bandeau prenait toute la
   hauteur de la photo. Les deux formes sont donc visées. */
.ah-banniere > img,
.ah-banniere > picture {
	/* Hors du flux, et non en case de grille : « height: 100 % » dans une
	   grille dont la hauteur dépend du contenu se résout en « auto », et la
	   photo imposait alors sa hauteur naturelle — 768 px de ciel. Détachée,
	   elle remplit la section, dont la hauteur reste dictée par le titre et
	   le min-height. */
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ah-banniere > img,
.ah-banniere > picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Le bandeau est trois fois plus large que haut : d'une photo au format
	   4/3 il ne garde qu'une bande. Centrée, cette bande tombe dans le ciel.
	   Descendue aux deux tiers, elle cadre l'horizon — la mer, le port, les
	   toits. Vrai pour toutes les photos de côte, donc réglé une fois ici. */
	object-position: center 70%;
}

.ah-banniere__voile {
	grid-area: 1 / 1;
	/* Positionnés tous les deux : sans cela la photo, détachée du flux,
	   passerait par-dessus le voile et le titre. */
	position: relative;
	z-index: 1;
	background: linear-gradient(to top, rgba(14, 18, 16, .78), rgba(14, 18, 16, .18) 70%);
}

.ah-banniere__texte {
	grid-area: 1 / 1;
	position: relative;
	z-index: 2;
	align-self: end;
	width: 100%;
	max-width: var(--ah-maxw);
	margin-inline: auto;
	padding: 0 var(--ah-gutter) clamp(36px, 5vw, 64px);
	color: var(--ah-white);
}

.ah-banniere__titre {
	margin-top: 18px;
	color: var(--ah-white);
}

/* ==========================================================================
   18. Guide de la région
   ========================================================================== */

.ah-guide__chapo {
	max-width: 52ch;
	margin-bottom: 48px;
}

/* Une seule colonne, et c'est volontaire. En deux colonnes, six réponses de
   longueurs très différentes — dont trois seulement illustrées — se
   décalaient en escalier : on ne savait plus quelle photo allait avec quel
   titre. Une colonne, une réponse, dans l'ordre où on se pose les
   questions. */
.ah-guide {
	display: flex;
	flex-direction: column;
	gap: clamp(56px, 8vw, 96px);
}

/* Réponse illustrée : deux colonnes, et le côté de la photo change à chaque
   fois. C'est ce balancement qui fait avancer la page — une colonne unique
   collée à gauche laissait la moitié droite vide. */
@media (min-width: 880px) {
	.ah-guide__entree--illustree {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(36px, 5vw, 72px);
		align-items: center;
	}

	.ah-guide__entree--illustree:nth-of-type(4n + 3) .ah-guide__photo {
		order: 2;
	}
}

/* Réponse sans photo : posée sur du sable, centrée, mesure resserrée. Elle
   se lit comme une note pratique — pas comme une image qui manque. */
.ah-guide__entree--note {
	max-width: 72ch;
	margin-inline: auto;
	padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 52px);
	border-radius: var(--ah-radius);
	background: var(--ah-sand);
}

/* Sommaire : la page est longue, et personne ne lit six réponses d'affilée.
   On voit d'un coup d'œil ce qu'elle contient, et on va droit à la sienne. */
.ah-guide__sommaire {
	margin-bottom: clamp(44px, 6vw, 64px);
	padding: 26px 30px;
	border-radius: var(--ah-radius);
	background: var(--ah-sand, #f4f1ea);
}

.ah-guide__sommaire ol {
	display: grid;
	gap: 10px 32px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: guide;
}

@media (min-width: 720px) {
	.ah-guide__sommaire ol {
		grid-template-columns: 1fr 1fr;
	}
}

.ah-guide__sommaire li {
	counter-increment: guide;
}

.ah-guide__sommaire a {
	color: var(--ah-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .25s;
}

.ah-guide__sommaire a::before {
	content: counter(guide) '.';
	margin-right: 8px;
	color: var(--ah-mute);
}

.ah-guide__sommaire a:hover,
.ah-guide__sommaire a:focus-visible {
	border-bottom-color: var(--ah-ink);
}

/* Le titre visé ne doit pas se coller sous l'en-tête fixe. */
.ah-guide__entree {
	scroll-margin-top: 96px;
}

.ah-guide__photo {
	overflow: hidden;
	border-radius: var(--ah-radius);
	background: #d8d3c8;
	aspect-ratio: 4 / 3;
	margin-bottom: 24px;
}

@media (min-width: 880px) {
	.ah-guide__entree--illustree .ah-guide__photo {
		margin-bottom: 0;
	}
}

.ah-guide__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ah-guide__titre {
	margin-top: 0;
	font-family: var(--ah-serif);
	font-size: clamp(1.3rem, 1.1rem + .9vw, 1.625rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--ah-ink);
	text-wrap: pretty;
}

.ah-guide__texte {
	margin-top: 10px;
	color: var(--ah-mute);
	text-wrap: pretty;
}

.ah-guide__texte p + p {
	margin-top: .8em;
}

/* ==========================================================================
   19. Contact
   ========================================================================== */

.ah-contact {
	display: grid;
	gap: clamp(40px, 6vw, 90px);
	grid-template-columns: 1fr;
	padding-block: clamp(48px, 8vw, 96px);
}

@media (min-width: 900px) {
	.ah-contact {
		grid-template-columns: 1fr 1fr;
	}
}

.ah-contact__titre {
	margin-top: 18px;
}

.ah-contact__chapo {
	max-width: 40ch;
	margin-top: 18px;
}

.ah-coordonnees {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 420px;
	margin: 36px 0 0;
}

.ah-coordonnees > div {
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.ah-coordonnees dd {
	margin: 10px 0 0;
	font-size: 18px;
	font-weight: 300;
	color: var(--ah-ink);
}

.ah-coordonnees a {
	color: inherit;
	text-decoration: none;
}

.ah-coordonnees a:hover {
	text-decoration: underline;
}

/* --- Formulaire --- */

.ah-formulaire {
	padding: clamp(24px, 4vw, 36px);
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--ah-radius-lg);
}

.ah-champ {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

.ah-champ input,
.ah-champ textarea {
	width: 100%;
	padding: 15px 18px;
	border: 1px solid var(--ah-line);
	border-radius: var(--ah-radius);
	background: var(--ah-white);
	color: #4c4a44;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
}

.ah-champ textarea {
	resize: vertical;
	min-height: 130px;
}

.ah-champ input:focus,
.ah-champ textarea:focus {
	border-color: var(--ah-sea);
	outline: none;
}

.ah-formulaire__envoyer {
	display: block;
	width: 100%;
	margin-top: 4px;
}

/* Piège à robots : retiré du flux sans « display:none », que certains
   robots savent détecter. */
.ah-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ah-retour {
	margin-bottom: 22px;
	padding: 14px 18px;
	border-radius: var(--ah-radius);
	font-size: 14px;
	line-height: 1.6;
}

.ah-retour--ok {
	background: var(--ah-sand);
	color: var(--ah-sea);
	border: 1px solid rgba(47, 79, 74, .25);
}

.ah-retour--erreur {
	background: #fdf3ef;
	color: #8a3d20;
	border: 1px solid rgba(138, 61, 32, .22);
}

/* ==========================================================================
   20. Questions fréquentes
   ========================================================================== */

.ah-faq {
	padding-top: 0;
}

.ah-faq__liste {
	max-width: 780px;
	margin-top: 32px;
	border-top: 1px solid var(--ah-line);
}

.ah-faq__item {
	border-bottom: 1px solid var(--ah-line);
}

.ah-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	font-size: 17px;
	font-weight: 400;
	color: var(--ah-ink);
	list-style: none;
}

.ah-faq__question::-webkit-details-marker {
	display: none;
}

.ah-faq__question::after {
	content: "+";
	flex: none;
	font-size: 20px;
	line-height: 1;
	color: var(--ah-brass);
	transition: transform .3s ease;
}

.ah-faq__item[open] .ah-faq__question::after {
	transform: rotate(45deg);
}

.ah-faq__reponse {
	padding-bottom: 22px;
	max-width: 62ch;
	color: var(--ah-mute);
}

/* --- Logo de l'en-tête ---------------------------------------------------
   Intégré en vectoriel : il hérite de la couleur du texte, donc blanc sur la
   photo d'accueil et encre une fois la page défilée. */

.ah-brand__lien {
	display: flex;
	align-items: center;
	color: currentColor;
	text-decoration: none;
}

.ah-logo--entete,
.ah-logo--entete-arc {
	display: block;
	width: auto;
	height: 46px;
	color: currentColor;
}

/* L'arc n'est lisible qu'à partir d'une soixantaine de pixels : sous cette
   hauteur, sur un téléphone, on sert la version sans arc. */
@media (max-width: 767px) {
	.ah-logo--entete-arc { height: 52px; }
}

@media (min-width: 1024px) {
	.ah-logo--entete { height: 58px; }
	.ah-logo--entete-arc { height: 74px; }
}


/* ==========================================================================
   Bandeau d'accueil — composition centrée

   Le logo occupe le centre du premier écran, posé sur la photo. Titre et
   accroche s'alignent dessous. L'ensemble apparaît en séquence au chargement,
   du haut vers le bas, avec des retards courts : c'est ce qui donne le rythme
   posé des sites d'hôtellerie haut de gamme, sans que rien ne bouge ensuite.
   ========================================================================== */

.ah-hero__texte {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 3vh, 34px);
	padding: var(--ah-header-h) var(--ah-gutter) clamp(80px, 14vh, 150px);
	text-align: center;
	color: var(--ah-white);
}

.ah-hero__logo {
	width: min(300px, 58vw);
	color: var(--ah-white);
}

.ah-logo--complet {
	display: block;
	width: 100%;
	height: auto;
}

.ah-hero__titre {
	max-width: 18ch;
	margin: 0;
	color: var(--ah-white);
	text-shadow: 0 2px 30px rgba(16, 20, 18, .35);
}

.ah-hero__accroche {
	max-width: 54ch;
	margin: 0;
	color: rgba(255, 255, 255, .88);
	text-shadow: 0 1px 20px rgba(16, 20, 18, .35);
}

/* Sur l'accueil, le logo de l'en-tête ne paraît qu'une fois la page défilée :
   sinon il ferait doublon avec celui posé au centre de la photo. */
.ah-header--over:not(.is-scrolled) .ah-brand {
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease;
}

.ah-header--over .ah-brand {
	transition: opacity .4s ease;
}

/* --- Le texte rejoint la mer --------------------------------------------- */

/* Au défilement, le logo et le titre descendent vers l'horizon en
   s'effaçant, puis ne reviennent pas.

   La progression est calculée en JavaScript et déposée dans
   « --ah-sortie », de 0 à 1. Les animations CSS pilotées par le
   défilement auraient fait le travail sans script, mais Safari ne les
   connaît pas encore — et sur la Côte d'Azur, la moitié des visiteurs
   sont sur iPhone.

   Sans JavaScript, la variable vaut 0 : le texte reste simplement
   lisible et immobile. */
/* Le mouvement de sortie est écrit en style direct par
   assets/js/aurore.js — voir le commentaire là-bas : la règle d'entrée en
   séquence, juste en dessous, gagnerait autrement sur toute déclaration
   posée ici. Ce bloc ne garde donc que la préparation du navigateur. */
.js .ah-hero__logo,
.js .ah-hero__titre,
.js .ah-hero__accroche {
	will-change: opacity, transform, filter;
}

/* --- Entrée en séquence -------------------------------------------------- */

.js .ah-hero__logo,
.js .ah-hero__titre,
.js .ah-hero__accroche {
	opacity: 0;
	transform: translateY(16px);
	animation: ah-entree 1.1s cubic-bezier(.16, .8, .3, 1) forwards;
}

.js .ah-hero__logo { animation-delay: .15s; }
.js .ah-hero__titre { animation-delay: .45s; }
.js .ah-hero__accroche { animation-delay: .7s; }

@keyframes ah-entree {
	to { opacity: 1; transform: none; }
}

/* La photo se rapproche très lentement : le premier écran respire au lieu
   d'être figé. Aucun défilement en parallaxe, qui saccade sur mobile. */
.ah-hero__image {
	animation: ah-respire 18s ease-out both;
}

@keyframes ah-respire {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.js .ah-hero__logo,
	.js .ah-hero__titre,
	.js .ah-hero__accroche,
	.ah-hero__image {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.js .ah-hero__texte {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* ==========================================================================
   Étiquette sur la carte d'un logement

   Elle occupe la photo au premier regard, puis s'efface dès que la carte est
   bien entrée dans l'écran : le nom se grave, et la photo prend le relais.
   Sans JavaScript, l'étiquette reste simplement visible.
   ========================================================================== */

.ah-etiquette {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 10%;
	color: var(--ah-white);
	background: linear-gradient(rgba(16, 20, 18, .34), rgba(16, 20, 18, .46));
	transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1),
	            transform 1.1s cubic-bezier(.4, 0, .2, 1);
}

.ah-etiquette__dessin {
	width: auto;
	height: 100%;
	max-width: 100%;
	filter: drop-shadow(0 2px 14px rgba(16, 20, 18, .45));
}

.ah-carte__photo {
	position: relative;
}

/* L'effacement n'est demandé que si le script tourne. */
.js [data-ah-etiquette].est-vue .ah-etiquette {
	opacity: 0;
	transform: scale(1.06);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ah-etiquette { transition: none; }
}

/* --- Vidéo du bandeau ----------------------------------------------------
   Muette et en boucle, elle sert de fond. L'image d'affiche s'affiche pendant
   le téléchargement, donc jamais d'écran noir. Si le visiteur a demandé moins
   d'animations, la vidéo est masquée et seule l'affiche reste. */

.ah-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ah-hero__video { display: none; }

	.ah-hero {
		background-image: url('assets/video/bandeau-poster.jpg');
		background-size: cover;
		background-position: center;
	}
}

/* --- Logo du pied de page ------------------------------------------------ */

.ah-footer__logo {
	display: block;
	width: 140px;
	max-width: 55%;
	color: var(--ah-ink);
}

.ah-footer__logo .ah-logo--complet {
	width: 100%;
	height: auto;
}

.ah-footer__logo:hover {
	opacity: .85;
}

/* Les noms de lieux composés ne doivent jamais se couper en fin de ligne :
   « Juan- » suivi de « les-Pins » à la ligne suivante fait négligé. */
.ah-footer__contact,
.ah-carte__meta,
.ah-label {
	hyphens: none;
}

.ah-nowrap {
	white-space: nowrap;
}

/* Légende d'une photo du carrousel — pour les vues qui ne montrent pas le
   logement lui-même : la plage, le quartier, les environs. */

.ah-visionneuse__legende {
	position: absolute;
	left: 50%;
	bottom: clamp(52px, 8vh, 76px);
	transform: translateX(-50%);
	max-width: min(88%, 60ch);
	padding: 10px 18px;
	background: rgba(16, 20, 18, .55);
	backdrop-filter: blur(8px);
	border-radius: var(--ah-radius);
	color: rgba(250, 248, 244, .95);
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}

/* Point encore à compléter dans une page légale — visible en développement,
   impossible à rater avant la mise en ligne. */

.ah-a-completer {
	margin-block: 1.4em;
	padding: 14px 18px;
	background: #fdf6f4;
	border-left: 3px solid #a33;
	border-radius: 0 var(--ah-radius) var(--ah-radius) 0;
	color: #7a2a2a;
	font-size: 14px;
}

/* ==========================================================================
   Page événements
   ========================================================================== */

.ah-evenements {
	display: flex;
	flex-direction: column;
	gap: clamp(36px, 5vw, 58px);
	margin-top: clamp(36px, 5vw, 56px);
}

.ah-evenement {
	display: grid;
	gap: 10px 48px;
	padding-top: 28px;
	border-top: 1px solid var(--ah-line);
}

@media (min-width: 900px) {
	.ah-evenement {
		grid-template-columns: 300px 1fr;
	}
}

.ah-evenement__nom {
	margin: 0;
	font-family: var(--ah-serif);
	font-weight: 300;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem);
	line-height: 1.15;
	color: var(--ah-ink);
	text-wrap: balance;
}

.ah-evenement__periode {
	margin: 10px 0 0;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ah-brass);
}

.ah-evenement__texte {
	color: #4c4a44;
	text-wrap: pretty;
}

.ah-evenement__texte > * + * {
	margin-top: 1em;
}

/* La distance est l'argument qui décide un professionnel : elle se détache. */
.ah-evenement__distance {
	margin: 20px 0 0;
	padding: 12px 18px;
	background: var(--ah-sand);
	border-radius: var(--ah-radius);
	font-size: 14px;
	color: var(--ah-ink);
}

.ah-evenements__logements {
	margin-top: clamp(56px, 8vw, 90px);
	padding-top: clamp(40px, 5vw, 60px);
	border-top: 1px solid var(--ah-line);
}

.ah-evenements__logements .ah-cartes {
	margin-top: 34px;
}

/* --- Vidéo d'un logement ------------------------------------------------- */

.ah-logement__video {
	margin-top: clamp(34px, 5vw, 52px);
}

/* L'affiche : même traitement qu'une photo de galerie — ratio fixe, coins
   arrondis, léger zoom au survol — pour que la vidéo s'intègre au reste de
   la page plutôt que de trancher avec un lecteur natif gris. */
/* Les proportions viennent du fichier lui-même (voir ah_logement_video) :
   l'affiche a exactement la taille qu'aura le lecteur, la page ne saute pas
   au clic. Le 16/9 ne sert que si l'affiche manque. */
.ah-video-affiche {
	position: relative;
	display: block;
	/* Un <button> en « width: auto » se dimensionne sur son contenu, et ici
	   le contenu est en position absolue : la largeur tombait à zéro. On la
	   calcule donc — pleine largeur, sauf si la hauteur qui en découlerait
	   dépassait 70 % de l'écran, cas d'une vidéo filmée à la verticale. */
	width: min(100%, 70vh * var(--ah-video-num, 1.7778));
	aspect-ratio: var(--ah-video-ratio, 16 / 9);
	margin: 18px auto 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	border-radius: var(--ah-radius);
	background: var(--ah-ink);
	cursor: pointer;
}

.ah-video-affiche img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s ease, filter .4s;
}

.ah-video-affiche:hover img {
	transform: scale(1.03);
	filter: brightness(.85);
}

.ah-video-affiche__bouton {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	color: var(--ah-white);
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
	transition: transform .25s ease;
}

.ah-video-affiche:hover .ah-video-affiche__bouton {
	transform: translate(-50%, -50%) scale(1.08);
}

/* La flèche de lecture n'est pas exactement centrée dans son triangle visuel
   — un décalage optique de 2px la recentre à l'œil. */
.ah-video-affiche__bouton svg path {
	transform: translateX(1px);
}

/* Le lecteur prend la place de l'affiche, dans la colonne de texte.

   Pas de proportions imposées : une des deux vidéos est filmée au téléphone
   à la verticale (1440 × 2560). Un cadre 16/9 lui aurait coupé la tête et
   les pieds. Le navigateur garde les proportions du fichier, on se contente
   de borner la hauteur pour qu'une vidéo verticale ne remplisse pas tout
   l'écran. */
.ah-video-lecteur {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 70vh;
	margin: 18px auto 0;
	border-radius: var(--ah-radius);
	background: var(--ah-ink);
}

/* ==========================================================================
   Demande de réservation
   Aurore valide chaque demande à la main — le formulaire remplace donc le
   module de réservation instantanée. Il vit dans le bloc collant de la
   colonne de droite, d'où une mise en page compacte : le visiteur doit voir
   le bouton sans faire défiler.
   ========================================================================== */

.ah-demande {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Piège à robots : invisible à l'œil, mais pas masqué par « display: none »,
   que certains robots savent détecter. */
.ah-demande__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ah-demande__dates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ah-demande__champ {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ah-demande__champ label {
	color: var(--ah-mute);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ah-demande__champ input,
.ah-demande__champ select,
.ah-demande__champ textarea {
	width: 100%;
	padding: 11px 12px;
	font-family: var(--ah-sans);
	font-size: 15px;
	color: var(--ah-ink);
	background: var(--ah-white);
	border: 1px solid var(--ah-line);
	border-radius: var(--ah-radius);
	transition: border-color .2s ease, box-shadow .2s ease;
	/* 16px minimum sur iOS, sinon Safari zoome à la mise au point. */
	-webkit-appearance: none;
	appearance: none;
}

.ah-demande__champ textarea {
	resize: vertical;
	min-height: 68px;
	line-height: 1.6;
}

.ah-demande__champ input:focus,
.ah-demande__champ select:focus,
.ah-demande__champ textarea:focus {
	outline: none;
	border-color: var(--ah-sea);
	box-shadow: 0 0 0 3px rgba(47, 79, 74, .12);
}

/* Champ date : Safari iOS impose sa propre hauteur si on ne la force pas. */
.ah-demande__champ input[type="date"] {
	min-height: 44px;
}

.ah-demande__champ select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a766c' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px;
	padding-right: 32px;
}

.ah-reservation__avis {
	padding: 12px 14px;
	border-radius: var(--ah-radius);
	font-size: 13px;
	line-height: 1.6;
}

.ah-reservation__avis--ok {
	background: #eef4ef;
	color: #2f5233;
}

.ah-reservation__avis--erreur {
	background: #fbf0ea;
	color: #8a3b1a;
}

.ah-demande__note {
	color: var(--ah-mute);
	font-size: 11.5px;
	line-height: 1.65;
}

@media (max-width: 480px) {
	.ah-demande__dates {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Réassurance
   Trois chiffres sous l'accroche. C'est l'endroit où le visiteur décide s'il
   continue ou s'il retourne comparer sur une plateforme : il lui faut une
   preuve que l'hôte est fiable, et un chiffre vaut mieux qu'un adjectif.
   ========================================================================== */

.ah-confiance {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--ah-line);
	list-style: none;
}

.ah-confiance__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ah-confiance__valeur {
	font-family: var(--ah-serif);
	font-size: 27px;
	font-weight: 500;
	line-height: 1;
	color: var(--ah-brass);
	font-variant-numeric: tabular-nums;
}

.ah-confiance__libelle {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ah-mute);
}

@media (max-width: 480px) {
	.ah-confiance {
		gap: 20px;
	}

	.ah-confiance__valeur {
		font-size: 23px;
	}
}

/* Signature du concepteur, dans la barre du bas. Volontairement effacée —
   c'est le site d'Aurore — mais pas invisible : un lien qu'on ne voit pas
   n'est pas une signature, c'est une manœuvre. */
.ah-footer__signature {
	color: rgba(22, 24, 26, .74);
	font-size: .78rem;
}

.ah-footer__signature a {
	color: rgba(22, 24, 26, .84);
	text-decoration: none;
	border-bottom: 1px solid rgba(22, 24, 26, .3);
	transition: color .25s, border-color .25s;
}

.ah-footer__signature a:hover,
.ah-footer__signature a:focus-visible {
	color: var(--ah-ink);
	border-bottom-color: var(--ah-ink);
}

/* Numéros de déclaration en mairie. Chacun est nommé : trois numéros nus
   côte à côte ne diraient plus lequel va avec quel logement. */
.ah-footer__declarations li {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.ah-footer__declarations b {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: rgba(22, 24, 26, .74);
}

/* ==========================================================================
   Transitions entre les pages

   L'activation est décidée en JavaScript (voir assets/js/aurore.js) : les
   navigateurs intégrés d'Instagram et de Facebook en sont écartés, leur
   Chromium ancien affichant une page blanche à la place de la suivante.
   Ces règles ne servent donc que là où la transition est réellement posée.

   Le mouvement suit la même idée que le bandeau : ce qui part descend et
   s'efface, ce qui arrive monte. On reste dans les 300 ms — au-delà, une
   transition entre pages se ressent comme une lenteur.
   ========================================================================== */

::view-transition-old(root) {
	animation: ah-page-sort .26s cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
	animation: ah-page-entre .34s cubic-bezier(0, 0, .2, 1) both;
}

@keyframes ah-page-sort {
	to {
		opacity: 0;
		transform: translateY(14px);
	}
}

@keyframes ah-page-entre {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
}

/* L'en-tête ne bouge pas d'une page à l'autre. Pour ça il lui faut son
   propre nom de transition — sans nom, il fait partie de « root » et
   traverse l'écran avec le reste. Une fois nommé, on lui retire toute
   animation : il reste simplement en place pendant que le contenu change.

   Le nom doit être unique dans la page ; l'en-tête l'est. */
.ah-header {
	view-transition-name: ah-entete;
}

::view-transition-old(ah-entete),
::view-transition-new(ah-entete) {
	animation: none;
	mix-blend-mode: normal;
}

/* ==========================================================================
   Les titres s'écrivent

   Le découpage en lettres est fait en JavaScript (assets/js/aurore.js), qui
   numérote chaque lettre dans « --rang ». Ici on ne fait que traduire ce
   rang en retard : la lettre 12 part douze crans après la première.

   Sans JavaScript, aucune de ces classes n'existe et le titre s'affiche
   normalement — c'est le comportement voulu, pas un repli dégradé.
   ========================================================================== */

.ah-ecrit__mot {
	/* Un mot ne se coupe jamais au milieu, même découpé en lettres. */
	display: inline-block;
	white-space: nowrap;
}

.ah-ecrit__lettre {
	display: inline-block;
	white-space: pre;
}

/* Avant le passage du guetteur : les lettres attendent, décalées et floues. */
.ah-ecrit-pret .ah-ecrit__lettre {
	opacity: 0;
	transform: translateY(.28em) rotate(2deg);
	filter: blur(4px);
}

/* Au passage : chacune se pose, à son tour. 26 ms d'écart — assez pour
   qu'on voie l'écriture se faire, assez peu pour qu'un titre de dix mots
   ne se fasse pas attendre. */
.ah-ecrit-en-cours .ah-ecrit__lettre {
	opacity: 1;
	transform: none;
	filter: blur(0);
	transition:
		opacity .5s cubic-bezier(.2, .7, .3, 1),
		transform .55s cubic-bezier(.2, .7, .3, 1),
		filter .5s ease;
	transition-delay: calc(var(--rang, 0) * 26ms);
}

@media (prefers-reduced-motion: reduce) {
	.ah-ecrit-pret .ah-ecrit__lettre,
	.ah-ecrit-en-cours .ah-ecrit__lettre {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}

/* ==========================================================================
   Menu du téléphone — retour à l'accueil et entrée en cascade

   Deux manques constatés en l'ouvrant vraiment sur un téléphone : aucun
   moyen de revenir à l'accueil une fois dedans, et une apparition d'un
   bloc, sans mouvement, qui donne l'impression d'un écran qui saute.
   ========================================================================== */

.ah-nav__accueil {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	align-self: flex-start;
	padding: 9px 16px 9px 13px;
	border: 1px solid var(--ah-line);
	border-radius: 999px;
	color: var(--ah-mute);
	font-family: var(--ah-sans);
	font-size: 12.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.ah-nav__accueil:hover,
.ah-nav__accueil:focus-visible {
	background: var(--ah-ink);
	border-color: var(--ah-ink);
	color: var(--ah-white);
}

.ah-nav__accueil svg {
	flex: none;
}

/* Sur grand écran, le logo en haut à gauche fait déjà ce travail.
   1024 px : c'est là que le thème bascule sur la barre de navigation. */
@media (min-width: 1024px) {
	.ah-nav__accueil {
		display: none;
	}
}

/* --- L'entrée en cascade -------------------------------------------------

   Chaque ligne glisse depuis la gauche, l'une après l'autre. Le retard est
   court — 45 ms — pour que le mouvement se sente sans qu'on l'attende : au
   sixième élément on est encore sous un quart de seconde.

   L'état de départ n'est posé que sur « .js » : sans JavaScript le menu ne
   s'ouvre pas de toute façon, et il ne faut surtout pas qu'un décalage
   reste figé à l'écran. */
/* ⚠ L'état de départ ne vaut QUE sur le panneau du téléphone. Posé sans
   condition, il rendait la navigation de bureau entièrement invisible :
   là-haut le menu n'est jamais « ouvert », donc rien ne venait jamais
   rétablir l'opacité. Le site a passé quelques minutes avec un en-tête
   vide, et aucune erreur nulle part pour le signaler. */
@media (max-width: 1023px) {
	.js .ah-nav__accueil,
	.js .ah-nav .ah-nav__list li,
	.js .ah-nav__aside > * {
		opacity: 0;
		transform: translateX(-18px);
	}
}

.js .ah-nav.is-open .ah-nav__accueil,
.js .ah-nav.is-open .ah-nav__list li,
.js .ah-nav.is-open .ah-nav__aside > * {
	opacity: 1;
	transform: none;
	transition:
		opacity .45s cubic-bezier(.2, .7, .3, 1),
		transform .5s cubic-bezier(.2, .7, .3, 1);
}

.js .ah-nav.is-open .ah-nav__accueil        { transition-delay: .06s; }
.js .ah-nav.is-open .ah-nav__list li:nth-child(1) { transition-delay: .11s; }
.js .ah-nav.is-open .ah-nav__list li:nth-child(2) { transition-delay: .155s; }
.js .ah-nav.is-open .ah-nav__list li:nth-child(3) { transition-delay: .2s; }
.js .ah-nav.is-open .ah-nav__list li:nth-child(4) { transition-delay: .245s; }
.js .ah-nav.is-open .ah-nav__list li:nth-child(5) { transition-delay: .29s; }
.js .ah-nav.is-open .ah-nav__aside > *:nth-child(1) { transition-delay: .33s; }
.js .ah-nav.is-open .ah-nav__aside > *:nth-child(2) { transition-delay: .37s; }

@media (prefers-reduced-motion: reduce) {
	.js .ah-nav__accueil,
	.js .ah-nav .ah-nav__list li,
	.js .ah-nav__aside > *,
	.js .ah-nav.is-open .ah-nav__accueil,
	.js .ah-nav.is-open .ah-nav__list li,
	.js .ah-nav.is-open .ah-nav__aside > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   Ancres : ne jamais atterrir sous l'en-tête

   « Logements » dans le menu emmène vers #logements, et le titre « Trois
   adresses, trois quartiers » se retrouvait caché derrière l'en-tête
   collant : on arrivait au milieu d'une phrase.

   `scroll-margin-top` s'applique à la cible du défilement, pas à ce qui la
   précède — c'est la seule propriété qui règle ça sans décaler la page.
   La hauteur de l'en-tête est déjà connue du thème, on ajoute une
   respiration pour que le titre ne colle pas au bord.
   ========================================================================== */

:target,
#logements,
[id^="guide-"],
[id^="evenement-"],
.ah-section[id],
.ah-guide__entree[id] {
	scroll-margin-top: calc(var(--ah-header-h, 76px) + 26px);
}

/* Le défilement lui-même se fait en douceur, sauf si l'appareil demande
   moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* L'exemple chiffré : c'est lui qui rend les 15 % tangibles, il doit se
   lire avant les deux chiffres qui suivent. */
.ah-argument__exemple {
	margin: 20px 0 0;
	padding-left: 14px;
	border-left: 2px solid var(--ah-line);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ah-mute);
}

/* Tableau dans une entrée de guide — les marchés, jour par jour. Il déborde
   sur un téléphone : on le fait défiler dans son propre cadre plutôt que
   de laisser la page entière partir de travers. */
.ah-guide__texte .ah-tableau {
	display: block;
	width: 100%;
	margin-top: 18px;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 15px;
	white-space: nowrap;
}

.ah-guide__texte .ah-tableau th,
.ah-guide__texte .ah-tableau td {
	padding: 10px 18px 10px 0;
	text-align: left;
	border-bottom: 1px solid var(--ah-line);
	vertical-align: top;
}

.ah-guide__texte .ah-tableau th {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ah-mute);
}

.ah-guide__texte .ah-tableau td:last-child {
	color: var(--ah-mute);
}

/* ==========================================================================
   Révélation des photos par volet

   La photo n'apparaît pas en fondu — elle se découvre, du bas vers le
   haut, pendant qu'elle recule légèrement. C'est le geste d'un rideau
   qu'on lève, et il donne aux images une présence qu'un simple fondu
   n'a pas.

   Le volet est posé sur un conteneur, jamais sur l'image elle-même :
   si le JavaScript ne pose pas la classe, la photo reste visible. La
   leçon des blocs restés à opacity 0 a servi.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.js .ah-carte__photo,
	.js .ah-guide__photo {
		clip-path: inset(0 0 0 0);
		transition: clip-path 1.1s cubic-bezier(.16, .8, .3, 1);
	}

	.js .ah-reveal:not(.is-in) .ah-carte__photo,
	.js .ah-reveal:not(.is-in) .ah-guide__photo {
		clip-path: inset(0 0 100% 0);
	}

	.js .ah-carte__photo img,
	.js .ah-guide__photo img {
		transition: transform 1.3s cubic-bezier(.16, .8, .3, 1);
	}

	.js .ah-reveal:not(.is-in) .ah-carte__photo img,
	.js .ah-reveal:not(.is-in) .ah-guide__photo img {
		transform: scale(1.12);
	}
}

/* Les chiffres qui se comptent : on fige leur largeur pour que la ligne
   ne tressaute pas pendant le décompte. */
.ah-confiance__valeur,
.ah-chiffres__valeur {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Les photos des cartes qui se tournent comme des pages
   ========================================================================== */

/* Rien de tout cela n'existe sans JavaScript : la carte garde alors sa photo
   unique, entière et visible. Aucune règle ci-dessous ne masque quoi que ce
   soit tant que le script n'a pas construit la pile lui-même. */

.ah-carte__photo[data-ah-diapo] {
	/* La profondeur donne son épaisseur au mouvement. Sans elle, la page ne
	   se tourne pas, elle s'écrase. Le point de fuite est au centre : décalé,
	   la page part de travers et on ne lit plus un livre mais un volet. */
	perspective: 1600px;
	perspective-origin: 50% 50%;
}

.ah-diapo__page {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	backface-visibility: hidden;
	will-change: transform;
}

.ah-diapo__page img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* L'ombre de la reliure : elle s'installe pendant que la page se soulève,
   et c'est elle qui fait croire au papier. */
.ah-diapo__page::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(94deg,
		rgba(24, 22, 18, .62) 0%,
		rgba(24, 22, 18, .28) 18%,
		rgba(24, 22, 18, .05) 46%,
		rgba(255, 252, 244, .10) 82%,
		rgba(255, 252, 244, .18) 100%);
	transition: opacity 1.1s cubic-bezier(.36, .06, .28, 1);
}

.ah-diapo__page--tourne {
	/* 92 degrés et pas davantage : au-delà de l'angle droit la page présente
	   son dos, qui ne se voit pas, et le temps passé à finir la rotation est
	   du temps où il ne se passe plus rien à l'écran.

	   La courbe démarre franchement et finit en glissant. L'inverse — le
	   départ mou puis l'accélération — donnait un mouvement qui claque au
	   milieu, tout le contraire d'une page qu'on tourne. */
	transform: rotateY(-92deg);
	transition: transform 1.9s cubic-bezier(.36, .06, .28, 1);
	box-shadow: 14px 0 34px rgba(20, 18, 14, .28);
}

.ah-diapo__page--tourne::after {
	opacity: 1;
}

/* Le retour à plat, une fois la page passée dessous : instantané et invisible,
   puisqu'elle est alors cachée par toutes les autres. */
.ah-diapo__page--repos {
	transition: none;
}

/* L'étiquette du logement reste au-dessus de la pile. */
.ah-carte__photo > .ah-etiquette {
	z-index: 5;
}

/* Le zoom au survol continue de porter sur la photo visible. */
.ah-carte__lien:hover .ah-diapo__page img {
	transform: scale(1.04);
}

.ah-diapo__page img {
	transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
	/* On ne tourne plus rien : la carte se fige sur sa première photo. Le
	   script s'en charge aussi, ceci n'est que la seconde barrière. */
	.ah-diapo__page--tourne {
		transition: none;
	}
}

/* ==========================================================================
   Le verdict de disponibilité
   ==========================================================================
   La question posée par le bouton « Voir les disponibilités » mérite une
   réponse lisible d'un coup d'œil, pas un paragraphe à déchiffrer. Deux
   états, et jamais la couleur seule pour les distinguer : une coche ou une
   croix accompagne toujours le message, pour qui ne perçoit pas le vert. */

.ah-verdict {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 13px 15px;
	border-radius: var(--ah-radius);
	font-size: .9375rem;
	line-height: 1.5;
	border-left: 3px solid;
}

.ah-verdict strong {
	display: block;
	font-weight: 500;
}

.ah-verdict__marque {
	flex: 0 0 auto;
	font-size: 1rem;
	line-height: 1.45;
}

.ah-verdict--libre {
	background: #eef5ee;
	border-left-color: #3f7d4a;
	color: #24462a;
}

.ah-verdict--pris {
	background: #fbeeea;
	border-left-color: #a8482c;
	color: #6d2c19;
}

/* Dates incohérentes : ne jamais rester muet. Une recherche du 12 au 12
   n'est pas une erreur du visiteur, c'est une saisie inachevée — on le dit
   au lieu de n'afficher rien du tout. */
.ah-verdict--flou {
	background: #fdf6e8;
	border-left-color: #b8862c;
	color: #6b4d13;
}

/* ==========================================================================
   Le bouton de musique
   ==========================================================================
   Discret, en bas à droite, au-dessus de tout le reste. Il ne s'affiche que
   si une piste a été déposée dans le thème — pas de commande morte. */

.ah-musique {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px 9px 11px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(18, 20, 19, .62);
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
	color: #fff;
	font-family: inherit;
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: .78;
	transition: opacity .3s ease, background-color .3s ease, transform .3s ease;
}

.ah-musique:hover,
.ah-musique:focus-visible {
	opacity: 1;
	background: rgba(18, 20, 19, .82);
}

.ah-musique__icone { display: flex; }

/* Au repos, la musique est coupée : on montre la croix, pas les ondes. */
.ah-musique .ah-musique__on { opacity: 0; }
.ah-musique .ah-musique__off { opacity: 1; }

.ah-musique[aria-pressed="true"] .ah-musique__on { opacity: 1; }
.ah-musique[aria-pressed="true"] .ah-musique__off { opacity: 0; }

.ah-musique[aria-pressed="true"] {
	opacity: 1;
	border-color: rgba(255, 255, 255, .34);
}

.ah-musique__on,
.ah-musique__off { transition: opacity .25s ease; }

/* Sur petit écran, l'étiquette disparaît : le pictogramme suffit et la place
   est comptée. */
@media (max-width: 600px) {
	.ah-musique__texte { display: none; }
	.ah-musique {
		right: 12px;
		bottom: 12px;
		padding: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ah-musique,
	.ah-musique__on,
	.ah-musique__off { transition: none; }
}

/* ==========================================================================
   Le calendrier de disponibilité
   ==========================================================================
   Les dates prises sont barrées et grises, les libres en clair et cliquables.
   Jamais la couleur seule : une date prise est barrée, ce qui se voit même
   pour qui ne distingue pas le rouge du vert. */

.ah-cal {
	margin: 0 0 22px;
	padding: 16px 16px 14px;
	border: 1px solid var(--ah-trait, rgba(28, 28, 28, .12));
	border-radius: var(--ah-radius);
	background: #fff;
}

.ah-cal__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.ah-cal__intitule { margin: 0; }

.ah-cal__fleche {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 1px solid rgba(28, 28, 28, .16);
	border-radius: 50%;
	background: #fff;
	color: var(--ah-ink, #1c1c1c);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

.ah-cal__fleche:hover { background: #f4f1eb; border-color: rgba(28, 28, 28, .3); }
.ah-cal__fleche[disabled] { opacity: .3; cursor: default; }

.ah-cal__mois-groupe { display: grid; gap: 18px; }

@media (min-width: 1100px) {
	/* Deux mois côte à côte quand la colonne est assez large. Sur la fiche
	   logement la colonne fait 380 px : un seul mois y tient, le second est
	   masqué plutôt que compressé. */
	.ah-cal__mois-groupe { grid-template-columns: 1fr; }
}

.ah-cal__mois + .ah-cal__mois { display: none; }
.ah-cal.est-double .ah-cal__mois + .ah-cal__mois { display: block; }

.ah-cal__titre {
	margin: 0 0 8px;
	font-family: var(--ah-serif, serif);
	font-size: 1.0625rem;
	text-transform: capitalize;
	text-align: center;
	color: var(--ah-ink, #1c1c1c);
}

.ah-cal__semaine,
.ah-cal__grille {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.ah-cal__semaine {
	margin-bottom: 4px;
	font-size: .625rem;
	letter-spacing: .1em;
	text-align: center;
	color: #9b968d;
}

.ah-cal__jour,
.ah-cal__vide {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 6px;
	background: none;
	font-family: inherit;
	font-size: .8125rem;
	color: var(--ah-ink, #1c1c1c);
	padding: 0;
}

/* Libre : cliquable, fond clair au survol. */
button.ah-cal__jour {
	cursor: pointer;
	background: #eef4ee;
	color: #24462a;
	transition: background-color .18s ease, color .18s ease;
}

button.ah-cal__jour:hover,
button.ah-cal__jour:focus-visible {
	background: #3f7d4a;
	color: #fff;
}

/* Pris : barré, grisé, non cliquable. */
.ah-cal__jour.est-pris {
	background: #f7ecea;
	color: #b08a80;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	cursor: not-allowed;
}

.ah-cal__jour.est-passe {
	color: #cdc8c0;
	background: none;
}

/* La sélection en cours. */
.ah-cal__jour.est-choisi {
	background: #1f4a2a;
	color: #fff;
}

.ah-cal__jour.est-entre {
	background: #d9e7da;
	color: #24462a;
	border-radius: 0;
}

.ah-cal__legende {
	display: flex;
	gap: 14px;
	margin: 12px 0 0;
	font-size: .75rem;
	color: #6f6a62;
}

.ah-cal__cle { display: inline-flex; align-items: center; gap: 6px; }

.ah-cal__cle::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.ah-cal__cle--libre::before { background: #eef4ee; border: 1px solid #3f7d4a; }
.ah-cal__cle--pris::before  { background: #f7ecea; border: 1px solid #a8482c; }

.ah-cal__choix {
	margin: 10px 0 0;
	font-size: .8125rem;
	color: #55524d;
	min-height: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
	.ah-cal__fleche,
	button.ah-cal__jour { transition: none; }
}

/* L'ancre de la recherche : on laisse la place de l'en-tête collant, sinon
   le calendrier arrive à moitié caché sous le menu. */
#disponibilites { scroll-margin-top: 96px; }

@media (max-width: 880px) {
	#disponibilites { scroll-margin-top: 76px; }
}

/* Les autres logements, en bas de fiche. Fond légèrement teinté pour se
   détacher de la fiche qu'on vient de lire. */
.ah-autres {
	margin-top: 8px;
	padding-top: 44px;
	border-top: 1px solid var(--ah-trait, rgba(28, 28, 28, .1));
}

/* Le prix d'appel, au-dessus du calendrier. Discret mais lisible : c'est la
   première question du visiteur, elle mérite d'être visible sans crier. */
.ah-reservation__prix {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0 0 16px;
	color: var(--ah-ink);
}

.ah-reservation__prix-avant,
.ah-reservation__prix-apres {
	font-size: .8125rem;
	color: var(--ah-mute);
}

.ah-reservation__prix-valeur {
	font-family: var(--ah-serif);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--ah-ink);
	font-variant-numeric: tabular-nums;
}

/* --- Le detail par saison ------------------------------------------------
   Le prix affiche est le plus bas de l'annee. Sans ce tableau, un visiteur
   qui regarde aout lit « a partir de 250 EUR » alors que la nuit est a 400.
   Ajoute le 22/08/2026. */

.ah-saisons {
	list-style: none;
	margin: -8px 0 18px;
	padding: 10px 0 0;
	border-top: 1px solid var(--ah-line, rgba(0, 0, 0, .1));
}

.ah-saisons__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: .875rem;
}

.ah-saisons__periode {
	color: var(--ah-mute);
}

/* Le trait de conduite entre la periode et le prix : l'oeil suit la ligne
   au lieu de sauter d'une colonne a l'autre. */
.ah-saisons__ligne::before {
	content: "";
	order: 1;
	flex: 1 1 auto;
	min-width: 12px;
	border-bottom: 1px dotted var(--ah-line, rgba(0, 0, 0, .18));
	transform: translateY(-3px);
}

.ah-saisons__prix {
	order: 2;
	color: var(--ah-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Logement fermé à la réservation — voir ah_logement_indisponible() --- */
.ah-indispo{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:.35rem 1.25rem;
	margin:0 0 2.5rem;
	padding:1rem 1.25rem;
	background:var(--ah-sand);
	border-left:3px solid var(--ah-brass);
	border-radius:var(--ah-radius);
	font-family:var(--ah-sans);
	font-size:.95rem;
	line-height:1.5;
	color:var(--ah-mute);
}
.ah-indispo__titre{color:var(--ah-ink);font-weight:500}
.ah-indispo__lien{color:var(--ah-sea);text-decoration:underline;text-underline-offset:3px}
.ah-indispo__lien:hover{text-decoration-thickness:2px}

/* --- Estimation du séjour, sous les dates du formulaire de demande --- */
.ah-demande__estim{
	display:flex;
	flex-direction:column;
	gap:.25rem;
	margin:0 0 1.25rem;
	padding:.85rem 1rem;
	background:var(--ah-sand);
	border-radius:var(--ah-radius);
	font-family:var(--ah-sans);
}
/* display:flex l'emporterait sur l'attribut hidden : on le rétablit. */
.ah-demande__estim[hidden]{display:none}
.ah-demande__estim-chiffre{
	font-size:1.05rem;
	font-weight:500;
	color:var(--ah-ink);
}
.ah-demande__estim-note{
	font-size:.78rem;
	line-height:1.45;
	color:var(--ah-mute);
}