/* ==========================================================================
   Salon Namasté — Calais
   Parti pris « herbier » : base crème, vert feuille, terracotta.
   Palette tirée du logo réel du salon.
   ========================================================================== */

:root{
  --creme:#F8F5EE;
  --creme-2:#F1ECE1;
  --vert:#3F5D45;
  --vert-clair:#6E8C63;
  --vert-pale:#E4EADF;
  --terre:#9A5A33;
  --terre-clair:#C08A5E;
  --encre:#2A2A26;
  --gris:#5E5C55;
  --nav-h:78px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  background:var(--creme);color:var(--encre);
  font-family:'Rubik',system-ui,-apple-system,sans-serif;
  font-weight:300;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:'Petrona',Georgia,serif;font-weight:500;line-height:1.14;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.4vw,3.3rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
h3{font-size:1.12rem;font-weight:600;font-family:'Rubik',sans-serif;letter-spacing:0}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}

.wrap{width:min(1180px,92vw);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--vert);color:#fff;padding:.7rem 1.1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}

.section{padding:3.5rem 0}
.section--creme{background:var(--creme-2)}
.section--vert{background:var(--vert);color:#F3F0E8}

.eyebrow{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--terre);margin-bottom:.7rem;
}
.section--vert .eyebrow{color:#EFC7A8}
.eyebrow--sep{
  margin:2.6rem 0 1rem;padding-top:1.4rem;
  border-top:1px solid rgba(63,93,69,.18);color:var(--vert-clair);
}

.sec-head{max-width:52ch;margin-bottom:2rem}
.sec-head__note{margin-top:.9rem;color:var(--gris);font-size:.97rem}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;font-family:'Rubik',sans-serif;font-weight:500;
  font-size:.94rem;letter-spacing:.02em;text-decoration:none;
  padding:.82rem 1.5rem;border-radius:999px;border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s;cursor:pointer;
}
.btn--primary{background:var(--vert);color:#F7F4EC;border-color:var(--vert)}
.btn--primary:hover{background:#334C37;border-color:#334C37}
.btn--ghost{background:transparent;color:var(--vert);border-color:rgba(63,93,69,.4)}
.btn--ghost:hover{background:rgba(63,93,69,.08)}
.btn--light{background:var(--creme);color:var(--vert);border-color:var(--creme)}
.btn--light:hover{background:#fff}
.section--vert .btn--ghost{color:#EDE8DC;border-color:rgba(255,255,255,.4)}
.section--vert .btn--ghost:hover{background:rgba(255,255,255,.12)}

.lien-fleche{
  display:inline-block;margin-top:.5rem;font-weight:500;font-size:.95rem;
  color:var(--terre);text-decoration:none;border-bottom:1px solid var(--terre-clair);
  padding-bottom:2px;
}
.lien-fleche::after{content:' →'}
.lien-fleche:hover{color:var(--vert);border-color:var(--vert)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  background:rgba(248,245,238,.93);backdrop-filter:blur(10px);
  transform:translateZ(0);will-change:transform;
  border-bottom:1px solid rgba(63,93,69,.14);
}
.nav__in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav__brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--vert)}
.nav__brand img{width:44px;height:44px;object-fit:contain}
.nav__brand span{font-family:'Petrona',serif;font-size:1.3rem;font-weight:600;line-height:1;display:block}
.nav__brand small{
  display:block;font-family:'Rubik',sans-serif;font-size:.62rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gris);margin-top:.28rem;
}
.nav__links{display:flex;align-items:center;gap:1.5rem}
.nav__links a{
  text-decoration:none;font-size:.92rem;font-weight:400;color:var(--encre);
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.nav__links a:hover{border-color:var(--terre)}
.nav__links a.nav__cta{
  color:#F7F4EC;background:var(--vert);border:1px solid var(--vert);
  padding:.6rem 1.1rem;border-radius:999px;font-weight:500;
}
.nav__links a.nav__cta:hover{background:#334C37;border-color:#334C37;color:#fff}
.nav__burger{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.nav__burger span{display:block;width:24px;height:2px;background:var(--vert);margin:5px 0;border-radius:2px}

/* ---------- hero mosaïque ---------- */
.hero{padding-top:calc(var(--nav-h) + 3.5rem);padding-bottom:3.5rem}
.hero__mosaic{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  grid-template-rows:auto minmax(0,270px);
  gap:14px;
}
.hero__main{grid-column:1;grid-row:1 / span 2;border-radius:6px;overflow:hidden;background:var(--creme-2)}
.hero__main img{width:100%;height:100%;object-fit:cover;min-height:430px}
.hero__card{
  grid-column:2;grid-row:1;
  background:#fff;border:1px solid rgba(63,93,69,.16);border-radius:6px;
  padding:2rem 1.9rem 1.7rem;
}
.hero__logo{width:74px;height:74px;object-fit:contain;margin-bottom:.9rem}
.hero__lede{color:var(--gris);font-size:1.03rem;margin-top:.9rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.hero__stats{
  list-style:none;display:flex;gap:1.6rem;flex-wrap:wrap;
  margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid rgba(63,93,69,.16);
}
.hero__stats strong{
  display:block;font-family:'Petrona',serif;font-size:1.4rem;
  font-weight:600;color:var(--vert);line-height:1.1;
}
.hero__stats span{font-size:.76rem;letter-spacing:.05em;color:var(--gris)}
.hero__side{grid-column:2;grid-row:2;border-radius:6px;overflow:hidden;background:var(--creme-2)}
.hero__side img{width:100%;height:100%;object-fit:cover}

/* ---------- bandeau engagements ---------- */
.engage{background:var(--vert);color:#EDE9DE;padding:1.5rem 0}
.engage__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.engage__in p{margin:0;font-size:.92rem;line-height:1.6;color:#DCD8CB}
.engage__in span{
  display:block;font-family:'Petrona',serif;font-size:1.15rem;font-weight:600;
  color:#F5F1E6;letter-spacing:.02em;margin-bottom:.15rem;
}

/* ---------- méthode ---------- */
.methode{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:3rem;align-items:center}
.methode__texte h2{margin-bottom:1.1rem}
.methode__texte p{color:var(--gris)}
.methode__texte strong{color:var(--encre);font-weight:500}
.methode__franchise{
  background:var(--vert-pale);border-radius:5px;padding:1.1rem 1.3rem;
  font-size:.96rem;margin-top:1.4rem;color:#4A5A4C;
}
.methode__visuel{border-radius:6px;overflow:hidden}

/* ---------- katia ---------- */
.katia{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:3rem;align-items:center}
.katia__photo{border-radius:6px;overflow:hidden}
.katia__texte h2{margin-bottom:1.1rem}
.katia__texte p{color:var(--gris)}
.katia__reperes{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.katia__reperes li{
  background:#fff;border:1px solid rgba(63,93,69,.18);border-radius:999px;
  padding:.42rem 1rem;font-size:.85rem;color:var(--gris);
}
.katia__reperes strong{color:var(--vert);font-weight:600}

/* ---------- avis ---------- */
.avis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.avis blockquote{
  background:var(--creme-2);border-radius:6px;padding:1.7rem 1.5rem;
  border:1px solid rgba(63,93,69,.14);
}
.section--creme .avis blockquote{background:var(--creme)}
.avis p{font-size:.97rem;color:var(--gris);font-style:italic}
.avis cite{
  display:block;margin-top:1rem;font-style:normal;font-size:.8rem;
  letter-spacing:.05em;color:var(--vert);font-weight:500;
}
.avis__lien{margin-top:1.6rem;font-size:.9rem}
.avis__lien a{color:var(--terre)}

/* ---------- carte des tarifs ---------- */
.carte{list-style:none;max-width:820px}
.carte li{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1.8rem;
  padding:1.15rem 0;border-bottom:1px solid rgba(63,93,69,.16);
}
.carte li:first-child{border-top:1px solid rgba(63,93,69,.16)}
.carte li p{margin:.3rem 0 0;font-size:.92rem;color:var(--gris)}
.carte__prix{
  font-family:'Petrona',serif;font-size:1.5rem;font-weight:600;
  color:var(--vert);white-space:nowrap;line-height:1.2;
}
.carte__prix--devis{font-size:1rem;font-style:italic;color:var(--gris)}
.carte__phare{background:rgba(169,102,60,.07);margin:0 -1.1rem;padding:1.15rem 1.1rem}
.carte__phare h3{color:var(--terre)}
.carte__sup{font-size:.85rem!important;color:var(--gris)}
.carte__sup em{font-style:normal;font-weight:500;color:var(--terre)}

/* ---------- galeries ---------- */
.grille-real{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grille-lieu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gallery__btn{
  display:block;padding:0;border:0;background:var(--creme-2);cursor:pointer;
  border-radius:5px;overflow:hidden;width:100%;
}
.grille-real .gallery__btn img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .5s}
.grille-lieu .gallery__btn img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .5s}
.gallery__btn:hover img{transform:scale(1.04)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:3rem;align-items:start}
.contact h2{color:#F5F2EA}
.contact__note{color:#D8D3C6;font-size:.97rem;max-width:44ch}
.contact__tel{margin:1.3rem 0 1.1rem;font-family:'Petrona',serif;font-size:1.3rem;font-weight:600;letter-spacing:.02em}
.contact__adresse a{color:#E7E2D6;font-size:.97rem}
.contact__adresse a:hover{color:#fff}
.horaires{width:100%;max-width:400px;border-collapse:collapse;margin-top:1.5rem}
.horaires th,.horaires td{
  padding:.42rem 0;text-align:left;font-weight:400;font-size:.93rem;
  border-bottom:1px solid rgba(255,255,255,.14);color:#E7E2D6;
}
.horaires td{text-align:right}
.horaires .ferme{color:#D5D0C1}
.contact__petit{margin-top:1rem;font-size:.85rem;color:#D5D0C1}

.contact__carte{border-radius:6px;overflow:hidden;min-height:330px;background:rgba(255,255,255,.07)}
.map-consent{
  height:100%;min-height:330px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:2rem;color:#D6D2C6;font-size:.93rem;
  border:1px dashed rgba(255,255,255,.25);border-radius:6px;
}
.contact__carte iframe{
  width:100%;height:100%;min-height:330px;border:0;display:block;
  filter:grayscale(.3) contrast(1.05);
}

/* ---------- footer ---------- */
.footer{background:var(--creme-2);padding:3rem 0 1.6rem;border-top:1px solid rgba(63,93,69,.16)}
.footer__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem}
.footer__logo{width:56px;height:56px;object-fit:contain;margin-bottom:.6rem}
.footer h3{font-family:'Petrona',serif;font-size:1.35rem;font-weight:600;color:var(--vert)}
.footer h3 small{
  display:block;font-family:'Rubik',sans-serif;font-size:.63rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-top:.3rem;
}
.footer p{font-size:.92rem;color:var(--gris);margin-bottom:.4rem}
.footer__titre{font-weight:500;color:var(--encre);margin-bottom:.7rem!important}
.footer a{color:var(--gris)}
.footer a:hover{color:var(--terre)}
.footer__bas{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid rgba(63,93,69,.16);
  font-size:.82rem;color:var(--gris);
}
.footer__bas a{text-decoration:none}

/* ---------- CTA mobile ---------- */
.cta-mobile{display:none}

/* ---------- cookies ---------- */
.cookies{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:130;
  background:var(--vert);color:#EDE9DE;border-radius:8px;
  padding:1.1rem 1.3rem;display:none;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;box-shadow:0 10px 34px rgba(0,0,0,.22);
  max-width:960px;margin:0 auto;
}
.cookies.is-visible{display:flex}
.cookies p{font-size:.86rem;margin:0;flex:1 1 340px;color:#DAD6C9}
.cookies__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.cookies .btn{padding:.6rem 1.1rem;font-size:.85rem}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:150;display:none;
  align-items:center;justify-content:center;
  background:rgba(29,40,31,.96);padding:2rem;
}
.lightbox.is-open{display:flex}
body.lb-open .nav{visibility:hidden}
#lightboxImg{max-width:min(1100px,92vw);max-height:86vh;width:auto;height:auto;object-fit:contain;border-radius:4px}
.lightbox button{
  position:absolute;background:rgba(255,255,255,.14);border:0;color:#fff;
  width:46px;height:46px;border-radius:50%;font-size:1.4rem;line-height:1;
  cursor:pointer;transition:background .2s;
}
.lightbox button:hover{background:rgba(255,255,255,.3)}
#lightboxClose{top:1.4rem;right:1.4rem}
#lightboxPrev{left:1.4rem;top:50%;transform:translateY(-50%)}
#lightboxNext{right:1.4rem;top:50%;transform:translateY(-50%)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
  .methode,.katia,.contact{grid-template-columns:minmax(0,1fr);gap:2rem}
  .katia__photo{max-width:420px}
  .avis{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille-real{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:860px){
  :root{--nav-h:70px}
  .nav__burger{display:block}
  .nav__links{
    position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--creme);border-bottom:1px solid rgba(63,93,69,.16);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:.6rem 4vw 1.4rem;display:none;
  }
  .nav.is-open .nav__links{display:flex}
  .nav__links a{width:100%;padding:.75rem 0;border-bottom:1px solid rgba(63,93,69,.1)}
  .nav__links a.nav__cta{width:auto;margin-top:.9rem;padding:.65rem 1.2rem}

  .hero__mosaic{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:10px}
  .hero__main{grid-column:1;grid-row:2}
  .hero__main img{min-height:0;aspect-ratio:4/3}
  .hero__card{grid-column:1;grid-row:1;padding:1.6rem 1.4rem 1.4rem}
  .hero__side{grid-column:1;grid-row:3}
  .hero__side img{height:auto;aspect-ratio:4/3}

  .engage__in{grid-template-columns:minmax(0,1fr);gap:1rem}
  .grille-lieu{grid-template-columns:repeat(2,minmax(0,1fr))}

  .cta-mobile{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:rgba(248,245,238,.95);backdrop-filter:blur(8px);
    padding:.7rem 4vw calc(.7rem + env(safe-area-inset-bottom));
    border-top:1px solid rgba(63,93,69,.16);
  }
  .cta-mobile .btn{display:block;text-align:center}
  .cookies{bottom:4.6rem}
  .footer{padding-bottom:5.4rem}
}

@media (max-width:600px){
  body{font-size:16px}
  .section{padding:3rem 0}
  .hero{padding-top:calc(var(--nav-h) + 2.2rem);padding-bottom:3rem}
  .btn{font-size:.88rem;padding:.75rem 1.15rem;letter-spacing:0}
  .hero__actions .btn{flex:1 1 auto;text-align:center}
  .hero__stats{gap:1.1rem}
  .grille-real,.grille-lieu{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .carte li{flex-direction:column;gap:.3rem}
  .carte__prix{font-size:1.25rem}
  .carte__phare{margin:0;padding:1.15rem 0}
  .lightbox{padding:1rem}
  .lightbox button{width:40px;height:40px;font-size:1.2rem}
  #lightboxClose{top:.8rem;right:.8rem}
  #lightboxPrev{left:.5rem}
  #lightboxNext{right:.5rem}
}