/* L'Oeil du Condroz — page Nos gîtes */
:root{
  --paper:#ffffff;
  --cream:#f7f6f1;
  --ink:#20261f;
  --muted:#5a6057;
  --olive:#586443;
  --line:rgba(32,38,31,.12);
  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 var(--sans)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{width:min(1380px,calc(100% - 120px));margin:auto}
.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}

.site-header{
  min-height:92px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:10px 4vw;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid rgba(32,38,31,.09);
}
.brand{display:block;justify-self:start}
.brand img{display:block;width:280px;height:auto;max-height:70px;object-fit:contain}
.main-nav{display:flex;align-items:center;justify-content:flex-end;gap:26px;font-size:13px}
.main-nav a:not(.btn){position:relative}
.main-nav a:not(.btn):after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--ink);transition:.25s}
.main-nav a:not(.btn):hover:after,.main-nav a.active:after{right:0}
.menu-toggle{display:none}

.btn{
  display:inline-flex;
  align-items:center;
  gap:15px;
  padding:13px 23px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:13px;
}
.btn-solid{background:var(--olive);border-color:var(--olive);color:#fff}
.btn-dark{background:transparent;color:var(--ink);transition:.2s ease}
.btn-dark:hover{background:var(--ink);color:#fff}

.page-hero{padding:110px 0 82px;background:#fff;border-bottom:1px solid var(--line)}
.page-hero-inner{max-width:1050px}
.eyebrow{text-transform:uppercase;letter-spacing:.34em;font-size:10px;margin:0 0 18px}
.page-hero h1{
  font:400 clamp(48px,6vw,86px)/1.02 var(--serif);
  max-width:1000px;
  margin:0 0 26px;
}
.lead{font-size:17px;max-width:650px;color:var(--muted);margin:0}

.section{padding:100px 0 120px}
.stay-list{display:grid;gap:84px}

.stay-card{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr);
  align-items:center;
  min-height:560px;
}
.stay-card:nth-child(even){grid-template-columns:minmax(380px,.82fr) minmax(0,1.18fr)}
.stay-card:nth-child(even) .stay-image{order:2}
.stay-card:nth-child(even) .stay-content{order:1;margin-right:-36px;margin-left:0}

.stay-image{
  height:560px;
  overflow:hidden;
  border-radius:3px;
  background:#eeeae1;
}
.stay-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.stay-card-gite .stay-image img{object-position:center 55%}
.stay-card-fenil .stay-image img{object-position:center 48%}

.stay-content{
  position:relative;
  z-index:2;
  margin-left:-36px;
  padding:64px 58px;
  background:var(--cream);
  border:1px solid var(--line);
}
.stay-number{
  margin:0 0 30px;
  font:400 58px/1 var(--serif);
  color:rgba(88,100,67,.28);
}
.stay-content h2{
  font:400 clamp(35px,3.6vw,54px)/1.08 var(--serif);
  margin:0 0 22px;
}
.stay-content>p:not(.eyebrow):not(.stay-number){
  margin:0 0 28px;
  max-width:530px;
  color:var(--muted);
}

.visit-placeholder{padding:90px 0;background:#f4f2eb;border-top:1px solid var(--line)}
.visit-placeholder.alt{background:#fff}
.visit-inner{max-width:800px}
.visit-placeholder h2{font:400 clamp(34px,4vw,52px)/1.08 var(--serif);margin:0 0 18px}
.visit-placeholder p:last-child{max-width:650px;color:var(--muted)}

.reservation{
  min-height:240px;
  display:flex;
  align-items:center;
  background:#f3f1e9;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.reservation-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.reservation h2{font:400 40px/1.1 var(--serif);margin:0}

.footer{padding:48px 0 28px;background:#fff}
.footer-main{
  display:grid;
  grid-template-columns:1.1fr 2fr auto;
  align-items:center;
  gap:40px;
}
.footer-brand img{width:250px;max-height:68px;object-fit:contain}
.footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;font-size:11px}
.back-top{font-size:11px;color:#6b7169}

@media(max-width:1100px){
  .container{width:min(100% - 50px,1380px)}
  .main-nav{gap:15px}
  .stay-card,.stay-card:nth-child(even){grid-template-columns:1fr 1fr}
  .stay-content,.stay-card:nth-child(even) .stay-content{margin-left:-22px;margin-right:0;padding:48px 40px}
  .footer-main{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start}
}

@media(max-width:800px){
  .site-header{min-height:70px;display:flex;padding:8px 18px}
  .brand img{width:205px;max-height:52px}
  .menu-toggle{display:flex;flex-direction:column;gap:4px;padding:8px;margin-left:auto;background:none;border:0}
  .menu-toggle span:not(.sr-only){display:block;width:25px;height:1px;background:var(--ink)}
  .main-nav{
    position:absolute;top:70px;left:0;right:0;
    display:none;flex-direction:column;align-items:flex-start;
    background:#fff;padding:22px 24px;border-bottom:1px solid var(--line);
  }
  .main-nav.open{display:flex}
  .page-hero{padding:78px 0 58px}
  .page-hero h1{font-size:48px}
  .section{padding:70px 0 85px}
  .stay-list{gap:58px}
  .stay-card,.stay-card:nth-child(even){display:block;min-height:0}
  .stay-card:nth-child(even) .stay-image,.stay-card:nth-child(even) .stay-content{order:initial}
  .stay-image{height:auto;aspect-ratio:4/3}
  .stay-content,.stay-card:nth-child(even) .stay-content{
    margin:-18px 16px 0;
    padding:42px 28px;
  }
  .stay-number{font-size:46px;margin-bottom:22px}
  .reservation-inner{display:block;padding:55px 0}
  .reservation h2{margin-bottom:26px}
}

@media(max-width:500px){
  .container{width:calc(100% - 36px)}
  .page-hero h1{font-size:42px}
  .stay-content h2{font-size:36px}
  .btn{width:100%;justify-content:center}
}


/* v-mobile — optimisation téléphones */
html, body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe{max-width:100%}
a,button,input,textarea,select{touch-action:manipulation}
p,h1,h2,h3,a,span{overflow-wrap:break-word}
.menu-toggle{min-width:44px;min-height:44px;justify-content:center;align-items:center;cursor:pointer}
@media(max-width:800px){
  .site-header{width:100%}
  .main-nav{
    max-height:calc(100dvh - 68px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:50;
  }
  .main-nav a{min-height:44px;display:flex;align-items:center}
  .main-nav .btn{justify-content:center}
  .footer-links{gap:8px 18px}
  .footer-links a{min-height:36px;display:flex;align-items:center}
}
@media(max-width:500px){
  body{font-size:16px}
  .container{width:calc(100% - 32px)}
  .btn{min-height:46px}
  .hero{height:calc(100svh - 68px);min-height:560px}
  .hero h1{font-size:clamp(38px,11vw,46px)}
  .hero-copy{font-size:15px;line-height:1.6}
  .story-copy{margin:-14px 8px 0;padding:46px 22px}
  .event-body{padding:22px 20px 25px}
  .footer{padding-left:0;padding-right:0}
}
@media(max-width:380px){
  .container{width:calc(100% - 26px)}
  .brand img,.brand-centered img{max-width:185px}
  .hero h1{font-size:36px}
}

@media(max-width:800px){.main-nav{max-height:calc(100dvh - 70px)}}