/* ============================================================
   La Roulotte de Tatie — feuille de style principale

   Le parti pris : le jardin au crepuscule. Les photos du lieu sont
   des verts denses et un bois ambre ; poser ce contenu sur un fond
   sombre laisse la couleur des photos porter la page au lieu de la
   diluer sur du blanc. L'ambre du bois devient l'unique accent, et
   ne sert qu'ou il faut decider quelque chose : reserver, changer de
   langue, le tarif le plus avantageux.

   Le theme clair n'est PAS une autre mise en page : seules les
   valeurs des jetons de couleur changent. Les deux themes ne peuvent
   donc pas diverger a mesure que le site evolue.
   ============================================================ */

:root {
  /* Jeu sombre — le jardin au crepuscule. C'est la valeur par defaut :
     la maquette a ete concue dans ce monde-la, et le clair en derive. */
  --nuit:      #101a14;
  --profond:   #18271e;
  --mousse:    #22392b;
  --lisiere:   #2f4a38;
  --ambre:     #d98e3c;
  --lueur:     #f2ce93;
  --clair:     #e8ebe4;
  --doux:      #a9b6ab;
  --estompe:   #74857a;
  /* Texte pose SUR l'ambre. L'ambre est clair ici, il lui faut de
     l'encre ; en theme clair il fonce, et c'est l'inverse. */
  --sur-ambre: #24170a;
  /* Composantes du voile pose sur les photos. Ce sont celles de
     --nuit, exprimees separement pour en faire des degrades a
     opacite variable. */
  --voile-rgb: 16, 26, 20;

  --mesure: 34rem;
  --large: 76rem;

  /* DM Serif Display remplace Bodoni Moda. Meme famille d'esprit — un
     didone, empattements fins et terminaisons en goutte — mais ses
     deliés sont bien plus epais : le Bodoni reduisait les siens a des
     fils, illisibles des qu'on descend sous une trentaine de pixels. */
  --serif: 'DM Serif Display', Georgia, "Times New Roman", serif;
  --sans: 'Karla', 'Segoe UI', system-ui, sans-serif;
}

/* Jeu clair — le meme jardin en plein jour. AUCUNE regle de mise en
   page ne change : seules les valeurs des jetons sont remplacees, si
   bien que les deux themes ne peuvent pas diverger avec le temps.

   Le papier est un gris-vert et non un creme, et l'ambre y descend en
   valeur : celui du theme sombre, pose sur du papier, ne passerait pas
   le contraste exige d'un texte.

   Trois etats et non deux : sans choix explicite, c'est la preference
   du systeme qui decide ; le bouton, lui, l'emporte dans les deux sens. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --nuit:      #f2f4ed;
  --profond:   #e7ebe0;
  --mousse:    #d6ddce;
  --lisiere:   #c2ccb9;
  --ambre:     #a35d0e;
  --lueur:     #7a4409;
  --clair:     #16241b;
  --doux:      #45564a;
  --estompe:   #6f8074;
  --sur-ambre: #fdf6ec;
  --voile-rgb: 242, 244, 237;
  }
}
:root[data-theme="light"] {
  --nuit:      #f2f4ed;
  --profond:   #e7ebe0;
  --mousse:    #d6ddce;
  --lisiere:   #c2ccb9;
  --ambre:     #a35d0e;
  --lueur:     #7a4409;
  --clair:     #16241b;
  --doux:      #45564a;
  --estompe:   #6f8074;
  --sur-ambre: #fdf6ec;
  --voile-rgb: 242, 244, 237;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--clair);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--lueur); text-underline-offset: 0.25em; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}

.mesure { max-width: var(--mesure); margin-inline: auto; padding-inline: 1.5rem; }
.large  { max-width: var(--large);  margin-inline: auto; padding-inline: 1.5rem; }

/* Intertitre : un mot en petites capitales espacees, precede d'un
   trait. Il situe la section sans lui voler la vedette. */
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambre);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--ambre);
  flex: none;
}

/* ---------- Banniere de suggestion de langue --------------------
   Le site ne redirige personne selon la langue du navigateur : il
   propose. Cette barre est ce que verrait un visiteur germanophone
   arrivant sur la version francaise. */
.suggestion {
  background: var(--ambre);
  color: var(--sur-ambre);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.9375rem;
  flex-wrap: wrap;
}
.suggestion b { font-weight: 700; }
.suggestion a { color: var(--sur-ambre); font-weight: 700; }
.suggestion .fermer {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--sur-ambre);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  opacity: 0.65;
}
.suggestion .fermer:hover { opacity: 1; }

/* ---------- En-tete --------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--voile-rgb), 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lisiere);
}
.entete-int {
  max-width: var(--large);
  margin-inline: auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.marque {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.marque em { font-style: italic; color: var(--ambre); }

.nav {
  display: flex;
  gap: clamp(0.9rem, 1.7vw, 1.6rem);
  margin-left: auto;
}
.nav a {
  color: var(--doux);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Sans cela, « Le séjour » se casse en deux lignes des que la barre
     est un peu juste, et toute l'en-tete double de hauteur. */
  white-space: nowrap;
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a:focus-visible { color: var(--clair); border-bottom-color: var(--ambre); }

/* Selecteur de langue : trois liens courts, la langue courante
   marquee et non cliquable. */
.langues { display: flex; align-items: center; gap: 0.55rem; font-size: 0.78125rem; letter-spacing: 0.09em; }
.langues span, .langues a { text-decoration: none; text-transform: uppercase; }
.langues [aria-current] { color: var(--ambre); font-weight: 700; }
.langues a { color: var(--estompe); }
.langues a:hover { color: var(--clair); }
.langues i { color: var(--lisiere); font-style: normal; }

/* Bascule clair / sombre. Un seul bouton qui montre la LUNE quand on
   est en clair et le SOLEIL quand on est en sombre : il annonce ce
   vers quoi il emmene, pas l'etat courant. */
.bascule {
  background: none;
  border: 1px solid var(--lisiere);
  color: var(--doux);
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.bascule:hover { color: var(--ambre); border-color: var(--ambre); }
.bascule svg { width: 1rem; height: 1rem; fill: currentColor; }
/* Chaque icone ne parait que dans le theme qu'elle quitte. */
.bascule .soleil { display: block; }
.bascule .lune { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .bascule .soleil { display: none; }
  :root:not([data-theme="dark"]) .bascule .lune { display: block; }
}
:root[data-theme="light"] .bascule .soleil { display: none; }
:root[data-theme="light"] .bascule .lune { display: block; }

/* Enseigne du pied de page. */
.enseigne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  flex-wrap: wrap;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--mousse);
  text-align: center;
}
.enseigne-identite { max-width: 22rem; }

/* Le fond sombre est le melange a parts egales des styles « dark » et
   « black » du serveur de tuiles. Le premier est un gris charbon qui
   flotte au-dessus du vert profond de la page ; le second s'y enfonce au
   point qu'on n'y lit plus les rues. Les deux rendus partagent la meme
   geometrie — memes coordonnees, meme zoom, meme taille — donc leur
   moyenne est nette, sans dedoublement des libelles.

   La carte est une IMAGE, pas une carte interactive : dans un pied de
   page, personne ne vient explorer le quartier — on vient verifier ou
   c'est. Une image se charge en vingt kilo-octets, ne capture pas la
   molette et ne depend d'aucun script.

   Elle est rendue par notre propre serveur de tuiles, dans les deux
   styles, et suit le theme de la page. Le marqueur est le medaillon
   lui-meme : aucun jeu d'icones ne dessine une roulotte, et celui-la en
   represente une. */
.enseigne-carte { margin: 0; }
.enseigne-carte a { display: block; }
.enseigne-carte img {
  width: 24rem;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--lisiere);
}
.enseigne-carte figcaption {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  color: var(--estompe);
}
.carte-claire { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .carte-sombre { display: none; }
  :root:not([data-theme="dark"]) .carte-claire { display: block; }
}
:root[data-theme="light"] .carte-sombre { display: none; }
:root[data-theme="light"] .carte-claire { display: block; }
/* Le logo complet accole au medaillon le nom en script bleu clair. Ce
   bleu jure avec la palette et n'a ete dessine ni pour le vert profond
   ni pour le papier ; l'enfermer dans une plaque blanche pour le sauver
   ne faisait que poser un rectangle vide au milieu du pied de page.
   On ne garde donc que le medaillon — une aquarelle ronde sur
   transparence, qui se detache de n'importe quel fond — et le nom est
   compose dans la typographie de la page. */
.enseigne-identite img {
  display: block;
  width: 11rem;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1.6rem;
}
.enseigne p {
  font-size: 1rem;
  color: var(--doux);
  margin: 0 auto;
  max-width: 26rem;
}

.reserver {
  background: var(--ambre);
  color: var(--sur-ambre);
  text-decoration: none;
  font-size: 0.78125rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.6rem 1.05rem;
  white-space: nowrap;
}
.reserver:hover { background: var(--lueur); }

/* ---------- Banniere d'ouverture -------------------------------- */
.hero { position: relative; }
.hero img { width: 100%; height: min(84vh, 720px); object-fit: cover; }
/* Le degrade n'assombrit que le bas, la ou vient le texte : voiler
   toute la photo reviendrait a la gacher. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--voile-rgb),0.35) 0%, rgba(var(--voile-rgb),0) 30%, rgba(var(--voile-rgb),0.9) 88%, var(--nuit) 100%);
}
.hero-texte {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  max-width: var(--large);
  margin-inline: auto;
  padding: 0 1.5rem 3.5rem;
}
.hero-texte h1 {
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.hero-texte h1 em { font-style: italic; color: var(--lueur); }
.hero-slogan {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--doux);
  margin: 0.9rem 0 0;
}
.hero-slogan strong { color: var(--ambre); font-weight: 500; }

/* Bandeau de faits : ce qu'un visiteur veut savoir en dix secondes. */
.faits {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.75rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--lisiere);
}
.faits div { padding-block: 0.35rem; }
.faits dt {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--estompe);
}
.faits dd { margin: 0.15rem 0 0; font-size: 1.0625rem; }
.faits dd b { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }

/* ---------- Distinction Airbnb ---------------------------------
   La note et la distinction sont le meilleur argument du dossier, et le
   site n'en disait pas un mot. Elles sont attribuees explicitement a
   Airbnb : ce sont ses avis, pas les notres.

   Elles ne sont volontairement PAS balisees en donnees structurees :
   Google interdit de declarer en `AggregateRating` des avis collectes
   sur un site tiers, et le faire exposerait le site a une sanction pour
   balisage trompeur. */
.distinction { background: var(--profond); border-block: 1px solid var(--mousse); }
.distinction-int {
  max-width: var(--large);
  margin-inline: auto;
  padding: 1.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  flex-wrap: wrap;
  text-align: center;
}
.distinction-titre { font-family: var(--serif); font-size: 1.25rem; line-height: 1.15; max-width: 11rem; margin: 0; }
.distinction-note { display: flex; align-items: baseline; gap: 0.55rem; }
.distinction-note b {
  font-family: var(--serif); font-size: 2.25rem; font-weight: 400;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.etoiles { color: var(--ambre); letter-spacing: 0.1em; font-size: 0.875rem; }
.distinction-int .commentaires { margin: 0; font-size: 0.9375rem; color: var(--doux); max-width: 14rem; }
.distinction-source {
  width: 100%; margin: 0.35rem 0 0;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--estompe);
}

/* Mention sous les tarifs : un prix affiche sans date ni perimetre est
   un prix que le visiteur decouvrira faux au moment de payer. */
.mention {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--estompe);
}

/* ---------- Sections -------------------------------------------- */
section { padding-block: clamp(4rem, 9vw, 7.5rem); }

.titre-section { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 1.5rem; }
.titre-section em { font-style: italic; color: var(--ambre); }

.chapo { color: var(--doux); font-size: 1.125rem; }
.chapo .surligne { color: var(--lueur); font-style: italic; }

/* Deux photos decalees : la verticale descend, pour que le couple ne
   forme pas une bande rigide. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
}
.duo figure { margin: 0; }
.duo figure:last-child { margin-top: 3.5rem; }
.duo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.duo figcaption {
  font-size: 0.8125rem;
  color: var(--estompe);
  margin-top: 0.6rem;
  letter-spacing: 0.02em;
}

/* Bande pleine largeur : elle coupe la lecture et change de saison. */
.bande { position: relative; padding: 0; }
.bande img { width: 100%; height: min(70vh, 560px); object-fit: cover; }
.bande::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(var(--voile-rgb),0.88) 0%, rgba(var(--voile-rgb),0.45) 55%, rgba(var(--voile-rgb),0.1) 100%);
}
.bande-texte {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
}
.bande-texte > div { max-width: var(--large); margin-inline: auto; padding-inline: 1.5rem; width: 100%; }
.bande-texte p { max-width: 26rem; font-size: 1.0625rem; color: var(--clair); }
.bande-texte h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); max-width: 20rem; }
.bande-texte h2 em { font-style: italic; color: var(--lueur); }

/* ---------- Equipement ------------------------------------------ */
.fond-profond { background: var(--profond); }

.equipement ul {
  list-style: none;
  padding: 0;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  columns: 2;
  column-gap: 3rem;
}
.equipement li {
  break-inside: avoid;
  padding: 0.7rem 0 0.7rem 1.6rem;
  border-bottom: 1px solid var(--mousse);
  position: relative;
  font-size: 0.9375rem;
}
/* Un tiret plutot qu'une puce ronde : plus proche d'une liste
   ecrite a la main que d'un gabarit. */
.equipement li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.45rem;
  width: 0.7rem; height: 1px;
  background: var(--ambre);
}

/* ---------- Galerie -------------------------------------------
   Une mosaique plutot qu'une grille reguliere : les photos n'ont ni la
   meme force ni le meme cadrage, et les aligner toutes au meme format
   les ramenerait toutes au niveau de la plus faible.

   Les tailles sont donnees en lignes et colonnes de grille, avec
   `object-fit: cover` : chaque case garde sa proportion quelle que soit
   celle du fichier, sans deformation. `dense` autorise le navigateur a
   combler les trous laisses par les grands elements. */
.galerie {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 11rem;
  grid-auto-flow: dense;
  gap: 0.9rem;
  margin-top: 3rem;
}
.galerie figure { margin: 0; overflow: hidden; }
.galerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.galerie figure:hover img { transform: scale(1.04); }

.g-4x2 { grid-column: span 4; grid-row: span 2; }
.g-3x2 { grid-column: span 3; grid-row: span 2; }
.g-2x2 { grid-column: span 2; grid-row: span 2; }
.g-3x1 { grid-column: span 3; }
.g-2x1 { grid-column: span 2; }

@media (max-width: 720px) {
  .galerie { grid-template-columns: 1fr; grid-auto-rows: 13rem; }
  .galerie figure { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* ---------- Tarifs ---------------------------------------------- */
.tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.tarif {
  border: 1px solid var(--lisiere);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tarif.vedette { border-color: var(--ambre); background: rgba(217, 142, 60, 0.07); }
.tarif dt { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--estompe); }
.tarif .montant { font-family: var(--serif); font-size: 2.75rem; line-height: 1; }
.tarif .montant span { font-size: 1.1rem; color: var(--doux); }
.tarif .note { font-size: 0.875rem; color: var(--doux); margin-top: auto; padding-top: 0.75rem; }
.etiquette {
  align-self: flex-start;
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: var(--ambre);
  color: var(--sur-ambre);
  padding: 0.15rem 0.5rem;
  font-weight: 700;
}

/* ---------- Aux alentours --------------------------------------- */
.lieux { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; margin-top: 3rem; }
.lieu { border-top: 1px solid var(--lisiere); padding-top: 1.1rem; }
.lieu .distance {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ambre);
}
.lieu h3 { font-size: 1.5rem; margin: 0.5rem 0 0.6rem; }
.lieu p { font-size: 0.9375rem; color: var(--doux); margin: 0; }

/* ---------- Commentaires --------------------------------------
   Les avis sont CITES, pas balises. Google interdit de declarer en
   donnees structurees des avis collectes sur un site tiers : les
   afficher est licite, les revendiquer comme siens ne l'est pas.

   Seuls les plus recents sont montres. Un mur d'avis anciens dit au
   visiteur que plus personne ne vient ; quatre commentaires des
   derniers mois disent l'inverse, et se relisent en dix secondes.

   Le texte reste celui du voyageur, coupe la ou Airbnb le coupe, avec
   des points de suspension entre crochets pour que la coupure se voie.
   On ne rallonge ni ne lisse le propos de quelqu'un d'autre. */
.avis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}
.avis blockquote {
  margin: 0;
  border: 1px solid var(--lisiere);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.avis .etoiles { display: block; }

/* Les commentaires vont de trois lignes a quinze. On les tronque tous a
   la meme hauteur pour que les cartes s'alignent, et un bouton deplie
   celui qu'on veut lire en entier. Le texte est bien present dans la
   page — il n'est que masque — donc lisible par un moteur de recherche
   comme par un lecteur d'ecran. */
.avis .texte {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.avis blockquote.deplie .texte {
  display: block;
  overflow: visible;
}
.plus {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ambre);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.plus:hover { color: var(--lueur); }
/* Tant que le script n'a pas mesure les textes, aucun bouton n'est
   montre : afficher « Lire la suite » sous un commentaire de trois
   lignes deja entier serait absurde. */
.plus[hidden] { display: none; }
.avis .etoiles { font-size: 0.8rem; }
.avis p { margin: 0; font-size: 1rem; line-height: 1.6; }
.avis blockquote footer {
  background: none;
  padding: 0;
  border: 0;
  font-size: 0.8125rem;
  color: var(--estompe);
}
.avis blockquote footer b { color: var(--doux); font-weight: 600; }
.avis-pied { margin-top: 2rem; font-size: 0.9375rem; color: var(--doux); }

/* ---------- Presse ---------------------------------------------- */
.presse { margin-top: 2.5rem; border-top: 1px solid var(--mousse); }
.presse a {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--mousse);
  text-decoration: none;
  color: inherit;
}
.presse a:hover { background: rgba(217, 142, 60, 0.06); }
.presse .source { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ambre); }
.presse .titre { font-family: var(--serif); font-size: 1.25rem; }
.presse .an { color: var(--estompe); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* ---------- Reserver -------------------------------------------- */
.plateformes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.plateformes a {
  border: 1px solid var(--lisiere);
  padding: 0.85rem 1.35rem;
  text-decoration: none;
  color: var(--clair);
  font-size: 0.9375rem;
}
.plateformes a:hover { border-color: var(--ambre); color: var(--lueur); }

/* ---------- Pied ------------------------------------------------ */
footer { background: var(--profond); padding-block: 4rem 2.5rem; border-top: 1px solid var(--mousse); }
.pied { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2.5rem; }
.pied h4 { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--estompe); margin: 0 0 0.8rem; font-weight: 600; font-family: var(--sans); }
.pied p, .pied a { font-size: 0.9375rem; color: var(--doux); margin: 0.2rem 0; text-decoration: none; display: block; }
.pied a:hover { color: var(--lueur); }
.pied-bas {
  max-width: var(--large);
  margin: 3rem auto 0;
  padding: 1.5rem 1.5rem 0;
  border-top: 1px solid var(--mousse);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--estompe);
}
.pied-bas .langues { margin-left: auto; }

@media (max-width: 1000px) {
  .nav { display: none; }
}

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo figure:last-child { margin-top: 0; }
  .equipement { columns: 1; }
  .presse a { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* Reveil au defilement, discret : les photos montent de quelques
   pixels. Supprime pour qui demande moins d'animation. */
.monte { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.monte.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .monte { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* ============================================================
   COMPLEMENTS DU SITE
   Ce que la maquette n'avait pas a montrer : liens de suite,
   volet des mentions legales, et carte interactive du pied de
   page.
   ============================================================ */

/* Lien menant a une page plus fournie que la section resumee. */
.lien-suite {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ambre);
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
}
.lien-suite:hover { color: var(--lueur); }

/* ---------- Mentions legales ---------------------------------- */
.mentions {
  background: var(--profond);
  border-top: 1px solid var(--mousse);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.mentions-texte {
  font-size: 0.9375rem;
  color: var(--doux);
  margin-bottom: 1.5rem;
}

/* ---------- Carte du pied de page ------------------------------ */
#carte-pied {
  width: 24rem;
  max-width: 100%;
  height: 17rem;
  border: 1px solid var(--lisiere);
  background: var(--profond);
}
/* Leaflet pose son propre fond blanc ; il transparaitrait entre les
   tuiles pendant leur chargement. */
#carte-pied.leaflet-container { background: var(--profond); }

/* Le style « black » du serveur de tuiles s'enfonce dans le vert de la
   page au point qu'on n'y lit plus les rues, et « dark » flotte au-dessus.
   Ce leger eclaircissement place le rendu entre les deux, sans avoir a
   ajouter un style au serveur. */
#carte-pied.carte-sombre .leaflet-tile-pane { filter: brightness(1.22) contrast(0.96); }

/* Le medaillon sert de marqueur : rond, il merite un cerne clair pour se
   detacher du fond de carte, comme une pastille posee dessus. */
.marqueur-medaillon {
  border-radius: 50%;
  background: #fbfaf6;
  padding: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.leaflet-control-attribution {
  font-size: 0.6875rem;
}

@media (max-width: 900px) {
  /* Sur telephone, l'enseigne passe en colonne : la carte a toute la
     largeur disponible et n'a plus a se contenter de 24 rem. On lui
     donne aussi plus de hauteur — une bande trop basse ne montre plus
     que deux rues et perd tout interet. */
  .enseigne-carte { flex: 1 1 100%; width: 100%; }
  #carte-pied { width: 100%; height: 20rem; }
}

/* ============================================================
   PAGES INTERNES
   La galerie, les alentours et le contact gardent leur adresse :
   elles portent chacune un contenu plus riche que le resume qui
   leur correspond sur l'accueil.
   ============================================================ */

/* En-tete de page : elle remplace la banniere photo de l'accueil,
   qu'il serait couteux et inutile de rejouer partout. Une marge en
   haut evite que le titre passe sous l'en-tete fixe. */
.page-entete {
  padding-block: clamp(6rem, 12vw, 9rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--mousse);
}
.page-entete h1 { margin-bottom: 0; }
.page-entete .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- Grille de photos ---------------------------------- */
.grille-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.grille-photos figure { margin: 0; overflow: hidden; }
.grille-photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.grille-photos figure:hover img { transform: scale(1.04); }

/* ---------- Cartes pleine largeur ------------------------------ */
.carte-large {
  width: 100%;
  height: clamp(20rem, 46vh, 30rem);
  border: 1px solid var(--lisiere);
  background: var(--profond);
  margin-top: 2rem;
}
.carte-large.leaflet-container { background: var(--profond); }
.carte-large.carte-sombre .leaflet-tile-pane { filter: brightness(1.22) contrast(0.96); }

/* Marqueur des lieux visites : un simple point ambre, pour qu'on
   distingue au premier regard la roulotte — qui porte le medaillon —
   des endroits a decouvrir autour. */
.marqueur-lieu span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ambre);
  border: 3px solid #fbfaf6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ---------- Alentours, en detail ------------------------------- */
.lieux-detail { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.lieux-detail h2 { font-family: var(--serif); font-size: 1.5rem; margin: 0.5rem 0 0.75rem; }
.lieu-texte { font-size: 0.9375rem; color: var(--doux); }
.lieu-texte p { margin-top: 0; }
/* Pied de fiche : meme ordre et meme place sur toutes les fiches.
   `margin-top: auto` le pousse en bas de la carte, si bien que les
   adresses et les liens s'alignent d'une colonne a l'autre quelle que
   soit la longueur de la notice au-dessus. */
.lieu-pied {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--mousse);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: none;
}
.lieu-adresse {
  margin: 0;
  font-size: 0.875rem;
  color: var(--estompe);
  /* La ligne est conservee meme vide : sans elle, une fiche sans adresse
     remonterait son lien et casserait l'alignement de la rangee. */
  min-height: 1.4em;
}
.lieu-pied .lien-suite { font-size: 0.875rem; }

/* Les notices viennent de la base en HTML : leurs paragraphes portent des
   marges heterogenes, qui faussaient la hauteur tronquee. */
.lieu-texte p { margin: 0 0 0.8rem; }
.lieu-texte p:last-child { margin-bottom: 0; }
.faits-lieu { margin-top: 2rem; }

/* ---------- Contact -------------------------------------------- */
.contact-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.contact-grille h2 { font-size: 1.5rem; margin-bottom: 1.25rem; }

.liste-contact { list-style: none; margin: 0 0 2rem; padding: 0; }
.liste-contact li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mousse);
  font-size: 0.9375rem;
}
.liste-contact .icone { color: var(--ambre); margin-top: 0.25rem; }
.liste-contact a { color: inherit; text-decoration: none; }
.liste-contact a:hover { color: var(--lueur); }

/* Le formulaire est volontairement sobre : des champs cernes d'un
   filet, sans ombre ni arrondi, dans la meme grammaire que les tuiles
   de tarifs. */
.contact-formulaire .input { margin-bottom: 1.1rem; }
.contact-formulaire label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--estompe);
  margin-bottom: 0.4rem;
}
.contact-formulaire input,
.contact-formulaire textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--lisiere);
  color: var(--clair);
  font: inherit;
  padding: 0.7rem 0.85rem;
}
.contact-formulaire input:focus,
.contact-formulaire textarea:focus {
  outline: 2px solid var(--ambre);
  outline-offset: 1px;
  border-color: var(--ambre);
}
.contact-formulaire textarea { resize: vertical; min-height: 9rem; }
.contact-formulaire .error-message {
  color: var(--ambre);
  font-size: 0.8125rem;
  margin-top: 0.35rem;
}
.contact-formulaire button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  cursor: pointer;
}

/* ---------- Messages de confirmation --------------------------- */
.message {
  max-width: var(--large);
  margin: 1rem auto 0;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--ambre);
  background: rgba(217, 142, 60, 0.1);
  font-size: 0.9375rem;
}
.message.error { border-color: #c2542a; background: rgba(194, 84, 42, 0.12); }

/* ============================================================
   ICONES
   Les traces viennent du sprite pose dans la page. Dimensionnees
   en `em`, elles suivent la taille du texte qui les entoure
   exactement comme le faisaient les glyphes d'une fonte d'icones ;
   `currentColor` leur fait suivre sa couleur.

   Sans cette regle, un <svg> sans dimension prend la taille par
   defaut du navigateur — 300 x 150 pixels — et se remplit de noir.
   ============================================================ */
.icone {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex: none;
}
.sprite-icones { display: none; }

/* ============================================================
   BANNIERE DE SUGGESTION DE LANGUE
   Ce que voit un visiteur arrivant sur une version qui n'est
   visiblement pas dans sa langue. Elle propose, elle ne redirige
   pas : c'est la recommandation explicite de Google, et cela
   laisse le visiteur maitre de ce qu'il lit.
   ============================================================ */
.suggestion-langue {
  background: var(--ambre);
  color: var(--sur-ambre);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.9375rem;
  flex-wrap: wrap;
}
.suggestion-langue-lien {
  color: var(--sur-ambre);
  font-weight: 700;
  text-underline-offset: 0.25em;
}
.suggestion-langue-fermer {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--sur-ambre);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.35rem;
  opacity: 0.65;
}
.suggestion-langue-fermer:hover { opacity: 1; }

/* ============================================================
   CORRECTIONS DE DETAIL
   ============================================================ */

/* La marque est devenue un lien vers l'accueil : elle ne doit pas
   pour autant porter le soulignement des liens de texte. */
.marque { text-decoration: none; color: inherit; }
.marque:hover em { color: var(--lueur); }

/* La page contact porte deja sa propre carte, au milieu de ses
   coordonnees. Celle du pied de page ferait doublon a quelques
   centaines de pixels d'ecart. */
.page-contact .enseigne-carte { display: none; }
.page-contact .enseigne { justify-content: center; }

/* ============================================================
   TEXTES REPLIABLES
   Commentaires de voyageurs et notices des lieux alentour :
   tronques a une hauteur commune pour que les fiches s'alignent,
   deplies a la demande.
   ============================================================ */
.repliable .texte {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.repliable.deplie .texte {
  display: block;
  overflow: visible;
}
.lieu.repliable { display: flex; flex-direction: column; gap: 0.75rem; }
.lieu.repliable .plus { align-self: flex-start; }

/* ============================================================
   BOUTON DE RESERVATION
   C'est l'action que tout le site prepare : il ne peut pas avoir
   la meme presence qu'une entree de menu. Plus grand, plus
   contraste, et un leger relief pour qu'on le lise comme un
   bouton et non comme une etiquette.
   ============================================================ */
.reserver {
  font-size: 0.875rem;
  letter-spacing: 0.09em;
  padding: 0.8rem 1.5rem;
  box-shadow: 0 2px 12px rgba(217, 142, 60, 0.28);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.reserver:hover,
.reserver:focus-visible {
  background: var(--lueur);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(217, 142, 60, 0.4);
}

/* Le meme bouton dans la bande de reservation, ou il conclut le
   parcours : la, il a la place d'etre franchement grand. */
.plateformes a {
  background: var(--ambre);
  color: var(--sur-ambre);
  border-color: var(--ambre);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1.05rem 1.9rem;
  box-shadow: 0 2px 14px rgba(217, 142, 60, 0.3);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.plateformes a:hover,
.plateformes a:focus-visible {
  background: var(--lueur);
  color: var(--sur-ambre);
  transform: translateY(-1px);
  box-shadow: 0 5px 22px rgba(217, 142, 60, 0.42);
}

/* Poids d'un document telechargeable, annonce a cote de son lien. */
.pied .poids { color: var(--estompe); font-size: 0.8125rem; }

/* ============================================================
   EMPILEMENT DES CARTES
   Leaflet place ses calques a des z-index de 400 a 800. Sans
   contexte d'empilement propre, ces valeurs se comparent a celles
   de toute la page : la carte passait devant l'en-tete au
   defilement. `isolation` enferme cette echelle dans l'element,
   et la carte cesse de concurrencer le reste du document.
   ============================================================ */
#carte-pied,
.carte-large {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* ============================================================
   MENTIONS LEGALES
   Un texte juridique long : il lui faut une largeur de lecture,
   des titres d'article reperables et de l'air entre les
   paragraphes. Sans mise en forme, c'est un mur.
   ============================================================ */
.mentions .mesure { max-width: 42rem; }
.mentions-texte {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--doux);
  margin-bottom: 2rem;
}
.mentions-texte p { margin: 0 0 1.4rem; }
.mentions-texte p:first-child { color: var(--estompe); font-style: italic; }
/* Les articles commencent par « ARTICLE n : » en capitales ; on les
   detache du corps du texte pour qu'ils servent de reperes. */
.mentions-texte br + br { line-height: 2.2; }
.mentions-texte em { color: var(--estompe); }
.mentions-texte a { color: var(--ambre); }

/* ============================================================
   BOUTON DE TEXTE
   « Lire la suite », « Fermer » : des actions secondaires, qui se
   lisent comme des liens et non comme des boutons de formulaire.
   La regle etait limitee aux commentaires ; ailleurs, le bouton
   nu du navigateur reapparaissait — fond gris, bordure grise.
   ============================================================ */
button.plus {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ambre);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
button.plus:hover,
button.plus:focus-visible { color: var(--lueur); }

/* Mention discrete sous un commentaire traduit : elle informe sans
   concurrencer le nom de son auteur. */
.avis .traduit {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--estompe);
}

/* ============================================================
   PETITS ECRANS
   L'en-tete portait cinq elements sur une seule ligne : marque,
   navigation, langues, bascule et bouton de reservation. Sous
   1000 px la navigation disparait deja, mais les quatre autres
   debordaient encore. On resserre, puis on autorise le retour a
   la ligne plutot que le depassement.
   ============================================================ */
@media (max-width: 700px) {
  .entete-int {
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    flex-wrap: wrap;
  }
  .marque { font-size: 1rem; }
  .langues { margin-left: auto; font-size: 0.7rem; gap: 0.4rem; }
  .reserver { font-size: 0.75rem; padding: 0.6rem 0.9rem; letter-spacing: 0.06em; }
  .bascule { width: 1.9rem; height: 1.9rem; }

  .large, .mesure { padding-inline: 1.1rem; }
  .hero img { height: min(70svh, 560px); }
  .hero-texte { padding-bottom: 2rem; }
  .faits { gap: 0 1.5rem; }
  .faits dd b { font-size: 1.15rem; }

  .distinction-int { gap: 1rem; padding: 1.25rem 1rem; }
  .distinction-titre { max-width: none; }

  .bande img { height: 46svh; }
  .bande-texte > div { padding-inline: 1.1rem; }

  .tarif { padding: 1.25rem; }
  .tarif .montant { font-size: 2.25rem; }

  .enseigne { gap: 2rem; }
  .pied { gap: 1.75rem; }
  .pied-bas { flex-direction: column; align-items: flex-start; }
  .pied-bas .langues { margin-left: 0; }
}

/* Sous 420 px, le bouton de reservation passe seul sur sa ligne :
   c'est l'action principale, elle ne doit pas etre tronquee. */
@media (max-width: 420px) {
  .reserver { order: 5; flex-basis: 100%; text-align: center; }
}

/* ============================================================
   COMMANDES DE CARTE
   Leaflet livre ses boutons et son attribution avec un style
   clair et des tailles fixes, dessines pour une carte plein
   ecran. Sur une carte de pied de page ils ecrasent tout :
   l'attribution occupait un quart de la surface, sur trois
   lignes et en bleu vif.
   ============================================================ */
.leaflet-control-attribution {
  background: rgba(var(--voile-rgb), 0.82) !important;
  color: var(--estompe) !important;
  font-family: var(--sans);
  font-size: 0.625rem !important;
  line-height: 1.4;
  padding: 0.15rem 0.45rem !important;
  /* Sans cela l'attribution se casse en trois lignes des que la carte
     est etroite, et forme un pave au coin de l'image. */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leaflet-control-attribution a { color: var(--doux) !important; text-decoration: none; }
.leaflet-control-attribution a:hover { color: var(--ambre) !important; }
/* Le drapeau decoratif ajoute par Leaflet n'apporte rien ici. */
.leaflet-attribution-flag { display: none !important; }

.leaflet-control-zoom { border: 0 !important; box-shadow: none !important; }
.leaflet-control-zoom a {
  width: 1.75rem !important;
  height: 1.75rem !important;
  line-height: 1.7rem !important;
  font-size: 1.05rem !important;
  background: rgba(var(--voile-rgb), 0.86) !important;
  color: var(--clair) !important;
  border: 1px solid var(--lisiere) !important;
  border-radius: 0 !important;
}
.leaflet-control-zoom a + a { border-top: 0 !important; }
.leaflet-control-zoom a:hover { background: var(--profond) !important; color: var(--ambre) !important; }
.leaflet-touch .leaflet-control-zoom a { font-size: 1.05rem !important; }

/* ============================================================
   BANNIERE : UN VOILE TOUJOURS SOMBRE
   Le voile suivait le theme. En clair il ECLAIRCISSAIT donc la
   photo, pendant que le texte, lui, restait sombre : titre et
   chiffres devenaient illisibles sur un feuillage ensoleille.
   Un texte pose sur une photo reclame un voile sombre et un
   texte clair, quel que soit le theme de la page. La banniere
   est donc le seul endroit du site qui ne bascule pas.
   ============================================================ */
.hero::after {
  background: linear-gradient(to bottom,
    rgba(16, 26, 20, 0.55) 0%,
    rgba(16, 26, 20, 0.30) 28%,
    rgba(16, 26, 20, 0.78) 62%,
    rgba(16, 26, 20, 0.94) 100%);
}
.hero-texte,
.hero-texte h1 { color: #e8ebe4; }
.hero-texte h1 em { color: #f2ce93; }
.hero-slogan { color: #c6d0c6; }
.hero-slogan strong { color: #e5a busy; }
.hero-slogan strong { color: #e8a94e; }
.faits { border-top-color: rgba(232, 235, 228, 0.3); }
.faits dt { color: #a9b6ab; }
.faits dd { color: #e8ebe4; }

@media (max-width: 700px) {
  /* Sur telephone, le bloc de texte occupe une bien plus grande part
     de la hauteur : le voile doit couvrir plus haut, sans quoi le
     titre retombe dans la zone claire du degrade. */
  .hero::after {
    background: linear-gradient(to bottom,
      rgba(16, 26, 20, 0.55) 0%,
      rgba(16, 26, 20, 0.45) 18%,
      rgba(16, 26, 20, 0.82) 45%,
      rgba(16, 26, 20, 0.95) 100%);
  }
}