/* ============================================================
DOMAINE SLOW-LIFE — MASTER STYLESHEET
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Cinzel:wght@400;500;600&family=Raleway:wght@300;400;500&display=swap');

:root{

--ivory:#f8f5ef;
--linen:#ede8de;
--gold:#b49a5e;
--gold-light:#d4bc84;

--charcoal:#1e1e1e;
--slate:#2c3030;

--white:#ffffff;

--nav-h:120px;

}

/* ============================================================
RESET
============================================================ */

*{
margin:0;
padding:0;
box-sizing:border-box;
max-width:100%;
}

html{
overflow-x:hidden;
}

body{

font-family:'EB Garamond',serif;
background:var(--ivory);
color:var(--charcoal);
overflow-x:hidden;
overflow-y:scroll;
width:100%;

}

img{
width:100%;
max-width:100%;
display:block;
object-fit:cover;
}

a{
text-decoration:none;
color:inherit;
}

/* ============================================================
NAVBAR
============================================================ */

.nav{

position:fixed;
top:0;
left:0;
right:0;

height:var(--nav-h);

display:flex;
align-items:center;
justify-content:space-between;

padding:0 48px;

background:var(--charcoal);

z-index:1000;

box-shadow:0 2px 24px rgba(0,0,0,.3);

overflow:hidden;

}

.nav-left,
.nav-right{

display:flex;
gap:32px;
align-items:center;

flex:1;

}

.nav-right{
justify-content:flex-end;
}

.nav-link{

font-family:'Cinzel',serif;

font-size:.72rem;

letter-spacing:.14em;

text-transform:uppercase;

color:white;

position:relative;

padding-bottom:3px;

}

.nav-link::after{

content:'';

position:absolute;

left:0;
right:0;
bottom:0;

height:1px;

background:var(--gold);

transform:scaleX(0);

transition:.3s;

}

.nav-link:hover::after,
.nav-link.active::after{

transform:scaleX(1);

}

.nav-link.active{

color:var(--gold);

}

/* logo */

.nav-logo-img{

height:108px;
width:auto;

}

@media(max-width:1024px){
.nav-logo-img{
height:54px;
}
}

@media(max-width:480px){
.nav-logo-img{
height:46px;
}
}

/* bouton réserver */

.nav-book{

font-family:'Cinzel',serif;

font-size:.7rem;

letter-spacing:.15em;

text-transform:uppercase;

padding:10px 22px;

background:var(--gold);

color:white;

border:1px solid var(--gold);

transition:.3s;

}

.nav-book:hover{

background:transparent;
color:var(--gold);

}

/* burger */

.nav-burger{

display:none;

flex-direction:column;

gap:5px;

background:none;
border:none;

cursor:pointer;

}

.nav-burger span{

width:24px;
height:2px;

background:white;

}

/* ============================================================
MENU MOBILE
============================================================ */

.nav-mobile{

display:none;

position:fixed;

top:var(--nav-h);
left:0;
right:0;

background:var(--charcoal);

flex-direction:column;

padding:32px;

gap:24px;

z-index:999;

}

.nav-mobile.open{
display:flex;
}

/* ============================================================
HERO PREMIUM
============================================================ */

.page-hero{

position:relative;

height:100vh;

min-height:640px;

overflow:hidden;

display:flex;

align-items:flex-end;

padding-top:var(--nav-h);

padding-bottom:80px;

}

.page-hero-img{

position:absolute;

inset:0;

background-size:cover;
background-position:center;

transform:scale(1.08);

animation:heroZoom 12s ease-out forwards;

}

@keyframes heroZoom{

from{
transform:scale(1.12);
}

to{
transform:scale(1);
}

}

.page-hero-img::after{

content:'';

position:absolute;

inset:0;

background:linear-gradient(to top,
rgba(0,0,0,.65),
rgba(0,0,0,.2),
transparent);

}

.page-hero-content{

position:relative;

z-index:1;

padding:0 80px;

}

.page-hero-kicker{

font-family:'Cinzel',serif;

font-size:.65rem;

letter-spacing:.3em;

color:var(--gold);

margin-bottom:12px;

text-transform:uppercase;

}

.page-hero-title{

font-size:clamp(2.6rem,5vw,4.5rem);

color:white;

font-weight:400;

line-height:1.1;

}

/* ============================================================
SECTIONS
============================================================ */

.section{

padding:96px 80px;

}

.section-linen{

background:var(--linen);

}

.section-kicker{

font-family:'Cinzel',serif;

font-size:.65rem;

letter-spacing:.3em;

color:var(--gold);

margin-bottom:16px;

text-transform:uppercase;

}

.section-title{

font-size:clamp(2rem,3.5vw,3rem);

margin-bottom:24px;

font-weight:400;

}

.section-body{

font-family:'Raleway',sans-serif;

font-size:1rem;

line-height:1.8;

color:#555;

max-width:640px;

}

.divider{

width:40px;

height:1px;

background:var(--gold);

margin:24px 0;

}

/* ============================================================
GALERIE PREMIUM
============================================================ */

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(300px,1fr));

gap:10px;

}

.gallery-grid img{

height:260px;

object-fit:cover;

cursor:pointer;

transition:transform .5s;

}

.gallery-grid img:hover{

transform:scale(1.05);

}

/* ============================================================
FOOTER
============================================================ */

.footer{

background:#0a0d0a;

color:rgba(255,255,255,.55);

padding:72px 80px 40px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:48px;

margin-bottom:56px;

}

.footer-brand h3{

font-family:'Cinzel',serif;

color:white;

letter-spacing:.2em;

margin-bottom:6px;

}

.footer-brand p{

font-size:.55rem;

letter-spacing:.35em;

color:var(--gold);

}

.footer-col h4{

font-family:'Cinzel',serif;

font-size:.7rem;

letter-spacing:.2em;

color:var(--gold);

margin-bottom:20px;

text-transform:uppercase;

}

.footer-col ul{

list-style:none;

}

.footer-col li{

margin-bottom:10px;

}

.footer-col a{

font-family:'Raleway',sans-serif;

font-size:.9rem;

transition:.3s;

}

.footer-col a:hover{

color:var(--gold);

}

.footer-bar{

border-top:1px solid rgba(255,255,255,.1);

padding-top:28px;

display:flex;

justify-content:space-between;

font-size:.8rem;

}

/* ============================================================
RESPONSIVE
============================================================ */

@media(max-width:1024px){

.section{

padding:72px 40px;

}

.page-hero-content{

padding:0 40px;

}

.footer{

padding:56px 40px;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:1024px){

:root{
--nav-h:70px;
}

.nav{
padding:0 20px;
}

.nav-left,
.nav-right{
display:none;
}

.nav-burger{
display:flex;
}

.section{
padding:52px 20px;
}

.page-hero{
padding-bottom:48px;
}

.page-hero-content{
padding:0 20px;
}

.page-hero-title{
font-size:clamp(2rem,8vw,3rem);
}

.footer{
padding:48px 20px 32px;
}

.footer-grid{
grid-template-columns:1fr;
gap:28px;
}

.footer-bar{
flex-direction:column;
gap:10px;
text-align:center;
}

.gallery-grid img{
height:200px;
}

}

/* ──────────────────────────────────────────────────────────
   MOBILE XS  ≤ 480 px
────────────────────────────────────────────────────────── */
@media(max-width:480px){

:root{
--nav-h:60px;
}

.nav{
padding:0 16px;
}

.section{
padding:40px 16px;
}

.section-title{
font-size:clamp(1.6rem,7vw,2.2rem);
}

.section-body{
font-size:.93rem;
}

.page-hero-content{
padding:0 16px;
}

.page-hero-title{
font-size:clamp(1.7rem,9vw,2.4rem);
}

.footer{
padding:40px 16px 28px;
}

.btn{
padding:12px 22px;
font-size:.65rem;
}

.nav-mobile{
padding:24px 20px;
gap:18px;
}

.gallery-grid{
grid-template-columns:1fr 1fr;
}

.gallery-grid img{
height:160px;
}

}
/* ── FAQ Accordion ── */
.faq-item { border-bottom: 1px solid rgba(255,255,255,.1); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-family: 'Raleway', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--white);
  text-align: left;
  gap: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.faq-q span {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform .3s;
}
.faq-q.open span { transform: rotate(45deg); }
.faq-a {
  display: none;
  padding: 0 0 20px;
  font-family: 'Raleway', sans-serif;
  font-size: .88rem;
  color: rgba(255,255,255,.6);
  line-height: 1.7;
}
.faq-a.open { display: block; }

/* ── Section dark ── */
.section-dark {
  background: var(--slate);
  color: var(--white);
}
.section-dark .section-body { color: rgba(255,255,255,.65); }
.section-dark .section-title { color: var(--white); }
.section-dark .section-kicker { color: var(--gold); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid var(--gold);
  color: var(--charcoal);
  background: transparent;
  cursor: pointer;
  transition: background .3s, color .3s;
  text-decoration: none;
}
.btn:hover { background: var(--gold); color: var(--white); }
.btn-gold { background: var(--gold); color: var(--white) !important; }
.btn-gold:hover { background: transparent; color: var(--gold) !important; }
.btn-white { border-color: var(--white); color: var(--white); }
.btn-white:hover { background: var(--white); color: var(--charcoal); }

/* ============================================================
SOCIAL LINKS (footer)
============================================================ */

.social-links{
display:flex;
gap:20px;
align-items:center;
flex-wrap:wrap;
}

.social-links a{
display:flex;
align-items:center;
gap:6px;
font-family:'Raleway',sans-serif;
font-size:.8rem;
color:rgba(255,255,255,.55);
transition:.3s;
}

.social-links a:hover{
color:var(--gold);
}

.social-links svg{
width:16px;
height:16px;
fill:currentColor;
flex-shrink:0;
}

.footer-brand .desc{
font-family:'Raleway',sans-serif;
font-size:.85rem;
line-height:1.7;
margin-top:12px;
color:rgba(255,255,255,.45);
}

/* ============================================================
PREVENT HORIZONTAL OVERFLOW — CRITICAL FOR MOBILE
============================================================ */

/* Tables can overflow on mobile */
table{
max-width:100%;
overflow-x:auto;
display:block;
}

/* Iframes (Google Maps) */
iframe{
max-width:100%;
}

/* Large section padding fix on very small screens */
@media(max-width:380px){
.section{
padding:36px 14px;
}
.page-hero-content{
padding:0 14px;
}
.footer{
padding:36px 14px 28px;
}
.nav{
padding:0 14px;
}
}

/* ============================================================
MODE PORTRAIT UNIQUEMENT SUR MOBILE
============================================================ */

/* Portables classiques en paysage uniquement (max-height garantit qu'on exclut
   les tablettes et téléphones pliables dont l'écran dépasse 500 px de hauteur) */
@media screen and (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {

body > *{
display:none !important;
}

body::after{
content:'↩ Veuillez tourner votre téléphone en mode portrait';
display:flex;
position:fixed;
inset:0;
align-items:center;
justify-content:center;
background:var(--charcoal);
color:var(--gold);
font-family:'Cinzel',serif;
font-size:.9rem;
letter-spacing:.12em;
text-align:center;
padding:32px;
z-index:99999;
}

}


/* Logo centré sur mobile */

@media (max-width:1024px){
  .nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .nav-logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    margin:0;
    z-index:1001;
  }

  .nav-burger{
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:1002;
  }
}


/* Correction photo café */
.photo-band div{
  overflow:hidden;
}

.photo-band img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}