/* ==========================================================================
   Mare e Macchia — Design system partagé (toutes les pages)
   Charte validée 24/07/2026 : titres The Seasons Light, fonds clairs,
   olive foncé réservé aux textes + footer, doré quasi absent.
   ========================================================================== */

:root{
  --kaki:#9C947C;          /* couleur d'identité : bordures, filets, touches */
  --kaki-pastel:#F1EFE5;   /* kaki ULTRA léger, se fond presque dans le blanc (Andrea 24/07 : l'ancien #E9E5D7 = « vert caca d'oie », banni) */
  --kaki-maquis:#565A3C;   /* labels & textes secondaires accessibles */
  --olive:#3E4127;         /* titres & texte sur fond clair, footer */
  --creme:#F4F1EA;
  --blanc:#FDFCF9;
  --beige:#F5F2EA;
  --dore:#B79A5B;          /* filet fin / hover uniquement — jamais d'aplat */
  --olive-soft:#55563f;
  /* Police de titre — swap en une ligne (kit jcp0tpf) */
  --font-display:"the-seasons-1","the-seasons-2",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);font-weight:300;color:var(--olive);
  background:var(--blanc);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
/* `height:auto` est OBLIGATOIRE dès qu'on pose des attributs width/height sur les
   <img> : sans lui, l'attribut height fait loi et l'image s'étire (photo du chef
   affichée en géant sur la page Atelier). max-width seul ne contraint que la largeur. */
a{color:inherit;text-decoration:none}

/* ---------- Lenis smooth scroll ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Typographie ---------- */
h1,h2,h3,.serif{font-family:var(--font-display);font-weight:300;line-height:1.12;letter-spacing:.005em}
.eyebrow{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--kaki-maquis)}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--olive-soft);font-weight:300}

/* ---------- Utilitaires ---------- */
.wrap{width:min(1240px,92vw);margin-inline:auto}
.wrap--narrow{width:min(880px,92vw);margin-inline:auto}
.section{padding:clamp(5rem,11vh,9rem) 0}
.section--pastel{background:var(--kaki-pastel)}
.section--creme{background:var(--creme)}
.section--beige{background:var(--beige)}
.section--blanc{background:var(--blanc)}
.section--blanc .quote{background:var(--creme)}
/* Titre de section : à GAUCHE et aligné sur la grille par défaut (.head--center pour centrer) */
.section__head{max-width:56ch;margin:0 0 clamp(2.5rem,5vh,3.5rem)}
.head--left{max-width:56ch;margin:0 0 clamp(2.5rem,5vh,3.5rem);text-align:left}
.head--center{max-width:56ch;margin:0 auto clamp(2.5rem,5vh,3.5rem);text-align:center}
.head--center svg.head-mark{margin-inline:auto}
.section__head.center{text-align:center;margin-inline:auto} /* alias rétro-compat */
.section__head h2{font-size:clamp(2rem,4vw,3.1rem);margin:.6rem 0}
.anim-title{will-change:transform}
/* Titres romain + italique (The Seasons i3) : un mot en <em> */
h1 em,h2 em,h3 em,.serif em,.anim-title em,.menu-row__title em,.split__name em{font-style:italic;font-weight:inherit}
.split-line-inner{display:block}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:400;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.16em;padding:.75em 1.5em;border-radius:2px;cursor:pointer;transition:all .3s var(--ease)}
.btn--line{background:transparent;border:1px solid var(--olive);color:var(--olive)}
.btn--line:hover{background:var(--olive);color:var(--creme)}
.btn--solid{background:var(--olive);border:1px solid var(--olive);color:var(--creme)}
.btn--solid:hover{background:var(--kaki-maquis);border-color:var(--kaki-maquis)}
.btn--ghost{background:transparent;border:1px solid rgba(253,252,249,.6);color:var(--blanc)}
.nav a.btn{padding-bottom:.75em} /* la règle .nav a (padding-bottom:3px, pour le souligné) décentrait le texte du bouton */
.btn--ghost:hover{background:var(--blanc);color:var(--olive);border-color:var(--blanc)}

.link-more{display:inline-flex;align-items:center;gap:.5em;font-weight:400;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--olive);padding-bottom:.35em;position:relative}
.link-more::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--dore);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.link-more:hover::after{transform:scaleX(1)}
.link-more .arrow{transition:transform .3s var(--ease)}
.link-more--clair{color:var(--creme)}
.btn--petit{}
.link-more:hover .arrow{transform:translateX(4px)}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem clamp(1.2rem,4vw,3rem);transition:background .6s var(--ease),padding .6s var(--ease),box-shadow .6s var(--ease)}
.header.scrolled{background:rgba(253,252,249,.94);backdrop-filter:blur(8px);padding-block:1rem;box-shadow:0 1px 0 rgba(156,148,124,.25)}
.logo{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.02em;color:var(--blanc);transition:color .6s var(--ease)}
.logo .amp{color:var(--dore);font-style:italic}
.header.scrolled .logo{color:var(--olive)}
/* Header sur page à hero clair : force le mode sombre d'entrée de jeu */
.header--solid .logo{color:var(--olive)}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;font-weight:400;color:var(--blanc);opacity:.92;
  position:relative;padding-bottom:3px;transition:color .6s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);
  transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header.scrolled .nav a,.header--solid .nav a{color:var(--kaki-maquis)}
.nav .lang{opacity:.7;letter-spacing:.1em}
.header.scrolled .btn--ghost,.header--solid .btn--ghost{border-color:var(--olive);color:var(--olive)}
.header.scrolled .btn--ghost:hover,.header--solid .btn--ghost:hover{background:var(--olive);color:var(--creme)}
.header--solid .burger span{background:var(--olive)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:1.5px;background:var(--blanc);transition:.4s var(--ease)}
.header.scrolled .burger span{background:var(--olive)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--blanc);overflow:hidden}
.hero--page{min-height:66vh}
.hero__img{position:absolute;inset:-9% 0;z-index:-2;will-change:transform}
.hero__img img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(30,32,20,.78) 0%,rgba(30,32,20,.34) 45%,rgba(30,32,20,.42) 100%)}
.hero__inner{width:min(1240px,92vw);margin-inline:auto;padding-bottom:clamp(2rem,5vh,3.5rem);padding-top:8rem}
.hero .eyebrow{color:rgba(253,252,249,.85)}
.hero h1{font-size:clamp(2.6rem,6.2vw,5.3rem);max-width:16ch;margin:.5rem 0 1.2rem}
.hero--page h1{font-size:clamp(2.4rem,5.4vw,4.4rem)}
.hero__sub{max-width:46ch;font-size:clamp(1rem,1.5vw,1.18rem);color:rgba(253,252,249,.9);font-weight:300}

/* Barre de réservation */
.resa{margin-top:clamp(2rem,4vh,2.8rem);background:rgba(253,252,249,.96);color:var(--olive);border-radius:3px;
  display:flex;align-items:stretch;flex-wrap:wrap;box-shadow:0 18px 50px -20px rgba(30,32,20,.5);max-width:860px}
.resa__field{flex:1 1 0;min-width:150px;padding:1.05rem 1.4rem;position:relative}
.resa__field + .resa__field::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(156,148,124,.4)}
.resa__label{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--kaki-maquis);margin-bottom:.3rem}
.resa__value{font-family:var(--font-display);font-size:1.15rem;color:var(--olive)}
.resa__value.muted{color:var(--kaki)}
.resa__cta{flex:0 0 auto;display:flex}
.resa__cta .btn{border-radius:0 3px 3px 0;padding-inline:1.7rem}
@media(max-width:680px){
  .resa{flex-direction:column;max-width:none}
  .resa__field + .resa__field::before{display:none}
  .resa__field{border-top:1px solid rgba(156,148,124,.3)}
  .resa__field:first-child{border-top:0}
  .resa__cta{padding:1rem 1.4rem 1.3rem}
  .resa__cta .btn{width:100%;justify-content:center;border-radius:2px}
}

/* ---------- Grille de portes (cartes photo) ---------- */
.portes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.porte{position:relative;display:block;overflow:hidden;border-radius:3px;aspect-ratio:3/4;color:var(--blanc);will-change:transform,clip-path}
.porte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.porte:hover img,.porte.tap-active img{transform:scale(1.06)}
.porte__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,32,20,.7) 6%,rgba(30,32,20,.05) 55%)}
.porte__body{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.8rem}
.porte__num{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.porte h3{font-size:1.8rem;margin:.35rem 0 .5rem}
.porte p{font-size:.92rem;color:rgba(253,252,249,.88);max-width:26ch}
.porte__more{margin-top:1rem;display:inline-flex;gap:.5em;font-size:.74rem;text-transform:uppercase;letter-spacing:.16em}
.porte__more .arrow{transition:transform .3s var(--ease)}
.porte:hover .porte__more .arrow,.porte.tap-active .porte__more .arrow{transform:translateX(5px)}
.porte::after{content:"";position:absolute;inset:0;border:1px solid rgba(183,154,91,0);transition:border-color .5s var(--ease);border-radius:3px;pointer-events:none}
.porte:hover::after,.porte.tap-active::after{border-color:rgba(183,154,91,.55)}

/* ---------- Bloc suite / split média + texte ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split + .split{margin-top:clamp(4rem,9vh,7rem)}
.split__media{overflow:hidden;border-radius:3px;aspect-ratio:5/4;will-change:transform,clip-path}
.split__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.split__media:hover img{transform:scale(1.05)}
.split--rev .split__media{order:2}
.split__name{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:.4rem 0 .3rem}
.split__meta{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--kaki-maquis);margin-bottom:1.3rem}
.split__meta b{color:var(--dore);font-weight:400}
.split p{max-width:46ch;margin-bottom:1.1rem}
.taglist{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 1.8rem}
.taglist li{font-size:.76rem;letter-spacing:.03em;color:var(--kaki-maquis);border:1px solid rgba(156,148,124,.5);border-radius:2px;padding:.35em .8em}

/* ---------- Section photo plein cadre + texte (scrim) ---------- */
.feature{position:relative;color:var(--blanc);overflow:hidden}
.feature__img{position:absolute;inset:-9% 0;z-index:-2;will-change:transform}
.feature__img img{width:100%;height:100%;object-fit:cover}
.feature__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(30,32,20,.78) 0%,rgba(30,32,20,.5) 45%,rgba(30,32,20,.12) 100%)}
.feature--right .feature__scrim{background:linear-gradient(255deg,rgba(30,32,20,.78) 0%,rgba(30,32,20,.5) 45%,rgba(30,32,20,.12) 100%)}
.feature .wrap{padding-block:clamp(6rem,14vh,10rem)}
.feature__box{max-width:34rem}
.feature--right .feature__box{margin-left:auto}
.feature h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin:.6rem 0 1.1rem}
.feature p{color:rgba(253,252,249,.9);margin-bottom:1rem;max-width:42ch}
.badge{display:inline-flex;align-items:center;gap:.6em;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;
  border:1px solid rgba(183,154,91,.6);color:var(--dore);padding:.5em 1em;border-radius:2px;margin-bottom:1.6rem}
.stats{display:flex;gap:2.4rem;margin:1.8rem 0}
.stats .n{font-family:var(--font-display);font-size:2.2rem;display:block;line-height:1}
.stats .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:rgba(253,252,249,.75)}

/* ---------- Média + texte sur fond clair (ex-Atelier, désormais clair) ---------- */
.mediatext{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.mediatext--rev >.mediatext__media{order:2}
.mediatext__media{overflow:hidden;border-radius:3px;aspect-ratio:4/5;will-change:transform,clip-path}
.mediatext__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.mediatext__media:hover img{transform:scale(1.05)}
.mediatext h2{font-size:clamp(2rem,4.4vw,3.3rem);margin:.6rem 0 1.2rem}
.mediatext p{color:var(--olive-soft);margin-bottom:1rem;max-width:44ch}
.signature{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--olive);margin:1.4rem 0 1.8rem}

/* ---------- Grille de cartes services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(156,148,124,.35);border:1px solid rgba(156,148,124,.35);border-radius:3px;overflow:hidden}
.svc{background:var(--blanc);padding:2rem 1.8rem;transition:background .4s var(--ease)}
.svc:hover{background:var(--creme)}
.svc__k{font-family:var(--font-display);font-size:1.4rem;margin-bottom:.4rem}
.svc__d{font-size:.9rem;color:var(--olive-soft)}
.svc__tag{display:inline-block;margin-top:.8rem;font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--kaki-maquis)}

/* Bande de rappel résa directe — entre deux filets fins, sans boîte (Andrea 24/07) */
.direct{margin-top:2.6rem;max-width:940px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  border-top:1px solid rgba(156,148,124,.3);border-bottom:1px solid rgba(156,148,124,.3);padding:1.5rem 0 1.5rem calc(56px + 1.5rem)}
.btn--kaki{background:#43432A;border:1px solid #43432A;color:var(--blanc)}
.btn--kaki:hover{background:transparent;color:#43432A}
.direct h3{font-size:clamp(1.4rem,2.5vw,1.9rem);margin-bottom:.4rem}
.direct p{max-width:56ch;font-size:.92rem;color:var(--olive-soft);line-height:1.5}

/* ---------- Preuve sociale ---------- */
.scores{display:flex;justify-content:center;gap:clamp(2rem,6vw,5rem);flex-wrap:wrap;text-align:center;margin-bottom:clamp(3rem,6vh,4.5rem)}
.score .n{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;display:block}
.score .l{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--kaki-maquis);margin-top:.5rem}
.score + .score{position:relative}
.score + .score::before{content:"";position:absolute;left:calc(-1 * clamp(1rem,3vw,2.5rem));top:10%;bottom:10%;width:1px;background:rgba(156,148,124,.5)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.quote{background:var(--blanc);border-radius:3px;padding:2rem 1.9rem;border-top:2px solid var(--kaki)}
.quote p{font-family:var(--font-display);font-size:1.12rem;line-height:1.5;color:var(--olive);margin-bottom:1.1rem}
.quote cite{font-style:normal;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--kaki-maquis)}

/* ---------- Faits / infos en ligne ---------- */
.facts{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;margin-top:1.8rem}
.facts div{min-width:120px}
.facts .n{font-family:var(--font-display);font-size:1.5rem;display:block}
.facts .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em}
.feature .facts .l{color:rgba(253,252,249,.75)}

/* ---------- Menus (Atelier) ---------- */
.menu{background:var(--blanc);border:1px solid rgba(156,148,124,.35);border-radius:4px;padding:clamp(2rem,4vw,3rem)}
.menu__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;border-bottom:1px solid rgba(156,148,124,.35);padding-bottom:1.2rem;margin-bottom:1.6rem}
.menu__name{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem)}
.menu__price{font-family:var(--font-display);font-size:1.3rem;color:var(--kaki-maquis);white-space:nowrap}
.menu__price small{font-family:var(--sans);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--kaki);display:block;text-align:right}
.menu ol{list-style:none;counter-reset:temps}
.menu li{counter-increment:temps;padding:.85rem 0 .85rem 2.6rem;position:relative;border-bottom:1px dashed rgba(156,148,124,.3);font-size:.98rem;color:var(--olive-soft)}
.menu li:last-child{border-bottom:0}
.menu li::before{content:counter(temps,decimal-leading-zero);position:absolute;left:0;top:.85rem;font-family:var(--font-display);font-size:.9rem;color:var(--dore)}
.menu__note{margin-top:1.4rem;font-size:.85rem;color:var(--kaki-maquis)}

/* ---------- Formulaires ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--kaki-maquis)}
.field input,.field select,.field textarea{font-family:var(--sans);font-weight:300;font-size:1rem;color:var(--olive);
  background:var(--blanc);border:1px solid rgba(156,148,124,.55);border-radius:3px;padding:.85em 1em;transition:border-color .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--kaki-maquis)}
.field textarea{min-height:130px;resize:vertical}
@media(max-width:640px){.form{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq__item{border-bottom:1px solid rgba(156,148,124,.4)}
.faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.5rem);color:var(--olive)}
.faq__q::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--kaki);transition:transform .4s var(--ease)}
.faq__item.open .faq__q::after{content:"–"}
.faq__a{overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.faq__a p{padding:0 0 1.6rem;color:var(--olive-soft);max-width:70ch}

/* ---------- Étapes (tunnel réserver) ---------- */
.steps{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vh,3.5rem)}
.step{flex:1 1 0;min-width:180px;border-top:2px solid rgba(156,148,124,.4);padding-top:1rem}
.step.active{border-top-color:var(--olive)}
.step .num{font-family:var(--font-display);font-size:1.1rem;color:var(--kaki)}
.step.active .num{color:var(--olive)}
.step .t{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--kaki-maquis);margin-top:.3rem}
.demo-tag{display:inline-block;font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:var(--kaki-maquis);
  border:1px solid rgba(156,148,124,.5);border-radius:2px;padding:.25em .6em;margin-left:.6em;vertical-align:middle}
.product-row{display:grid;grid-template-columns:1.2fr 2fr auto;gap:1.5rem;align-items:center;background:var(--blanc);
  border:1px solid rgba(156,148,124,.35);border-radius:4px;padding:1.4rem;margin-bottom:1rem}
.product-row img{width:100%;height:120px;object-fit:cover;border-radius:3px}
.product-row .price{font-family:var(--font-display);font-size:1.4rem;text-align:right}
.product-row .price small{display:block;font-family:var(--sans);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--kaki)}
@media(max-width:720px){.product-row{grid-template-columns:1fr;text-align:left}.product-row .price{text-align:left}}

/* ---------- Carte placeholder ---------- */
.map-ph{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:16/7;background:var(--kaki-pastel);
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(156,148,124,.4)}
.map-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.map-ph span{position:relative;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--kaki-maquis);background:rgba(253,252,249,.9);padding:.6em 1.2em;border-radius:2px}

/* ---------- Footer ---------- */
.footer{background:var(--olive);color:rgba(244,241,234,.8)}
.footer .wrap{padding-block:clamp(4rem,9vh,6rem)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(156,148,124,.35)}
.footer .logo-f{font-family:var(--font-display);font-size:1.9rem;color:var(--creme);margin-bottom:.8rem}
.footer .logo-f .amp{color:var(--dore);font-style:italic}
.footer p{font-size:.9rem;max-width:32ch}
.footer h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--kaki);margin-bottom:1.1rem}
.footer ul{list-style:none}
.footer li{margin-bottom:.6rem}
.footer li a,.footer li{font-size:.9rem}
.footer li a{transition:color .3s var(--ease)}
.footer li a:hover{color:var(--creme)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.8rem;font-size:.78rem;color:rgba(244,241,234,.55)}
.footer__bottom a:hover{color:var(--creme)}

/* ---------- Chip de porte (remplace les numéros 01/02/03) ---------- */
.porte__label{display:inline-block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  background:rgba(253,252,249,.92);color:var(--olive);padding:.45em 1em;border-radius:2px;font-weight:500;margin-bottom:.7rem}

/* ---------- Liste éditoriale (services, façon carte de restaurant — pas de boxes) ---------- */
.menu-list{max-width:940px}
.menu-row{display:grid;grid-template-columns:1fr auto;column-gap:1.5rem;padding:1.8rem 0;border-bottom:1px solid rgba(156,148,124,.3)}
.menu-row:first-child{padding-top:0}
.menu-row:last-child{border-bottom:0}
.menu-row__title{grid-column:1;font-family:var(--font-display);font-size:clamp(1.3rem,2.3vw,1.7rem);color:var(--olive);line-height:1.2}
.menu-row__tag{grid-column:2;justify-self:end;align-self:start;margin-top:.45rem;font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--kaki-maquis);white-space:nowrap}
.menu-row__desc{grid-column:1/-1;color:var(--olive-soft);font-size:.98rem;margin-top:.55rem;max-width:66ch}
@media(max-width:560px){.menu-row__tag{grid-column:1;justify-self:start;margin-top:.35rem}}

/* ---------- Micro-illustrations au trait (dessin main, motifs du logo) ---------- */
svg.head-mark{display:block;width:74px;height:auto;margin-bottom:.9rem;color:var(--kaki-maquis);
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.section__head.center svg.head-mark,.center>svg.head-mark{margin-inline:auto}
.feature svg.head-mark,.hero svg.head-mark{color:rgba(244,241,234,.85)}

/* ---------- Motif macchia décoratif (grande branche au trait, très discrète) ---------- */
.macchia-deco{position:absolute;pointer-events:none;color:var(--kaki);opacity:.07;width:min(320px,30vw);z-index:0}
.macchia-deco svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.macchia-deco--tr{top:6%;right:-3%}
.macchia-deco--bl{bottom:4%;left:-4%;transform:scaleX(-1)}
.section{position:relative;overflow:hidden}
.wrap,.wrap--narrow{position:relative;z-index:1}

/* ---------- Grain papier très léger sur toute la page (casse le trop blanc) ---------- */
body::after{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){body::after{opacity:.02}}

/* ---------- États initiaux d'animation ---------- */
.pre-anim .reveal{opacity:0}
.pre-anim .img-reveal{clip-path:inset(0 0 100% 0)}
.pre-anim .hero .eyebrow,.pre-anim .hero h1,.pre-anim .hero__sub,.pre-anim .resa{opacity:0}
.pre-anim .anim-title{opacity:0}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .portes,.quotes,.svc-grid{grid-template-columns:1fr 1fr}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){ .nav{display:none} .burger{display:flex} }
@media(max-width:820px){
  .split,.mediatext{grid-template-columns:1fr;gap:2rem}
  .split--rev .split__media,.mediatext--rev >.mediatext__media{order:0}
  .split__media{aspect-ratio:5/4}
  .mediatext__media{aspect-ratio:4/3}
  /* Menu mobile plein écran (ouvert via le burger) */
  body.nav-open{overflow:hidden}
  body.nav-open .nav{display:flex;position:fixed;inset:0;z-index:45;flex-direction:column;justify-content:center;
    align-items:flex-start;gap:1.5rem;background:rgba(253,252,249,.98);padding:6rem 2rem 2rem}
  body.nav-open .nav a{color:var(--olive);font-size:1.15rem;opacity:1}
  body.nav-open .nav .btn--ghost{border-color:var(--olive);color:var(--olive)}
}
@media(max-width:640px){
  .portes,.quotes,.svc-grid,.footer__top{grid-template-columns:1fr}
  .porte{aspect-ratio:4/5}
  .direct{flex-direction:column;align-items:flex-start}
  .stats{gap:1.6rem}
  .score + .score::before{display:none}
}

/* ==========================================================================
   VITRINE « Quelle est votre envie ? » (validée Andrea 24/07)
   Un panneau toujours ouvert + fiche riche. Textes à LARGEUR FIXE (jamais de
   recomposition pendant l'animation), fondus désynchronisés (anti Rubik's Cube).
   ========================================================================== */
/* Pleine largeur (demande Andrea : moins de bords, plus de présence) : la vitrine
   déborde de la grille .wrap pour occuper 96vw, centrée par marge négative. */
.vitrine{display:flex;gap:12px;height:76vh;min-height:560px;width:min(96vw,1720px);margin-left:calc((100% - min(96vw,1720px))/2)}
.vpan{position:relative;flex:.6;overflow:hidden;border-radius:3px;display:flex;align-items:flex-end;text-decoration:none;color:var(--blanc);cursor:pointer;transition:flex 1.2s cubic-bezier(.3,.08,.18,1)}
.vpan.actif{flex:2.8}
.vpan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.9);transition:transform 1.8s var(--ease),filter 1s var(--ease)}
.vpan.actif img{filter:brightness(1) saturate(1);transform:scale(1.03)}
.vpan__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(25,27,15,.85) 0%,rgba(25,27,15,.28) 48%,rgba(25,27,15,.18) 100%)}
.vpan__mini{position:absolute;left:0;bottom:0;width:182px;z-index:2;padding:2rem 1.4rem;opacity:1;transition:opacity .6s var(--ease) .55s}
.vpan.actif .vpan__mini{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.vpan__mini h3{font-family:var(--font-display);font-weight:300;font-size:1.25rem;line-height:1.15;color:var(--blanc)}
.vlabel{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dore);margin-bottom:.45rem;font-weight:400}
.vlabel--chip{display:inline-block;background:rgba(253,252,249,.94);color:var(--olive);padding:.5em 1.1em;border-radius:2px;margin-bottom:1rem;font-weight:500}
.vpan__fiche{position:absolute;left:0;bottom:0;width:min(560px,78vw);z-index:2;padding:2.6rem 2.6rem;opacity:0;transform:translateY(18px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.vpan.actif .vpan__fiche{opacity:1;transform:none;transition:opacity .85s var(--ease) .4s,transform .85s var(--ease) .4s}
.vpan__fiche h3{font-family:var(--font-display);font-weight:300;font-size:clamp(1.8rem,2.8vw,2.7rem);line-height:1.06;color:var(--blanc)}
.vpan__fiche h3 em{font-style:italic}
.vpan__fiche p{font-size:.98rem;line-height:1.45;color:rgba(253,252,249,.94);margin:.8rem 0 1.1rem;max-width:44ch}
.vtags{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.3rem}
.vtags span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(253,252,249,.9);border:1px solid rgba(253,252,249,.4);padding:.45em 1em;border-radius:2px}
.btn--creme{background:var(--creme);color:var(--olive);border:1px solid var(--creme)}
.btn--creme:hover{background:#fff;border-color:#fff}
.vpan__progress{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(253,252,249,.2);z-index:3;opacity:0;transition:opacity .4s}
.vpan.actif .vpan__progress{opacity:1}
.vpan__progress i{display:block;height:100%;width:0;background:var(--dore)}
.vpan.actif .vpan__progress i{animation:mmProg 5.2s linear forwards}
@keyframes mmProg{to{width:100%}}
.vitrine.stop .vpan.actif .vpan__progress{opacity:0}
.vitrine.stop .vpan.actif .vpan__progress i{animation:none}
@media (prefers-reduced-motion: reduce){ .vpan.actif .vpan__progress i{animation:none} }

/* Mobile : accordéon vertical, pas d'auto-défilement (géré côté JS) */
@media(max-width:900px){
  .vitrine{flex-direction:column;height:auto;min-height:0}
  .vpan{min-height:120px;flex:none;transition:min-height .9s cubic-bezier(.3,.08,.18,1)}
  .vpan.actif{flex:none;min-height:430px}
  .vpan__mini{width:100%;display:flex;align-items:baseline;gap:.8rem;padding:1.3rem 1.4rem}
  .vpan__mini h3{font-size:1.15rem}
  .vpan__fiche{width:100%;padding:1.8rem 1.5rem}
}

/* ==========================================================================
   SLIDER générique (flèches + points + glisser) — utilisé par les suites G2
   ========================================================================== */
.slider{position:relative;overflow:hidden;touch-action:pan-y}
.slider__track{display:flex;height:100%;transition:transform .95s cubic-bezier(.3,.08,.18,1);will-change:transform}
.slider__track img{width:100%;height:100%;object-fit:cover;flex:0 0 100%;user-select:none;-webkit-user-drag:none}
.slider__nav{position:absolute;bottom:1.4rem;right:1.6rem;display:flex;gap:.5rem;z-index:4}
.slider__nav button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(253,252,249,.5);background:transparent;color:var(--blanc);font-size:.95rem;cursor:pointer;transition:all .3s var(--ease)}
.slider__nav button:hover{background:rgba(253,252,249,.92);color:var(--olive);border-color:transparent}
.slider__dots{position:absolute;bottom:1.7rem;left:1.7rem;display:flex;gap:.45rem;z-index:4}
.slider__dots i{width:22px;height:2px;background:rgba(253,252,249,.42);cursor:pointer;transition:background .3s,width .3s}
.slider__dots i.on{background:var(--dore);width:34px}

/* ==========================================================================
   SUITES G2 « pages teintées » (choix Andrea 24/07) — chaque suite colore sa
   page (crème / kaki pastel), initiale géante en filigrane, nom à cheval.
   ========================================================================== */
/* 50/50 (correction Andrea 24/07) : les photos des deux suites font exactement la
   moitié de l'écran — axe central aligné, aucun désaxement au scroll */
.sspread{display:grid;grid-template-columns:1fr 1fr;min-height:88vh}
.sspread__photo{position:relative;height:88vh;min-height:540px}
.sspread__photo .slider{position:absolute;inset:0}
.sspread__texte{position:relative;display:flex;flex-direction:column;justify-content:center;padding:3rem clamp(2rem,4.5vw,5rem)}
/* Cache dédié à l'initiale filigrane : il clippe la lettre SANS rogner le nom qui déborde sur la photo */
.slettre-cache{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sspread--luna .sspread__texte{background:var(--creme)}
.sspread--nina .sspread__texte{background:var(--kaki-pastel)}
.sspread .snom{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(4rem,8vw,7.6rem);line-height:.9;color:var(--olive);position:relative;z-index:3;margin-left:-.85em;margin-bottom:.5rem}
.sspread--nina .sspread__photo{order:2}
.sspread--nina .sspread__texte{text-align:right;align-items:flex-end}
.sspread--nina .snom{margin-left:0;margin-right:-.85em}
.sspread .ssur{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--kaki);margin-bottom:.5rem}
.sspread .sdevise{font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kaki-maquis)}
.sspread .sfilet{width:48px;height:1px;background:var(--dore);margin:1.2rem 0}
.sspread .sdesc{line-height:1.6;color:#55563f;margin-bottom:1.3rem;font-size:.97rem;max-width:40ch}
.sdetails{list-style:none;margin:0 0 1.5rem;max-width:430px;padding:0}
.sdetails li{display:flex;justify-content:space-between;gap:1.4rem;padding:.5rem 0;border-bottom:1px solid rgba(156,148,124,.22);font-size:.88rem}
.sdetails li span:first-child{color:var(--kaki);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding-top:.2em;white-space:nowrap}
.sdetails li span:last-child{text-align:right;color:#4a4c3c}
.sspread--nina .sdetails li{flex-direction:row-reverse}
.sspread--nina .sdetails li span:last-child{text-align:left}
.sgrande-lettre{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-style:italic;font-size:34rem;line-height:1;color:rgba(156,148,124,.08);pointer-events:none;z-index:0}
.sspread--luna .sgrande-lettre{right:-.05em}
.sspread--nina .sgrande-lettre{left:-.05em}
@media(max-width:950px){
  .sspread,.sspread--nina{grid-template-columns:1fr;min-height:0}
  .sspread__photo{height:54vh;min-height:340px;order:0!important}
  .sspread__texte,.sspread--nina .sspread__texte{text-align:left;align-items:flex-start;padding:1.8rem 6vw 2.6rem}
  .sspread .snom,.sspread--nina .snom{margin:-1.35em 0 .4rem -2px;font-size:3.2rem}
  .sspread--nina .sdetails li{flex-direction:row}
  .sspread--nina .sdetails li span:last-child{text-align:right}
  .sgrande-lettre{display:none}
}

/* ==========================================================================
   VILLA « Panorama centré » (proposition 1 retenue par Andrea le 24/07)
   Après les spreads 50/50 : composition entièrement CENTRÉE, panorama bas,
   trois clés à filets, chef à domicile en ligne discrète (pas de bloc).
   ========================================================================== */
.villa2{background:var(--blanc);padding:clamp(4.5rem,9vh,7rem) 0 clamp(4rem,8vh,6rem)}
.villa2 .vhead{text-align:center;width:min(900px,92vw);margin:0 auto clamp(2.6rem,5vh,3.6rem)}
.villa2 .vhead .head-mark{margin-inline:auto}
.villa2 .vhead .eyebrow{color:var(--kaki)}
.villa2 .vhead h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin:.5rem 0 .8rem}
.villa2 .vhead .lead{max-width:46ch;margin-inline:auto}
.villa2 .pano{position:relative;width:min(96vw,1720px);margin:0 auto;height:min(56vh,560px);min-height:380px;overflow:hidden;border-radius:3px}
.villa2 .pano img{width:100%;height:100%;object-fit:cover}
.villa2 .pano .vbadge{position:absolute;top:1.4rem;left:1.5rem;z-index:3;background:rgba(253,252,249,.95);color:var(--olive);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:.6em 1.2em;border-radius:2px}
.villa2 .pano .pano-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(25,27,15,.35),transparent 45%)}
.villa2 .cles{width:min(1240px,92vw);margin:clamp(2.2rem,4.5vh,3.2rem) auto 0;display:grid;grid-template-columns:1fr 1fr 1fr}
.villa2 .cle{text-align:center;padding:0 clamp(1rem,3vw,3rem);position:relative}
.villa2 .cle + .cle::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:rgba(156,148,124,.35)}
.villa2 .cle .n{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,3.4vw,2.9rem);color:var(--olive);line-height:1}
.villa2 .cle .n em{font-style:italic}
.villa2 .cle .l{margin-top:.5rem;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--kaki-maquis)}
.villa2 .cle p{margin-top:.55rem;font-size:.92rem;line-height:1.5;color:#55563f}
.villa2 .chefline{width:min(760px,92vw);margin:clamp(2.6rem,5vh,3.6rem) auto 0;display:flex;align-items:center;gap:1.2rem;
  border-top:1px solid rgba(156,148,124,.3);border-bottom:1px solid rgba(156,148,124,.3);padding:1.15rem .2rem}
.villa2 .chefline img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.villa2 .chefline p{font-size:.93rem;line-height:1.5;color:#55563f;flex:1}
.villa2 .chefline p b{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:1.08rem;color:var(--olive)}
.villa2 .chefline .link-more{white-space:nowrap;flex:0 0 auto}
.villa2 .actions{text-align:center;margin-top:clamp(2.4rem,4.5vh,3.4rem);display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
@media(max-width:900px){
  .villa2 .cles{grid-template-columns:1fr;gap:1.6rem}
  .villa2 .cle + .cle::before{display:none}
  .villa2 .chefline{flex-wrap:wrap}
}

/* ==========================================================================
   INTERLUDE « phrase-pont » (choix Andrea 24/07) — respiration blanche entre
   les suites et la villa : une illustration au trait + une phrase en italique.
   ========================================================================== */
.interlude{position:relative;min-height:74vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(6.5rem,14vh,11rem) 5vw;text-align:center;background:var(--blanc);overflow:hidden}
.interlude .head-mark{margin:0 auto 1.3rem;stroke:var(--kaki);opacity:.8}
.interlude .phrase{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.22;color:var(--olive);max-width:24ch;margin:0 auto}
.interlude .appui{margin-top:1.1rem;font-size:.95rem;font-weight:300;line-height:1.6;color:#55563f;max-width:52ch}
.interlude .fil{width:1px;height:clamp(48px,8vh,84px);background:var(--dore);margin-top:clamp(1.6rem,3.5vh,2.6rem)}
.interlude .macchia-deco{opacity:.05}

/* Section Suites : blanc identique au-dessus et en dessous de l'en-tête (demande Andrea 24/07) */
#suites.section{padding-top:clamp(4rem,8vh,6.5rem)}
#suites .section__head{margin-bottom:clamp(4rem,8vh,6.5rem)}

/* ==========================================================================
   CHAPITRE L'ATELIER DES SENS (choix Andrea 24/07) — « on change d'univers,
   même DA » : le fond GLISSE du blanc vers le soir de l'Atelier au scroll
   (morph GSAP), puis en ressort. Même grammaire : The Seasons, cloche au
   trait, filets dorés, italiques.
   ========================================================================== */
.ads-chapitre{background:#1E1B17;color:var(--creme);will-change:background-color;padding:clamp(3rem,6.5vh,5.5rem) 0}
.ads-chapitre .entree{text-align:center;padding:clamp(4.5rem,9vh,7rem) 5vw clamp(2.5rem,5vh,3.5rem)}
.ads-cloche{width:70px;stroke-width:2.6;fill:none;stroke:var(--dore);margin:0 auto 1rem}
.ads-nom{font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,5vw,4rem);line-height:1.05}
.ads-nom em{font-style:italic}
.ads-base{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin-top:.7rem;color:rgba(244,241,234,.65)}
.ads-chapitre .filet-h{width:52px;height:1px;background:var(--dore);margin:1.4rem auto 0}
.ads-chapitre .duo{width:min(1340px,94vw);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:center;padding:clamp(2rem,4.5vh,3.5rem) 0}
.ads-chapitre .duo .media{aspect-ratio:4/5;overflow:hidden;border-radius:3px}
.ads-chapitre .duo .media img{width:100%;height:100%;object-fit:cover}
.ads-chapitre .duo h3{font-size:clamp(1.8rem,3vw,2.5rem);color:var(--creme);margin-bottom:1rem}
.ads-chapitre .duo p{color:rgba(244,241,234,.82);line-height:1.65;margin-bottom:1rem;max-width:48ch}
.ads-chiffres{display:flex;gap:2.4rem;margin:1.4rem 0}
.ads-chiffres .c b{display:block;font-family:var(--font-display);font-weight:300;font-size:2rem;color:var(--creme)}
.ads-chiffres .c span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.65)}
.ads-menus{width:min(1000px,92vw);margin:0 auto;padding:clamp(2rem,4vh,3rem) 0 clamp(3.5rem,7vh,5rem)}
.ads-menus h4{text-align:center;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dore);font-weight:400;margin-bottom:1.8rem}
.ads-menu-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1.05rem .2rem;border-bottom:1px solid rgba(244,241,234,.16)}
.ads-menu-ligne:first-of-type{border-top:1px solid rgba(244,241,234,.16)}
.ads-menu-ligne .t{font-family:var(--font-display);font-weight:300;font-size:1.35rem;color:var(--creme)}
.ads-menu-ligne .t em{font-style:italic}
.ads-menu-ligne .d{flex:1;font-size:.88rem;color:rgba(244,241,234,.66)}
.ads-menu-ligne .p{font-family:var(--font-display);font-weight:300;font-size:1.2rem;color:var(--dore);white-space:nowrap}
.ads-infos{text-align:center;padding-bottom:clamp(4rem,8vh,6rem)}
.ads-infos p{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.75);margin-bottom:1.4rem}
.ads-infos p b{color:var(--creme);font-weight:500}
@media(max-width:900px){ .ads-chapitre .duo{grid-template-columns:1fr} .ads-chiffres{gap:1.6rem} }

/* --- Prise de contrôle TOTALE pendant le chapitre Atelier : le header bascule aussi --- */
.header--ads{background:rgba(30,27,23,.92)!important;backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(183,154,91,.25)!important}
.header--ads .logo,.header--ads .nav a{color:var(--creme)!important}
.header--ads .logo .amp{color:var(--dore)}
.header--ads .btn--ghost{border-color:rgba(244,241,234,.55)!important;color:var(--creme)!important}
.header--ads .btn--ghost:hover{background:var(--creme)!important;color:#1E1B17!important}
.header--ads .burger span{background:var(--creme)!important}

/* --- Mini-landing : galerie mosaïque + grand avis --- */
.ads-galerie{width:min(1340px,94vw);margin:0 auto;padding:clamp(1.5rem,3vh,2.5rem) 0;display:grid;grid-template-columns:1.2fr .8fr 1fr;grid-template-rows:220px 220px;gap:12px}
.ads-galerie .g{overflow:hidden;border-radius:3px}
.ads-galerie .g img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.ads-galerie .g:hover img{transform:scale(1.05)}
.ads-galerie .g--tall{grid-row:span 2}
@media(max-width:900px){ .ads-galerie{grid-template-columns:1fr 1fr;grid-template-rows:170px 170px 170px} .ads-galerie .g--tall{grid-row:span 2} }
.ads-avis{text-align:center;width:min(820px,92vw);margin:0 auto;padding:clamp(5.5rem,11vh,8rem) 0 clamp(1.5rem,3vh,2.5rem)}
.ads-avis .stars{color:var(--dore);letter-spacing:.4em;font-size:.85rem;margin-bottom:1rem}
.ads-avis blockquote{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.3;color:var(--creme)}
.ads-avis cite{display:block;margin-top:.9rem;font-style:normal;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.65)}

/* ==========================================================================
   ÉCHOS DE MOTIFS (choix Andrea 24/07) — règle anti « cahier de brouillon » :
   chaque section possède UN écho de SON propre motif d'en-tête (le même symbole,
   plus grand, trait fin, très léger), posé dans une zone vide. Un par section.
   ========================================================================== */
.echo-mark{position:absolute;pointer-events:none;z-index:0;fill:none;stroke:currentColor;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round;color:rgba(86,90,60,.13)}
.ads-chapitre .echo-mark{color:rgba(183,154,91,.09)}

/* Hero CENTRÉ (demande Andrea 24/07) : titre court et plus grand, tout à l'axe */
.hero--centre{align-items:center;text-align:center}
.hero--centre .hero__inner{padding-top:6rem;padding-bottom:0;display:flex;flex-direction:column;align-items:center}
.hero--centre h1{font-size:clamp(3.2rem,7.6vw,6.8rem);max-width:14ch;margin:.5rem auto 1.1rem}
.hero--centre .hero__sub{margin-inline:auto}
.hero--centre .resa{margin-inline:auto}
.hero--centre .resa{max-width:920px}
.hero--centre .resa__value{white-space:nowrap}
/* Barre de résa du hero centré : plus longue, plus fine, plus de bords intérieurs (Andrea 24/07) */
.hero--centre .resa{max-width:1060px;width:min(1060px,92vw)}
.hero--centre .resa__field{padding:.8rem 1.9rem}
.hero--centre .resa__value{font-size:1.05rem}
.hero--centre .resa__cta .btn{padding:.85em 1.9em}

/* Hero enrichi (choix Andrea 24/07) : fond vivant + preuves discrètes + invitation */
.hero__img img{position:absolute;inset:0}
.hero--vivant .hero__img img{opacity:0;transition:opacity 2.8s ease}
.hero--vivant .hero__img img.on{opacity:1}
.hero__preuves{display:flex;gap:2rem;margin-top:2.6rem;flex-wrap:wrap;justify-content:center}
.hero__preuve{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(244,241,234,.8)}
.hero__preuve b{display:block;font-family:var(--font-display);font-weight:300;font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--blanc)}
.hero__descendre{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:rgba(244,241,234,.8);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase}
.hero__descendre i{display:block;width:1px;height:46px;background:linear-gradient(to bottom,var(--dore),transparent);animation:mmGoutte 2.4s ease-in-out infinite}
@keyframes mmGoutte{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion: reduce){ .hero__descendre i{animation:none} .hero--vivant .hero__img img{transition:none} }

/* ==========================================================================
   POP-UP MENU (la carte qu'on vous tend) + bouton galerie — Atelier des Sens
   ========================================================================== */
.ads-menu-ligne .menu-voir{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dore);background:none;border:1px solid rgba(183,154,91,.45);padding:.55em 1.2em;border-radius:2px;cursor:pointer;white-space:nowrap;transition:all .3s var(--ease)}
.ads-menu-ligne .menu-voir:hover{background:var(--dore);color:#1E1B17;border-color:var(--dore)}
.ads-galerie-cta{width:min(1340px,94vw);margin:0 auto;text-align:left;padding:1.6rem 0 .5rem}

.mm-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;visibility:hidden;pointer-events:none}
.mm-modal.on{visibility:visible;pointer-events:auto}
.mm-modal__fond{position:absolute;inset:0;z-index:1;background:rgba(18,16,12,.78);backdrop-filter:blur(6px);opacity:0;transition:opacity .5s var(--ease)}
.mm-modal.on .mm-modal__fond{opacity:1}
.mm-modal__carte{position:relative;z-index:2;background:var(--creme);color:var(--olive);width:min(620px,94vw);max-height:88vh;overflow:auto;border-radius:3px;padding:clamp(2.2rem,5vh,3.4rem) clamp(1.6rem,4vw,3rem);text-align:center;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);opacity:0;transform:translateY(22px) scale(.985);transition:opacity .55s var(--ease) .08s,transform .55s var(--ease) .08s}
.mm-modal.on .mm-modal__carte{opacity:1;transform:none}
.mm-modal__fermer{position:absolute;z-index:3;top:14px;right:16px;width:40px;height:40px;border:none;background:none;cursor:pointer;color:var(--kaki-maquis);font-size:1.25rem;line-height:1}
.mm-modal__fermer:hover{color:var(--olive)}
.mm-modal .m-sur{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--kaki);margin-bottom:.4rem}
.mm-modal h3{font-family:var(--font-display);font-weight:300;font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:.2rem}
.mm-modal h3 em{font-style:italic}
.mm-modal .m-prix{font-family:var(--font-display);font-weight:300;font-size:1.15rem;color:var(--kaki-maquis);margin-bottom:1.4rem}
.mm-modal .m-filet{width:44px;height:1px;background:var(--dore);margin:0 auto 1.6rem}
.mm-modal ol{list-style:none;margin:0;padding:0}
.mm-modal ol li{padding:.75rem 0;font-weight:300;font-size:.97rem;line-height:1.5;color:#4a4c3c;border-bottom:1px solid rgba(156,148,124,.18)}
.mm-modal ol li:last-child{border-bottom:none}
.mm-modal .m-note{margin-top:1.4rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kaki)}

/* ==========================================================================
   SERVICES INTERACTIFS (choix Andrea 24/07) — la liste garde sa classe,
   la photo du service apparaît au survol de chaque ligne (cadre collant).
   ========================================================================== */
.svc-duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:start}
.svc-duo .menu-list{max-width:none}
.menu-row--hover{cursor:pointer;position:relative;transition:padding-left .45s var(--ease)}
.menu-row--hover::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;background:var(--dore);transform:scaleY(0);transition:transform .45s var(--ease)}
.menu-row--hover:hover,.menu-row--hover.actif{padding-left:18px}
.menu-row--hover:hover::before,.menu-row--hover.actif::before{transform:scaleY(1)}
.menu-row--hover:hover .menu-row__title,.menu-row--hover.actif .menu-row__title{color:var(--kaki-maquis)}
.svc-cadre{position:sticky;top:110px;aspect-ratio:4/4.5;overflow:hidden;border-radius:3px}
.svc-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s var(--ease),transform 1.8s var(--ease)}
.svc-cadre img.visible{opacity:1;transform:scale(1)}
.svc-cadre .legende{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.2rem 1.5rem;color:var(--blanc);background:linear-gradient(to top,rgba(25,27,15,.6),transparent);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:950px){ .svc-duo{grid-template-columns:1fr} .svc-cadre{display:none} }

/* Filtre services « Tout · En suite · En villa » (choix Andrea 24/07) */
.svc-filtres{display:flex;gap:.6rem;margin-bottom:2rem}
.svc-filtre{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;padding:.65em 1.5em;border:1px solid rgba(86,90,60,.4);border-radius:2px;background:none;color:var(--kaki-maquis);cursor:pointer;transition:all .3s var(--ease);font-family:var(--sans)}
.svc-filtre.on{background:var(--olive);border-color:var(--olive);color:var(--creme)}
.menu-row{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu-row.efface{opacity:.18;transform:translateX(6px)}

/* Motifs au trait qui se dessinent au survol des lignes services (S3, choix Andrea) */
.menu-row--picto{grid-template-columns:56px 1fr auto}
.menu-row--picto .menu-row__title{grid-column:2}
.menu-row--picto .menu-row__tag{grid-column:3}
.menu-row--picto .menu-row__desc{grid-column:2/-1}
.menu-picto{grid-column:1;grid-row:1/span 2;width:44px;stroke:var(--kaki-maquis);fill:none;stroke-width:2.4;margin-top:.35rem}
.menu-picto path,.menu-picto circle{stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.2s var(--ease)}
.menu-row:hover .menu-picto path,.menu-row:hover .menu-picto circle{stroke-dashoffset:0}
.menu-row:hover .menu-row__title{color:var(--kaki-maquis);transition:color .4s var(--ease)}
@media (prefers-reduced-motion: reduce){ .menu-picto path,.menu-picto circle{stroke-dashoffset:0} }

/* ============ SECTION CORSE — V1 le voile profond ============ */
.section--respire{padding-block:clamp(9rem,18vh,13rem) clamp(4.5rem,9vh,6.5rem)}
.corse{position:relative;min-height:100vh;display:flex;flex-direction:column;color:var(--blanc);overflow:hidden}
.corse__fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.corse__voile{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 55% at 50% 42%, rgba(25,27,15,.52), rgba(25,27,15,.18) 70%),
  linear-gradient(to bottom, rgba(25,27,15,.35), rgba(25,27,15,.15) 45%, rgba(25,27,15,.6))}
.corse__in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 5vw 0;max-width:none}
.corse__in .head-mark{stroke:rgba(244,241,234,.9)}
.corse__in .eyebrow{color:rgba(253,252,249,.85)}
.corse__in h2{font-weight:300;font-size:clamp(2.6rem,5.5vw,4.2rem);line-height:1.05;margin:.5rem 0 1rem}
.corse__in h2 em{font-style:italic}
.corse__sub{max-width:52ch;font-weight:300;font-size:clamp(.98rem,1.3vw,1.1rem);color:rgba(253,252,249,.92);margin-bottom:1.8rem}
.corse__reperes{position:relative;z-index:2;width:min(1000px,90vw);margin:clamp(2.4rem,5vh,3.6rem) auto 0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;border-top:1px solid rgba(244,241,234,.3);padding-bottom:2.6rem;text-align:center}
.corse__rep{padding:1.3rem .8rem 0;position:relative;text-decoration:none;color:inherit;transition:opacity .4s}
.corse__rep + .corse__rep::before{content:"";position:absolute;left:0;top:1.3rem;bottom:0;width:1px;background:rgba(244,241,234,.24)}
.corse__rep .t{font-family:var(--font-display);font-weight:300;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.2}
.corse__rep .s{display:block;margin-top:.35rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.72)}
.corse__reperes:hover .corse__rep{opacity:.55}
.corse__reperes .corse__rep:hover{opacity:1}
@media(max-width:820px){ .corse__reperes{grid-template-columns:1fr 1fr;border-top:0} .corse__rep{padding-top:.9rem} .corse__rep + .corse__rep::before{display:none} }

/* ============ AVIS SUR L'IMAGE (B1) ============ */
.avis-image{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--blanc);overflow:hidden}
.avis-image__fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avis-image__voile{position:absolute;inset:0;background:rgba(25,27,15,.55)}
.avis-image__in{position:relative;z-index:2;max-width:880px;padding:6rem 5vw}
.avis-image .stars{color:var(--dore);letter-spacing:.35em;font-size:.82rem}
.avis-image blockquote{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.3;margin:1.2rem 0 1rem}
.avis-image cite{display:block;font-style:normal;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.75)}
.avis-image__scores{margin-top:2rem;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,234,.85)}
.avis-image__scores b{color:var(--blanc);font-weight:500}
.avis-image__scores span{margin:0 .6em;color:var(--dore)}
.avis-image .btn{margin-top:1.8rem}

/* Services : tête + filtres alignés sur les titres des lignes (après la colonne pictos) */
#services .section__head,#services .svc-filtres{margin-left:calc(56px + 1.5rem)}
@media(max-width:700px){ #services .section__head,#services .svc-filtres{margin-left:0} }

/* Services : la liste et la bande occupent toute la largeur de la colonne (plus de vide à droite) */
#services .menu-list,#services .direct{max-width:none}

/* ============ MOT DE LA FIN — À prestu ============ */
.fin{background:var(--creme);text-align:center;padding:clamp(6.5rem,14vh,10rem) 5vw}
.fin__grand{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(3rem,7vw,5.5rem);line-height:1;color:var(--olive)}
.fin__sous{margin-top:1.4rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--kaki-maquis)}

/* ============ INSTAGRAM — la bande ============ */
.insta{background:var(--blanc);padding:clamp(4.5rem,9vh,6.5rem) 0 clamp(8rem,16vh,11.5rem)}
.insta__tete{text-align:center;max-width:56ch;margin:0 auto}
.insta__tete h2{font-size:clamp(2rem,4vw,3rem);margin:.5rem 0}
.insta__tete h2 em{font-style:italic}
.insta__tete .link-more{display:inline-block;margin:0 0 2.4rem}
.insta__bande{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.insta__ph{position:relative;aspect-ratio:1;overflow:hidden;display:block}
.insta__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.insta__ph::after{content:"";position:absolute;inset:0;background:rgba(30,32,20,0);transition:background .5s}
.insta__ph .h{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;color:var(--blanc);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:0;transition:opacity .5s}
.insta__ph:hover img{transform:scale(1.06)}
.insta__ph:hover::after{background:rgba(30,32,20,.45)}
.insta__ph:hover .h{opacity:1}
@media(max-width:900px){ .insta__bande{grid-template-columns:repeat(3,1fr)} }

/* ============ CURSEUR — l'anneau doré fin ============ */
.mm-curseur{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .3s,background .4s;
  width:26px;height:26px;border:1px solid var(--dore);border-radius:50%;will-change:transform}
html.cur-actif .mm-curseur{opacity:1}
.mm-curseur.sur-lien{background:rgba(183,154,91,.12)}
@media (hover:none),(pointer:coarse){ .mm-curseur{display:none!important} }

/* ============ NAV — sous-menu Les Suites ============ */
.nav__deroulant{position:relative;display:inline-flex;align-items:center;line-height:1}
.nav__deroulant .sous-nav{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);padding-top:14px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.nav__deroulant .sous-nav::before{content:"";position:absolute;top:0;left:0;right:0;height:14px}
.nav__deroulant:hover .sous-nav,.nav__deroulant:focus-within .sous-nav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sous-nav__carte,.nav__deroulant .sous-nav > a{display:block}
.nav__deroulant .sous-nav > a{background:var(--creme);color:var(--olive);white-space:nowrap;padding:.85em 1.6em;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(156,148,124,.25);border-top:none;transition:background .3s,color .3s}
.nav__deroulant .sous-nav > a:first-child{border-top:1px solid rgba(156,148,124,.25);border-radius:2px 2px 0 0;position:relative}
.nav__deroulant .sous-nav > a:first-child::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--dore)}
.nav__deroulant .sous-nav > a:last-child{border-radius:0 0 2px 2px}
.nav__deroulant .sous-nav > a:hover{background:var(--kaki-pastel);color:var(--kaki-maquis)}
@media(max-width:900px){ .nav__deroulant .sous-nav{display:none} }

/* Sous-menu Suites en mode header sombre : panneau du soir, lisible */
.header--ads .nav__deroulant .sous-nav > a{background:#262219;color:var(--creme)!important;border-color:rgba(183,154,91,.3)}
.header--ads .nav__deroulant .sous-nav > a:first-child::before{background:var(--dore)}
.header--ads .nav__deroulant .sous-nav > a:hover{background:#312a1f;color:var(--dore)!important}

/* --- Transition de page : voile de fondu (site.js) --- */
.page-voile{position:fixed;inset:0;z-index:200;background:var(--blanc);opacity:0;pointer-events:none;transition:opacity .5s ease}
.page-voile--on{opacity:1;pointer-events:auto}

/* --- Transition de page : le voile d'ARRIVÉE (se dissipe au chargement) --- */
html.page-in::after{content:"";position:fixed;inset:0;z-index:300;background:var(--blanc);pointer-events:none;animation:pageArrivee .85s cubic-bezier(.4,0,.2,1) forwards}
@keyframes pageArrivee{0%{opacity:1}60%{opacity:.55}100%{opacity:0}}

/* ============ PANNEAU DE NAVIGATION ILLUSTRÉ (validé 27/07) ============
   Le menu déroulant texte court-circuitait « Les Suites » et « L'Atelier des Sens » :
   on cliquait sur une sous-page sans jamais voir celle qui présente l'ensemble.
   Retenu : trois vignettes de même taille, la page d'ensemble EN PREMIER, désignée
   par un liseré doré. Textes en blanc — le doré sur une photo claire est illisible. */
.pan{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);padding-top:14px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:60}
.nav__deroulant:hover .pan,.nav__deroulant:focus-within .pan{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.pan::before{content:"";position:absolute;top:0;left:0;right:0;height:14px}
.pan__in{background:var(--creme);border:1px solid rgba(156,148,124,.26);border-top:1px solid var(--dore);
  border-radius:2px;box-shadow:0 16px 40px rgba(40,42,28,.12);
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:.8rem;width:452px}
.pan__in--duo{grid-template-columns:repeat(2,1fr);width:314px}

.pan__vig{display:block;text-decoration:none;position:relative;overflow:hidden;aspect-ratio:3/4}
.pan__vig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.pan__vig:hover img{transform:scale(1.06)}
.pan__voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(25,27,15,.88) 0%,rgba(25,27,15,.72) 32%,rgba(25,27,15,.22) 62%,rgba(25,27,15,.04) 100%)}  /* la photo de Nina est claire en bas : le voile doit tenir dessus */
.pan__txt{position:absolute;left:0;right:0;bottom:0;padding:.7rem .7rem;color:var(--blanc);z-index:2;
  text-transform:none;letter-spacing:normal}
.pan__nom{display:block;font-family:var(--font-display);font-weight:300;font-style:italic;font-size:1.1rem;
  line-height:1.05;text-transform:none;letter-spacing:.01em}
.pan__dev{display:block;margin-top:.22rem;font-family:var(--sans);font-size:.515rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(253,252,249,.82)}
.pan__filet{display:block;width:0;height:1px;background:var(--dore);margin-top:.38rem;transition:width .5s var(--ease)}
.pan__vig:hover .pan__filet{width:26px}
/* la page d'ensemble : liseré doré, texte blanc comme les autres */
.pan__vig--une{outline:1px solid var(--dore);outline-offset:2px}

/* le panneau n'a pas de sens au doigt : sous 900 px c'est le menu burger qui prend le relais */
@media(max-width:900px){ .pan{display:none} }
/* variante sur en-tête sombre (pages Atelier) */
.header--ads .pan__in{background:#262219;border-color:rgba(183,154,91,.32)}

/* ============ BARRE DE RÉSERVATION PERSISTANTE — MOBILE (27/07) ============
   60 % des réservations se font au téléphone, et la barre du hero disparaît
   dès qu'on descend. Sur mobile, une barre discrète réapparaît en bas dès que
   la barre d'origine sort de l'écran — jamais au premier écran, pour ne pas
   masquer le titre d'arrivée. */
.resa-fixe{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  background:rgba(253,252,249,.97);backdrop-filter:blur(10px);
  border-top:1px solid rgba(156,148,124,.35);
  padding:.7rem max(.9rem,env(safe-area-inset-left)) max(.7rem,env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .45s var(--ease)}
.resa-fixe.on{transform:translateY(0)}
.resa-fixe__in{display:flex;align-items:center;gap:.9rem}
.resa-fixe__txt{flex:1;min-width:0}
.resa-fixe__t{display:block;font-family:var(--font-display);font-weight:300;font-size:1.02rem;color:var(--olive);line-height:1.15}
.resa-fixe__s{display:block;margin-top:.12rem;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kaki-maquis)}
.resa-fixe .btn{flex:0 0 auto;padding:.85em 1.4em;font-size:.62rem}
@media(max-width:900px){
  .resa-fixe{display:block}
  /* le pied de page ne doit pas finir sous la barre */
  .footer{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion: reduce){ .resa-fixe{transition:none} }

/* ============ AVIS EN CONTEXTE (27/07) ============
   Les avis regroupés en bas de page travaillent moins bien qu'à côté de ce
   qu'ils commentent : la citation sur le petit-déjeuner près du petit-déjeuner,
   celle sur la vue près de la suite. Filet doré, italique, discret. */
.avis-ctx{margin-top:1.6rem;padding-left:1.2rem;border-left:1px solid var(--dore);max-width:44ch}
.avis-ctx q{display:block;font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:clamp(.98rem,1.35vw,1.12rem);line-height:1.55;color:var(--olive);quotes:none}
.avis-ctx cite{display:block;margin-top:.5rem;font-family:var(--sans);font-style:normal;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--kaki-maquis)}

/* ============ NAV — resserrement intermédiaire (27/07) ============
   L'ajout de « Accueil » fait déborder la barre entre 900 et 1440 px : les
   libellés passent sur deux ou trois lignes. On resserre progressivement
   l'espacement et la graisse typographique plutôt que de basculer au burger
   trop tôt — la navigation complète reste un atout sur tablette paysage. */
@media(min-width:1440px){
  .nav{gap:1.5rem}
  .nav a{font-size:.74rem;letter-spacing:.11em;white-space:nowrap}
}
@media(min-width:981px) and (max-width:1439px){
  .nav{gap:1.15rem}
  .nav a{font-size:.7rem;letter-spacing:.09em;white-space:nowrap}
  .nav a.btn{padding:.75em 1.1em;font-size:.62rem}
  .nav .lang{letter-spacing:.06em}
}
@media(min-width:981px) and (max-width:1150px){
  .nav{gap:.85rem}
  .nav a{font-size:.66rem;letter-spacing:.06em}
  .nav a.btn{padding:.7em .9em;font-size:.58rem}
}

/* ============ INVITATION À RÉSERVER EN DIRECT (27/07) ============
   Apparaît une fois, après 10 s, sur les pages de découverte — jamais sur
   Contact ni Réserver, où l'intention est déjà là. Mémorisé dans le
   navigateur : qui l'a vu ou fermé ne le revoit pas. */
.invit{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:5vw;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.invit.on{opacity:1;visibility:visible}
.invit__fond{position:absolute;inset:0;background:rgba(30,32,20,.5);backdrop-filter:blur(3px)}
.invit__boite{position:relative;z-index:2;width:min(880px,100%);background:var(--blanc);
  display:grid;grid-template-columns:.85fr 1.15fr;box-shadow:0 30px 80px rgba(30,32,20,.3);
  transform:translateY(18px) scale(.985);transition:transform .55s var(--ease)}
.invit.on .invit__boite{transform:none}
.invit__ph{position:relative;overflow:hidden}
.invit__ph img{width:100%;height:100%;object-fit:cover;display:block}
.invit__txt{padding:clamp(2rem,4vw,3.2rem) clamp(1.8rem,3.5vw,3rem)}
.invit__eyebrow{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--kaki-maquis)}
.invit__titre{font-family:var(--font-display);font-weight:300;font-size:clamp(1.35rem,2.35vw,1.82rem);
  line-height:1.15;color:var(--olive);margin:.5rem 0 .1rem}
@media(min-width:761px){ .invit__titre{white-space:nowrap} }
.invit__titre em{font-style:italic}
.invit__filet{width:38px;height:1px;background:var(--dore);margin:1.1rem 0}
.invit__p{color:var(--olive-soft);font-weight:300;font-size:.95rem;line-height:1.6;max-width:40ch;
  text-wrap:balance}  /* équilibre les lignes : évite le mot orphelin en bas */

/* l'offre doit se voir avant de se lire : le chiffre porte le message */
.invit__offre{display:flex;align-items:center;gap:1.1rem;margin:1.5rem 0 .2rem;
  padding-top:1.4rem;border-top:1px solid rgba(156,148,124,.35)}
.invit__chiffre{font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:clamp(3.2rem,6vw,4.4rem);line-height:.85;color:var(--olive);letter-spacing:-.01em}
.invit__quoi{font-size:.88rem;font-weight:300;color:var(--olive);line-height:1.4;padding-top:.15rem}
@media(min-width:761px){ .invit__quoi{white-space:nowrap} }
.invit__quoi b{font-weight:400}
.invit__quand{display:table;margin-top:.5rem;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kaki-maquis);border-bottom:1px solid var(--dore);padding-bottom:.22em}
  /* le doré reste sur le FILET, jamais sur le texte : il tombe à 2,1:1 sur fond crème */
.invit__form{display:flex;gap:.6rem;margin-top:1.6rem;flex-wrap:wrap}
.invit__form input{flex:1 1 190px;font-family:var(--sans);font-weight:300;font-size:.95rem;color:var(--olive);
  background:transparent;border:0;border-bottom:1px solid rgba(156,148,124,.5);padding:.55rem 0;
  border-radius:0;transition:border-color .4s var(--ease)}
.invit__form input:focus{outline:none;border-bottom-color:var(--olive)}
.invit__form input::placeholder{color:rgba(86,90,60,.38)}
.invit__form .btn{flex:0 0 auto}
.invit__note{margin-top:1rem;font-size:.7rem;font-weight:300;color:var(--olive-soft)}
.invit__note a{color:inherit}
.invit__fermer{position:absolute;top:.7rem;right:.7rem;z-index:3;width:34px;height:34px;
  background:rgba(253,252,249,.9);border:0;border-radius:50%;cursor:pointer;color:var(--olive);
  font-size:1.1rem;line-height:1;transition:background .35s,transform .35s var(--ease)}
.invit__fermer:hover{background:#fff;transform:rotate(90deg)}
@media(max-width:760px){
  .invit{padding:1.2rem;align-items:flex-end}
  .invit__boite{grid-template-columns:1fr;max-height:88vh;overflow:auto}
  .invit__ph{aspect-ratio:16/8}
}
@media (prefers-reduced-motion: reduce){ .invit,.invit__boite{transition:none} }

/* ============ PAGES LÉGALES (27/07) ============
   Pages de texte : une colonne étroite, une hiérarchie claire, rien d'autre.
   Les champs que seul le client peut fournir sont marqués `.legal__trou`. */
.legal{background:var(--blanc);padding:clamp(7rem,13vh,9rem) 5vw clamp(5rem,10vh,7rem)}
.legal__wrap{width:min(760px,92vw);margin-inline:auto}
.legal__eyebrow{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--kaki-maquis)}
.legal h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.1rem,4.4vw,3.1rem);
  line-height:1.1;color:var(--olive);margin:.5rem 0 .3rem}
.legal h1 em{font-style:italic}
.legal__maj{font-size:.72rem;color:var(--kaki-maquis);margin-bottom:2.8rem}
.legal h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.25rem,2.2vw,1.55rem);
  color:var(--olive);margin:2.8rem 0 .9rem;padding-top:1.6rem;border-top:1px solid rgba(156,148,124,.28)}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal h3{font-family:var(--sans);font-weight:400;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kaki-maquis);margin:1.8rem 0 .5rem}
.legal p,.legal li{color:var(--olive-soft);font-weight:300;line-height:1.75;max-width:70ch}
.legal p{margin-bottom:1rem}
.legal ul{list-style:none;padding:0;margin:0 0 1.2rem}
.legal li{position:relative;padding-left:1.3rem;margin-bottom:.55rem}
.legal li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--dore)}
.legal a{color:var(--olive);text-decoration:underline;text-decoration-color:rgba(156,148,124,.4)}
.legal dl{margin:0 0 1.4rem}
.legal dt{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--kaki-maquis);margin-top:1rem}
.legal dd{margin:.25rem 0 0;color:var(--olive-soft);font-weight:300}
/* ce que seul le client peut fournir — visible, jamais inventé */
.legal__trou{display:inline-block;background:rgba(183,154,91,.13);border-bottom:1px solid var(--dore);
  padding:.1em .5em;font-size:.9em;color:var(--olive);font-style:italic}
.legal__note{margin:2.5rem 0 0;padding:1.2rem 1.4rem;background:rgba(156,148,124,.07);
  border-left:2px solid var(--dore);font-size:.85rem;line-height:1.7;color:var(--olive-soft)}
.legal__note b{font-weight:400;color:var(--olive)}

/* ============ CIBLES TACTILES & FOCUS (27/07) ============
   Audit : au doigt, plusieurs cibles tombaient sous les 44 px recommandés —
   burger 36×27, boutons 37, croix du pop-up 33, liens téléphone 23.
   On agrandit UNIQUEMENT sous 900 px : au clic, la souris n'a pas ce besoin
   et le rendu desktop validé par Andrea reste intact. */
@media(max-width:900px){
  .burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .invit__fermer{width:44px;height:44px;font-size:1.25rem}
  .ccoord a.v{display:inline-flex;align-items:center;min-height:44px}
  .citin li,.autres .ligne{min-height:44px}
}
/* Le focus clavier doit rester visible : `outline:none` sans remplacement
   rend le site inutilisable sans souris. */
.cchamp input:focus-visible,.cchamp select:focus-visible,.cchamp textarea:focus-visible,
.invit__form input:focus-visible,.field input:focus-visible,.field select:focus-visible,
.field textarea:focus-visible{outline:2px solid var(--kaki-maquis);outline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--kaki-maquis);outline-offset:3px;border-radius:1px}
.header a:focus-visible,.hero a:focus-visible,.shero a:focus-visible,
.ssoeur a:focus-visible,.csoir a:focus-visible{outline-color:var(--creme)}

/* ============ CORRECTIF <picture> (27/07) ============
   La conversion WebP a enveloppé chaque <img> dans un <picture>. Or tout le CSS
   du site cible « conteneur img » en comptant sur le fait que l'image est
   l'enfant direct : carrousels (flex), galeries (grid), vignettes de nav…
   Le <picture> s'intercalait et cassait la mise en page — 4 photos côte à côte
   dans les sliders au lieu d'une.
   `display:contents` retire le <picture> de l'arbre de mise en page : l'<img>
   redevient l'enfant direct de son conteneur. Une ligne, tous les cas réglés. */
picture{display:contents}

/* Sélecteur de langue */
.lang-choix{display:flex;align-items:center;gap:.42rem;color:var(--blanc)}
/* le sélecteur suit la couleur de la nav : blanc sur photo, olive sur fond clair */
.header.scrolled .lang-choix,.header--solid .lang-choix{color:var(--kaki-maquis)}
.lang-choix button{background:none;border:0;cursor:pointer;padding:.25em .1em;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;color:currentColor;opacity:.55;
  transition:opacity .3s var(--ease)}
.lang-choix button:hover{opacity:.85}
.lang-choix button[aria-current="true"]{opacity:1;border-bottom:1px solid var(--dore)}
@media(max-width:980px){ .lang-choix{gap:.7rem;padding:.6rem 0} .lang-choix button{font-size:.72rem} }

/* ============ FIL ROUGE « dolce far niente » — A1 · L'EXERGUE (choix d'Andrea, 17/10) ============
   La phrase de la maison posée seule, en grand italique, beaucoup d'air, signée
   « dolce far niente » entre deux filets d'or (le doré ne porte que les filets).
   UNE seule par page. Asymétrique comme dans fil-rouge-variantes.html : le grand vide
   du dessus fait la pause, le plus court du dessous la lie à ce qu'elle introduit —
   la section voisine rend donc son padding, réglé dans le style de chaque page. */
.exergue{background:var(--blanc);text-align:center;padding:clamp(8rem,19vh,12.5rem) 5vw clamp(4rem,8vh,5.5rem)}
.exergue .eyebrow{margin-bottom:1.7rem}
.exergue__phrase{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(2.05rem,4.3vw,3.55rem);line-height:1.18;color:var(--olive);max-width:20ch;margin:0 auto;text-wrap:balance}
.exergue__phrase .romain{font-style:normal;white-space:nowrap}
.exergue__sign{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:2.2rem;font-family:var(--font-display);font-weight:300;font-style:italic;font-size:1.14rem;line-height:1;color:var(--kaki-maquis);white-space:nowrap}
.exergue__sign i{display:block;width:36px;height:1px;background:var(--dore);transform-origin:right center}
.exergue__sign i + span + i{transform-origin:left center}
/* la phrase porte déjà « dolce far niente » : un seul filet, centré */
.exergue__sign--seul{gap:0}
.exergue__sign--seul i{width:44px;transform-origin:center}
/* les filets se déroulent et la signature se pose avec la phrase — seulement quand site.js
   arme le composant (GSAP présent, mouvement autorisé) : sans JS, tout est déjà en place
   (transitions portées par .vu seulement : l'armement est instantané, rien ne se replie sous les yeux) */
.exergue--arme .exergue__sign i{transform:scaleX(0)}
.exergue--arme .exergue__sign span{opacity:0}
.exergue--arme.vu .exergue__sign i{transform:none;transition:transform 1.3s var(--ease) .35s}
.exergue--arme.vu .exergue__sign span{opacity:1;transition:opacity 1.2s var(--ease) .15s}
@media(max-width:560px){ .exergue{padding:clamp(6.5rem,15vh,8rem) 16px clamp(3rem,6vh,4rem)} }