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

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --cream:#fdf7f2;--cream2:#f5ece4;--cream3:#ede0d6;
  --gold:#b8924a;--gold2:#c9a55a;--gold-pale:#e8d4b0;--gold-faint:#faf4e8;
  --brown:#5c3d28;--brown2:#8a6248;--text:#2e1c10;--text2:#7a5c48;--white:#fffbf7;
}

body{font-family:'Raleway',sans-serif;background:var(--cream);color:var(--text);overflow-x:hidden}

/* ── NAV ── */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.8rem 3rem;background:rgba(253,247,242,0.97);
  border-bottom:1px solid var(--gold-pale);position:sticky;top:0;z-index:200;
}
.logo-wrap{display:flex;flex-direction:column;cursor:pointer;text-decoration:none}
.logo-script{
  font-family:'Great Vibes',cursive;font-size:2.1rem;
  background:linear-gradient(135deg,#c9a55a,#8b6a35,#c9a55a);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;
}
.logo-sub{font-family:'Cinzel',serif;font-size:0.44rem;letter-spacing:0.38em;text-transform:uppercase;color:var(--brown2);margin-top:1px;font-weight:300}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{
  font-size:0.58rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--text2);text-decoration:none;cursor:pointer;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:all 0.25s;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ── PAGES ── */
.page{display:none;animation:fp 0.4s ease}.page.active{display:block}
@keyframes fp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── BUTTONS ── */
.btn-gold{padding:0.65rem 1.7rem;background:var(--gold);color:var(--white);border:none;cursor:pointer;font-family:'Raleway',sans-serif;font-size:0.58rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;transition:background 0.25s;text-decoration:none;display:inline-block}
.btn-gold:hover{background:var(--brown)}
.btn-ghost{padding:0.65rem 1.7rem;background:transparent;color:var(--text2);border:1px solid var(--gold-pale);cursor:pointer;font-family:'Raleway',sans-serif;font-size:0.58rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;transition:all 0.25s;text-decoration:none;display:inline-block}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ── TYPO ── */
.eyebrow{display:flex;align-items:center;gap:0.7rem;font-size:0.52rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);margin-bottom:0.9rem}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--gold)}
.slabel{display:flex;align-items:center;gap:0.6rem;font-size:0.5rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--gold);margin-bottom:0.55rem}
.slabel::before{content:'';width:12px;height:1px;background:var(--gold)}
.htitle{font-family:'Great Vibes',cursive;font-size:clamp(1.8rem,3vw,2.8rem);color:var(--text);line-height:1.1;margin-bottom:0.7rem}
.btext{font-size:0.76rem;font-weight:300;color:var(--text2);line-height:1.9}

/* ── GOLD BAR ── */
.gold-bar{background:var(--gold);padding:0.65rem 2rem;display:flex;justify-content:center;align-items:center;gap:1.6rem;flex-wrap:wrap}
.gb-item{font-family:'Cinzel',serif;font-size:0.45rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--white);font-weight:300}
.gb-sep{color:rgba(255,255,255,0.35);font-size:0.38rem}

/* ── LOGO IMAGE ── */
.logo-wrap { cursor: pointer; text-decoration: none; display: flex; align-items: center; }
.logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ── HERO CENTRÉ (accueil sans photo) ── */
.hero-centered {
  min-height: 80vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: var(--cream); padding: 3rem 2rem;
  position: relative; overflow: hidden;
}
.hero-centered::before {
  content: ''; position: absolute;
  top: -120px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-faint) 0%, transparent 70%);
  pointer-events: none;
}
.hero-logo-img {
  width: min(480px, 80vw);
  height: auto;
  object-fit: contain;
  margin-bottom: 1.6rem;
  position: relative;
}
.hero-desc-center {
  font-size: 0.72rem; font-weight: 300; color: var(--text2); letter-spacing: 0.08em;
  margin-bottom: 2.2rem;
}
.hero-btns-center { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* ── GALERIE MINI (accueil) ── */
.mini-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;height:200px}
.mgimg{overflow:hidden}
.mgimg img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s}
.mgimg:hover img{transform:scale(1.06)}

/* ── QUOTE BANNER ── */
.qbanner{position:relative;height:260px;overflow:hidden}
.qbanner img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.qbanner-ov{position:absolute;inset:0;background:rgba(35,18,8,0.54);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}
.qbanner-orn{font-size:0.58rem;letter-spacing:0.5em;color:var(--gold2);margin-bottom:0.6rem}
.qbanner-q{font-family:'Great Vibes',cursive;font-size:clamp(1.6rem,2.6vw,2.3rem);color:var(--white);line-height:1.3;max-width:520px;margin-bottom:1.1rem}

/* ── SOINS PAGE ── */
.page-hero{position:relative;height:200px;overflow:hidden}
.page-hero img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.page-hero-ov{position:absolute;inset:0;background:rgba(35,18,8,0.5);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

.cat-nav{display:flex;justify-content:center;background:var(--cream2);border-bottom:1px solid var(--gold-pale);flex-wrap:wrap}
.cat-btn{font-family:'Cinzel',serif;font-size:0.46rem;letter-spacing:0.16em;text-transform:uppercase;padding:0.78rem 1.2rem;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text2);cursor:pointer;transition:all 0.25s}
.cat-btn:hover,.cat-btn.active{color:var(--gold);border-bottom-color:var(--gold)}
.cat-section{display:none}.cat-section.active{display:block}

/* ── LISTE SOINS ── */
.soins-list-wrap{padding:1.8rem 2.5rem;background:var(--white)}
.soins-list-wrap h3{font-family:'Cinzel',serif;font-size:0.5rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;display:flex;align-items:center;gap:0.7rem}
.soins-list-wrap h3::before{content:'';flex:1;height:1px;background:var(--gold-pale)}
.soins-list-wrap h3::after{content:'';flex:1;height:1px;background:var(--gold-pale)}

.soin-item{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 0;border-bottom:1px solid var(--gold-pale);gap:1rem}
.soin-item:last-child{border-bottom:none}
.soin-left{flex:1}
.soin-item-name{font-family:'Great Vibes',cursive;font-size:1.4rem;color:var(--text);line-height:1.1}
.soin-item-desc{font-size:0.68rem;font-weight:300;color:var(--text2);margin-top:0.15rem;line-height:1.6}
.soin-right{display:flex;align-items:center;gap:1.2rem;flex-shrink:0}
.soin-meta-inline{text-align:right}
.soin-dur-inline{font-size:0.5rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text2);font-weight:300}
.soin-price-inline{font-size:0.65rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--gold);font-weight:500}
.btn-resa-sm{padding:0.4rem 1rem;background:var(--gold);color:var(--white);font-family:'Raleway',sans-serif;font-size:0.48rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;border:none;cursor:pointer;transition:background 0.25s;text-decoration:none;display:inline-block;white-space:nowrap}
.btn-resa-sm:hover{background:var(--brown)}

.planity-note{background:var(--gold-faint);border:1px solid var(--gold-pale);padding:0.9rem 1.4rem;margin:1.2rem 0 0;display:flex;align-items:center;gap:0.8rem;font-size:0.68rem;font-weight:300;color:var(--text2)}
.planity-note a{color:var(--gold);text-decoration:none;font-weight:500}
.planity-note a:hover{text-decoration:underline}

/* ── INSTITUT ── */
.inst-grid{display:grid;grid-template-columns:1fr 1fr}
.inst-photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:210px 210px;gap:3px}
.inst-p{overflow:hidden}.inst-p img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}.inst-p:hover img{transform:scale(1.04)}
.inst-span{grid-row:span 2}
.inst-txt{padding:2.5rem 2.8rem;background:var(--cream2);display:flex;flex-direction:column;justify-content:center}
.priv-badge{display:inline-flex;background:var(--gold-faint);border:1px solid var(--gold-pale);padding:0.3rem 0.8rem;margin-bottom:0.85rem}
.priv-badge span{font-size:0.48rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);font-weight:500}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--gold-pale)}
.val-card{background:var(--white);padding:1.4rem;text-align:center}
.val-ico{font-size:1.2rem;margin-bottom:0.4rem;display:block}
.val-t{font-family:'Cinzel',serif;font-size:0.52rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--text);margin-bottom:0.3rem}
.val-d{font-size:0.68rem;font-weight:300;color:var(--text2);line-height:1.65}
.info-strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--cream2)}
.info-b{padding:1.3rem 1.4rem;border-right:1px solid var(--gold-pale);text-align:center}.info-b:last-child{border-right:none}
.info-ico{font-size:1rem;color:var(--gold);margin-bottom:0.3rem}
.info-t{font-family:'Cinzel',serif;font-size:0.46rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--text);margin-bottom:0.28rem}
.info-v{font-size:0.68rem;font-weight:300;color:var(--text2);line-height:1.65}

/* ── RÉSERVATION ── */
.resa-page{min-height:85vh;background:var(--cream2);display:flex;align-items:center;justify-content:center;padding:2rem}
.resa-box{display:grid;grid-template-columns:1fr 1fr;max-width:880px;width:100%;background:var(--gold-pale);gap:2px}
.resa-img-wrap{overflow:hidden;min-height:480px}.resa-img-wrap img{width:100%;height:100%;object-fit:cover}
.resa-content{background:var(--white);padding:2.8rem 2.5rem;display:flex;flex-direction:column;justify-content:center}
.resa-insta-btn{display:inline-flex;align-items:center;gap:0.8rem;padding:0.9rem 1.8rem;background:var(--text);color:var(--white);text-decoration:none;font-family:'Raleway',sans-serif;font-size:0.65rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;transition:background 0.25s;margin-top:1.4rem}
.resa-insta-btn:hover{background:var(--gold)}
.resa-insta-btn svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}
.resa-steps{margin-top:1.6rem;display:flex;flex-direction:column;gap:0.85rem}
.resa-step{display:flex;align-items:flex-start;gap:0.85rem}
.step-num{font-family:'Great Vibes',cursive;font-size:1.7rem;color:var(--gold);line-height:1;flex-shrink:0}
.step-txt{font-size:0.72rem;font-weight:300;color:var(--text2);line-height:1.7;padding-top:0.1rem}

/* ── CGV ── */
.cgv-wrap{max-width:820px;margin:0 auto;padding:2.5rem 2rem}
.cgv-wrap h2{font-family:'Great Vibes',cursive;font-size:2.2rem;color:var(--text);margin-bottom:1.2rem}
.cgv-section{margin-bottom:1.8rem}
.cgv-section h3{font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.6rem;padding-bottom:0.4rem;border-bottom:1px solid var(--gold-pale)}
.cgv-section p{font-size:0.74rem;font-weight:300;color:var(--text2);line-height:1.9;margin-bottom:0.6rem}
.cgv-section ul{list-style:none;padding:0}
.cgv-section ul li{font-size:0.74rem;font-weight:300;color:var(--text2);line-height:1.9;padding-left:1rem;position:relative}
.cgv-section ul li::before{content:'✦';color:var(--gold);position:absolute;left:0;font-size:0.5rem;top:0.3rem}

/* ── FOOTER ── */
footer{background:#1e1008;padding:1.6rem 3rem 1rem}
.foot-g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;margin-bottom:1.2rem;align-items:start}
.fls{font-family:'Great Vibes',cursive;font-size:1.9rem;background:linear-gradient(135deg,#c9a55a,#8b6a35,#c9a55a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.flt{font-family:'Cinzel',serif;font-size:0.42rem;letter-spacing:0.33em;text-transform:uppercase;color:#c4a882;margin-top:2px;font-weight:300}
.ft{font-size:0.46rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:0.6rem;font-family:'Cinzel',serif}
.fl{list-style:none;display:flex;flex-direction:column;gap:0.35rem}
.fl a{font-size:0.65rem;color:#c4a882;text-decoration:none;font-weight:300;transition:color 0.2s;cursor:pointer}.fl a:hover{color:var(--gold2)}
.fc p{font-size:0.68rem;color:#c4a882;font-weight:300;line-height:1.9}
.fdiv{height:1px;background:#3d2510;margin-bottom:0.8rem}
.fcopy{font-size:0.46rem;letter-spacing:0.14em;text-transform:uppercase;color:#8a6248;text-align:center}

.reveal{opacity:0;transform:translateY(14px);transition:opacity 0.6s,transform 0.6s}.reveal.on{opacity:1;transform:none}
.sec{padding:2rem 0}.inner{max-width:1100px;margin:0 auto;padding:0 2rem}

/* ══════════════════════════════════════
   RESPONSIVE MOBILE
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* NAV */
  nav { padding: 0.7rem 1.2rem; gap: 0.8rem; flex-wrap: nowrap; }
  .logo-img { height: 38px; }
  .nav-links {
    gap: 0.8rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 0.5rem; letter-spacing: 0.12em; white-space: nowrap; }

  /* HERO CENTRÉ */
  .hero-centered { min-height: 65vh; padding: 2rem 1.2rem; }
  .hero-logo-img { width: min(300px, 75vw); margin-bottom: 1.2rem; }
  .hero-btns-center { flex-direction: column; align-items: center; gap: 0.6rem; }
  .btn-gold, .btn-ghost { width: 100%; max-width: 260px; text-align: center; padding: 0.8rem 1rem; font-size: 0.6rem; }

  /* GOLD BAR */
  .gold-bar { gap: 0.8rem; padding: 0.6rem 1rem; }
  .gb-item { font-size: 0.4rem; letter-spacing: 0.16em; }
  .gb-sep { display: none; }

  /* MINI GAL */
  .mini-gal { grid-template-columns: 1fr 1fr; height: 280px; }

  /* QUOTE BANNER */
  .qbanner { height: 220px; }
  .qbanner-q { font-size: 1.4rem; }

  /* PRÉSENTATION ACCUEIL */
  .inner > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .inner > div > div[style*="height:340px"] { height: 220px !important; }

  /* PREVIEW CARDS ACCUEIL */
  .preview-grid, div[style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

  /* PAGE HERO */
  .page-hero { height: 160px; }
  .page-hero-ov .htitle { font-size: 2rem !important; }

  /* CAT NAV */
  .cat-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cat-nav::-webkit-scrollbar { display: none; }
  .cat-btn { white-space: nowrap; font-size: 0.42rem; padding: 0.7rem 0.9rem; }

  /* SOINS LISTE */
  .soins-list-wrap { padding: 1.2rem 1rem; }
  .soin-item { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.9rem 0; }
  .soin-right { width: 100%; justify-content: space-between; }
  .soin-item-name { font-size: 1.2rem; }
  .soin-item-desc { font-size: 0.64rem; }
  .btn-resa-sm { font-size: 0.5rem; padding: 0.5rem 0.9rem; }

  /* INSTITUT */
  .inst-grid { grid-template-columns: 1fr; }
  .inst-photos { grid-template-rows: 200px 140px; }
  .inst-span { grid-row: span 1; }
  .inst-txt { padding: 1.5rem 1.2rem; }

  /* GALERIE 3 photos bas institut */
  div[style*="grid-template-columns:1fr 1fr 1fr"][style*="height:240px"] {
    grid-template-columns: 1fr 1fr !important;
    height: 160px !important;
  }

  /* VALEURS */
  .val-grid { grid-template-columns: 1fr; }
  .val-card { padding: 1rem; }

  /* INFO STRIP */
  .info-strip { grid-template-columns: 1fr; }
  .info-b { border-right: none; border-bottom: 1px solid var(--gold-pale); padding: 1rem; }
  .info-b:last-child { border-bottom: none; }

  /* RÉSERVATION */
  .resa-page { padding: 1rem; align-items: flex-start; }
  .resa-box { grid-template-columns: 1fr; max-width: 100%; }
  .resa-img-wrap { min-height: 220px; max-height: 260px; }
  .resa-content { padding: 1.6rem 1.2rem; }
  .resa-insta-btn { font-size: 0.58rem; padding: 0.8rem 1.2rem; width: 100%; justify-content: center; }
  .resa-steps { margin-top: 1.2rem; gap: 0.7rem; }
  .step-txt { font-size: 0.66rem; }

  /* PLANITY BTN */
  .planity-btn-wrap { flex-direction: column; gap: 0.6rem; }
  .planity-btn-wrap a { width: 100%; text-align: center; justify-content: center; }

  /* CGV */
  .cgv-wrap { padding: 1.5rem 1rem; }
  .cgv-section p, .cgv-section ul li { font-size: 0.7rem; }

  /* FOOTER */
  footer { padding: 1.4rem 1.2rem 1rem; }
  .foot-g { grid-template-columns: 1fr; gap: 1.2rem; }
  .fdiv { margin-bottom: 0.6rem; }

  /* FORCER COLONNES UNIQUES */
  .forfait-grid { grid-template-columns: 1fr !important; }
  .epil-grid { grid-template-columns: 1fr 1fr !important; }
  .visage-wrap { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .nav-links a { font-size: 0.44rem; }
  .hero-logo-center { font-size: clamp(3.5rem, 20vw, 5rem); }
  .soins-list-wrap { padding: 1rem 0.8rem; }
  .soin-item-name { font-size: 1.1rem; }
  .epil-grid { grid-template-columns: 1fr 1fr !important; }
  .inst-photos { grid-template-rows: 180px 120px; }
}