/* =========================================================
   La maison aux volets blancs — feuille de style principale
   Toutes les couleurs, espacements et polices sont définis
   ici en variables : modifie les valeurs dans :root pour
   changer l'apparence de tout le site d'un coup.
   ========================================================= */

:root {
  /* Couleurs */
  --couleur-fond: #faf7f2;
  --couleur-fond-alt: #f1ebe1;
  --couleur-texte: #2e2a24;
  --couleur-texte-doux: #5c5648;
  --couleur-pierre: #8a7f6d;
  --couleur-accent: #b5533c;      /* terre cuite (toit, tuiles) */
  --couleur-accent-fonce: #954531;
  --couleur-vert: #5c6b4f;        /* volets / verdure */
  --couleur-blanc: #ffffff;
  --couleur-bordure: #e3dbcc;
  --ombre: 0 10px 30px rgba(46, 42, 36, 0.08);

  /* Typo */
  --police-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --police-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --rayon: 6px;
  --largeur-max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police-texte);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--couleur-texte);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

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

.etiquette {
  display: inline-block;
  font-family: var(--police-texte);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--couleur-accent);
  font-weight: 600;
  margin-bottom: 0.6em;
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--rayon);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--police-texte);
}
.bouton-principal {
  background: var(--couleur-accent);
  color: var(--couleur-blanc);
}
.bouton-principal:hover { background: var(--couleur-accent-fonce); transform: translateY(-1px); }
.bouton-secondaire {
  background: transparent;
  color: var(--couleur-blanc);
  border-color: rgba(255,255,255,0.7);
}
.bouton-secondaire:hover { background: rgba(255,255,255,0.15); }
.bouton-contour {
  background: transparent;
  color: var(--couleur-accent);
  border-color: var(--couleur-accent);
}
.bouton-contour:hover { background: var(--couleur-accent); color: var(--couleur-blanc); }

/* ---------- En-tête / navigation ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--couleur-bordure);
}
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.logo {
  font-family: var(--police-titre);
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--couleur-texte);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  flex-shrink: 0;
  white-space: nowrap;
}
.logo small {
  font-family: var(--police-texte);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--couleur-pierre);
  font-weight: 500;
  margin-top: 5px;
}

.nav-principale { display: flex; align-items: center; gap: 22px; }
.nav-liens { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-liens a:not(.bouton) {
  text-decoration: none;
  font-weight: 500;
  color: var(--couleur-texte-doux);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.nav-liens a:not(.bouton):hover,
.nav-liens a.actif { color: var(--couleur-accent); border-color: var(--couleur-accent); }
/* Le bouton "Réserver" garde le padding/style normal des .bouton,
   sans hériter des styles de lien du menu (padding réduit, soulignement). */
.nav-liens a.bouton { padding: 12px 26px; }

/* Sélecteur de langue (FR/EN) dans le menu */
.nav-liens a.lien-langue {
  padding: 5px 11px;
  border: 1px solid var(--couleur-bordure);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--couleur-pierre);
}
.nav-liens a.lien-langue:hover { border-color: var(--couleur-accent); color: var(--couleur-accent); }

.bouton-menu {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--couleur-texte);
}

@media (max-width: 860px) {
  /* Le panneau de menu (position fixed) est un descendant de l'en-tête
     (position sticky, haute de 84px). Certains navigateurs traitent alors
     l'en-tête comme la "boîte de référence" du panneau au lieu de l'écran,
     ce qui écrase sa hauteur à celle de l'en-tête : le panneau devient
     minuscule et tout ce qui dépasse s'affiche sans son fond, d'où
     l'effet de transparence. On fixe donc sa hauteur en unité d'écran
     (vh), qui reste correcte quelle que soit la boîte de référence utilisée. */
  .nav-liens {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    height: calc(100vh - 84px);
    background: var(--couleur-fond);
    opacity: 1;
    flex-direction: column;
    align-items: stretch;
    padding: 30px 24px;
    gap: 22px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .nav-liens.ouvert { transform: translateX(0); }
  .nav-principale .bouton { display: none; }
  .nav-liens .bouton { display: inline-block; margin-top: 10px; }
  .bouton-menu { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
  color: var(--couleur-blanc);
  background-size: cover;
  background-position: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,26,20,0.15) 0%, rgba(20,18,14,0.75) 100%);
}
.hero-contenu {
  position: relative;
  z-index: 1;
  padding-bottom: 64px;
  max-width: 920px;
}
.hero-contenu h1 { white-space: nowrap; }
@media (max-width: 760px) {
  .hero-contenu h1 { white-space: normal; }
}
.hero-contenu .etiquette { color: #f0c9a8; }
.hero-contenu h1 { color: var(--couleur-blanc); }
.hero-contenu p { font-size: 1.15rem; max-width: 600px; opacity: 0.95; }
.hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.hero-note {
  margin: 18px 0 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.02em;
}
.hero-note strong { color: var(--couleur-blanc); }

.hero-infos {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 18px;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 22px 24px 0;
}

/* ---------- Bandeau infos rapides ---------- */
.bandeau-infos {
  background: var(--couleur-vert);
  color: var(--couleur-blanc);
}
.bandeau-infos .conteneur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  padding-top: 28px;
  padding-bottom: 28px;
  text-align: center;
}
.bandeau-infos strong { display: block; font-family: var(--police-titre); font-size: 1.4rem; }
.bandeau-infos span { font-size: 0.85rem; opacity: 0.85; }

/* ---------- Sections génériques ---------- */
section { padding: 78px 0; }
.section-alt { background: var(--couleur-fond-alt); }
.section-entete { max-width: 680px; margin: 0 auto 46px; text-align: center; }
.section-entete p { color: var(--couleur-texte-doux); }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 800px) { .grille-2 { grid-template-columns: 1fr; gap: 30px; } }

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}
.carte {
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 28px 24px;
}
.carte h3 { margin-bottom: 0.4em; }
.carte .icone { font-size: 1.8rem; margin-bottom: 12px; display: block; }

.image-arrondie { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }

/* ---------- Listes d'équipements ---------- */
.liste-equip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.liste-equip li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--couleur-bordure);
}
.liste-equip li::before { content: "✓"; color: var(--couleur-vert); font-weight: 700; }

/* ---------- Galerie photos ---------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.galerie figure {
  margin: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  background: var(--couleur-fond-alt);
}
.galerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.galerie figure:hover img { transform: scale(1.05); }

.filtres-galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 34px;
}
.filtre {
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-blanc);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--couleur-texte-doux);
}
.filtre.actif { background: var(--couleur-accent); border-color: var(--couleur-accent); color: var(--couleur-blanc); }

/* Visionneuse plein écran */
.visionneuse {
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 13, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px 20px;
}
.visionneuse.ouverte { display: flex; }
.visionneuse img { max-width: 100%; max-height: 85vh; border-radius: 4px; }
.visionneuse-fermer, .visionneuse-prec, .visionneuse-suiv {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 50%;
}
.visionneuse-fermer { top: 20px; right: 20px; }
.visionneuse-prec { left: 20px; top: 50%; transform: translateY(-50%); }
.visionneuse-suiv { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: 18px; }
.ligne-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .ligne-champs { grid-template-columns: 1fr; } }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
input, textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-family: var(--police-texte);
  font-size: 1rem;
  background: var(--couleur-blanc);
  color: var(--couleur-texte);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--couleur-accent);
}
.champ-piege { position: absolute; left: -9999px; top: -9999px; }

.message-etat {
  padding: 16px 18px;
  border-radius: var(--rayon);
  margin-bottom: 20px;
  font-weight: 500;
}
.message-etat.succes { background: #e7f0e3; color: #3d5a34; }
.message-etat.erreur { background: #fbe7e3; color: #8c3626; }

/* ---------- Pied de page ---------- */
.pied {
  background: #23201b;
  color: #d8d2c5;
  padding: 56px 0 26px;
}
.pied .conteneur {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 700px) { .pied .conteneur { grid-template-columns: 1fr; gap: 30px; } }
.pied h4 {
  color: var(--couleur-blanc);
  font-family: var(--police-texte);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.pied a { color: #d8d2c5; text-decoration: none; }
.pied a:hover { color: var(--couleur-accent); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied-bas {
  border-top: 1px solid #3a362e;
  margin-top: 40px;
  padding-top: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: #7a7566;
}

/* ---------- Page intérieure (hero réduit) ---------- */
.hero-page {
  background-size: cover;
  background-position: center;
  position: relative;
  color: var(--couleur-blanc);
  padding: 90px 0 50px;
}
.hero-page::after { content: ""; position: absolute; inset: 0; background: rgba(20,17,13,0.55); }
.hero-page .conteneur { position: relative; z-index: 1; }
.hero-page h1 { color: var(--couleur-blanc); }
.hero-page p { opacity: 0.95; max-width: 560px; }
.fil-ariane { font-size: 0.85rem; opacity: 0.85; margin-bottom: 10px; }
.fil-ariane a { text-decoration: none; color: var(--couleur-blanc); opacity: 0.85; }

/* ---------- Encart d'alerte ---------- */
.encart {
  border-left: 4px solid var(--couleur-accent);
  background: var(--couleur-fond-alt);
  padding: 20px 24px;
  border-radius: var(--rayon);
}