
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Montserrat:wght@300;400;500&display=swap');
:root{--vert:#394524;--texte:#3f4239;--ligne:rgba(57,69,36,.24);--max:1100px}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;color:var(--texte);font-family:"Montserrat",Arial,sans-serif;font-weight:300;line-height:1.75;background:url("../images/fond-texture.png") repeat fixed;background-size:1100px auto}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
nav{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--ligne);background:rgba(249,246,238,.8);backdrop-filter:blur(8px)}
.nav-container{max-width:var(--max);margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.mini-logo{width:145px}.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-links a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.45rem 0;border-bottom:1px solid transparent}
.nav-links a:hover,.nav-links a.active{border-color:var(--vert)}
.hero,.site-section,.reservation-section{position:relative;scroll-margin-top:76px}
.hero{min-height:calc(100vh - 76px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px 100px}
.hero-logo{width:min(900px,88vw);margin-bottom:10px}.hero-slogan{font-family:"Cormorant Garamond",serif;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--vert)}
.hero-scroll{margin-top:40px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#777}
.site-section,.reservation-section{min-height:100vh;display:flex;align-items:center;border-top:1px solid var(--ligne);padding:88px 28px 130px}
.section-inner{width:100%;max-width:var(--max);margin:auto}.eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#596247;margin-bottom:14px}
h1,h2,h3{font-family:"Cormorant Garamond",serif;color:var(--vert);font-weight:400} h2{font-size:clamp(2.3rem,4vw,3.6rem);line-height:1.05;margin:0 0 20px} h3{font-size:1.7rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}.stack{display:grid;gap:22px}
.content-card{padding:30px;border:1px solid var(--ligne);background:rgba(255,255,255,.12)}
.info-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}.info-item{border-top:1px solid var(--ligne);padding:20px 0}.info-item strong{display:block;color:var(--vert);font-family:"Cormorant Garamond",serif;font-size:1.3rem;font-weight:400}
.reserve-wrap{position:absolute;left:0;right:0;bottom:34px;display:flex;justify-content:center}
.reserve-btn{display:inline-block;min-width:220px;padding:14px 28px;border:1px solid var(--vert);background:var(--vert);color:white;text-align:center;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase}
.media-transition{width:100%;height:50vh;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);background:rgba(255,255,255,.1)}
.media-placeholder{font-family:"Cormorant Garamond",serif;font-size:clamp(1.4rem,3vw,2.4rem);color:rgba(57,69,36,.55);text-align:center;padding:20px}
.reservation-video-placeholder{position:absolute;inset:0;background:linear-gradient(rgba(247,244,237,.62),rgba(247,244,237,.62)),url("../images/fond-texture.png");background-size:cover;z-index:0}
.reservation-section .section-inner,.reservation-section .reserve-wrap{position:relative;z-index:2}
.form{display:grid;gap:14px}label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vert)}input,select,textarea{width:100%;padding:14px;border:1px solid var(--ligne);background:rgba(255,255,255,.48);font:inherit}textarea{min-height:130px}
footer{text-align:center;padding:42px 24px 52px;border-top:1px solid var(--ligne)}footer img{width:230px;margin:0 auto 12px}footer p{margin:auto;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#777}
@media(max-width:800px){.nav-container{flex-direction:column;align-items:flex-start}.grid-2,.info-list{grid-template-columns:1fr}.site-section,.reservation-section{min-height:auto;padding:68px 22px 120px}.media-transition{height:38vh}}

.video-break{
  position:relative;
  width:100%;
  height:78vh;
  min-height:520px;
  overflow:hidden;
  margin:0;
  background:#ece8dd;
}
.transition-video,.video-fallback,.video-shade{
  position:absolute; inset:0; width:100%; height:100%;
}
.transition-video{object-fit:cover; z-index:1;}
.video-fallback{
  z-index:0; display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(to bottom,rgba(249,246,238,.72),rgba(249,246,238,.06) 18%,rgba(249,246,238,.06) 82%,rgba(249,246,238,.72)),
    url("../images/fond-texture.png") center/cover;
  color:rgba(57,69,36,.42);
  font-family:"Cormorant Garamond",serif;
  font-size:1.3rem;
}
.video-shade{
  z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(249,246,238,.75) 0%,
    rgba(249,246,238,.15) 14%,
    rgba(249,246,238,0) 32%,
    rgba(249,246,238,0) 70%,
    rgba(249,246,238,.12) 88%,
    rgba(249,246,238,.76) 100%);
}
#table{border-top:0}
@media(max-width:800px){.video-break{height:62vh;min-height:420px}}


/* Avis clients */
.review-card{position:relative}
.review-source{
  margin-bottom:14px;
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#77796e;
}
.review-text{
  margin:0 0 14px;
  color:var(--vert);
  font-family:"Cormorant Garamond",serif;
  font-size:1.45rem;
  line-height:1.45;
}
.review-author{
  font-size:.68rem;
  letter-spacing:.1em;
  color:#77796e;
}
.room-booking{
  padding:28px 30px;
  border:1px solid var(--ligne);
  background:rgba(57,69,36,.06);
  text-align:center;
}
.room-booking p{
  margin:0 0 16px;
  font-family:"Cormorant Garamond",serif;
  font-size:1.5rem;
  color:var(--vert);
}
.room-btn{
  display:inline-block;
  padding:13px 22px;
  border:1px solid var(--vert);
  color:var(--vert);
  background:rgba(255,255,255,.24);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.room-btn:hover{
  background:var(--vert);
  color:#fff;
}

/* Bandeaux photos : déplacement de droite vers la gauche */
.photo-marquee{
  position:relative;
  width:100%;
  height:50vh;
  min-height:420px;
  overflow:hidden;
  border-top:1px solid var(--ligne);
  border-bottom:1px solid var(--ligne);
}
.photo-track{
  height:100%;
  display:flex;
  width:max-content;
  animation:scroll-left 36s linear infinite;
  will-change:transform;
}
.photo-slot{
  flex:0 0 min(38vw,560px);
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid rgba(57,69,36,.16);
  background:
    linear-gradient(rgba(249,246,238,.28),rgba(249,246,238,.28)),
    url("../images/fond-texture.png") center/cover;
  color:rgba(57,69,36,.42);
  font-family:"Cormorant Garamond",serif;
  font-size:1.5rem;
}
@keyframes scroll-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.photo-marquee:hover .photo-track{animation-play-state:paused}

@media(max-width:800px){
  .photo-marquee{height:38vh;min-height:300px}
  .photo-slot{flex-basis:78vw}
}


/* V7 — carrousels d'avis Google : légers, sans bibliothèque externe */
.review-carousel{
  min-height:310px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.review-head .review-source{margin-bottom:0}
.review-rating{font-size:.72rem;letter-spacing:.14em;color:#8a7b43;white-space:nowrap}
.review-carousel .review-text,.review-carousel .review-author{transition:opacity .42s ease,transform .42s ease}
.review-carousel.is-changing .review-text,.review-carousel.is-changing .review-author{opacity:0;transform:translateY(7px)}
.review-progress{height:1px;margin-top:24px;background:rgba(57,69,36,.10);overflow:hidden}
.review-progress span{display:block;width:100%;height:100%;background:rgba(57,69,36,.46);transform-origin:left center}
@keyframes review-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .review-carousel .review-text,.review-carousel .review-author{transition:none}
  .review-progress{display:none}
}
@media(max-width:800px){.review-carousel{min-height:280px}}


/* V8 — navigation manuelle discrète des avis */
.review-controls{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  margin-top:18px;
}
.review-arrow{
  width:31px;
  height:31px;
  border:1px solid rgba(57,69,36,.22);
  border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#394524;
  font:300 1.35rem/1 Georgia,serif;
  cursor:pointer;
  display:grid;
  place-items:center;
  padding:0 0 2px;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.review-arrow:hover{
  background:rgba(57,69,36,.07);
  border-color:rgba(57,69,36,.42);
  transform:translateY(-1px);
}
.review-arrow:focus-visible{outline:2px solid rgba(57,69,36,.45);outline-offset:2px}
@media(max-width:800px){.review-arrow{width:34px;height:34px}}

/* V9 — prix d'accueil et double appel à l'action */
.hero-price-badge{
  width:126px;
  height:126px;
  border-radius:50%;
  border:1px solid rgba(57,69,36,.36);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  margin-top:10px;
  color:var(--vert);
  background:rgba(255,255,255,.18);
}
.hero-price-badge span{
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero-price-badge strong{
  font-family:"Cormorant Garamond",serif;
  font-size:2.35rem;
  line-height:1;
  font-weight:400;
}
.action-wrap{
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.footer-contact{
  margin-top:16px;
  line-height:1.8;
  text-transform:none;
  letter-spacing:.04em;
}
.footer-contact a:hover{text-decoration:underline}
@media(max-width:800px){
  .hero-price-badge{width:112px;height:112px}
  .hero-price-badge strong{font-size:2.1rem}
  .action-wrap .reserve-btn{min-width:250px}
}

/* V11 — photos réelles et textes éditoriaux */
.photo-slot{padding:0;background:#eee;color:transparent;overflow:hidden}
.photo-slot img{width:100%;height:100%;display:block;object-fit:cover}
.manifesto{margin-top:1.6rem;font-family:"Cormorant Garamond",serif;font-size:1.25rem;line-height:1.45;color:var(--vert)}
@media(max-width:800px){.manifesto{font-size:1.15rem}}

/* V12 — photo temporaire à la place de la première vidéo.
   Le jour où media/accueil-table.mp4 est ajouté, la vidéo prend automatiquement sa place. */
.photo-video-break .transition-video{opacity:0;transition:opacity .8s ease}
.photo-video-break .transition-video.is-ready{opacity:1}
.photo-video-break .photo-fallback{
  display:block;
  background:url("../images/accueil-transition.jpg") center center/cover no-repeat;
  opacity:1;
  transition:opacity .8s ease;
}
.photo-video-break .photo-fallback.is-hidden{opacity:0}

/* V12 — bandeaux plus lents et boucle continue */
.photo-track{animation-duration:68s;}
.photo-slot img{width:100%;height:100%;object-fit:cover;display:block}

/* Aucun second média pour l'instant : fond simple de la section réservation/contact */
.reservation-video-placeholder{display:none}
.reservation-section{background:var(--fond, #f7f4ed)}

/* V13 — boucle photo réellement continue : deux groupes strictement identiques. */
.photo-track{display:flex;width:max-content;animation:scroll-left-v13 82s linear infinite;}
.photo-group{display:flex;flex:0 0 auto;height:100%;}
@keyframes scroll-left-v13{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* V14 — boucle pilotée en JavaScript sur la largeur exacte du premier groupe.
   On désactive l'ancienne animation CSS pour éviter tout blanc au raccord. */
.photo-track{animation:none !important; transform:translate3d(0,0,0);}
.photo-marquee:hover .photo-track{animation-play-state:initial;}


/* V15 — carrousel photo en boucle avec navigation manuelle */
.photo-marquee{
  position:relative;
  overflow:hidden;
}
.photo-viewport{
  width:100%;
  height:100%;
  overflow:hidden;
}
.photo-track{
  display:flex;
  width:max-content;
  height:100%;
  animation:none !important;
  will-change:transform;
}
.photo-track .photo-slot{
  flex:0 0 min(38vw,560px);
}
.photo-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(30,34,24,.28);
  color:#fff;
  font-family:"Cormorant Garamond",serif;
  font-size:2rem;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:background .25s ease, transform .25s ease;
}
.photo-arrow:hover{background:rgba(30,34,24,.48);}
.photo-arrow:active{transform:translateY(-50%) scale(.95);}
.photo-prev{left:18px;}
.photo-next{right:18px;}
@media(max-width:800px){
  .photo-track .photo-slot{flex-basis:78vw;}
  .photo-arrow{width:40px;height:40px;font-size:1.8rem;}
  .photo-prev{left:10px;}
  .photo-next{right:10px;}
}


/* V16 — chiffres du prix alignés + défilement continu piloté en JS */
.hero-price-badge strong{
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.photo-track{transition:none !important;}

/* V17 — horaires de service et itinéraires GPS */
.service-time{grid-column:1/-1}
.arrival-note{display:block;margin-top:9px}
.direction-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.direction-links a{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ligne);border-radius:999px;padding:8px 13px;color:var(--vert);text-decoration:none;font-size:.88rem;transition:.2s ease;background:rgba(255,255,255,.28)}
.direction-links a:hover{border-color:var(--vert);background:rgba(57,69,36,.06)}
