/* ===================================================================
   Les Roches Blanches — thème clair (parchemin alpin)
   =================================================================== */
:root{
  --cream:#F6F0E3;        /* fond principal, parchemin chaud */
  --cream-2:#EEE3CB;      /* fond de section légèrement plus soutenu */
  --paper:#FFFCF6;        /* surfaces / cartes */
  --ink:#2A2018;          /* texte principal, brun presque noir */
  --ink-soft:rgba(42,32,24,.66);
  --ink-faint:rgba(42,32,24,.58);
  --ember:#A63A2C;        /* rouge de la marque #LRB */
  --ember-deep:#7E2B20;
  --saffron:#B98A2E;      /* or de la marque, assombri pour le contraste sur clair */
  --saffron-light:#E7C878;
  --pine:#3F5636;         /* vert sapin, tiré de la terrasse */
  --line:rgba(42,32,24,.13);
  --line-soft:rgba(42,32,24,.07);
  --shadow:0 20px 46px rgba(42,32,24,.12);
  --shadow-lift:0 28px 60px rgba(42,32,24,.16);
  --radius:22px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:'Inter',Segoe UI,Arial,sans-serif;
  line-height:1.65;
  background:var(--cream);
  letter-spacing:.005em;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.container{width:min(calc(100% - 32px), var(--max));margin:0 auto}

/* ---------- header ---------- */
.topbar{
  position:sticky; top:0; z-index:1000;
  background:rgba(246,240,227,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  min-height:76px; display:flex; gap:18px; flex-wrap:wrap;
  align-items:center; justify-content:space-between; padding:12px 0;
}
.brandline{display:flex; flex-direction:column; gap:2px}
.brandline strong{
  color:var(--ember); text-transform:uppercase; letter-spacing:.16em;
  font-size:.86rem; font-weight:800;
}
.brandline span{color:var(--ink-soft); font-size:.94rem}
.nav{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:13px 24px; border-radius:999px;
  font-size:.86rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
  box-shadow:0 10px 24px rgba(42,32,24,.10);
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--ember),var(--ember-deep)); color:#FBF3E7}
.btn-dark{background:var(--paper); border:1px solid var(--line); color:var(--ink)}
.btn-outline{background:transparent; border:1px solid var(--ember); color:var(--ember)}

/* ---------- hero ---------- */
.hero{padding:30px 0 28px}
.hero-shell{
  border-radius:32px; overflow:hidden; position:relative;
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:var(--shadow-lift);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; min-height:640px}
.hero-copy{
  padding:56px; display:flex; flex-direction:column; justify-content:center;
  position:relative;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
  font-family:'Caveat',cursive; color:var(--ember);
  font-size:1.5rem; font-weight:700;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--saffron);
}
h1,h2,h3{
  font-family:'Fraunces',Georgia,serif;
  letter-spacing:-.02em; line-height:1.04; color:var(--ink);
}
h1{margin:0 0 18px; font-size:clamp(2.6rem, 5.6vw, 4.9rem); font-weight:700}
.lead{
  font-size:1.08rem; color:var(--ink-soft); max-width:600px; margin-bottom:26px;
}
.hero-card{
  margin-top:22px; padding:22px 24px; max-width:560px;
  border-radius:20px; background:var(--cream-2);
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.hero-card::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(115deg, rgba(246,240,227,.94), rgba(246,240,227,.7)),
    url('fond-2026.jpg') center/cover no-repeat;
  opacity:.5;
}
.hero-card > *{position:relative; z-index:1}

.hero-badge{
  text-align:center; padding:36px; border-radius:24px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-lift);
  max-width:360px;
}
.hero-badge img{width:170px; margin:0 auto 20px}
.hero-badge p{margin:0; color:var(--ink-soft)}

/* postcard carousel — signature element */
.hero-media{
  position:relative; min-height:420px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:44px 40px; background:var(--cream-2);
}
.hero-callout{
  text-align:center; padding:14px 22px; border-radius:16px; max-width:340px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow);
  font-size:.92rem; color:var(--ink-soft);
}
.hero-callout strong{
  display:block; color:var(--ink); font-family:'Fraunces',serif;
  font-size:1.08rem; margin-bottom:4px;
}
.hero-callout a{color:var(--ember); font-weight:700}
.postcard-stack{
  position:relative; width:100%; max-width:360px; aspect-ratio:4/5;
}
.postcard-slide{
  position:absolute; inset:0;
  background:var(--paper); padding:12px 12px 40px; border-radius:16px;
  box-shadow:var(--shadow-lift); border:1px solid var(--line);
  opacity:0; transform:rotate(var(--rot,0deg)) scale(.96);
  transition:opacity .65s ease, transform .65s ease;
  pointer-events:none;
}
.postcard-slide.active{
  opacity:1; transform:rotate(calc(var(--rot,0deg) * .35)) scale(1);
  z-index:3; pointer-events:auto;
}
.postcard-slide img{
  width:100%; height:100%; object-fit:cover; border-radius:9px;
}
.postcard-caption{
  position:absolute; left:12px; right:12px; bottom:12px;
  font-family:'Caveat',cursive; font-size:1.2rem; font-weight:700;
  color:var(--ember); text-align:center;
}
.postcard-nav{
  position:absolute; left:0; right:0; bottom:-14px;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.postcard-arrow{
  width:38px; height:38px; border-radius:50%; background:var(--paper);
  border:1px solid var(--line); color:var(--ember); font-size:1.2rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .15s ease;
}
.postcard-arrow:hover{transform:scale(1.08)}
.postcard-dots{display:flex; gap:8px}
.postcard-dot{
  width:9px; height:9px; border-radius:50%; background:var(--line);
  border:none; cursor:pointer; padding:0; transition:background .2s ease, transform .2s ease;
}
.postcard-dot.active{background:var(--ember); transform:scale(1.2)}

/* ---------- sections ---------- */
.section{padding:16px 0 34px}
.section-title{
  text-align:center; margin:0 0 12px; font-size:clamp(1.9rem, 3.6vw, 3rem)
}
.section-sub{
  text-align:center; color:var(--ink-soft); max-width:760px; margin:0 auto 24px;
}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:var(--paper);
  border:1px solid var(--line); border-radius:24px; overflow:hidden;
  box-shadow:var(--shadow);
}
.card-body{padding:22px}
.card h3{margin:0 0 10px; font-size:1.55rem}
.card p{margin:0; color:var(--ink-soft)}
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.info-box{
  padding:22px; border-radius:20px; background:var(--paper);
  border:1px solid var(--line)
}
.info-box strong{
  display:block; margin-bottom:8px; color:var(--ember);
  text-transform:uppercase; letter-spacing:.12em; font-size:.76rem
}
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.gallery img{
  width:100%; border-radius:20px; border:1px solid var(--line);
  box-shadow:var(--shadow)
}
.single-gallery{display:grid; gap:18px}
.panel{
  margin-top:20px; padding:24px; border-radius:24px;
  background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--shadow)
}
.center{text-align:center}
.lang-toggle{display:flex; justify-content:center; gap:10px; margin-bottom:26px}
.lang-btn{background:var(--paper); border:1px solid var(--line); color:var(--ink)}
.lang-btn.is-active{background:linear-gradient(135deg,var(--ember),var(--ember-deep)); color:#FBF3E7; border-color:transparent}
.footer{
  padding:24px 0 44px; color:var(--ink-soft); text-align:center
}
hr.sep{
  border:none; border-top:1px solid var(--line); margin:14px 0 0;
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero-grid,.cards,.info-grid,.gallery{grid-template-columns:1fr}
  .hero-copy{padding:34px 24px}
  .hero-media{min-height:320px; padding:36px 20px}
  .postcard-stack{max-width:300px}
}