/* ==========================================================================
   L'Escapade Normande — feuille de style unique du site
   --------------------------------------------------------------------------
   Toutes les pages du site utilisent CE seul fichier.
   Si tu changes une couleur ici, elle change partout. C'est le but.

   DIRECTION VISUELLE
     Ambiance longère normande : beige, pierre, bois, vert sourd.
     Chaleureux mais raffiné. Beaucoup d'air, coins largement arrondis,
     typographie affirmée.

   Organisation du fichier :
     1.  Variables (couleurs, polices, arrondis, espacements)
     2.  Remise à zéro et bases
     3.  Bandeau « MAQUETTE »  <-- à retirer avant la mise en ligne
     4.  Mise en page générale
     5.  En-tête et menu
     6.  Pied de page
     7.  Titres et textes
     8.  Boutons
     9.  HERO de l'accueil (grande photo + panneau blanc flottant)
     10. Bannières des pages intérieures
     11. Images et galeries
     12. Cartes
     13. Blocs spécifiques
     14. Zones réservées aux widgets du channel manager
     15. Formats mobiles
   ========================================================================== */


/* ==========================================================================
   0. POLICE DE CARACTÈRE — FRAUNCES
   --------------------------------------------------------------------------
   Fraunces — Copyright 2018 The Fraunces Project Authors
   https://github.com/undercasetype/Fraunces
   Sous licence SIL Open Font License 1.1.
   Texte complet de la licence : css/polices/LICENCE-Fraunces-OFL.txt

   Usage commercial et hébergement autorisés. Ne pas supprimer le fichier
   de licence du dépôt : c'est la seule obligation qui pèse sur nous.

   Le fichier est stocké DANS le projet (css/polices/). Le navigateur du
   visiteur ne contacte jamais Google : le site reste sans aucun cookie,
   donc sans bandeau RGPD.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;

  /* C'est une police « variable » : un seul fichier contient toutes les
     graisses de 300 à 700. Pas besoin d'un fichier par graisse. */
  font-weight: 300 700;

  /* swap = le texte s'affiche tout de suite en Georgia, puis bascule sur
     Fraunces dès qu'elle est chargée. Le visiteur ne voit jamais de vide. */
  font-display: swap;

  src: url('polices/fraunces-variable-latin.woff2') format('woff2');

  /* Jeu de caractères latin : couvre tout le français, accents, œ et
     apostrophes typographiques comprises. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   1. VARIABLES
   Ce sont des surnoms pour des valeurs. On écrit la couleur une fois ici,
   et partout ailleurs on écrit var(--nom). Pratique pour tout changer d'un coup.
   ========================================================================== */

:root {

  /* --- COULEURS ---
     Palette chaude : sable, pierre, bois, vert sourd, terre cuite.
     Aucun bleu, aucun gris froid. */

  --sable:        #F7F3EA;  /* fond général : beige clair et chaud */
  --sable-fonce:  #EFE8DA;  /* fond des sections alternées */
  --pierre:       #E2D9C8;  /* fond des blocs, ton pierre calcaire */
  --trait:        #DACFBC;  /* filets, bordures */

  --encre:        #2E2A24;  /* texte principal : brun très foncé, pas noir */
  --encre-douce:  #6D6456;  /* texte secondaire */

  --vert:         #55634E;  /* couleur principale : vert sourd, olive */
  --vert-fonce:   #3D4738;
  --vert-clair:   #7A8A72;

  --bois:         #8A6A45;  /* bois de chêne, pour les accents discrets */
  --terre:        #A85F3B;  /* terre cuite : couleur des boutons */
  --terre-fonce:  #8C4C2D;

  --blanc:        #FFFDF9;  /* blanc légèrement crème, jamais blanc pur */

  /* --- POLICES ---
     Titres : Fraunces, hébergée dans le projet (voir section 0).
              Georgia sert de repli le temps du chargement, et si jamais
              le fichier venait à manquer.
     Texte  : les polices déjà présentes sur l'ordinateur du visiteur.
              Rien à télécharger, donc aucun cookie à déclarer au RGPD. */
  --titre: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --texte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* --- ARRONDIS ---
     Le « coins arrondis » de la direction visuelle. Trois valeurs seulement,
     pour rester cohérent partout. */
  --r-grand:   28px;   /* hero, grandes bannières */
  --r-carte:   18px;   /* cartes, panneaux, images */
  --r-petit:   12px;   /* petits éléments */
  --r-pilule:  999px;  /* boutons : totalement arrondis */

  /* --- OMBRES ---
     Toujours teintées de brun, jamais de noir pur : une ombre grise sur
     un fond beige fait sale. */
  --ombre-douce:  0 2px 10px rgba(70, 55, 35, 0.06);
  --ombre-carte:  0 10px 30px rgba(70, 55, 35, 0.10);
  --ombre-flottante: 0 24px 60px rgba(50, 38, 22, 0.22);

  /* --- LARGEURS ET RESPIRATION --- */
  --largeur: 1240px;
  --largeur-texte: 720px;
  --air: 112px;        /* espacement vertical d'une section : généreux */
  --air-petit: 72px;
}


/* ==========================================================================
   2. REMISE À ZÉRO ET BASES
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* la largeur inclut les marges intérieures */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.75;
  color: var(--encre);
  background: var(--sable);
  -webkit-font-smoothing: antialiased;
}

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

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

a:hover {
  color: var(--terre);
}


/* ==========================================================================
   3. BANDEAU « MAQUETTE »
   --------------------------------------------------------------------------
   >>> POUR LE FAIRE DISPARAÎTRE DE TOUT LE SITE D'UN SEUL COUP :
   >>> remplacer  display: block;  par  display: none;  ci-dessous.
   ========================================================================== */

.bandeau-maquette {
  /* ⚠️ BANDEAU DÉSACTIVÉ le 13 août 2026, à la demande du client.

     Le HTML reste dans les 19 pages : le rallumer se fait en remettant
     « block » ci-dessous, sans toucher à une seule page. Utile si le site
     doit repasser en démonstration devant quelqu'un.

     ⚠️ CE QUE SON EXTINCTION SIGNIFIE : le site ne prévient plus que son
     contenu est provisoire. Tout ce qui reste inventé — surfaces, quelques
     équipements — s'affiche désormais comme une information ferme. */
  display: none;           /* <-- remettre "block" pour réafficher le bandeau */
  background: #7E3B22;
  color: #FBEFE4;
  text-align: center;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 200;
}

.bandeau-maquette span {
  display: inline-block;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 6px;
}


/* ==========================================================================
   4. MISE EN PAGE GÉNÉRALE
   ========================================================================== */

.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 28px;
}

.contenu-texte {
  max-width: var(--largeur-texte);
  margin: 0 auto;
  padding: 0 28px;
}

.section {
  padding: var(--air) 0;
}

.section--serree {
  padding: var(--air-petit) 0;
}

.section--fond {
  background: var(--sable-fonce);
}

.section--vert {
  background: var(--vert);
  color: var(--sable);
}

.section--vert h2,
.section--vert h3 {
  color: var(--sable);
}

.section--vert a {
  color: #E4D6BE;
}


/* ==========================================================================
   5. EN-TÊTE ET MENU
   ========================================================================== */

.entete {
  background: var(--sable);
  position: sticky;   /* le menu reste visible quand on descend */
  top: 0;
  z-index: 100;
}

.entete__interieur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.logo {
  font-family: var(--titre);
  font-size: 23px;
  font-weight: normal;
  color: var(--vert);
  text-decoration: none;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.logo span {
  display: block;
  font-family: var(--texte);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: 4px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  list-style: none;
}

.menu a {
  color: var(--encre);
  text-decoration: none;
  font-size: 15px;
}

.menu a:hover {
  color: var(--terre);
}

/* La page en cours est marquée dans le menu : class="actif" sur son lien. */
.menu a.actif {
  color: var(--terre);
  border-bottom: 2px solid var(--terre);
  padding-bottom: 3px;
}

/* Le bouton « Réserver » dans le menu reste compact */
.menu .bouton {
  padding: 11px 26px;
  font-size: 15px;
}

.menu .bouton.actif {
  border-bottom: 2px solid var(--terre);
}


/* ==========================================================================
   6. PIED DE PAGE
   ========================================================================== */

.pied {
  background: var(--vert-fonce);
  color: #D3D8CE;
  padding: 80px 0 32px;
  font-size: 15px;
}

.pied a {
  color: #D3D8CE;
  text-decoration: none;
}

.pied a:hover {
  color: var(--blanc);
  text-decoration: underline;
}

.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 40px;
}

.pied h3 {
  font-family: var(--texte);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9CA894;
  margin-bottom: 16px;
  font-weight: 600;
}

.pied ul {
  list-style: none;
}

.pied li {
  margin-bottom: 9px;
}

.pied__bas {
  border-top: 1px solid rgba(255, 253, 249, 0.13);
  margin-top: 52px;
  padding-top: 26px;
  font-size: 13px;
  color: #93A08B;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}


/* ==========================================================================
   7. TITRES ET TEXTES
   --------------------------------------------------------------------------
   Typographie affirmée : les titres sont nettement plus grands qu'avant,
   avec un interlignage resserré et un léger rapprochement des lettres.

   clamp(mini, souhaité, maxi) : la taille s'adapte toute seule à la largeur
   de l'écran, sans avoir besoin d'écrire des règles pour le mobile.
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 500;
  color: var(--vert);
  line-height: 1.12;
  letter-spacing: -0.02em;

  /* Fraunces adapte son dessin à la taille du texte : plus délicat en très
     grand, plus robuste en petit. C'est le comportement par défaut du
     navigateur, on l'écrit ici pour que ce soit explicite. */
  font-optical-sizing: auto;

  /* SOFT adoucit les empattements. 0 = anguleux, 100 = très arrondi.
     40 donne la chaleur voulue sans tomber dans le mou. */
  font-variation-settings: 'SOFT' 40, 'WONK' 0;
}

h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  font-weight: 600;
  margin-bottom: 22px;

  /* WONK à 1 active les formes alternatives « de travers » de Fraunces :
     terminaisons évasées, g à queue ouverte. C'est ce qui donne le côté
     enseigne peinte à la main. Réservé aux grands titres — en petit,
     ça nuirait à la lisibilité. */
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

h2 {
  font-size: clamp(1.85rem, 3.1vw, 2.6rem);
  margin-bottom: 24px;
}

h3 {
  font-size: 21px;
  line-height: 1.25;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

p {
  margin-bottom: 20px;
}

p:last-child {
  margin-bottom: 0;
}

/* Petit texte en majuscules espacées, posé au-dessus d'un titre */
.surtitre {
  font-family: var(--texte);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: 16px;
  font-weight: 600;
}

/* Paragraphe d'introduction */
.chapeau {
  font-size: 20px;
  line-height: 1.65;
  color: var(--encre-douce);
}

.centre {
  text-align: center;
}

/* Fil d'Ariane : Accueil › Nos gîtes › La Charreterie */
.fil {
  font-size: 14px;
  color: var(--encre-douce);
  padding: 24px 0 0;
}

.fil a {
  color: var(--encre-douce);
}

.liste {
  margin: 0 0 20px 22px;
}

.liste li {
  margin-bottom: 9px;
}

/* Un bloc de titre centré, avec de l'air autour */
.titre-section {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.titre-section p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   8. BOUTONS
   Entièrement arrondis (« pilule »), comme dans les références.
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--terre);
  color: var(--blanc);
  padding: 15px 34px;
  border-radius: var(--r-pilule);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid var(--terre);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.bouton:hover {
  background: var(--terre-fonce);
  border-color: var(--terre-fonce);
  color: var(--blanc);
  transform: translateY(-1px);
}

/* Variante « creuse » : contour seul, pour l'action secondaire */
.bouton--contour {
  background: transparent;
  color: var(--terre);
}

.bouton--contour:hover {
  background: var(--terre);
  color: var(--blanc);
}

/* Variante claire, à poser sur un fond sombre ou une photo */
.bouton--clair {
  background: var(--blanc);
  color: var(--vert-fonce);
  border-color: var(--blanc);
}

.bouton--clair:hover {
  background: #fff;
  border-color: #fff;
  color: var(--vert-fonce);
}

/* Variante verte, pour poser sur un fond clair */
.bouton--vert {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--blanc);
}

.bouton--vert:hover {
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
}

.boutons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.boutons--centre {
  justify-content: center;
}


/* ==========================================================================
   9. HERO DE L'ACCUEIL
   --------------------------------------------------------------------------
   Grande photo plein cadre, titre très grand par-dessus, et un panneau
   blanc flottant en surimpression sur la droite.

   Le tout est légèrement détaché des bords et fortement arrondi : c'est ce
   qui donne l'effet « cadre » de la première référence.
   ========================================================================== */

.hero {
  position: relative;
  margin: 0 20px;
  border-radius: var(--r-grand);
  overflow: hidden;
  min-height: 660px;
  display: flex;
  align-items: center;
  isolation: isolate;   /* garde les enfants dans le cadre arrondi */
}

/* La photo, qui remplit tout le cadre */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* remplit sans se déformer */
  z-index: 0;
}

/* Voile sombre par-dessus la photo, pour que le texte blanc reste lisible.
   Plus dense en bas et à gauche, là où se trouve le titre. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(30, 22, 12, 0.68) 0%, rgba(30, 22, 12, 0.34) 45%, rgba(30, 22, 12, 0.12) 100%),
    linear-gradient(to top, rgba(30, 22, 12, 0.45) 0%, rgba(30, 22, 12, 0) 55%);
}

.hero__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 88px 48px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}

/* --- Le texte du hero --- */

.hero__texte {
  color: var(--blanc);
}

.hero__surtitre {
  font-family: var(--texte);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #EBD9BF;
  font-weight: 600;
  margin-bottom: 24px;
}

/* Le très grand titre. C'est la pièce maîtresse de la page. */
.hero__titre {
  font-family: var(--titre);
  font-weight: 600;
  color: var(--blanc);
  font-size: clamp(3rem, 6.4vw, 5.6rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  text-shadow: 0 2px 30px rgba(25, 18, 10, 0.35);

  /* Le titre le plus grand du site : c'est ici que le caractère de
     Fraunces doit se voir le plus. */
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
}

.hero__sous-titre {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: #F2E9DA;
  max-width: 30em;
  margin-bottom: 36px;
  text-shadow: 0 1px 18px rgba(25, 18, 10, 0.4);
}

/* Les repères de distance posés sous le titre, séparés par des filets */
.hero__reperes {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 253, 249, 0.28);
}

.hero__repere strong {
  display: block;
  font-family: var(--titre);
  font-size: 30px;
  font-weight: normal;
  color: var(--blanc);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero__repere span {
  display: block;
  font-size: 13.5px;
  color: #E0D3BE;
  margin-top: 2px;
}

/* --- Le panneau blanc flottant ---
   C'est le bloc en surimpression des deux références.
   Il accueillera plus tard le widget de recherche du channel manager. */

.hero__panneau {
  background: var(--blanc);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-flottante);
  padding: 36px;
}

.hero__panneau h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.hero__panneau p {
  font-size: 15.5px;
  color: var(--encre-douce);
  line-height: 1.6;
}

.hero__panneau .bouton {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* Petite mention sous le panneau */
.hero__panneau-note {
  font-size: 13px;
  color: var(--encre-douce);
  text-align: center;
  margin-top: 18px;
}


/* ==========================================================================
   10. BANNIÈRES DES PAGES INTÉRIEURES
   Même esprit que le hero, en plus sobre et plus court.
   ========================================================================== */

.banniere {
  position: relative;
  height: 520px;
  margin: 0 20px;
  border-radius: var(--r-grand);
  overflow: hidden;
  background: var(--pierre);
  isolation: isolate;
}

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

.banniere__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 22, 12, 0.72) 0%, rgba(30, 22, 12, 0.18) 55%, rgba(30, 22, 12, 0.08) 100%);
  display: flex;
  align-items: flex-end;
}

.banniere__texte {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 48px 56px;
  width: 100%;
  color: var(--blanc);
}

.banniere__texte h1 {
  color: var(--blanc);
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  text-shadow: 0 2px 26px rgba(25, 18, 10, 0.4);
}

.banniere__texte p {
  color: #F0E7D8;
  font-size: 19px;
  text-shadow: 0 1px 16px rgba(25, 18, 10, 0.45);
}

.banniere--courte {
  height: 380px;
}


/* ==========================================================================
   11. IMAGES ET GALERIES
   ========================================================================== */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.galerie img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--r-carte);
}

/* Bloc « texte d'un côté, image de l'autre » */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.duo img {
  border-radius: var(--r-carte);
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  box-shadow: var(--ombre-douce);
}

.duo--inverse .duo__texte {
  order: 2;
}


/* ==========================================================================
   12. CARTES
   --------------------------------------------------------------------------
   Photo, nom, capacité, puis un bouton en bas.
   Le lien « .carte__lien » est automatiquement transformé en bouton :
   toutes les cartes du site en profitent sans changer une ligne de HTML.
   ========================================================================== */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

/* Le « min(400px, 100%) » n'est pas une coquetterie, il corrige un vrai bogue.

   Écrit « minmax(400px, 1fr) », le navigateur impose une colonne d'au moins
   400 px MÊME SI son conteneur est plus étroit. Sur un téléphone, où ce
   conteneur fait 335 px, la carte débordait donc de 65 px — et comme le
   <body> est en « overflow: clip », ce débordement était coupé et
   inatteignable : le bouton « Découvrir » sortait de l'écran.

   « min(400px, 100%) » se lit : 400 px, ou la largeur du conteneur s'il est
   plus étroit. Au-delà de 901 px le conteneur dépasse toujours 400 px, donc
   la valeur reste 400 px et le rendu sur ordinateur est inchangé. */
.grille--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}

.carte {
  background: var(--blanc);
  border-radius: var(--r-carte);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ombre-douce);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.carte:hover {
  box-shadow: var(--ombre-carte);
  transform: translateY(-4px);
}

.carte img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.carte__corps {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.carte__corps h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

/* La ligne de capacité : 8 personnes · 4 chambres · jardin clos */
.carte__meta {
  font-size: 14px;
  color: var(--encre-douce);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}

.carte__corps p {
  font-size: 16px;
  color: var(--encre-douce);
  flex-grow: 1;
}

/* Le lien de la carte, transformé en bouton arrondi */
.carte__lien {
  align-self: flex-start;
  margin-top: 24px;
  display: inline-block;
  background: transparent;
  color: var(--terre);
  border: 2px solid var(--terre);
  border-radius: var(--r-pilule);
  padding: 11px 26px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.carte__lien:hover {
  background: var(--terre);
  color: var(--blanc);
  text-decoration: none;
}

/* Étiquette posée en haut d'une carte : « Familles » */
.etiquette {
  display: inline-block;
  background: var(--pierre);
  color: var(--vert-fonce);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pilule);
  margin-bottom: 14px;
  font-weight: 600;
}


/* ==========================================================================
   13. BLOCS SPÉCIFIQUES
   ========================================================================== */

/* --- Les deux entrées : « En famille » / « En amoureux » --- */
.entrees {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.entree {
  position: relative;
  min-height: 380px;
  border-radius: var(--r-carte);
  overflow: hidden;
  display: block;
  text-decoration: none;
  isolation: isolate;
}

.entree img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.entree:hover img {
  transform: scale(1.05);
}

.entree__texte {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 380px;
  background: linear-gradient(to top, rgba(30, 22, 12, 0.8) 0%, rgba(30, 22, 12, 0.1) 70%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  color: var(--blanc);
}

.entree__texte h3 {
  color: var(--blanc);
  font-size: 30px;
  margin-bottom: 8px;
}

.entree__texte p {
  color: #EDE3D2;
  font-size: 16px;
  margin-bottom: 0;
}

/* --- Les arguments communs aux 4 logements, en bandeau.
       Répétés sur tout le site : ce sont eux qui déclenchent la réservation. --- */
.atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px;
  list-style: none;
}

.atouts li {
  text-align: center;
}

.atouts strong {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 19px;
  color: var(--vert);
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}

.atouts span {
  display: block;
  font-size: 14.5px;
  color: var(--encre-douce);
  line-height: 1.5;
}

/* Variante posée sur le fond vert foncé */
.section--vert .atouts strong {
  color: var(--blanc);
}

.section--vert .atouts span {
  color: #C8D1C2;
}

/* --- Bandeau des deux univers : Les insolites / Le gîte --- */
.univers {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.univers__bloc {
  background: var(--blanc);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-douce);
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.univers__bloc--insolite {
  background: var(--vert);
  color: var(--sable);
}

.univers__bloc--insolite h2,
.univers__bloc--insolite h3 {
  color: var(--blanc);
}

.univers__bloc--insolite p {
  color: #C8D1C2;
}

.univers__compte {
  font-family: var(--texte);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--terre);
}

.univers__bloc--insolite .univers__compte {
  color: #E8C4A8;
}

/* --- Repères chiffrés en ligne --- */
.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
  text-align: center;
}

.repere__chiffre {
  font-family: var(--titre);
  font-size: 38px;
  color: var(--terre);
  line-height: 1.1;
  letter-spacing: -0.02em;
  display: block;
}

.repere__libelle {
  font-size: 14px;
  color: var(--encre-douce);
  margin-top: 6px;
}

/* --- Fiche d'identité d'un gîte --- */
.fiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  background: var(--blanc);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-douce);
  padding: 34px;
}

.fiche div {
  text-align: center;
}

.fiche dt {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 6px;
}

.fiche dd {
  font-family: var(--titre);
  font-size: 24px;
  color: var(--vert);
  letter-spacing: -0.01em;
}

/* --- Liste d'équipements --- */
.equipements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 36px;
  list-style: none;
}

.equipements li {
  padding: 9px 0 9px 28px;
  border-bottom: 1px solid var(--trait);
  position: relative;
  font-size: 16px;
}

.equipements li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--vert-clair);
  font-weight: bold;
}

/* --- Tableau des distances --- */
.distances {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--blanc);
  border-radius: var(--r-carte);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
}

.distances th,
.distances td {
  text-align: left;
  padding: 15px 20px;
  border-bottom: 1px solid var(--trait);
}

.distances tr:last-child td {
  border-bottom: none;
}

.distances th {
  font-family: var(--texte);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-weight: 600;
  background: var(--sable-fonce);
}

.distances td:last-child {
  text-align: right;
  white-space: nowrap;
  color: var(--encre-douce);
}

/* --- Avis clients --- */
.avis {
  background: var(--blanc);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-douce);
  padding: 34px;
}

.avis blockquote {
  font-family: var(--titre);
  font-size: 19px;
  line-height: 1.55;
  color: var(--encre);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.avis figcaption {
  font-size: 14px;
  color: var(--encre-douce);
}

.etoiles {
  color: var(--terre);
  letter-spacing: 3px;
  margin-bottom: 14px;
}

/* --- Encadré d'information --- */
.encadre {
  background: var(--pierre);
  border-radius: var(--r-carte);
  padding: 30px 34px;
  margin: 34px 0;
  font-size: 16px;
}

.encadre h3 {
  font-size: 19px;
  margin-bottom: 10px;
}

/* --- Encadré d'AVERTISSEMENT, visible pendant la construction seulement --- */
.provisoire {
  background: #FBEDD6;
  border: 1px dashed #C29A5A;
  color: #6B4A12;
  padding: 18px 24px;
  border-radius: var(--r-petit);
  margin: 28px 0;
  font-size: 15px;
}

.provisoire strong {
  color: #8A5E12;
}

/* --- Bandeau d'appel à l'action --- */
.appel {
  background: var(--vert);
  color: var(--sable);
  padding: 96px 0;
  text-align: center;
}

.appel h2 {
  color: var(--blanc);
}

.appel p {
  color: #C8D1C2;
  max-width: 580px;
  margin: 0 auto 32px;
  font-size: 18px;
}

/* --- Bloc carte géographique (emplacement réservé) --- */
.carte-geo {
  background: var(--pierre);
  border-radius: var(--r-carte);
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--encre-douce);
  font-size: 15px;
  padding: 28px;
}

/* --- Questions / réponses --- */
.qr {
  border-bottom: 1px solid var(--trait);
  padding: 26px 0;
}

.qr:first-of-type {
  border-top: 1px solid var(--trait);
}

.qr h3 {
  font-size: 19px;
  margin-bottom: 10px;
}

.qr p:last-child {
  margin-bottom: 0;
}

/* --- Grand chiffre mis en avant (page Privatisation : 16 personnes) --- */
.chiffre-cle {
  background: var(--blanc);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  padding: 52px 40px;
  text-align: center;
}

.chiffre-cle__nombre {
  font-family: var(--titre);
  font-size: 104px;
  line-height: 0.95;
  color: var(--terre);
  letter-spacing: -0.04em;
  display: block;
}

.chiffre-cle__unite {
  font-family: var(--titre);
  font-size: 28px;
  color: var(--vert);
  display: block;
  margin-top: 10px;
  letter-spacing: -0.01em;
}

.chiffre-cle__detail {
  font-size: 15px;
  color: var(--encre-douce);
  margin-top: 20px;
}

/* Le calcul 8 + 6 + 2 = 16 */
.addition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 40px 0;
  font-family: var(--titre);
  color: var(--vert);
}

.addition__terme {
  background: var(--blanc);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-douce);
  padding: 24px 30px;
  text-align: center;
  min-width: 165px;
}

.addition__terme strong {
  display: block;
  font-size: 34px;
  color: var(--terre);
  font-weight: normal;
  letter-spacing: -0.02em;
}

.addition__terme em {
  display: block;
  font-family: var(--texte);
  font-style: normal;
  font-size: 13px;
  color: var(--encre-douce);
  margin-top: 6px;
}

.addition__signe {
  font-size: 28px;
  color: var(--encre-douce);
}

.addition__total {
  background: var(--vert);
  color: var(--blanc);
}

.addition__total strong {
  color: var(--blanc);
}

.addition__total em {
  color: #C8D1C2;
}


/* ==========================================================================
   14. — SECTION SUPPRIMÉE

   Elle décrivait les « zones réservées aux widgets du channel manager » :
   #widget-recherche, #widget-reservation-insolites, #widget-reservation-gite.
   Le propriétaire a renoncé au channel manager, ces trois identifiants
   n'existent plus dans aucune page, et le commentaire disait encore « on ne
   code ni calendrier, ni champ de date, ni formulaire » — l'inverse exact de
   ce que fait le site aujourd'hui.

   Retirée le 12 août 2026. La numérotation des sections est conservée telle
   quelle : renuméroter fausserait toutes les références du reste du fichier
   et de CLAUDE.md.
   ========================================================================== */


/* ==========================================================================
   15. FORMATS MOBILES
   Ces règles ne s'appliquent QUE sur les écrans plus étroits que 900 px,
   et écrasent celles écrites plus haut.
   ========================================================================== */

@media (max-width: 900px) {

  :root {
    --air: 72px;
    --air-petit: 48px;
    --r-grand: 20px;
  }

  body {
    font-size: 16px;
  }

  .contenu,
  .contenu-texte {
    padding: 0 20px;
  }

  .entete__interieur {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
  }

  .menu {
    gap: 18px;
    font-size: 15px;
  }

  /* --- Le hero passe sur une seule colonne :
         le titre par-dessus la photo, le panneau blanc juste en dessous. --- */
  .hero {
    margin: 0 12px;
    min-height: 0;
  }

  .hero__contenu {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px 24px;
  }

  .hero__reperes {
    gap: 24px;
    margin-top: 30px;
    padding-top: 24px;
  }

  .hero__repere strong {
    font-size: 25px;
  }

  .hero__panneau {
    padding: 28px;
  }

  .banniere {
    margin: 0 12px;
    height: 400px;
  }

  .banniere--courte {
    height: 300px;
  }

  .banniere__texte {
    padding: 0 24px 36px;
  }

  /* Les blocs à deux colonnes passent sur une seule */
  .duo,
  .entrees,
  .univers {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .univers__bloc {
    padding: 30px;
  }

  .duo--inverse .duo__texte {
    order: 0;
  }

  .duo img {
    min-height: 300px;
  }

  .entree,
  .entree__texte {
    min-height: 300px;
  }

  .entree__texte {
    padding: 28px;
  }

  .titre-section {
    margin-bottom: 36px;
  }

  .carte__corps {
    padding: 24px;
  }

  .chiffre-cle__nombre {
    font-size: 74px;
  }

  .appel {
    padding: 64px 0;
  }

  /* Un tableau large peut défiler horizontalement plutôt que de déborder */
  .distances {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* ==========================================================================
   ==========================================================================
   16 à 22 — DIRECTION ARTISTIQUE
   --------------------------------------------------------------------------
   Ces sections sont écrites APRÈS toutes les autres : en CSS, à priorité
   égale, c'est la dernière règle qui gagne. Elles complètent et corrigent
   ce qui précède sans qu'on ait à y toucher.

   PENSÉ POUR LE TÉLÉPHONE D'ABORD. Les règles de base valent pour les
   petits écrans ; le bloc @media (min-width: 901px) ajoute ce que la place
   permet en plus sur grand écran. C'est l'inverse de la logique habituelle,
   et c'est volontaire : la plupart des visiteurs arrivent d'Instagram, donc
   d'un téléphone.
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   16. DÉBORDEMENT LATÉRAL
   Les images « pleine largeur » sortent des marges avec width:100vw. Sans
   cette précaution, elles créeraient une barre de défilement horizontale.
   « clip » plutôt que « hidden » : hidden casserait l'en-tête collant.
   ========================================================================== */

html, body {
  overflow-x: clip;
}


/* ==========================================================================
   17. MENU SUR PETIT ÉCRAN
   --------------------------------------------------------------------------
   Six entrées ne tiennent pas sur 390 px. Le bouton « Menu » est créé par
   js/interactions.js, qui pose aussi la classe « entete--js ».

   >>> Sans JavaScript, la classe n'existe pas : le menu reste déplié et
   >>> parfaitement utilisable. C'est le comportement voulu, jamais l'inverse.
   ========================================================================== */

.entete__interieur {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  flex-wrap: wrap;
}

.entete nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.menu__bascule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  min-height: 46px;
  cursor: pointer;
}

/* Les trois barres du bouton, dessinées en CSS */
.menu__barres {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--encre);
  border-radius: 2px;
  transition: background 0.2s ease;
}

.menu__barres::before,
.menu__barres::after {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--encre);
  border-radius: 2px;
  transition: transform 0.25s ease;
}

.menu__barres::before { top: -6px; }
.menu__barres::after  { top: 6px; }

/* Le bouton devient une croix quand le menu est ouvert */
.entete--ouvert .menu__barres         { background: transparent; }
.entete--ouvert .menu__barres::before { transform: translateY(6px) rotate(45deg); }
.entete--ouvert .menu__barres::after  { transform: translateY(-6px) rotate(-45deg); }

/* Repli du menu : UNIQUEMENT si le JavaScript a pris la main */
.entete--js .menu {
  display: none;
}

.entete--js.entete--ouvert nav {
  width: 100%;
}

.entete--js.entete--ouvert .menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding-top: 8px;
}

.entete--js.entete--ouvert .menu li {
  border-top: 1px solid var(--trait);
}

.entete--js.entete--ouvert .menu a {
  display: block;
  padding: 16px 2px;
  font-size: 17px;
}

.entete--js.entete--ouvert .menu .bouton {
  text-align: center;
  justify-content: center;
  margin: 14px 0 6px;
  padding: 15px 30px;
}


/* ==========================================================================
   18. MOUVEMENT — apparition au défilement
   --------------------------------------------------------------------------
   On n'anime QUE l'opacité et la position. Ce sont les deux seules
   propriétés qu'un téléphone anime sans effort, parce qu'elles ne
   l'obligent pas à recalculer la mise en page. Animer une ombre, une
   hauteur ou un flou ferait saccader les appareils modestes.

   Le masquage n'a lieu que si <html class="js"> — donc uniquement si le
   JavaScript a démarré ET que le visiteur n'a pas demandé moins de
   mouvement. Sinon, tout est visible d'emblée.
   ========================================================================== */

html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   0.75s cubic-bezier(0.22, 0.61, 0.24, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.24, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

html.js .reveal--gauche { transform: translateX(-28px); }
html.js .reveal--droite { transform: translateX(28px); }
html.js .reveal--zoom   { transform: scale(1.03); }
html.js .reveal--bas    { transform: translateY(44px); }

html.js .reveal.vu {
  opacity: 1;
  transform: none;
}

/* Sécurité : même si la classe « js » était posée par erreur, un visiteur
   ayant demandé moins de mouvement voit tout, tout de suite. */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal.vu {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   19. RYTHME — les archétypes de section
   --------------------------------------------------------------------------
   Le défaut de la version précédente était d'empiler des blocs identiques.
   On dispose désormais de plusieurs formes de section, à alterner. Règle de
   composition : ne jamais employer deux fois la même d'affilée.
   ========================================================================== */

/* --- 19.1 Débordement pleine largeur ------------------------------------
   Sort l'élément de la colonne de contenu pour occuper tout l'écran. */
.pleine-largeur {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* --- 19.2 La scène : une image qui occupe tout l'écran -------------------
   « svh » plutôt que « vh » : sur mobile, vh se calcule barre d'adresse
   masquée, ce qui fait sauter la mise en page au défilement. svh mesure la
   hauteur réellement visible. */
.scene {
  position: relative;
  min-height: 82svh;
  display: grid;
  overflow: hidden;
  isolation: isolate;
}

.scene__photo {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene__voile {
  grid-area: 1 / 1;
  background:
    linear-gradient(to top, rgba(26, 20, 12, 0.84) 0%, rgba(26, 20, 12, 0.30) 48%, rgba(26, 20, 12, 0.06) 100%);
}

.scene__texte {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  padding: 40px 20px 44px;
  color: var(--blanc);
  max-width: var(--largeur);
  margin: 0 auto;
  width: 100%;
}

.scene__texte h2 {
  color: var(--blanc);
}

.scene__texte p {
  color: #EFE5D6;
  max-width: 34em;
}

/* --- 19.3 La vitrine : photo dominante + carte qui la chevauche ----------
   Forme employée pour présenter chaque logement. La photo domine, la carte
   de texte mord dessus. Sur mobile, la photo est cadrée en portrait. */
.vitrine {
  position: relative;
}

.vitrine__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.vitrine__carte {
  position: relative;
  z-index: 2;
  background: var(--sable);
  border-radius: var(--r-grand);
  margin: -60px 14px 0;
  padding: 32px 24px 34px;
  box-shadow: var(--ombre-carte);
}

.vitrine__carte .surtitre {
  margin-bottom: 10px;
}

.vitrine--sombre .vitrine__carte {
  background: var(--vert-fonce);
  color: #D6DCD2;
}

.vitrine--sombre .vitrine__carte h2 {
  color: var(--blanc);
}

.vitrine--sombre .vitrine__carte .surtitre {
  color: #E9C7AB;
}

.vitrine--sombre .vitrine__carte .carte__meta {
  color: #B9C2B3;
}

/* --- 19.4 Grille décalée ------------------------------------------------- */
.decale {
  display: grid;
  gap: 16px;
}

.decale img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-carte);
}

/* --- 19.5 Mesure : une colonne de texte étroite, sans boîte -------------- */
.mesure {
  max-width: 34em;
  margin-inline: auto;
}

/* --- 19.6 Bande de citation, pour rompre le rythme ----------------------- */
.bande-citation {
  background: var(--pierre);
  padding: 56px 20px;
  text-align: center;
}

.bande-citation blockquote {
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(1.45rem, 5.6vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--vert-fonce);
  max-width: 20em;
  margin: 0 auto 18px;
  text-wrap: balance;
}

.bande-citation figcaption {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
}


/* ==========================================================================
   20. LE HERO — grille empilable
   --------------------------------------------------------------------------
   Le point délicat du responsive. Une seule grille sert les deux cas :

     Sur mobile   — la photo occupe la ligne 1, le socle (texte + panneau)
                    occupe la ligne 2, SOUS la photo, sur fond sable.
     Sur ordinateur — la photo est étirée sur les deux lignes, donc le socle
                    se superpose à elle, en bas.

   Aucun positionnement absolu : c'est la grille qui fait tout le travail,
   et c'est ce qui rend le passage d'un format à l'autre sans surprise.
   ========================================================================== */

.hero {
  display: grid;
  grid-template-rows: 62svh auto;
  margin: 0;
  border-radius: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.hero__photo {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: static;
}

.hero__voile {
  grid-row: 1;
  grid-column: 1;
  position: static;
  background:
    linear-gradient(to top, rgba(26, 20, 12, 0.78) 0%, rgba(26, 20, 12, 0.22) 55%, rgba(26, 20, 12, 0.05) 100%);
}

/* Le titre, posé en bas de la photo */
.hero__titre-bloc {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  z-index: 2;
  padding: 0 20px 28px;
  color: var(--blanc);
}

/* Le socle : sous la photo sur mobile */
.hero__socle {
  grid-row: 2;
  grid-column: 1;
  z-index: 2;
  background: var(--sable);
  padding: 28px 20px 32px;
  display: grid;
  gap: 26px;
}

.hero__sous-titre {
  font-size: clamp(1rem, 3.8vw, 1.15rem);
  line-height: 1.6;
  color: var(--encre-douce);
  margin-bottom: 22px;
}

.hero__reperes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--trait);
}

.hero__repere strong {
  display: block;
  font-family: var(--titre);
  font-size: 26px;
  font-weight: 600;
  color: var(--vert);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero__repere span {
  display: block;
  font-size: 13px;
  color: var(--encre-douce);
  margin-top: 2px;
}

.hero__panneau {
  background: var(--blanc);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  padding: 26px 22px 24px;
}

.hero__panneau h2 {
  font-size: clamp(1.35rem, 5.4vw, 1.7rem);
  margin-bottom: 10px;
}

.hero__panneau p {
  font-size: 15px;
  color: var(--encre-douce);
  line-height: 1.55;
}

.hero__panneau .bouton {
  width: 100%;
  justify-content: center;
}

.hero__panneau-note {
  font-size: 12.5px;
  color: var(--encre-douce);
  text-align: center;
  margin-top: 16px;
}

.hero .boutons .bouton {
  width: 100%;
  justify-content: center;
}


/* ==========================================================================
   21. CONTRASTE D'ÉCHELLE
   --------------------------------------------------------------------------
   Les grands titres montent beaucoup plus haut, les textes qui les
   accompagnent redescendent. C'est l'écart entre les deux qui crée la
   hiérarchie — pas la couleur, pas le gras.

   Le mini de chaque clamp() est calé pour rester lisible à 390 px sans
   jamais déborder.
   ========================================================================== */

.hero__titre,
.titre-geant {
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(2.8rem, 12.5vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--blanc);
  text-wrap: balance;
  overflow-wrap: break-word;
  margin-bottom: 0;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
  text-shadow: 0 2px 30px rgba(25, 18, 10, 0.4);
}

.titre-geant--encre {
  color: var(--vert);
  text-shadow: none;
}

h2 {
  font-size: clamp(1.85rem, 6.8vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.scene__texte h2 {
  font-size: clamp(2.1rem, 9vw, 4.8rem);
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
}

h3 {
  font-size: clamp(1.2rem, 4.4vw, 1.55rem);
  text-wrap: balance;
}

/* L'autre moitié du contraste : les textes d'accompagnement redescendent.
   Un grand titre à côté d'un gros paragraphe ne fait pas d'effet. */
.chapeau {
  font-size: clamp(1rem, 3.6vw, 1.12rem);
  line-height: 1.6;
}

.carte__corps p,
.qr p {
  font-size: 15.5px;
}

.surtitre,
.hero__surtitre {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--texte);
}

.hero__surtitre {
  color: #EBD9BF;
  margin-bottom: 14px;
}


/* ==========================================================================
   22. DÉTAILS — survols et zones tactiles
   ========================================================================== */

/* Les images de carte zooment légèrement au survol. Le cadre doit couper
   ce qui dépasse, d'où overflow:hidden sur la carte. */
.carte {
  overflow: hidden;
}

.carte img {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.24, 1);
}

.carte:hover img,
.carte:focus-within img {
  transform: scale(1.06);
}

/* Le trait qui se dessine sous les liens de contenu. On anime une échelle
   horizontale plutôt qu'une largeur : bien plus fluide, parce que le
   navigateur n'a pas à recalculer la mise en page. */
.contenu-texte a:not(.bouton):not(.carte__lien),
.encadre a:not(.bouton),
.duo__texte a:not(.bouton),
.vitrine__carte a:not(.bouton):not(.carte__lien) {
  position: relative;
  text-decoration: none;
  color: var(--terre);
  font-weight: 600;
}

.contenu-texte a:not(.bouton):not(.carte__lien)::after,
.encadre a:not(.bouton)::after,
.duo__texte a:not(.bouton)::after,
.vitrine__carte a:not(.bouton):not(.carte__lien)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.24, 1);
}

.contenu-texte a:not(.bouton):not(.carte__lien):hover::after,
.encadre a:not(.bouton):hover::after,
.duo__texte a:not(.bouton):hover::after,
.vitrine__carte a:not(.bouton):not(.carte__lien):hover::after {
  transform: scaleX(1);
}

/* Zone tactile : rien de cliquable sous 44 px de haut */
.bouton {
  min-height: 50px;
  padding: 15px 30px;
}

.carte__lien {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
}

.menu a {
  padding: 10px 0;
  display: inline-block;
}

/* Le focus au clavier doit rester visible */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ==========================================================================
   23. À PARTIR DE 901 px — ce que la place permet en plus
   ========================================================================== */

@media (min-width: 901px) {

  /* Le bouton « Menu » disparaît, le menu reprend sa forme horizontale */
  .menu__bascule {
    display: none;
  }

  .entete--js .menu,
  .entete--js.entete--ouvert .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    width: auto;
    padding-top: 0;
  }

  .entete--js.entete--ouvert nav {
    width: auto;
  }

  .entete--js.entete--ouvert .menu li {
    border-top: none;
  }

  .entete--js.entete--ouvert .menu a {
    padding: 10px 0;
    font-size: 15px;
  }

  .entete--js.entete--ouvert .menu .bouton {
    margin: 0;
    padding: 12px 26px;
  }

  .entete__interieur {
    padding: 20px 28px;
  }

  /* --- Le hero : la photo s'étire sur les deux lignes, donc le socle
         se superpose à elle au lieu de passer dessous --- */
  .hero {
    grid-template-rows: 1fr auto;
    min-height: 100svh;
    margin: 0 20px;
    border-radius: var(--r-grand);
  }

  .hero__photo,
  .hero__voile {
    grid-row: 1 / -1;
  }

  .hero__voile {
    background:
      linear-gradient(to right, rgba(26, 20, 12, 0.72) 0%, rgba(26, 20, 12, 0.30) 55%, rgba(26, 20, 12, 0.10) 100%),
      linear-gradient(to top, rgba(26, 20, 12, 0.55) 0%, rgba(26, 20, 12, 0) 60%);
  }

  .hero__titre-bloc {
    max-width: var(--largeur);
    margin: 0 auto;
    width: 100%;
    padding: 0 48px 8px;
    align-self: end;
  }

  .hero__socle {
    background: transparent;
    max-width: var(--largeur);
    margin: 0 auto;
    width: 100%;
    padding: 24px 48px 64px;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: end;
  }

  .hero__sous-titre {
    color: #F0E7D8;
    font-size: 1.2rem;
    max-width: 26em;
  }

  .hero__reperes {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-top-color: rgba(255, 253, 249, 0.28);
  }

  .hero__repere strong {
    color: var(--blanc);
    font-size: 30px;
  }

  .hero__repere span {
    color: #E0D3BE;
  }

  .hero .boutons .bouton {
    width: auto;
  }

  .hero__panneau {
    box-shadow: var(--ombre-flottante);
    padding: 34px 32px 30px;
  }

  /* La scène occupe toute la hauteur de l'écran */
  .scene {
    min-height: 100svh;
  }

  .scene__texte {
    padding: 64px 48px 72px;
  }

  /* La vitrine : photo en paysage, carte flottante posée dessus */
  .vitrine {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }

  .vitrine__photo {
    grid-column: 1 / 9;
    grid-row: 1;
    aspect-ratio: 16 / 11;
    border-radius: 0 var(--r-grand) var(--r-grand) 0;
  }

  .vitrine__carte {
    grid-column: 7 / 13;
    grid-row: 1;
    margin: 0 48px 0 0;
    padding: 48px 44px;
    box-shadow: var(--ombre-flottante);
  }

  /* Une vitrine sur deux s'inverse : photo à droite, carte à gauche */
  .vitrine--inverse .vitrine__photo {
    grid-column: 5 / 13;
    border-radius: var(--r-grand) 0 0 var(--r-grand);
  }

  .vitrine--inverse .vitrine__carte {
    grid-column: 1 / 7;
    margin: 0 0 0 48px;
  }

  /* La grille décalée prend son sens : deux colonnes, l'une descendue */
  .decale {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }

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

  .decale > *:nth-child(even) {
    margin-top: 96px;
  }

  .bande-citation {
    padding: 104px 28px;
  }
}


/* ==========================================================================
   24. CORRECTIFS ISSUS DES ESSAIS EN 390 px
   --------------------------------------------------------------------------
   Constatés en testant sur un écran de téléphone réel, pas déduits.
   ========================================================================== */

/* Le surtitre du hero se perdait sur une photo claire : on lui donne
   un fond translucide plutôt que de compter sur le voile. */
.hero__surtitre {
  display: inline-block;
  color: var(--blanc);
  background: rgba(26, 20, 12, 0.55);
  padding: 7px 14px;
  border-radius: var(--r-pilule);
  backdrop-filter: blur(3px);
}

/* Le bas de la photo doit être franchement sombre : le titre en blanc
   doit rester lisible quelle que soit la photo fournie plus tard. */
.hero__voile {
  background:
    linear-gradient(to top, rgba(26, 20, 12, 0.88) 0%, rgba(26, 20, 12, 0.55) 30%, rgba(26, 20, 12, 0.10) 70%, rgba(26, 20, 12, 0) 100%);
}

@media (min-width: 901px) {
  .hero__voile {
    background:
      linear-gradient(to right, rgba(26, 20, 12, 0.78) 0%, rgba(26, 20, 12, 0.34) 55%, rgba(26, 20, 12, 0.10) 100%),
      linear-gradient(to top, rgba(26, 20, 12, 0.70) 0%, rgba(26, 20, 12, 0) 62%);
  }
}

/* --- Correctif 390 px : l'en-tete passait sur deux lignes -----------------
   Le logo (23 px) plus le bouton Menu depassaient les 350 px disponibles.
   On reduit le logo sur petit ecran et on interdit le retour a la ligne. */
@media (max-width: 480px) {
  .entete__interieur {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .logo {
    font-size: 19px;
  }

  .logo span {
    font-size: 9.5px;
    letter-spacing: 0.14em;
  }

  .menu__bascule {
    flex-shrink: 0;
    padding: 11px 16px;
  }

  /* Le menu deplie, lui, doit bien passer a la ligne */
  .entete--js.entete--ouvert .entete__interieur {
    flex-wrap: wrap;
  }
}


/* ==========================================================================
   25. CORRECTIF GRAND ÉCRAN — le hero débordait sur deux hauteurs
   --------------------------------------------------------------------------
   LE BOGUE : la photo était un élément de la grille. Sa hauteur intrinsèque
   (1200 × 800, donc 1706 px de haut une fois étalée sur 2560 px de large)
   servait à calculer la taille de la ligne. Résultat : le hero mesurait plus
   de deux hauteurs d'écran, et il fallait faire défiler pour voir le titre.

   LA CORRECTION : sur grand écran, la photo et son voile sortent du flux de
   la grille (position: absolute). Ils ne participent plus au calcul des
   lignes, et le hero est contraint à exactement une hauteur d'écran.

   Sur mobile on n'y touche pas : la ligne 1 y vaut 62svh, une valeur fixe,
   donc l'image ne peut de toute façon pas l'étirer.
   ========================================================================== */

.hero,
.scene {
  position: relative;
}

/* La scène a le même défaut, et sur tous les formats : sa hauteur n'est
   qu'un minimum, donc l'image pouvait l'étirer. On sort aussi la photo. */
.scene__photo,
.scene__voile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__photo {
  object-fit: cover;
}

@media (min-width: 901px) {

  .hero {
    /* hauteur FIXE, et non « au moins » : c'est ce qui empêche l'étirement */
    height: 100svh;
    min-height: 600px;   /* garde-fou pour les écrans très bas */
    max-height: 1100px;  /* sur un 27 pouces, un hero de 1400 px est écrasant */
  }

  .hero__photo,
  .hero__voile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero__photo {
    object-fit: cover;
  }

  .scene {
    height: 100svh;
    min-height: 600px;
    max-height: 1100px;
  }

  /* Le socle doit rester lisible sur la photo : on renforce le voile
     sous lui, indépendamment de la photo qui sera fournie. */
  .hero__voile {
    background:
      linear-gradient(to right, rgba(22, 17, 10, 0.80) 0%, rgba(22, 17, 10, 0.38) 58%, rgba(22, 17, 10, 0.12) 100%),
      linear-gradient(to top, rgba(22, 17, 10, 0.80) 0%, rgba(22, 17, 10, 0.30) 34%, rgba(22, 17, 10, 0) 62%);
  }

  /* Le titre ne doit pas coller au socle */
  .hero__titre-bloc {
    padding-bottom: 20px;
  }
}


/* ==========================================================================
   26. TRÈS GRANDS ÉCRANS (1600 px et plus)
   --------------------------------------------------------------------------
   Au-delà de 1600 px, le texte ne doit plus s'élargir indéfiniment : une
   ligne de 200 caractères est illisible. On plafonne, et on laisse l'air
   se répartir sur les côtés.
   ========================================================================== */

@media (min-width: 1600px) {

  :root {
    --largeur: 1440px;
    --air: 136px;
  }

  .hero__titre-bloc,
  .hero__socle {
    padding-left: 64px;
    padding-right: 64px;
  }

  .hero__sous-titre {
    font-size: 1.28rem;
  }

  .scene__texte {
    padding: 72px 64px 88px;
  }

  /* La vitrine : on évite que la photo devienne démesurée */
  .vitrine__photo {
    aspect-ratio: 16 / 10;
  }

  .vitrine__carte {
    padding: 56px 52px;
  }
}


/* ==========================================================================
   27. ÉCRANS DE 2000 px ET PLUS
   --------------------------------------------------------------------------
   Sur un 2560, une mise en page conçue pour 1440 paraît perdue au milieu.
   On recentre l'ensemble dans une colonne maîtresse plutôt que d'étirer.
   ========================================================================== */

@media (min-width: 2000px) {

  :root {
    --largeur: 1600px;
  }

  body {
    font-size: 18px;
  }

  /* Le hero et les scènes gardent leur photo pleine largeur, mais leur
     texte reste dans la colonne maîtresse, centré comme le reste. */
  .hero__titre-bloc,
  .hero__socle,
  .scene__texte {
    max-width: var(--largeur);
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .hero__socle {
    padding-bottom: 72px;
  }

  .scene__texte {
    padding-top: 72px;
    padding-bottom: 96px;
  }

  /* La vitrine reste lisible : la carte ne doit pas s'étaler */
  .vitrine__carte {
    max-width: 720px;
  }

  .vitrine--inverse .vitrine__carte {
    justify-self: end;
  }
}


/* ==========================================================================
   28. CORRECTIF — le panneau du hero était coupé en 1440 × 900
   --------------------------------------------------------------------------
   La hauteur du hero était FIXE (100svh). Sur un écran de 900 px de haut,
   titre + socle demandaient davantage : le panneau se faisait rogner par
   overflow:hidden.

   Maintenant que la photo est en position absolue (section 25), elle ne peut
   plus étirer la grille. On peut donc repasser à « min-height » sans risque :
   le hero fait au moins une hauteur d'écran, et grandit un peu si le contenu
   l'exige. C'est la bonne façon — une hauteur fixe rogne toujours quelqu'un.
   ========================================================================== */

@media (min-width: 901px) {
  .hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .hero__panneau {
    padding: 30px 30px 26px;
  }
}

/* Écrans larges mais peu hauts (portables 1440 × 900) : on desserre. */
@media (min-width: 901px) and (max-height: 940px) {
  .hero__titre {
    font-size: clamp(2.8rem, 6.5vw, 5.4rem);
  }

  .hero__socle {
    padding-bottom: 40px;
    gap: 40px;
  }

}


/* ==========================================================================
   29. LES BOUTONS PRINCIPAUX PASSENT AU VERT SOMBRE
   --------------------------------------------------------------------------
   Demandé d'après la référence. La terre cuite reste la couleur d'accent
   des surtitres et du bouton à contour : elle continue de ponctuer la page
   sans être la couleur d'action.
   ========================================================================== */

.bouton {
  background: var(--vert-fonce);
  border-color: var(--vert-fonce);
  color: var(--blanc);
}

.bouton:hover {
  background: #2F372B;
  border-color: #2F372B;
  color: var(--blanc);
}

.bouton--clair {
  background: var(--blanc);
  color: var(--vert-fonce);
  border-color: var(--blanc);
}

/* ⚠️ LE BOUTON À CONTOUR ÉTAIT CASSÉ, sur tout le site, jusqu'au 12 août 2026.

   Il est défini en section 6, autour de la ligne 518. Mais « .bouton » est
   REDÉFINI ici, en section 29, avec un fond vert. À spécificité égale — une
   classe de chaque côté — c'est la dernière règle écrite qui l'emporte : le
   fond vert recouvrait le contour, et les six boutons secondaires du site
   s'affichaient comme des boutons principaux.

   Conséquence visible : plus aucune hiérarchie entre l'action principale et
   l'action secondaire. « Copier l'adresse » pesait exactement autant que
   « Ouvrir ma messagerie ».

   On le redéclare donc APRÈS, au même endroit que ce qui l'écrasait. Ne pas
   remonter ce bloc plus haut dans le fichier : il redeviendrait inopérant. */
.bouton--contour {
  background: transparent;
  border-color: var(--terre);
  color: var(--terre);
}

.bouton--contour:hover,
.bouton--contour:focus-visible {
  background: var(--terre);
  border-color: var(--terre);
  color: var(--blanc);
}


/* ==========================================================================
   30. LA CARTE LOGEMENT
   --------------------------------------------------------------------------
   Reprise de la référence : grande photo, nom, lieu, puis une ligne de
   caractéristiques en icônes dans un bloc arrondi, et enfin le prix et le
   bouton côte à côte sur une même ligne.

   Les icônes sont des SVG écrits à la main dans le HTML : aucune police
   d'icônes à télécharger, donc rien à charger et rien à déclarer.
   ========================================================================== */

.carte {
  border-radius: var(--r-grand);
  background: var(--sable);
  box-shadow: var(--ombre-douce);
}

.carte img {
  border-radius: 0;
}

.carte__corps {
  padding: 26px 22px 24px;
  gap: 0;
}

/* --- Le lieu, sous le nom --- */
.carte__lieu,
.fiche-lieu {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  color: var(--encre-douce);
  margin-bottom: 16px;
}

.carte__lieu svg,
.fiche-lieu svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  stroke: var(--terre);
  fill: none;
  stroke-width: 1.7;
}

/* --- La ligne de caractéristiques, dans son bloc arrondi --- */
.specs {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 10px;
  background: var(--pierre);
  border-radius: var(--r-carte);
  padding: 15px 16px;
  margin: 0 0 20px;
}

.specs li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--vert-fonce);
  font-weight: 500;
}

.specs svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  stroke: var(--vert);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Variante sur fond vert (vitrine sombre) */
.vitrine--sombre .specs {
  background: rgba(255, 253, 249, 0.10);
}

.vitrine--sombre .specs li {
  color: #E4E9E0;
}

.vitrine--sombre .specs svg {
  stroke: #B9C9AF;
}

.vitrine--sombre .fiche-lieu {
  color: #B9C2B3;
}

/* --- Prix et bouton, côte à côte sur une même ligne --- */
.prix-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}

.prix {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.prix strong {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -0.02em;
  color: var(--vert-fonce);
}

.prix span {
  font-size: 13px;
  color: var(--encre-douce);
}

.vitrine--sombre .prix strong {
  color: var(--blanc);
}

.vitrine--sombre .prix span {
  color: #B9C2B3;
}

.prix-action .bouton {
  padding: 13px 24px;
  min-height: 48px;
  font-size: 15px;
  flex: 0 0 auto;
}

/* Sur une carte, le bouton du bas remplace l'ancien lien */
.carte .prix-action {
  margin-top: 6px;
}

@media (min-width: 480px) {
  .specs {
    gap: 12px 14px;
  }
}

@media (min-width: 901px) {
  .carte__corps {
    padding: 30px 28px 28px;
  }

  .specs {
    padding: 17px 20px;
  }

  .specs li {
    font-size: 14px;
  }

  .prix strong {
    font-size: 28px;
  }
}

/* Correctif : l'etiquette s'etirait sur toute la largeur de la carte,
   parce que .carte__corps est une colonne flex (etirement par defaut). */
.etiquette {
  align-self: flex-start;
  width: auto;
}

/* Correctif de contraste : « .menu a » (specificite 0,1,1) l'emportait sur
   « .bouton » (0,1,0), donnant du texte sombre sur le bouton vert sombre. */
.menu a.bouton,
.menu .bouton {
  color: var(--blanc);
}

.menu a.bouton:hover {
  color: var(--blanc);
}

/* Ecrans larges mais peu hauts (portables 1440x900) : le hero depassait
   legerement, le bas du panneau se retrouvait sous la ligne de flottaison.
   On resserre tout ce qui peut l'etre, sans toucher aux autres formats. */
@media (min-width: 901px) and (max-height: 940px) {
  .hero__titre { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
  .hero__titre-bloc { padding-bottom: 8px; }
  .hero__sous-titre { font-size: 1.05rem; margin-bottom: 16px; }
  .hero__socle { padding-top: 12px; padding-bottom: 28px; gap: 34px; }
  .hero__reperes { margin-top: 18px; padding-top: 16px; }
  .hero__repere strong { font-size: 24px; }
  .hero__panneau { padding: 22px 24px 20px; }
  .hero__panneau h2 { font-size: 1.35rem; margin-bottom: 6px; }
  .hero__panneau p { font-size: 14px; }
  .hero__panneau-note { margin-top: 10px; }
}

/* Sur un ecran large mais peu haut, les reperes du hero ne tiennent pas en
   plus du panneau. On les masque : ils sont de toute facon repris dans le
   bandeau des atouts, juste en dessous. Mieux vaut un hero qui tient dans
   l'ecran qu'un hero complet mais tronque. */
@media (min-width: 901px) and (max-height: 940px) {
  .hero__reperes { display: none; }
  .hero__socle { padding-bottom: 24px; }
}

/* LA VRAIE CAUSE du hero trop haut : « 100svh » compte une hauteur d'ecran
   ENTIERE, alors que le hero commence sous le bandeau maquette et l'en-tete
   (environ 134 px). Il debordait donc systematiquement de cette hauteur.
   On retranche la place deja prise au-dessus. */
@media (min-width: 901px) {
  .hero  { min-height: calc(100svh - 140px); }
  .scene { height: auto; min-height: calc(100svh - 90px); }
}

/* ==========================================================================
   31. LE POINT FOCAL DE LA PHOTO DU HERO
   --------------------------------------------------------------------------
   « object-fit: cover » remplit le cadre et rogne le surplus. Par defaut il
   rogne autour du centre — ce qui, sur cette photo, sacrifie la maison au
   profit de la pelouse.

   Sur la photo, la maison est centree a environ 52 % en largeur et 40 % en
   hauteur. On cale le rognage dessus.

   Deux cas differents, et c'est contre-intuitif :
     - Sur grand ecran, le cadre est large et bas : le rognage est VERTICAL,
       c'est donc la valeur en hauteur (40 %) qui compte.
     - Sur mobile, le cadre est etroit et haut : le rognage est HORIZONTAL,
       c'est la valeur en largeur (54 %) qui compte.
   ========================================================================== */

.hero__photo {
  object-position: 52% 40%;
}

@media (max-width: 900px) {
  .hero__photo {
    object-position: 54% 42%;
  }
}

/* Le titre blanc passait sur l'herbe et un buisson en plein soleil : pas
   assez de contraste. On renforce le voile PAR LE BAS et on le fait monter
   plus haut, en laissant le ciel intact — un voile uniforme ternirait la
   photo, alors qu'un degrade ne noircit que ce qui porte du texte. */
@media (max-width: 900px) {
  .hero__voile {
    background:
      linear-gradient(to top,
        rgba(24, 18, 10, 0.94) 0%,
        rgba(24, 18, 10, 0.86) 14%,
        rgba(24, 18, 10, 0.58) 32%,
        rgba(24, 18, 10, 0.22) 55%,
        rgba(24, 18, 10, 0.04) 78%,
        rgba(24, 18, 10, 0) 100%);
  }
}

/* Le voile ne se voyait pas sur mobile : en tant qu'element de grille il ne
   couvrait pas la ligne comme attendu. On le positionne explicitement sur la
   hauteur exacte de la photo (62svh, la ligne 1), ce qui ne laisse aucune
   place a l'interpretation. */
@media (max-width: 900px) {
  .hero__voile {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 62svh;
    z-index: 1;
  }

  .hero__titre-bloc {
    z-index: 2;
  }
}

/* ==========================================================================
   32. HERO v2 — barre de recherche a cheval sur le bord bas
   --------------------------------------------------------------------------
   Nouvelle structure demandee :
     - la photo occupe tout le cadre, sur toute la largeur ;
     - le titre est pose dessus, aligne a gauche ;
     - une barre horizontale chevauche le bord bas du hero.

   La barre est un FRERE du hero, pas un enfant : le hero a overflow:hidden
   pour tenir sa photo dans ses coins, ce qui aurait rogne une barre placee
   dedans. On la remonte donc par une marge negative.

   ========================================================================== */

.hero {
  display: block;
  position: relative;
  min-height: 74svh;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
}

/* La photo et son voile couvrent desormais TOUT le hero */
.hero__photo,
.hero__voile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  grid-row: auto;
  grid-column: auto;
}

.hero__titre-bloc {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 74svh;
  max-width: var(--largeur);
  margin: 0 auto;
  width: 100%;
  padding: 90px 20px 84px;   /* le bas laisse la place a la barre */
  text-align: left;
}

.hero__titre-bloc .hero__sous-titre {
  color: #F2E9DA;
  max-width: 30em;
  margin-bottom: 0;
  margin-top: 18px;
  text-shadow: 0 1px 14px rgba(20, 14, 8, 0.6);
}

/* --- La barre de recherche ---------------------------------------------- */

.barre-zone {
  position: relative;
  z-index: 5;
  margin-top: -62px;      /* le chevauchement */
  padding: 0 14px;
}

.barre {
  max-width: var(--largeur);
  margin: 0 auto;
  background: var(--blanc);
  border-radius: var(--r-grand);
  box-shadow: var(--ombre-flottante);
  padding: 16px;
  display: grid;
  gap: 14px;
}

.barre .bouton {
  width: 100%;
  justify-content: center;
}

/* Sur mobile, la barre est verticale : le conteneur est haut. */

.barre__note {
  font-size: 12.5px;
  color: var(--encre-douce);
  text-align: center;
  margin: 2px 0 0;
}

@media (min-width: 901px) {

  .hero,
  .hero__titre-bloc {
    min-height: calc(100svh - 200px);
  }

  .hero__titre-bloc {
    padding: 120px 48px 110px;
  }

  .barre-zone {
    margin-top: -70px;
    padding: 0 28px;
  }

  /* Format horizontal : la zone du widget prend toute la largeur restante,
     le bouton se cale a droite sur la meme ligne. */
  .barre {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 16px 16px 16px 24px;
  }

  .barre .bouton {
    width: auto;
  }

  /* Hauteur d'une barre de recherche horizontale : environ 76 px */

  .barre__note {
    grid-column: 1 / -1;
    text-align: right;
    margin: 0;
  }
}

@media (min-width: 1600px) {
  .hero__titre-bloc {
    padding-left: 64px;
    padding-right: 64px;
  }
}

/* Correctifs hero v2, releves a l'ecran :
   1. le bloc titre est une colonne flex : ses enfants s'etiraient sur toute
      la largeur, transformant la pastille du surtitre en bande en travers
      de la photo ;
   2. sur un ecran de 900 px de haut, hero + barre depassaient legerement. */
.hero__titre-bloc {
  align-items: flex-start;
}

.hero__surtitre {
  align-self: flex-start;
}

@media (min-width: 901px) and (max-height: 940px) {
  .hero,
  .hero__titre-bloc {
    min-height: calc(100svh - 268px);
  }

  .hero__titre-bloc {
    padding-top: 70px;
    padding-bottom: 96px;
  }

  .barre {
    padding: 13px 13px 13px 22px;
  }

}


/* ==========================================================================
   33. HERO v3 — la structure de la reference
   --------------------------------------------------------------------------
     - photo plein cadre, hauteur d'un ecran, coins arrondis en retrait ;
     - barre de navigation transparente POSEE SUR la photo ;
     - titre tres grand a mi-hauteur, aligne a gauche ;
     - sous-titre court, puis bouton a contour fin avec fleche ;
     - en bas a droite : « Nos hebergements » souligne + 4 vignettes ;
     - en bas a gauche : les reseaux sociaux ;
     - voile en degrade, plus dense a gauche.

   Ecarte de la reference : l'icone de compte (pas d'espace client), la barre
   de progression laterale, les fleches de carrousel (les 4 logements tiennent
   tous a l'ecran).

   ========================================================================== */

/* Le retrait des bords + les coins arrondis */
.hero-cadre {
  padding: 0 10px;
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: auto;
  margin: 0;
  border-radius: var(--r-grand);
  overflow: hidden;
  isolation: isolate;
}

.hero__photo,
.hero__voile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Voile en trois couches : dense a gauche pour le texte, en haut pour le
   menu, en bas pour les vignettes. Le centre droit reste clair : la photo
   n'est pas ternie. */
.hero__voile {
  background:
    linear-gradient(to right,
      rgba(20, 14, 8, 0.88) 0%,
      rgba(20, 14, 8, 0.62) 38%,
      rgba(20, 14, 8, 0.28) 68%,
      rgba(20, 14, 8, 0.34) 100%),
    linear-gradient(to bottom,
      rgba(20, 14, 8, 0.58) 0%,
      rgba(20, 14, 8, 0) 22%),
    linear-gradient(to top,
      rgba(20, 14, 8, 0.74) 0%,
      rgba(20, 14, 8, 0) 42%);
}

/* --- L'en-tete transparent, pose sur la photo -------------------------- */

.entete--sur-photo {
  position: relative;
  z-index: 4;
  background: transparent;
  border-bottom: 0;
}

.entete--sur-photo .entete__interieur {
  padding: 18px 20px;
}

.entete--sur-photo .logo {
  color: var(--blanc);
}

.entete--sur-photo .logo span {
  color: #E2D5C0;
}

.entete--sur-photo .menu a {
  color: var(--blanc);
}

.entete--sur-photo .menu a:hover {
  color: #E9C7AB;
}

.entete--sur-photo .menu a.bouton {
  background: transparent;
  border-color: rgba(255, 253, 249, 0.65);
  color: var(--blanc);
}

.entete--sur-photo .menu a.bouton:hover {
  background: rgba(255, 253, 249, 0.16);
  border-color: var(--blanc);
}

.entete--sur-photo .menu__bascule {
  color: var(--blanc);
  border-color: rgba(255, 253, 249, 0.55);
}

.entete--sur-photo .menu__barres,
.entete--sur-photo .menu__barres::before,
.entete--sur-photo .menu__barres::after {
  background: var(--blanc);
}

.entete--sur-photo.entete--ouvert .menu__barres {
  background: transparent;
}

.entete--sur-photo.entete--ouvert .menu li {
  border-top-color: rgba(255, 253, 249, 0.28);
}

/* --- Le bloc central : titre, sous-titre, bouton ----------------------- */

.hero__centre {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;   /* mobile : le titre en haut */
  max-width: var(--largeur);
  margin: 0 auto;
  width: 100%;
  padding: 26px 20px 30px;
}

.hero__centre .hero__sous-titre {
  color: #EDE2D0;
  max-width: 26em;
  margin: 16px 0 26px;
  text-shadow: 0 1px 14px rgba(20, 14, 8, 0.65);
}

/* Le bouton a contour fin, avec sa fleche */
.bouton-fin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 14px 28px;
  border: 1px solid rgba(255, 253, 249, 0.72);
  border-radius: var(--r-pilule);
  background: transparent;
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease;
}

.bouton-fin:hover {
  background: rgba(255, 253, 249, 0.16);
  border-color: var(--blanc);
  color: var(--blanc);
}

.bouton-fin span {
  display: inline-block;
  transition: transform 0.25s ease;
}

.bouton-fin:hover span {
  transform: translateX(5px);
}

/* --- Le bas du hero : reseaux a gauche, vignettes a droite -------------- */

.hero__bas {
  position: relative;
  z-index: 3;
  max-width: var(--largeur);
  margin: 0 auto;
  width: 100%;
  padding: 0 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vignettes-titre {
  color: var(--blanc);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  padding-bottom: 9px;
  margin: 0 0 14px;
  border-bottom: 1px solid rgba(255, 253, 249, 0.45);
}

/* Sur mobile : defilement horizontal, une vignette et demie visible */
.vignettes {
  list-style: none;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.vignettes::-webkit-scrollbar {
  display: none;
}

/* La largeur d'une vignette sur petit écran.

   À 58 %, il n'en tenait qu'une et demie : elles écrasaient le bas du hero
   et on ne devinait pas qu'il y en avait quatre. À 46 %, deux tiennent
   entières et la troisième est amorcée — c'est cette amorce qui dit au
   pouce qu'il y a quelque chose à faire défiler.

   Ne concerne QUE le petit écran : au-delà de 901 px, « .vignettes li »
   repasse en « flex: initial » et les quatre vignettes s'affichent en
   grille, sans carrousel. */
.vignettes li {
  flex: 0 0 46%;
  scroll-snap-align: start;
}

.vignettes a {
  display: block;
  position: relative;
  border-radius: var(--r-carte);
  overflow: hidden;
  text-decoration: none;
}

.vignettes img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.24, 1);
}

.vignettes a:hover img,
.vignettes a:focus-visible img {
  transform: scale(1.07);
}

.vignettes span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 10px 9px;
  color: var(--blanc);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  background: linear-gradient(to top, rgba(14, 10, 5, 0.88) 0%, rgba(14, 10, 5, 0) 100%);
}

/* Les reseaux sociaux */
.reseaux {
  list-style: none;
  display: flex;
  gap: 10px;
}

.reseaux a {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 249, 0.42);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.reseaux a:hover {
  background: rgba(255, 253, 249, 0.16);
  border-color: var(--blanc);
}

.reseaux svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--blanc);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- La barre de recherche descend SOUS le hero ------------------------- */

.barre-zone {
  margin-top: 18px;
  padding: 0 10px;
}


/* ==========================================================================
   34. LE HERO v3 SUR GRAND ECRAN
   ========================================================================== */

@media (min-width: 901px) {

  .hero-cadre {
    padding: 0 20px;
  }

  .hero {
    min-height: calc(100svh - 70px);
  }

  .entete--sur-photo .entete__interieur {
    padding: 26px 48px;
  }

  /* Le titre revient a mi-hauteur */
  .hero__centre {
    justify-content: center;
    padding: 0 48px;
  }

  .hero__centre .hero__sous-titre {
    font-size: 1.05rem;
    max-width: 30em;
    margin: 20px 0 32px;
  }

  /* Reseaux a gauche, vignettes a droite, alignes par le bas */
  .hero__bas {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 0 48px 40px;
  }

  .vignettes-bloc {
    width: min(520px, 44vw);
    flex: 0 0 auto;
  }

  /* Les 4 logements tiennent a l'ecran : pas de carrousel */
  .vignettes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    overflow: visible;
  }

  .vignettes li {
    flex: initial;
  }

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

  .barre-zone {
    margin-top: 22px;
    padding: 0 20px;
  }
}

@media (min-width: 1600px) {
  .entete--sur-photo .entete__interieur,
  .hero__centre,
  .hero__bas {
    padding-left: 64px;
    padding-right: 64px;
  }

  .vignettes-bloc {
    width: min(600px, 40vw);
  }
}

/* Ecrans larges mais peu hauts : on resserre pour que tout tienne */
@media (min-width: 901px) and (max-height: 900px) {
  .hero__centre .hero__sous-titre {
    margin: 14px 0 24px;
  }

  .hero__bas {
    padding-bottom: 28px;
  }

  .vignettes-bloc {
    width: min(440px, 40vw);
  }

  .vignettes-titre {
    font-size: 15px;
    margin-bottom: 10px;
  }
}

/* ==========================================================================
   35. AJUSTEMENTS DEMANDES APRES RELECTURE DU HERO
   ========================================================================== */

/* --- 35.1 Le hero occupe toute la largeur, bord a bord ------------------
   Les coins arrondis et le retrait venaient de la reference, ou la maquette
   etait posee sur un fond sombre. Sur un vrai site en pleine page, ils
   creaient deux bandes claires sur les cotes : c'etait un defaut, pas un
   effet. On supprime les deux. */
.hero-cadre {
  padding: 0;
}

.hero {
  border-radius: 0;
}

/* Meme correction sur les bannieres des pages interieures, qui avaient le
   meme retrait de 20 px et donc le meme defaut. */
.banniere {
  margin: 0;
  border-radius: 0;
}

@media (max-width: 900px) {
  .banniere {
    margin: 0;
  }
}

/* La barre de recherche, elle, garde sa marge : c'est une carte posee sur
   le fond de page, pas un bandeau pleine largeur. */
.barre-zone {
  padding: 0 16px;
}

@media (min-width: 901px) {
  .barre-zone {
    padding: 0 28px;
  }
}


/* --- 35.2 La navigation respire : logo a gauche, menu a droite ----------
   L'en-tete du hero etait contraint a la colonne de contenu (1240 px) et
   centre : logo et menu se retrouvaient colles au milieu de l'ecran. Sur la
   photo, la navigation doit occuper toute la largeur. */
@media (min-width: 901px) {
  .entete--sur-photo .entete__interieur {
    max-width: none;
    padding: 28px 48px;
    gap: 48px;
  }

  /* Le menu est pousse a droite, le bouton Reserver finit la ligne */
  .entete--sur-photo nav {
    margin-left: auto;
  }

  .entete--sur-photo .menu {
    gap: 34px;
  }

  .entete--sur-photo .menu .bouton {
    margin-left: 12px;
  }
}

@media (min-width: 1600px) {
  .entete--sur-photo .entete__interieur {
    padding: 32px 64px;
  }

  .entete--sur-photo .menu {
    gap: 40px;
  }
}


/* --- 35.3 Les vignettes : nettement plus grandes, remontees -------------
   A 2560 px elles faisaient 140 px de large : illisibles. Elles doivent se
   lire immediatement. On elargit le bloc et on le remonte du bas. */
@media (min-width: 901px) {
  .hero__bas {
    padding: 0 48px 56px;
    align-items: flex-end;
  }

  .vignettes-bloc {
    width: min(760px, 58vw);
  }

  .vignettes {
    gap: 16px;
  }

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

  .vignettes span {
    font-size: 13.5px;
    padding: 30px 12px 11px;
  }

  .vignettes-titre {
    font-size: 19px;
    margin-bottom: 16px;
    padding-bottom: 11px;
  }
}

@media (min-width: 1600px) {
  .hero__bas {
    padding: 0 64px 72px;
  }

  .vignettes-bloc {
    width: min(980px, 56vw);
  }

  .vignettes {
    gap: 20px;
  }

  .vignettes span {
    font-size: 15px;
    padding: 34px 14px 13px;
  }

  .vignettes-titre {
    font-size: 22px;
  }
}

@media (min-width: 2000px) {
  .vignettes-bloc {
    width: min(1180px, 52vw);
  }

  .vignettes span {
    font-size: 16.5px;
    padding: 38px 16px 15px;
  }

  .vignettes-titre {
    font-size: 24px;
    margin-bottom: 20px;
  }
}

/* Ecrans peu hauts : on garde des vignettes lisibles sans faire deborder */
@media (min-width: 901px) and (max-height: 900px) {
  .hero__bas {
    padding-bottom: 40px;
  }

  .vignettes-bloc {
    width: min(660px, 52vw);
  }

  .vignettes-titre {
    font-size: 17px;
    margin-bottom: 12px;
  }
}

/* --- 35.4 Coherence du hero pleine largeur -----------------------------
   La navigation occupait toute la largeur, mais le titre et les vignettes
   restaient dans la colonne de 1600 px centree : il en resultait un grand
   vide a droite des vignettes. Maintenant que le hero est bord a bord, ses
   trois etages (nav, titre, bas) partagent les memes marges laterales. */
@media (min-width: 901px) {
  .hero__centre,
  .hero__bas {
    max-width: none;
  }
}

/* ==========================================================================
   36. RESPIRATION DU HERO — marges, navigation, vignettes
   --------------------------------------------------------------------------
   Les trois etages du hero avaient encore la contrainte de la colonne de
   contenu, ce qui tassait tout vers le centre. On les libere, avec des
   marges laterales franches, et le titre est volontairement plus rentre
   que la navigation — comme dans la reference.
   ========================================================================== */

@media (min-width: 901px) {

  .hero .entete--sur-photo .entete__interieur,
  .hero .hero__centre,
  .hero .hero__bas {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  /* Navigation : logo colle a la marge gauche, menu pousse a droite */
  .hero .entete--sur-photo .entete__interieur {
    padding: 30px 64px;
  }

  .hero .entete--sur-photo nav {
    margin-left: auto;
  }

  /* Le titre respire nettement plus que la navigation */
  .hero .hero__centre {
    padding: 0 64px 0 110px;
  }

  /* Les vignettes remontent franchement du bas */
  .hero .hero__bas {
    padding: 0 64px 76px;
  }

  .vignettes img {
    aspect-ratio: 3 / 2;   /* plus basses : le bloc tient mieux */
  }
}

@media (min-width: 1600px) {
  .hero .entete--sur-photo .entete__interieur {
    padding: 34px 88px;
  }

  .hero .hero__centre {
    padding: 0 88px 0 150px;
  }

  .hero .hero__bas {
    padding: 0 88px 88px;
  }
}

@media (min-width: 2000px) {
  .hero .entete--sur-photo .entete__interieur {
    padding: 38px 110px;
  }

  .hero .hero__centre {
    padding: 0 110px 0 190px;
  }

  .hero .hero__bas {
    padding: 0 110px 104px;
  }

  .vignettes-bloc {
    width: min(1120px, 48vw);
  }
}

/* Ecrans peu hauts : on protege d'abord la visibilite des vignettes */
@media (min-width: 901px) and (max-height: 900px) {
  .hero .hero__bas {
    padding-bottom: 52px;
  }

  .hero .hero__centre {
    padding-left: 90px;
  }
}

/* ==========================================================================
   37. VOILE ADAPTE A LA NOUVELLE PHOTO DU HERO
   --------------------------------------------------------------------------
   Cette photo a une particularite genante : son tiers GAUCHE est la partie
   la plus claire de l'image (un feuillage en plein soleil), et c'est
   precisement la que se trouve le titre. Le degrade doit donc etre nettement
   plus dense de ce cote que sur la photo precedente.

   On ne touche pas au centre droit : la maison et le ciel restent nets.
   ========================================================================== */

@media (min-width: 901px) {
  .hero__voile {
    background:
      linear-gradient(to right,
        rgba(18, 13, 7, 0.94) 0%,
        rgba(18, 13, 7, 0.86) 18%,
        rgba(18, 13, 7, 0.60) 40%,
        rgba(18, 13, 7, 0.26) 68%,
        rgba(18, 13, 7, 0.32) 100%),
      linear-gradient(to bottom,
        rgba(18, 13, 7, 0.62) 0%,
        rgba(18, 13, 7, 0) 24%),
      linear-gradient(to top,
        rgba(18, 13, 7, 0.78) 0%,
        rgba(18, 13, 7, 0) 44%);
  }
}

/* Sur mobile le titre est en haut : on assombrit le haut plutot que la
   gauche, et on garde le bas dense pour les vignettes. */
@media (max-width: 900px) {
  .hero__voile {
    height: 100%;
    background:
      linear-gradient(to bottom,
        rgba(18, 13, 7, 0.88) 0%,
        rgba(18, 13, 7, 0.70) 22%,
        rgba(18, 13, 7, 0.34) 45%,
        rgba(18, 13, 7, 0.30) 62%,
        rgba(18, 13, 7, 0.82) 100%);
  }
}

/* Le point focal : la maison est au centre-droit, dans le tiers superieur */
.hero__photo {
  object-position: 54% 38%;
}

@media (max-width: 900px) {
  .hero__photo {
    object-position: 56% 40%;
  }
}

/* Point focal ajuste apres essai : a 38 % le cadrage large etait domine par
   le toit. A 50 % on voit la terrasse, les baies vitrees et le jardin —
   c'est ce qui interesse un visiteur. */
.hero__photo {
  object-position: 54% 50%;
}

@media (max-width: 900px) {
  .hero__photo {
    object-position: 56% 46%;
  }
}

/* ==========================================================================
   38. MISE A L'ECHELLE CONTINUE — remplace les paliers en pixels
   --------------------------------------------------------------------------
   Les sections 34 a 36 reglaient les marges par paliers (901, 1600, 2000 px)
   avec des valeurs fixes. Elles avaient ete calees sur un ecran de 2560 px,
   qui n'est PAS la resolution de reference.

   ORDRE DE PRIORITE DU PROJET :
     1. mobile ~390 px   — majoritaire sur ce type de site
     2. 1920 px          — la resolution PC la plus courante
     3. 1366 px          — les portables
     4. 2560 px          — ne doit pas casser, mais n'est pas la reference

   clamp(mini, souhaite, maxi) fait varier la valeur EN CONTINU avec la
   largeur : plus de sauts brusques entre deux paliers, et rien n'est cale
   sur un ecran particulier.
   ========================================================================== */

@media (min-width: 901px) {

  /* Marge laterale commune : 4,2 % de la largeur, entre 28 et 104 px.
     1366 -> 57 px · 1920 -> 81 px · 2560 -> 104 px */
  .hero .entete--sur-photo .entete__interieur {
    padding: clamp(20px, 2.4vw, 36px) clamp(28px, 4.2vw, 104px);
  }

  /* Le titre est volontairement plus rentre que la navigation :
     6,8 % de la largeur, entre 40 et 176 px. */
  .hero .hero__centre {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: clamp(40px, 6.8vw, 176px);
    padding-right: clamp(28px, 4.2vw, 104px);
  }

  .hero .hero__bas {
    padding: 0 clamp(28px, 4.2vw, 104px) clamp(40px, 4.6vw, 96px);
  }

  /* Les vignettes suivent la largeur au lieu de sauter par paliers.
     1366 -> 656 px · 1920 -> 922 px · 2560 -> 1080 px (plafond) */
  .vignettes-bloc {
    width: clamp(380px, 48vw, 1080px);
  }

  .vignettes {
    gap: clamp(10px, 0.9vw, 20px);
  }

  .vignettes span {
    font-size: clamp(12.5px, 0.72vw, 16.5px);
    padding: clamp(24px, 1.8vw, 38px) clamp(10px, 0.7vw, 16px) clamp(9px, 0.6vw, 15px);
  }

  .vignettes-titre {
    font-size: clamp(16px, 1vw, 23px);
    margin-bottom: clamp(11px, 0.9vw, 20px);
  }
}

/* Le titre du hero : une seule formule pour toutes les largeurs.
   390 -> 46 px · 1366 -> 90 px · 1920 -> 127 px · 2560 -> 136 px (plafond) */
.hero__titre,
.titre-geant {
  font-size: clamp(2.9rem, 6.6vw, 8.5rem);
}

.hero .hero__centre .hero__sous-titre {
  font-size: clamp(0.98rem, 0.85vw, 1.22rem);
  max-width: 34em;
}

/* La photo d'interieur de la tente est en PORTRAIT, alors que la vitrine est
   en paysage sur grand ecran : le rognage y est donc vertical. On le cale sur
   le bas de l'image, ou se trouvent le canape, la table basse et la table a
   manger — c'est ce mobilier qui prouve l'argument du texte. */
.vitrine__photo--tente {
  object-position: 50% 66%;
}

@media (max-width: 900px) {
  .vitrine__photo--tente {
    object-position: 50% 58%;
  }
}

/* Photo du Luxury Circus : portrait, comme celle de la tente. La roulotte
   occupe la bande centrale de l'image ; au-dessus il n'y a que la voile
   d'ombrage, en dessous que la pelouse. On cale le rognage sur la roulotte. */
.vitrine__photo--circus {
  object-position: 50% 54%;
}

@media (max-width: 900px) {
  .vitrine__photo--circus {
    object-position: 50% 50%;
  }
}

/* La photo du gite est en PAYSAGE — la seule du lot. Le rognage y est donc
   minime : on cale simplement sur la maison, un peu au-dessus du centre. */
.vitrine__photo--gite {
  object-position: 50% 44%;
}

/* ==========================================================================
   39. LES TABLEAUX COMPARATIFS
   --------------------------------------------------------------------------
   Ils reutilisaient le style « .distances », concu pour « destination |
   duree » : sa derniere colonne est alignee a droite, ce qui convient a des
   durees mais pas a un comparatif. Resultat, l'en-tete et ses valeurs
   n'etaient pas alignes de la meme facon, et les deux colonnes de valeurs
   n'avaient pas le meme traitement.

   Ici tout est aligne a gauche, en-tetes compris : deux colonnes qu'on
   compare doivent se lire de la meme maniere.
   ========================================================================== */

.tableau-compare th,
.tableau-compare td,
.tableau-compare td:last-child {
  text-align: left;
  white-space: normal;
}

/* La colonne de gauche porte le critere : on la distingue par la couleur,
   pas par l'alignement. */
.tableau-compare td:first-child {
  color: var(--encre-douce);
  width: 30%;
}

.tableau-compare td:not(:first-child) {
  color: var(--encre);
}

/* ==========================================================================
   40. LA LISTE DES DESTINATIONS DE BORD DE MER
   --------------------------------------------------------------------------
   Les trois destinations ne se valent pas : chacune a son nom, son temps de
   trajet reel et sa raison d'y aller. Le temps est affiche en pastille, a
   cote du nom — jamais une formule vague comme « a proximite ».
   ========================================================================== */

.destinations {
  list-style: none;
  margin: 26px 0 0;
  display: grid;
  gap: 22px;
}

.destinations li {
  border-top: 1px solid var(--trait);
  padding-top: 18px;
}

.destination__nom {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 19px;
  color: var(--vert);
  letter-spacing: -0.01em;
  margin-bottom: 7px;
}

.destination__nom span {
  font-family: var(--texte);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terre);
  background: var(--pierre);
  border-radius: var(--r-pilule);
  padding: 4px 12px;
}

.destinations p {
  font-size: 15.5px;
  margin-bottom: 0;
}

/* La ligne qui rassure sur le prix, sous les boutons de reservation des pages
   logement. Discrete a dessein : elle repond a une inquietude au moment ou
   elle se pose, sans devenir un argument de vente. */
.note-reservation {
  text-align: center;
  font-size: 13.5px;
  color: var(--encre-douce);
  margin-top: 16px;
}

/* ==========================================================================
   41. PAGES LOGEMENT — structure façon Airbnb
   --------------------------------------------------------------------------
   Objectif : l'essentiel visible sans défiler.
     - titre + ligne de résumé
     - galerie en grille : une grande photo, quatre petites
     - corps en deux colonnes sur PC, le bloc de réservation collant à droite
     - sur mobile, le bloc devient une barre fixe en bas d'écran
   ========================================================================== */

.logement-tete {
  padding: 26px 0 18px;
}

.logement-tete h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  margin-bottom: 10px;
}

.resume {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 15px;
  color: var(--encre-douce);
  list-style: none;
}

.resume li + li::before {
  content: "·";
  margin-right: 10px;
  color: var(--trait);
}

/* --- La galerie ---------------------------------------------------------- */
.galerie-grille {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  border-radius: var(--r-carte);
  overflow: hidden;
}

.galerie-grille img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.galerie-grille__grande {
  aspect-ratio: 4 / 3;
}

.galerie-grille__petites {
  display: none;
}

.galerie-bouton {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  background: var(--blanc);
  border: 1px solid var(--encre);
  border-radius: var(--r-pilule);
  padding: 10px 18px;
  font-family: var(--texte);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--encre);
  cursor: pointer;
  min-height: 44px;
}

/* --- Le corps en deux colonnes ------------------------------------------ */
.logement-corps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.logement-corps h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: 14px;
}

.logement-bloc {
  padding: 30px 0;
  border-top: 1px solid var(--trait);
}

.logement-bloc:first-child {
  border-top: 0;
  padding-top: 8px;
}

/* --- Le bloc de réservation --------------------------------------------- */
.reservation {
  background: var(--blanc);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  padding: 24px 22px;
}

.reservation h2 {
  font-size: 20px;
  margin-bottom: 6px;
}

.reservation p {
  font-size: 14.5px;
  color: var(--encre-douce);
}

.reservation .bouton {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.reservation__note {
  text-align: center;
  font-size: 12.5px;
  color: var(--encre-douce);
  margin-top: 14px;
}

/* Sur mobile, le bloc devient une barre fixe en bas d'écran.

   ⚠️ POURQUOI ELLE DÉCROCHAIT, ET COMMENT ON L'A RÉGLÉ.

   En défilant vers le bas, un liseré vide apparaissait sous la barre : elle
   avait l'air de flotter au-dessus du bord de l'écran. Ce n'était pas une
   erreur de position — « bottom: 0 » est bien la bonne règle, et aucune unité
   « vh » n'intervient ici.

   La cause est ailleurs, et on ne peut pas l'empêcher : les navigateurs des
   téléphones rétractent leur barre d'adresse quand on défile vers le bas. La
   fenêtre grandit alors de quelques dizaines de pixels, d'un coup, et le
   navigateur repositionne les éléments fixes AVEC UN TEMPS DE RETARD. Pendant
   ces quelques images, la barre est encore à l'ancien bas de l'écran, et on
   voit le fond de la page en dessous.

   Le remède ne consiste donc pas à mieux la positionner, mais à faire en
   sorte qu'il n'y ait plus rien à voir dans l'intervalle : « ::after »
   prolonge son fond de 140 px vers le bas, hors de l'écran. Le retard existe
   toujours, mais il ne se voit plus — la zone découverte est de la même
   couleur que la barre.

   « env(safe-area-inset-bottom) » réserve en plus la hauteur de la barre
   d'accueil des iPhone récents, qui recouvrirait le bouton. La valeur de
   repli « 0px » est nécessaire : sans elle, les navigateurs qui ignorent
   « env() » ne comprennent pas le calcul et abandonnent toute la déclaration,
   ce qui supprimerait aussi les 12 px de rembourrage.

   ⚠️ AUJOURD'HUI CE « env() » VAUT TOUJOURS ZÉRO, et ce n'est pas une erreur
   de syntaxe. iOS ne renseigne ces valeurs que si la balise « viewport » des
   pages porte « viewport-fit=cover ». Les 19 pages écrivent seulement
   « width=device-width, initial-scale=1.0 » : la marge de sécurité reste donc
   à zéro partout.

   Ce n'est pas grave — la barre s'arrête au bord de l'écran, comme avant.
   Mais l'ajouter n'est PAS une modification anodine : « viewport-fit=cover »
   fait passer toute la page sous l'encoche et sous la barre d'accueil, sur
   les 19 pages à la fois. Il faudrait alors reprendre aussi le haut de
   l'en-tête. À décider ensemble, sur un vrai iPhone. */
.barre-reservation {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--blanc);
  border-top: 1px solid var(--trait);
  box-shadow: 0 -6px 24px rgba(70, 55, 35, 0.12);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 14px;
}

/* La bavure décrite ci-dessus. Elle ne reçoit aucun clic et n'est lue par
   aucun lecteur d'écran : c'est un aplat de couleur, rien d'autre. */
.barre-reservation::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 140px;
  background: var(--blanc);
  pointer-events: none;
}

.barre-reservation__texte {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--encre-douce);
  line-height: 1.3;
}

.barre-reservation__texte strong {
  display: block;
  font-family: var(--titre);
  font-size: 16px;
  color: var(--vert-fonce);
}

.barre-reservation .bouton {
  flex: 0 0 auto;
  padding: 13px 22px;
  min-height: 48px;
  font-size: 15px;
}

/* On réserve la place en bas de page pour que la barre ne masque rien. La
   barre d'accueil des iPhone s'ajoute à la hauteur de la barre : sans elle,
   les dernières lignes du pied de page resteraient dessous. */
body.a-barre-reservation {
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}

/* --- Les équipements en grille ------------------------------------------ */
.equip-groupe {
  margin-bottom: 24px;
}

.equip-groupe h3 {
  font-family: var(--texte);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: 12px;
}

.equip-liste {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px 24px;
}

.equip-liste li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.4;
}

.equip-liste svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  fill: none;
  stroke: var(--vert);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.equip-absent li {
  color: var(--encre-douce);
  text-decoration: line-through;
  text-decoration-color: var(--trait);
}

.equip-absent svg {
  stroke: var(--encre-douce);
}

/* Le repli de la liste longue */
.equip-cache {
  display: none;
}

.equip-ouvert .equip-cache {
  display: grid;
}

.equip-bascule {
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--encre);
  border-radius: var(--r-pilule);
  padding: 12px 24px;
  min-height: 46px;
  font-family: var(--texte);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--encre);
  cursor: pointer;
}

/* --- La visionneuse plein écran ----------------------------------------- */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 10, 6, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.visionneuse[open],
.visionneuse.ouverte {
  display: flex;
}

/* « dvh » et non « vh » : sur téléphone, « vh » compte la fenêtre comme si les
   barres du navigateur n'existaient pas, et une photo en « 86vh » dépasse par
   le bas. Sur ordinateur les deux unités sont identiques — rien ne change. */
.visionneuse img {
  max-width: 100%;
  max-height: 86dvh;
  object-fit: contain;
  border-radius: var(--r-petit);
}

.visionneuse__fermer,
.visionneuse__prec,
.visionneuse__suiv {
  position: absolute;
  background: rgba(255, 253, 249, 0.14);
  border: 1px solid rgba(255, 253, 249, 0.4);
  color: var(--blanc);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visionneuse__fermer { top: 18px; right: 18px; }
.visionneuse__prec   { left: 14px;  top: 50%; transform: translateY(-50%); }
.visionneuse__suiv   { right: 14px; top: 50%; transform: translateY(-50%); }

.visionneuse__compteur {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #D9CFC0;
  font-size: 13px;
  letter-spacing: 0.08em;
}


/* ==========================================================================
   42. PAGES LOGEMENT SUR GRAND ÉCRAN
   ========================================================================== */

@media (min-width: 901px) {

  .logement-tete {
    padding: 34px 0 22px;
  }

  /* Galerie : une grande à gauche, quatre petites à droite.

     La hauteur est FIXÉE, et c'est le point important de tout ce bloc.
     Sans cela, la grande photo impose sa hauteur naturelle — plus de
     900 pixels sur un écran large — et la galerie mange l'écran entier :
     le visiteur ne voit plus ni le descriptif ni le bloc de réservation
     sans faire défiler, ce qui est exactement ce qu'on veut éviter.

     clamp() garde la galerie proportionnée à la hauteur de la fenêtre,
     avec un plancher pour les écrans bas et un plafond pour les grands. */
  /* UNE SEULE grille, pas deux imbriquées.

     La version imbriquée (une sous-grille pour les quatre vignettes) ne
     marchait pas : une hauteur en pourcentage ne se résout que si le
     parent a une hauteur définie, et de maillon en maillon la chaîne
     cassait. Résultat : les deux vignettes du bas se retrouvaient sous
     le cadre, invisibles.

     « display: contents » fait disparaître la div enveloppante de la
     mise en page — sans la retirer du HTML : les quatre vignettes
     deviennent des cases de CETTE grille-ci, qui a bien une hauteur
     définie. Le problème ne peut plus se poser. */
  .galerie-grille {
    grid-template-columns: 1.02fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: clamp(340px, 46vh, 520px);
  }

  .galerie-grille__grande {
    aspect-ratio: auto;
    grid-row: 1 / 3;
    grid-column: 1;
    height: 100%;
    min-height: 0;
  }

  .galerie-grille__petites {
    display: contents;
  }

  /* min-height: 0 — sans quoi une image refuse de rétrécir en dessous de
     sa taille naturelle et fait déborder la ligne. */
  .galerie-grille__petites img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }

  .galerie-bouton {
    right: 18px;
    bottom: 18px;
  }

  /* Deux colonnes : contenu large à gauche, réservation collante à droite */
  .logement-corps {
    grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.9fr);
    gap: 64px;
  }

  .reservation {
    position: sticky;
    top: 24px;
    padding: 28px 26px;
  }

  /* La barre fixe du bas ne sert que sur mobile */
  .barre-reservation {
    display: none;
  }

  body.a-barre-reservation {
    padding-bottom: 0;
  }

  .equip-liste {
    grid-template-columns: 1fr 1fr;
  }
}

/* Sans JavaScript, aucun bouton n'est créé : la liste doit donc rester
   entièrement visible plutôt que d'être masquée sans moyen de l'ouvrir. */
html:not(.js) .equip-cache,
.equip-cache {
  display: grid;
}

html.js [data-equipements]:not(.equip-ouvert) .equip-cache {
  display: none;
}

/* --- Mention de nuance sous une vitrine ---------------------------------
   Une ligne discrète, réservée aux réserves honnêtes : ce qu'un logement
   n'a pas, ce qui n'est pas compris, ce qui se commande à l'avance. Elle
   doit se lire sans crier — c'est une précision, pas un avertissement. */
.mention-saison {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--trait);
  font-size: 14px;
  line-height: 1.55;
  color: var(--encre-douce);
}

.vitrine--sombre .mention-saison {
  border-top-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   43. HERO — LA PHOTO DE NUIT
   --------------------------------------------------------------------------
   La photo précédente montrait le gîte en plein midi : ciel bleu franc,
   façade en plein soleil. Deux problèmes. Elle contredisait la promesse
   d'hébergement insolite — on voyait une maison ordinaire — et il fallait
   un voile très dense pour que le titre blanc reste lisible, ce qui
   écrasait l'image.

   La nouvelle photo est prise à la tombée de la nuit : la toile est
   éclairée de l'intérieur, le ciel est encore bleu, le jacuzzi et les
   bougies sont visibles. Elle est déjà sombre par elle-même.

   CONSÉQUENCE : le voile doit être BEAUCOUP plus léger qu'avant. Reprendre
   les valeurs de la section 37 sur cette image la transformerait en bouillie
   brune. Ces règles viennent donc après, et les remplacent.
   ========================================================================== */

@media (min-width: 901px) {
  .hero__voile {
    background:
      /* De gauche à droite : on garde un appui sous le titre, sans plus. */
      linear-gradient(to right,
        rgba(10, 12, 20, 0.72) 0%,
        rgba(10, 12, 20, 0.58) 22%,
        rgba(10, 12, 20, 0.30) 46%,
        rgba(10, 12, 20, 0.10) 72%,
        rgba(10, 12, 20, 0.16) 100%),
      /* Le haut : juste de quoi détacher la barre de navigation du ciel. */
      linear-gradient(to bottom,
        rgba(10, 12, 20, 0.46) 0%,
        rgba(10, 12, 20, 0) 22%),
      /* Le bas : les vignettes et les icônes ont besoin d'un fond. */
      linear-gradient(to top,
        rgba(10, 12, 20, 0.68) 0%,
        rgba(10, 12, 20, 0) 40%);
  }
}

/* Sur mobile le titre est en haut de la photo : c'est le haut qu'on
   assombrit, pas la gauche. */
@media (max-width: 900px) {
  .hero__voile {
    height: 100%;
    background:
      linear-gradient(to bottom,
        rgba(10, 12, 20, 0.74) 0%,
        rgba(10, 12, 20, 0.52) 20%,
        rgba(10, 12, 20, 0.18) 44%,
        rgba(10, 12, 20, 0.24) 64%,
        rgba(10, 12, 20, 0.72) 100%);
  }
}

/* Le voile tire désormais vers le bleu nuit (10, 12, 20) et non vers le brun
   (18, 13, 7) : la photo est bleutée à cette heure-là, un voile brun aurait
   sali le ciel. C'est la seule entorse à la règle « aucun gris froid », et
   elle est délibérée — un ciel de nuit n'est pas chaud. */

/* --- LE POINT FOCAL ------------------------------------------------------
   La photo est désormais au format paysage (1672 × 941, soit du 16/9), donc
   très proche du cadre du hero sur un écran large : le rognage est faible.
   On descend simplement de deux points sous le centre pour privilégier la
   terrasse et le jacuzzi plutôt que le ciel. */
.hero__photo {
  object-position: 50% 52%;
}

@media (max-width: 900px) {
  /* Sur téléphone, c'est l'inverse : le cadre est haut et étroit, la photo
     large. Le rognage se fait donc sur les côtés, et il faut viser la tente,
     qui n'est pas au milieu mais légèrement à gauche. À 50 % on la couperait
     et on garderait surtout le pré vide de droite. */
  .hero__photo {
    object-position: 42% 52%;
  }
}


/* ==========================================================================
   45. FICHE EN ATTENTE — le panneau du Luxury Circus
   --------------------------------------------------------------------------
   Ce logement n'a ni descriptif vérifié ni photographie. Sa fiche ne peut
   donc pas avoir la galerie des trois autres.

   Le problème n'est pas l'absence d'information — c'est qu'une page vide
   ressemble à un bogue. Ce panneau occupe exactement la place de la galerie
   et annonce l'état de la fiche : on passe d'un oubli apparent à un choix
   assumé. C'est la même surface, le même arrondi, le même rythme.

   Rayures obliques très pâles en fond : elles disent « en travaux » sans
   qu'on ait à l'écrire, et ne coûtent aucune image.
   ========================================================================== */

.fiche-attente {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 28px;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background-color: var(--sable-fonce);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(168, 95, 59, 0.045) 0 10px,
    rgba(168, 95, 59, 0)     10px 20px
  );
}

.fiche-attente__etat {
  margin: 0 0 14px;
  padding: 5px 14px 6px;
  border: 1px solid rgba(168, 95, 59, 0.38);
  border-radius: var(--r-pilule);
  background: rgba(255, 253, 249, 0.75);
  color: var(--terre-fonce);
  font-family: var(--texte);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.fiche-attente__titre {
  margin: 0 0 18px;
  font-family: var(--titre);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--encre);
}

.fiche-attente__texte {
  max-width: 46em;
  margin: 0 0 14px;
  color: var(--encre-douce);
}

.fiche-attente .bouton { margin-top: 10px; }

/* Sur grand écran, le panneau prend la hauteur qu'aurait eue la galerie —
   c'est ce qui fait que la page garde le même rythme que les trois autres
   fiches, au lieu de paraître amputée. */
@media (min-width: 901px) {
  .fiche-attente {
    min-height: clamp(340px, 46vh, 520px);
    padding: 56px 60px;
  }
}

/* --- La suite de la galerie -----------------------------------------------
   La grille ne montre que cinq photos. Les autres sont declarees juste apres,
   sous forme de reperes « data-photo » que la visionneuse plein ecran lit a
   l ouverture. Ce ne sont PAS des <img> masquees : une image masquee par le
   CSS est tout de meme telechargee, ce qui representait 3,5 Mo inutiles au
   chargement de la fiche du gite. Un repere ne coute rien.

   Ce bloc n a donc rien a afficher — mais on le masque tout de meme, pour le
   cas ou un <span> vide prendrait de la place dans une grille. */
.galerie-suite {
  display: none;
}

/* --- Un tableau qui peut défiler ------------------------------------------
   Le tableau du règlement compte quatre colonnes. Sur un écran étroit il ne
   tient pas : plutôt que de le comprimer jusqu'à l'illisible, on le laisse
   défiler à l'intérieur de son cadre. La page, elle, ne bouge pas. */
.tableau-large {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   46. LE PASSAGE — une transition sans image
   --------------------------------------------------------------------------
   Cet emplacement portait une photo pleine hauteur annonçant « Les
   insolites ». Elle a été retirée : les trois logements ont chacun leur
   vitrine juste en dessous, et une image de plus ici entrait en
   concurrence avec elles au lieu de les annoncer.

   Ce qui marque désormais le passage d'un univers à l'autre :

   1. un CHANGEMENT DE MATIÈRE — le fond passe du sable à la pierre, ce qui
      se perçoit au défilement sans rien illustrer ;
   2. BEAUCOUP D'AIR — le double de l'espacement courant, au-dessus comme
      en dessous ;
   3. un FILET terre cuite court, qui donne au regard son point de départ.

   Le texte reste étroit : une transition se lit d'un coup d'œil, elle n'a
   pas à occuper toute la largeur.
   ========================================================================== */

.passage {
  padding: calc(var(--air) * 0.9) 0;
  background: var(--pierre);
}

.passage__interieur {
  max-width: 34em;
}

/* Le filet : court, épais, terre cuite. Il ne dit rien, il place l'œil. */
.passage__filet {
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 26px;
  border-radius: 2px;
  background: var(--terre);
}

.passage .surtitre {
  color: var(--terre-fonce);
}

.passage h2 {
  margin: 0 0 20px;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.passage__chapeau {
  margin: 0;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.6;
  color: var(--encre-douce);
}

@media (min-width: 901px) {
  .passage {
    padding: var(--air) 0;
  }
}

/* ==========================================================================
   47. LE MENU EN TIROIR — PETIT ÉCRAN UNIQUEMENT
   --------------------------------------------------------------------------
   Avant : le menu s'ouvrait DANS le flux de la page. Il poussait le titre du
   hero vers le bas, tout se décalait, et le bouton « Réserver » s'étirait sur
   toute la largeur avec de gros rembourrages — il paraissait énorme.

   Maintenant : un panneau blanc glisse depuis la droite, par-dessus la page.
   Rien ne bouge derrière lui.

   --------------------------------------------------------------------------
   TOUTE CETTE SECTION EST ENFERMÉE DANS « @media (max-width: 900px) ».
   C'est délibéré : en phase mobile, aucune règle ne doit pouvoir remonter
   jusqu'au bureau, même par accident. Au-delà de 901 px, le menu reste la
   barre horizontale habituelle, inchangée.
   --------------------------------------------------------------------------

   Trois précautions :

   1. On n'anime QUE « transform » — jamais la largeur ni la position, qui
      obligeraient le téléphone à recalculer la mise en page à chaque image.
      « visibility » change d'un coup, sans transition : elle sert à sortir
      les liens du parcours au clavier tant que le tiroir est fermé.

   2. Sans JavaScript, la classe « entete--js » n'existe pas : rien de tout
      ceci ne s'applique et le menu reste déplié, comme avant.

   3. L'en-tête passe au-dessus du bandeau maquette (z-index 200) le temps
      de l'ouverture, sinon le bandeau recouvrirait le haut du tiroir.
   ========================================================================== */

@media (max-width: 900px) {

  .entete--js.entete--ouvert {
    z-index: 300;
  }

  /* --- Faire passer le tiroir DEVANT le bandeau maquette ------------------
     Le bandeau est en « position: relative » avec un z-index de 200. Comme
     l'en-tête est imbriqué dans le hero, aucun z-index posé sur lui ne
     parvient à passer devant : le bandeau recouvrait les 67 premiers pixels
     du tiroir, dont la moitié haute de la croix de fermeture.

     La parade tient en un mot : le bandeau repasse en « position: static »
     le temps de l'ouverture. Il perd alors son z-index et sort de la couche
     des éléments positionnés — le tiroir passe devant.

     Rien ne bouge à l'écran : le bandeau est en « relative » sans aucun
     décalage, sa position calculée est identique en « static ».

     Ce correctif deviendra inutile le jour où le bandeau maquette sera
     retiré. Il ne gênera pas pour autant. */
  body:has(.entete--ouvert) .bandeau-maquette {
    position: static;
  }

  /* --- Le voile sombre, derrière le tiroir --------------------------------
     Posé en ::before de la barre de navigation : aucun élément à ajouter
     dans le HTML des 19 pages. */
  .entete--js.entete--ouvert nav::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(24, 18, 12, 0.55);
  }

  /* --- Le tiroir ---------------------------------------------------------- */
  .entete--js .menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: min(320px, 84vw);
    /* 88 px en haut : la place du bouton de fermeture, qui reste au-dessus */
    padding: 74px 22px 28px;
    background: var(--blanc);
    box-shadow: -18px 0 44px rgba(70, 55, 35, 0.24);
    overflow-y: auto;
    overscroll-behavior: contain;

    transform: translateX(101%);
    visibility: hidden;
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.24, 1),
                visibility 0s linear 0.34s;
  }

  /* La largeur est REDÉCLARÉE ici. La règle héritée de la section 17,
     « .entete--js.entete--ouvert .menu { width: 100% } », est plus spécifique
     que la précédente : sans cette reprise, le tiroir s'ouvrait sur toute la
     largeur de l'écran au lieu de 320 px. */
  .entete--js.entete--ouvert .menu {
    width: min(320px, 84vw);
    padding: 74px 22px 28px;
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.24, 1),
                visibility 0s;
  }

  /* La barre de navigation ne prend plus de place : le tiroir est en fixed.

     Le bouton d'ouverture reste dans le flux : la barre de navigation garde
     donc sa hauteur, et rien ne remonte à l'ouverture. */
  .entete--js.entete--ouvert nav {
    width: auto;
  }

  /* --- Les entrées --------------------------------------------------------- */
  .entete--js .menu li {
    border-top: 1px solid var(--trait);
  }

  .entete--js .menu li:first-child {
    border-top: 0;
  }

  .entete--js .menu a {
    display: block;
    padding: 15px 2px;
    font-size: 16px;
    font-weight: 500;
    color: var(--encre);
  }

  /* --- Le bouton « Réserver » ---------------------------------------------
     Il s'étirait sur toute la largeur avec 15 px sur 30 de rembourrage.
     Ici : pleine largeur mais des proportions de bouton, pas de bannière. */
  /* Le sélecteur reprend « .entete--ouvert » : sans lui, la règle de la
     section 17 « .entete--js.entete--ouvert .menu .bouton », plus spécifique,
     réimposait 15 px sur 30 de rembourrage et une hauteur minimale de 50 px.
     C'est ce qui rendait le bouton si haut. */
  .entete--js .menu .bouton,
  .entete--js.entete--ouvert .menu .bouton {
    margin: 20px 0 0;
    padding: 10px 20px;
    min-height: 0;
    font-size: 14.5px;
    line-height: 1.3;
    text-align: center;
    justify-content: center;
    background: var(--vert-fonce);
    border-color: var(--vert-fonce);
    color: var(--blanc);
  }

  /* --- Le cas du hero : les liens y sont blancs -----------------------------
     Sur la page d'accueil, l'en-tête est posé sur la photo et ses liens sont
     blancs. Dans un tiroir blanc, ils disparaîtraient. */
  .entete--sur-photo.entete--js .menu a {
    color: var(--encre);
  }

  .entete--sur-photo.entete--js .menu a.bouton {
    background: var(--vert-fonce);
    border-color: var(--vert-fonce);
    color: var(--blanc);
  }

  /* Le bouton d'ouverture reste au-dessus du tiroir, et redevient sombre
     une fois le panneau blanc ouvert. */
  .menu__bascule {
    position: relative;
    z-index: 3;
  }

  /* --- Une fois ouvert : le bouton d'ouverture s'efface -------------------
     Il garde sa place dans le flux — « visibility » et non « display » —
     sinon l'en-tête perdrait sa hauteur et toute la page remonterait de
     onze pixels. La fermeture se fait par la croix, dans le tiroir. */
  .entete--js.entete--ouvert .menu__bascule {
    visibility: hidden;
  }


  .entete--sur-photo.entete--js.entete--ouvert .menu__bascule {
    color: var(--encre);
    border-color: var(--trait);
  }

  .entete--sur-photo.entete--js.entete--ouvert .menu__barres::before,
  .entete--sur-photo.entete--js.entete--ouvert .menu__barres::after {
    background: var(--encre);
  }

  /* --- Le fond ne défile plus quand le tiroir est ouvert -------------------
     Sinon la page glisse derrière le panneau au moindre mouvement du pouce.
     « :has() » évite d'avoir à toucher au JavaScript. */
  html:has(.entete--ouvert),
  body:has(.entete--ouvert) {
    overflow: hidden;
  }

  /* NOTE — « scrollbar-gutter: stable » a été essayé ici pour éviter le
     décalage d'un pixel dû à la disparition de la barre de défilement.
     RÉSULTAT PIRE : en réservant la gouttière, la largeur utile change et le
     titre du hero se décalait de 45 px. La règle a été retirée.

     Le décalage résiduel est d'environ un pixel, et seulement dans une
     fenêtre d'ordinateur étroite : un téléphone a une barre flottante, qui
     ne prend aucune place. On le laisse. */

  /* Le visiteur qui a demandé moins de mouvement n'a pas d'animation. */
  @media (prefers-reduced-motion: reduce) {
    .entete--js .menu,
    .entete--js.entete--ouvert .menu {
      transition: none;
    }
  }
}

/* --- La croix de fermeture, à l'intérieur du tiroir ------------------------
   Créée par js/interactions.js et insérée en première ligne du menu.

   Elle est MASQUÉE PAR DÉFAUT, et ne s'affiche que dans le bloc petit écran
   ci-dessous. C'est ce qui garantit que le bureau reste identique : au-delà
   de 901 px, cet élément n'existe pas visuellement, et aucune règle n'a été
   ajoutée dans un bloc « min-width ». */
.menu__ligne-fermer {
  display: none;
}

/* ==========================================================================
   48. LA CROIX DE FERMETURE DU TIROIR — PETIT ÉCRAN UNIQUEMENT
   ========================================================================== */

@media (max-width: 900px) {

  .entete--js .menu__ligne-fermer {
    display: flex;
    justify-content: flex-start;
    /* Elle ne porte pas le filet qui sépare les entrées du menu */
    border-top: 0;
    margin: 0 0 10px;
  }

  .menu__fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -10px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--r-pilule);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .menu__fermer:hover,
  .menu__fermer:focus-visible {
    background: var(--sable-fonce);
  }

  /* Le tiroir n'a plus besoin de réserver 74 px pour une croix flottante :
     la croix occupe maintenant sa propre ligne, dans le flux. */
  .entete--js .menu,
  .entete--js.entete--ouvert .menu {
    padding: 22px 22px 28px;
  }
}

/* ==========================================================================
   49. LES FORMULAIRES DE RÉSERVATION
   --------------------------------------------------------------------------
   Le projet a longtemps interdit d'écrire le moindre champ de réservation :
   un channel manager devait fournir le sien. Le propriétaire y a renoncé, et
   ce sont désormais de vrais formulaires — mais ils ne réservent rien et ne
   touchent à aucun paiement. Ils envoient une DEMANDE, à laquelle le
   propriétaire répond.

   Aucun script extérieur n'est chargé : c'est un envoi de formulaire HTML,
   donc aucun cookie n'est déposé de notre fait.
   ========================================================================== */

.formulaire {
  margin-top: 18px;
}

/* --- Un champ ------------------------------------------------------------ */
.champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
}

.champ label {
  font-family: var(--texte);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--encre-douce);
}

.champ input,
.champ select,
.champ textarea {
  font-family: var(--texte);
  font-size: 16px;            /* 16 px minimum : en dessous, le téléphone
                                 zoome tout seul à la mise au point */
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  padding: 12px 14px;
  width: 100%;
  min-height: 48px;           /* zone tactile confortable */
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.champ textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(85, 99, 78, 0.16);
}

/* --- Champs côte à côte --------------------------------------------------
   Sur petit écran ils s'empilent : deux champs de 160 px de large ne se
   remplissent pas au pouce. */
.formulaire__duo,
.formulaire__trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
}

/* --- L'option payante ---------------------------------------------------- */
.formulaire__option {
  margin: 6px 0 20px;
  padding: 18px 18px 14px;
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--sable-fonce);
}

.formulaire__option legend {
  padding: 0 8px;
  font-family: var(--texte);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terre-fonce);
}

.formulaire__option-titre {
  margin: 0 0 12px;
  font-size: 16px;
}

.case {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

.case input {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: 0 0 auto;
  accent-color: var(--vert-fonce);
  margin: 0;
}

.case label {
  font-size: 15px;
  color: var(--encre);
  cursor: pointer;
}

.formulaire__boissons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  margin: 10px 0 4px 30px;
}

.formulaire__note,
.formulaire__mentions {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--encre-douce);
}

.formulaire button.bouton {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

/* Le piège à robots ne doit jamais être vu ni lu à voix haute. */
.formulaire__piege {
  position: absolute !important;
  left: -9999px !important;
}

/* Le cadre du formulaire sur la page Réserver */
.formulaire-cadre {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 24px 26px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-douce);
}

/* Le prix, dans le bloc de réservation des fiches */
.reservation__prix {
  margin: 0 0 4px;
  font-family: var(--titre);
  font-size: 26px;
  line-height: 1.15;
  color: var(--encre);
}

.reservation__prix strong {
  font-weight: 600;
}

.reservation__saison {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--encre-douce);
}

@media (min-width: 901px) {
  .formulaire__duo  { grid-template-columns: 1fr 1fr; }
  .formulaire__trio { grid-template-columns: 1fr 1fr 0.8fr; }
  .formulaire-cadre { padding: 40px 44px 36px; }
  .formulaire button.bouton { width: auto; min-width: 260px; }
}

/* ==========================================================================
   50. LE BANDEAU D'INFORMATION (RGPD)
   --------------------------------------------------------------------------
   POURQUOI CE N'EST PAS UN BANDEAU COOKIES.

   Un bandeau de CONSENTEMENT est obligatoire quand un site écrit quelque
   chose sur l'appareil du visiteur à des fins de suivi : cookies, traceurs,
   statistiques. Ce site n'en dépose aucun — pas de police extérieure, pas de
   carte, pas d'outil de mesure. Rien n'a changé de ce côté avec l'arrivée
   des formulaires : un formulaire HTML envoyé à un service extérieur ne pose
   pas de cookie, puisqu'aucun script n'est chargé.

   Ce qui a changé, c'est autre chose : les données que le visiteur saisit
   partent chez un tiers, le service qui achemine le courriel. Le RGPD
   demande alors de l'en INFORMER, pas de lui demander son accord.

   D'où ce bandeau : une phrase, un lien, un bouton pour le refermer. Il
   n'attend pas de réponse et ne bloque rien. Le visiteur peut parcourir tout
   le site sans le lire — l'information qui compte vraiment est répétée sous
   chaque formulaire, à l'endroit exact où il transmet ses données.

   Il est masqué par défaut et n'apparaît que si le JavaScript fonctionne :
   sans lui, le bandeau resterait affiché sans pouvoir être refermé, ce qui
   serait pire que son absence.

   ATTENTION — il ne se fie PAS à la classe « js » de <html>, contrairement au
   reste du site. Cette classe est retirée au bout de trois secondes par le
   garde-fou des apparitions au défilement, et le bandeau se serait évanoui
   avec elle. Il a donc sa propre classe, « bandeau-info--actif », posée par
   son propre code.
   ========================================================================== */

.bandeau-info { display: none; }

.bandeau-info--actif {
  display: block;
  position: fixed;
  z-index: 400;              /* au-dessus du tiroir de menu (2) et du bandeau maquette (200) */
  left: 12px;
  right: 12px;
  bottom: 12px;

  padding: 18px 20px 20px;
  border: 1px solid var(--pierre);
  border-radius: var(--r-carte);
  background: var(--blanc);
  box-shadow: 0 14px 40px rgba(46, 42, 36, 0.22);

  /* L'apparition n'anime que « opacity » et « transform » : les deux seules
     propriétés qu'un téléphone déplace sans recalculer la mise en page. */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
}

.bandeau-info--visible {
  opacity: 1;
  transform: none;
}

.bandeau-info__texte {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--encre);
}

.bandeau-info__texte a { color: var(--terre); }

.bandeau-info__bouton {
  /* Volontairement discret : ce bouton ne recueille pas un consentement,
     il referme une information. Lui donner l'allure d'un bouton d'action
     laisserait croire au visiteur qu'il accepte quelque chose. */
  padding: 10px 22px;
  border: 1px solid var(--bois);
  border-radius: var(--r-pilule);
  background: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--bois);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.bandeau-info__bouton:hover,
.bandeau-info__bouton:focus-visible {
  background: var(--bois);
  color: var(--blanc);
}

@media (prefers-reduced-motion: reduce) {
  .bandeau-info--actif { transition: none; }
}

/* Sur grand écran, le bandeau n'occupe plus toute la largeur : il se range
   dans le coin, pour ne pas barrer la page. */
@media (min-width: 901px) {
  .bandeau-info--actif {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: min(420px, calc(100vw - 48px));
    padding: 22px 24px 24px;
  }
}

/* Le tiroir de menu et le bandeau ne doivent pas se disputer le bas de
   l'écran : quand le menu s'ouvre, le bandeau s'efface le temps du choix.
   Il revient dès la fermeture — rien n'est perdu. */
body:has(.entete--ouvert) .bandeau-info {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   51. LA FENÊTRE DE DEMANDE DE RÉSERVATION
   --------------------------------------------------------------------------
   Le formulaire ne s'affiche plus dans la page : il s'ouvre par-dessus, au
   clic sur un bouton de réservation. Chaque fiche logement a le sien, déjà
   rempli du logement concerné ; la page « Nos hébergements » en a un à quatre
   choix, que le bouton cliqué présélectionne.

   L'ORDRE DE CES RÈGLES EST VOLONTAIRE, et c'est tout l'intérêt du bloc.

   Par défaut — donc SANS JAVASCRIPT — la fenêtre n'est pas une fenêtre : c'est
   un simple bloc en bas de page, et les boutons « Demander ces dates » sont de
   vraies ancres qui y mènent. Le visiteur voit le formulaire, le remplit,
   l'envoie. Rien ne dépend du script.

   Ce n'est qu'ensuite, sous « html.fenetres », que le bloc devient une fenêtre
   par-dessus la page. Cette classe est posée par le script lui-même.

   ⚠️ NE PAS UTILISER « html.js » ICI. Cette classe-là est retirée au bout de
   trois secondes par le garde-fou des apparitions au défilement : la fenêtre
   redeviendrait un bloc en pleine page, en plein milieu de la visite. Même
   piège que le bandeau d'information, section 50.
   ========================================================================== */

/* --- 51.1 Sans JavaScript : un bloc ordinaire, en bas de page ------------- */

.fenetre {
  max-width: 760px;
  margin: var(--air-petit) auto;
  padding: 0 20px;
}

/* Le fond sombre et la croix de fermeture n'ont aucun sens hors fenêtre. */
.fenetre__fond,
.fenetre__fermer { display: none; }

.fenetre__titre {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 4.4vw, 2.1rem);
  line-height: 1.1;
}

.fenetre__intro {
  margin: 0 0 24px;
  color: var(--encre-douce);
}

/* --- 51.2 Avec JavaScript : une vraie fenêtre ----------------------------- */

html.fenetres .fenetre {
  position: fixed;
  inset: 0;
  z-index: 500;               /* au-dessus du bandeau d'information (400) */
  display: flex;
  align-items: stretch;       /* sur mobile, la fenêtre occupe tout l'écran */
  justify-content: center;
  max-width: none;
  margin: 0;
  padding: 0;

  visibility: hidden;
  opacity: 0;
  transition: opacity .28s ease, visibility 0s linear .28s;
}

html.fenetres .fenetre--ouverte {
  visibility: visible;
  opacity: 1;
  transition: opacity .28s ease;
}

html.fenetres .fenetre__fond {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(30, 25, 18, 0.62);
}

/* SUR TÉLÉPHONE, LA FENÊTRE PREND TOUT L'ÉCRAN — et ce n'est pas une
   coquetterie. En boîte flottante, deux zones défilaient l'une par-dessus
   l'autre : le visiteur ne savait plus s'il faisait bouger le formulaire ou
   la page derrière. En plein écran, il n'y a plus qu'une seule chose qui
   défile, et le geste redevient évident. C'est ce que font Airbnb et Booking,
   pour cette raison-là.

   LA HAUTEUR EST EN « dvh », PAS EN « vh ». C'est toute la différence sur
   téléphone : « vh » ignore les barres du navigateur et compte la fenêtre
   comme si elles n'existaient pas. Une fenêtre en « 100vh » dépasse donc par
   le bas, et le bouton d'envoi se retrouve caché derrière la barre d'adresse.
   « dvh » suit la hauteur réellement visible.

   La variable « --fenetre-hauteur » permet au script d'aller plus loin encore
   quand le clavier s'ouvre : voir le bloc 5 de js/interactions.js. Sans
   script, la valeur de repli « 100dvh » s'applique. */
html.fenetres .fenetre__boite {
  position: relative;
  display: flex;
  flex-direction: column;     /* la barre en haut, le contenu dessous */
  width: 100%;
  height: var(--fenetre-hauteur, 100dvh);
  max-height: none;
  overflow: hidden;           /* c'est « __contenu » qui défile, pas la boîte */

  padding: 0;
  border-radius: 0;
  background: var(--blanc);
  box-shadow: none;

  /* Elle glisse depuis le bas : « transform » seul, rien d'autre à recalculer. */
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22, .61, .24, 1);
}

html.fenetres .fenetre--ouverte .fenetre__boite { transform: none; }

/* --- La barre du haut : elle ne défile jamais ----------------------------
   La croix est son seul contenu. Elle est posée hors de la zone qui défile,
   donc elle reste à l'écran quel que soit l'endroit du formulaire où l'on se
   trouve. Sans cela, un visiteur arrivé en bas d'un long formulaire n'a plus
   aucun moyen visible de sortir. */
html.fenetres .fenetre__barre {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--trait);
  background: var(--blanc);
}

/* --- La zone qui défile --------------------------------------------------
   « flex: 1 » lui donne toute la hauteur restante, et pas un pixel de plus :
   c'est ce qui garantit que le bas du formulaire est atteignable.

   Le rembourrage du bas ajoute « safe-area-inset-bottom », la hauteur de la
   barre d'accueil des iPhone récents. Sans lui, le bouton d'envoi se glisse
   dessous et devient très difficile à toucher. */
html.fenetres .fenetre__contenu {
  flex: 1 1 auto;
  min-height: 0;              /* sans quoi un enfant long refuse de rétrécir */
  overflow-y: auto;
  overscroll-behavior: contain;   /* le défilement ne « traverse » pas vers la page */
  -webkit-overflow-scrolling: touch;
  padding: 22px 20px calc(32px + env(safe-area-inset-bottom, 0px));
}

html.fenetres .fenetre__fermer {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  border: 1px solid var(--pierre);
  border-radius: 50%;
  background: var(--blanc);
  font-size: 17px;
  line-height: 1;
  color: var(--encre);
  cursor: pointer;
  transition: background-color .2s ease;
}

html.fenetres .fenetre__fermer:hover,
html.fenetres .fenetre__fermer:focus-visible { background: var(--sable); }

/* Sur téléphone la croix est dans sa barre, au-dessus : le titre n'a plus
   personne à éviter et récupère toute la largeur. Sur grand écran, où elle
   reste posée dans le coin, le décalage revient — voir 51.3. */
html.fenetres .fenetre__titre { padding-right: 0; }

/* PENDANT QU'UNE FENÊTRE EST OUVERTE, LA PAGE DESSOUS NE DÉFILE PLUS.

   ⚠️ Ce blocage n'est plus fait ici. Il l'était par « overflow: hidden », qui
   a un défaut connu sur téléphone : il empêche bien de défiler, mais iOS
   oublie où l'on était et ramène la page tout en haut à la fermeture. Le
   visiteur qui refermait le formulaire se retrouvait au début de la fiche,
   loin de l'endroit qu'il regardait.

   Le blocage se fait donc dans js/interactions.js, bloc 5, qui note la
   position avant de figer la page et la rend exactement à la fermeture. */

@media (prefers-reduced-motion: reduce) {
  html.fenetres .fenetre,
  html.fenetres .fenetre__boite { transition: none; }
}

/* --- 51.3 Grand écran : la fenêtre se centre ------------------------------ */

@media (min-width: 901px) {
  html.fenetres .fenetre { align-items: center; }

  /* LES DEUX ENVELOPPES S'EFFACENT. « display: contents » retire une boîte de
     la mise en page sans la retirer du HTML : ses enfants deviennent enfants
     de la boîte. Le grand écran retrouve donc exactement la structure qu'il
     avait avant le plein écran mobile — un panneau qui défile d'un bloc, avec
     la croix posée dans son coin.

     C'est volontaire : le plein écran répond à un problème de téléphone. Sur
     un écran d'ordinateur, une fenêtre centrée reste la bonne réponse, et le
     bureau ne devait pas bouger d'un pixel. */
  html.fenetres .fenetre__barre,
  html.fenetres .fenetre__contenu { display: contents; }

  html.fenetres .fenetre__fermer {
    position: absolute;
    top: 14px;
    right: 14px;
  }

  html.fenetres .fenetre__titre { padding-right: 52px; }

  html.fenetres .fenetre__boite {
    display: block;
    width: min(720px, calc(100vw - 64px));
    height: auto;
    max-height: 88svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 34px 40px 40px;
    border-radius: var(--r-carte);
    box-shadow: 0 24px 70px rgba(46, 42, 36, 0.32);
    transform: translateY(24px);
  }

  html.fenetres .fenetre--ouverte .fenetre__boite { transform: none; }
}

/* --- 51.4 Les boutons des cartes ------------------------------------------
   Sur « Nos hébergements », chaque carte porte deux boutons au lieu d'un :
   la fiche, et la demande de dates. Ils ne doivent pas déborder de la carte
   sur petit écran. */

.prix-action { flex-wrap: wrap; }
.prix-action .bouton { white-space: nowrap; }

/* Le bandeau d'information s'efface pendant qu'une fenêtre est ouverte : deux
   panneaux blancs superposés, c'est une image confuse. Il revient à la
   fermeture, tant que le visiteur ne l'a pas lu. */
html.fenetres:has(.fenetre--ouverte) .bandeau-info {
  opacity: 0;
  pointer-events: none;
}

/* Sur les cartes de « Nos hébergements », le prix va avec l'action principale
   — demander ces dates — et le lien vers la fiche passe en dessous, discret.
   Deux pastilles côte à côte se disputaient l'attention et débordaient de la
   carte sur petit écran. */
.carte__apres {
  margin: 14px 0 0;
  font-size: 15px;
}

.carte__apres a {
  color: var(--terre);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 95, 59, 0.35);
  padding-bottom: 2px;
}

.carte__apres a:hover { border-bottom-color: var(--terre); }

/* --- 51.5 Le logement concerné, bien en vue dans la fenêtre ---------------
   Le visiteur qui a cliqué sur la carte de la Tente safari doit lire « La
   Tente safari » dans la fenêtre. Sans cela, il se demande s'il ne s'est pas
   trompé de bouton, et une demande partie pour le mauvais logement coûte deux
   allers-retours de courriel. */
.fenetre__logement {
  margin: 0 0 10px;
  font-family: var(--titre);
  font-size: clamp(1.15rem, 3.4vw, 1.35rem);
  font-weight: 600;
  color: var(--terre);
}

/* Le bloc du petit-déjeuner : même boîte que l'option payante, mais plus
   discrète — ce n'est pas un supplément, c'est un rappel de ce qui est
   compris. */
.formulaire__option--clair {
  background: transparent;
  border: 1px solid var(--pierre);
}

/* Le petit-déjeuner disparaît quand le gîte est choisi : il n'y est pas
   compris. « hidden » suffit, encore faut-il que rien ne le contredise —
   « .formulaire__option » pose un « display », qui l'emporterait. */
.formulaire__option[hidden] { display: none; }

/* ==========================================================================
   52. LE TABLEAU DES DONNÉES PERSONNELLES — largeur fixe
   --------------------------------------------------------------------------
   Trois colonnes de texte long dans une colonne de lecture de 720 px : avec
   l'algorithme par défaut du navigateur, le tableau réclamait 1554 px et
   sortait de la page. Le navigateur ne rétrécit pas une cellule sous la
   largeur de son plus long mot ; il élargit le tableau, quitte à déborder.

   « table-layout: fixed » inverse la règle : les colonnes prennent la part
   qu'on leur donne, et le texte va à la ligne. C'est la seule façon de tenir
   dans une largeur imposée.

   Sur petit écran, trois colonnes dans 335 px donneraient des cellules de
   quatre mots. On leur rend donc une largeur minimale, et le cadre
   « .tableau-large » les fait défiler horizontalement — comportement déjà
   retenu pour les autres tableaux des pages légales.
   ========================================================================== */

.distances--fixe {
  table-layout: fixed;
}

.distances--fixe th,
.distances--fixe td {
  /* Sans cela, une adresse électronique ou un mot long dépasserait de sa
     colonne au lieu d'être coupé. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ⚠️ LA RÈGLE QUI CASSAIT TOUT, et qu'il faut neutraliser ici.

   « .distances td:last-child » impose « white-space: nowrap » et un
   alignement à droite. C'est juste pour les tableaux d'origine — une colonne
   de temps de trajet, « 16 min · 15 km », ne doit pas se couper en deux.

   Mais dans un tableau de PHRASES, « nowrap » l'emporte sur « table-layout:
   fixed » : le texte refuse d'aller à la ligne, la colonne s'élargit sans
   limite, et la troisième colonne sortait du cadre. Le tableau paraissait
   coupé net à droite.

   On rend donc à cette colonne le droit de revenir à la ligne, et
   l'alignement à gauche des deux autres. */
.distances--fixe td:last-child {
  white-space: normal;
  text-align: left;
}

.distances--fixe th:first-child,
.distances--fixe td:first-child { width: 26%; }

@media (max-width: 900px) {
  /* ⚠️ SECONDE RÈGLE À NEUTRALISER, et la plus sournoise des deux.

     Sous 900 px, « .distances » passe en « display: block » avec
     « white-space: nowrap » : c'est une vieille parade pour faire défiler un
     tableau trop large. Mais un tableau en « display: block » n'est plus un
     tableau — « table-layout: fixed » ne s'applique plus du tout, et les
     cellules s'étalent sur une seule ligne.

     Résultat observé : la première colonne prenait 357 px, la deuxième 804,
     et le tableau demandait 1258 px. On lui rend donc sa nature de tableau.
     Le défilement, lui, est déjà assuré par le cadre « .tableau-large ». */
  .distances--fixe {
    display: table;
    white-space: normal;
    overflow-x: visible;
    min-width: 560px;
  }
}

/* --- 52.1 Le gîte a deux tarifs, il lui faut deux lignes ------------------
   « dès 85 € » laissait croire à un prix unique : le visiteur découvrait les
   120 € du week-end au moment de réserver, ce qui est le pire moment. Les deux
   tarifs s'affichent donc ensemble, de la même taille — aucun des deux n'est
   une note de bas de page. */
.prix--double {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.prix__ligne {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.prix--double strong { font-size: 22px; }

/* ==========================================================================
   53. LA CARTE D'ACCÈS
   --------------------------------------------------------------------------
   La carte Google s'affiche dès l'ouverture de la page — décision du client
   du 12 août 2026. Ce bloc ne fait que lui donner la même hauteur et les
   mêmes coins arrondis que la photo qu'elle remplace, pour que la grille
   « .duo » ne bouge pas.

   Le dispositif précédent chargeait la carte au clic, pour ne rien envoyer à
   Google sans demande. Son code a été retiré ; la marche à suivre pour le
   rétablir est dans CLAUDE.md.
   ========================================================================== */

.carte-acces {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.carte-acces iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-douce);
}

.carte-acces__liens {
  margin: 0;
  font-size: 14.5px;
  color: var(--encre-douce);
}

.carte-acces__liens a { color: var(--terre); }


/* ==========================================================================
   54. LES AVIS RÉELS — plusieurs paragraphes, et une provenance
   --------------------------------------------------------------------------
   Le style d'origine visait une citation d'une ou deux lignes, en 19 px.
   Les vrais avis font quatre paragraphes : à cette taille, un seul remplissait
   un écran entier. On les descend d'un cran, et on rend leurs paragraphes
   respirables.

   La provenance est en dessous du prénom, obligatoirement : l'article
   L111-7-2 du code de la consommation impose d'indiquer d'où viennent les
   avis publiés. Ne pas la retirer pour gagner deux lignes.
   ========================================================================== */

.avis {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.avis blockquote {
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: 0;
  /* Le bloc de citation pousse la signature vers le bas : dans une grille de
     deux cartes de hauteurs différentes, les deux signatures s'alignent. */
  margin-bottom: auto;
}

.avis blockquote p { margin: 0 0 14px; }
.avis blockquote p:last-child { margin-bottom: 0; }

.avis figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
}

.avis figcaption strong {
  font-family: var(--titre);
  font-size: 17px;
  font-weight: 600;
  color: var(--encre);
}

.avis figcaption span {
  font-size: 13px;
  color: var(--encre-douce);
}

@media (min-width: 901px) {
  .avis { padding: 38px 40px; }
  .avis blockquote { font-size: 18px; }
}

/* --- 54.1 Un logement pas encore ouvert à la réservation ------------------
   Le Luxury Circus est décrit sur le site, mais on ne peut pas le demander.
   Plutôt qu'un bouton grisé — qu'on essaie de cliquer, puis qu'on trouve
   cassé — on remplace le bouton par une mention, et on offre une porte de
   sortie : nous écrire. */
.reservation__attente {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--r-carte);
  background: var(--sable);
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre);
}

.prix-action__attente {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border: 1px dashed var(--bois);
  border-radius: var(--r-pilule);
  font-size: 15px;
  color: var(--encre-douce);
}

/* ==========================================================================
   55. LES FENÊTRES DE COORDONNÉES — page Contact
   --------------------------------------------------------------------------
   Deux petites fenêtres, une par coordonnée. Elles affichent la valeur en
   clair, avec un bouton pour la copier et un pour déclencher l'action.

   La différence avec la fenêtre de réservation (section 51) : celle-ci est
   masquée par l'attribut HTML « hidden », pas par le CSS. Sans JavaScript,
   « hidden » suffit à la garder invisible, et les deux liens d'origine
   fonctionnent normalement. Rien n'est perdu, rien ne se voit.
   ========================================================================== */

.coord[hidden] { display: none; }

.coord {
  position: fixed;
  inset: 0;
  z-index: 520;               /* au-dessus de la fenêtre de demande (500) */
  display: flex;
  align-items: flex-end;      /* sur mobile, elle monte du bas */
  justify-content: center;
}

.coord__fond {
  position: absolute;
  inset: 0;
  background: rgba(30, 25, 18, 0.62);
}

.coord__boite {
  position: relative;
  width: 100%;
  padding: 30px 22px 26px;
  border-radius: var(--r-carte) var(--r-carte) 0 0;
  background: var(--blanc);
  box-shadow: 0 -12px 44px rgba(46, 42, 36, 0.28);
  text-align: center;
}

.coord__fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--pierre);
  border-radius: 50%;
  background: var(--blanc);
  font-size: 16px;
  line-height: 1;
  color: var(--encre);
  cursor: pointer;
}

.coord__fermer:hover,
.coord__fermer:focus-visible { background: var(--sable); }

.coord__label {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* La coordonnée elle-même : c'est ce qu'on est venu chercher, elle doit se
   lire de loin et se sélectionner d'un geste. */
.coord__valeur {
  margin: 0 0 8px;
  font-family: var(--titre);
  font-size: clamp(1.25rem, 5.5vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  word-break: break-word;
  user-select: all;
}

.coord__valeur a { color: var(--encre); text-decoration: none; }

.coord__note {
  margin: 0 0 22px;
  font-size: 14.5px;
  color: var(--encre-douce);
}

.coord__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coord__actions .bouton { width: 100%; }

/* Le retour du bouton « copier » : la même largeur, pour que rien ne saute. */
.coord__copier[data-copie] { border-color: var(--vert-fonce); color: var(--vert-fonce); }

@media (min-width: 901px) {
  .coord { align-items: center; }

  .coord__boite {
    width: min(440px, calc(100vw - 64px));
    padding: 38px 40px 34px;
    border-radius: var(--r-carte);
    box-shadow: 0 24px 70px rgba(46, 42, 36, 0.32);
  }

  .coord__actions { flex-direction: row; }
  .coord__actions .bouton { width: auto; flex: 1; }
}

/* --- 55.1 La ligne d'aide sous le champ « Personnes » ---------------------
   Le champ ramène la valeur au maximum du logement dès qu'on dépasse. Sans
   explication, le visiteur voit son chiffre changer tout seul et croit à un
   bogue : cette ligne dit la règle avant qu'il ne la rencontre.

   Elle est visible en permanence, pas seulement en cas de dépassement — un
   message qui prévient vaut mieux qu'un message qui corrige. Elle passe en
   terre cuite le temps de signaler que la valeur vient d'être ramenée. */
.champ__aide {
  font-size: 13px;
  line-height: 1.4;
  color: var(--encre-douce);
  transition: color .2s ease;
}

.champ__aide:empty { display: none; }

.champ__aide[data-alerte] {
  color: var(--terre);
  font-weight: 600;
}