/* PoolConcept 2026 — Sauna & Hammam (page offre/landing).
   Même langage visuel que le reste du site : noir + or champagne, Bodoni Moda / Space Grotesk / Space Mono.
   Tokens préfixés --sn-* pour ne pas entrer en conflit avec les autres pages. */

:root{
  --sn-noir:#070708; --sn-noir2:#0c0c0e; --sn-noir3:#111113;
  --sn-ivoire:#EFEBE3; --sn-gris:#9a9a9e;
  --sn-or:#C8A24C; --sn-or2:#E4C879; --sn-orsoft:rgba(200,162,76,.34);
  --sn-line:rgba(239,235,227,.12);
  --sn-disp:"Bodoni Moda", Georgia, serif;
  --sn-ui:"Space Grotesk", system-ui, sans-serif;
  --sn-mono:"Space Mono", ui-monospace, monospace;
  --sn-e:cubic-bezier(.22,.61,.36,1); --sn-slow:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--sn-noir);color:var(--sn-ivoire);
  font-family:var(--sn-ui);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}

.sn-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem)}
.sn-kicker{
  font-family:var(--sn-mono);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--sn-or2);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;
}
.sn-kicker::before{content:"";width:26px;height:1px;background:var(--sn-orsoft)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--sn-slow),transform .9s var(--sn-slow)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ HERO ============ */
.sn-hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 0 clamp(3rem,8vh,7rem);overflow:hidden;
}
.sn-hero__bg{position:absolute;inset:0;z-index:0}
.sn-hero__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.sn-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(200,162,76,.12), transparent 55%),
    linear-gradient(180deg, rgba(7,7,8,.55) 0%, rgba(7,7,8,.35) 40%, rgba(7,7,8,.92) 100%);
}
.sn-hero .sn-wrap{position:relative;z-index:1;width:100%}
.sn-hero h1{
  font-family:var(--sn-disp);font-weight:400;
  font-size:clamp(3rem,10vw,8rem);line-height:.95;letter-spacing:-.01em;
  margin:.4rem 0 0;text-wrap:balance;
}
.sn-hero h1 em{font-style:italic;color:var(--sn-or2)}
.sn-hero__sub{
  margin:1.4rem 0 0;max-width:34ch;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--sn-ivoire);
}
.sn-hero__scroll{
  margin-top:2.4rem;font-family:var(--sn-mono);font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--sn-gris);display:flex;align-items:center;gap:.6rem;
}
.sn-hero__scroll svg{width:16px;height:16px;color:var(--sn-or2);animation:snbob 2s var(--sn-e) infinite}
@keyframes snbob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ============ SECTION générique ============ */
.sn-sec{padding:clamp(4.5rem,10vw,9rem) 0;position:relative}
.sn-sec--alt{background:var(--sn-noir2)}
.sn-h2{
  font-family:var(--sn-disp);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.06;margin:0;text-wrap:balance;
}
.sn-h2 em{font-style:italic;color:var(--sn-or2)}

/* Intro éditoriale : titre à gauche, texte à droite */
.sn-intro{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,4vw,3.5rem);align-items:start}
.sn-lead{font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--sn-ivoire);max-width:60ch}
.sn-lead+.sn-lead{margin-top:1.1rem;color:var(--sn-gris);font-size:1.02rem}
@media(min-width:900px){
  .sn-intro{grid-template-columns:.9fr 1.1fr}
  .sn-intro .sn-h2{position:sticky;top:120px}
}

/* ============ BIENFAITS ============ */
.sn-benefits{margin-top:clamp(2rem,5vw,3.5rem);display:grid;gap:1px;background:var(--sn-line);
  grid-template-columns:1fr;border:1px solid var(--sn-line)}
@media(min-width:640px){.sn-benefits{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.sn-benefits{grid-template-columns:repeat(4,1fr)}}
.sn-benefit{background:var(--sn-noir);padding:clamp(1.6rem,2.5vw,2.2rem)}
.sn-sec--alt .sn-benefit{background:var(--sn-noir2)}
.sn-benefit__i{font-family:var(--sn-mono);font-size:.7rem;color:var(--sn-or2);letter-spacing:.2em}
.sn-benefit b{display:block;font-family:var(--sn-disp);font-weight:500;font-size:1.24rem;
  margin:.7rem 0 .5rem;color:var(--sn-ivoire)}
.sn-benefit p{margin:0;color:var(--sn-gris);font-size:.96rem;line-height:1.55}

/* ============ CTA ============ */
.sn-cta{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:clamp(1.8rem,4vw,2.6rem);
  font-family:var(--sn-ui);font-weight:500;font-size:.86rem;letter-spacing:.02em;
  padding:1rem 1.7rem;color:var(--sn-noir);background:var(--sn-or2);
  border:1px solid var(--sn-or2);text-decoration:none;transition:.35s var(--sn-e);cursor:pointer;
}
.sn-cta svg{width:16px;height:16px;transition:transform .35s var(--sn-e)}
.sn-cta:hover{background:transparent;color:var(--sn-or2)}
.sn-cta:hover svg{transform:translateX(4px)}
.sn-cta--ghost{background:transparent;color:var(--sn-or2)}
.sn-cta--ghost:hover{background:var(--sn-or2);color:var(--sn-noir)}

/* ============ GALERIES (utilise gallery.css pour .pc-gitem + lightbox) ============ */
.sn-galhead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(1.4rem,3vw,2.2rem);flex-wrap:wrap}
.sn-galhead .sn-count{font-family:var(--sn-mono);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sn-gris)}
.sn-gal{grid-template-columns:repeat(2,1fr)}
.sn-gal .pc-gitem{aspect-ratio:4/3}
@media(min-width:720px){.sn-gal{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.sn-gal{grid-template-columns:repeat(4,1fr)}}
.sn-gal--tall{grid-template-columns:repeat(2,1fr)}
.sn-gal--tall .pc-gitem{aspect-ratio:2/3}
@media(min-width:720px){.sn-gal--tall{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.sn-gal--tall{grid-template-columns:repeat(6,1fr)}}

/* ============ PROCESS (la signature : 5 étapes, une vraie séquence) ============ */
.sn-steps{margin-top:clamp(2.4rem,5vw,4rem);border-top:1px solid var(--sn-line)}
.sn-step{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,4vw,3rem);
  padding:clamp(1.6rem,3.2vw,2.4rem) 0;border-bottom:1px solid var(--sn-line);align-items:baseline;
}
.sn-step__n{
  font-family:var(--sn-disp);font-weight:400;font-size:clamp(2.4rem,6vw,4.4rem);
  line-height:1;color:var(--sn-or);opacity:.55;font-feature-settings:"lnum";min-width:2ch;
}
.sn-step.in .sn-step__n{opacity:1;transition:opacity .8s var(--sn-slow)}
.sn-step__b h3{font-family:var(--sn-disp);font-weight:500;font-size:clamp(1.2rem,2.4vw,1.7rem);
  margin:0 0 .4rem;color:var(--sn-ivoire)}
.sn-step__b p{margin:0;color:var(--sn-gris);max-width:52ch}

/* ============ FINAL ============ */
.sn-final{text-align:center;padding:clamp(5rem,11vw,10rem) 0}
.sn-final .sn-h2{max-width:20ch;margin:0 auto}
.sn-final p{margin:1.4rem auto 0;max-width:56ch;color:var(--sn-gris);font-size:1.06rem}
.sn-final .sn-cta{margin-top:2.4rem}

/* ============ FOOTER mince ============ */
.sn-foot{border-top:1px solid var(--sn-line);padding:2.4rem 0;color:var(--sn-gris);
  font-family:var(--sn-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sn-foot a{color:var(--sn-or2);text-decoration:none}