/* =========================================================
   Les Gîtes de Marie — sections et composants
   ========================================================= */

/* --- Bandeau de simulation --------------------------------------------
   Discret, en bas à droite. Pour le retirer : data-apercu="off" sur <html>
   ---------------------------------------------------------------------- */
/* En bas à gauche : le badge de Netlify occupe déjà le bas à droite. */
.apercu {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(28, 26, 22, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--sortie), transform var(--sortie);
  color: #f4f0e8;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.apercu::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #b5482a;
}
.apercu:hover { background: rgba(28, 26, 22, 0.97); transform: translateY(-2px); }
[data-apercu='off'] .apercu { display: none; }

/* Pages gîte : le badge vit dans le héros, au-dessus du lieu. Il défile avec
   la page au lieu de flotter sur les textes et la vidéo. */
.apercu--heros {
  position: static;
  display: flex;
  width: fit-content;
  margin-bottom: 1.4rem;
}

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

.entete {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 2rem) var(--marge);
  color: #fff;
}
.entete:not(.entete--fixe)::before {
  content: '';
  position: absolute;
  inset: 0;
  height: 200%;
  background: linear-gradient(to bottom, rgba(18, 14, 10, 0.55), transparent);
  pointer-events: none;
}
.entete > * { position: relative; }

/* Sur le héros, la barre est transparente et ne montre que la marque et les
   langues, en blanc sur la photo : le sélecteur est visible dès l'arrivée.
   Le fond crème glisse dessous une fois le héros dépassé. */
.entete--fixe {
  position: fixed;
  color: #fff;
  transition: color var(--sortie);
  padding-block: 0.85rem;
}
.entete--fixe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(250, 247, 241, 0.96);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  /* Une ombre douce plutôt qu'un filet dur : la barre se pose, elle ne coupe pas. */
  box-shadow: 0 1px 0 rgba(224, 213, 194, 0.7), 0 6px 22px rgba(36, 30, 26, 0.07);
  transform: translateY(calc(-100% - 2rem));   /* ombre comprise */
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Voile en haut de la photo, comme sur l'accueil : le blanc reste lisible
   même sur un ciel ou une façade clairs. */
.entete--fixe::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 200%;
  background: linear-gradient(to bottom, rgba(18, 14, 10, 0.5), transparent);
  pointer-events: none;
  transition: opacity var(--sortie);
}
.entete--fixe.est-visible,
.entete--fixe.menu-ouvert { color: var(--encre); }
.entete--fixe.est-visible::before,
.entete--fixe.menu-ouvert::before { transform: none; }
.entete--fixe.est-visible::after,
.entete--fixe.menu-ouvert::after { opacity: 0; }
/* Le héros porte déjà ses deux boutons : la navigation attend qu'on l'ait dépassé. */
.entete--fixe .nav > a { transition: opacity var(--sortie), visibility var(--sortie); }
.entete--fixe .nav > .btn {
  transition: background var(--sortie), color var(--sortie), border-color var(--sortie),
              transform var(--sortie), box-shadow var(--sortie),
              opacity var(--sortie), visibility var(--sortie);
}
.entete--fixe:not(.est-visible):not(.menu-ouvert) .nav > a {
  opacity: 0;
  visibility: hidden;
}

/* --- Lockup de marque : monogramme + filet + nom ----------------------- */

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.monogramme {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linejoin: round;
  opacity: 0.9;
  transition: transform var(--sortie);
}
.marque-texte { display: block; }
.marque .monogramme + .marque-texte {
  padding-left: 0.85rem;
  border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.marque-texte span {
  display: block;
  font-family: var(--police-texte);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-top: 0.3rem;
  opacity: 0.72;
}
.entete--fixe.est-visible .marque-texte span,
.entete--fixe.menu-ouvert .marque-texte span { color: var(--accent); opacity: 1; }
@media (hover: hover) {
  .marque:hover .monogramme { transform: translateY(-2px); }
}
@media (max-width: 520px) {
  .monogramme { display: none; }
  .marque .monogramme + .marque-texte { padding-left: 0; border-left: 0; }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 2.2rem);
  font-size: var(--t-petit);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Filet entre la lecture et l'action. */
.nav .btn { margin-left: 0.4rem; }
.nav .btn::before {
  content: '';
  position: absolute;
  left: calc(-0.4rem - clamp(0.9rem, 1.6vw, 2.2rem) / 2);
  top: 50%;
  height: 1.5rem;
  border-left: 1px solid var(--filet);
  transform: translateY(-50%);
}
.nav .btn { position: relative; }
@media (max-width: 1300px) { .nav .btn::before { display: none; } }
.nav a:not(.btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;   /* 44 px : la navigation est tactile sur tablette */
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.88;
  transition: opacity var(--sortie);
}
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.6rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sortie);
}
@media (hover: hover) {
  .nav a:not(.btn):hover { opacity: 1; }
  .nav a:not(.btn):hover::after { transform: scaleX(1); }
}
.nav .btn { min-height: 2.75rem; padding: 0.6rem 1.4rem; }
/* Sous 1180 px, les cinq liens, Réserver et la langue ne tiennent plus sur
   une ligne : les liens passent dans le menu burger. */
@media (max-width: 1300px) {
  .nav > a:not(.btn) { display: none; }
}

/* --- Sélecteur de langue : menu déroulant -------------------------------
   La langue courante seule (« FR ⌄ ») ; les trois langues au clic. Un
   <details> : marche sans JS, au clavier, et prend peu de place. */

.langues { position: relative; }
.langues summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.75rem;
  padding: 0 0.85rem 0 calc(0.95rem + 0.14em);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--r-pill);
  font-size: var(--t-oeil);
  font-weight: 600;
  letter-spacing: 0.14em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color var(--sortie), background var(--sortie);
}
.langues summary::-webkit-details-marker { display: none; }
.langues summary svg {
  width: 0.8rem; height: 0.8rem;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--sortie);
}
.langues[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) { .langues summary:hover { border-color: currentColor; } }
.langues ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 120;
  min-width: 9.5rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--creme);
  box-shadow: 0 18px 40px -16px rgba(36, 30, 26, 0.4);
  text-transform: none;
  letter-spacing: 0.02em;
}
.langues ul a {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.85rem;
  border-radius: calc(var(--r-carte) - 0.35rem);
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
}
.langues ul a[aria-current] { color: var(--accent-fonce); font-weight: 700; }
@media (hover: hover) { .langues ul a:hover { background: var(--creme-2); } }
/* Dans la barre : pas de filet ni de soulignement hérités de .nav a */
.nav .langues ul a { min-height: 0; opacity: 1; }
.nav .langues ul a::after { display: none; }

/* Drapeaux à côté des langues (demande de Marie, 06/10/2026). Dessinés en
   SVG ici plutôt qu'en émojis, que Windows n'affiche pas. Le bouton montre
   le drapeau de la page, chaque lien celui de sa langue. */
:root {
  --drapeau-fr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h3v2H0z'/%3E%3Cpath fill='%230055a4' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23ef4135' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
  --drapeau-en: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath fill='%23012169' d='M0 0v30h60V0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath stroke='%23c8102e' stroke-width='4' clip-path='url(%23t)' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23c8102e' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E");
  --drapeau-de: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffce00' d='M0 0h5v3H0z'/%3E%3Cpath fill='%23d00' d='M0 0h5v2H0z'/%3E%3Cpath d='M0 0h5v1H0z'/%3E%3C/svg%3E");
}
html[lang="fr"] .langues summary, .langues a[lang="fr"], .menu-langues a[lang="fr"] { --drapeau: var(--drapeau-fr); }
html[lang="en"] .langues summary, .langues a[lang="en"], .menu-langues a[lang="en"] { --drapeau: var(--drapeau-en); }
html[lang="de"] .langues summary, .langues a[lang="de"], .menu-langues a[lang="de"] { --drapeau: var(--drapeau-de); }
.langues summary::before,
.langues ul a::before,
.menu-langues a::before {
  content: '';
  flex: none;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  background: var(--drapeau) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(36, 30, 26, 0.18);
}
.langues ul a::before,
.menu-langues a::before { margin-right: 0.6rem; }

/* Téléphone : pas la place pour Contact et les langues côte à côte. Sur la
   photo, on montre les langues (le héros a déjà « Nous contacter ») ; une
   fois le héros dépassé, Réserver reprend sa place et les langues restent
   dans le menu. */
@media (max-width: 720px) {
  .entete--fixe:not(.est-visible):not(.menu-ouvert) .nav .btn { display: none; }
  .entete--fixe.est-visible .nav .langues,
  .entete--fixe.menu-ouvert .nav .langues { display: none; }
  /* Le fond crème apparaît en fondu, comme avant, plutôt qu'en glissé. */
  .entete--fixe::before {
    transform: none;
    opacity: 0;
    transition: opacity var(--sortie);
  }
  .entete--fixe.est-visible::before,
  .entete--fixe.menu-ouvert::before { opacity: 1; }
}

/* --- Menu burger -------------------------------------------------------
   Téléphone et tablette : les liens de section passent dans le menu.
   ---------------------------------------------------------------------- */
.burger,
.menu-mobile { display: none; }

@media (max-width: 1300px) {
  .nav { gap: 0.6rem; }

  .burger {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  /* Trois traits qui se croisent en × à l'ouverture. */
  .burger span,
  .burger span::before,
  .burger span::after {
    display: block;
    width: 1.1rem;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform var(--sortie), background var(--sortie);
  }
  .burger span { position: relative; }
  .burger span::before,
  .burger span::after { content: ''; position: absolute; left: 0; }
  .burger span::before { transform: translateY(-0.36rem); }
  .burger span::after { transform: translateY(0.36rem); }
  .burger[aria-expanded='true'] span { background: transparent; }
  .burger[aria-expanded='true'] span::before { transform: rotate(45deg); }
  .burger[aria-expanded='true'] span::after { transform: rotate(-45deg); }

  .menu-mobile:not([hidden]) {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    padding: 0.5rem var(--marge) 1.8rem;
    background: var(--creme);
    border-top: 1px solid var(--filet);
    box-shadow: 0 18px 36px rgba(36, 30, 26, 0.16);
  }
  .menu-mobile ul { margin: 0 0 1.5rem; padding: 0; list-style: none; }
  .menu-mobile li a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--filet);
    font-family: var(--police-titre);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--encre);
    text-decoration: none;
  }
  .menu-mobile .btn { width: 100%; }
  .menu-langues {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    margin: 1.2rem 0 0;
  }
  .menu-langues a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.85rem;
    border-radius: var(--r-pill);
    font-size: var(--t-petit);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--brume);
  }
  .menu-langues a[aria-current] {
    color: var(--encre);
    font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--encre);
  }
}
/* Tablette : le menu se pose en panneau à droite plutôt qu'en rideau. */
@media (min-width: 721px) and (max-width: 1300px) {
  .menu-mobile:not([hidden]) {
    left: auto;
    width: min(26rem, 100%);
    border-radius: 0 0 0 var(--r-carte);
  }
}

/* =========================================================
   Accueil — les deux gîtes, côte à côte
   ========================================================= */

.accueil {
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  display: grid;
  /* Les deux gîtes à égalité : chacun sa moitié d'écran. */
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 0.8vw, 0.9rem);
  padding: clamp(0.5rem, 0.8vw, 0.9rem);
  background: var(--creme);
}

/* --- Panneau ----------------------------------------------------------- */

.choix {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-carte);
  text-decoration: none;
  color: var(--encre);
  isolation: isolate;
}
.choix picture { display: contents; }

.choix img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transform: scale(1.03);
  transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter var(--sortie);
}
/* Diaporama : les photos de Marie (portrait) se relaient en fondu. */
.choix-diapo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.choix-diapo img {
  object-position: 50% 40%;
  transition: opacity 1.8s ease,
              transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter var(--sortie);
}
.choix-diapo img:not(.est-active) { opacity: 0; }
/* Le texte est dans une carte opaque : le voile n'a plus qu'à donner
   de l'assise à la photo, plus à porter la lisibilité. */
.choix::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(18, 14, 10, 0.45) 0%,
    rgba(18, 14, 10, 0.08) 48%,
    rgba(18, 14, 10, 0.24) 100%);
  transition: opacity var(--sortie);
}

/* --- Carte de texte, en crème ------------------------------------------ */

.choix-texte {
  position: relative;
  grid-row: 2;
  min-width: 0;
  margin: clamp(0.9rem, 1.6vw, 1.7rem);
  padding: clamp(1.4rem, 2.2vw, 2.2rem);
  border-radius: var(--r-carte);
  background: rgba(250, 247, 241, 0.93);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  box-shadow: 0 18px 46px rgba(24, 19, 14, 0.24);
  transition: background var(--sortie), box-shadow var(--sortie);
}

.choix-lieu {
  display: block;
  max-width: 100%;
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
/* Desktop : une carte compacte, calée en bas à gauche, pour que la photo
   reste le sujet (retour de Marie, 06/10/2026). Le logo se met à côté du
   lieu et du nom. Les deux cartes ont exactement la même taille : même
   largeur, et la rangée du bas de l'accueil (sous-grille) prend la hauteur
   de la plus haute des deux. */
@media (min-width: 901px) {
  .accueil { grid-template-rows: minmax(0, 1fr) auto; }
  /* Essai du 07/10/2026 : plein écran, sans le cadre crème autour des
     photos ; un filet sombre sépare les deux gîtes, comme sur mobile.
     Pour revenir au cadre : supprimer ces deux règles. */
  .accueil { gap: 2px; padding: 0; background: var(--encre); }
  .accueil .choix { border-radius: 0; }
  .choix {
    grid-row: 1 / span 2;
    grid-template-rows: subgrid;
  }
  .choix-texte {
    grid-column: 1;
    justify-self: start;
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 0.85rem;
    width: min(21.5rem, calc(100% - 2 * clamp(0.9rem, 1.6vw, 1.7rem)));
    max-width: none;
    padding: 0.9rem 1.15rem 1rem;
  }
  .choix-texte .choix-logo {
    grid-row: 1 / span 2;
    align-self: center;
    width: 2.4rem;
    margin: 0;
  }
  .choix .choix-lieu { grid-column: 2; margin-bottom: 0.1rem; font-size: 0.68rem; letter-spacing: 0.18em; }
  .choix-lieu .lieu-region { display: none; }
  .choix .choix-texte h2 { grid-column: 2; margin: 0; font-size: clamp(1.5rem, 1.7vw, 1.8rem); white-space: nowrap; }
  .choix .choix-desc { grid-column: 1 / -1; margin: 0.7rem 0 0.55rem; font-size: 0.9rem; line-height: 1.45; }
  /* La note suit la description ; le bouton ferme la carte. */
  .choix-bas { display: contents; }
  .choix .choix-bas .note { grid-column: 1 / -1; font-size: 0.82rem; color: var(--encre-douce); }
  .choix .choix-lien {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: end;
    margin-top: 0.7rem;
    white-space: nowrap;
    min-height: 2.3rem;
    padding: 0.45rem 1.05rem;
    font-size: 0.7rem;
  }
}
/* Sur ordinateur aussi, la description se réduit à l'essentiel : la carte
   reste petite, la photo parle. */
@media (min-width: 901px) {
  .desc-long { display: none; }
}
/* Mobile : la description se réduit à l'essentiel (sauna et hammam). */
@media (max-width: 900px) {
  .desc-long { display: none; }
}
/* Chaque lieu reste d'un bloc : jamais « HAUTE- » en fin de ligne. */
.choix-lieu > span { white-space: nowrap; }
.choix h2 {
  color: var(--encre);
  font-size: clamp(2.2rem, 3.7vw, 3.6rem);
  margin-bottom: 0.45rem;
}
/* Les deux atouts de chaque gîte (textes de Marie, 07/10/2026), en texte
   seul : le premier en texte courant, le second en italique de titre,
   doré, pour qu'ils ne se lisent pas comme deux lignes identiques. */
.choix .choix-desc { display: block; max-width: none; }
.choix-atout { display: block; }
.choix-atout + .choix-atout {
  margin-top: 0.1rem;
  font-family: var(--police-titre);
  font-size: 1.22em;
  font-style: italic;
  line-height: 1.25;
  color: var(--accent-fonce);
}
.choix-atout > span { min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.choix-desc {
  display: block;
  max-width: 40ch;
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.6;
  color: var(--encre-douce);
  margin-bottom: 1.5rem;
}
.choix-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.1rem;
  font-size: var(--t-petit);
  color: var(--encre-douce);
}

.choix-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.9rem;
  padding: 0.7rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background var(--sortie), transform var(--sortie),
              box-shadow var(--sortie);
}
.choix-lien .fleche { transition: transform var(--sortie); }

.note {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
  font-weight: 400;
}
.note svg { width: 0.9em; height: 0.9em; fill: var(--accent); }

.fanion {
  display: inline-block;
  padding: 0.34rem 0.85rem;
  border: 1px solid var(--filet);
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brume);
}

@media (hover: hover) {
  a.choix:hover img { transform: scale(1.08); }
  a.choix:hover::after { opacity: 0.8; }
  a.choix:hover .choix-texte {
    background: rgba(250, 247, 241, 0.97);
    box-shadow: 0 24px 58px rgba(24, 19, 14, 0.3);
  }
  a.choix:hover .choix-lien {
    background: var(--btn-fond-survol);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(24, 19, 14, 0.34);
  }
  a.choix:hover .choix-lien .fleche { transform: translateX(4px); }
}
a.choix:focus-visible { outline-offset: -4px; }

/* --- Pastilles posées sur la photo -------------------------------------- */

.pastille {
  position: absolute;
  top: clamp(1rem, 1.8vw, 1.7rem);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.46rem 1rem;
  border-radius: var(--r-pill);
  /* Les distinctions doivent se voir : pastille claire et lumineuse sur
     la photo, étoile dorée (07/10/2026). */
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(250, 247, 241, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px -8px rgba(18, 14, 10, 0.45);
  color: var(--encre);
  font-size: var(--t-oeil);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pastille svg { width: 1em; height: 1em; fill: #c8902f; }
.pastille--gauche { left: clamp(1rem, 1.8vw, 1.7rem); }
.pastille--droite { right: clamp(1rem, 1.8vw, 1.7rem); }
/* Accueil ordinateur : la distinction se pose juste au-dessus de la carte,
   alignée sur elle. En haut, le dégradé de l'en-tête la voilait. */
@media (min-width: 901px) {
  .accueil .pastille {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    grid-row: 2;
    grid-column: 1;
    align-self: start;
    justify-self: start;
    margin: clamp(0.9rem, 1.6vw, 1.7rem);
    transform: translateY(calc(-100% - 0.6rem));
  }
}

/* En mobile, l'accueil passe bord à bord : plus de cadre crème autour des
   photos, et le texte se pose directement sur l'image, sans carte. */
@media (max-width: 900px) {
  .page-accueil { background: var(--encre); }
  .accueil {
    height: 100svh;
    height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    padding: 0;
    background: var(--encre);
  }
  .choix { border-radius: 0; }
  .choix::after {
    background: linear-gradient(to top,
      rgba(18, 14, 10, 0.86) 0%,
      rgba(18, 14, 10, 0.5) 38%,
      rgba(18, 14, 10, 0) 62%,
      rgba(18, 14, 10, 0.3) 100%);
  }
  .choix-texte {
    margin: 0;
    padding: 1.2rem var(--marge) 1.5rem;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .choix h2 { color: #fff; font-size: 2.2rem; margin-bottom: 0.3rem; }
  .choix-lieu { color: rgba(255, 255, 255, 0.86); margin-bottom: 0.5rem; }
  .choix-desc { color: rgba(255, 255, 255, 0.9); margin-bottom: 1rem; }
  .choix-bas { color: #fff; }
  .note svg { fill: #e8b55c; }
  /* Sur photo, le bouton s'inverse, comme .btn--clair dans le héros. */
  .choix-lien { background: var(--creme); color: var(--encre); }
  /* La pastille Superhôte tomberait sur le lockup de marque. */
  .pastille--droite { display: none; }
}
@media (max-width: 560px) {
  .choix-lieu { letter-spacing: 0.14em; }
  /* La marque, juste au-dessus, dit déjà « Haute-Saône ». */
  .lieu-region { display: none; }
  .choix-desc { font-size: 0.95rem; line-height: 1.5; max-width: none; }
  .choix-bas { gap: 0.6rem 1rem; }
  .choix-lien { min-height: 2.75rem; padding: 0.6rem 1.3rem; }
}
/* Sur l'accueil, le bandeau d'aperçu rejoint l'en-tête, à côté du
   sélecteur de langue : en bas, il mordait sur les textes des deux gîtes. */
.entete-droite {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.entete .apercu { position: static; }
@media (max-width: 560px) {
  /* La marque doit tenir sur une ligne : le badge et le sélecteur se serrent. */
  .page-accueil .marque-texte { white-space: nowrap; }
  .entete-droite { gap: 0.45rem; }
  .entete .apercu { padding: 0.45rem 0.7rem; gap: 0.4rem; }
  .entete .apercu span { display: none; }
  .entete .langues summary { padding: 0 0.7rem 0 calc(0.8rem + 0.14em); }
}
/* Trois langues et le badge ne tiennent plus à côté de la marque : le badge
   passe sous le sélecteur, sur la photo. */
@media (max-width: 420px) {
  .page-accueil .entete { align-items: flex-start; }
  .entete-droite { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.5rem; }
  .entete-droite .apercu { order: 1; }
}
@media (max-width: 400px) {
  .entete-droite { gap: 0.35rem; }
  .entete .apercu { padding: 0.4rem 0.55rem; letter-spacing: 0.1em; }
  .entete .langues summary { padding: 0 0.6rem 0 calc(0.65rem + 0.14em); }
}
/* Accueil sur téléphone : en-tête réduit à la marque et aux langues, et pas
   de pastilles sur les photos (la note et les avis sont déjà sous chaque
   gîte ; le badge d'aperçu reste en tête des pages gîte). */
@media (max-width: 900px) {
  .accueil .pastille { display: none; }
}
@media (max-width: 560px) {
  .page-accueil .entete .apercu { display: none; }
}
/* Écrans de 320 px : le badge d'aperçu cède la place à la marque. */
@media (max-width: 340px) {
  .entete .apercu { display: none; }
}

/* =========================================================
   Héros de page gîte
   ========================================================= */

.heros {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
}
.heros img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.heros::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(18, 14, 10, 0.86) 0%,
    rgba(18, 14, 10, 0.34) 45%,
    rgba(18, 14, 10, 0.4) 100%);
}
/* Diaporama : trois photos en fondu, la première seule visible sans JS ou
   en mouvement réduit (site.js ne lance alors pas la rotation). */
.heros-diapo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.heros-diapo img { transition: opacity 1.8s ease; }
.heros-diapo img:not(.est-active) { opacity: 0; }
.heros-contenu {
  width: 100%;
  min-width: 0;
  /* La carte de chiffres remonte sur le héros : on dégage le bas. */
  padding-block: clamp(3rem, 9vh, 6rem) clamp(7.5rem, 15vh, 11rem);
}
.heros h1 { color: #fff; margin-bottom: 0.3em; max-width: 14ch; }
.heros .oeil { color: rgba(255, 255, 255, 0.85); }
.heros-resume {
  max-width: 44ch;
  font-size: var(--t-heros);
  line-height: 1.7;
  margin-bottom: 2.2rem;
}
.heros-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 2rem; }
/* Contact et Airbnb : des liens, pas deux boutons de plus. */
.heros-liens { display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; }
.heros-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75rem;
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 0.4em;
  transition: text-decoration-color var(--sortie);
}
.heros-lien:hover { text-decoration-color: #fff; }

/* Labels de confiance sous les boutons : Gîtes de France, Superhôte Airbnb. */
/* Labels de confiance : une ligne de texte discrète, sans pastilles. */
.heros-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.heros-labels li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 560px) {
  .heros-labels { flex-direction: column; align-items: flex-start; }
  .heros-labels li + li::before { display: none; }
}
.heros-labels li + li::before {
  content: '';
  width: 3px; height: 3px;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.heros-labels svg { width: 0.95em; height: 0.95em; fill: #e8b55c; }
/* Trois épis dessinés (pas le logo du label) */
.epis { display: inline-flex; gap: 0.05em; color: #e8b55c; }
.epis svg { width: 0.6em; height: 1.2em; }

/* =========================================================
   Chiffres clés — carte posée sur le bas du héros
   ========================================================= */

.chiffres {
  position: relative;
  z-index: 10;
  margin-top: clamp(-4.5rem, -5vw, -3rem);
  pointer-events: none;
}
.chiffres ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1rem, 2vw, 2rem);
  list-style: none;
  text-align: center;
  border-radius: var(--r-carte);
  background: var(--creme);
  box-shadow: 0 22px 54px rgba(24, 19, 14, 0.18);
  pointer-events: auto;
}
.chiffres li {
  padding-inline: clamp(0.4rem, 1.5vw, 1.4rem);
  transition: transform var(--sortie);
}
.chiffres li + li { border-left: 1px solid var(--filet); }
.chiffres b {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  font-weight: 600;
  color: var(--encre);
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.chiffres li > span {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.chiffres b svg {
  width: 0.42em; height: 0.42em;
  margin-left: 0.12em;
  vertical-align: 0.55em;
  fill: var(--accent);
}
@media (hover: hover) { .chiffres li:hover { transform: translateY(-3px); } }


@media (max-width: 760px) {
  /* Plus de chevauchement : la carte se pose simplement sous le héros. */
  .chiffres { margin-top: 0; }
  .chiffres ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--filet);
  }
  /* La note passe en tête, sur toute la largeur ; les quatre mesures
     forment dessous un 2 × 2 sans orphelin. */
  .chiffres li + li { border-left: 0; }
  .chiffres .chiffre-note {
    order: -1;
    grid-column: 1 / -1;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--filet);
  }
  .chiffres li:nth-child(even) { border-left: 1px solid var(--filet); }
}

/* =========================================================
   Accroche : texte + photo décalée
   ========================================================= */

.accroche {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.accroche-photo { position: relative; }
.accroche-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-carte); }
.accroche-photo::before {
  content: '';
  position: absolute;
  inset: auto -1.2rem -1.2rem auto;
  width: 60%;
  height: 55%;
  border: 1px solid var(--accent);
  border-radius: var(--r-carte);
  opacity: 0.5;
  z-index: -1;
}
.signature {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent);
  margin-top: 1.5rem;
}
@media (max-width: 820px) {
  .accroche { grid-template-columns: 1fr; }
  .accroche-photo { order: -1; }
  .accroche-photo img { aspect-ratio: 3 / 2; }
  /* Le cadre décalé n'a plus de marge où déborder : on le retire. */
  .accroche-photo::before { display: none; }
}

/* =========================================================
   Points forts
   ========================================================= */

.forts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.fort { transition: transform var(--sortie); }
.fort-photo {
  border-radius: var(--r-carte);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.fort img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  .fort:hover { transform: translateY(-4px); }
  .fort:hover img { transform: scale(1.05); }
}
.fort h3 { font-size: var(--t-m); margin-bottom: 0.4em; }
.fort p { font-size: var(--t-petit); font-weight: 400; line-height: 1.75; max-width: 46ch; }
.fort-numero {
  display: block;
  font-size: var(--t-oeil);
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

/* =========================================================
   Galerie : filtres par pièce + mosaïque + visionneuse
   ========================================================= */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(1.8rem, 3vw, 2.5rem);
}
.chip {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--filet);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--encre-douce);
  font-family: var(--police-texte);
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--sortie), color var(--sortie),
              border-color var(--sortie), transform var(--sortie);
}
.chip[aria-pressed='true'] {
  background: var(--btn-fond);
  border-color: var(--btn-fond);
  color: var(--btn-texte);
}
@media (hover: hover) {
  .chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
  .chip[aria-pressed='true']:hover { color: var(--btn-texte); background: var(--btn-fond-survol); }
}

.galerie {
  /* Mosaïque en colonnes : les portraits et les paysages gardent leur
     proportion, et le filtrage ne laisse jamais de trou dans la grille. */
  columns: 3;
  column-gap: clamp(0.6rem, 1.2vw, 1.1rem);
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.galerie button {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 clamp(0.6rem, 1.2vw, 1.1rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-img);
  background: var(--sable-clair);
  cursor: zoom-in;
  overflow: hidden;
  break-inside: avoid;
  transition: transform var(--sortie), box-shadow var(--sortie);
}
.galerie button img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Voile + loupe au survol : on comprend que la photo s'agrandit. */
.galerie button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(36, 30, 26, 0.45), rgba(36, 30, 26, 0) 55%);
  opacity: 0;
  transition: opacity var(--sortie);
}
.galerie .loupe {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(250, 247, 241, 0.94);
  color: var(--encre);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--sortie), transform var(--sortie);
}
@media (hover: hover) {
  .galerie button:hover { transform: translateY(-3px); box-shadow: var(--ombre-haut); }
  .galerie button:hover img { transform: scale(1.05); }
  .galerie button:hover::after { opacity: 1; }
  .galerie button:hover .loupe { opacity: 1; transform: none; }
}
.galerie button:focus-visible .loupe { opacity: 1; transform: none; }
.galerie button[hidden],
.galerie button.au-dela { display: none; }

@media (max-width: 720px) {
  .galerie { columns: 2; }
}

.galerie-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 1.6rem;
  font-size: var(--t-petit);
  font-weight: 400;
  color: var(--brume);
}
.galerie-pied p { margin: 0; }
.galerie-plus[hidden] { display: none; }

@media (max-width: 720px) {
  /* Les filtres deviennent une bande qui défile, bord à bord. */
  .filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge);
    padding-bottom: 0.3rem; }
  .filtres::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

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

/* <dialog> ouvert avec showModal() : le reste de la page devient inerte pour
   le clavier et les lecteurs d'écran. */
.visionneuse {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  color: inherit;
  z-index: 100;
  display: none;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(18, 15, 12, 0.97);
}
.visionneuse::backdrop { background: transparent; }
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse figure { margin: 0; display: grid; justify-items: center; }
.visionneuse img {
  max-width: min(100%, 1100px);
  max-height: 82svh;
  width: auto;
  border-radius: var(--r-img);
  object-fit: contain;
}
.visionneuse figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin-top: 1.2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--t-petit);
}
.visionneuse .v-compteur {
  padding: 0.28rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-pill);
  font-size: var(--t-oeil);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.visionneuse button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--sortie), border-color var(--sortie);
}
.visionneuse button:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.visionneuse .v-prec { left: clamp(0.6rem, 2vw, 2rem); }
.visionneuse .v-suiv { right: clamp(0.6rem, 2vw, 2rem); }
.visionneuse .v-fermer {
  top: clamp(0.8rem, 2vw, 1.8rem);
  right: clamp(0.6rem, 2vw, 2rem);
  transform: none;
}

/* =========================================================
   Visite en vidéo — Charivari : deux vidéos d'Anaelle Maillard
   (intérieur vertical, extérieurs au drone en 16:9) ; chalet : une seule
   ========================================================= */

.video-intro { color: #d8cfc2; }

/* Les deux vidéos du Charivari (Marie trouvait celle de l'intérieur trop
   petite, 06/10/2026).
   Tablette : côte à côte, même hauteur. Téléphone : l'une sous l'autre.
   Ordinateur : mise en page éditoriale. La visite intérieure (9:16) occupe
   toute la hauteur à gauche ; à droite, le titre et l'intro en haut, la
   vidéo drone en bas, alignée sur le bas de la verticale, puis Instagram. */
.reels {
  display: grid;
  grid-template-columns: minmax(0, 0.5625fr) minmax(0, 1.7778fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 759px) {
  .reels { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .video .enveloppe:has(> .reels) {
    display: grid;
    grid-template-columns: min(calc(min(80svh, 48rem) * 9 / 16), 40%) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: clamp(2.5rem, 5.5vw, 5rem);
  }
  .video .enveloppe:has(> .reels) > * { grid-column: 2; }
  .video .reels { display: contents; }
  .video .reels > .reel:first-child { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .video .reels > .reel:last-child { grid-column: 2; grid-row: 4; align-self: end; margin-top: 2.2rem; }
  .video .enveloppe:has(> .reels) > .lien-instagram { grid-row: 5; justify-self: start; margin-top: 1.2rem; }
}
.reel { margin: 0; min-width: 0; }
.reel figcaption {
  margin-top: 1rem;
  font-size: var(--t-oeil);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.reel figcaption b { font-weight: 500; color: #e8b55c; }

.reel-lecture {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(18, 14, 10, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translate(-50%, -50%);
  transition: background var(--sortie), border-color var(--sortie), transform var(--sortie);
}
.reel-lecture svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.15rem;
  fill: var(--creme);
  transition: fill var(--sortie);
}
/* Chalet : la visite complète, lue dans la page. Vidéo verticale (9:16),
   texte à gauche, lecteur à droite ; empilés sur mobile. */
.visite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
}
@media (max-width: 759px) {
  .visite { grid-template-columns: 1fr; }
}
.visite-lecteur {
  width: 100%;
  max-width: 340px;
  margin: 0;
  justify-self: center;
}
.visite-cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-carte);
  background: #2e2620;
}
.visite-cadre video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visite-lancer {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(to top,
    rgba(18, 14, 10, 0.55) 0%,
    rgba(18, 14, 10, 0.08) 45%,
    rgba(18, 14, 10, 0.15) 100%);
  cursor: pointer;
}
.visite-lancer[hidden] { display: none; }
/* Téléphone : une carte compacte (4:5, couverture recadrée) qui tient dans
   l'écran avec son titre. Toucher la carte ouvre la vidéo en grand,
   verticale, sur toute la hauteur ; rien ne se lit dans la carte. */
@media (max-width: 759px) {
  .visite-lecteur { max-width: none; }
  .visite-cadre { aspect-ratio: 4 / 5; max-height: 70svh; }
  .visite-cadre .visite-agrandir { display: none; }
  /* Grand écran : une bande en haut pour la croix, la vidéo en dessous. */
  dialog.visite-ecran[open] { padding: 4.2rem 0 1rem; }
  .visite-ecran .visite-ecran-cadre { height: min(calc(100dvh - 5.5rem), calc(92vw * 16 / 9)); }
}
/* Vidéo horizontale (drone du Charivari) : 16:9 partout, y compris sur
   téléphone, où elle s'ouvre aussi en grand écran mais à l'horizontale. */
.visite-cadre.visite-cadre--paysage { aspect-ratio: 16 / 9; max-height: none; }
.visite-ecran.visite-ecran--paysage .visite-ecran-cadre {
  width: min(92vw, calc(88dvh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
}
.visite-lancer:focus-visible { outline-color: #e8b55c; outline-offset: 4px; }
@media (hover: hover) {
  .visite-lancer:hover .reel-lecture {
    background: var(--creme);
    border-color: var(--creme);
    transform: translate(-50%, -50%) scale(1.06);
  }
  .visite-lancer:hover .reel-lecture svg { fill: var(--encre); }
}
/* Bouton « agrandir », en haut à droite du lecteur. */
.visite-agrandir,
.visite-ecran-fermer {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(18, 14, 10, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background var(--sortie), border-color var(--sortie);
}
.visite-agrandir {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 1;
}
.visite-agrandir svg,
.visite-ecran-fermer svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .visite-agrandir:hover,
  .visite-ecran-fermer:hover { background: rgba(18, 14, 10, 0.7); border-color: #fff; }
}
/* Si le plein écran natif passe quand même (Safari, Firefox), la vidéo
   garde son format au lieu d'être rognée. */
.visite-cadre video:fullscreen { object-fit: contain; background: #000; }
.visite-cadre video:-webkit-full-screen { object-fit: contain; background: #000; }

/* Grand écran : vidéo verticale sur toute la hauteur, le site flouté derrière. */
.visite-ecran {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.visite-ecran[open] {
  display: grid;
  place-items: center;
  animation: ecran-entree 0.35s ease;
}
.visite-ecran::backdrop {
  background: rgba(18, 14, 10, 0.5);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}
.visite-ecran-cadre {
  height: min(92dvh, calc(92vw * 16 / 9));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--r-carte);
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
.visite-ecran-cadre video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.visite-ecran-fermer {
  position: fixed;
  top: clamp(0.8rem, 2.5vw, 1.8rem);
  right: clamp(0.8rem, 2.5vw, 1.8rem);
}
@keyframes ecran-entree {
  from { opacity: 0; transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .visite-ecran[open] { animation: none; }
}
html.ecran-ouvert { overflow: hidden; }

.visite-lecteur figcaption {
  margin-top: 1rem;
  font-size: var(--t-oeil);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.visite-lecteur figcaption b { font-weight: 500; color: #a9c6c0; }

.lien-instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  padding: 0.55rem 0;
  font-size: var(--t-petit);
  color: rgba(255, 255, 255, 0.72);
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: color var(--sortie), text-decoration-color var(--sortie);
}
.lien-instagram svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.lien-instagram:hover { color: var(--creme); text-decoration-color: currentColor; }

/* =========================================================
   Équipements : six essentiels, puis le reste au clic
   ========================================================= */

.essentiels {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 × 2 : pas de rang orphelin */
  gap: clamp(1rem, 1.8vw, 1.4rem);
  margin-top: clamp(2.2rem, 4vw, 3rem);
}
@media (max-width: 900px) { .essentiels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .essentiels { grid-template-columns: 1fr; } }
.essentiel {
  padding: clamp(1.5rem, 2.4vw, 1.9rem);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--creme);
  transition: transform var(--sortie), box-shadow var(--sortie),
              border-color var(--sortie);
}
/* Icônes (Tabler, trait fin) dans un médaillon doré, comme la rangée
   « avant tout » des règles : une seule famille sur tout le site. */
.essentiel svg {
  width: 2.9rem; height: 2.9rem;
  padding: 0.68rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  stroke: var(--accent-fonce);
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.essentiel h3 { font-size: 1.4rem; margin-bottom: 0.3em; }
.essentiel p { margin: 0; font-size: var(--t-petit); font-weight: 400; color: var(--brume); }
@media (hover: hover) {
  .essentiel:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-haut);
    border-color: var(--accent);
  }
}

.tout-equip {
  margin-top: clamp(2rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--filet);
}
.tout-equip summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.5rem 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--encre);
  transition: color var(--sortie);
}
.tout-equip summary::-webkit-details-marker { display: none; }
.tout-equip summary::after {
  content: '';
  width: 0.55rem; height: 0.55rem;
  margin-left: auto;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--sortie);
}
.tout-equip[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.tout-equip summary:hover { color: var(--accent); }

.equipements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.equip h3 {
  font-family: var(--police-texte);
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--filet);
}
.equip ul { margin: 0; padding: 0; list-style: none; font-size: 0.95rem; font-weight: 400; }
.equip li { padding: 0.3rem 0; line-height: 1.6; color: var(--encre-douce); }

.note-equip {
  margin-top: 2rem;
  max-width: 62ch;
  font-size: var(--t-petit);
  font-weight: 400;
  color: var(--brume);
  font-style: italic;
}

/* =========================================================
   Services : une photo, et les tarifs comme sur une carte
   (groupés, pointillés jusqu'au prix, prix dans l'accent du gîte)
   ========================================================= */

.supplements {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.supplements-photo { position: relative; }
.supplements-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-img);
  box-shadow: 0 30px 60px -30px rgba(36, 30, 26, 0.45);
}
/* Un filet d'accent décalé derrière la photo, comme un passe-partout. */
.supplements-photo::before {
  content: '';
  position: absolute;
  inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  z-index: -1;
  border: 1px solid var(--accent);
  border-radius: var(--r-img);
  opacity: 0.45;
}
.supplements-texte h2 { margin-bottom: 0.4em; }
.supplements-intro { margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem); color: var(--brume); }
.supplements-groupe + .supplements-groupe {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
  border-top: 1px solid var(--filet);
}
.supplements-groupe h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-style: italic;
  font-weight: 500;
  color: var(--accent-fonce);
}
.supplements-note { margin: 0.35rem 0 1.1rem; font-size: var(--t-petit); color: var(--brume); }
.supplements-groupe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.supplements-groupe li { display: flex; align-items: baseline; gap: 0.8rem; }
.supplement-nom {
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 1.7vw, 1.3rem);
  line-height: 1.3;
  font-weight: 500;
  color: var(--encre);
}
.supplement-filet {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--sable);
  transform: translateY(-0.3em);
}
.supplement-prix {
  font-family: var(--police-titre);
  font-size: clamp(1.4rem, 2.2vw, 1.65rem);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
.supplement-prix small {
  margin-left: 0.35rem;
  font-family: var(--police-texte);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--brume);
}
@media (max-width: 860px) {
  .supplements { grid-template-columns: 1fr; }
  .supplements-photo img { aspect-ratio: 3 / 2; }
  .supplements-photo::before { display: none; }
}
@media (max-width: 420px) {
  .supplement-nom { font-size: 1.08rem; }
}

/* =========================================================
   Services du Charivari : une photo et un prix par service
   ========================================================= */

.services-tete { max-width: 40rem; margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
.services-tete h2 { margin-bottom: 0.35em; }
.services-tete p { margin: 0; color: var(--brume); }
.prestations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3.5vw, 3rem);
}
@media (max-width: 900px) { .prestations { grid-template-columns: 1fr; max-width: 30rem; } }
.prestation-photo { overflow: hidden; border-radius: var(--r-img); box-shadow: 0 26px 50px -30px rgba(36, 30, 26, 0.5); }
.prestation-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) { .prestation:hover .prestation-photo img { transform: scale(1.04); } }
.prestation-texte { padding-top: 1.4rem; }
.prestation h3 { margin: 0 0 0.6rem; font-size: clamp(1.4rem, 2vw, 1.65rem); }
.prestation-prix {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.prestation-prix span {
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  font-weight: 400;
  color: var(--brume);
}
.prestation-prix + .prestation-prix { font-size: clamp(1.35rem, 2vw, 1.6rem); }
.prestation-note { margin: 0.7rem 0 0; font-size: var(--t-petit); color: var(--brume); }

/* =========================================================
   Règles de la maison : colonnes séparées par un filet, comme un
   règlement affiché (3 ou 4 groupes selon le gîte)
   ========================================================= */

.regles-tete { max-width: 46rem; margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
.regles-tete h2 { margin-bottom: 0.35em; }
.regles-tete p { margin: 0; color: var(--encre-douce); }
/* Charivari : trois points que Marie tient à signaler, avant le règlement.
   Une ligne éditoriale (icône au trait, intitulé, une phrase), séparée par
   les mêmes filets que les colonnes du règlement. */
.regles-avant {
  display: grid;
  /* Le texte des fournitures (Marie, 06/10/2026) est plus long : sa
     colonne est plus large, pour que les trois restent à peu près égales. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
  margin: 0 0 clamp(2.4rem, 4.5vw, 3.4rem);
  padding: 0;
  list-style: none;
}
.regles-avant li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 0.2rem clamp(1.2rem, 2.4vw, 2rem);
}
.regles-avant li:first-child { padding-left: 0; }
.regles-avant li + li { border-left: 1px solid rgba(36, 30, 26, 0.12); }
.regles-avant svg {
  width: 2.9rem;
  height: 2.9rem;
  padding: 0.68rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  stroke: var(--accent-fonce);
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.regles-avant h3 { margin: 0.15rem 0 0.35rem; font-size: 1.35rem; }
.regles-avant p {
  margin: 0;
  font-size: var(--t-petit);
  line-height: 1.6;
  color: var(--encre-douce);
}
@media (max-width: 860px) {
  .regles-avant { grid-template-columns: 1fr; gap: 1.4rem; }
  .regles-avant li { padding: 0; }
  .regles-avant li + li { border-left: 0; }
}

.regles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  border-top: 1px solid var(--accent);
}
.regles-groupe {
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.2rem, 2.2vw, 1.8rem) 0.4rem;
}
.regles-groupe + .regles-groupe { border-left: 1px solid rgba(36, 30, 26, 0.12); }
.regles-groupe:first-child { padding-left: 0; }
.regles-groupe h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-style: italic;
  font-weight: 500;
  color: var(--accent-fonce);
}
.regles-groupe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.regles-groupe li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--t-petit);
  font-weight: 400;
  line-height: 1.6;
  color: var(--encre-douce);
}
.regles-groupe li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.4rem;
  height: 1px;
  background: var(--accent);
}
/* Une colonne : plus de filets verticaux, un filet léger entre les groupes. */
@media (max-width: 640px) {
  .regles-groupe { padding-left: 0; padding-right: 0; }
  .regles-groupe + .regles-groupe { border-left: 0; border-top: 1px solid rgba(36, 30, 26, 0.12); margin-top: 1.4rem; }
}

/* =========================================================
   Avis — de vrais verbatims Airbnb
   ========================================================= */

.avis-entete {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.avis-global { text-align: center; }
.avis-global b {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(3.4rem, 7vw, 5rem);
  font-weight: 600;
  /* Cormorant a des chiffres elzéviriens : le 4 et le 7 descendent sous la
     ligne de base et chevauchaient les étoiles avec line-height: 1. */
  line-height: 1.15;
  color: var(--creme);
}

/* Étoiles en SVG : la cinquième est remplie aux trois quarts pour dire 4,75,
   et le rendu ne dépend plus de la police d'emoji du système. */
.avis-etoiles {
  --or: #e8b55c;
  --or-vide: rgba(232, 181, 92, 0.26);
  margin-top: 0.5rem;
}
.avis-etoiles svg {
  display: block;
  width: 7.6rem;
  height: auto;
  margin-inline: auto;
}
.avis-global span {
  display: block;
  font-size: var(--t-oeil);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.7rem;
  opacity: 0.75;
}

.avis-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 × 2 : pas de rang orphelin */
  gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
  margin: 0; padding: 0;
  list-style: none;
  font-size: var(--t-petit);
}
.avis-detail li { display: grid; grid-template-columns: 1fr auto; gap: 0.45rem 0.8rem; }
.avis-detail .jauge {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.avis-detail .jauge i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: #e8b55c;
}

.temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
}
.temoignage {
  position: relative;
  margin: 0;
  padding: clamp(1.7rem, 2.6vw, 2.2rem);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-carte);
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
  transition: transform var(--sortie), border-color var(--sortie),
              background var(--sortie);
}
/* Guillemet ouvrant en filigrane, façon page de titre. */
.temoignage::before {
  content: '\201C';
  position: absolute;
  top: 0.4rem;
  right: 1.1rem;
  font-family: var(--police-titre);
  font-size: 7rem;
  line-height: 1;
  color: rgba(232, 181, 92, 0.13);
  pointer-events: none;
}
.temoignage blockquote {
  position: relative;
  margin: 0 0 1.4rem;
  font-family: var(--police-titre);
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--creme);
}
.temoignage figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.8rem;
  font-size: var(--t-oeil);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.temoignage cite { font-style: normal; color: #e8b55c; }
.temoignage figcaption span { color: rgba(255, 255, 255, 0.72); }
@media (hover: hover) {
  .temoignage:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 181, 92, 0.4);
    background: rgba(255, 255, 255, 0.055);
  }
}

.avis-plus { border: 0; padding: 0; }
.avis-plus summary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  padding: 0.72rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  list-style: none;
  cursor: pointer;
  color: var(--creme);
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--sortie), border-color var(--sortie);
}
.avis-plus summary::-webkit-details-marker { display: none; }
.avis-plus summary:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.avis-plus[open] summary { display: none; }
.avis-plus .temoignages { margin-top: clamp(1.2rem, 2.2vw, 1.8rem); }

/* Version anglaise : les avis sont traduits, on le dit. */
.avis-traduits {
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
}

.avis-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: clamp(2.2rem, 4vw, 3rem);
}
.superhote {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-pill);
  font-size: var(--t-oeil);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.superhote svg { width: 0.9em; height: 0.9em; fill: #e8b55c; }
.lien-airbnb {
  display: inline-block;
  padding: 0.55rem 0;
  font-size: var(--t-petit);
  color: rgba(255, 255, 255, 0.72);
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: color var(--sortie), text-decoration-color var(--sortie);
}
.lien-airbnb:hover { color: var(--creme); text-decoration-color: currentColor; }

@media (max-width: 720px) {
  .avis-detail { grid-template-columns: repeat(2, 1fr); }
  .avis-entete { grid-template-columns: 1fr; text-align: left; }
  .avis-global { text-align: left; }
}

/* =========================================================
   Les environs + situation
   ========================================================= */

.environs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.lieux { margin: 0; padding: 0; list-style: none; }
.lieux li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 1rem;
  margin-inline: -1rem;
  border-radius: var(--r-champ);
  border-bottom: 1px solid var(--filet);
  transition: background var(--sortie);
}
@media (hover: hover) {
  .lieux li:hover { background: var(--creme-2); }
  .lieux li:hover i { color: var(--accent-fonce); }
}
.lieux li b { font-family: var(--police-titre); font-size: 1.2rem; font-weight: 600;
  color: var(--encre); }
.lieux li i { font-style: normal; font-size: var(--t-oeil); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.lieux li p { margin: 0.2rem 0 0; font-size: var(--t-petit); font-weight: 400; color: var(--brume);
  grid-column: 1 / -1; }

.situation { position: sticky; top: 5.5rem; }
.situation img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-carte) var(--r-carte) 0 0; }
/* Carte de situation : les villes sont posées en HTML sur l'image, dans la
   police du site, pour rester lisibles à toutes les tailles. */
.plan { position: relative; }
/* Le nom se pose au-dessus de son point, pour ne pas le cacher. */
.plan-ville {
  position: absolute;
  transform: translate(-50%, calc(-100% - 0.35rem));
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre);
  white-space: nowrap;
  text-shadow: 0 0 3px var(--creme), 0 0 3px var(--creme), 0 0 6px var(--creme);
  pointer-events: none;
}
/* Lure est trop près de Ronchamp : son nom passe à gauche du point. */
.plan-ville--gauche { transform: translate(calc(-100% - 0.6rem), -50%); }
/* Champagney est trop près de Ronchamp : son nom passe à droite du point. */
.plan-ville--droite { transform: translate(0.6rem, -50%); }
/* Les plans d'eau : en italique, sans point, couleur du lac. */
.plan-ville--eau {
  transform: translate(-50%, -50%);
  font-family: var(--police-titre);
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #41605c;
}
/* Le nom du gîte se place sous le repère, pas dessus. */
.plan-ville--gite {
  transform: translate(-50%, 1.6rem);
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-fonce);
}
/* Lieux à voir : un losange (le gîte garde son rond), nom à droite du
   repère, ou à gauche sur la moitié est de la carte. Hors cadre : une
   flèche au bord, dans la direction du lieu. */
.plan-lieu {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transform: translate(-0.36rem, -50%);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--accent-fonce);
  white-space: nowrap;
  text-shadow: 0 0 3px var(--creme), 0 0 3px var(--creme), 0 0 6px var(--creme);
  pointer-events: none;
}
.plan-lieu::before,
.losange {
  content: '';
  flex: none;
  width: 0.56rem;
  height: 0.56rem;
  background: var(--creme);
  border: 2px solid var(--accent);
  transform: rotate(45deg);
}
.plan-lieu--gauche { flex-direction: row-reverse; transform: translate(calc(-100% + 0.36rem), -50%); }
.plan-lieu--hors::before { display: none; }
.plan-lieu--hors { font-style: italic; }
@media (max-width: 420px) { .plan-lieu { font-size: 0.62rem; letter-spacing: 0; } }
.plan-legende {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-size: var(--t-petit);
  color: var(--brume);
}
.plan-legende .losange { display: inline-block; margin-inline: 0.15rem; }
/* Carte interactive : fonds OpenStreetMap adoucis aux tons du site,
   repère du gîte dans sa couleur, lieux numérotés comme dans la liste. */
.carte {
  position: relative;
  z-index: 0;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-carte) var(--r-carte) 0 0;
  background: var(--creme-2);
}
.carte > img { width: 100%; height: 100%; object-fit: cover; }
.carte.leaflet-container { font-family: var(--police-texte); }
.carte .leaflet-tile-pane { filter: grayscale(0.45) sepia(0.18) brightness(1.04) contrast(0.95); }
.carte .carte-gite {
  display: grid;
  place-items: center;
  border: 3px solid var(--creme);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 6px 16px rgba(36, 30, 26, 0.35);
}
.carte .carte-gite svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.carte .carte-num {
  display: grid;
  place-items: center;
  border: 2px solid var(--creme);
  border-radius: 50%;
  background: var(--encre);
  color: var(--creme);
  font: 700 0.8rem/1 var(--police-texte);
  box-shadow: 0 4px 10px rgba(36, 30, 26, 0.3);
}
.carte .carte-etiquette {
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--creme);
  color: var(--encre-douce);
  font: 400 0.8rem/1.3 var(--police-texte);
  box-shadow: 0 6px 18px rgba(36, 30, 26, 0.18);
}
.carte .carte-etiquette b { color: var(--encre); font-weight: 600; margin-right: 0.25rem; }
.carte .carte-etiquette--gite { font: 600 0.95rem/1.2 var(--police-titre); color: var(--accent-fonce); }
.carte .leaflet-control-attribution { font-size: 0.68rem; }
/* Le numéro devant chaque lieu de la liste, comme sur la carte. */
.lieux li { position: relative; padding-left: 3.1rem; }
.lieu-num {
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  display: grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--encre);
  color: var(--creme);
  font: 700 0.72rem/1 var(--police-texte);
}
.lieu-clic { cursor: pointer; }
.situation-carte {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--sable-clair);
  border: 1px solid var(--filet);
  border-top: 0;
  border-radius: 0 0 var(--r-carte) var(--r-carte);
}
.situation-carte p { font-size: var(--t-petit); font-weight: 400; }
.situation-carte .credit-carte {
  margin: 1.2rem 0 0;
  font-size: 0.74rem;
  color: var(--brume);
}
@media (max-width: 820px) {
  .environs { grid-template-columns: 1fr; }
  .situation { position: static; }
}

.activites {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}
.activites li {
  display: inline-flex;   /* jamais hérité : ces pastilles ne sont pas des lignes */
  align-items: center;
  margin: 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--filet);
  border-radius: var(--r-pill);
  font-size: var(--t-oeil);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brume);
}

/* =========================================================
   Réserver / contact
   ========================================================= */

.reserver {
  position: relative;
  isolation: isolate;
  color: #cfc6b9;
  /* Plus de photo en filigrane : elle laissait passer un ciel et une pelouse
     derrière les champs. Une nappe diffuse suffit à donner de la profondeur. */
  background:
    radial-gradient(90rem 55rem at 12% -10%, rgba(135, 93, 42, 0.26), transparent 62%),
    radial-gradient(60rem 42rem at 96% 108%, rgba(135, 93, 42, 0.16), transparent 60%),
    var(--encre);
}
.reserver-tete { max-width: 48rem; margin-bottom: clamp(2.2rem, 4.5vw, 3.2rem); }
.reserver-tete p { color: #d8cfc2; }
/* Calendrier des disponibilités à gauche (il reste à l'écran pendant qu'on
   remplit la demande), les deux façons de réserver à droite. */
.reserver-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
.dispo { position: sticky; top: 6.2rem; }
.reserver-voies { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 2.4vw, 1.6rem); }
.reserver-voies .reserver-airbnb { margin-top: 0; }
.formulaire-titre { margin: 0; font-size: 1.5rem; }
.formulaire-intro { margin: -0.6rem 0 0.2rem; font-size: var(--t-petit); color: #d8cfc2; }
.reserver h2,
.reserver h3 { color: var(--creme); }
/* Sur fond encre, l'accent du gîte n'a plus assez de contraste : on passe à
   sa version claire (ambre pour le Charivari, bleu-vert lac pour le chalet). */
.section--encre .oeil,
.reserver .oeil { color: #d3ab74; }
[data-gite='chalet'] .section--encre .oeil,
[data-gite='chalet'] .reserver .oeil { color: #a9c6c0; }
.reserver > .enveloppe > div > p { color: #d8cfc2; }

/* --- Cartes ------------------------------------------------------------ */

.carte-sombre {
  padding: clamp(1.7rem, 3vw, 2.4rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-carte);
  background: rgba(255, 255, 255, 0.05);
}
.reserver-airbnb { margin-top: 2.2rem; }
.reserver-airbnb h3 { font-size: 1.5rem; margin-bottom: 0.3em; }
.reserver-airbnb p { font-size: var(--t-petit); font-weight: 400; color: #d8cfc2; margin-bottom: 1.4rem; }
.reserver-label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d3ab74;
}
/* Le bouton Gîtes de France prend la largeur de sa carte, texte centré,
   un peu plus petit : il ne déborde plus à droite (07/10/2026). */
.reserver-airbnb .btn {
  display: flex;
  width: 100%;
  white-space: nowrap;
  min-height: 2.9rem;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
}
/* « Réserver sur Gîtes de France » : libellé long, resserré sur téléphone
   pour tenir sur une ligne dans le héros et le menu. */
@media (max-width: 480px) {
  .btn--gdf { letter-spacing: 0.07em; padding-inline: 1.2rem; }
}
/* Écrans de 320 px : mieux vaut deux lignes qu'une page qui déborde. */
/* Téléphone : le bouton Gîtes de France peut passer sur deux lignes
   plutôt que dépasser de sa carte. */
@media (max-width: 520px) {
  .reserver-airbnb .btn { white-space: normal; max-width: 100%; text-align: center; justify-content: center; }
}
/* Airbnb en second : un lien, pas un deuxième bouton. */
.reserver-secondaire { display: block; width: fit-content; margin-top: 1.1rem; }

/* Écrire ou appeler directement. */
.coordonnees {
  display: grid;
  gap: 0.2rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}
.coordonnees a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0;
  color: var(--creme);
  text-decoration-color: rgba(255, 255, 255, 0.35);
  overflow-wrap: anywhere;
}
.coordonnees a:hover { text-decoration-color: currentColor; }
.coordonnees svg,
.pied-contact svg {
  flex: none;
  width: 1.1rem; height: 1.1rem;
  fill: none;
  stroke: #d3ab74;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-gite='chalet'] .coordonnees svg,
[data-gite='chalet'] .pied-contact svg { stroke: #a9c6c0; }

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

.formulaire { display: grid; gap: 1.2rem; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
/* Un libellé long (« Auswählen… ») ne doit plus élargir la carte. */
.champ--date { min-width: 0; }
.champ--date .champ-valeur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ { display: grid; gap: 0.5rem; }
.champ > span {
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.champ input,
.champ textarea,
.champ select {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: var(--r-champ);
  background: rgba(255, 255, 255, 0.08);
  color: var(--creme);
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 400;
  transition: border-color var(--sortie), background var(--sortie),
              box-shadow var(--sortie);
}
.champ textarea { min-height: 7.5rem; resize: vertical; }
.champ input::placeholder,
.champ textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.champ input:hover,
.champ textarea:hover,
.champ select:hover { border-color: rgba(255, 255, 255, 0.66); }
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  border-color: #e0bb86;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(224, 187, 134, 0.18);
  outline: none;
}

/* --- Sélecteur de dates ------------------------------------------------ */

.dates { position: relative; }

.champ--date {
  display: grid;
  gap: 0.5rem;
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.champ--date > span:first-child {
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.champ-valeur {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: var(--r-champ);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.58);
  font-size: 1rem;
  font-weight: 400;
  transition: border-color var(--sortie), background var(--sortie),
              color var(--sortie);
}
.champ-valeur::before {
  content: '';
  flex: none;
  width: 1.05rem; height: 1.05rem;
  background: currentColor;
  /* icône calendrier, en masque : pas de requête, suit la couleur du texte */
  -webkit-mask: var(--icone-cal) center / contain no-repeat;
  mask: var(--icone-cal) center / contain no-repeat;
}
.champ-valeur.est-rempli { color: var(--creme); }
.champ--date:hover .champ-valeur { border-color: rgba(255, 255, 255, 0.66); }
.champ--date.est-actif .champ-valeur,
.champ--date:focus-visible .champ-valeur {
  border-color: #e0bb86;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(224, 187, 134, 0.18);
}

.calendrier {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.7rem);
  left: 0;
  width: max-content;
  max-width: min(38rem, calc(100vw - 2.5rem));
  padding: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-carte);
  background: #201b17;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}
.calendrier[hidden] { display: none; }
/* Version posée dans la page (section Réserver) : plus de panneau flottant. */
.calendrier.calendrier--en-ligne {
  position: static;
  z-index: auto;
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.calendrier--en-ligne .calendrier-pied { justify-content: flex-start; }
.calendrier--en-ligne .calendrier-mois {
  display: grid;
  grid-template-columns: repeat(var(--mois, 1), minmax(0, 17.5rem));
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 2rem);
}
.calendrier--en-ligne .cal-grille { min-width: 0; }
.calendrier--en-ligne .cal-case { min-height: 0; }

.calendrier-barre {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.calendrier-resume {
  margin: 0;
  text-align: center;
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e0bb86;
}
.cal-prec, .cal-suiv {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: transparent;
  color: var(--creme);
  cursor: pointer;
  transition: background var(--sortie), border-color var(--sortie), opacity var(--sortie);
}
.cal-prec:hover, .cal-suiv:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.cal-prec[disabled] { opacity: 0.28; cursor: default; }

.calendrier-mois { display: flex; gap: 1.8rem; }
.cal-grille { flex: 1; min-width: 15.5rem; }
.cal-titre {
  margin: 0 0 0.7rem;
  text-align: center;
  font-family: var(--police-titre);
  font-size: 1.3rem;
  color: var(--creme);
  text-transform: capitalize;
}
.cal-jours, .cal-cases {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-jours span {
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}
.cal-jours .week-end { color: #c9a06a; }

.cal-case {
  aspect-ratio: 1;
  min-height: 2.15rem;
  border: 0;
  border-radius: var(--r-champ);
  background: transparent;
  color: var(--creme);
  font-family: var(--police-texte);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--sortie), color var(--sortie);
}
.cal-case:hover:not([disabled]) { background: rgba(255, 255, 255, 0.16); }
.cal-case[disabled] { color: rgba(255, 255, 255, 0.36); cursor: default; }
.cal-case.est-aujourdhui { box-shadow: inset 0 0 0 1px rgba(224, 187, 134, 0.55); }
.cal-case.est-entre,
.cal-case.est-apercu { background: rgba(224, 187, 134, 0.18); border-radius: 0; }
.cal-case.est-debut,
.cal-case.est-fin {
  background: #e0bb86;
  color: #241e1a;
  font-weight: 500;
}
.cal-case.est-debut { border-radius: var(--r-champ) 0 0 var(--r-champ); }
.cal-case.est-fin { border-radius: 0 var(--r-champ) var(--r-champ) 0; }
.cal-case.est-debut.est-fin { border-radius: var(--r-champ); }
/* Disponibilités : une fois les dates chargées (.a-dispos), un jour libre
   est une case pleine et lumineuse, un jour réservé une case vide, chiffre
   éteint et barré. On lit « plein = libre » d'un coup d'œil. */
.a-dispos .cal-case:not([disabled]):not(.est-debut):not(.est-fin):not(.est-entre):not(.est-apercu) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.a-dispos .cal-case:not([disabled]):hover { background: rgba(255, 255, 255, 0.22); }
.cal-case.est-occupe {
  background: none;
  color: rgba(255, 255, 255, 0.28);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.calendrier-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}
.calendrier-legende[hidden] { display: none; }
.calendrier-legende > span { display: inline-flex; align-items: center; gap: 0.55rem; }
.cal-temoin {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--r-champ);
  font-size: 0.75rem;
}
.cal-temoin--libre { background: rgba(255, 255, 255, 0.1); color: #fff; }
.cal-temoin--pris {
  color: rgba(255, 255, 255, 0.28);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.calendrier-pied {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.calendrier-pied button {
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--creme);
  font-family: var(--police-texte);
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--sortie), border-color var(--sortie);
}
.calendrier-pied button:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.cal-fermer { background: var(--creme) !important; border-color: var(--creme) !important;
  color: var(--encre) !important; }

@media (max-width: 719px) {
  .calendrier:not(.calendrier--en-ligne) .calendrier-mois { display: block; }
  .cal-grille { min-width: 0; }
  .calendrier { left: 50%; transform: translateX(-50%); width: min(21rem, calc(100vw - 2.5rem)); }
  .calendrier.calendrier--en-ligne { left: auto; transform: none; width: auto; }
}

.formulaire .btn { justify-self: start; margin-top: 0.3rem; }
.mention { font-size: 0.82rem; font-weight: 400; color: rgba(255, 255, 255, 0.66); }
.cache { position: absolute; left: -9999px; }

@media (max-width: 820px) {
  .reserver-grille { grid-template-columns: minmax(0, 1fr); }
  .dispo { position: static; }
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 440px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Autre gîte / pied de page
   ========================================================= */

.autre {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 60svh;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.autre img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.autre::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20,16,12,0.85), rgba(20,16,12,0.25));
}
.autre h2 { color: #fff; }
.autre .enveloppe { padding-block: clamp(2.5rem, 6vw, 4rem); }
/* Carte vers l'autre gîte : sur la photo, textes clairs et bouton crème. */
.autre { min-height: 52svh; }
.autre .oeil { color: rgba(255, 255, 255, 0.85); }
.autre p { color: rgba(255, 255, 255, 0.9); }
.autre .btn { margin-top: 0.6rem; }
@media (hover: hover) {
  .autre:hover img { transform: scale(1.06); }
  .autre:hover .btn { background: #fff; transform: translateY(-2px); box-shadow: var(--ombre-haut); }
  .autre:hover .btn .fleche { transform: translateX(3px); }
}
.autre:focus-visible { outline-offset: -6px; }


.pied {
  background: var(--encre);
  color: rgba(255, 255, 255, 0.6);
  /* Le bandeau d'aperçu est fixé en bas à droite : on dégage le crédit. */
  padding-block: clamp(3rem, 6vw, 4.5rem) 4.2rem;
  font-size: var(--t-petit);
}
.pied a { text-decoration: none; }
.pied a { transition: color var(--sortie); }
.pied a:hover { text-decoration: underline; color: var(--creme); }
.pied .pied-contact a { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
@media (max-width: 380px) { .pied .pied-contact a { white-space: normal; overflow-wrap: anywhere; } }
.pied-grille {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1fr minmax(max-content, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pied .marque { color: var(--creme); }
.pied h3 {
  font-family: var(--police-texte);
  font-size: var(--t-oeil);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);   /* 0,45 : 4,4:1, sous le seuil AA */
  margin-bottom: 1rem;
}
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { line-height: 1.4; }
.pied li a {
  display: inline-block;
  padding: 0.55rem 0;
}
.pied-bas a {
  display: inline-block;
  padding: 0.3rem 0;
}
.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.8rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);   /* 0,4 : 3,8:1, sous le seuil AA */
}
@media (max-width: 1000px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .pied-grille { grid-template-columns: 1fr; }
}

/* =========================================================
   Présentation : l'histoire du lieu, l'équipe
   ========================================================= */

/* Le texte de Marie à gauche, une photo à droite (même passe-partout que
   les Services) ; empilés sur mobile, le texte d'abord. */
.presentation-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.presentation-texte p { max-width: 62ch; color: var(--encre-douce); }
.presentation-texte p:last-child { margin-bottom: 0; }
.presentation-photo { position: relative; margin: 0; }
.presentation-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% 50%;
  border-radius: var(--r-img);
  box-shadow: 0 30px 60px -30px rgba(36, 30, 26, 0.45);
}
.presentation-photo::before {
  content: '';
  position: absolute;
  inset: 1.4rem 1.4rem -1.4rem -1.4rem;
  z-index: -1;
  border: 1px solid var(--accent);
  border-radius: var(--r-img);
  opacity: 0.45;
}
@media (max-width: 860px) {
  .presentation-grille { grid-template-columns: 1fr; }
  .presentation-photo img { aspect-ratio: 3 / 2; }
  .presentation-photo::before { display: none; }
}

/* L'équipe (Charivari) : médaillons du montage de Marie, légendes à elle. */
.equipe {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2.2rem, 4vw, 3rem);
  border-top: 1px solid var(--filet);
}
.equipe-titre,
.travaux-titre {
  margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-style: italic;
  font-weight: 500;
  color: var(--accent-fonce);
}
.equipe-liste {
  display: grid;
  /* Marie et Gaetan dans un seul médaillon (demande de Marie, 08/10/2026),
     puis les chevaux et les chiens : trois colonnes. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.equipe-liste li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.equipe-liste img {
  width: 7.5rem;
  height: 7.5rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  object-fit: cover;
  outline: 1px solid var(--accent);
  outline-offset: 5px;
}
.equipe-liste b {
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--encre);
}
.equipe-liste span {
  margin-top: 0.25rem;
  font-size: var(--t-petit);
  color: var(--brume);
}
@media (max-width: 700px) {
  /* Marie et Gaetan sur toute la largeur, puis chevaux et chiens côte à côte. */
  .equipe-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .equipe-liste li:first-child { grid-column: 1 / -1; }
  .equipe-liste img { width: 6.5rem; height: 6.5rem; }
}

/* Chalet : l'équipe (Marie et Gaetan) signe l'histoire, sous le texte. */
.duo-equipe {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  padding-top: clamp(1.4rem, 2.4vw, 1.8rem);
  border-top: 1px solid var(--filet);
}
.duo-equipe-titre {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--police-titre);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-fonce);
}
.duo-equipe ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.duo-equipe li { display: flex; align-items: center; gap: 0.95rem; }
.duo-equipe img {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  object-fit: cover;
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}
.duo-equipe li span { font-size: var(--t-petit); line-height: 1.4; color: var(--brume); }
.duo-equipe b {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--encre);
}

/* Chalet : les travaux, une bande sobre qui défile. Flèches sur
   ordinateur, glisser sur téléphone ; chaque photo a sa légende. */
.travaux {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2.2rem, 4vw, 3rem);
  border-top: 1px solid var(--filet);
}
.travaux-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem 3rem;
  margin-bottom: clamp(1.4rem, 2.6vw, 2rem);
}
.travaux-tete .travaux-titre { margin: 0; }
.travaux-tete p { margin: 0.6rem 0 0; max-width: 62ch; color: var(--encre-douce); }
.defile-nav { display: flex; flex: none; gap: 0.6rem; }
.defile-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 50%;
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  transition: border-color var(--sortie), background var(--sortie), opacity var(--sortie);
}
.defile-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.defile-btn:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) {
  .defile-btn:not(:disabled):hover { border-color: var(--encre); background: var(--creme-2); }
}
.travaux-liste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(11rem, 16vw, 14rem);
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.travaux-liste::-webkit-scrollbar { display: none; }
.travaux-liste:focus-visible { outline-offset: 4px; }
.travaux-liste li { scroll-snap-align: start; }
.travaux-liste figure { margin: 0; }
.travaux-liste img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-img);
}
.travaux-liste figcaption {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--brume);
}
@media (max-width: 700px) {
  .travaux-tete { display: block; }
  .defile-nav { display: none; }
  .travaux-liste { grid-auto-columns: 62%; }
}

/* =========================================================
   Contact : Marie, son email, son téléphone, ses réseaux
   ========================================================= */
.contact-grille {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.5rem);
}
.contact-portrait {
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  object-fit: cover;
  margin: 7px;
  outline: 1px solid var(--accent);
  outline-offset: 6px;
}
.contact-texte h2 { margin-bottom: 0.2em; }
.contact-qui { margin: 0; color: var(--brume); }
.contact-qui b { font-weight: 600; color: var(--encre); }
.contact-liens {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0 0 0 clamp(1.6rem, 4vw, 3.5rem);
  border-left: 1px solid var(--filet);
  list-style: none;
}
.contact-liens a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0;
  color: var(--encre);
  text-decoration-color: var(--filet);
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
}
.contact-liens a:hover { text-decoration-color: currentColor; }
.contact-liens svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 860px) {
  .contact-grille { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; justify-items: center; text-align: center; }
  .contact-texte .oeil::after { margin-inline: auto; }
  .contact-liens { justify-items: center; width: 100%; }
  .contact-portrait { width: 6.5rem; height: 6.5rem; }
  .contact-liens { padding: 1.4rem 0 0; border-left: 0; border-top: 1px solid var(--filet); }
}

/* =========================================================
   Logos des gîtes (envoyés par Marie) : masques teintés par la couleur
   du texte, pour s'accorder au fond (crème sur encre, encre sur crème).
   ========================================================= */
.logo-gite {
  display: block;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.logo-gite--charivari {
  aspect-ratio: 420 / 480;
  -webkit-mask-image: url(../img/logos/mc-gites.webp);
  mask-image: url(../img/logos/mc-gites.webp);
}
.logo-gite--chalet {
  aspect-ratio: 427 / 480;
  -webkit-mask-image: url(../img/logos/chalet-de-christine.webp);
  mask-image: url(../img/logos/chalet-de-christine.webp);
}
.pied .logo-gite { width: 5.2rem; margin-bottom: 1.3rem; color: var(--creme); opacity: 0.88; }
.choix-logo {
  width: clamp(3.4rem, 4.4vw, 4.4rem);
  margin-bottom: clamp(0.9rem, 1.4vw, 1.2rem);
  color: var(--accent);
}
.heros-logo {
  width: clamp(4.2rem, 6vw, 5.6rem);
  margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
  color: #fff;
  opacity: 0.92;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
@media (max-width: 900px) {
  .choix-logo { width: 3rem; margin-bottom: 0.7rem; color: #fff; opacity: 0.92; }
}

/* Page de remerciement (les liens légaux suivent, juste sous le pli) */
.merci {
  min-height: 88svh;
  display: grid;
  place-items: center;
  text-align: center;
}

/* =========================================================
   Liens légaux (accueil, remerciement, pages légales)
   ========================================================= */

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 1.6rem;
  padding: 0.9rem var(--marge) 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--brume);
}
.pied-legal > * { display: inline-block; padding: 0.35rem 0; }
.pied-legal a { text-decoration: none; }
.pied-legal a:hover { text-decoration: underline; }
/* Le badge d'aperçu flotte en bas à gauche, sauf sur l'accueil (en-tête). */
[data-apercu='on'] body:not(.page-accueil) .pied-legal { padding-bottom: 4.5rem; }
/* Accueil mobile : fond encre, bord à bord. */
@media (max-width: 900px) {
  .page-accueil .pied-legal { color: rgba(255, 255, 255, 0.6); }
  .page-accueil .pied-legal :focus-visible { outline-color: #e8b55c; }
}

/* =========================================================
   Pages légales
   ========================================================= */

.page-legale .entete { position: static; color: var(--encre); }
.page-legale .entete::before { display: none; }
.legal { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.legal h1 {
  font-size: clamp(2.2rem, 6.5vw, 4.6rem);
  /* « Datenschutzerklärung » ne tient pas d'un bloc sur 375 px. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.legal h2 {
  font-size: var(--t-m);
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--filet);
}
.legal p,
.legal li { max-width: 68ch; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1.1em; }
.legal li + li { margin-top: 0.35rem; }
.legal a { color: var(--encre); }
.legal b { font-weight: 500; color: var(--encre); }
.legal-maj { color: var(--brume); font-size: var(--t-petit); }
.legal h3 { font-size: 1.3rem; margin: 1.6rem 0 0.5rem; }
.legal ol { padding-left: 1.4rem; margin: 0 0 1.1em; max-width: 68ch; }
.legal h2[id] { scroll-margin-top: 1.5rem; }
/* Tableau des bases légales : défile seul sur téléphone, sans élargir la page. */
.legal-tableau { overflow-x: auto; margin: 0 0 1.1em; max-width: 68ch; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--t-petit); }
.legal th, .legal td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); }
.legal th { font-weight: 600; color: var(--encre); background: var(--creme-2); }
/* Information encore manquante : bien visible, à remplacer avant la mise en ligne. */
.a-completer {
  padding: 0 0.3em;
  border-radius: 4px;
  background: #fbe9c6;
  color: #6f4c1d;
  font-weight: 500;
}

/* =========================================================
   Retour en haut (ordinateur) : apparaît après un écran de défilement
   ========================================================= */

.haut-de-page {
  position: fixed;
  right: max(1.5rem, env(safe-area-inset-right));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  z-index: 80;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: var(--btn-fond);
  color: var(--btn-texte);
  box-shadow: 0 10px 28px -10px rgba(36, 30, 26, 0.55);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity var(--sortie), visibility var(--sortie), transform var(--sortie),
              background var(--sortie);
}
.haut-de-page.est-visible { opacity: 1; visibility: visible; transform: none; }
.haut-de-page svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.haut-de-page:focus-visible { outline: 2px solid #e8b55c; outline-offset: 3px; }
@media (hover: hover) {
  .haut-de-page:hover { background: var(--btn-fond-survol); transform: translateY(-2px); }
}
/* Sur téléphone, la barre du haut suffit : pas de bouton flottant. */
@media (max-width: 759px) { .haut-de-page { display: none; } }

/* Petits téléphones : « Réserver » plus compact, pour que le nom du site
   tienne sur une ligne à côté. */
@media (max-width: 420px) {
  .entete .nav .btn { padding: 0.55rem 1rem; letter-spacing: 0.06em; }
}

/* Sur téléphone, le texte est posé sur la photo assombrie. */
@media (max-width: 900px) {
  .choix-atout + .choix-atout { color: #f0d39b; }
}