/* ============================================================
   BASALTE — Spa & Massage · 100% Femme · Tanger
   Identity sampled from the house's own assets: the basalt-dark
   BASALTE wordmark & khatim emblem, the warm sand tadelakt walls,
   the eucalyptus-teal damask wall, the mustard velvet chairs and
   terracotta niches. Serene and mineral — a dark basalt monolith
   opening onto warm stone. No stock zen, no invented rituals.
   Type: Newsreader (literary serif — wordmark, heads, quotes) +
   Schibsted Grotesk (labels, body-support, CTA).
   ============================================================ */

@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-italic-400.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

:root{
  --basalt:#211d19;        /* basalt charcoal ground */
  --basalt-deep:#17130f;
  --sand:#e9e0d2;          /* warm tadelakt — light ground */
  --sand-2:#e0d5c3;        /* deeper sand — alt sections */
  --sand-dim:#c7b8a2;
  --ink:#2c2620;           /* charcoal text */
  --ink-soft:#6b6151;
  --euca:#3f8792;          /* eucalyptus — accent on light */
  --euca-bright:#7fbfc9;   /* eucalyptus on dark */
  --gold:#a9772f;          /* on sand (labels/large) */
  --gold-bright:#d9b054;   /* on dark */
  --terra:#a9553f;
  --line:rgba(44,38,32,0.16);
  --line-soft:rgba(44,38,32,0.08);
  --sand-line:rgba(233,224,210,0.18);

  --serif:"Newsreader","Georgia",serif;
  --sans:"Schibsted Grotesk","Segoe UI",system-ui,Arial,sans-serif;

  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-6:1.5rem;--s-8:2rem;--s-12:3rem;--s-16:4rem;
  --wrap:1120px;--z-nav:10;--z-float:20;--z-toast:30;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:clip;}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.75;color:var(--ink);background:var(--sand);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;height:auto;}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.08;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
ul{margin:0;padding:0;list-style:none;}
figure{margin:0;}
a{color:inherit;}
::selection{background:var(--euca);color:var(--sand);}
:focus-visible{outline:2px solid var(--euca);outline-offset:3px;border-radius:2px;}

/* ---------- nav ---------- */
.site-header{position:sticky;top:0;z-index:var(--z-nav);background:rgba(233,224,210,0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:.6rem clamp(1.1rem,4vw,2.5rem);display:flex;align-items:center;gap:var(--s-6);}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;}
.brand svg{flex:none;color:var(--ink);}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.brand-name{font-family:var(--serif);font-weight:500;font-size:1.4rem;letter-spacing:.16em;color:var(--ink);text-indent:.16em;}
.brand-tag{font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.nav-links{display:flex;gap:clamp(1rem,2.5vw,1.75rem);margin-inline:auto;}
.nav-links a{font-family:var(--sans);font-size:.9rem;font-weight:500;text-decoration:none;color:var(--ink-soft);padding:.5rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.nav-links a:hover{color:var(--euca);border-color:var(--euca);}
.nav-actions{display:flex;align-items:center;gap:var(--s-4);margin-left:auto;}
.nav-links+.nav-actions{margin-left:0;}
.lang-switch{display:flex;gap:2px;}
.lang-switch button{font:inherit;font-family:var(--sans);font-size:.8rem;font-weight:600;padding:.45rem .5rem;background:none;border:0;color:var(--ink-soft);cursor:pointer;}
.lang-switch .lang-fr{color:var(--euca);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;}
.lang-switch .lang-en:hover{color:var(--euca);}
.btn-wa{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--sand);background:var(--euca);text-decoration:none;padding:.55rem 1.1rem;border-radius:2px;transition:background .2s,transform .2s;}
.btn-wa:hover{background:#356f78;transform:translateY(-1px);}
.btn-wa svg{flex:none;}

/* ---------- hero — basalt monolith (no photo) ---------- */
.hero{background:var(--basalt);color:var(--sand);position:relative;overflow:hidden;}
.hero::before,.hero::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(217,176,84,.28),transparent);}
.hero::before{left:clamp(1.5rem,10vw,9rem);}
.hero::after{right:clamp(1.5rem,10vw,9rem);}
.hero-inner{max-width:760px;margin:0 auto;padding:clamp(4rem,12vh,8rem) clamp(1.5rem,5vw,2.5rem);text-align:center;position:relative;}
.hero-emblem{color:var(--gold-bright);margin-bottom:clamp(1.5rem,4vh,2.4rem);animation:fade 1s ease .1s both;}
.hero-eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--euca-bright);animation:fade 1s ease .2s both;}
.hero h1{font-size:clamp(3.4rem,11vw,7rem);font-weight:400;letter-spacing:.14em;text-indent:.14em;margin:.14em 0 .1em;color:var(--sand);animation:fade 1.1s ease .3s both;}
.hero-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--sand-dim);animation:fade 1.1s ease .42s both;}
.hero-tagline{font-family:var(--sans);font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.7;color:#c9bda9;max-width:34rem;margin:clamp(1.4rem,3vh,2rem) auto 0;animation:fade 1.1s ease .52s both;}
.hero-cta-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s-4) var(--s-6);margin-top:clamp(1.8rem,4vh,2.6rem);animation:fade 1.1s ease .62s both;}
@keyframes fade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.btn-primary{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--basalt-deep);background:var(--gold-bright);text-decoration:none;padding:.9rem 1.7rem;border-radius:2px;transition:background .2s,transform .2s;}
.btn-primary:hover{background:#e6c069;transform:translateY(-2px);}
.hero-trust{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.92rem;color:var(--sand-dim);}
.hero-trust .star{color:var(--gold-bright);}
.hero-trust strong{color:var(--sand);font-weight:600;}

/* ---------- section frame ---------- */
.section-inner{max-width:var(--wrap);margin:0 auto;padding:clamp(3.8rem,9vh,6.5rem) clamp(1.1rem,4vw,2.5rem);}
.section-head{max-width:44rem;}
.section-head.center{margin-inline:auto;text-align:center;}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.section-head h2{font-size:clamp(2.1rem,4.6vw,3.1rem);color:var(--ink);margin-top:.5rem;}
.section-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.8vw,1.28rem);color:var(--ink-soft);margin-top:.55rem;}

/* ---------- intro ---------- */
.intro{background:var(--sand-2);border-block:1px solid var(--line-soft);}
.intro-inner{max-width:47rem;margin:0 auto;text-align:center;padding:clamp(3.6rem,8vh,5.5rem) clamp(1.1rem,4vw,2.5rem);}
.intro .emblem-sm{color:var(--gold);margin-bottom:var(--s-4);}
.intro p{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.55;color:var(--ink);}

/* ---------- soins ---------- */
.soins .section-head{margin-inline:auto;text-align:center;margin-bottom:clamp(2.2rem,5vh,3.2rem);}
.soin-list{max-width:720px;margin:0 auto;}
.soin{display:flex;align-items:baseline;gap:1.1rem;padding:1.4rem 0;border-bottom:1px solid var(--line);}
.soin:last-child{border-bottom:0;}
.soin-num{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--gold);flex:none;width:2rem;}
.soin-main{flex:1;min-width:0;}
.soin-name{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.85rem);color:var(--ink);line-height:1.15;}
.soin-desc{font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);margin-top:.3rem;line-height:1.6;}
.soins-note{max-width:720px;margin:clamp(2rem,4vh,2.6rem) auto 0;text-align:center;font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink-soft);}

/* ---------- galerie ---------- */
.galerie{background:var(--sand-2);border-block:1px solid var(--line-soft);}
.galerie .section-head{margin-inline:auto;text-align:center;margin-bottom:clamp(2.2rem,5vh,3rem);}
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(115px,13.5vw,175px);gap:clamp(.7rem,1.6vw,1.1rem);}
.gal-grid figure{position:relative;overflow:hidden;border-radius:3px;background:var(--sand-dim);}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1);}
.gal-grid figure:hover img{transform:scale(1.05);}
.g-tall{grid-column:span 2;grid-row:span 2;}
.g-wide{grid-column:span 2;}
.g-sq{grid-column:span 2;}
.gal-cap{margin-top:clamp(1.4rem,3vh,2rem);text-align:center;font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);}

/* ---------- avis ---------- */
.avis{background:var(--basalt);color:var(--sand);}
.avis .eyebrow{color:var(--gold-bright);}
.avis .section-head h2{color:var(--sand);}
.avis .section-sub{color:var(--sand-dim);}
.avis .section-head{text-align:center;margin-inline:auto;}
.avis-grid{margin-top:clamp(2.4rem,5vh,3.4rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.2rem);}
.avis blockquote{margin:0;border:1px solid var(--sand-line);border-radius:3px;padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.8rem;}
.avis .q-mark{font-family:var(--serif);font-size:2.6rem;line-height:.4;color:var(--gold-bright);height:1rem;}
.avis blockquote p[lang="en"]{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.1vw,1.55rem);line-height:1.4;color:var(--sand);}
.avis-gloss{font-family:var(--sans);font-size:.86rem;line-height:1.6;color:var(--sand-dim);}
.avis blockquote footer{font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--euca-bright);display:flex;align-items:center;gap:.4rem;}
.avis blockquote footer .star{color:var(--gold-bright);}

/* ---------- infos ---------- */
.infos-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:start;margin-top:clamp(2.2rem,5vh,3rem);}
.infos-list{display:flex;flex-direction:column;gap:var(--s-6);}
.info-item{display:flex;flex-direction:column;gap:.28rem;}
.info-label{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
.info-value{font-size:1.08rem;}
.info-value .closed{color:var(--terra);font-weight:600;}
.wa-big{display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--sand);background:var(--euca);text-decoration:none;padding:.9rem 1.7rem;border-radius:2px;margin-top:var(--s-2);transition:background .2s,transform .2s;}
.wa-big:hover{background:#356f78;transform:translateY(-2px);}
.tel-line{font-family:var(--sans);font-size:1rem;color:var(--euca);text-decoration:underline;text-underline-offset:4px;}
.tel-line:hover{color:#356f78;}
.infos-note{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--ink-soft);max-width:27rem;}
.info-map{display:flex;flex-direction:column;gap:.6rem;}
.map-card{display:block;text-decoration:none;color:inherit;border-radius:3px;overflow:hidden;border:1px solid var(--line);background:var(--sand-2);transition:transform .25s,border-color .25s;}
.map-card:hover{transform:translateY(-2px);border-color:var(--euca);}
.map-card img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.map-body{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.25rem;}
.map-title{font-family:var(--serif);font-size:1.4rem;color:var(--ink);}
.map-sub{font-size:.92rem;color:var(--ink-soft);line-height:1.55;}
.map-cta{font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--euca);margin-top:.35rem;}

/* ---------- footer ---------- */
.footer{background:var(--basalt-deep);color:var(--sand);}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:clamp(3rem,6vh,4.2rem) clamp(1.1rem,4vw,2.5rem);display:flex;flex-direction:column;align-items:center;gap:var(--s-3);text-align:center;}
.footer svg{color:var(--gold-bright);margin-bottom:var(--s-2);}
.footer-name{font-family:var(--serif);font-size:1.7rem;letter-spacing:.16em;text-indent:.16em;color:var(--sand);}
.footer-rating{font-family:var(--sans);font-size:.92rem;color:var(--sand-dim);}
.footer-rating .star{color:var(--gold-bright);}
.footer-rating strong{color:var(--sand);}
.footer-google{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--euca-bright);text-decoration:underline;text-underline-offset:4px;}
.footer-google:hover{color:var(--sand);}
.footer-copy{font-family:var(--sans);font-size:.78rem;color:#8a7f6e;margin-top:var(--s-2);}

/* ---------- floating wa ---------- */
.wa-float{position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:var(--z-float);display:inline-flex;align-items:center;gap:.55rem;background:var(--euca);color:var(--sand);text-decoration:none;font-family:var(--sans);font-weight:600;font-size:.92rem;padding:.8rem 1.15rem;border-radius:2px;box-shadow:0 12px 30px rgba(23,19,15,.4);transition:transform .2s,background .2s;}
.wa-float:hover{transform:translateY(-2px);background:#356f78;}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:2rem;z-index:var(--z-toast);transform:translate(-50%,12px);background:var(--basalt);color:var(--sand);border:1px solid rgba(217,176,84,.5);font-family:var(--sans);font-size:.9rem;padding:.7rem 1.3rem;border-radius:2px;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* ---------- reveals ---------- */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
html.js .reveal.in{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media (max-width:900px){.infos-cols{grid-template-columns:1fr;}}
@media (max-width:820px){.avis-grid{grid-template-columns:1fr;}}
@media (max-width:760px){.nav-links{display:none;}}
@media (max-width:680px){
  .gal-grid{grid-template-columns:repeat(4,1fr);}
  .g-tall{grid-column:span 2;grid-row:span 2;}
  .g-wide,.g-sq{grid-column:span 2;}
}
@media (max-width:560px){
  .brand-tag{display:none;}
  .nav-inner{gap:.5rem;padding-inline:.9rem;}
  .brand-name{font-size:1.25rem;}
  .nav-actions{gap:.4rem;}
  .lang-switch button{padding:.45rem .3rem;}
  .btn-wa{padding:.55rem;}
  .btn-wa-txt{display:none;}
  .hero-inner{padding-inline:1.25rem;}
  .hero h1{font-size:clamp(2.5rem,12.5vw,3.4rem);letter-spacing:.05em;text-indent:.05em;}
  .hero-eyebrow{letter-spacing:.13em;font-size:.6rem;}
  .hero::before{left:.9rem;}.hero::after{right:.9rem;}
  .gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:.6rem;}
  .g-tall{grid-column:span 2;grid-row:auto;}
  .g-wide,.g-sq{grid-column:span 1;}
  .gal-grid figure{aspect-ratio:1/1;}
  .g-tall figure{aspect-ratio:16/10;}
}
@media (pointer:coarse){.lang-switch button{padding:.7rem .5rem;}.nav-links a{padding:.7rem 0;}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-emblem,.hero-eyebrow,.hero h1,.hero-sub,.hero-tagline,.hero-cta-row{animation:none;}
  html.js .reveal{opacity:1;transform:none;transition:none;}
  .gal-grid img{transition:none;}.gal-grid figure:hover img{transform:none;}
  .btn-primary:hover,.btn-wa:hover,.wa-big:hover,.wa-float:hover,.map-card:hover{transform:none;}
}