/* ============================================================
   Gîtes du Finet — feuille de style principale
   Design tokens, layout, composants
   ============================================================ */

/* -------- Reset & bases ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* -------- Design tokens ----------------------------------- */
:root {
  --cream:        #F8F4ED;
  --cream-soft:   #F2EBDE;
  --cream-dark:   #E8DFCC;
  --forest:       #1F3A2F;
  --forest-soft:  #2D4F40;
  --moss:         #5C7A5E;
  --moss-soft:    #8AA98C;   /* décoratif : traits, fonds, icônes */
  /* Variantes destinées au TEXTE. Les couleurs décoratives ci-dessus n'offrent
     pas un contraste suffisant une fois posées sur du crème : « 4–6 pers. » ou
     « / nuit » tombaient à 2,4:1, loin des 4,5:1 attendus. Ces deux teintes
     conservent le même vert tout en restant lisibles sur tous nos fonds. */
  --moss-texte:      #4E6A50;   /* 5,5:1 sur crème — intitulés, accroches */
  --moss-texte-doux: #59765B;   /* 4,6:1 sur crème — mentions secondaires */
  --ochre:        #C7903E;   /* décoratif : bandeaux, boutons, accents */
  /* Variante lisible de l'ocre. Sur crème, la teinte décorative ne donne que
     2,6:1 : les intitulés « Le journal du domaine » ou « Espace détente » y
     étaient à la limite du déchiffrable. */
  --ochre-texte:  #8A5F1C;   /* 5,1:1 sur crème */
  --ochre-soft:   #E0AC58;
  --ink:          #1A1F1B;
  --ink-soft:     #4A554C;
  /* Texte secondaire. L'ancienne teinte #8A938A n'offrait que 2,4:1 sur nos
     fonds crème, très en deçà des 4,5:1 attendus : les mentions « 4–6 pers. »,
     « / nuit » ou les descriptions d'écran étaient difficiles à lire. */
  --ink-mute:     #5F6E60;   /* 4,9:1 sur crème, 5,4:1 sur blanc */
  --line:         rgba(31, 58, 47, 0.12);
  --line-strong:  rgba(31, 58, 47, 0.25);
  --danger:       #B23A3A;
  --warn:         #C7903E;
  --success:      #4A7A4D;

  --radius:       14px;
  --radius-lg:    24px;
  --shadow-sm:    0 2px 8px rgba(31, 58, 47, 0.06);
  --shadow-md:    0 8px 24px rgba(31, 58, 47, 0.10);
  --shadow-lg:    0 20px 50px rgba(31, 58, 47, 0.15);

  --container:    1240px;
  --gutter:       clamp(1rem, 3vw, 2rem);

  --font-serif:   'Fraunces', Georgia, serif;
  --font-sans:    'Manrope', system-ui, -apple-system, sans-serif;

  /* ============================================================
     ÉCHELLE — jetons de design (2.54.0)
     ============================================================
     Les valeurs d'espacement, de rayon et de taille avaient dérivé au fil des
     versions : trente-cinq espacements distincts, treize rayons. Rien ne
     cassait, mais une interface soignée repose sur une échelle restreinte et
     répétée — c'est ce qui donne l'impression d'un ensemble, plutôt que d'une
     accumulation.

     TOUT NOUVEAU STYLE DOIT PUISER DANS CES JETONS.
     Une valeur hors échelle doit être justifiée par un commentaire. */

  /* Espacements — huit pas suffisent à tout le site. */
  --e-1:  0.25rem;   /*  4px  — interstice entre une icône et son texte     */
  --e-2:  0.5rem;    /*  8px  — écart entre éléments d'un même groupe       */
  --e-3:  0.75rem;   /* 12px  — respiration interne d'un bouton, d'un champ */
  --e-4:  1rem;      /* 16px  — écart standard entre blocs                  */
  --e-5:  1.5rem;    /* 24px  — marge intérieure d'une carte                */
  --e-6:  2rem;      /* 32px  — séparation entre sections d'un écran        */
  --e-7:  3rem;      /* 48px  — respiration entre grandes sections          */
  --e-8:  4rem;      /* 64px  — marges de page                              */

  /* Rayons — trois usages, trois valeurs. */
  --r-petit:  6px;    /* étiquettes, petits boutons          */
  --r-moyen:  12px;   /* cartes, champs de saisie, fenêtres  */
  --r-rond:   999px;  /* pastilles et boutons arrondis       */

  /* Tailles de texte — de la mention discrète au grand titre. */
  --t-mention: 0.75rem;   /* 12px */
  --t-petit:   0.85rem;   /* 13.6px */
  --t-normal:  1rem;      /* 16px — jamais moins pour un champ de saisie */
  --t-grand:   1.25rem;
  --t-titre:   1.75rem;
  --t-heros:   clamp(2.2rem, 5vw, 3.5rem);
}

/* -------- Typo -------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--forest);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 400; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 400; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
h4 { font-size: 1.15rem; }
p  { color: var(--ink-soft); }
.lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--ink-soft); }
.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--moss-texte);
}

/* -------- Layout helpers ---------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(3rem, 8vw, 6rem); }
.grid { display: grid; gap: var(--gutter); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* BUG 1 — La fiche gîte garde TOUJOURS la taille du mode « 3 par ligne », quel que soit
   le nombre affiché par un filtre (1, 2 ou 3+). On passe la grille des gîtes en
   `auto-fill` (au lieu de `auto-fit`) : les pistes vides sont conservées, donc une carte
   seule occupe une piste de la largeur habituelle au lieu de s'étirer sur tout l'écran.
   Le nombre de colonnes et la taille des cartes restent identiques au mode complet.
   La version mobile (colonne pleine largeur, < 761 px) n'est pas touchée. */
@media (min-width: 761px) {
  #gitesGrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.stack > * + * { margin-top: 1rem; }
.center-text { text-align: center; }

.section-header {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-header h2 { margin: 0.5rem 0 1rem; }

/* -------- Bouton ------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--forest);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--forest-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: var(--cream);
  color: var(--forest);
  border-color: var(--forest);
}
.btn-secondary:hover {
  background: var(--forest);
  color: var(--cream);
}
.btn-ghost {
  background: transparent;
  color: var(--forest);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--cream-soft); }
.btn-ochre {
  background: var(--ochre);
  color: white;
}
.btn-ochre:hover { background: var(--ochre-soft); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { opacity: 0.9; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* -------- Top bar ----------------------------------------- */
.top-bar {
  background: var(--forest);
  color: var(--cream);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}
.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.top-bar a { color: var(--cream); opacity: 0.9; }
.top-bar a:hover { opacity: 1; }
.top-bar-info { display: flex; gap: 1.5rem; align-items: center; }
.top-bar-info span { display: inline-flex; align-items: center; gap: 0.4rem; }
@media (max-width: 700px) {
  .top-bar-info { gap: 1rem; font-size: 0.78rem; }
}

/* -------- Nav --------------------------------------------- */
.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 244, 237, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0;
  transition: all 0.3s ease;
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--forest);
  font-weight: 500;
}
.nav-logo-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--forest);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.nav-logo-mark svg {
  width: 32px;
  height: 32px;
  display: block;
}
.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}
/* Sur écrans intermédiaires (tablette large / petit laptop), la barre horizontale
   peut être serrée selon la langue (les libellés ES/EN sont plus longs). On réduit
   l'espacement pour que tous les onglets tiennent sans déborder. */
@media (min-width: 961px) and (max-width: 1120px) {
  .nav-links { gap: 1.15rem; }
  .nav-links a { font-size: 0.9rem; }
}
.nav-links a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  position: relative;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--moss-texte); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--moss);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--forest);
  position: relative;
  transition: all 0.3s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--forest);
  transition: all 0.3s;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  /* Le backdrop-filter de .nav crée un contexte qui « casse » le
     position:fixed du menu (le menu se positionnait par rapport à la barre
     et laissait voir la page derrière). On le neutralise sur mobile et on
     rend la barre opaque : le menu plein écran fonctionne alors correctement. */
  .nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--cream);
  }
  .nav-toggle { display: flex; position: relative; z-index: 210; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--cream);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    font-size: 1.4rem;
    transform: translateX(100%);
    /* Le menu replié était seulement déplacé hors de l'écran : ses liens
       restaient atteignables au clavier et lus par les lecteurs d'écran, ce qui
       envoyait le visiteur naviguer dans le vide. « visibility: hidden » les
       retire de l'ordre de tabulation dans tous les navigateurs, sans casser
       l'animation puisque la propriété est transitionnée elle aussi. */
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.6, 0.05, 0.3, 0.95),
                visibility 0s linear 0.4s;
    z-index: 200;
  }
  .nav-links.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.6, 0.05, 0.3, 0.95),
                visibility 0s linear 0s;
  }
}

/* -------- Hero -------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(540px, 85vh, 800px);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-image, url('https://images.unsplash.com/photo-1551632811-561732d1e306?w=2000&auto=format&fit=crop'));
  background-size: cover;
  background-position: center;
  animation: kenburns 25s ease-in-out infinite alternate;
  z-index: -2;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 58, 47, 0.45) 0%, rgba(31, 58, 47, 0.7) 100%);
  z-index: -1;
}
@keyframes kenburns {
  0% { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.12) translate(-1%, -2%); }
}
.hero-content {
  max-width: 820px;
  padding: 2rem var(--gutter);
  position: relative;
  z-index: 1; /* toujours au-dessus des couches image (::before, rotation) et du dégradé */
}
.hero-eyebrow {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero h1 {
  color: var(--cream);
  margin-bottom: 1.25rem;
  font-weight: 400;
  font-style: italic;
}
.hero p.lead { color: rgba(255,255,255,0.92); margin-bottom: 2rem; max-width: 620px; margin-inline: auto; }
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-actions .btn-primary {
  background: var(--cream);
  color: var(--forest);
}
.hero-actions .btn-primary:hover { background: white; }
.hero-actions .btn-secondary {
  background: transparent;
  color: var(--cream);
  border-color: rgba(255,255,255,0.4);
}
.hero-actions .btn-secondary:hover {
  background: var(--cream);
  color: var(--forest);
  border-color: var(--cream);
}
.hero-scroll {
  position: absolute;
  /* Placé au-dessus des pastilles de navigation, dont la zone de clic mesure
     44 px de haut : à 2 rem, le texte se retrouvait recouvert par les ronds. */
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--cream);
  opacity: 0.7;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -10px); }
}

/* -------- Carte gîte -------------------------------------- */
.gite-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.gite-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.gite-card-media {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--cream-soft);
}
.gite-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.gite-card:hover .gite-card-media img { transform: scale(1.08); }
.gite-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--cream);
  color: var(--forest);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.gite-card-body {
  padding: 1.5rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.gite-card-body h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.gite-card-body h3 span:last-child {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink-mute);
  font-weight: 600;
  white-space: nowrap;
}
.gite-card-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--moss-texte);
  margin-bottom: 0.75rem;
  font-size: 1rem;
}
.gite-card-desc {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}
.gite-card-meta {
  display: flex;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.gite-card-meta span { display: flex; align-items: center; gap: 0.35rem; }
.gite-card-price {
  margin-top: 1rem;
  font-family: var(--font-serif);
  color: var(--forest);
}
.gite-card-price strong { font-size: 1.5rem; font-weight: 500; }
.gite-card-price small { font-size: 0.85rem; color: var(--ink-mute); }

/* -------- Filtres ----------------------------------------- */
.filter-bar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.filter-chip {
  padding: 0.5rem 1.25rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--moss-texte); color: var(--forest); }
.filter-chip.is-active {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}

/* -------- Section "story" --------------------------------- */
.story {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.story-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--cream-soft);
}
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story-stat {
  position: absolute;
  bottom: -1.5rem;
  right: -1rem;
  background: var(--forest);
  color: var(--cream);
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.story-stat strong {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  display: block;
  line-height: 1;
}
.story-stat span { font-size: 0.85rem; opacity: 0.9; }
.story-content .eyebrow { margin-bottom: 1rem; }
.story-content h2 { margin-bottom: 1.5rem; }
.story-content p { margin-bottom: 1rem; }
.story-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.story-feature { display: flex; gap: 0.75rem; align-items: flex-start; }
.story-feature .icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--cream-soft);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--moss-texte);
}
.story-feature strong { display: block; color: var(--forest); font-size: 0.95rem; }
.story-feature small { color: var(--ink-soft); font-size: 0.82rem; }
@media (max-width: 880px) {
  .story { grid-template-columns: 1fr; }
}

/* -------- Espace détente ---------------------------------- */
.spa {
  background: var(--forest);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.spa::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--spa-bg, url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Mont_Aiguille_-_2014-07-19.jpg/1280px-Mont_Aiguille_-_2014-07-19.jpg'));
  background-size: cover;
  background-position: center;
  opacity: 0.20;
  z-index: 0;
}
.spa .container { position: relative; z-index: 1; }
.spa h2 { color: var(--cream); }
.spa .eyebrow { color: var(--ochre-soft); }
.spa-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: center;
}
.spa-content p { color: rgba(248, 244, 237, 0.85); margin-bottom: 1rem; }
.spa-price {
  background: rgba(248, 244, 237, 0.08);
  border: 1px solid rgba(248, 244, 237, 0.15);
  padding: 2rem;
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.spa-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(248, 244, 237, 0.12);
}
.spa-price-row:last-child { border-bottom: 0; }
.spa-price-row span { color: rgba(248, 244, 237, 0.8); font-size: 0.95rem; }
.spa-price-row strong { font-family: var(--font-serif); font-size: 1.3rem; color: var(--cream); }
@media (max-width: 880px) {
  .spa-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* -------- Section Trièves --------------------------------- */
.region {
  background: var(--cream-soft);
}
.region-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.region-card .icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--cream-soft);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--moss-texte);
}
.region-card h4 { margin-bottom: 0.25rem; color: var(--forest); }
.region-card p { font-size: 0.9rem; }

/* -------- Activités --------------------------------------- */
.activities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
.activity-card {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: white;
  isolation: isolate;
  background: var(--forest, #1F3A2F); /* repli sombre si la photo ne charge pas */
}
.activity-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s;
  z-index: -2;
}
.activity-card::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Voile plus soutenu, couvrant toute la carte, pour garantir la lisibilité du
     texte quelle que soit la clarté de la photo. */
  background: linear-gradient(180deg, rgba(31, 58, 47, 0.35) 0%, rgba(31, 58, 47, 0.55) 45%, rgba(31, 58, 47, 0.92) 100%);
  z-index: -1;
}
.activity-card:hover::before { transform: scale(1.05); }
.activity-card.summer::before {
  background-image: url('https://images.unsplash.com/photo-1551632811-561732d1e306?w=1200&auto=format&fit=crop');
}
.activity-card.winter::before {
  background-image: url('https://images.unsplash.com/photo-1551524559-8af4e6624178?w=1200&auto=format&fit=crop');
}
.activity-card h3 {
  color: #fff;
  font-style: italic;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.activity-card .eyebrow { text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
.activity-card p { color: rgba(255,255,255,0.95); font-size: 0.95rem; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
@media (max-width: 720px) {
  .activities-grid { grid-template-columns: 1fr; }
}

/* -------- Avis -------------------------------------------- */
.reviews { background: var(--cream-soft); }
.reviews-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.review-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.review-rating {
  color: var(--ochre-texte);
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}
.review-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--forest);
  margin-bottom: 0.5rem;
}
.review-content {
  font-size: 0.95rem;
  color: var(--ink-soft);
  flex-grow: 1;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.review-meta {
  font-size: 0.82rem;
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-meta strong { color: var(--forest); font-weight: 600; }
.review-gite-tag {
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  background: var(--cream-soft);
  border-radius: 999px;
  color: var(--moss-texte);
  font-weight: 600;
}

/* -------- Formulaire (réservation, avis, etc.) ------------ */
.form-container {
  background: white;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 760px;
  margin-inline: auto;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--forest);
}
.form-group .required { color: var(--danger); }
.form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: white;
  font-size: 0.95rem;
  color: var(--ink);
  transition: all 0.2s;
}
.form-control:focus {
  outline: none;
  border-color: var(--moss-texte);
  box-shadow: 0 0 0 3px rgba(92, 122, 94, 0.15);
}
textarea.form-control { min-height: 120px; resize: vertical; font-family: inherit; }
.form-help { font-size: 0.82rem; color: var(--ink-mute); margin-top: 0.25rem; }

/* -------- Contact & carte --------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: stretch;
}
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-info { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contact-item .icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream-soft);
  display: grid; place-items: center;
  color: var(--moss-texte);
}
.contact-item strong {
  display: block;
  color: var(--forest);
  margin-bottom: 0.25rem;
}
.contact-item a { color: var(--moss-texte); font-weight: 600; }
.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 380px;
}
.contact-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }

/* -------- FAQ --------------------------------------------- */
.faq { background: var(--cream-soft); }
.faq-list { max-width: 800px; margin: 2rem auto 0; }
.faq-item {
  background: white;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  color: var(--forest);
  font-size: 1rem;
  cursor: pointer;
}
.faq-question .chevron {
  transition: transform 0.3s;
  color: var(--moss-texte);
}
.faq-item.is-open .faq-question .chevron { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-answer-inner {
  padding: 0 1.4rem 1.4rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* -------- Footer ------------------------------------------ */
.footer {
  background: var(--forest);
  color: var(--cream);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer h2 {
  color: var(--cream);
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.footer p, .footer a, .footer li {
  color: rgba(248, 244, 237, 0.75);
  font-size: 0.9rem;
}
.footer a:hover { color: var(--cream); }
.footer ul li { margin-bottom: 0.6rem; }
.footer-bottom {
  border-top: 1px solid rgba(248, 244, 237, 0.15);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(248, 244, 237, 0.6);
}
.footer-bottom a { color: rgba(248, 244, 237, 0.7); }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* -------- Modal (fiche détaillée) ------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 58, 47, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  overflow-y: auto;
}
.modal-overlay.is-open { display: flex; }
.modal {
  background: var(--cream);
  border-radius: var(--radius-lg);
  max-width: 1080px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: grid; place-items: center;
  z-index: 10;
  font-size: 1.4rem;
  color: var(--forest);
  box-shadow: var(--shadow-sm);
}
.modal-close:hover { background: white; transform: scale(1.05); }

.modal-hero {
  position: relative;
  aspect-ratio: 21/9;
  overflow: hidden;
  background: var(--cream-dark);
}
.modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.modal-hero-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(180deg, transparent 0%, rgba(31, 58, 47, 0.85) 100%);
  color: white;
}
.modal-hero-info h2 { color: white; margin-bottom: 0.25rem; }
.modal-hero-info p { color: rgba(255,255,255,0.9); font-style: italic; font-family: var(--font-serif); }
/* BUG-MOBILE-GITE — Sur mobile, le hero en 21/9 est trop court : le bandeau titre
   (nom + accroche + labels) débordait vers le haut et était rogné par overflow:hidden.
   On fait passer le bandeau EN FLUX sous l'image → plus aucun rognage possible. */
@media (max-width: 760px) {
  .modal-hero { aspect-ratio: auto; overflow: visible; }
  .modal-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
  .modal-hero-info {
    position: static;
    background: var(--forest, #1F3A2F);
    padding: 1.1rem 1.25rem 1.25rem;
  }
  .modal-hero-info h2 { font-size: 1.6rem; }
}

.modal-body { padding: clamp(1.5rem, 3vw, 2.5rem); }
.modal-section { margin-bottom: 2rem; }
.modal-section h3 { color: var(--forest); margin-bottom: 1rem; font-size: 1.3rem; }
.modal-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: white;
  border-radius: var(--radius);
}
.modal-meta-item { text-align: center; }
.modal-meta-item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--forest);
  margin-bottom: 0.25rem;
}
.modal-meta-item span { font-size: 0.82rem; color: var(--ink-mute); }

.modal-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.modal-gallery img {
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.3s;
}
.modal-gallery img:hover { transform: scale(1.03); }

.modal-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem 1.5rem;
}
.modal-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding: 0.25rem 0;
}
.modal-list li::before {
  content: '✓';
  color: var(--moss-texte);
  font-weight: 700;
  flex-shrink: 0;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
}
.pricing-table th, .pricing-table td {
  padding: 0.9rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.pricing-table th {
  background: var(--cream-soft);
  font-weight: 600;
  color: var(--forest);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pricing-table td { font-size: 0.95rem; }
.pricing-table td:last-child { font-family: var(--font-serif); color: var(--forest); font-weight: 500; }

/* -------- Calendrier -------------------------------------- */
.calendar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 600px) { .calendar { grid-template-columns: 1fr; } }
.calendar-month {
  background: white;
  border-radius: var(--radius);
  padding: 1.25rem;
}
.calendar-month-title {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--forest);
  margin-bottom: 1rem;
  text-transform: capitalize;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar-day-name {
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink-mute);
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.25rem 0;
}
.calendar-day {
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  border-radius: 6px;
  color: var(--ink);
}
.calendar-day.is-empty { background: transparent; }
.calendar-day.is-booked {
  background: rgba(178, 58, 58, 0.18);
  color: var(--danger);
  text-decoration: line-through;
  font-weight: 600;
}
/* Fermeture/blocage décidé par le loueur : gris neutre « indisponible », visuellement
   distinct d'une réservation client (rouge). */
.calendar-day.is-closed {
  background: rgba(120, 120, 120, 0.16);
  color: #6a6a6a;
  text-decoration: line-through;
  font-weight: 600;
}
.calendar-day.is-available { color: var(--moss-texte); font-weight: 600; }
.calendar-day.is-today { outline: 2px solid var(--ochre); }
.calendar-legend {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.calendar-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.calendar-legend .swatch { width: 14px; height: 14px; border-radius: 6px; }
.calendar-legend .swatch.available { background: rgba(92, 122, 94, 0.25); }
.calendar-legend .swatch.booked { background: rgba(178, 58, 58, 0.25); }

/* -------- Lightbox ---------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.93);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 2rem;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 95vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;              /* supprime l'espace sous l'image en ligne */
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  width: 50px; height: 50px;
  background: rgba(255,255,255,0.15);
  color: white;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.2rem;
  transition: background 0.2s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.3); }
.lightbox-close { top: 2rem; right: 2rem; }
.lightbox-prev { left: 2rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 2rem; top: 50%; transform: translateY(-50%); }
.lightbox-counter {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 0.9rem;
  background: rgba(0,0,0,0.5);
  padding: 0.4rem 1rem;
  border-radius: 999px;
}

/* -------- Toast ------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}
.toast {
  background: var(--forest);
  color: var(--cream);
  padding: 1rem 1.4rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 260px;
  max-width: 380px;
  font-size: 0.92rem;
  pointer-events: auto;
  animation: slidein 0.3s ease;
}
.toast.toast-error { background: var(--danger); }
.toast.toast-success { background: var(--success); }
@keyframes slidein {
  from { transform: translateX(120%); }
  to { transform: translateX(0); }
}
@media (max-width: 600px) {
  .toast-container { bottom: 1rem; right: 1rem; left: 1rem; }
}

/* -------- Animations au scroll ---------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s cubic-bezier(0.2, 0.05, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* -------- Utilities --------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-mute { color: var(--ink-mute); }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--forest);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay {
  display: grid;
  place-items: center;
  padding: 3rem;
  color: var(--ink-mute);
}

/* -------- Icônes inline (SVG) ----------------------------- */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }

/* ============================================================
   DÉCOUVERTE DU TRIÈVES — onglets + grille de cartes
   ============================================================ */

.discover-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 2.5rem 0 2rem;
}

.discover-tab {
  background: white;
  color: var(--forest);
  border: 1.5px solid rgba(30,58,42,0.15);
  border-radius: 999px;
  padding: 0.75rem 1.6rem;
  font: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.discover-tab:hover {
  border-color: var(--forest);
  transform: translateY(-1px);
}
.discover-tab.is-active {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
  box-shadow: 0 4px 14px rgba(30,58,42,0.18);
}

.discover-panel {
  display: none;
}
.discover-panel.is-active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.discover-card {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(30,58,42,0.06);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.discover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(30,58,42,0.12);
}

.discover-card-image {
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
}
.discover-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(30,58,42,0.55) 100%);
  pointer-events: none;
}
.discover-card-image .badge {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  color: var(--forest);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.discover-card-body {
  padding: 1.4rem 1.4rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.discover-card-body h3 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  color: var(--forest);
  font-weight: 500;
}
.discover-card-body .tagline {
  color: var(--moss-texte);
  font-size: 0.88rem;
  font-style: italic;
  margin-bottom: 0.5rem;
}
.discover-card-body p {
  color: rgba(30,58,42,0.78);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
.discover-card-body .meta {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(30,58,42,0.08);
  font-size: 0.85rem;
  color: var(--moss-texte);
}
.discover-card-body .meta strong {
  color: var(--forest);
}

.discover-card.activity .discover-card-image {
  height: 160px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.discover-card.activity .discover-card-image::after { display: none; }
.discover-card.activity .icon-emoji {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
}

/* ============================================================
   CARTE D'ERREUR (serveur indisponible)
   ============================================================ */
.error-card {
  grid-column: 1 / -1;
  background: white;
  border: 2px dashed rgba(184, 92, 92, 0.4);
  border-radius: 18px;
  padding: 3rem 2rem;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.error-card h3 {
  color: #a13c3c;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem;
  margin: 0 0 1rem;
}
.error-card p {
  color: rgba(30,58,42,0.78);
  line-height: 1.7;
  margin: 0;
}
.error-card code {
  background: rgba(30,58,42,0.08);
  color: var(--forest);
  padding: 0.15em 0.5em;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* ============================================================
   AJUSTEMENTS MOBILE
   ============================================================ */
@media (max-width: 640px) {
  .discover-tabs { gap: 0.5rem; }
  .discover-tab { padding: 0.5rem 1.1rem; font-size: 0.85rem; }
  .discover-grid { grid-template-columns: 1fr; }
  .discover-card-image { height: 200px; }
}

/* ============================================================
   VIDÉOS DANS LA MODALE GÎTE
============================================================ */
.modal-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.modal-video-wrap {
  position: relative;
  background: #1f1f1f;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.modal-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* ============================================================
   SIMULATEUR DE PRIX (modale + formulaire de réservation)
============================================================ */
.price-simulator {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--cream, #FAF5E9);
  border-radius: 12px;
  border: 1px solid rgba(31, 58, 47, 0.12);
}
.price-simulator h4 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--forest, #1F3A2F);
  font-weight: 600;
}
.sim-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.sim-fields label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sim-fields span {
  font-size: 0.85rem;
  color: var(--ink-soft, #6a6a5e);
  font-weight: 500;
}
.sim-fields input[type="date"] {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(31, 58, 47, 0.2);
  border-radius: 6px;
  font-size: 0.95rem;
  background: white;
  font-family: inherit;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 430px) {
  .sim-fields { grid-template-columns: 1fr; }
}
.sim-result {
  font-size: 0.95rem;
}
.sim-summary { margin-bottom: 0.5rem; }
.sim-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(31, 58, 47, 0.08);
  color: #4a4a40;
}
.sim-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; }
.sim-total {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(31, 58, 47, 0.15);
  font-size: 1.1rem;
  color: var(--forest, #1F3A2F);
}
.sim-total small { color: var(--ink-soft, #6a6a5e); font-weight: normal; }
.sim-badge {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.sim-badge.ok { background: rgba(123, 174, 132, 0.2); color: #2D5A3D; }
.sim-badge.ko { background: rgba(196, 86, 76, 0.15); color: #8B3A30; }
.sim-err { color: #8B3A30; font-weight: 500; }

.res-price-estimate:not(:empty) {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  background: rgba(123, 174, 132, 0.08);
  border-radius: 12px;
  border-left: 4px solid #7D9B6F;
  font-size: 0.95rem;
}

/* ============================================================
   BADGES DE LABELS (modale gîte)
============================================================ */
.gite-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.75rem;
}
.gite-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 234, 214, 0.18);
  color: #F5EAD6;
  border: 1px solid rgba(245, 234, 214, 0.35);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gite-label-badge::before {
  content: '★';
  color: #E0BC7E;
  font-size: 0.8rem;
}

/* ============================================================
   BANNIÈRE PROMO PUBLIQUE
============================================================ */
.promo-banner {
  background: linear-gradient(135deg, #C9A76F 0%, #E0BC7E 50%, #C9A76F 100%);
  color: #1F3A2F;
  padding: 12px 20px;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(31, 58, 47, 0.1);
  position: relative;
  z-index: 5;
}
.promo-banner strong { font-weight: 700; }
.promo-banner small { opacity: 0.9; margin-left: 8px; }

/* Section actualités si présente */
/* Mentions secondaires : la teinte doit rester lisible sur les fonds
   légèrement teintés des tableaux d'administration. */
.text-mute { color: var(--ink-mute); }

/* NEWS-BLOCK — Grille des 2 dernières actualités sur l'accueil.
   Colonnes plafonnées (comme la grille des gîtes) : avec seulement deux cartes,
   `1fr` les aurait étirées sur toute la largeur. `min(280px, 100%)` évite tout
   débordement sur les petits écrans (320 px). */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 440px));
  justify-content: center;
  gap: 24px;
  margin-top: 2rem;
}
.news-more-wrap { margin-top: 1.75rem; text-align: center; }
.news-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(31, 58, 47, 0.08);
  display: flex;
  flex-direction: column;
}
.news-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-soft);
}
.news-card-image img {
  width: 100%; height: 100%;
  /* Vignette de résumé : la photo remplit son cadre, cadrée sur son centre. Le
     choix inverse — montrer la photo entière — laissait de larges bandes vides
     autour des photos verticales et donnait une grille disparate. La photo
     complète reste visible sans recadrage dans l'article lui-même. */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Photo d'un article, en pleine page : aucune contrainte de proportion, la
   photo garde la sienne. On limite seulement sa hauteur pour qu'une image très
   verticale ne repousse pas le texte hors de l'écran. */
.blog-post-media,
.blog-post .blog-post-media {
  /* Une règle plus haut imposait un cadre 16/8 et un recadrage : une photo
     verticale (pot de miel, fleur) s'en trouvait agrandie et tronquée. On rend
     ici sa proportion à la photo. */
  aspect-ratio: auto;
  height: auto;
  margin: 0 0 1.5rem;
  text-align: center;
  background: var(--cream-soft, #f4efe4);
  border-radius: var(--radius);
  overflow: hidden;
}
.blog-post-media img,
.blog-post .blog-post-media img {
  object-fit: contain;          /* jamais de recadrage : la photo entière */
  max-width: 100%;
  max-height: 70vh;             /* une photo très haute ne chasse pas le texte */
  width: auto;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}
.news-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.news-card-date {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 6px;
}
.news-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  color: var(--forest);
  margin: 0 0 10px;
  line-height: 1.3;
}
.news-card p {
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink-soft, #4a4a40);
  margin: 0 0 12px;
  flex: 1;
}
.news-card-author {
  color: var(--ink-soft, #4a4a40);
  font-style: italic;
}

/* Version du site (footer) */
.site-version {
  opacity: 0.6;
  font-family: monospace;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

/* Tags de périodes spécifiques dans le tableau tarifs */
.pricing-ranges-tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pricing-range-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.72rem;
  background: rgba(201, 167, 111, 0.18);
  color: #8B6F3E;
  border-radius: 999px;
  font-weight: 500;
}

/* ============================================================
   v1.3.0 — Sélecteur de langue
============================================================ */
.lang-switcher {
  display: inline-flex;
  gap: 4px;
  margin-left: 12px;
  padding: 4px;
  background: rgba(31, 58, 47, 0.06);
  border-radius: 999px;
}
.lang-btn {
  background: transparent;
  border: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  opacity: 0.5;
}
.lang-btn:hover { opacity: 1; }
.lang-btn.active {
  opacity: 1;
  background: white;
  box-shadow: 0 2px 6px rgba(31,58,47,0.15);
}

/* Hero rotation slides */
.hero-rotation {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2; /* couche image de fond : derrière le dégradé (-1) et le texte (0) */
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.hero-slide.active { opacity: 1; }

/* ============================================================
   v1.4.0 — Accessibilité & compatibilité navigateurs
============================================================ */

/* Respecte la préférence utilisateur "réduire les animations"
   (vestibular disorders, économie batterie). Coupe le smooth-scroll,
   les transitions décoratives et la rotation du hero. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Contour de focus visible uniquement à la navigation clavier
   (pas au clic souris) — meilleur pour l'accessibilité ET le design */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid #C9A76F;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Fallback aspect-ratio pour navigateurs < 2021 (technique padding-top) */
@supports not (aspect-ratio: 1) {
  .gite-card-media, .news-card-media, .trieves-card-media {
    position: relative;
    height: 0;
    padding-top: 68%;
  }
  .gite-card-media > *, .news-card-media > *, .trieves-card-media > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ============================================================
   v1.6.0 — Correctifs & nouveautés
   ============================================================ */

/* --- Fix vidéo mobile (retour de Catty) : la vidéo ne doit jamais
       déborder horizontalement ni faire « glisser » la modale --- */
.modal-content, .modal-body { overflow-x: hidden; }
.modal-video-wrap { max-width: 100%; }
.modal-video-wrap video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  background: #000;
}

/* --- Calendrier interactif (sélection des dates au clic) --- */
.calendar-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.6rem;
}
.calendar-nav .btn-icon {
  border: 1px solid var(--border, #ddd); border-radius: 12px;
  background: #fff; width: 34px; height: 34px; font-size: 1.1rem;
  cursor: pointer; line-height: 1;
}
.calendar-nav .btn-icon:disabled { opacity: 0.35; cursor: default; }
.calendar-nav-hint { font-size: 0.82rem; color: var(--text-mute, #777); text-align: center; flex: 1; }
.calendar-day.is-available { cursor: pointer; transition: background 0.15s, transform 0.1s; }
.calendar-day.is-available:hover { background: rgba(65, 93, 74, 0.18); transform: scale(1.06); }
.calendar-day.is-selected {
  background: var(--moss, #415d4a) !important; color: #fff !important;
  font-weight: 700; border-radius: 12px;
}
.calendar-day.is-in-range { background: rgba(65, 93, 74, 0.22); border-radius: 0; }
.calendar-legend .swatch.selected { background: var(--moss, #415d4a); }

/* --- Options de réservation (lits faits, animaux) --- */
.sim-options {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.4rem; align-items: center;
  margin: 0.75rem 0; padding: 0.75rem 0.9rem;
  background: rgba(65, 93, 74, 0.06); border-radius: 12px;
}
.sim-options-title { font-weight: 600; font-size: 0.9rem; }
.option-field { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.option-field small { color: var(--text-mute, #777); }
.option-field input {
  width: 64px; padding: 0.35rem 0.5rem; border: 1px solid var(--border, #ddd);
  border-radius: 6px; text-align: center; font-size: 0.95rem;
}
.sim-row-option span:first-child { font-style: italic; }

/* --- Contraintes de séjour (durée min, jours d'arrivée) --- */
.sim-constraints { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.sim-badge.warn {
  display: inline-block; background: #fdf3e0; color: #8a5b0e;
  border: 1px solid #f0dcae; border-radius: 6px;
  padding: 0.25rem 0.6rem; font-size: 0.85rem;
}
.pricing-conds { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pricing-cond-tag {
  display: inline-block; font-size: 0.72rem; padding: 0.15rem 0.5rem;
  background: rgba(65, 93, 74, 0.1); color: var(--moss, #415d4a);
  border-radius: 999px; white-space: nowrap;
}

/* --- Légendes riches des bannières d'accueil --- */
/* NB : .hero-slide reste `position:absolute; inset:0` (défini plus haut) pour que
   les images se superposent et puissent défiler en fondu. Un élément en
   position:absolute crée aussi le contexte de positionnement pour la légende. */
.hero-slide-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.4rem 1.1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  color: #fff; text-align: center; pointer-events: none;
}
.hero-slide-caption-title { font-weight: 600; font-size: 1.05rem; display: block; }
.hero-slide-caption-text { font-size: 0.9rem; opacity: 0.95; max-width: 720px; margin: 0.25rem auto 0; }
.hero-slide-caption-text p { margin: 0.25rem 0; }

/* --- Contenu riche des actualités --- */
.news-card-more { display: inline-block; margin-top: 0.5rem; font-size: 0.88rem; font-weight: 600; }
.news-full-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 0.6rem 0; }
.news-full-content h3, .news-full-content h4 { margin: 0.9rem 0 0.35rem; }
.news-full-content ul, .news-full-content ol { padding-left: 1.25rem; }
.news-full-content blockquote {
  border-left: 3px solid var(--moss, #415d4a); margin: 0.75rem 0;
  padding: 0.25rem 0 0.25rem 0.9rem; color: var(--text-mute, #666); font-style: italic;
}

/* Tableau de tarifs : 4e colonne (week-end) compacte sur mobile */
@media (max-width: 640px) {
  .pricing-table { font-size: 0.82rem; }
  .pricing-table th, .pricing-table td { padding: 0.5rem 0.4rem; }
}

/* SIM-PROMO — Code promo dans le simulateur de tarif (2.21).
   Remplace les encarts .sim-promo-ok / .sim-promo-ko de la 1.6.2 : la remise est
   désormais une ligne du récapitulatif, calculée par la simulation elle-même. */
.sim-promo { margin-top: 0.75rem; }
.sim-promo label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.sim-promo input {
  padding: 0.5rem 0.75rem; border: 1px solid rgba(31, 58, 47, 0.2);
  border-radius: 6px; font: inherit; text-transform: uppercase; width: 100%;
}
.sim-row-promo span:last-child { color: var(--moss, #415d4a); font-weight: 600; }
.sim-row-promo-err span:last-child { color: #b3261e; font-size: 0.85rem; text-align: right; }

/* v1.6.2 — Logo du footer : emblème net (le SVG remplit le disque, plus
   d'anneau clair ni de carré flottant sur fond sombre). */
.footer-logo-mark {
  background: transparent !important;
  border: 1px solid rgba(245, 216, 155, 0.25); /* fin liseré doré discret */
}
.footer-logo-mark svg {
  width: 42px;
  height: 42px;
}

/* v1.6.2 — Section "Le domaine — Les extérieurs" */
.domaine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.domaine-card {
  background: #fff;
  border: 1px solid var(--line, rgba(31,58,47,0.12));
  border-radius: 18px;
  padding: 1.8rem 1.6rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.domaine-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(31, 58, 47, 0.12);
}
.domaine-card-icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.9rem;
}
.domaine-card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  color: var(--forest, #1F3A2F);
}
.domaine-card p {
  margin: 0;
  color: var(--ink-soft, #4A554C);
  line-height: 1.6;
  font-size: 0.96rem;
}

/* ============================================================
   v1.6.2 — Mode daltonien / lisibilité renforcée
   ------------------------------------------------------------
   Palette « colorblind-safe » (d'après Wong, Nature Methods 2011) :
   bleu #0072B2 (positif), orange #E69F00 (attention), vermillon #D55E00
   (négatif) — distinguables en deutéranopie/protanopie/tritanopie. Les
   indicateurs gardent aussi un libellé texte (jamais la couleur seule).
   Activable via le bouton « Accessibilité » (préférence mémorisée).
   ============================================================ */
[data-contrast="cb"] {
  --moss: #0072B2;
  --moss-soft: #56b4e9;
}
/* Pastilles de statut */
[data-contrast="cb"] .status-pill.pending,
[data-contrast="cb"] .status-pill.paused,
[data-contrast="cb"] .status-pill.draft      { background: #fdecc8; color: #7a5200; border: 1px solid #E69F00; }
[data-contrast="cb"] .status-pill.confirmed,
[data-contrast="cb"] .status-pill.approved,
[data-contrast="cb"] .status-pill.active,
[data-contrast="cb"] .status-pill.published   { background: #cfe8f5; color: #024b73; border: 1px solid #0072B2; }
[data-contrast="cb"] .status-pill.cancelled,
[data-contrast="cb"] .status-pill.rejected,
[data-contrast="cb"] .status-pill.expired     { background: #fbe0d0; color: #7a3300; border: 1px solid #D55E00; }

/* Badges de disponibilité du simulateur */
[data-contrast="cb"] .sim-badge.ok    { background: #cfe8f5; color: #024b73; border: 1px solid #0072B2; }
[data-contrast="cb"] .sim-badge.ko    { background: #fbe0d0; color: #7a3300; border: 1px solid #D55E00; }
[data-contrast="cb"] .sim-badge.warn  { background: #fdecc8; color: #7a5200; border: 1px solid #E69F00; }

/* Messages de formulaire */
[data-contrast="cb"] .form-success { background: #cfe8f5; color: #024b73; }
[data-contrast="cb"] .form-error,   [data-contrast="cb"] .sim-promo-ko { background: #fbe0d0; color: #7a3300; }

/* Pastille "Animaux bienvenus" */
[data-contrast="cb"] .gite-card-badge { background: #0072B2; color: #fff; }

/* Renfort de contraste général en mode daltonien */
[data-contrast="cb"] { --ink-mute: #55605a; }
[data-contrast="cb"] a { text-decoration-thickness: from-font; }

/* Bouton d'accessibilité */
.a11y-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: 1px solid currentColor; color: inherit;
  border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.82rem;
  cursor: pointer; opacity: 0.85;
}
.a11y-toggle:hover { opacity: 1; }
.a11y-toggle[aria-pressed="true"] { background: #0072B2; color: #fff; border-color: #0072B2; }

/* v1.6.2 — Section domaine : confort de lecture sur mobile */
@media (max-width: 560px) {
  .domaine-grid { grid-template-columns: 1fr; }
  .domaine-card { padding: 1.4rem 1.25rem; }
}

/* Champ leurre anti-bot (honeypot) : invisible pour les humains, visible pour les robots */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
/* Options : case à cocher alignée */
.form-group-check .check-inline { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.form-group-check .check-inline input { width: auto; }
.option-field-check { flex-direction: row; align-items: center; gap: 0.5rem; }

/* v2.0.3 — Tri des avis (visiteur) */
.review-sort-bar { display: flex; justify-content: center; margin: 0.4rem 0 1.6rem; }
.review-sort { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--forest, #1F3A2F); }
.review-sort select {
  padding: 0.4rem 0.75rem; border: 1px solid rgba(31,58,47,0.2); border-radius: 6px;
  background: #fff; font-family: inherit; font-size: 0.9rem; color: inherit; cursor: pointer;
}
.review-sort select:focus { outline: none; border-color: var(--ochre, #C9822E); }

/* v2.0.4 — Badge avis vérifié + réponse du propriétaire */
.review-verified {
  display: inline-block; margin-left: 0.6rem; font-size: 0.72rem; font-weight: 700;
  color: #2e7d51; background: rgba(46,125,81,0.10); border-radius: 999px;
  padding: 2px 9px; vertical-align: middle; letter-spacing: 0.02em;
}
.review-reply {
  margin-top: 0.9rem; padding: 0.75rem 1rem; background: rgba(31,58,47,0.05);
  border-left: 3px solid var(--forest, #1F3A2F); border-radius: 0 8px 8px 0;
  font-size: 0.92rem; line-height: 1.55; color: var(--ink, #333);
}
.review-reply-label {
  display: block; font-weight: 700; font-size: 0.78rem; color: var(--forest, #1F3A2F);
  margin-bottom: 0.25rem;
}

/* v2.0.6 — Plan du logement (fiche gîte) */
.gite-plan-link { display: inline-block; max-width: 100%; text-decoration: none; color: var(--forest, #1F3A2F); }
.gite-plan-link img { max-width: 100%; border: 1px solid rgba(31,58,47,0.15); border-radius: 6px; display: block; }
/* PLAN-SIZE — Sur desktop, on limite la hauteur de l'aperçu du plan : il devient une
   vignette raisonnable et le clic « Agrandir » reprend tout son sens. La version
   mobile (pleine largeur) reste inchangée, elle convient bien. */
@media (min-width: 761px) {
  .gite-plan-link img { max-height: 300px; width: auto; }
}
.gite-plan-link span { display: inline-block; margin-top: 0.5rem; font-weight: 600; font-size: 0.9rem; }
.gite-plan-link:hover span { color: var(--ochre, #C9822E); }

/* v2.0.14 — Sélecteur de téléphone (indicatif pays + drapeau) */
.phone-field { display: flex; gap: 0.5rem; align-items: stretch; }
.phone-field .phone-cc {
  flex: 0 0 auto;
  max-width: 48%;
  min-width: 0;
}
.phone-field input[type="tel"] { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .phone-field { flex-direction: column; }
  .phone-field .phone-cc { max-width: 100%; }
}

/* v2.0.15 — Lien Google Maps + carte plus compacte sur mobile */
.maps-link { color: var(--moss-texte); font-weight: 600; display: inline-block; margin-top: 0.25rem; }
.maps-link:hover { text-decoration: underline; }
@media (max-width: 880px) {
  .contact-map, .contact-map iframe { min-height: 260px; }
}

/* v2.0.16 — Le plan s'ouvre dans la visionneuse existante (#lightbox) */
.gite-plan-link { cursor: zoom-in; }

/* 2.7.2 — Surfaces des blocs modulaires : le fond ET la couleur du texte sont
   couplés, pour garantir la lisibilité quel que soit l'ordre des blocs.

   Surface CLAIRE → un des deux tons crème chauds + texte sombre garanti. */
.section.block-bg-a { background-color: var(--cream-soft, #F2EBDE); }
.section.block-bg-b { background-color: var(--cream, #F8F4ED); }
.section.block-bg-a, .section.block-bg-b { color: var(--ink, #1A1F1B); }
.section.block-bg-a h1, .section.block-bg-a h2, .section.block-bg-a h3, .section.block-bg-a h4,
.section.block-bg-b h1, .section.block-bg-b h2, .section.block-bg-b h3, .section.block-bg-b h4 { color: var(--forest, #1F3A2F); }
/* BUG-6 — Les cartes d'activités saisonnières ont un fond photo sombre : leur texte
   reste blanc même dans une section à surface claire (sinon illisible). */
.section.block-bg-a .activity-card h3, .section.block-bg-b .activity-card h3,
.section.block-bg-a .activity-card p,  .section.block-bg-b .activity-card p,
.section.block-bg-a .activity-card .eyebrow, .section.block-bg-b .activity-card .eyebrow { color: #fff; }
.section.block-bg-a .activity-card p, .section.block-bg-b .activity-card p { color: rgba(255,255,255,0.95); }
.section.block-bg-a p, .section.block-bg-b p { color: var(--ink-soft, #4A554C); }

/* Surface SOMBRE → fond forêt + texte clair garanti (ex. Espace détente). */
.section.block-surface-dark { background-color: var(--forest, #1F3A2F); color: var(--cream, #F8F4ED); }
.section.block-surface-dark h1, .section.block-surface-dark h2, .section.block-surface-dark h3, .section.block-surface-dark h4 { color: var(--cream, #F8F4ED); }
.section.block-surface-dark p { color: rgba(248, 244, 237, 0.85); }

/* BUG-3 — Champs de date : sur mobile (iOS surtout), l'input date natif a une
   largeur intrinsèque qui déborde de sa colonne. On neutralise l'apparence native
   et on autorise le rétrécissement dans la grille. */
input[type="date"].form-control,
input[type="time"].form-control {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  box-sizing: border-box;
}
.form-row { min-width: 0; }
.form-row > .form-group { min-width: 0; }

/* HERO-DOTS — Pastilles de navigation du bandeau d'accueil.
   Placées au-dessus du dégradé, sous le contenu du bandeau. Zone de clic
   confortable au doigt (44 px), pastille visible plus petite au centre. */
.hero-dots {
  position: absolute;
  /* Tout en bas du bandeau, sous la mention « Faites défiler » : la zone de clic
     confortable (44 px) doit dégager le texte, pas le chevaucher. */
  left: 0; right: 0; bottom: 0.25rem;
  display: flex; justify-content: center; align-items: center;
  gap: 0.25rem;
  z-index: 3;
}
.hero-dot {
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none; appearance: none;
}
.hero-dot::before {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.75);
  transition: background 0.25s ease, transform 0.25s ease;
}
.hero-dot:hover::before { background: rgba(255, 255, 255, 0.75); }
.hero-dot.is-active::before { background: #fff; transform: scale(1.35); }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: -8px; border-radius: 50%; }
@media (max-width: 600px) {
  .hero-dots { bottom: 0.15rem; }
  .hero-dot { width: 40px; height: 40px; }
  .hero-scroll { bottom: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dot::before { transition: none; }
}

/* A11Y — Lien d'évitement : premier élément atteint au clavier, il permet de
   sauter le menu et d'aller droit au contenu. Invisible tant qu'il n'a pas le
   focus, comme le veut l'usage. */
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem;
  z-index: 200;
  padding: 0.65rem 1.1rem;
  background: var(--forest, #1f3a2f); color: #fff;
  border-radius: 0 0 8px 8px; text-decoration: none; font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }

/* A11Y — Contour de focus visible et homogène sur tous les éléments
   interactifs : indispensable pour se repérer en naviguant au clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ochre, #C6A15B);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* PHOTO-CAPTION — Légende en bandeau au bas de la photo.
   Le conteneur épouse l'image (largeur et hauteur réelles après mise à
   l'échelle) : le bandeau se pose donc sur la photo elle-même, sans en
   modifier les dimensions ni décaler quoi que ce soit autour. */
.lightbox-figure {
  position: relative;
  display: flex;               /* colle au contenu, sans espace sous l'image */
  margin: 0;
  max-width: 95vw;
  max-height: 88vh;
}
.lightbox-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.1rem 0.9rem;   /* dégradé assez haut pour rester lisible */
  /* Dégradé du transparent vers le sombre : la légende se détache quelle que
     soit la photo, sans masquer le bas de l'image d'un aplat opaque. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  font-size: 1rem;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  border-radius: 0 0 var(--radius) var(--radius);
  pointer-events: none;        /* n'intercepte pas les clics de navigation */
}
.lightbox-caption[hidden] { display: none; }
@media (max-width: 600px) {
  .lightbox-caption { font-size: 0.9rem; padding: 1.8rem 0.75rem 0.75rem; }
}

/* PHOTO-CAPTION — Photos du Trièves agrandissables : le curseur et le contour
   de focus signalent que la zone est cliquable, au même titre que les photos
   de gîtes. */
.discover-card-image[data-zoom] { cursor: zoom-in; }
.discover-card-image[data-zoom]:focus-visible { outline: 3px solid var(--ochre, #C6A15B); outline-offset: -3px; }

/* UX-DISPO — Recherche visuelle des gîtes disponibles, sur la page d'accueil. */
.dispo-recherche {
  max-width: 900px; margin: 0 auto 2.5rem;
  background: #fff; border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 2px 14px rgba(31, 58, 47, 0.07);
}
.dispo-titre { margin: 0 0 0.25rem; font-size: 1.15rem; }
.dispo-aide { margin: 0 0 1rem; font-size: 0.92rem; color: var(--ink-soft, #5a5a52); }
.dispo-champs { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.dispo-champs .form-group { flex: 1 1 150px; margin: 0; }
.dispo-champs .btn { flex: 0 0 auto; }
.dispo-message, .dispo-bilan { margin: 1rem 0 0; font-size: 0.92rem; }
.dispo-bilan-vide { color: #8a6d1f; }
.dispo-cartes {
  display: grid; gap: 0.9rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.dispo-carte {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(31, 58, 47, 0.12); border-radius: 12px; background: #fff;
}
/* Un gîte indisponible reste visible — le visiteur voit ce qui existe — mais
   s'efface visuellement pour que les gîtes libres ressortent. */
.dispo-carte.est-prise { opacity: 0.55; }
.dispo-carte.est-libre { border-color: rgba(92, 122, 94, 0.45); }
.dispo-image { height: 120px; background-size: cover; background-position: center; background-color: var(--moss, #5C7A5E); }
.dispo-corps { padding: 0.75rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.dispo-corps h4 { margin: 0; font-size: 1rem; }
.dispo-detail { margin: 0; font-size: 0.78rem; color: var(--ink-soft, #5a5a52); }
.dispo-motif {
  align-self: flex-start; font-size: 0.72rem; font-weight: 600;
  background: rgba(180, 90, 60, 0.12); color: #8a4a30;
  border-radius: 999px; padding: 0.1rem 0.5rem;
}
.dispo-pied { margin-top: auto; padding-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dispo-prix { display: flex; flex-direction: column; line-height: 1.1; }
.dispo-prix strong { font-size: 1.05rem; }
.dispo-prix small { font-size: 0.7rem; color: var(--ink-soft, #5a5a52); }
.dispo-indispo { font-size: 0.78rem; color: var(--ink-soft, #5a5a52); }
@media (max-width: 600px) {
  .dispo-champs .form-group { flex: 1 1 100%; }
  .dispo-champs .btn { width: 100%; }
  .dispo-cartes { grid-template-columns: 1fr 1fr; }
  .dispo-image { height: 90px; }
}

/* Titre du bandeau : évite le clignotement entre le texte par défaut du HTML et
   celui saisi en administration. Masqué le temps du chargement des réglages,
   et seulement si JavaScript est actif — sinon le texte par défaut reste lisible. */
.js-actif .hero h1,
.js-actif .hero .lead { opacity: 0; }
.js-actif.titre-pret .hero h1,
.js-actif.titre-pret .hero .lead { opacity: 1; transition: opacity 0.25s ease; }

/* Correctif 2.45.1 — Sur très petit écran (320 px), le bloc « Espace détente »
   dépassait de 18 pixels. La page ne défilant pas horizontalement, ce dépassement
   était rogné : le texte devenait inatteignable plutôt que simplement décalé.
   Les colonnes de la grille peuvent désormais se réduire sous leur largeur de
   contenu, et les mots longs se coupent au besoin. */
.spa-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.spa-grid > * { min-width: 0; }
.spa-content, .spa-price { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .spa-price { padding: 1.25rem; }
}


/* Actualités — grille homogène.
   Les cartes n'avaient ni hauteur ni proportion communes : une carte sans photo
   laissait un grand vide, une photo verticale débordait de son cadre. */
.news-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(92, 122, 94, 0.14), rgba(198, 161, 91, 0.12));
  flex: 0 0 auto;
}
/* Une carte sans photo ne réserve pas d'espace vide : son texte occupe tout. */
.news-card:not(:has(.news-card-image)) .news-card-body { padding-top: 1.4rem; }
.news-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
/* Le lien « Lire la suite » se cale en bas, quelle que soit la longueur du texte. */
.news-card-body > :last-child { margin-top: auto; padding-top: 0.75rem; }
.news-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(31, 58, 47, 0.13); }
.news-card-image img { transition: transform 0.4s ease; }
.news-card:hover .news-card-image img { transform: scale(1.04); }

/* ============================================================
   Correctifs mobiles (2.50.0)
   ============================================================ */

/* Bloc « Espace détente » — les tarifs se déformaient sur téléphone.
   Chaque ligne opposait un intitulé à un montant sur la même rangée : à
   l'étroit, l'intitulé se cassait en trois lignes et le prix se disloquait
   verticalement (« 1 / 2 / € »). Sous 900 px, l'intitulé passe donc au-dessus
   du montant, et le montant ne se coupe jamais. */
@media (max-width: 900px) {
  .spa-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .spa-price-row span { font-size: 0.9rem; }
  .spa-price-row strong { white-space: nowrap; font-size: 1.35rem; }
  .spa-price { padding: 1.25rem; }
  /* Le bouton dépassait de son cadre : il occupe toute la largeur. */
  .spa-price .btn { width: 100%; white-space: normal; }
}

/* Bandeau de contact — il passait sur deux lignes sur téléphone alors que la
   place suffit une fois les éléments resserrés et l'adresse abrégée. */
@media (max-width: 640px) {
  .top-bar { font-size: 0.76rem; padding: 0.4rem 0; }
  .top-bar .container { flex-wrap: nowrap; gap: 0.5rem; justify-content: center; }
  .top-bar-info { gap: 0.75rem; flex-wrap: nowrap; min-width: 0; }
  .top-bar-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* L'adresse est la moins utile des trois : elle s'efface en premier. */
  .top-bar-info span:nth-child(3) { display: none; }
}
@media (max-width: 420px) {
  /* Sur les écrans les plus étroits, on ne garde que le téléphone. */
  .top-bar-info span:nth-child(2) { display: none; }
}