/* ============================================================
   Zen à l'Oriental — site public
   Palette sable / teal / or · ambiance orientale & zen
   ============================================================ */
:root{
  --sand:#f8f2e8; --sand2:#efe5d4; --cream:#fffdf9;
  --teal:#0f766e; --teal-d:#0b5a53; --teal-l:#13938a;
  --gold:#c9a227; --gold-l:#e3c873; --gold-d:#a8851b;
  --ink:#2c2620; --muted:#857a69; --line:rgba(15,118,110,.16);
  --shadow:0 18px 50px -22px rgba(44,38,32,.45);
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; scroll-padding-top:74px; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--sand);
  font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--teal); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--gold-d); }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.12; margin:0; color:var(--ink); }
h1{ font-size:clamp(2.6rem,7vw,4.6rem); letter-spacing:.5px; }
h2{ font-size:clamp(2rem,4.5vw,3rem); }
h3{ font-size:1.4rem; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.container{ width:100%; max-width:1120px; margin:0 auto; padding:0 22px; }
.narrow{ max-width:680px; } .container.narrow{ max-width:720px; }

/* ---------- Boutons ---------- */
.btn{ display:inline-block; padding:14px 28px; border-radius:40px; font-weight:500; font-size:1rem;
  border:1.5px solid transparent; cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s, color .2s; letter-spacing:.3px; }
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:linear-gradient(135deg,var(--gold),var(--gold-l)); color:#2c2308; box-shadow:0 12px 30px -10px rgba(201,162,39,.6); }
.btn-gold:hover{ color:#2c2308; box-shadow:0 16px 36px -10px rgba(201,162,39,.75); }
.btn-teal{ background:var(--teal); color:#fff; }
.btn-teal:hover{ background:var(--teal-d); color:#fff; }
.btn-ghost{ background:transparent; color:var(--teal); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--teal); background:rgba(15,118,110,.06); }
.btn-block{ width:100%; }

/* ---------- Header / Nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; transition:background .3s, box-shadow .3s, padding .3s; }
.nav.scrolled{ background:rgba(255,253,249,.92); backdrop-filter:blur(10px); box-shadow:0 6px 24px -16px rgba(44,38,32,.5); padding:9px 22px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--ink); }
.brand img{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ color:var(--ink); font-size:.98rem; font-weight:400; }
.nav-links a:hover{ color:var(--teal); }
.nav-cta{ background:var(--teal); color:#fff !important; padding:9px 20px; border-radius:30px; }
.nav-cta:hover{ background:var(--teal-d); }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer; }
.burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 22px 80px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, var(--cream), var(--sand) 55%, var(--sand2)); }
.hero-pattern{ position:absolute; inset:0; background:url('/assets/pattern.svg'); background-size:78px; opacity:.10; pointer-events:none; }
.hero::after{ content:""; position:absolute; bottom:-1px; left:0; right:0; height:90px;
  background:linear-gradient(to top, var(--sand), transparent); }
.hero-inner{ position:relative; z-index:2; max-width:760px; }
.hero h1{ margin:14px 0 6px; color:var(--teal-d); }
.hero-tag{ font-family:var(--serif); font-size:clamp(1.3rem,3vw,1.8rem); color:var(--gold-d); font-style:italic; margin:0 0 20px; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.scroll-hint{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2; font-size:2rem; color:var(--gold-d);
  animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,8px) } }

.pill{ display:inline-block; padding:7px 16px; border-radius:30px; font-size:.85rem; font-weight:500; letter-spacing:.3px; }
.pill-open{ background:rgba(34,197,94,.14); color:#15803d; }
.pill-closed{ background:rgba(120,113,108,.14); color:var(--muted); }
.hero-rating{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:1.05rem; }
.stars{ color:var(--gold); letter-spacing:2px; }
.stars-lg{ font-size:1.6rem; }

/* ---------- Sections ---------- */
.section{ padding:90px 0; position:relative; }
.section-alt{ background:linear-gradient(var(--cream),var(--sand)); }
.section-gold{ background:linear-gradient(135deg,var(--teal),var(--teal-d)); color:#fdf8ec; }
.section-gold h2{ color:#fff; } .section-gold .lead{ color:rgba(255,255,255,.9); } .section-gold .muted{ color:rgba(255,255,255,.7); }
.eyebrow{ text-transform:uppercase; letter-spacing:3px; font-size:.78rem; font-weight:600; color:var(--gold-d); margin:0 0 8px; }
.eyebrow.center{ text-align:center; }
.lead{ font-size:1.12rem; color:var(--muted); max-width:620px; margin:14px 0 36px; }
.center .lead{ margin-left:auto; margin-right:auto; }

/* ---------- Prestations ---------- */
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:18px; }
.svc{ background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:24px;
  transition:transform .25s, box-shadow .25s, border-color .25s; }
.svc:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--gold-l); }
.svc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.svc-top h3{ font-size:1.3rem; }
.svc-price{ font-family:var(--serif); font-size:1.45rem; font-weight:700; color:var(--teal); white-space:nowrap; }
.svc-dur{ color:var(--muted); margin:6px 0 16px; font-size:.95rem; }
.svc-link{ font-weight:500; }
.note-pay{ text-align:center; color:var(--muted); margin-top:34px; }

/* ---------- Split (a propos / infos) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split-art{ display:flex; justify-content:center; }
.art-circle{ width:280px; height:280px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--cream), var(--sand2)); border:1px solid var(--gold-l);
  box-shadow:var(--shadow); position:relative; }
.art-circle::before{ content:""; position:absolute; inset:18px; border-radius:50%; border:1px dashed var(--gold-l); }
.feature-list{ list-style:none; padding:0; margin:22px 0 28px; }
.feature-list li{ padding:10px 0; border-bottom:1px solid var(--line); }
.feature-list b{ color:var(--teal); }

/* ---------- Avis ---------- */
.rating-big{ display:inline-flex; align-items:center; gap:22px; background:var(--cream); border:1px solid var(--line);
  border-radius:20px; padding:24px 36px; box-shadow:var(--shadow); margin:10px 0 26px; }
.rating-num{ font-family:var(--serif); font-size:3.6rem; font-weight:700; color:var(--gold-d); line-height:1; }
.review-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Horaires ---------- */
.hours{ width:100%; border-collapse:collapse; margin:8px 0 22px; }
.hours th{ text-align:left; font-weight:400; padding:11px 0; color:var(--ink); border-bottom:1px solid var(--line); }
.hours td{ text-align:right; padding:11px 0; border-bottom:1px solid var(--line); color:var(--muted); }
.hours tr.today th, .hours tr.today td{ color:var(--teal); font-weight:600; }
.hours .closed{ color:#b4592e; }
.addr{ font-size:1.05rem; }
.info-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.split-map iframe{ width:100%; height:340px; border:0; border-radius:18px; box-shadow:var(--shadow); filter:saturate(.92); }

/* ---------- Formulaire reservation ---------- */
.form-card{ background:var(--cream); border:1px solid var(--line); border-radius:22px; padding:30px; box-shadow:var(--shadow); margin-top:24px; }
.f{ margin-bottom:16px; } .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-card label{ display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px; font-weight:500; }
.form-card input, .form-card select, .form-card textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:12px; font-family:inherit; font-size:1rem;
  background:#fff; color:var(--ink); transition:border-color .2s; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{ outline:none; border-color:var(--teal); }
.form-card .btn{ margin-top:8px; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.form-msg{ margin:14px 0 0; font-weight:500; min-height:1.2em; }
.form-msg.ok{ color:#15803d; } .form-msg.bad{ color:#c0392b; }
.form-note{ font-size:.8rem; color:var(--muted); margin:12px 0 0; text-align:center; }

/* ---------- Footer ---------- */
.footer{ background:#0b1f1c; color:#cfe0db; padding:56px 0 22px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
.foot-brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.35rem; color:#fff; margin-bottom:6px; }
.footer h4{ color:var(--gold-l); font-family:var(--sans); font-size:.82rem; letter-spacing:2px; text-transform:uppercase; margin:0 0 12px; }
.footer p{ margin:6px 0; }
.footer a{ color:#cfe0db; } .footer a:hover{ color:var(--gold-l); }
.footer .muted{ color:#8aa39d; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:20px; font-size:.85rem; color:#8aa39d; }
.foot-admin{ color:#6f8a84; font-size:.8rem; }

/* ---------- Reveal au scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .split{ grid-template-columns:1fr; gap:34px; }
  .split-art{ order:-1; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; align-items:flex-start; gap:6px;
    background:var(--cream); padding:90px 28px; box-shadow:-10px 0 40px -20px rgba(0,0,0,.5);
    transform:translateX(100%); transition:transform .32s ease; }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:1.15rem; padding:8px 0; width:100%; }
  .nav-cta{ margin-top:10px; }
  .burger{ display:flex; z-index:60; }
  /* Hero compact facon app mobile : contenu en haut, plus de grand vide */
  .hero{ min-height:auto; padding:84px 20px 40px; justify-content:flex-start; }
  .hero-cta{ margin-top:20px; }
  .scroll-hint{ display:none; }
  .section{ padding:48px 0; }
  .f-row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .rating-big{ flex-direction:column; gap:10px; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .scroll-hint{ animation:none; }
}