/* Auberge de la Lune : feuille de style.
   Couleurs : craie #F6F3EC (fond), vert sauge #2F4A3F (texte, boutons pleins), bois clair
   #C9B18F (filets), bois pâle #EFE6D6 (bandeau de réservation, avis), nuit #111A17 (hero,
   scène du bain nordique), clair de lune #F1E7CF (texte sur la nuit, survol des boutons).
   Polices locales : Source Serif 4 pour les titres, Source Sans 3 pour le texte.
   Mouvement : la lune. Le hero s'ouvre depuis la lune de la photo, la nuit tombe au
   défilement, le bain nordique se dévoile depuis le disque lunaire, un indicateur de
   phase de lune suit la lecture. Tout le mouvement vit dans motion.js et dans le bloc
   « Mouvement » en fin de feuille ; il disparaît en mouvement réduit. */

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Replis métriques du serif. Pendant le swap, les titres sont composés dans la police
   système : sans correction ils occupent une largeur différente et gagnent ou perdent
   une ligne. Largeurs mesurées dans le navigateur sur le H1 de l'accueil, en 100 px :
   Source Serif 4 vaut 3294,8 en 400 et 3344,9 en 600 ; Georgia 3098,7 et 3598,5 ;
   Times New Roman 2821,2 et 3032,5. D'où les quatre size-adjust ci-dessous.
   Une famille par police de repli, et non une seule : une règle @font-face dont le
   local() ne résout pas est ignorée, la famille suivante de la pile prend le relais. */
@font-face {
  font-family: "Georgia repli";
  src: local("Georgia");
  size-adjust: 106.33%;
  font-weight: 400 500;
  font-style: normal;
}

@font-face {
  font-family: "Georgia repli";
  src: local("Georgia Bold");
  size-adjust: 92.95%;
  font-weight: 501 700;
  font-style: normal;
}

@font-face {
  font-family: "Times repli";
  src: local("Times New Roman");
  size-adjust: 116.79%;
  font-weight: 400 500;
  font-style: normal;
}

@font-face {
  font-family: "Times repli";
  src: local("Times New Roman Bold");
  size-adjust: 110.3%;
  font-weight: 501 700;
  font-style: normal;
}

:root {
  --craie: #F6F3EC;
  --sauge: #2F4A3F;
  --bois: #C9B18F;
  --bois-pale: #EFE6D6;
  --blanc: #FFFFFF;
  --colonne: 1120px;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  /* Bornes en px : la racine est fluide (17 à 18 px), le rem ne suffirait pas à tenir
     les fourchettes de la spécification (corps 17 à 18, H1 32 à 44, H2 26 à 32). */
  --corps: clamp(17px, 16px + 0.25vw, 18px);
  --h1: clamp(38px, 24px + 3.2vw, 70px);
  --h2: clamp(30px, 20px + 2.2vw, 54px);
  --h3: 1.25rem;
  --section: clamp(72px, 9vw, 136px);
  --nuit: #111A17;
  --nuit-2: #18241F;
  --lune: #F1E7CF;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Source Serif 4", "Georgia repli", "Times repli", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}

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

html {
  background: var(--craie);
  color: var(--sauge);
  font-family: var(--sans);
  font-size: var(--corps);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--craie);
  color: var(--sauge);
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}

h1,
h2 {
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.022em;
}

h1 {
  font-size: var(--h1);
  margin-bottom: 1.5rem;
}

h2 {
  font-size: var(--h2);
  margin-bottom: 1.5rem;
}

h3 {
  font-size: var(--h3);
  margin-bottom: 0.5rem;
}

p,
ul,
ol,
dl,
blockquote,
table {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.3rem;
}

li {
  margin-bottom: 0.35rem;
}

a {
  color: var(--sauge);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Un lien seul dans son paragraphe est une cible de navigation : 44 px de haut au moins. */
p > a:only-child:not(.bouton),
dd > a:only-child:not(.bouton) {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.6rem;
}

:focus-visible {
  outline: 2px solid var(--sauge);
  outline-offset: 3px;
}

strong { font-weight: 600; }

address { font-style: normal; }

figure { margin: 0; }

blockquote {
  margin: 0 0 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--bois);
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

img {
  opacity: 0;
  transition: opacity 200ms;
}

img.est-chargee,
.no-js img {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  img {
    transition: none;
    opacity: 1;
  }
}

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

[hidden] { display: none !important; }

.visuellement-cachee {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: auto;
  padding: 0.75rem 1rem;
  background: var(--sauge);
  color: var(--craie);
  z-index: 200;
}

.lien-evitement:focus {
  left: 1rem;
  top: calc(var(--brnsg-barre, 0px) + 0.5rem);
}

[data-brnsg-horaires] {
  font-size: 0.9375rem;
}

/* Toute cible d'ancre reste sous la barre BRNSG collante de 36 px. */
[id] {
  scroll-margin-top: calc(var(--brnsg-barre, 0px) + 1rem);
}

/* ----------------------------- Mise en page ------------------------------ */
.colonne {
  width: 100%;
  max-width: calc(var(--colonne) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.colonne-etroite {
  max-width: calc(760px + 2 * var(--gouttiere));
}

.section {
  padding-block: var(--section);
  border-top: 1px solid var(--bois);
}

.section-premiere {
  border-top: 0;
  padding-top: clamp(2rem, 4vw, 3rem);
}

.bouton {
  display: inline-block;
  min-height: 44px;
  padding: 12px 22px;
  background: var(--sauge);
  color: var(--craie);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--sauge);
  border-radius: 0;
  cursor: pointer;
}

.bouton:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.bouton:disabled,
.bouton[aria-busy="true"] {
  cursor: wait;
  background: var(--bois-pale);
  color: var(--sauge);
}

.liste-simple {
  list-style: none;
  padding: 0;
}

.liste-simple li {
  padding-left: 1rem;
  border-left: 1px solid var(--bois);
}

.liste-faits {
  margin: 0 0 1.5rem;
}

.liste-faits dt {
  font-weight: 600;
  margin-top: 1rem;
}

.liste-faits dd {
  margin: 0.2rem 0 0;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
}

.tableau th,
.tableau td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--bois);
}

.tableau th {
  font-weight: 600;
  white-space: nowrap;
}

/* -------------------------------- En-tête -------------------------------- */
/* Trois blocs sur une ligne : l'identité (nom, lieu, téléphone, état d'ouverture),
   la navigation alignée en bas, le bouton Réserver. Le téléphone n'est plus en
   colonne de droite : la commune est lisible dès le premier écran. */
.entete {
  border-bottom: 1px solid var(--bois);
  background: var(--craie);
}

.entete-barre {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 2rem;
  row-gap: 0.5rem;
  padding-block: 0.75rem;
}

.entete-identite {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.entete-marque {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--sauge);
  text-decoration: none;
  padding-block: 0.2rem;
}

.entete-marque:hover span {
  text-decoration: underline;
}

.logo-croissant {
  flex: none;
  color: var(--sauge);
}

.entete-lieu {
  margin: 0;
  font-size: 0.875rem;
}

.entete-joindre {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.entete-menu {
  display: none;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--craie);
  color: var(--sauge);
  font-weight: 600;
  border: 1px solid var(--sauge);
  border-radius: 0;
  cursor: pointer;
}

.entete-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.5rem;
  min-width: 0;
}

.entete-nav a {
  display: inline-block;
  padding-block: 0.7rem;
  color: var(--sauge);
  text-decoration: none;
}

.entete-nav a:hover,
.entete-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.entete-tel {
  font-weight: 600;
  font-size: 1.125rem;
  white-space: nowrap;
  text-decoration: none;
  padding-block: 0.3rem;
}

.entete-tel:hover {
  text-decoration: underline;
}

/* La ligne est réservée et ne se replie jamais : horaires.js remplace un repli court
   par un texte de longueur voisine, la hauteur de l'en-tête ne bouge pas. */
.entete-horaires {
  display: inline-block;
  min-height: 1.4em;
  font-size: 0.875rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .entete-barre {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
  }

  .entete-identite { grid-column: 1; grid-row: 1; }
  .entete-menu { display: inline-block; grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
  .entete-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding-block: 0.25rem;
    border-top: 1px solid var(--bois);
  }

  .entete-nav a {
    display: block;
    padding-block: 0.75rem;
  }

  .entete-reserver {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
  }

  /* data-replie="oui" est dans le marquage : la navigation est repliée dès le premier
     rendu, script.js ne fait que la basculer. Sans JavaScript, le <noscript> du <head>
     la déplie et masque le bouton Menu : aucune page n'est inaccessible. */
  .entete-nav[data-replie="oui"] {
    display: none;
  }
}

@media (max-width: 400px) {
  .entete-marque { font-size: 1.0625rem; }
  .entete-tel { font-size: 1.0625rem; }
  .bouton { padding-inline: 16px; }
}


/* --------------------------------- Hero ---------------------------------- */
/* La longère au crépuscule en grand, le H1 posé sur la tombée de la nuit. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--nuit);
  color: var(--lune);
}

.hero-photo {
  position: relative;
  height: clamp(560px, calc(100svh - 138px - var(--brnsg-barre, 0px)), 960px);
  overflow: hidden;
}

.hero-photo picture,
.hero-photo img {
  width: 100%;
  height: 100%;
}

.hero-photo img {
  object-fit: cover;
  object-position: 50% 40%;
}

/* La nuit monte du bas de la photo : le titre se lit en clair de lune sur un fond sombre. */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(17, 26, 23, 0) 30%, rgba(17, 26, 23, 0.55) 58%, rgba(17, 26, 23, 0.94) 100%),
    linear-gradient(90deg, rgba(17, 26, 23, 0.45) 0%, rgba(17, 26, 23, 0) 55%);
  pointer-events: none;
}

/* Voile bleu nuit piloté par le défilement (motion.js) : la nuit tombe sur la longère. */
.hero-nuit {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0B1424;
  opacity: 0;
  pointer-events: none;
}

.hero-contenu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2rem, 5vw, 4rem);
  z-index: 2;
}

.hero h1 {
  max-width: 21ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  color: var(--lune);
  font-size: clamp(40px, 22px + 3.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.028em;
}

.hero-faits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-faits li {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(241, 231, 207, 0.35);
  color: rgba(241, 231, 207, 0.9);
  font-size: 1rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .hero-photo {
    height: auto;
  }

  .hero-photo img {
    aspect-ratio: 4 / 5;
  }

  .hero-contenu {
    position: relative;
    bottom: auto;
    margin-top: -10rem;
    padding-bottom: 2.5rem;
  }

  .hero-faits {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
}

/* ------------------------ Moteur de réservation --------------------------- */
.resa-bandeau {
  background: var(--bois-pale);
  border-block: 1px solid var(--bois);
}

.resa-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  align-items: end;
  padding-block: 1.5rem;
}

@media (min-width: 1000px) {
  .resa-grille {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .resa-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

.resa-titre {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
}

.resa-champ {
  min-width: 0;
}

.resa-champ label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.3rem;
}

.resa-champ input,
.resa-champ select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.6rem;
  background: var(--blanc);
  color: var(--sauge);
  border: 1px solid var(--sauge);
  border-radius: 0;
}

.resa-total-libelle {
  margin: 0 0 0.3rem;
  font-weight: 600;
  font-size: 0.9375rem;
}

.resa-total-valeur {
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.resa-action .bouton {
  width: 100%;
}

.resa-erreur {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--blanc);
  border: 1px solid var(--sauge);
  font-weight: 600;
}

.resa-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9375rem;
}

/* Page de réservation */
.resa-complet {
  margin-top: 2rem;
}

.resa-bloc {
  border: 0;
  border-top: 1px solid var(--bois);
  padding: 1.5rem 0 0;
  margin: 0 0 1.5rem;
  min-width: 0;
}

.resa-bloc legend {
  font-family: var(--serif);
  font-size: var(--h3);
  font-weight: 600;
  padding: 0;
  margin-bottom: 1rem;
}

.resa-grille-complet {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: 0;
}

@media (min-width: 1000px) {
  .resa-grille-complet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .resa-grille-complet {
    grid-template-columns: minmax(0, 1fr);
  }
}

.resa-recap {
  background: var(--bois-pale);
  border: 1px solid var(--bois);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.resa-recap-titre {
  font-size: var(--h3);
  margin-bottom: 0.75rem;
}

.resa-recap-liste {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 0 0 0.75rem;
}

.resa-recap-liste dt {
  font-weight: 600;
}

.resa-recap-liste dd {
  margin: 0;
}

.resa-recap-note {
  margin: 0;
  font-size: 0.9375rem;
}

/* ------------------- Barre de réservation persistante --------------------- */
/* Fixée en bas : la hauteur de l'onglet BRNSG replié est réservée. */
.resa-barre {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--brnsg-onglet, 0px);
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem var(--gouttiere);
  background: var(--bois-pale);
  border-top: 1px solid var(--sauge);
}

.resa-barre-resume {
  margin: 0;
  font-size: 0.9375rem;
  min-width: 0;
}

.resa-barre-bouton {
  flex: none;
}

/* La réserve de place suit l'état réel de la barre : la classe est posée et retirée
   par script.js en même temps que l'attribut hidden. Aucune page ne garde une bande
   vide en bas quand la barre est masquée. */
body.a-barre-resa {
  padding-bottom: calc(5.5rem + var(--brnsg-onglet, 0px));
}

@media (max-width: 720px) {
  /* L'onglet BRNSG n'existe que lorsque la barre BRNSG est repliée : les 90 px du
     bord droit ne sont réservés que dans cet état. */
  .brnsg-barre-repliee .resa-barre {
    padding-right: calc(var(--gouttiere) + 90px);
  }

  body.a-barre-resa {
    padding-bottom: calc(7rem + var(--brnsg-onglet, 0px));
  }
}

/* ------------------------------ Chambres ---------------------------------- */
.chambres-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

@media (max-width: 900px) {
  .chambres-liste {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}

.chambre-vignette img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--bois);
}

.chambre-vignette-lien {
  display: block;
  text-decoration: none;
  color: var(--sauge);
}

.chambre-vignette-lien h3 {
  margin: 0.75rem 0 0.5rem;
}

.chambre-vignette-lien:hover h3 {
  text-decoration: underline;
}

.chambre-vignette-faits,
.chambre-vignette-prix {
  margin-bottom: 0.5rem;
}

/* Ligne de présentation des hôtes, sous le titre : prénoms, âges et rôle. Même taille
   que le corps, posée sur un filet de bois clair comme les autres faits du site. */
.hotes-sous-titre {
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bois);
  max-width: 62ch;
}

.chambre-faits {
  font-size: 1.0625rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bois);
  max-width: 62ch;
}

/* ------------------------- Blocs photo et texte --------------------------- */
.bloc-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.bloc-photo-inverse .bloc-photo-image {
  order: 2;
}

.bloc-photo-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--bois);
}

.bloc-photo-portrait img {
  aspect-ratio: 4 / 5;
}

@media (max-width: 900px) {
  .bloc-photo {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .bloc-photo-inverse .bloc-photo-image {
    order: 0;
  }

  .bloc-photo-portrait {
    max-width: 420px;
  }
}

.photo-large {
  margin-bottom: 1.5rem;
}

.photo-large img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--bois);
}

/* Prénom et rôle sous la photo : ils ne vivent plus dans le seul attribut alt. */
.portrait-hote figcaption {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

.menu-type {
  list-style: none;
  padding: 0;
}

.menu-type li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--bois);
}

/* ------------------------------ Galerie ----------------------------------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.galerie-element-grand {
  grid-column: 1 / -1;
}

.galerie img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--bois);
}

.galerie-element-grand img {
  aspect-ratio: 16 / 9;
}

@media (max-width: 560px) {
  .galerie {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fiche-grille {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 3rem;
  align-items: start;
}

@media (max-width: 900px) {
  .fiche-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

/* ---------------------------- Calendriers --------------------------------- */
.calendriers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  max-width: 640px;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .calendriers {
    grid-template-columns: minmax(0, 1fr);
  }
}

.calendrier-titre {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.calendrier-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
}

.calendrier-table th {
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--bois);
}

.calendrier-table td {
  padding: 1px;
  text-align: center;
  border: 0;
}

.jour {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--sauge);
}

.jour-libre {
  background: var(--blanc);
  border: 1px solid var(--bois);
  text-decoration: none;
}

.jour-libre:hover {
  background: var(--bois-pale);
  text-decoration: underline;
}

/* Trois états distincts au premier coup d'oeil, dans la palette : la nuit occupée est
   pleine et barrée, la nuit de fermeture annuelle est un cadre vide, la nuit passée
   est estompée. Le texte caché de chaque case nomme l'état pour les lecteurs d'écran. */
.jour-occupe {
  background: var(--bois-pale);
  text-decoration: line-through;
}

/* Filet interrompu et chiffre estompé : une nuit de fermeture ne peut pas être
   confondue avec une nuit libre, dont le fond est blanc et le filet continu. */
.jour-ferme {
  background: var(--craie);
  border: 1px dashed var(--bois);
  text-decoration: none;
  opacity: 0.75;
}

.jour-passe {
  background: transparent;
  text-decoration: none;
  opacity: 0.55;
}

.calendrier-legende {
  font-size: 0.9375rem;
  max-width: 62ch;
}

.js .calendrier-repli {
  display: none;
}

/* ------------------------------ Alentours --------------------------------- */
.alentours-liste {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

@media (max-width: 900px) {
  .alentours-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .alentours-liste {
    grid-template-columns: minmax(0, 1fr);
  }
}

.alentours-liste li {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bois);
}

.alentours-temps {
  font-weight: 600;
}

.lieu {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--bois);
}

/* --------------------------------- Avis ----------------------------------- */
.avis-resume {
  font-weight: 600;
  font-size: 1.125rem;
}

.avis-liste {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

@media (max-width: 900px) {
  .avis-liste {
    grid-template-columns: minmax(0, 1fr);
  }
}

.avis-extrait {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bois);
}

.avis-note {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.avis-auteur {
  margin: 0;
  font-size: 0.9375rem;
}

/* --------------------------------- Accès ---------------------------------- */
.acces-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .acces-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* ------------------------------ Formulaire -------------------------------- */
.champ {
  margin-bottom: 1.25rem;
  min-width: 0;
}

.champ label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.champ-optionnel {
  font-weight: 400;
}

.champ input,
.champ textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.7rem;
  background: var(--blanc);
  color: var(--sauge);
  border: 1px solid var(--sauge);
  border-radius: 0;
}

.champ textarea {
  resize: vertical;
  min-height: 6rem;
}

.champ [aria-invalid="true"] {
  border-width: 2px;
}

.champ-rangee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 560px) {
  .champ-rangee {
    grid-template-columns: minmax(0, 1fr);
  }
}

.champ-erreur {
  margin: 0.35rem 0 0;
  font-weight: 600;
  font-size: 0.9375rem;
}

.formulaire-erreur {
  margin-top: 0.75rem;
}

.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.consentement input {
  accent-color: var(--sauge);
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.3rem;
  flex: none;
}

.formulaire-succes {
  padding: 1.25rem;
  background: var(--blanc);
  border: 1px solid var(--sauge);
  margin-bottom: 1.5rem;
}

.formulaire-succes p {
  font-weight: 600;
}

/* --------------------------- Pages légales et 404 ------------------------- */
.page-legale,
.page-404 {
  max-width: calc(760px + 2 * var(--gouttiere));
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem) var(--gouttiere) var(--section);
}

.page-legale h2 {
  font-size: var(--h3);
  margin: 2rem 0 0.5rem;
}

.page-404 .bouton {
  margin-top: 0.5rem;
}

/* ------------------------------ Pied de page ------------------------------ */
/* Deux bandes pleine largeur : contact en bois pâle, puis la base en craie. Aucune
   colonne : les faits de contact se lisent en ligne, séparés par des filets de 1 px,
   et les pages du site forment une ligne de liens, pas une liste verticale. */
.pied {
  border-top: 1px solid var(--sauge);
  font-size: 0.9375rem;
}

.pied-bande {
  padding-block: 1.25rem;
}

.pied-contact {
  background: var(--bois-pale);
  border-bottom: 1px solid var(--bois);
}

.pied-nom {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.0625rem;
  margin: 0 0 0.4rem;
}

.pied-faits {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pied-fait {
  margin: 0;
  padding-right: 1rem;
  margin-right: 1rem;
  border-right: 1px solid var(--bois);
}

/* Le dernier fait de chaque ligne garde son filet : la bordure droite du tout dernier
   élément est la seule à tomber, sinon la ligne se termine par un trait en suspens. */
.pied-fait:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

.pied-fait address {
  display: inline;
  font-style: normal;
}

.pied-fait a {
  display: inline-block;
  padding-block: 0.35rem;
}

.pied-etat {
  margin-left: 0.35rem;
}

.pied-base {
  padding-block: 1.5rem 1.75rem;
}

.pied-pages ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  gap: 0 1.5rem;
}

.pied-pages li {
  margin: 0;
}

.pied-pages a,
.pied-mentions a {
  display: inline-block;
  padding-block: 0.5rem;
}

/* Les notes coulent en deux colonnes de texte au-delà de 900 px : un flux de phrases,
   pas trois blocs titrés. */
.pied-notes {
  max-width: 78ch;
  margin-bottom: 1.25rem;
}

.pied-notes p {
  margin: 0 0 0.5rem;
  break-inside: avoid;
}

@media (min-width: 901px) {
  .pied-notes {
    max-width: none;
    columns: 2;
    column-gap: 2.5rem;
  }
}

.pied-mentions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bois);
}

.pied-mentions p {
  margin: 0;
}

@media (max-width: 720px) {
  /* Sur écran étroit, les faits reviennent à la ligne : le filet vertical ne sépare
     plus rien, il devient un filet horizontal entre deux faits. */
  .pied-faits {
    display: block;
  }

  .pied-fait {
    padding: 0 0 0.5rem;
    margin: 0 0 0.5rem;
    border-right: 0;
    border-bottom: 1px solid var(--bois);
  }

  .pied-fait:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
}

/* ======================================================================== */
/* Mise en scène : rythme, survols, nuit, lune                              */
/* ======================================================================== */

::selection {
  background: var(--sauge);
  color: var(--craie);
}

/* Filet de section tracé au défilement (motion.js fait varier --trait de 0 à 1). */
.section {
  position: relative;
  border-top: 0;
}

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bois);
  transform: scaleX(var(--trait, 1));
  transform-origin: 0 50%;
}

.section-premiere::before {
  display: none;
}

/* Liens de contenu : soulignement qui se retire puis se retrace au survol. */
main a:not(.bouton):not(.chambre-vignette-lien):not(.jour),
.pied a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  background-origin: content-box;
  background-clip: content-box;
}

main a:not(.bouton):not(.chambre-vignette-lien):not(.jour):hover,
.pied a:hover {
  animation: trait-lien 700ms var(--ease);
  text-decoration: none;
}

@keyframes trait-lien {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  45% { background-size: 0 1px; background-position: 100% 100%; }
  46% { background-size: 0 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

/* Lien d'appel : flèche qui glisse. */
.lien-lune::after {
  content: " \2192";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 400ms var(--ease);
}

.lien-lune:hover::after {
  transform: translateX(6px);
}

/* Navigation : trait qui pousse de gauche à droite. */
.entete-nav a {
  position: relative;
}

.entete-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 450ms var(--ease);
}

.entete-nav a:hover,
.entete-nav a[aria-current="page"] {
  text-decoration: none;
}

.entete-nav a:hover::after,
.entete-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.logo-croissant {
  transition: transform 700ms var(--ease);
}

.entete-marque:hover .logo-croissant {
  transform: rotate(-28deg) scale(1.1);
}

/* Boutons : une lune se lève dans le bouton au survol. */
.bouton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 450ms var(--ease), border-color 450ms var(--ease);
}

.bouton::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lune);
  transform: translateY(0);
  transition: transform 650ms var(--ease);
}

.bouton:hover {
  color: var(--sauge);
  text-decoration: none;
}

.bouton:hover::before {
  transform: translateY(-62%);
}

.bouton:disabled::before,
.bouton[aria-busy="true"]::before {
  display: none;
}

/* Bandeau de réservation : champs plus fins. */
.resa-bandeau {
  position: relative;
  z-index: 2;
}

.resa-champ input,
.resa-champ select {
  border-color: rgba(47, 74, 63, 0.45);
  transition: border-color 250ms, box-shadow 250ms;
}

.resa-champ input:hover,
.resa-champ select:hover,
.resa-champ input:focus,
.resa-champ select:focus {
  border-color: var(--sauge);
}

/* ------------------------------ Chambres ---------------------------------- */
.chambres-liste {
  gap: clamp(1.5rem, 3vw, 3rem);
}

.chambre-vignette picture {
  display: block;
  overflow: hidden;
}

.chambre-vignette img {
  aspect-ratio: 5 / 4;
  border: 0;
  transition: opacity 200ms, transform 1200ms var(--ease);
}

.chambre-vignette-lien:hover img {
  transform: scale(1.06);
}

.chambre-vignette-lien h3 {
  margin: 1.1rem 0 0.4rem;
  font-size: clamp(1.5rem, 1rem + 1.1vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: transform 500ms var(--ease);
}

.chambre-vignette-lien:hover h3 {
  text-decoration: none;
  transform: translateX(6px);
}

.chambre-vignette-prix {
  font-family: var(--serif);
  font-size: 1.125rem;
}

@media (min-width: 901px) {
  .chambre-vignette img {
    aspect-ratio: 4 / 5;
  }

  .chambre-vignette:nth-child(2) {
    margin-top: 5rem;
  }

  .chambre-vignette:nth-child(3) {
    margin-top: 2.5rem;
  }
}

/* -------------------------- Blocs photo et texte --------------------------- */
.bloc-photo {
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
}

.bloc-photo-image,
.photo-large,
.galerie-element,
.chambre-une {
  overflow: hidden;
}

.bloc-photo-image img,
.photo-large img,
.galerie img,
.chambre-une img {
  border: 0;
}

.menu-type li {
  font-family: var(--serif);
  font-size: 1.0625rem;
}

/* Page chambre : la photo d'abord, le texte en deux colonnes ensuite. */
.chambre-une {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}

.chambre-une img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.chambre-texte p {
  break-inside: avoid;
}

@media (min-width: 901px) {
  .chambre-texte {
    columns: 2;
    column-gap: 3rem;
  }
}

.chambre-faits {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.45;
}

/* ------------------------- Scène de nuit (bain) ---------------------------- */
.nuit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--nuit);
  color: var(--lune);
}

/* Ciel étoilé : visible tant que la photo n'occupe que le disque de la lune. */
.nuit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(2.5px 2.5px at 8% 14%, rgba(241, 231, 207, 0.9) 50%, transparent 51%),
    radial-gradient(2px 2px at 18% 42%, rgba(241, 231, 207, 0.7) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 27% 22%, rgba(241, 231, 207, 0.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 36% 68%, rgba(241, 231, 207, 0.6) 50%, transparent 51%),
    radial-gradient(3px 3px at 44% 12%, rgba(241, 231, 207, 0.9) 50%, transparent 51%),
    radial-gradient(2px 2px at 52% 50%, rgba(241, 231, 207, 0.6) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 61% 30%, rgba(241, 231, 207, 0.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 66% 78%, rgba(241, 231, 207, 0.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 58%, rgba(241, 231, 207, 0.7) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 93% 34%, rgba(241, 231, 207, 0.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 12% 84%, rgba(241, 231, 207, 0.6) 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 88%, rgba(241, 231, 207, 0.5) 50%, transparent 51%);
  animation: scintille 5s ease-in-out infinite alternate;
}

@keyframes scintille {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

.nuit-scene {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: end;
  min-height: calc(100svh - var(--brnsg-barre, 0px));
}

.nuit-photo {
  position: absolute;
  inset: 0;
}

.nuit-photo picture,
.nuit-photo img {
  width: 100%;
  height: 100%;
}

.nuit-photo img {
  object-fit: cover;
  object-position: 50% 50%;
}

.nuit-voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17, 26, 23, 0.9) 0%, rgba(17, 26, 23, 0.55) 40%, rgba(17, 26, 23, 0) 68%),
    linear-gradient(0deg, rgba(17, 26, 23, 0.7) 0%, rgba(17, 26, 23, 0) 45%);
  pointer-events: none;
}

.nuit-halo {
  position: absolute;
  z-index: 0;
  width: 46vmin;
  height: 46vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 231, 207, 0.32) 0%, rgba(241, 231, 207, 0.08) 40%, rgba(241, 231, 207, 0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.nuit-texte {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 8vw, 7rem);
}

.nuit-texte > * {
  max-width: 34rem;
}

.nuit h2 {
  color: var(--lune);
  font-size: clamp(40px, 24px + 3.4vw, 88px);
}

.nuit-prix {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  line-height: 1.3;
}

.nuit a {
  color: var(--lune);
}

@media (max-width: 900px) {
  .nuit-scene {
    display: block;
    min-height: 0;
  }

  .nuit-photo {
    position: relative;
  }

  .nuit-photo img {
    aspect-ratio: 4 / 3;
  }

  .nuit-voile {
    display: none;
  }

  .nuit-texte {
    padding-block: 2rem 3.5rem;
  }
}

/* --------------------------------- Avis ----------------------------------- */
#avis {
  background: var(--bois-pale);
}

.avis-resume {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  margin-bottom: 2.5rem;
}

.avis-chiffre {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(4rem, 2rem + 6vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.avis-extrait blockquote {
  position: relative;
  border-left: 0;
  padding-left: 0;
}

.avis-extrait blockquote::before {
  content: "\00AB";
  display: block;
  font-family: var(--serif);
  font-size: 3.5rem;
  line-height: 0.6;
  margin: 0.6rem 0 0.4rem;
  color: var(--bois);
}

.avis-extrait,
.alentours-liste li {
  border-top-color: rgba(47, 74, 63, 0.35);
}

/* --------------------------- Curseur et phase ------------------------------ */
.curseur-lune {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  background: var(--lune);
  color: var(--sauge);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  pointer-events: none;
  transform: scale(0);
  box-shadow: 0 0 0 1px rgba(47, 74, 63, 0.15), 0 10px 40px rgba(17, 26, 23, 0.25);
}

.phase-lune {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 110;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  pointer-events: none;
}

@media (max-width: 1099px) {
  .phase-lune {
    display: none;
  }
}

/* ---------------------------- Transitions de page -------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-sortie 320ms var(--ease) both;
}

::view-transition-new(root) {
  animation: page-entree 620ms var(--ease) both;
}

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

@keyframes page-entree {
  from { opacity: 0; transform: translateY(18px); }
}

/* ------------------------------- Mouvement --------------------------------- */
/* Seuls les éléments du premier écran sont masqués avant motion.js, et seulement sous
   html.js-motion : sans JavaScript ou en mouvement réduit, tout est visible. */
.js-motion [data-hero-titre],
.js-motion [data-hero-faits] li,
.js-motion main h1 {
  visibility: hidden;
}

.js-motion [data-hero-photo] {
  clip-path: circle(0% at 80% 28%);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  @view-transition {
    navigation: none;
  }

  .curseur-lune,
  .phase-lune {
    display: none;
  }
}