/* ============================================================
   NOMAD CARE — Feuille de style
   Palette : crème #F5EDD0 · olive #6D6E3E · sauge #AFB785
   Typos : Armany (display + accents décoratifs) · Hanken Grotesk (texte)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:'Armany';src:url('../fonts/Armany-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Armany';src:url('../fonts/Armany-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Armany';src:url('../fonts/Armany-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Armany';src:url('../fonts/Armany-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Salemo';src:url('../fonts/Salemo.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/HankenGrotesk.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --cream:#F5EDD0;
  --cream-2:#FBF6E6;
  --olive:#6D6E3E;
  --olive-deep:#53542E;
  --sage:#AFB785;
  --sage-soft:#C7CBA8;
  --ink:#3F3F2A;
  --ink-soft:#60604A;
  --line:rgba(109,110,62,.18);
  --maxw:1240px;
  --gut:clamp(22px,5vw,64px);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--cream);line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--sage);color:var(--cream);}

/* ---------- Typo helpers ---------- */
h1,h2,h3,h4{font-family:'Armany',serif;font-weight:400;line-height:1.08;color:var(--olive);letter-spacing:.2px;text-wrap:balance;}
.lead,.hero__text,.body-text,.soin-intro,.page-hero__sub,.hero__sub{text-wrap:pretty;}
/* Salemo ne contient pas les accents français : on réserve l'accent décoratif
   à Armany (police de marque, accents corrects) pour garder la cohérence. */
.salemo{font-family:'Armany',serif;font-weight:400;font-style:normal;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.eyebrow{font-family:'Hanken Grotesk',sans-serif;font-size:clamp(15px,1.6vw,17px);color:var(--sage);letter-spacing:.2px;font-weight:500;}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:absolute;top:0;left:0;right:0;z-index:50;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:30px;padding-bottom:30px;}
.nav-logo img{height:34px;width:auto;display:block;}

/* --- Variante par défaut : nav OLIVE (fond clair derrière, ex. accueil) --- */
.nav-links{display:flex;align-items:center;gap:40px;list-style:none;}
.nav-links a{font-size:16.5px;letter-spacing:.2px;color:var(--olive);transition:color .2s,opacity .2s;}
.nav-links a:hover{opacity:.7;}
.nav-cta{border:1px solid rgba(109,110,62,.4);color:var(--olive);padding:11px 26px;border-radius:999px;font-size:15.5px;transition:background .25s,color .25s;}
.nav-cta:hover{background:var(--olive);color:var(--cream);}

/* --- Accueil (split) : header pleine largeur pour aligner le nav sur le texte du hero --- */
.site-header.on-split .wrap{max-width:none;padding-left:var(--gut);padding-right:var(--gut);}

/* --- Variante nav CRÈME (fond olive derrière, ex. pages intérieures) --- */
.site-header.on-dark .nav-links a{color:var(--cream);}
.site-header.on-dark .nav-links a:hover{opacity:.8;}
.site-header.on-dark .nav-cta{border-color:rgba(245,237,208,.6);color:var(--cream);}
.site-header.on-dark .nav-cta:hover{background:var(--cream);color:var(--olive);}

/* --- Variante accueil split : logo crème (sur la photo), liens olive (sur le crème) --- */
@media(max-width:980px){
  /* en mobile le hero passe photo en haut : header sur photo -> tout crème */
  .site-header.on-split .nav-links a{color:var(--cream);}
  .site-header.on-split .nav-cta{border-color:rgba(245,237,208,.6);color:var(--cream);}
  .site-header.on-split .nav-toggle span{background:var(--cream);}
}

/* Burger */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:24px;position:relative;z-index:60;}
.nav-toggle span{display:block;position:absolute;left:0;right:0;height:2px;background:var(--olive);transition:transform .3s,opacity .3s,top .3s;}
.nav-toggle span:nth-child(1){top:2px;}
.nav-toggle span:nth-child(2){top:11px;}
.nav-toggle span:nth-child(3){top:20px;}
.on-dark .nav-toggle span{background:var(--cream);}
.nav-open .nav-toggle span:nth-child(1){top:11px;transform:rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){top:11px;transform:rotate(-45deg);}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-block;font-size:15px;letter-spacing:.3px;padding:15px 34px;border-radius:999px;transition:transform .2s,background .25s,color .25s;cursor:pointer;border:0;font-family:inherit;}
.btn-primary{background:var(--olive);color:var(--cream);}
.btn-primary:hover{background:var(--olive-deep);}
.btn-cream{background:var(--cream);color:var(--olive);}
.btn-cream:hover{background:#fff;}
.btn-outline{border:1px solid var(--olive);color:var(--olive);background:transparent;}
.btn-outline:hover{background:var(--olive);color:var(--cream);}

/* ============================================================
   HERO (accueil) — split éditorial
   ============================================================ */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:760px;background:var(--cream);}
.hero__media{position:relative;overflow:hidden;min-height:460px;}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__inner{display:flex;flex-direction:column;justify-content:center;padding:150px var(--gut) 100px;}
.hero__eyebrow{margin-bottom:26px;}
.hero h1{font-size:clamp(40px,4.6vw,72px);color:var(--olive);line-height:1.08;text-wrap:nowrap;}
.hero h1 .l2{display:block;}
@media(max-width:520px){.hero h1{font-size:clamp(34px,8.5vw,44px);}}
.hero__sub{font-family:'Armany',serif;font-size:clamp(22px,2.6vw,32px);color:var(--sage);margin-top:10px;}
.hero__text{margin-top:34px;max-width:40ch;color:var(--ink-soft);font-size:17.5px;line-height:1.7;}
.hero__actions{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}

/* ============================================================
   STRIP (bandeau soins)
   ============================================================ */
.strip{background:var(--olive);color:var(--cream);}
.strip .wrap{display:flex;gap:18px 46px;justify-content:center;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;}
.strip span{font-family:'Hanken Grotesk',sans-serif;font-size:clamp(16px,1.8vw,20px);}
.strip .dot{opacity:.45;font-family:'Hanken Grotesk',sans-serif;}

/* ============================================================
   SECTIONS génériques
   ============================================================ */
section{position:relative;}
.sec{padding:clamp(72px,10vw,120px) 0;}
.sec-sage{background:var(--sage);}
.sec-olive{background:var(--olive);color:var(--cream);}
.sec-cream2{background:var(--cream-2);}
.sec-olive h2,.sec-olive h3{color:var(--cream);}

.lead{font-family:'Armany',serif;font-size:clamp(26px,3.3vw,40px);line-height:1.2;color:var(--olive);}
.lead .salemo{color:var(--sage);}
.sec-sage .lead{color:var(--olive-deep);}
.sec-sage .lead .salemo{color:var(--cream-2);}

/* two-col intro */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:center;}
.split__media{position:relative;}
.split__media img{width:100%;height:clamp(380px,52vw,560px);object-fit:cover;border-radius:3px;}
.split__cap{position:absolute;right:-14px;bottom:-14px;background:var(--cream);color:var(--olive);font-family:'Armany',serif;font-size:16px;line-height:1.3;padding:16px 20px;max-width:210px;box-shadow:0 10px 30px rgba(63,63,42,.1);}
.sec-sage .split__cap{background:var(--cream);}
.body-text{color:var(--ink);max-width:46ch;}
.body-text + .body-text{margin-top:16px;}
.sec-title{font-size:clamp(34px,5vw,64px);}
.sec-head{margin-bottom:clamp(40px,6vw,64px);}
.sec-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;}
.sec-head--row p{max-width:34ch;color:var(--ink);}
.sec-olive .sec-head--row p{color:rgba(245,237,208,.85);}

/* ============================================================
   APERÇU SOINS (accueil) — liste éditoriale
   ============================================================ */
.soinlist{border-top:1px solid var(--line);}
.sec-sage .soinlist{border-color:rgba(63,63,42,.2);}
.soinrow{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);}
.sec-sage .soinrow{border-color:rgba(63,63,42,.2);}
.soinrow__no{font-family:'Armany',serif;font-size:19px;color:var(--cream-2);}
.sec-sage .soinrow__no{color:var(--cream);}
.soinrow__name{font-family:'Armany',serif;font-size:clamp(23px,2.8vw,33px);color:var(--ink);}
.sec-sage .soinrow__name{color:var(--olive-deep);}
.soinrow__desc{font-size:14.5px;color:var(--ink-soft);max-width:34ch;text-align:right;}
.sec-sage .soinrow__desc{color:var(--ink);}
@media(max-width:720px){
  .soinrow{grid-template-columns:auto 1fr;gap:6px 18px;}
  .soinrow__desc{grid-column:1/-1;text-align:left;max-width:none;padding-top:4px;}
}

/* ============================================================
   EXPÉRIENCE / RITUEL — images chevauchées
   ============================================================ */
.ritual{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;}
.ritual__media{position:relative;height:clamp(420px,56vw,600px);}
.ritual__media .a{position:absolute;left:0;top:20px;width:64%;height:74%;object-fit:cover;border-radius:3px;}
.ritual__media .b{position:absolute;right:0;bottom:20px;width:48%;height:56%;object-fit:cover;border-radius:3px;border:10px solid var(--cream);}
.sec-cream2 .ritual__media .b{border-color:var(--cream-2);}
.steps{margin-top:34px;}
.step{display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--line);}
.step__k{font-family:'Armany',serif;color:var(--sage);font-size:18px;min-width:26px;}
.step__t strong{display:block;font-weight:600;color:var(--olive);font-size:16.5px;margin-bottom:2px;}
.step__t span{font-size:14.5px;color:var(--ink-soft);}

/* ============================================================
   BANDE CITATION (olive + picto)
   ============================================================ */
.quote{text-align:center;}
.quote img{height:70px;margin:0 auto 34px;opacity:.92;}
.quote p{font-family:'Armany',serif;font-size:clamp(28px,4vw,52px);line-height:1.22;max-width:18ch;margin:0 auto;color:var(--cream);}
.quote p .salemo{color:var(--sage);}

/* ============================================================
   PORTRAIT (aperçu à propos)
   ============================================================ */
.portrait{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;}
.portrait__media img{width:100%;height:clamp(420px,56vw,580px);object-fit:cover;border-radius:3px;}
.portrait h2{font-size:clamp(32px,4.4vw,58px);margin-bottom:22px;}
.portrait .sign{font-family:'Armany',serif;font-size:22px;color:var(--sage);margin-top:22px;}

/* ============================================================
   CTA FULL (bloc final image)
   ============================================================ */
.cta-full{position:relative;overflow:hidden;text-align:center;padding:clamp(100px,14vw,160px) 0;}
.cta-full__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;}
.cta-full__scrim{position:absolute;inset:0;background:rgba(63,63,42,.52);}
.cta-full .wrap{position:relative;z-index:3;}
.cta-full h2{color:var(--cream);font-size:clamp(38px,6vw,82px);margin-bottom:16px;}
.cta-full p{color:rgba(245,237,208,.92);margin-bottom:32px;font-size:16px;}

/* ============================================================
   PAGE HEADER (pages intérieures)
   ============================================================ */
.page-hero{background:var(--olive);color:var(--cream);padding:clamp(130px,16vw,180px) 0 clamp(60px,8vw,88px);text-align:center;}
.page-hero .eyebrow{color:var(--sage-soft);}
.page-hero h1{color:var(--cream);font-size:clamp(44px,7vw,92px);margin:14px 0 6px;}
.page-hero__sub{font-family:'Armany',serif;font-size:clamp(20px,2.4vw,28px);color:var(--sage-soft);}

/* ============================================================
   SOINS (page détail)
   ============================================================ */
.soin-intro{max-width:60ch;margin:0 auto;text-align:center;color:var(--ink);}
.soin-note{display:inline-block;margin-top:14px;font-size:14px;color:var(--ink-soft);font-style:italic;}

.soin-block{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(34px,5vw,72px);align-items:center;padding:clamp(48px,7vw,80px) 0;border-bottom:1px solid var(--line);}
.soin-block:last-of-type{border-bottom:0;}
.soin-block--rev .soin-block__media{order:2;}
.soin-block__media img{width:100%;height:clamp(360px,46vw,520px);object-fit:cover;border-radius:3px;}
.soin-block__name{font-size:clamp(28px,3.6vw,46px);margin-bottom:6px;}
.soin-block__tag{font-family:'Armany',serif;color:var(--sage);font-size:19px;margin-bottom:18px;display:block;}
.soin-block__desc{color:var(--ink);margin-bottom:18px;}
.soin-block__for{background:var(--cream-2);border-radius:4px;padding:18px 22px;margin-bottom:20px;}
.soin-block__for h4{font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--sage);margin-bottom:10px;}
.soin-block__for ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.soin-block__for li{position:relative;padding-left:20px;font-size:14.5px;color:var(--ink);}
.soin-block__for li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--sage);}
.price-table{display:flex;flex-direction:column;gap:10px;}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:10px;border-bottom:1px dashed var(--line);}
.price-row:last-child{border-bottom:0;}
.price-row .label{color:var(--ink);font-size:15px;}
.price-row .label small{display:block;color:var(--ink-soft);font-size:12.5px;}
.price-row .amount{font-family:'Armany',serif;font-size:21px;color:var(--olive);white-space:nowrap;}

/* Forfaits + visage : encarts */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:10px;}
.pcard{background:var(--cream-2);border-radius:5px;padding:30px 28px;}
.sec-sage .pcard{background:var(--cream);}
.pcard h3{font-size:24px;margin-bottom:6px;}
.pcard .tag{font-family:'Armany',serif;color:var(--sage);font-size:16px;display:block;margin-bottom:16px;}
.pcard .price-table{margin-top:4px;}
.payment-note{margin-top:14px;font-size:13px;color:var(--ink-soft);font-style:italic;line-height:1.4;}

/* ============================================================
   À PROPOS (page)
   ============================================================ */
.about-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:center;}
.about-lead__media img{width:100%;height:clamp(420px,56vw,600px);object-fit:cover;border-radius:3px;}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.value{background:var(--cream-2);border-radius:5px;padding:30px 26px;}
.sec-sage .value{background:var(--cream);}
.value h3{font-size:24px;margin-bottom:10px;}
.value p{font-size:14.5px;color:var(--ink);}
.concept-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;margin-top:8px;}
.concept-list li{display:flex;gap:14px;padding:16px 0;border-top:1px solid rgba(245,237,208,.25);}
.concept-list .k{font-family:'Armany',serif;color:var(--sage-soft);font-size:17px;min-width:20px;}
.concept-list strong{display:block;color:var(--cream);font-weight:600;margin-bottom:2px;}
.concept-list span{font-size:14.5px;color:rgba(245,237,208,.8);}

/* ============================================================
   CONTACT / RDV (page)
   ============================================================ */
.rdv-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.rdv-step{position:relative;padding-top:16px;border-top:2px solid var(--sage);}
.rdv-step .n{font-family:'Armany',serif;font-size:20px;color:var(--sage);display:block;margin-bottom:8px;}
.rdv-step h3{font-size:21px;margin-bottom:8px;}
.rdv-step p{font-size:15px;color:var(--ink);}

.rdv-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,72px);align-items:start;}
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--olive);margin-bottom:7px;}
.form-field input,.form-field select,.form-field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--cream-2);border:1px solid var(--line);border-radius:6px;
  padding:13px 15px;transition:border-color .2s,box-shadow .2s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(175,183,133,.25);
}
.form-field textarea{resize:vertical;min-height:120px;}
.form-note{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
.info-card{background:var(--cream-2);border-radius:6px;padding:32px 30px;}
.info-card h3{font-size:22px;margin-bottom:20px;}
.info-item{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);}
.info-item:last-child{border-bottom:0;}
.info-item .ico{color:var(--sage);flex-shrink:0;width:20px;}
.info-item .txt b{display:block;font-size:13px;color:var(--olive);font-weight:600;letter-spacing:.2px;}
.info-item .txt span,.info-item .txt a{font-size:15px;color:var(--ink);}
.info-item .txt a:hover{color:var(--olive);text-decoration:underline;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--cream);padding:clamp(48px,7vw,66px) 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(30px,5vw,50px);padding-bottom:34px;border-bottom:1px solid var(--line);}
.footer-brand img{height:34px;margin-bottom:14px;}
.footer-brand .tagline{font-family:'Armany',serif;color:var(--olive);font-size:18px;max-width:24ch;}
.footer-col h4{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--sage);margin-bottom:14px;font-weight:700;font-family:'Hanken Grotesk',sans-serif;}
.footer-col a,.footer-col p{display:block;font-size:15px;color:var(--ink);margin-bottom:9px;opacity:.9;}
.footer-col a:hover{opacity:1;color:var(--olive);}
.footer-base{display:flex;justify-content:space-between;padding-top:22px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap;gap:8px;}
.footer-base a:hover{color:var(--olive);text-decoration:underline;}

/* ============================================================
   PAGE SIMPLE (mentions légales)
   ============================================================ */
.legal{max-width:780px;margin:0 auto;}
.legal h2{font-size:26px;margin:40px 0 14px;color:var(--olive);}
.legal h2:first-child{margin-top:0;}
.legal p,.legal li{font-size:15px;color:var(--ink);margin-bottom:10px;line-height:1.7;}
.legal ul{padding-left:22px;margin-bottom:14px;}
.legal a{color:var(--olive);text-decoration:underline;}

/* ============================================================
   REVEAL (animation douce unique au scroll)
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.in{opacity:1;transform:none;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;}
  .hero__media{order:1;min-height:360px;height:52vw;max-height:460px;}
  .hero__media img{position:absolute;}
  .hero__inner{order:2;padding:56px var(--gut) 56px;}
  .split,.ritual,.portrait,.about-lead,.rdv-grid{grid-template-columns:1fr;}
  .ritual__media{height:auto;display:flex;gap:16px;}
  .ritual__media .a,.ritual__media .b{position:static;width:50%;height:clamp(240px,42vw,340px);}
  .ritual__media .b{border:0;align-self:flex-end;}
  .portrait__media{order:-1;}
  .about-lead__media{order:-1;}
  .values{grid-template-columns:1fr;}
  .concept-list{grid-template-columns:1fr;}
  .rdv-steps{grid-template-columns:1fr;}
  .soin-block{grid-template-columns:1fr;gap:28px;}
  .soin-block--rev .soin-block__media{order:-1;}
  .soin-block__media{order:-1;}
  .split__cap{right:10px;}
}
@media(max-width:760px){
  .nav-links{
    position:fixed;inset:0;background:var(--olive);flex-direction:column;
    justify-content:center;gap:28px;transform:translateX(100%);transition:transform .35s ease;
  }
  .nav-links a{color:var(--cream);font-size:22px;font-family:'Armany',serif;}
  .nav-links .nav-cta{border-color:rgba(245,237,208,.6);color:var(--cream);font-size:16px;padding:12px 28px;}
  .nav-open .nav-links{transform:translateX(0);}
  .nav-toggle{display:block;}
  .nav-open .nav-toggle span{background:var(--cream);}
  .footer-grid{grid-template-columns:1fr;gap:30px;}
  .footer-base{flex-direction:column;}
  .values{grid-template-columns:1fr;}
}