/* ════════════════════════════════════════════════════════
       PALETTE DE COULEURS DU SITE
       MODIFIER ICI : pour changer les couleurs, modifiez
       les codes hexadécimaux (#XXXXXX).
       Ces variables sont utilisées partout dans le CSS.
    ════════════════════════════════════════════════════════ */

/* ================================================================
   PILOTAGE GLOBAL DU DESIGN

   VARIABLES PRINCIPALES :

   --or        → couleur principale
   --brun      → titres
   --creme     → fond global
   --turquoise → chambre 2

   MODIFICATION RAPIDE :
   changer uniquement les variables :root

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

:root {
  --or: #c9a96e; /* Doré — couleur principale des accents */
  --or-clair: #e8d5b0; /* Doré clair — bordures et fonds légers */
  --brun: #5c3d2e; /* Brun foncé — textes et titres */
  --creme: #d8e0b8; /* Vert tilleul — couleur de fond du site */
  --texte: #3a2e26; /* Quasi-noir — texte courant */
  --gris: #8a7a6e; /* Gris chaud — textes secondaires */
  --blanc: #ffffff; /* Blanc pur */
  --turquoise: #2e8b8b; /* Turquoise — couleur de la chambre 2 */
  --turquoise-clair: #a8d5d5; /* Turquoise clair */
  --ombre: 0 4px 24px rgba(92, 61, 46, 0.12); /* Ombre portée standard */
}

/* Remise à zéro des marges par défaut du navigateur */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Défilement fluide au clic sur les liens du menu */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* Style général du corps de la page */
body {
  font-family: "Lato", sans-serif; /* Police du texte courant */
  background: var(--creme); /* Fond vert tilleul */
  color: var(--texte); /* Couleur du texte */
  line-height: 1.7; /* Interligne */
}

img {
  display: block;
  max-width: 100%;
} /* Les images ne débordent pas */
a {
  color: inherit;
  text-decoration: none;
} /* Liens sans soulignement */

/* ════════════════════════════════════════════════════════
       BARRE DE NAVIGATION FIXE EN HAUT
       La barre reste visible quand on fait défiler la page.
    ════════════════════════════════════════════════════════ */
header {
  position: fixed; /* Reste en haut de l'écran */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* Passe au-dessus de tout le reste */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo à gauche, menu à droite */
  padding: 0 40px;
  height: 72px; /* Hauteur de la barre */
  background: rgba(250, 246, 240, 0.97); /* Fond légèrement transparent */
  border-bottom: 1px solid var(--or-clair);
  backdrop-filter: blur(6px); /* Effet de flou derrière la barre */
  box-shadow: 0 2px 16px rgba(92, 61, 46, 0.07);
}

/* ── Logo (cercle LR + texte) ── */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Cercle avec les initiales "LR" */
.logo-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brun);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  color: var(--or);
  font-weight: 600;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.logo-texte {
  line-height: 1.25;
}

/* MODIFIER ICI : nom de l'établissement dans le logo */
.logo-texte .titre {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--brun);
  letter-spacing: 0.04em;
}

/* MODIFIER ICI : sous-titre dans le logo */
.logo-texte .sous-titre {
  font-family: "Lato", sans-serif; /* Police du texte courant */
  font-size: 0.72rem;
  color: var(--gris);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 300;
}

/* ── Liens du menu de navigation ── */
nav {
  display: flex;
  gap: 24px; /* Espacement entre les liens du menu */
  align-items: center;
}

nav a {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte);
  position: relative;
  padding-bottom: 3px;
  transition: color 0.2s;
}

/* Trait doré animé qui apparaît sous le lien au survol */
nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--or);
  transition: width 0.3s ease;
}
nav a:hover {
  color: var(--brun);
}
nav a:hover::after {
  width: 100%;
}

/* ── Menu burger pour mobile (3 traits horizontaux) ──
       Apparaît uniquement sur les petits écrans (téléphones) */
.burger {
  display: none; /* Caché sur ordinateur */
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--brun);
  transition: all 0.3s;
}

/* ════════════════════════════════════════════════════════
       CONTENU PRINCIPAL
    ════════════════════════════════════════════════════════ */
main {
  padding-top: 72px; /* Espace pour que le contenu ne passe pas sous la barre fixe */
}

/* Style commun des titres de section (ex: "Notre galerie", "Nos chambres") */
.section-titre {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--brun);
  text-align: center;
  margin-bottom: 8px;
}
/* Le mot en italique dans le titre est en doré (balise <em>) */
.section-titre em {
  font-style: italic;
  color: var(--or);
}

/* Petit trait doré horizontal sous les titres de section */
.filet {
  width: 60px;
  height: 2px;
  background: var(--or);
  margin: 0 auto 40px;
}

/* ════════════════════════════════════════════════════════
       SECTION ACCUEIL (première section visible)
    ════════════════════════════════════════════════════════ */

/*-- ================================================================
     GESTION DES IMAGES

     - Toutes les images doivent être dans le dossier /images/
     - Respecter exactement le nom (majuscules/minuscules)

     EXEMPLES :
     images/La suite 1p.jpg
     images/Turquoise 21p.jpg

     ⚠️ ATTENTION :
     - "Suite.jpg" ≠ "suite.jpg"
     - espaces autorisés mais déconseillés (préférer _)

     CONSEIL :
     → utiliser des noms simples :
        suite1.jpg
        turquoise1.jpg

     ================================================================ -*/
#accueil {
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 80px 40px 60px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(201, 169, 110, 0.08) 0%, transparent 50%),
        linear-gradient(340deg, rgba(92, 61, 46, 0.06) 0%, transparent 60%),
        var(--creme);
}

/* Cercles décoratifs en haut à droite et en bas à gauche */
#accueil::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 60px solid rgba(201, 169, 110, 0.07);
  pointer-events: none;
}
#accueil::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 40px solid rgba(92, 61, 46, 0.05);
  pointer-events: none;
}

/* Ligne au-dessus du titre principal (ex: "Val de Loire · Saint-Gervais-la-Forêt") */
.hero-surtitre {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
  animation: fadeUp 0.8s ease both; /* Animation d'apparition */
}

.hero-titre span {
  display: block; 
}

/* Ligne 1 : "Bienvenue à" */
.ligne1 {
  font-size: 0.6em;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 10px; /* réglage interligne */
}

/* Ligne 2 : "La Renaissance" */
.ligne2 {
  font-family: "Renaissance-Regular", "Cormorant Garamond", serif;
  color: #ffffff;
  font-size: 2.2em;
  line-height: 1;
  margin-bottom: 6px; /* espace avec ligne suivante */
}

/* Ligne 3 : "route de Chambord" */
.ligne3 {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;
  color: #ffffff;
  line-height: 1.3;
  margin-top: 6px;
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}

/* Chargement de la police "Renaissance" depuis internet */
@font-face {
  font-family: "Renaissance-Regular";
  src: url("https://db.onlinewebfonts.com/t/3370b60c2b43589cd3c61b420f568108.eot");
  src:
    url("https://db.onlinewebfonts.com/t/3370b60c2b43589cd3c61b420f568108.eot?#iefix")
      format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/3370b60c2b43589cd3c61b420f568108.woff2")
      format("woff2"),
    url("https://db.onlinewebfonts.com/t/3370b60c2b43589cd3c61b420f568108.woff")
      format("woff"),
    url("https://db.onlinewebfonts.com/t/3370b60c2b43589cd3c61b420f568108.ttf")
      format("truetype"),
    url("https://db.onlinewebfonts.com/t/3370b60c2b43589cd3c61b420f568108.svg#Renaissance-Regular")
      format("svg");
}

/* Texte descriptif sous le titre */
.hero-description {
  max-width: 620px;
  font-size: 1.05rem;
  color: var(--gris);
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 40px;
  animation: fadeUp 0.8s 0.3s ease both;
}

/* ── Photos de la section accueil ──
       Disposition : 1 grande photo (vue extérieure) + 2 petites en dessous */
.hero-photos {
  display: flex;
  flex-direction: column; /* Empilées verticalement */
  gap: 12px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  animation: fadeUp 0.8s 0.45s ease both;
}

/* Grande photo du dessus (vue extérieure de la maison) */
.hero-photo-principale {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ombre);
  aspect-ratio: 4/3; /* Format de la photo. Modifier pour changer les proportions */
  background: var(--or-clair);
  width: 100%;
  cursor: zoom-in; /* Curseur loupe — indique que la photo est cliquable */
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.hero-photo-principale:hover {
  transform: scale(1.01); /* Légère augmentation au survol */
  box-shadow: 0 8px 32px rgba(92, 61, 46, 0.2);
}
.hero-photo-principale img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* Centrage de la photo dans son cadre */
  display: block;
  pointer-events: none; /* L'image ne capte pas le clic — c'est la figure qui le fait */
}

/* Rangée des 2 photos de chambres (côte à côte) */
.hero-photos-chambres {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
  gap: 12px;
}
.hero-photos-chambres figure {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ombre);
  aspect-ratio: 4/3;
  background: var(--or-clair);
  margin: 0;
  cursor: zoom-in;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.hero-photos-chambres figure:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 32px rgba(92, 61, 46, 0.2);
}
.hero-photos-chambres figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Zones grises affichées à la place des photos manquantes */
.img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(135deg, var(--or-clair), #d4b483);
  color: var(--brun);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px;
}
.img-placeholder svg {
  opacity: 0.4;
}

/* Animation d'apparition (les éléments montent depuis le bas) */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ════════════════════════════════════════════════════════
       CALENDRIERS INTÉGRÉS DANS LES FICHES DE CHAMBRE
       (affichent les disponibilités Google Agenda)
    ════════════════════════════════════════════════════════ */
.chambre-calendrier {
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chambre-calendrier-titre {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
/* MODIFIER ICI : height pour changer la hauteur du calendrier affiché */
.chambre-calendrier iframe {
  width: 100%;
  height: 320px;
  border: 1px solid var(--or-clair);
  border-radius: 6px;
  display: block;
}

/* Carrousel de la galerie */
.carrousel-galerie {
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 4/3;
  border-radius: 10px;
}
.galerie-compteur {
  position: absolute;
  bottom: 48px;
  right: 16px;
  background: rgba(20, 13, 8, 0.55);
  color: var(--or-clair);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 20px;
}
/* ════════════════════════════════════════════════════════
       SECTION GALERIE PHOTOS
    ════════════════════════════════════════════════════════ */
#galerie {
  padding: 80px 40px;
  background: var(--blanc);
}

/* Grille de 3 colonnes, hauteur automatique de 220px par ligne */
.galerie-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px; /* MODIFIER ICI : hauteur des cases de la galerie */
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}
.galerie-grille figure {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(92, 61, 46, 0.09);
  position: relative;
  cursor: pointer;
  background: var(--or-clair);
}
/* La 1ère photo occupe 2 colonnes et 2 lignes (grande photo) */
.galerie-grille figure:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}
/* La 4ème photo occupe 2 colonnes */
.galerie-grille figure:nth-child(4) {
  grid-column: span 2;
}
.galerie-grille figure .img-placeholder {
  height: 100%;
}
.galerie-grille figure:hover .img-placeholder {
  filter: brightness(0.92);
}

/* ════════════════════════════════════════════════════════
       LIGHTBOX — Agrandissement des photos au clic
       Quand on clique sur une photo, elle s'affiche en grand
       sur fond sombre. Clic n'importe où ou touche Échap pour fermer.
    ════════════════════════════════════════════════════════ */
.lightbox {
  display: none; /* Cachée par défaut */
  position: fixed;
  inset: 0; /* Couvre tout l'écran */
  background: rgba(20, 13, 8, 0.95); /* Fond sombre */
  z-index: 2000;
  align-items: center;
  justify-content: center;
  cursor: zoom-out; /* Curseur indique qu'on peut fermer */
}
.lightbox.active {
  display: flex;
} /* Affichée quand la classe "active" est ajoutée */
.lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 6px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.7);
  object-fit: contain;
  pointer-events: none;
}
/* Bouton × pour fermer la lightbox */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.2);
  border: 1px solid rgba(201, 169, 110, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--or);
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s;
}
.lightbox-close:hover {
  background: rgba(201, 169, 110, 0.4);
}
/* Légende affichée en bas de la photo agrandie */
.lightbox-legende {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(250, 246, 240, 0.55);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
       SECTION NOS CHAMBRES
    ════════════════════════════════════════════════════════ */
#nos-services {
  padding: 80px 40px;
  background: var(--creme);
}

/* Grille 2 colonnes : La Suite à gauche, Chambre Turquoise à droite */
.chambres-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px; /* MODIFIER ICI : espacement entre les deux fiches */
  max-width: 1100px;
  margin: 0 auto;
}

/* Carte de chambre (cadre blanc arrondi) */
.chambre-carte {
  background: var(--blanc);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--ombre);
  display: flex;
  height: 100%;
  flex-direction: column;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.chambre-carte:hover {
  transform: translateY(-4px); /* Légère élévation au survol */
  box-shadow: 0 12px 40px rgba(92, 61, 46, 0.16);
}

/* Couleur d'accent : brun pour La Suite, turquoise pour la Chambre Turquoise */
.chambre-carte.suite .accent {
  color: var(--brun);
}
.chambre-carte.suite .btn-reservation {
  background: var(--brun);
}
.chambre-carte.suite .btn-reservation:hover {
  background: #3e2a1f;
}

.chambre-carte.turquoise .accent {
  color: var(--turquoise);
}
.chambre-carte.turquoise .btn-reservation {
  background: var(--turquoise);
}
.chambre-carte.turquoise .btn-reservation:hover {
  background: #226b6b;
}

/* ── Carrousel de photos dans chaque fiche de chambre ──
       Permet de faire défiler plusieurs photos avec des flèches */
.carrousel {
  position: relative;
  overflow: hidden;
  height: 260px; /* MODIFIER ICI : hauteur des photos dans la fiche */
  background: var(--or-clair);
}
/* Zone contenant toutes les photos côte à côte horizontalement */

.carrousel-pistes {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}
.carrousel-pistes figure {
  flex: 0 0 100%;
  height: 100%;
  cursor: zoom-in;
}

.carrousel-pistes figure:hover img {
  transform: scale(1.01);
}

.carrousel-pistes figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.carrousel-pistes figure .img-placeholder {
  height: 100%;
}

/* Boutons flèches gauche/droite du carrousel */
.carrousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(250, 246, 240, 0.88);
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--brun);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(92, 61, 46, 0.15);
  transition: background 0.2s;
  z-index: 10;
}
.carrousel-btn:hover {
  background: var(--blanc);
}
.carrousel-btn.prev {
  left: 10px;
} /* Flèche gauche */
.carrousel-btn.next {
  right: 10px;
} /* Flèche droite */

/* Points de navigation (petits ronds en bas du carrousel) */
.carrousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.carrousel-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.2s;
}
.carrousel-dots span.active {
  background: var(--or);
} /* Point actif en doré */

/* Zone de texte de la fiche (sous le carrousel) */
.chambre-infos {
  padding: 28px 28px 32px;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  flex: 1;
}


.chambre-calendrier {
  margin-top: auto;
}

/* Badge "Chambre 1" ou "Chambre 2" */
.chambre-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
  background: var(--or-clair);
  color: var(--brun);
}

/* Nom de la chambre */
.chambre-nom {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.85rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.2;
}

/* Description de la chambre */
.chambre-desc {
  font-size: 0.92rem;
  color: var(--gris);
  line-height: 1.75;
  margin-bottom: 20px;
  flex: 1;
}

/* Zone des étiquettes d'équipements (Lit double, Wifi, etc.) */
.chambre-equipements {
  display: flex;
  flex-wrap: wrap; /* Retour à la ligne automatique */
  gap: 8px;
  margin-bottom: 24px;
}

/* Étiquette individuelle d'équipement */
.tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--creme);
  border: 1px solid var(--or-clair);
  color: var(--gris);
  padding: 4px 10px;
  border-radius: 4px;
}

/*-- ================================================================
     FORMULAIRE DE RÉSERVATION

     - lien vers Google Form
     - utilisé pour toutes les chambres

     MODIFICATION :
     remplacer uniquement le href

     ⚠️ IMPORTANT :
     - ne pas modifier target="_blank"
     - ne pas supprimer rel="noopener"

     ================================================================ -*/

    /* Bouton "Demande de réservation" */
    .btn-reservation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 6px;
  color: var(--blanc);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    background 0.25s,
    transform 0.2s;
  align-self: flex-start;
}
.btn-reservation:hover {
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════
       SECTION AVIS
    ════════════════════════════════════════════════════════ */
#avis {
  padding: 80px 40px;
  background: var(--blanc);
}

.avis-intro {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
  color: var(--gris);
  font-size: 1rem;
  line-height: 1.8;
}

.avis-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.btn-avis-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 6px;
  background: var(--or);
  color: var(--blanc);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    background 0.25s,
    transform 0.2s;
  box-shadow: 0 4px 16px rgba(92, 61, 46, 0.12);
}

.btn-avis-google:hover {
  background: #b8924f;
  transform: translateY(-1px);
}

.avis-note {
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gris);
  margin-top: -18px;
  margin-bottom: 36px;
  margin-left: 4px;
}

.avis-note a:hover {
    text-decoration: underline;
}
.avis-bloc {
  max-width: 1100px;
  margin: 0 auto;
  background: #fffdf9;
  border: 1px solid var(--or-clair);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--ombre);
}

.avis-widget-titre {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.8rem;
  color: var(--brun);
  text-align: center;
  margin-bottom: 12px;
}

.avis-widget-sous-texte {
  text-align: center;
  color: var(--gris);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.avis-placeholder {
  border: 2px dashed var(--or-clair);
  border-radius: 10px;
  padding: 28px;
  background: var(--blanc);
  text-align: center;
  color: var(--gris);
  line-height: 1.8;
}

.avis-placeholder strong {
  color: var(--brun);
}

/* Bloc à utiliser plus tard si vous intégrez un widget tiers */
.avis-widget-externe {
  min-height: 120px;
}

/* Mobile */
@media (max-width: 768px) {
  #avis {
    padding: 60px 20px;
  }

  .avis-bloc {
    padding: 20px;
  }

  .btn-avis-google {
    width: 100%;
    max-width: 320px;
  }
}

/* ════════════════════════════════════════════════════════
       SECTION NOUS CONTACTER
    ════════════════════════════════════════════════════════ */
#nous-contacter {
  padding: 80px 40px;
  background: var(--brun); /* Fond brun foncé */
  color: var(--creme);
}
#nous-contacter .section-titre {
  color: var(--or);
}
#nous-contacter .filet {
  background: var(--or);
}

/* Grille 2 colonnes : infos à gauche, carte à droite */
.contact-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}

.contact-bloc {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Cercle avec l'icône (adresse, téléphone, email) */
.contact-icone {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.15);
  border: 1px solid rgba(201, 169, 110, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-icone svg {
  width: 18px;
  height: 18px;
  stroke: var(--or);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Libellé (Adresse, Téléphone, E-mail) */
.contact-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  opacity: 0.8;
}
address.contact-bloc {
    font-style: normal;
}

/* Valeur (numéro, adresse, email) */
.contact-valeur {
  font-size: 0.97rem;
  color: var(--creme);
  font-weight: 300;
  line-height: 1.6;
}
.contact-valeur a {
  color: var(--or-clair);
  transition: color 0.2s;
}
.contact-valeur a:hover {
  color: var(--or);
}

/* Cadre de la carte Google Maps */
.carte-conteneur {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  height: 280px; /* MODIFIER ICI : hauteur de la carte */
}
.carte-conteneur iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ════════════════════════════════════════════════════════
       PIED DE PAGE
    ════════════════════════════════════════════════════════ */
footer {
  background: #2a1e17;
  color: rgba(250, 246, 240, 0.45);
  text-align: center;
  padding: 20px 40px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
footer a {
  color: var(--or);
}

/* ════════════════════════════════════════════════════════
       ADAPTATION MOBILE (écrans < 768px)
       Ces règles s'appliquent uniquement sur téléphone.
    ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  header {
    padding: 0 20px;
  }
  /* Le menu se cache et le burger apparaît */
  nav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--creme);
    flex-direction: column;
    gap: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--or-clair);
  }
  nav.open {
    display: flex;
  }
  nav a {
    padding: 14px 28px;
    font-size: 0.85rem;
  }
  .burger {
    display: flex;
  }

  #accueil {
    padding: 60px 20px 40px;
  }

  #galerie,
  #nos-services,
  #nous-contacter {
    padding: 60px 20px;
  }

  /* Galerie en 2 colonnes sur mobile */
  .galerie-grille {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
  }
  .galerie-grille figure:nth-child(1) {
    grid-column: span 2;
  }
  .galerie-grille figure:nth-child(4) {
    grid-column: span 1;
  }

  /* Chambres et contact en 1 colonne sur mobile */
  .chambres-grille {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contact-grille {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Lightbox galerie — plein écran avec zoom
       Clic sur la photo pour agrandir, reclic pour revenir */
.lightbox-galerie {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 7, 4, 0.97);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox-galerie.active {
  display: flex;
}
.lightbox-galerie img {
  max-width: 96vw;
  max-height: 94vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
  pointer-events: auto;
}
.lightbox-galerie-close {
  position: absolute;
  top: 20px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.2);
  border: 1px solid rgba(201, 169, 110, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--or);
  cursor: pointer;
  transition: background 0.2s;
  z-index: 3001;
}
.lightbox-galerie-close:hover {
  background: rgba(201, 169, 110, 0.4);
}
.lightbox-galerie-legende {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(250, 246, 240, 0.5);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.avis-qr {
  margin-top: 30px;
  margin-bottom: 25px; /* ← ajoute l’espace */
  text-align: center;
}

.avis-qr a {
  display: inline-block;
}

.avis-qr img {
  display: block;
  margin: 10px auto 0;
  width: 160px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qr-texte {
  font-size: 0.9rem;
  color: var(--gris);
  letter-spacing: 0.08em;
}