/* ==========================================================
   La Maison Au Fil du Temps — feuille de style
   Palette : lin (fond), ardoise (texte/accent sombre),
   ocre (accent chaleureux), vert-marais (accent secondaire)
   ========================================================== */

:root{
  --lin:          #f6f1e6;
  --lin-fonce:    #ece3d2;
  --ardoise:      #3b4750;
  --ardoise-fonce:#262f36;
  --ocre:         #b5793a;
  --ocre-clair:   #d4a468;
  --vert-marais:  #5c6b52;
  --texte:        #2c2a25;
  --blanc:        #fffdf9;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --rayon: 3px;
  --ombre: 0 12px 30px -14px rgba(38, 47, 54, .35);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--texte);
  background: var(--lin);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight:600; margin:0 0 .5em; color: var(--ardoise-fonce); }
p{ margin:0 0 1em; }

.conteneur{ max-width:1140px; margin:0 auto; padding:0 24px; }

/* --- Motif signature : le "cadran solaire" ---
   un petit trait + point, clin d'œil à la citation de Flaubert
   utilisé comme séparateur discret entre les sections */
.cadran{
  display:flex; align-items:center; gap:14px;
  margin: 0 0 28px;
}
.cadran::before, .cadran::after{
  content:""; flex:1; height:1px; background: var(--ocre-clair);
}
.cadran span{
  width:7px; height:7px; border-radius:50%;
  background: var(--ocre); flex-shrink:0;
}
.cadran.aligne-gauche{ justify-content:flex-start; }
.cadran.aligne-gauche::after{ flex:0 0 60px; }
.cadran.aligne-gauche::before{ display:none; }

.eyebrow{
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  color: var(--ocre);
  font-weight:600;
}

/* --- Boutons --- */
.bouton{
  display:inline-block;
  padding: 13px 28px;
  border-radius: var(--rayon);
  background: var(--ocre);
  color: var(--blanc);
  font-weight:600;
  font-size: .92rem;
  letter-spacing:.02em;
  transition: background .2s ease, transform .2s ease;
  border: 1px solid var(--ardoise);
}
.bouton:hover{ background: var(--ocre); transform: translateY(-1px); }
.bouton.contour{
  background: transparent; color: var(--ardoise); border-color: var(--ardoise);
}
.bouton.contour:hover{ background: var(--ardoise); color: var(--blanc); }
.bouton.ocre{ background: var(--ocre); border-color: var(--ocre); }
.bouton.ocre:hover{ background:#9c6529; border-color:#9c6529; }

/* ============ EN-TÊTE / NAVIGATION ============ */
.entete{
  position: sticky; top:0; z-index: 50;
  background: rgba(246,241,230,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--lin-fonce);
}
.entete-interieur{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  gap: 32px;
  min-height: 72px;
}
.logo{
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ardoise-fonce);
  font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
}
.logo em{ font-style:italic; font-weight:500; color: var(--ocre); }

.nav-principale{ display:flex; align-items:center; gap:34px; }
.nav-principale > ul{ display:flex; align-items:center; gap:24px; }
.nav-principale a{
  font-size:.87rem; font-weight:500; color: var(--ardoise-fonce);
  padding:11px 11px; position:relative;
  display:inline-block;
}
.nav-principale > ul > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--ocre); transform: scaleX(0); transform-origin:left;
  transition: transform .2s ease;
}
.nav-principale > ul > li > a:hover::after,
.nav-principale > ul > li > a.actif::after{ transform: scaleX(1); }

.a-sous-menu{ position:relative; }
.sous-menu{
  position:absolute; top:100%; left:0; min-width:190px;
  background: var(--blanc); border:1px solid var(--lin-fonce); border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding:8px; opacity:0; visibility:hidden; transform: translateY(6px);
  transition: all .18s ease;
}
.a-sous-menu:hover .sous-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.sous-menu li a{ display:block; padding:9px 12px; border-radius:4px; }
.sous-menu li a:hover{ background: var(--lin); }

.bouton-nav{ padding:10px 22px; font-size:.85rem; }

.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer;
}
.burger span{ height:2px; background: var(--ardoise-fonce); border-radius:2px; }

/* ============ HERO (accueil) ============ */
.hero{
  position:relative;
  min-height: 78vh;
  display:flex; align-items:flex-end;
  background: linear-gradient(180deg, rgba(38,47,54,.15) 0%, rgba(38,47,54,.72) 100%),
              url('../images/maison/1.jpg') center/cover no-repeat;
  color: var(--blanc);
}
.hero-contenu{ padding: 90px 0 70px; max-width: 640px; }
.hero .eyebrow{ color: var(--ocre-clair); }
.hero h1{
  color: var(--blanc);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  line-height:1.05;
  margin: 10px 0 18px;
}
.hero p{ font-size:1.1rem; color: #eee7d8; max-width: 480px; }
.hero-actions{ display:flex; gap:16px; margin-top: 20px; flex-wrap:wrap; }

/* ============ SECTIONS GÉNÉRIQUES ============ */
section{ padding: 84px 0; }
section.fond-fonce{ background: var(--ardoise-fonce); color: #ece7db; }
section.fond-fonce h2, section.fond-fonce h3{ color: var(--blanc); }
section.fond-clair-2{ background: var(--lin-fonce); }

.entete-section{ max-width: 640px; margin-bottom: 44px; }
.entete-section.centre{ margin-left:auto; margin-right:auto; text-align:center; }
.entete-section h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

/* Grille photo façon "mosaïque" pour la page d'accueil */
.mosaique{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.mosaique img{
  width:100%; height: 220px; object-fit:cover; border-radius: var(--rayon);
}
.mosaique a:nth-child(3n+1) img{ height: 300px; }

/* ============ CARTES CHAMBRES ============ */
.grille-chambres{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 28px;
}
.carte-chambre{
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow:hidden;
  box-shadow: var(--ombre);
  transition: transform .25s ease;
  display:flex; flex-direction:column;
}
.carte-chambre:hover{ transform: translateY(-5px); }
.carte-chambre .photo{ aspect-ratio: 4/3.4; overflow:hidden; }
.carte-chambre .photo img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.carte-chambre:hover .photo img{ transform: scale(1.06); }
.carte-chambre .contenu{ padding: 22px 24px 26px; display:flex; flex-direction:column; gap:6px; flex:1; }
.carte-chambre h3{ margin:0; font-size:1.3rem; }
.carte-chambre .meta{ color:#7a746a; font-size:.88rem; }
.carte-chambre .prix{ font-family: var(--serif); color: var(--ocre); font-size:1.15rem; font-weight:600; margin-top:auto; padding-top:10px; }
.carte-chambre .prix small{ font-family:var(--sans); font-size:.75rem; color:#7a746a; font-weight:400; }

/* ============ CARROUSEL PHOTO ============ */
.carrousel{ position:relative; }
.carrousel-piste{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  border-radius: var(--rayon);
}
.carrousel-piste::-webkit-scrollbar{ display:none; }
.carrousel-piste{ scrollbar-width:none; }
.carrousel-diapo{ flex:0 0 100%; scroll-snap-align:start; }
.carrousel-diapo img{
  width:100%; height:100%; object-fit:cover; cursor: zoom-in;
  display:block;
}
.carrousel-bouton{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none;
  background: rgba(255,253,249,.9); color: var(--ardoise-fonce);
  font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--ombre); transition: background .2s ease;
}
.carrousel-bouton:hover{ background: var(--blanc); }
.carrousel-bouton.precedent{ left:16px; }
.carrousel-bouton.suivant{ right:16px; }
.carrousel-points{
  position:absolute; bottom:14px; left:0; right:0;
  display:flex; justify-content:center; gap:8px;
}
.carrousel-points button{
  width:8px; height:8px; border-radius:50%; border:none;
  background: rgba(255,253,249,.55); cursor:pointer; padding:0;
}
.carrousel-points button.actif{ background: var(--blanc); }

.carrousel.grand .carrousel-diapo{ height: 460px; }
.carrousel.compact .carrousel-diapo{ height: 320px; }

/* ============ VISIONNEUSE PLEIN ÉCRAN (lightbox) ============ */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background: rgba(38,47,54,.94);
  display:flex; align-items:center; justify-content:center;
  padding: 40px;
}
.lightbox[hidden]{ display:none; }
.lightbox img{
  max-width: 100%; max-height: 84vh; border-radius: var(--rayon);
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.lightbox-compteur{
  position:absolute; top:22px; left:50%; transform:translateX(-50%);
  color:#cfc9ba; font-size:.85rem; letter-spacing:.05em;
}
.lightbox-fermer{
  position:absolute; top:18px; right:22px;
  background:none; border:none; color:#fff; font-size:2rem; line-height:1;
  cursor:pointer;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; border:none;
  background: rgba(255,253,249,.12); color:#fff; font-size:1.6rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
}
.lightbox-nav:hover{ background: rgba(255,253,249,.25); }
.lightbox-nav.precedent{ left:20px; }
.lightbox-nav.suivant{ right:20px; }

@media (max-width:760px){
  .carrousel.grand .carrousel-diapo{ height: 300px; }
  .lightbox{ padding:16px; }
  .lightbox-nav{ width:42px; height:42px; }
}

/* ============ PAGE CHAMBRE (détail) ============ */
.chambre-hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:0;
}
.chambre-hero .visuel{ overflow:hidden; }
.chambre-hero .texte{
  background: var(--ardoise-fonce); color:#ece7db;
  display:flex; flex-direction:column; justify-content:center;
  padding: 60px; min-height: 460px;
}
.chambre-hero h1{ color:var(--blanc); font-size: clamp(2.2rem,4vw,3.2rem); }
.chambre-hero .tarif{ font-family:var(--serif); font-size:1.6rem; color: var(--ocre-clair); margin: 14px 0; }
.tags-chambre{ display:flex; gap:10px; flex-wrap:wrap; margin: 18px 0 26px; }
.tags-chambre span{
  border:1px solid rgba(236,231,219,.35); border-radius: 20px;
  padding: 5px 14px; font-size:.8rem;
}

.equipements-liste{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
.equipements-liste li{ padding-left: 26px; position:relative; }
.equipements-liste li::before{
  content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  border-radius:50%; background: var(--ocre);
}

.citation-litteraire{
  border-left: 3px solid var(--ocre);
  padding: 6px 0 6px 26px; margin: 40px 0;
  font-family: var(--serif); font-style:italic; font-size:1.2rem; color: var(--ardoise-fonce);
}
.citation-litteraire cite{ display:block; margin-top:12px; font-style:normal; font-size:.85rem; color:#7a746a; letter-spacing:.03em; }

.galerie-grille{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:12px;
}
.galerie-grille img{ border-radius: var(--rayon); aspect-ratio: 4/3; object-fit:cover; }

/* ============ FAQ / accordéon simple ============ */
.faq-item{ border-bottom:1px solid var(--lin-fonce); }
.faq-question{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding: 20px 0; font-family: var(--serif); font-size:1.1rem; color: var(--ardoise-fonce);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-question::after{ content:"+"; font-size:1.6rem; color:var(--ocre); transition: transform .2s ease; flex-shrink:0; }
.faq-item.ouvert .faq-question::after{ transform: rotate(45deg); }
.faq-reponse{ max-height:0; overflow:hidden; transition: max-height .25s ease; color:#5a564c; }
.faq-item.ouvert .faq-reponse{ max-height: 200px; padding-bottom: 20px; }

/* ============ ADRESSES UTILES (relais) ============ */
.grille-adresses{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:24px; }
.carte-adresse{ background: var(--blanc); border-radius: var(--rayon); padding:24px; border:1px solid var(--lin-fonce); }
.carte-adresse h4{ margin-bottom:4px; }
.carte-adresse .role{ color: var(--ocre); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; display:block; }

/* ============ CONTACT ============ */
.bloc-contact{ display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:center; }
.contact-facade{ width:100%; height:100%; max-height:520px; object-fit:cover; border-radius:3px; }
.contact-adresse{ margin:0 0 28px; }
.contact-adresse a{ border-bottom:1px solid var(--ocre-clair); }
.contact-adresse a:hover{ color: var(--ocre); }
.contact-reveler{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.contact-ligne{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; padding:18px 20px;
  background: var(--blanc); border:1px solid var(--lin-fonce); border-radius: var(--rayon);
}
.contact-titre{ font-family:var(--serif); color:var(--ocre); }
.contact-ligne a{ font-size:1.25rem; font-weight:600; color: var(--ardoise-fonce); word-break:break-word; }
.contact-ligne a:hover{ color: var(--ocre); }

/* ============ PIED DE PAGE ============ */
.pied{
  background: var(--ardoise-fonce);
  color: #cfc9ba;
  padding: 68px 0 0;
}
.pied-grille{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(207,201,186,.15);
}
.pied-bloc h3{
  color: var(--blanc);
  font-size: 1.05rem;
  margin-bottom: 16px;
}
.pied-bloc p{ margin: 0 0 8px; font-size: .92rem; color: #b9b3a3; }
.pied-bloc a:hover{ color: var(--ocre-clair); }
.pied-bas{
  display:flex; justify-content:center;
  padding: 20px 0 26px;
  font-size: .8rem; color: #8d8778;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .bloc-contact{ grid-template-columns:1fr; gap:32px; }
  .contact-facade{ max-height:320px; }
  .chambre-hero{ grid-template-columns: 1fr; }
  .mosaique{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px){
  .burger{ display:flex; }
  .nav-principale{
    position:fixed; inset: 68px 0 0 0; background: var(--lin);
    flex-direction:column; align-items:flex-start; padding: 30px 24px;
    transform: translateX(100%); transition: transform .25s ease;
    overflow-y:auto;
  }
  .nav-principale.ouvert{ transform: translateX(0); }
  .nav-principale > ul{ flex-direction:column; gap:4px; width:100%; }
  .nav-principale > ul > li{ width:100%; }
  .sous-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; display:none; margin-left:14px; }
  .a-sous-menu.ouvert .sous-menu{ display:block; }
  .bouton-nav{ margin-top:18px; }
  .equipements-liste{ grid-template-columns:1fr; }
}