/* Maison d'hôtes La Noirval — feuille de style unique */

:root{
  --navy:#16283F; --navy-deep:#0E1B2C; --navy-mid:#22395A;
  --paper:#F6F4F0; --surface:#FFFFFF; --ink:#1A2330; --soft:#5C6875;
  --rule:#DEDCD6; --parc:#6F7F63; --bois:#A6754B;
  --link:#16283F; --onnavy:#EFEDE7;
  --maxw:1160px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-size:16.5px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--link); text-underline-offset:2px;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--link); outline-offset:2px;
}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff;
  padding:10px 16px; z-index:100; font-family:"Jost",sans-serif; font-size:.8rem;
}
.skip:focus{left:0;}
.inner{max-width:var(--maxw); margin:0 auto; padding-inline:20px;}
.center{text-align:center;}
.narrow{max-width:52ch; margin-inline:auto;}

/* ---------- typographie ---------- */
h1{
  font-family:"Marcellus",Georgia,serif; font-weight:400;
  font-size:clamp(1.95rem,4.6vw,2.75rem); line-height:1.12;
  margin:10px 0 16px; text-wrap:balance;
}
h2{
  font-family:"Marcellus",Georgia,serif; font-weight:400;
  font-size:clamp(1.4rem,3vw,1.85rem); line-height:1.2; margin:0 0 14px; text-wrap:balance;
}
h3{font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:1.2rem; margin:0 0 8px;}
p{margin:0 0 14px;}
.prose{max-width:64ch;}
.lbl{
  font-family:"Jost",system-ui,sans-serif; font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--soft); margin:0 0 8px;
}
.rule{height:1px; background:var(--rule); border:0; margin:0;}
.rule.spaced{margin:52px 0;}
.spaced{margin-top:48px;}
.spaced-t{margin-top:44px;}
.txtlink{font-family:"Jost",sans-serif; font-size:.8rem; letter-spacing:.06em; margin-left:10px;}
.note{
  background:var(--surface); border:1px dashed var(--rule); border-radius:3px;
  padding:13px 16px; font-size:.88rem; color:var(--soft); max-width:64ch;
}

/* ---------- en-tête ---------- */
.site-head{position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--rule);}
.topbar{background:var(--navy); color:var(--onnavy); font-family:"Jost",sans-serif; font-size:.72rem; letter-spacing:.08em;}
.topbar-inner{display:flex; gap:18px; justify-content:flex-end; flex-wrap:wrap; padding:7px 0;}
.topbar a{color:var(--onnavy); text-decoration:none;}
.topbar a:hover{text-decoration:underline;}
.headrow{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); flex:none;}
.brand svg{width:42px; height:42px; flex:none;}
.brand .txt{display:flex; flex-direction:column; line-height:1.15;}
.brand .n{font-family:"Marcellus",Georgia,serif; font-size:1.12rem; letter-spacing:.18em;}
.brand .s{font-family:"Jost",sans-serif; font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--soft);}
nav.main{display:flex; gap:2px; flex-wrap:wrap;}
nav.main a{
  font-family:"Jost",sans-serif; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); padding:8px 10px; border-bottom:2px solid transparent;
}
nav.main a:hover{border-bottom-color:var(--rule);}
nav.main a[aria-current="page"]{border-bottom-color:var(--navy); color:var(--link);}
.burger{
  display:none; background:none; border:1px solid var(--rule); border-radius:3px;
  padding:8px 11px; color:var(--ink); font-family:"Jost",sans-serif; font-size:.75rem;
  letter-spacing:.1em; cursor:pointer;
}
@media (max-width:960px){
  nav.main{display:none; width:100%; flex-direction:column; gap:0; padding-bottom:10px;}
  nav.main.open{display:flex;}
  nav.main a{padding:11px 2px; border-bottom:1px solid var(--rule);}
  .burger{display:block;}
  .headrow{flex-wrap:wrap;}
}

/* ---------- bandes ---------- */
.band{padding-block:64px;}
.band.tight{padding-block:44px;}
.band.navy{background:var(--navy); color:var(--onnavy);}
.band.navy .lbl{color:#9FB2CA;}
.band.navy a:not(.btn){color:#CFE0F2;}

/* ---------- images ---------- */
.ph{margin:0; overflow:hidden; border-radius:3px; background:var(--navy-mid); aspect-ratio:var(--ar,16/9); max-width:100%;}
.ph img{width:100%; height:100%; object-fit:cover;}

/* ---------- hero ---------- */
.hero{position:relative;}
.hero .ph{border-radius:0; min-height:320px;}
.hero-copy{
  position:absolute; inset:auto 0 0 0; padding:40px 0 30px;
  background:linear-gradient(to top, rgba(14,27,44,.88), rgba(14,27,44,0));
  color:#F2F0EA;
}
.hero-copy .kicker{font-family:"Jost",sans-serif; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:#B9CADC; margin:0 0 6px;}
.hero-copy h1{margin:0; font-size:clamp(1.9rem,5.4vw,3.2rem); line-height:1.06;}
.hero-copy .sub{margin:8px 0 0; font-size:1rem; color:#D9E2EC; max-width:46ch;}

/* ---------- blocs deux colonnes ---------- */
.feature{display:grid; grid-template-columns:1fr; gap:28px; align-items:center;}
@media (min-width:880px){
  .feature{grid-template-columns:1fr 1fr; gap:46px;}
  .feature.flip .fig{order:-1;}
}
.fig{display:grid; gap:12px;}
.fig.duo{grid-template-columns:1fr 1fr;}

/* ---------- cartes ---------- */
.cards{display:grid; grid-template-columns:1fr; gap:24px; margin-top:26px;}
@media (min-width:760px){ .cards{grid-template-columns:repeat(3,1fr);} }
@media (min-width:760px){ .cards.four{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));} }
.card{
  position:relative; background:var(--surface); border:1px solid var(--rule);
  border-radius:3px; overflow:hidden; display:flex; flex-direction:column;
}
.card .ph{border-radius:0; border-bottom:1px solid var(--rule);}
.card .body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card .cap{font-family:"Jost",sans-serif; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin:0;}
.card h3{margin:0;}
.card p:not(.cap):not(.price){margin:0; font-size:.95rem;}
.card .price{
  margin:auto 0 0; padding-top:12px; border-top:1px solid var(--rule);
  font-family:"Jost",sans-serif; font-size:.8rem; letter-spacing:.06em; color:var(--link);
}
.card .price b{font-family:"Marcellus",serif; font-size:1.15rem; font-weight:400;}
.card .cover{position:absolute; inset:0;}
.card.flat .body{padding-top:22px;}

/* ---------- listes de faits ---------- */
.facts{display:grid; grid-template-columns:1fr; border-top:1px solid var(--rule); max-width:64ch; margin:0;}
.facts > div{display:flex; justify-content:space-between; gap:20px; padding:9px 0; border-bottom:1px solid var(--rule); font-size:.95rem;}
.facts dt{color:var(--soft); margin:0;}
.facts dd{margin:0; text-align:right; font-variant-numeric:tabular-nums;}
ul.plain{margin:0 0 14px; padding-left:1.15em;}
ul.plain li{margin-bottom:4px;}
ul.chips{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
ul.chips li{
  font-family:"Jost",sans-serif; font-size:.76rem; letter-spacing:.05em;
  border:1px solid var(--rule); border-radius:99px; padding:5px 13px; background:var(--surface);
}
.band.navy ul.chips li{background:transparent; border-color:rgba(242,240,234,.32); color:#EFEDE7;}

/* ---------- fiches chambres ---------- */
.room{display:grid; grid-template-columns:1fr; gap:26px; padding-block:40px; border-top:1px solid var(--rule); margin-top:34px; scroll-margin-top:110px;}
@media (min-width:900px){ .room{grid-template-columns:1.05fr .95fr; gap:46px; align-items:start;} }
.room .gal{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.room .gal .ph:first-child{grid-column:1 / -1;}
.room .meta{display:grid; margin:12px 0 18px;}
.room .meta > div{display:flex; gap:14px; font-size:.94rem; padding:8px 0; border-bottom:1px solid var(--rule);}
.room .meta dt{color:var(--soft); flex:0 0 136px; margin:0;}
.room .meta dd{margin:0;}
@media (max-width:520px){ .room .meta > div{flex-direction:column; gap:2px;} .room .meta dt{flex:none;} }

/* ---------- tableaux ---------- */
.tablebox{overflow-x:auto; border:1px solid var(--rule); border-radius:3px; background:var(--surface); margin-top:26px;}
table{width:100%; border-collapse:collapse; font-size:.95rem;}
caption{text-align:left;}
th,td{text-align:left; padding:13px 15px; border-bottom:1px solid var(--rule); vertical-align:top;}
thead th{font-family:"Jost",sans-serif; font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--soft);}
tbody th{font-family:"Marcellus",serif; font-weight:400; font-size:1.05rem;}
tbody tr:last-child td, tbody tr:last-child th{border-bottom:0;}
.num{font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ---------- boutons ---------- */
.btn{
  display:inline-block; font-family:"Jost",sans-serif; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; padding:13px 24px; border-radius:2px;
  background:var(--navy); color:#F2F0EA; border:1px solid var(--navy); cursor:pointer;
}
.btn:hover{background:var(--navy-deep);}
.btn.ghost{background:transparent; color:var(--link); border-color:var(--rule);}
.btn.ghost:hover{background:var(--surface);}
.band.navy .btn{background:#F2F0EA; color:var(--navy); border-color:#F2F0EA;}
.btn[disabled]{opacity:.5; cursor:default;}

/* ---------- galerie ---------- */
.grid-gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:24px;}
.gitem{padding:0; border:1px solid var(--rule); border-radius:3px; overflow:hidden; background:var(--navy-mid); cursor:zoom-in; aspect-ratio:4/3;}
.gitem img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.gitem:hover img{transform:scale(1.04);}
.lightbox{
  position:fixed; inset:0; z-index:80; background:rgba(14,27,44,.96);
  display:flex; align-items:center; justify-content:center; padding:40px 20px;
}
/* l'attribut hidden doit gagner contre le display:flex ci-dessus */
.lightbox[hidden]{display:none!important;}
.lightbox img{max-width:min(1200px,94vw); max-height:82vh; width:auto; border-radius:2px;}
.lb-close,.lb-prev,.lb-next{
  position:absolute; background:none; border:0; color:#EFEDE7; cursor:pointer; line-height:1;
  font-family:"Jost",sans-serif;
}
.lb-close{top:16px; right:20px; font-size:2.2rem;}
.lb-prev,.lb-next{top:50%; transform:translateY(-50%); font-size:3rem; padding:10px 16px;}
.lb-prev{left:6px;} .lb-next{right:6px;}
.lb-cap{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#B9CADC; font-size:.85rem; margin:0;}

/* ---------- calendrier ---------- */
.cal-tools{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:28px 0 20px;}
.cal-tools label{font-family:"Jost",sans-serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft);}
.navmonth{
  background:var(--surface); border:1px solid var(--rule); border-radius:2px; cursor:pointer;
  color:var(--ink); font-size:1.1rem; line-height:1; padding:7px 14px;
}
select,input,textarea{
  font-family:"Spectral",Georgia,serif; font-size:.95rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:2px; padding:9px 11px; width:100%;
}
select{font-family:"Jost",sans-serif; font-size:.82rem; width:auto;}
textarea{resize:vertical;}
.months{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:720px){ .months{grid-template-columns:repeat(3,1fr);} }
.month{background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:14px 14px 16px;}
.month h3{font-family:"Marcellus",serif; font-size:1rem; margin:0 0 10px; text-align:center;}
.grid7{display:grid; grid-template-columns:repeat(7,1fr); gap:3px;}
.grid7 .dow{font-family:"Jost",sans-serif; font-size:.6rem; letter-spacing:.06em; text-align:center; color:var(--soft); padding-bottom:4px;}
.day{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-variant-numeric:tabular-nums; border-radius:2px; border:1px solid transparent;
}
.day.free{background:rgba(111,127,99,.16);}
.day.busy{background:rgba(22,40,63,.82); color:#E8EDF4;}
.day.past{color:var(--soft); opacity:.35;}
.day.blank{visibility:hidden;}
button.day{cursor:pointer; font-family:inherit; color:inherit;}
.legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; font-family:"Jost",sans-serif; font-size:.74rem; color:var(--soft);}
.legend .sw{display:inline-block; width:13px; height:13px; border-radius:2px; margin-right:6px; vertical-align:-2px;}
.legend .sw.free{background:rgba(111,127,99,.4);}
.legend .sw.busy{background:rgba(22,40,63,.82);}

/* ---------- formulaire ---------- */
form.demande{display:grid; gap:14px; max-width:560px; margin-top:22px;}
.frow{display:grid; gap:14px;}
@media (min-width:560px){ .frow.two{grid-template-columns:1fr 1fr;} }
.field{display:grid; gap:5px;}
.field label{font-family:"Jost",sans-serif; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft);}
.field select{width:100%;}
.piege{position:absolute!important; left:-9999px; width:1px; height:1px;}
.rgpd{font-size:.83rem; color:var(--soft); max-width:60ch; margin:0;}
.formmsg{font-family:"Jost",sans-serif; font-size:.85rem; margin:0; min-height:1.2em;}
.formmsg.ok{color:var(--parc);}
.formmsg.ko{color:var(--bois);}

/* ---------- avis ---------- */
.quotes{display:grid; grid-template-columns:1fr; gap:20px; margin-top:26px;}
@media (min-width:800px){ .quotes{grid-template-columns:repeat(3,1fr);} }
.quote{
  background:var(--surface); border:1px solid var(--rule); border-left:2px solid var(--bois);
  border-radius:3px; padding:20px 22px; margin:0;
}
.quote p{font-size:.95rem; font-style:italic;}
.quote p::before{content:"« ";}
.quote p::after{content:" »";}
.quote .who{font-family:"Jost",sans-serif; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft);}

/* ---------- carte ---------- */
.mapbox{aspect-ratio:1/1; border:1px solid var(--rule); border-radius:3px; overflow:hidden; max-width:100%;}
.mapbox iframe{width:100%; height:100%; border:0; display:block;}
.mapnote{font-size:.82rem; color:var(--soft); margin:10px 0 0;}

/* ---------- pied ---------- */
footer.site{background:var(--navy-deep); color:#C5D0DE; padding-block:46px 32px; font-size:.92rem;}
footer.site a{color:#DCE6F2;}
.fcols{display:grid; grid-template-columns:1fr; gap:28px;}
@media (min-width:760px){ .fcols{grid-template-columns:1.3fr 1fr 1fr;} }
footer.site h2{
  font-family:"Jost",sans-serif; font-size:.68rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:#8FA3BB; margin:0 0 10px;
}
footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.fbot{
  margin-top:32px; padding-top:18px; border-top:1px solid rgba(255,255,255,.13);
  font-size:.8rem; color:#8FA3BB; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .gitem img{transition:none;}
}

@media (max-width:430px){
  .brand svg{width:36px; height:36px;}
  .brand .n{font-size:1rem; letter-spacing:.14em;}
  .brand .s{font-size:.5rem; letter-spacing:.16em;}
  .headrow{gap:10px; padding:12px 0;}
  .topbar-inner{justify-content:space-between;}
}