/* =========================================================
   Tantra Lausanne — feuille de styles
   HTML statique, sans framework. Chemins relatifs.
   ========================================================= */

/* ---------- Polices ---------- */
@font-face{font-family:'Stardust';src:url('fonts/Stardust-Thin.woff2') format('woff2');font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:'Stardust';src:url('fonts/Stardust-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Stardust';src:url('fonts/Stardust-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- Variables ---------- */
:root{
  --bg:#faf9f7;        /* fond blanc chaud */
  --ink:#282725;       /* texte courant & petits textes */
  --slate:#3D5766;     /* titres, wordmark, accents */
  --cream:#e6e2db;     /* fond tarif */
  --grey:#f3f1ec;      /* fond section explorer */
  --box:#efece6;       /* encadré */
  --line:rgba(61,87,102,0.22);
  --line-2:rgba(61,87,102,0.14);
  --line-3:rgba(61,87,102,0.22);
  --pad-x:clamp(24px,7vw,120px);
  --font:'Stardust','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;}
strong{font-weight:500;color:var(--slate);}

/* ---------- Libellés ---------- */
.eyebrow{display:block;font-size:15px;letter-spacing:0.32em;text-transform:uppercase;color:var(--ink);}
.label{display:block;font-size:16px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ink);}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;min-height:74px;padding:max(13px, env(safe-area-inset-top, 0px)) var(--pad-x) 13px;background:rgba(250,249,247,0.92);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line);}
.nav__logo{font-size:23px;font-weight:400;letter-spacing:0.14em;text-transform:lowercase;color:#3D5766;text-decoration:none;}
.nav__links{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(16px,3vw,44px);}
.nav__links a{font-size:16px;letter-spacing:0.12em;text-transform:lowercase;color:#282725;text-decoration:none;}
.nav__links a:hover{color:#3D5766;}
.nav__links a.is-active{font-weight:400;color:#3D5766;}
.nav__burger{display:none;}

/* ---------- Hero ---------- */
.hero{position:relative;width:100%;height:72vh;height:72dvh;min-height:520px;display:flex;align-items:flex-end;overflow:hidden;background:#b0ab9e;}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.hero__inner{position:relative;z-index:1;padding:0 var(--pad-x) calc(clamp(27px,4.5vh,54px) + 15px);animation:rise 1s cubic-bezier(0.22,0.61,0.36,1) 0.15s both;}
.hero__inner .eyebrow{margin-bottom:12px;}
.hero__title{font-size:clamp(46px,10vw,138px);font-weight:500;line-height:0.65;letter-spacing:-1.8px;color:var(--slate);}
@keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Intro (accroche) ---------- */
.intro{padding:clamp(31px,5.9vh,63px) var(--pad-x);text-align:center;border-bottom:1px solid var(--line);}
.intro p{max-width:880px;margin:0 auto;font-size:clamp(24px,3.2vw,38px);line-height:1.32;letter-spacing:0.005em;color:var(--slate);}

/* ---------- Section générique ---------- */
.section{padding:clamp(45px,8.1vh,88px) var(--pad-x);}
.section--grey{background:var(--grey);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ---------- Grille éditoriale 1/4 — 2/4 ---------- */
.cols{display:grid;grid-template-columns:1fr 2fr;gap:clamp(40px,7vw,110px);align-items:start;}
.cols__side{grid-column:1;}
.cols__side--sticky{position:sticky;top:104px;}
.cols__main{grid-column:2;}
.stack{display:flex;flex-direction:column;gap:22px;}

.h-title{font-size:clamp(30px,3.6vw,46px);font-weight:400;line-height:1.08;letter-spacing:0.01em;color:var(--slate);}
.label + .h-title{margin-top:12px;}
.body{font-size:19px;line-height:1.8;color:var(--ink);}

.illus{width:100%;max-width:300px;margin-top:44px;}

/* Encadré (massage pour les femmes) */
.box{margin-top:clamp(40px,6vh,64px);padding:clamp(32px,4vw,42px) clamp(34px,4vw,48px);background:var(--box);border-radius:2px;}
.box__title{font-size:17px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate);margin-bottom:16px;}
.box p{font-size:16px;line-height:1.8;color:var(--ink);}
.box p + p{margin-top:14px;}

/* ---------- Section Explorer ---------- */
.explore > .label{margin-bottom:14px;}
.explore__intro{font-size:19px;line-height:1.8;color:var(--ink);margin-bottom:clamp(40px,6vh,68px);}
.explore__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,64px);}
.explore__grid h3{font-size:13px;font-weight:400;letter-spacing:0.16em;text-transform:uppercase;color:var(--slate);padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line-3);}
.explore__grid ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.explore__grid li{font-size:17px;color:var(--ink);}
.explore__note{margin-top:clamp(40px,6vh,64px);padding-top:30px;border-top:1px solid var(--line-2);font-size:16px;line-height:1.8;color:var(--ink);}

/* ---------- Déroulement (étapes) ---------- */
.steps{list-style:none;counter-reset:step;border-top:1px solid var(--line-2);}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line-2);}
.steps__n{font-size:13px;letter-spacing:0.1em;color:var(--ink);padding-top:4px;}
.steps__t{font-size:19px;line-height:1.7;color:var(--ink);}

/* ---------- Tarif ---------- */
.tarif{padding:clamp(40px,7.6vh,86px) var(--pad-x);background:var(--cream);text-align:center;}
.tarif > .label{margin-bottom:18px;}
.tarif__price{font-size:clamp(30px,3.6vw,46px);font-weight:400;line-height:1;letter-spacing:0.02em;color:var(--slate);}
.tarif__sub{font-size:17px;color:var(--ink);margin-top:20px;}
.tarif__sub span{color:var(--slate);}
.tarif__note{max-width:880px;margin:38px auto 0;font-size:14px;line-height:1.7;font-style:italic;color:var(--ink);}

/* ---------- Contact ---------- */
.contact{background:var(--slate);color:#fff;}
.contact__head{padding:clamp(40px,6.9vh,76px) var(--pad-x) clamp(18px,3.2vh,38px);}
.contact__head .label{color:rgba(255,255,255,0.5);margin-bottom:8px;}
.contact__head h2{font-size:clamp(28px,3.4vw,42px);font-weight:400;letter-spacing:0.01em;color:#fff;}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);padding:0 var(--pad-x) clamp(35px,5.7vh,60px);}
.person__img{width:100%;max-width:450px;aspect-ratio:1/1;object-fit:cover;object-position:center top;}
.person__name{display:block;font-size:18px;letter-spacing:0.16em;text-transform:uppercase;color:#fff;margin:26px 0 6px;}
.person__tel{font-size:24px;font-weight:300;letter-spacing:0.04em;color:#fff;text-decoration:none;}
.person__hint{font-size:14px;color:rgba(255,255,255,0.55);margin-top:3px;}

.place{padding:clamp(31px,5vh,50px) var(--pad-x);background:#4C626D;border-top:1px solid rgba(255,255,255,0.16);display:flex;flex-wrap:wrap;gap:24px 80px;align-items:baseline;}
.place h3{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:0.02em;color:#fff;}
.place__addr{font-size:19px;line-height:1.7;color:rgba(255,255,255,0.7);}

/* ---------- Images salle (2 colonnes + filet blanc) ---------- */
.salle-grid{display:grid;grid-template-columns:41.7fr 58.3fr;gap:8px;background:#fff;}
.salle-grid img{width:100%;height:550px;object-fit:cover;object-position:center;display:block;}
@media (max-width:760px){
  .salle-grid{grid-template-columns:1fr;}
  .salle-grid img{height:360px;}
}

/* ---------- Pied de page ---------- */
.footer{padding:clamp(31px,5vh,50px) var(--pad-x);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;border-top:1px solid var(--line);}
.footer__mark span{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:400;line-height:0.8;letter-spacing:0.02em;color:var(--slate);}
.footer__ig{display:inline-flex;align-items:center;gap:9px;font-size:14px;letter-spacing:0.08em;color:rgba(61,87,102,0.6);text-decoration:none;}
.footer__ig:hover{color:var(--slate);}

/* ---------- Page « Notre tantra » ---------- */
.page-head{padding:clamp(25px,4.5vh,60px) var(--pad-x) clamp(31px,5vh,57px);border-bottom:1px solid var(--line);}
.page-head .eyebrow{margin-bottom:26px;}
.page-head__title{font-size:clamp(32px,6vw,80px);font-weight:400;line-height:0.82;letter-spacing:0.01em;color:var(--slate);}
.page-head__lead{margin-top:clamp(28px,4vh,44px);font-size:clamp(17px,1.9vw,22px);line-height:1.55;color:var(--slate);}

.pullquote{margin-top:32px;padding-top:26px;border-top:1px solid var(--line-3);font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--slate);}
.sub-h{font-size:14px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate);}

.approach{display:flex;flex-direction:column;gap:clamp(26px,3vw,38px);margin-top:18px;}
.approach h4{font-size:14px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate);margin-bottom:12px;}
.approach p{font-size:19px;line-height:1.8;color:var(--ink);}

.cta{background:var(--slate);color:#fff;padding:clamp(40px,6.9vh,76px) var(--pad-x);display:flex;flex-wrap:wrap;gap:28px 80px;align-items:center;justify-content:space-between;}
.cta .label{color:rgba(255,255,255,0.5);margin-bottom:8px;}
.cta h2{font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:0.01em;color:#fff;}
.cta a{font-size:16px;letter-spacing:0.08em;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.5);padding-bottom:4px;}
.cta a:hover{border-bottom-color:#fff;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:860px){
  .cols{grid-template-columns:1fr;gap:clamp(28px,6vw,48px);}
  .cols__side,.cols__main{grid-column:1;}
  .cols__side--sticky{position:static;}
  .cols__main{max-width:none;}
  .illus{max-width:none;}
  .steps{max-width:none;}
  .explore__grid{grid-template-columns:1fr;gap:clamp(28px,6vw,40px);}
  .approach{grid-template-columns:1fr;}
  .contact__grid{grid-template-columns:1fr;}
}

/* Menu hamburger (téléphone / petite tablette) */
@media (max-width:760px){
  .nav__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;background:none;border:0;cursor:pointer;}
  .nav__burger span{display:block;width:100%;height:1.5px;background:#3D5766;transition:transform .25s ease,opacity .2s ease;}
  .nav__links{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:4px;}
  .nav.open .nav__links{display:flex;}
  .nav__links a{font-size:18px;padding:15px 2px;border-top:1px solid var(--line);}
  .nav.open .nav__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav.open .nav__burger span:nth-child(2){opacity:0;}
  .nav.open .nav__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
}

/* Téléphone : hero « tantra massage » +20 % */
@media (max-width:560px){
  .hero{height:auto;min-height:0;aspect-ratio:4/5;}
  .hero__inner{padding-bottom:40px;}
  .nav__logo{font-size:21px;}
  .hero__title{font-size:55px;}
}