/* ===========================================================================
   2 — COMPOSANTS
   ---------------------------------------------------------------------------
   Un composant = un bloc visuel reutilisable. Ils sont ranges dans l'ordre
   ou on les rencontre en descendant la page :

     1. Bandeau d'aide          8. Calendrier
     2. En-tete et navigation   9. Formulaires
     3. Filet de progression   10. Devis
     4. Scene (l'image de       11. Avis
        haut de page)          12. Alertes
     5. Boutons                13. Fiche descriptive
     6. Sections et cartes     14. Carte OpenStreetMap
     7. Galerie                15. Pied de page

   CONVENTION DE NOMMAGE (BEM, en francais) :
     .bloc              le composant
     .bloc__element     une partie du composant
     .bloc--variante    une declinaison du composant

   Pourquoi en francais : le client et son eventuel prochain prestataire
   sont francophones. `.galerie__vignette--large` se comprend sans
   traduction ; `.gallery__thumb--lg` demande un aller-retour mental.
   Le nom decrit TOUJOURS le contenu, jamais l'apparence : `.bouton--danger`
   et non `.bouton--rouge`, sinon le jour ou le rouge devient orange le nom
   ment.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. BANDEAU D'AIDE
   ---------------------------------------------------------------------------
   Tout en haut, avant le logo. Le telephone doit etre trouvable en une
   seconde par quelqu'un qui ne veut pas remplir de formulaire — c'est le
   cas de la majorite des clients de gite de plus de 60 ans.
--------------------------------------------------------------------------- */
.aide {
  background: var(--encre);
  color: var(--chaux);
  font-size: 0.9375rem;
}
.aide__interieur {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--e3);
  padding-block: var(--e2);
}
.aide a {
  color: var(--blanc);
  font-weight: 700;
  text-decoration-color: var(--bois);
  text-decoration-thickness: 2px;
}
.aide a:hover { color: var(--bois); }

/* Bouton "Texte plus grand". Ecrit en toutes lettres : beaucoup de gens ne
   savent pas zoomer avec Ctrl + molette, et une icone loupe ne le leur
   apprendra pas. */
.confort-bouton {
  font: inherit;
  background: transparent;
  color: var(--chaux);
  border: 1px solid color-mix(in srgb, var(--chaux) 40%, transparent);
  border-radius: 999px;
  padding: var(--e1) var(--e3);
  cursor: pointer;
  transition: background var(--duree-vive) var(--courbe),
              border-color var(--duree-vive) var(--courbe);
}
.confort-bouton:hover { background: color-mix(in srgb, var(--chaux) 14%, transparent); }
.confort-bouton[aria-pressed="true"] {
  background: var(--bois);
  border-color: var(--bois);
  color: var(--encre);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   2. EN-TETE ET NAVIGATION
   ---------------------------------------------------------------------------
   PAS DE MENU BURGER. C'est un choix, pas un oubli.
   Le burger cache la navigation derriere une icone que la moitie du public
   vise ici n'identifie pas comme un bouton. Sept liens tiennent sur deux
   lignes en telephone : ils restent tous visibles, tout le temps.
--------------------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--chaux) 88%, transparent);
  /* Le flou d'arriere-plan laisse deviner la photo qui defile dessous.
     Si le navigateur ne le gere pas, le fond reste simplement opaque a
     88 % : la degradation est invisible. */
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--filet);
  transition: box-shadow var(--duree-douce) var(--courbe);
}
/* Classe posee par ui.js des que la page a defile : l'en-tete se detache
   par une ombre. Aucun autre changement — un en-tete qui retrecit ou change
   de couleur au defilement est une distraction. */
.entete.entete--detachee { box-shadow: var(--ombre-1); }

.entete__interieur {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--e3) var(--e5);
  padding-block: var(--e3);
}

.marque {
  display: flex; align-items: center; gap: var(--e3);
  text-decoration: none;
}
/* Le logo est petit a dessein. Un logo de 200 px dans un en-tete colle mange
   la hauteur d'ecran utile sur telephone, et c'est le NOM du gite qui doit
   se lire en premier — le logo ne fait que le confirmer. */
.marque__logo { width: 52px; height: auto; flex: none; }

.marque__texte {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 40, 'SOFT' 20, 'WONK' 1;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
}
.marque__texte span {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: 2px;
}

.menu ul {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e1) var(--e4);
  margin: 0; padding: 0; list-style: none;
}
.menu a {
  display: block;
  position: relative;
  padding: var(--e2) 2px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--encre-douce);
  text-decoration: none;
}
.menu a:hover { color: var(--encre); }

/* Le trait sous le lien de la page courante grandit depuis la gauche au
   survol. Anime en `transform` uniquement (jamais en `width`) : le
   navigateur n'a alors ni a recalculer la mise en page ni a repeindre, ce
   qui garde l'animation a 60 images par seconde meme sur un vieux
   telephone. */
.menu a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--bois);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree-vive) var(--courbe);
}
.menu a:hover::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--encre); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }

/* Le lien "Reserver" est une action, pas une rubrique : il prend l'aspect
   d'un bouton pour se distinguer des six autres. */
.menu .menu__action {
  background: var(--foret);
  color: var(--blanc);
  padding: var(--e2) var(--e4);
  border-radius: 999px;
}
.menu .menu__action:hover { background: var(--foret-clair); color: var(--blanc); }
.menu .menu__action::after { display: none; }

/* ---------------------------------------------------------------------------
   3. FILET DE PROGRESSION
   ---------------------------------------------------------------------------
   Un trait de 3 px, couleur bois, sous l'en-tete, qui avance a mesure qu'on
   descend la page. Sur les pages longues (description du gite, avis), il
   indique d'un coup d'oeil combien il reste a lire.

   Anime par `transform: scaleX()` pilote depuis ui.js via une variable CSS.
   Aucun style en ligne n'est ecrit dans le HTML : la CSP du site interdit
   les attributs `style=`, et cette solution la respecte.
--------------------------------------------------------------------------- */
.progression {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--bois);
  transform: scaleX(var(--progression, 0));
  transform-origin: left;
}

/* ---------------------------------------------------------------------------
   4. SCENE — l'image de haut de page
   ---------------------------------------------------------------------------
   C'EST LA SIGNATURE DU SITE. Chaque page a sa propre photographie, definie
   par la variable `--scene` dans 3-pages.css. Le traitement, lui, est
   identique partout : c'est ce qui fait qu'on reconnait le site d'une page
   a l'autre alors que l'image change.

   Structure :
     .scene                  la bande photographique
       .scene__voile         le degrade sombre qui garantit la lisibilite
       .scene__cartouche     le bloc chaux qui mord sur le bas de la photo
         h1
         .scene__accroche
         .donnee             adresse, capacite, donnees courtes — reutilisable

   Le cartouche qui chevauche le bord bas de l'image est le detail qui fait
   la difference : le titre est pose SUR la photo sans jamais etre illisible,
   et le raccord photo/page cesse d'etre une ligne droite banale.
--------------------------------------------------------------------------- */
.scene {
  position: relative;
  /* Pleine largeur d'ecran meme si l'element est dans un conteneur centre. */
  min-height: clamp(220px, 34vw, 420px);
  background-color: var(--encre);
  background-image: var(--scene);
  background-size: cover;
  background-position: var(--scene-position);
  /* La photo reste legerement en retrait pendant que la page defile :
     effet de profondeur obtenu sans une ligne de JavaScript.
     `scroll` en secours sur mobile, ou `fixed` est ignore ou couteux. */
  background-attachment: scroll;
  display: flex; align-items: flex-end;
  isolation: isolate;   /* confine les melanges de calque a ce bloc */
}

/* Voile de lisibilite. Deux degrades superposes :
   — un voile sombre en bas a gauche, la ou se pose le cartouche ;
   — un tres leger assombrissement general, qui empeche qu'une photo
     surexposee (neige, ciel blanc) ne "brule" le haut de la page.
   Sans cela, la lisibilite du titre dependrait de la photo fournie par le
   client, ce qui est exactement le genre de dependance a eviter. */
.scene__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgb(12 16 14 / 62%) 0%, rgb(12 16 14 / 12%) 46%, transparent 78%),
    linear-gradient(to right, rgb(12 16 14 / 38%) 0%, transparent 55%);
}

.scene__cartouche {
  max-width: 44rem;
  margin-bottom: calc(var(--e6) * -1);   /* chevauchement sur la page */
  padding: var(--e5) var(--e6);
  background: var(--chaux);
  border-radius: var(--rayon);
  border-left: 4px solid var(--bois);
  box-shadow: var(--ombre-2);
}
.scene__accroche {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  color: var(--encre-douce);
  margin: var(--e3) 0 var(--e4);
  max-width: 46ch;
}
.scene__cartouche .donnee { display: block; }

/* Le contenu de la page doit commencer sous le cartouche qui deborde. */
.apres-scene { padding-top: var(--e8); }

/* Variante des pages internes : bande plus basse, cartouche plus sobre.
   Seule la page d'accueil merite la pleine hauteur. */
.scene--basse { min-height: clamp(160px, 22vw, 260px); }
.scene--basse .scene__cartouche { padding: var(--e4) var(--e5); }

/* ---------------------------------------------------------------------------
   5. BOUTONS
   ---------------------------------------------------------------------------
   Hauteur minimale 48 px : c'est la cible tactile recommandee par le WCAG,
   et la difference est tres concrete pour une main qui tremble un peu.
--------------------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  min-height: 48px;
  padding: var(--e3) var(--e5);
  font: inherit; font-weight: 700;
  text-decoration: none;
  color: var(--blanc);
  background: var(--foret);
  border: 1px solid var(--foret);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--duree-vive) var(--courbe),
              transform var(--duree-vive) var(--courbe),
              box-shadow var(--duree-vive) var(--courbe);
}
.bouton:hover {
  background: var(--foret-clair);
  border-color: var(--foret-clair);
  color: var(--blanc);
  /* Un seul pixel. Le bouton "repond" sans sautiller. */
  transform: translateY(-1px);
  box-shadow: var(--ombre-1);
}
.bouton:active { transform: translateY(0); box-shadow: none; }

.bouton--secondaire {
  background: transparent;
  color: var(--foret);
  border-color: var(--filet);
}
.bouton--secondaire:hover {
  background: var(--blanc);
  color: var(--foret);
  border-color: var(--foret);
}
.bouton--danger { background: var(--alerte); border-color: var(--alerte); }
.bouton--danger:hover { background: #a33131; border-color: #a33131; }
.bouton--petit { min-height: 38px; padding: var(--e2) var(--e4); font-size: 0.9375rem; }

.actions { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

/* ---------------------------------------------------------------------------
   6. SECTIONS ET CARTES
--------------------------------------------------------------------------- */
.section { margin-block: var(--e7); }
.section > h2 { margin-top: 0; }

/* Petite etiquette au-dessus d'un titre. N'y mettez QUE des informations
   vraies (« 4 chambres », « depuis 2011 ») : une etiquette decorative
   ajoute du bruit et ne dit rien. */
.surtitre {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: var(--e3);
}
.surtitre::before {
  content: ''; display: inline-block;
  width: 1.6rem; height: 2px; margin-right: var(--e2);
  background: var(--bois);
  vertical-align: 0.25em;
}

.carte-bloc {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: var(--e5);
}

.colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); align-items: start; }
/* `auto-fit` + `minmax` : la grille se reorganise seule, sans requete
   media. Une colonne en dessous de 280 px de place disponible. */
.grille-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e5); }

/* ---------------------------------------------------------------------------
   7. GALERIE
--------------------------------------------------------------------------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--e3);
}
.galerie__vignette {
  display: block; margin: 0;
  border-radius: var(--rayon-petit);
  overflow: hidden;                 /* pour que le zoom de l'image soit rogne */
  background: var(--chaux-creuse);
}
.galerie__vignette img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Zoom tres leger au survol, sur l'image seule : le cadre ne bouge pas,
     donc rien ne se decale autour. */
  transition: transform var(--duree-douce) var(--courbe),
              filter var(--duree-douce) var(--courbe);
}
.galerie__vignette:hover img { transform: scale(1.04); filter: brightness(1.04); }

/* Premiere photo en avant sur les grands ecrans : une galerie ou toutes les
   images font la meme taille se regarde moins bien qu'une galerie qui
   hierarchise. */
@media (min-width: 900px) {
  .galerie--rythmee .galerie__vignette:first-child { grid-column: span 2; grid-row: span 2; }
  .galerie--rythmee .galerie__vignette:first-child img { aspect-ratio: 3 / 2.02; height: 100%; }
}

/* ---------------------------------------------------------------------------
   8. CALENDRIER
   ---------------------------------------------------------------------------
   C'est le composant le plus consulte du site : c'est pour lui que les gens
   viennent. Il merite donc plus de soin que le reste.

   LE PROBLEME QUE CETTE VERSION CORRIGE
   La premiere version distinguait « libre » et « occupe » par deux beiges
   tres proches. Sur un ecran de portable en plein jour, la difference etait
   pratiquement invisible — et un calendrier qu'on ne sait pas lire est pire
   qu'une absence de calendrier, parce qu'il donne une fausse certitude.

   TROIS CHANGEMENTS
   1. Le LIBRE est blanc et cerne de vert ; l'OCCUPE est plein, sombre et en
      texte clair. Le contraste entre les deux etats est desormais de 5:1
      au lieu de 1,3:1.
   2. La couleur n'est plus le seul indice : un jour occupe est aussi en
      gras, et les jours libres portent une bordure. Environ 8 % des hommes
      distinguent mal le rouge du vert — se reposer sur la seule teinte
      exclut ces visiteurs.
   3. Les cases sont plus grandes (2,9 rem) et le mois est en gros titre.
--------------------------------------------------------------------------- */
.calendriers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, max-content));
  gap: var(--e5);
  justify-content: start;
  margin-block: var(--e5);
}

.calendrier {
  border-collapse: separate; border-spacing: 3px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: var(--e4);
  box-shadow: var(--ombre-1);
}

.calendrier caption {
  padding: var(--e1) var(--e1) var(--e4);
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 40, 'SOFT' 30, 'WONK' 1;
  font-size: 1.35rem; font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: capitalize;
  text-align: left;
  color: var(--encre);
}

.calendrier th {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  padding-bottom: var(--e2);
}

/* --- LIBRE : blanc, cerne de vert. L'etat qu'on cherche doit etre celui
       qui saute aux yeux. --- */
.jour {
  width: 2.9rem; height: 2.9rem;
  text-align: center; vertical-align: middle;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  color: var(--foret);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--foret) 32%, transparent);
}

/* --- Hors du mois : rien du tout. --- */
.jour--vide { background: transparent; box-shadow: none; }

/* --- PASSE : efface. Ces dates ne sont plus reservables, elles ne doivent
       plus attirer l'oeil. --- */
.jour--passe {
  color: var(--encre-tenue);
  background: transparent;
  box-shadow: none;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* --- OCCUPE : plein et sombre. La difference avec « libre » se voit
       maintenant a un metre de l'ecran. --- */
.jour--occupe {
  background: var(--occupe);
  color: var(--blanc);
  font-weight: 700;
  box-shadow: none;
}

/* --- DEPART : la nuit est libre, une arrivee est donc possible le meme
       jour. La diagonale le montre sans avoir a lire la legende — c'est la
       rotation du samedi, indispensable en location saisonniere.
       Le trait clair au milieu separe nettement les deux moities. --- */
.jour--depart {
  background:
    linear-gradient(135deg,
      var(--occupe) 0 46%,
      var(--blanc) 46% 54%,
      var(--blanc) 54% 100%);
  color: var(--foret);
  font-weight: 400;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--foret) 32%, transparent);
}

/* --- Legende ---
   Placee sous le calendrier, en carte, pour qu'on la trouve sans la
   chercher. Chaque entree reprend EXACTEMENT le style de la case
   correspondante : une legende qui ne ressemble pas a la chose qu'elle
   explique ne sert a rien. */
.legende {
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5);
  align-items: center;
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--chaux-creuse);
  border-radius: var(--rayon-petit);
  font-size: 0.875rem;
  color: var(--encre-douce);
}
.legende > span { display: inline-flex; align-items: center; gap: var(--e2); }

.pastille {
  width: 1.35rem; height: 1.35rem;
  border-radius: 5px;
  flex: none;
}
.pastille--libre {
  background: var(--blanc);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--foret) 32%, transparent);
}
.pastille--occupe { background: var(--occupe); }
.pastille--depart {
  background: linear-gradient(135deg,
    var(--occupe) 0 46%, var(--blanc) 46% 54%, var(--blanc) 54% 100%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--foret) 32%, transparent);
}

/* ---------------------------------------------------------------------------
   9. FORMULAIRES
--------------------------------------------------------------------------- */
.formulaire { max-width: 42rem; }
.formulaire fieldset {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--blanc);
  padding: var(--e5);
  margin: 0 0 var(--e5);
}
.formulaire legend {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 30, 'WONK' 1;
  font-size: 1.2rem; font-weight: 600;
  padding-inline: var(--e2);
}

.champ { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
.champ label { font-weight: 700; font-size: 0.9375rem; }
.champ input, .champ textarea, .champ select {
  font: inherit;
  width: 100%;
  min-height: 48px;
  padding: var(--e3);
  color: inherit;
  background: var(--chaux);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-petit);
  transition: border-color var(--duree-vive) var(--courbe),
              background var(--duree-vive) var(--courbe);
}
.champ input:hover, .champ textarea:hover, .champ select:hover { border-color: var(--encre-tenue); }
.champ input:focus, .champ textarea:focus, .champ select:focus { background: var(--blanc); }
.champ textarea { min-height: 8rem; resize: vertical; }

.champ--case { flex-direction: row; align-items: flex-start; gap: var(--e3); }
.champ--case input { width: auto; min-height: 0; width: 1.3rem; height: 1.3rem; margin-top: 0.25rem; flex: none; }
.champ--case label { font-weight: 400; }

.champ--erreur input, .champ--erreur textarea, .champ--erreur select {
  border-color: var(--alerte);
  background: var(--alerte-fond);
}
.erreur { color: var(--alerte); font-size: 0.875rem; font-weight: 700; }

.note-choix {
  display: inline-flex; align-items: center; gap: var(--e2);
  margin-right: var(--e4); padding: var(--e2) 0;
}
.note-choix input { width: 1.3rem; height: 1.3rem; min-height: 0; }

/* ---------------------------------------------------------------------------
   10. DEVIS — le total calcule en direct sur la page de reservation
--------------------------------------------------------------------------- */
.devis {
  background: var(--bois-pale);
  border-left: 4px solid var(--bois);
  border-radius: var(--rayon-petit);
  padding: var(--e4);
  font-size: 0.9375rem;
}
.devis:empty { display: none; }   /* pas de bloc vide avant le calcul */
.devis strong {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 40, 'WONK' 1;
  font-size: 1.4rem;
}

/* ---------------------------------------------------------------------------
   11. AVIS
--------------------------------------------------------------------------- */
.avis-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e5); }
.avis {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: var(--e5);
  display: flex; flex-direction: column; gap: var(--e2);
}
.avis p:last-of-type { margin-bottom: 0; }
.etoiles { color: var(--filet); letter-spacing: 0.12em; font-size: 1.1rem; }
.etoile--pleine { color: var(--bois); }

/* Reponse du proprietaire : visuellement rattachee a l'avis, mais en
   retrait pour qu'on voie tout de suite que ce n'est plus le client qui
   parle. */
.reponse {
  margin: var(--e3) 0 0;
  padding: var(--e3) var(--e4);
  background: var(--chaux-creuse);
  border-left: 3px solid var(--foret);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  font-size: 0.9375rem;
  color: var(--encre-douce);
}

/* ---------------------------------------------------------------------------
   12. ALERTES
--------------------------------------------------------------------------- */
.alerte {
  padding: var(--e4);
  border: 1px solid var(--filet);
  border-left-width: 4px;
  border-radius: var(--rayon-petit);
  background: var(--chaux-creuse);
  margin-block: var(--e4);
}
.alerte--succes { background: var(--succes-fond); border-color: var(--succes); color: var(--succes); }
.alerte--erreur { background: var(--alerte-fond); border-color: var(--alerte); color: var(--alerte); }
.alerte p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   13. FICHE DESCRIPTIVE (liste de definitions)
--------------------------------------------------------------------------- */
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: var(--e3) var(--e5); margin: 0; }
.fiche dt { font-size: 0.875rem; font-weight: 700; color: var(--encre-douce); }
.fiche dd { margin: 0; }
.fiche div { display: contents; }   /* permet de grouper dt+dd en HTML */

.creneaux { list-style: none; padding: 0; margin: 0; }
.creneaux li {
  display: flex; justify-content: space-between; gap: var(--e4);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--filet);
}

/* ---------------------------------------------------------------------------
   14. CARTE OPENSTREETMAP
   ---------------------------------------------------------------------------
   L'iframe n'est PAS chargee tant que le visiteur n'a pas clique : aucune
   requete ne part vers un tiers avant son geste. Le bloc ci-dessous est
   l'ecran d'attente qui remplace la carte.
--------------------------------------------------------------------------- */
.carte {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--chaux-creuse);
  padding: var(--e6) var(--e5);
  text-align: center;
}
.carte iframe {
  width: 100%; height: 420px;
  border: 0; border-radius: var(--rayon-petit);
  display: block;
}
/* Une fois la carte chargee, le cadre d'attente n'a plus lieu d'etre. */
.carte:has(iframe) { padding: 0; background: none; border: 0; }

.coordonnees {
  font-family: ui-monospace, Menlo, monospace;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem);
  letter-spacing: 0.04em;
  background: var(--bois-pale);
  border-radius: var(--rayon-petit);
  padding: var(--e3) var(--e4);
  display: inline-block;
}

.liens-itineraire { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

/* ---------------------------------------------------------------------------
   15. PIED DE PAGE
--------------------------------------------------------------------------- */
.pied {
  margin-top: var(--e8);
  padding-block: var(--e7) var(--e5);
  background: var(--encre);
  color: var(--chaux-creuse);
}
.pied__interieur { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e5); }
.pied a { color: var(--blanc); text-decoration-color: color-mix(in srgb, var(--bois) 60%, transparent); }
.pied a:hover { color: var(--bois); }
.pied strong { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 40, 'WONK' 1; font-size: 1.15rem; }
.pied .discret { color: var(--encre-tenue); }

.pagination { display: flex; justify-content: space-between; gap: var(--e4); margin-block: var(--e5); }

/* Pile d'appel affichee en developpement uniquement. */
.trace {
  background: #1b1f1d; color: #d6dcd4;
  padding: var(--e4); border-radius: var(--rayon-petit);
  font-size: 0.8125rem; overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   ADAPTATION MOBILE
   ---------------------------------------------------------------------------
   Une seule rupture, a 760 px. Tout le reste s'adapte tout seul grace a
   `clamp()` et `auto-fit`. Moins il y a de requetes media, moins il y a de
   combinaisons a tester.
--------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --e7: 3rem; --e8: 3.5rem; }

  .marque__logo { width: 44px; }

  .conteneur { padding-inline: var(--e4); }

  /* L'en-tete cesse d'etre collee : sur un ecran de telephone elle mangeait
     un quart de la hauteur utile. */
  .entete { position: static; }

  .entete__interieur { flex-direction: column; align-items: flex-start; }
  .menu ul { gap: var(--e1) var(--e3); }
  .menu a { font-size: 0.875rem; }

  .colonnes { grid-template-columns: 1fr; }

  .scene { min-height: 240px; }
  .scene__cartouche {
    margin-bottom: calc(var(--e5) * -1);
    padding: var(--e4);
  }
  .apres-scene { padding-top: var(--e6); }

  .calendriers { justify-content: center; }
  .fiche { grid-template-columns: 1fr; gap: var(--e1); }
  .fiche dd { margin-bottom: var(--e3); }

  /* Sur telephone, un bouton pleine largeur est plus facile a viser. */
  .actions .bouton { width: 100%; }
}

/* ---------------------------------------------------------------------------
   IMPRESSION
   ---------------------------------------------------------------------------
   Les gens impriment la page d'acces avant de prendre la route, et la page
   de confirmation de reservation. Autant que ce soit lisible.
--------------------------------------------------------------------------- */
@media print {
  .aide, .menu, .progression, .scene__voile, .pied { display: none; }
  body { background: #fff; font-size: 11pt; }
  .scene { min-height: 0; background: none; }
  .scene__cartouche { margin: 0; box-shadow: none; border: 1px solid #999; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* ---------------------------------------------------------------------------
   16. CARTES DE TARIF
   ---------------------------------------------------------------------------
   Utilisees sur la page « Le sejour ». Le prix est la seule chose qu'on
   regarde : il est donc en Fraunces, gros, et tout le reste est petit.
--------------------------------------------------------------------------- */
.tarif {
  display: flex; flex-direction: column; gap: var(--e1);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: var(--e5);
}
/* La carte tarifaire mise en avant porte le filet bois : c'est la seule qui
   se distingue, parce que c'est celle qu'on cherche a verifier. */
.tarif--haute { border-left: 4px solid var(--bois); }

.tarif__libelle {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre-douce);
}
.tarif__prix {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 60, 'SOFT' 30, 'WONK' 1;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* ---------------------------------------------------------------------------
   17. ACCUEIL — les blocs qui n'existent que sur la page d'accueil
   ---------------------------------------------------------------------------
   La page d'accueil a un travail que les autres n'ont pas : donner envie en
   trois secondes. Elle a donc droit a des blocs plus affirmes.
--------------------------------------------------------------------------- */

/* --- Les chiffres cles ---------------------------------------------------
   Remplacent la liste de definitions terne du haut de page. Les trois
   informations qui decident si un visiteur reste : combien on tient,
   combien ca coute, ce qu'en pensent les autres. */
.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;                       /* la grille EST la bordure */
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
}
.repere {
  background: var(--blanc);
  padding: var(--e5) var(--e4);
  text-align: center;
}
.repere__valeur {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 60, 'SOFT' 30, 'WONK' 1;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.repere__libelle {
  display: block;
  margin-top: var(--e1);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.repere a { color: inherit; text-decoration: none; }
.repere a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Les arguments -------------------------------------------------------
   Trois a six atouts, en texte. Pas d'icones : un jeu d'icones est une
   dependance de plus, un vocabulaire a apprendre, et « maison entiere »
   ecrit en toutes lettres se comprend sans apprentissage. */
.atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e5);
  list-style: none; padding: 0; margin: 0;
}
.atout {
  padding-top: var(--e3);
  /* Le filet couleur bois en tete de chaque atout : c'est le seul rappel
     graphique du logo dans le corps de page, et il suffit. */
  border-top: 3px solid var(--bois);
}
.atout strong { display: block; margin-bottom: var(--e1); }
.atout span { color: var(--encre-douce); font-size: 0.9375rem; }

/* --- Bande de photos pleine largeur --------------------------------------
   Un ruban qui deborde du conteneur : c'est ce qui casse la colonne de
   texte et donne du souffle a la page. Defilement horizontal sur mobile
   plutot qu'un empilement de six images. */
.ruban {
  /* Sort du conteneur centre pour occuper toute la largeur de l'ecran.
     `50%` de la fenetre moins `50%` du conteneur, de chaque cote. */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--e5), calc(50vw - var(--largeur) / 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: var(--e3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Masque la barre de defilement sans empecher le geste. */
  scrollbar-width: thin;
  padding-bottom: var(--e3);
}
.ruban > * { scroll-snap-align: start; }
.ruban img { aspect-ratio: 4 / 5; object-fit: cover; }

/* --- Appel a l'action de fin de page -------------------------------------
   Une derniere occasion de cliquer, pour qui a tout lu. */
.appel {
  margin-top: var(--e8);
  padding: var(--e7) var(--e5);
  background: var(--encre);
  color: var(--chaux);
  border-radius: var(--rayon);
  text-align: center;
}
.appel h2 {
  margin-top: 0;
  color: var(--blanc);
}
.appel p { max-width: 48ch; margin-inline: auto; color: var(--chaux-creuse); }
.appel .actions { justify-content: center; }
.appel .bouton--secondaire {
  color: var(--blanc);
  border-color: color-mix(in srgb, var(--chaux) 40%, transparent);
}
.appel .bouton--secondaire:hover {
  background: color-mix(in srgb, var(--chaux) 14%, transparent);
  color: var(--blanc);
  border-color: var(--chaux);
}

/* Rappel de tarif au-dessus du calendrier. Le filet bois le distingue du
   texte courant sans en faire une alerte. */
.rappel-tarif {
  display: inline-block;
  padding: var(--e3) var(--e4);
  background: var(--bois-pale);
  border-left: 4px solid var(--bois);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}
.rappel-tarif strong {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 40, 'WONK' 1;
  font-size: 1.35rem;
}

/* ---------------------------------------------------------------------------
   18. SELECTION DE DATES AU CLIC
   ---------------------------------------------------------------------------
   Ajoute par /public/js/calendrier.js. Sans JavaScript, aucune de ces
   classes n'apparait et le calendrier reste un tableau de consultation.
--------------------------------------------------------------------------- */

/* Le curseur dit que c'est cliquable AVANT le clic. Sans cela, personne ne
   devine qu'un calendrier de consultation est devenu interactif. */
html.js .jour[data-date]:not(.jour--vide):not(.jour--passe) { cursor: pointer; }

html.js .jour[data-date]:not(.jour--vide):not(.jour--passe):not(.jour--occupe):hover {
  box-shadow: inset 0 0 0 2px var(--foret);
}

/* Les deux bornes choisies : pleines, en vert. */
.jour--choisi {
  background: var(--foret) !important;
  color: var(--blanc) !important;
  font-weight: 700;
  box-shadow: none !important;
}

/* Les nuits comprises entre les deux : vert pale, pour lire la periode d'un
   coup d'oeil sans que ce soit aussi fort que les bornes. */
.jour--entre {
  background: color-mix(in srgb, var(--foret) 14%, var(--blanc)) !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--foret) 30%, transparent) !important;
}

/* Periode survolee qui traverse une reservation : le refus se voit AVANT le
   clic. Barre ET couleur : la couleur seule exclurait les daltoniens. */
.jour--impossible {
  background: var(--alerte-fond) !important;
  color: var(--alerte) !important;
  text-decoration: line-through;
  box-shadow: inset 0 0 0 1.5px var(--alerte) !important;
}

/* Bandeau de retour sous le calendrier. */
.choix-dates {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--bois-pale);
  border-left: 4px solid var(--bois);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  font-weight: 700;
}
.choix-dates[hidden] { display: none; }

/* Detail du devis : ce qui s'ajoute au total du sejour, et quand le payer.
   Volontairement plus discret que le total — ce sont des precisions, pas le
   chiffre principal. */
.devis__details {
  list-style: none;
  margin: var(--e3) 0 0;
  padding-top: var(--e3);
  border-top: 1px solid color-mix(in srgb, var(--bois) 35%, transparent);
  font-size: 0.875rem;
  color: var(--encre-douce);
}
.devis__details li { padding: 2px 0; }

/* ---------------------------------------------------------------------------
   19. ALENTOURS
   ---------------------------------------------------------------------------
   Liste des idees de sortie. La duree de trajet est en tete de ligne, en
   gros : c'est l'information sur laquelle on decide, pas le nom du lieu.
--------------------------------------------------------------------------- */
.alentours { list-style: none; margin: 0; padding: 0; }

.alentour {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--e4);
  align-items: baseline;
  padding: var(--e4) 0;
  border-top: 1px solid var(--filet);
}
.alentour:last-child { border-bottom: 1px solid var(--filet); }

.alentour__duree {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 40, 'SOFT' 30, 'WONK' 1;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--foret);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.alentour h3 { margin-bottom: var(--e1); }
.alentour p { margin: 0; color: var(--encre-douce); font-size: 0.9375rem; }

@media (max-width: 560px) {
  /* La colonne de durée passe au-dessus : deux colonnes sur 320 px
     écrasent le texte à trois mots par ligne. */
  .alentour { grid-template-columns: 1fr; gap: var(--e1); }
}

/* ---------------------------------------------------------------------------
   19. LIEUX DE LA RÉGION
   ---------------------------------------------------------------------------
   Page « La région ». Pas de photographies : nous n'avons de droits sur
   aucune image du lac ou des Glières, et une image générée n'a rien à faire
   sur un site de location. Le texte bien composé suffit, et se charge en
   un instant.
--------------------------------------------------------------------------- */
.lieux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e5);
  list-style: none; padding: 0; margin: 0;
}

.lieu {
  padding: var(--e5);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  /* Le filet bois en tête, comme les atouts de l'accueil : c'est le même
     type de contenu, il porte la même marque. */
  border-top: 3px solid var(--bois);
}
.lieu h3 { margin-bottom: var(--e1); }
.lieu p:last-child { margin-bottom: 0; }

/* La durée décide si un visiteur ira ou non : elle est mise en avant, pas
   noyée dans la description. */
.lieu__duree {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: var(--e3);
}

/* ---------------------------------------------------------------------------
   19. LIEUX À DÉCOUVRIR
   ---------------------------------------------------------------------------
   Page « Découvrir la région ». Chaque fiche fonctionne AVEC ou SANS photo :
   les propriétaires n'en ont pas forcément pour chaque lieu, et une image
   prise sur Internet serait une contrefaçon.
--------------------------------------------------------------------------- */
.lieux { display: grid; gap: var(--e5); }

.lieu {
  display: grid;
  /* Une colonne par défaut ; deux dès qu'il y a une photo et de la place.
     Voir la requête media plus bas. */
  gap: var(--e4);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
}

.lieu__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.lieu__texte { padding: var(--e5); }
.lieu__texte h3 { font-size: 1.25rem; }
.lieu__texte .donnee { margin: 0 0 var(--e3); }
.lieu__texte .prose { max-width: 60ch; }
.lieu__texte p:last-child { margin-bottom: 0; }

/* Sur écran large, la photo passe à gauche et le texte à droite. La règle
   `:has()` fait que les fiches SANS photo gardent leur pleine largeur, au
   lieu de laisser une colonne vide. */
@media (min-width: 760px) {
  .lieu:has(.lieu__photo) { grid-template-columns: 320px 1fr; }
  .lieu:has(.lieu__photo) .lieu__photo { height: 100%; aspect-ratio: auto; }
}