
:root{
  --sand:#e4c79b;
  --sand-deep:#d8b982;
  --sand-soft:#efd9b5;
  --paper:#edd2a7;
  --ink:#372513;
  --olive:#273019;
  --bronze:#8c6d43;
  --line:rgba(55,37,19,.42);
  --white:#fffaf0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.14),transparent 30%),
    linear-gradient(rgba(255,255,255,.035),rgba(0,0,0,.018)),
    var(--sand);
  color:var(--ink);
  font-family:"Libre Baskerville",serif;
  line-height:1.65;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
button{font:inherit}
h1,h2,h3,h4,p{margin-top:0}
.section{padding:5.2rem 5vw}
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 4.5vw;
  background:rgba(232,203,158,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(55,37,19,.12);
}
.wordmark,.footer-mark{position:relative;display:flex;align-items:baseline;gap:.3rem;padding-bottom:1.15rem}
.wordmark span,.footer-mark span{font-family:"Marcellus",serif;font-size:1.1rem}
.wordmark strong,.footer-mark strong{font-family:"Libre Baskerville",serif;font-weight:400;font-size:1.2rem}
.wordmark i,.footer-mark i{font-family:"Italianno",cursive;font-size:2.9rem;font-weight:400;line-height:.3;margin-left:.12em;margin-right:-.06em}
.dots{
  position:absolute;bottom:.25rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.38rem
}
.dots::before,.dots::after{content:"";width:70px;height:1px;background:var(--line);position:absolute;top:50%}
.dots::before{right:calc(100% + .7rem)} .dots::after{left:calc(100% + .7rem)}
.dots span{width:4px;height:4px;border-radius:50%;background:var(--ink)}
.main-nav{display:flex;align-items:center;gap:1.55rem}
.main-nav a{font-family:"Marcellus",serif;text-transform:uppercase;font-size:.69rem}
.main-nav a:not(.book-link){padding-bottom:.35rem}
.main-nav a:not(.book-link):hover{border-bottom:1px solid var(--ink)}
.book-link{background:var(--olive);color:var(--white);padding:.9rem 1.2rem}
.mobile-toggle{display:none}
.hero{display:grid;grid-template-columns:44% 56%;min-height:680px}
.hero-left{
  padding:5rem 4.5vw 4rem;
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(90deg,rgba(238,212,171,.96),rgba(238,212,171,.84),rgba(238,212,171,.55));
}
.hero-title>span{
  font-family:"Marcellus",serif;
  font-size:clamp(2rem,3.3vw,3.8rem);
  display:block;
}
.hero-title h1{
  margin:.2rem 0 0;
  font-family:"Italianno",cursive;
  font-size:clamp(5.4rem,8.5vw,9rem);
  font-weight:400;
  line-height:.72;
}
.hero-title h1 i{font-style:normal;font-size:1.35em}
.rule-with-dots,.title-rule{
  display:flex;align-items:center;gap:1rem;margin:2.2rem 0 1.6rem;color:var(--bronze)
}
.rule-with-dots span,.title-rule span{height:1px;background:currentColor;flex:1}
.rule-with-dots b,.title-rule b{font-size:.65rem;letter-spacing:.28em;font-weight:400}
.tagline{
  text-transform:uppercase;letter-spacing:.16em;font-family:"Marcellus",serif;
  font-size:1rem;text-align:center
}
.tiny-rule{width:34px;height:1px;background:var(--bronze);margin:0 auto 1.3rem}
.hero-copy{text-align:center;font-size:.86rem}
.hero-actions{display:flex;gap:1rem;margin-top:1.7rem;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.2rem;border:1px solid rgba(55,37,19,.35);
  text-transform:uppercase;font-family:"Marcellus",serif;font-size:.68rem;letter-spacing:.04em
}
.btn.dark{background:var(--olive);border-color:var(--olive);color:var(--white)}
.btn.light{background:rgba(255,246,226,.32)}
.btn.outline-dark{background:transparent}
.hero-photo{overflow:hidden;min-height:680px}
.hero-photo img{height:100%;object-fit:cover;object-position:center}
.heritage{
  display:grid;grid-template-columns:44% 56%;gap:7vw;align-items:center;
  border-top:1px solid rgba(55,37,19,.22);border-bottom:1px solid rgba(55,37,19,.22)
}
.heritage-copy h2,.center-heading h2,.contact-section h2{
  font-family:"Italianno",cursive;font-weight:400;font-size:clamp(3.3rem,5vw,5.4rem);line-height:.9;margin-bottom:.3rem
}
.title-rule{max-width:280px;margin:1.2rem 0 1.5rem}
.title-rule.short{max-width:230px;margin:1rem auto 2rem}
.heritage-copy p{font-size:.88rem;max-width:560px}
.heritage-photo{position:relative;padding:.35rem;border:1px solid rgba(55,37,19,.42);background:rgba(255,250,238,.18)}
.heritage-photo img{height:370px;object-fit:cover}
.corner{position:absolute;width:18px;height:18px;border-color:var(--bronze)}
.corner.tl{left:-4px;top:-4px;border-left:1px solid;border-top:1px solid}
.corner.tr{right:-4px;top:-4px;border-right:1px solid;border-top:1px solid}
.corner.bl{left:-4px;bottom:-4px;border-left:1px solid;border-bottom:1px solid}
.corner.br{right:-4px;bottom:-4px;border-right:1px solid;border-bottom:1px solid}
.center-heading{text-align:center}
.cards-section{border-bottom:1px solid rgba(55,37,19,.22)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1300px;margin:auto}
.card{border:1px solid rgba(55,37,19,.35);background:rgba(243,219,182,.36)}
.card img{height:245px;object-fit:cover}
.card-body{text-align:center;padding:1.35rem}
.card-body h3{font-family:"Marcellus",serif;text-transform:uppercase;font-size:1rem;font-weight:400}
.card-body p{font-size:.8rem;min-height:76px}
.card-body a{display:inline-block;border:1px solid rgba(55,37,19,.35);padding:.65rem 1.1rem;text-transform:uppercase;font-family:"Marcellus",serif;font-size:.65rem}
.signature-strip{
  padding:2.8rem 4.5vw;
  display:grid;grid-template-columns:1.45fr repeat(4,1fr);
  border-bottom:1px solid rgba(55,37,19,.22)
}
.sketch-panel{padding-right:1.5rem}
.sketch-panel img{
  height:170px;object-fit:cover;filter:sepia(1) contrast(.82) opacity(.66);
  mix-blend-mode:multiply
}
.value{padding:0 1.2rem;text-align:center;border-left:1px solid rgba(55,37,19,.23)}
.value h4{font-family:"Marcellus",serif;text-transform:uppercase;font-size:.72rem;font-weight:400}
.value p{font-size:.68rem}
.icon{height:44px;display:grid;place-items:center;font-size:2rem;color:var(--bronze)}
.icon.arch{width:28px;height:36px;margin:0 auto .5rem;border:2px solid var(--bronze);border-bottom:0;border-radius:15px 15px 0 0;position:relative}
.icon.arch::after{content:"";position:absolute;bottom:0;left:6px;right:6px;height:18px;border-left:1px solid var(--bronze);border-right:1px solid var(--bronze)}
.gallery{border-bottom:1px solid rgba(55,37,19,.22)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:300px;gap:1rem;max-width:1300px;margin:auto}
.gallery-item{padding:0;border:1px solid rgba(55,37,19,.25);overflow:hidden;cursor:zoom-in;background:transparent}
.gallery-item img{height:100%;object-fit:cover;transition:.55s}
.gallery-item:hover img{transform:scale(1.035)}
.gallery-item.tall{grid-row:span 2}.gallery-item.wide{grid-column:span 2}
.contact-section{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.small-label{text-transform:uppercase;letter-spacing:.18em;font-family:"Marcellus",serif;font-size:.68rem}
.contact-copy p{max-width:540px}
footer{
  background:#2d261d;color:#f7e8cd;padding:3rem 4.5vw;
  display:grid;grid-template-columns:1fr auto auto;gap:2rem;align-items:end
}
footer .dots span{background:#f7e8cd}footer .dots::before,footer .dots::after{background:rgba(247,232,205,.45)}
footer p{margin:0;font-size:.75rem}footer>a{font-size:.7rem;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:none}
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(22,17,12,.96);
  display:grid;place-items:center;padding:4vw;opacity:0;visibility:hidden;transition:.3s
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:88vh;width:auto;height:auto}
.lightbox-close{position:absolute;right:2rem;top:1rem;background:none;border:0;color:white;font-size:3rem;cursor:pointer}

@media(max-width:980px){
  .main-nav{position:fixed;inset:0;background:rgba(230,203,160,.985);flex-direction:column;justify-content:center;transform:translateX(100%);transition:.35s}
  .menu-open .main-nav{transform:none}
  .mobile-toggle{display:block;position:relative;z-index:60;width:44px;height:44px;border:0;background:transparent}
  .mobile-toggle span{position:absolute;left:8px;width:28px;height:2px;background:var(--ink)}
  .mobile-toggle span:first-child{top:17px}.mobile-toggle span:last-child{top:26px}
  .hero{grid-template-columns:1fr}.hero-photo{min-height:500px}.hero-left{order:2}
  .heritage{grid-template-columns:1fr}.heritage-photo img{height:430px}
  .signature-strip{grid-template-columns:1fr 1fr}.sketch-panel{grid-column:1/-1;margin-bottom:2rem}.value{border-left:0;border-top:1px solid rgba(55,37,19,.18);padding-top:1.4rem}
}
@media(max-width:680px){
  .topbar{padding:.9rem 1rem}.wordmark span{font-size:.9rem}.wordmark strong{font-size:1rem}.wordmark i{font-size:2.4rem}
  .section{padding:4.5rem 1.2rem}.hero-left{padding:4.4rem 1.2rem 3.2rem}.hero-title>span{font-size:2rem}.hero-title h1{font-size:5.8rem}
  .hero-photo{min-height:360px}.hero-actions{flex-direction:column}.btn{width:100%}
  .heritage-photo img{height:320px}
  .cards{grid-template-columns:1fr}.card img{height:280px}.card-body p{min-height:auto}
  .signature-strip{grid-template-columns:1fr;padding:2.8rem 1.2rem}.value{padding:1.5rem 0}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:280px}.gallery-item.tall,.gallery-item.wide{grid-row:auto;grid-column:auto}
  .contact-section{grid-template-columns:1fr}
  footer{grid-template-columns:1fr;align-items:start}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}


/* =========================================================
   AJUSTEMENTS ESQUISSE VALIDÉE
   - contenu et photos inchangés
   - fonds plus clairs pour chambre / spa / sauna
   - bandeau valeurs plus clair
   - photo du bandeau affichée sans filtre ni fusion
   ========================================================= */

/* Fond général légèrement plus parchemin / crème, comme l'esquisse validée */
:root{
  --sand:#efd9b6;
  --sand-deep:#e3c393;
  --sand-soft:#f5e5c9;
  --paper:#f3dfbf;
  --ink:#372513;
  --olive:#273019;
  --bronze:#8c6d43;
  --line:rgba(55,37,19,.36);
  --white:#fffaf0;
}

body{
  background:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.22),transparent 32%),
    linear-gradient(rgba(255,255,255,.055),rgba(0,0,0,.012)),
    var(--sand);
}

.topbar{
  background:rgba(242,220,184,.97);
}

/* Cartes Chambre / Spa / Sauna : fond volontairement plus clair,
   sans modifier les images. */
.cards-section{
  background:rgba(248,234,209,.35);
}

.card{
  background:#f7e8cd;
  border-color:rgba(93,68,38,.31);
  box-shadow:0 7px 22px rgba(72,48,24,.035);
}

.card-body{
  background:#f8ead1;
}

.card img{
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* Bandeau "Lieu d'histoire / Cadre paisible / ..." :
   plus clair et plus proche de l'esquisse. */
.signature-strip{
  position:relative;
  margin:0 2.2vw 2.4rem;
  padding:3.2rem 3vw;
  background:#f8ead0;
  border:1px solid rgba(140,109,67,.50);
}

/* Double filet intérieur discret, esprit cadre ancien */
.signature-strip::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(140,109,67,.22);
  pointer-events:none;
}

.value{
  position:relative;
  z-index:1;
  background:transparent;
}

.value p{
  color:#44301d;
}

.value h4{
  color:#372513;
}

/* Très important : la photo reste strictement la photo d'origine.
   Aucun sepia, aucune transparence, aucun mode de fusion. */
.sketch-panel{
  position:relative;
  z-index:1;
  padding-right:1.7rem;
}

.sketch-panel img{
  height:170px;
  object-fit:cover;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  border:1px solid rgba(93,68,38,.28);
  background:transparent;
}

/* Harmonie générale avec l'esquisse, sans toucher à la structure */
.heritage{
  background:rgba(248,235,211,.18);
}

.gallery{
  background:rgba(248,235,211,.10);
}

@media(max-width:980px){
  .signature-strip{
    margin:0 1.2rem 2rem;
  }
}

@media(max-width:680px){
  .signature-strip{
    margin:0 .8rem 1.5rem;
    padding:2.2rem 1.2rem;
  }
}


/* =========================================================
   PHOTO PRINCIPALE — FONDU VALIDÉ
   Uniquement la photo hero a été remplacée.
   Le reste du site reste inchangé.
   ========================================================= */

.hero{
  overflow:hidden;
}

.hero-photo{
  position:relative;
  overflow:hidden;
  min-height:680px;
  background:var(--sand);
}

/* La photo reste nette, sans filtre. */
.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* Fondu parchemin sur le bord gauche, comme sur l'esquisse validée. */
.hero-photo::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:34%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(239,217,182,1) 0%,
    rgba(239,217,182,.92) 14%,
    rgba(239,217,182,.65) 38%,
    rgba(239,217,182,.28) 68%,
    rgba(239,217,182,0) 100%
  );
}

/* Léger halo chaud à la jonction texte/photo pour éviter une coupure franche. */
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(255,247,232,.10) 0%,
    transparent 38%
  );
}

@media(max-width:980px){
  /* Sur tablette/mobile, pas de fondu latéral puisque l'image passe sous le texte. */
  .hero-photo::before,
  .hero-photo::after{
    display:none;
  }
}


/* =========================================================
   Remplacement photo section "Un héritage vivant"
   - nouvelle photo hivernale
   - section adaptée à son format
   - aucune autre section modifiée
   ========================================================= */

.heritage{
  align-items:center;
}

.heritage-photo{
  max-width:100%;
}

.heritage-photo img{
  width:100%;
  height:auto !important;
  aspect-ratio:14 / 10;
  object-fit:cover;
  object-position:center;
  display:block;
}

@media(max-width:980px){
  .heritage-photo img{
    aspect-ratio:14 / 10;
    height:auto !important;
  }
}


/* Mise à jour photo du bandeau "Lieu d'histoire / Cadre paisible / ..." */
.sketch-panel img{
  height:220px !important;
  width:100%;
  object-fit:cover;
  object-position:center;
}

@media(max-width:980px){
  .sketch-panel img{
    height:260px !important;
  }
}

@media(max-width:680px){
  .sketch-panel img{
    height:300px !important;
  }
}


/* =========================================================
   CORRECTION : photo du bandeau non rognée
   - affichage complet de l'image
   - aucune autre section modifiée
   ========================================================= */

.sketch-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-right:1.7rem;
}

.sketch-panel img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:360px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block;
  margin:0 auto;
  background:transparent !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

@media(max-width:980px){
  .sketch-panel{
    padding-right:0;
  }
  .sketch-panel img{
    max-height:420px !important;
  }
}

@media(max-width:680px){
  .sketch-panel img{
    max-height:480px !important;
  }
}


/* =========================================================
   Mise à jour : photo du bandeau remplacée par le logo
   Affichage complet, sans rognage.
   ========================================================= */
.sketch-panel img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:300px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block;
  margin:0 auto;
}


/* =========================================================
   Intégration du logo circulaire propre dans le bandeau
   "Lieu d'histoire / Cadre paisible / Discrétion & élégance / Séjour romantique"
   ========================================================= */
.sketch-panel{
  display:flex;
  align-items:center;
  justify-content:center;
}
.sketch-panel img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:300px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block;
  margin:0 auto;
  background:transparent !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}
