/* =========================================================
   Rituels spa - feuille de style unique
   Tokens : forest #0B1F19 / surface #123027 / mineral #EEF5F1
            muted #A9B8B0 / accent unique #78C6A3
   Thème clair et sombre via prefers-color-scheme.
   ========================================================= */

@font-face{font-family:Satoshi;src:url(assets/fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(assets/fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(assets/fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;

  /* thème clair : base minérale, jamais de blanc pur */
  --bg:#F3F7F4;
  --bg-rgb:243,247,244;
  --surface:#E8EFEA;
  --surface-2:#DEE8E2;
  --text:#10241D;
  --text-muted:#4E6259;
  --hairline:rgba(16,36,29,.13);
  --hairline-strong:rgba(16,36,29,.22);
  --accent:#78C6A3;
  --accent-text:#14684A;
  --accent-ink:#08170F;
  --accent-soft:rgba(120,198,163,.16);
  --shadow:0 22px 60px rgba(16,36,29,.10);

  --nav-h:64px;
  --r-lg:16px;
  --r-md:14px;
  --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --section-y:clamp(4.5rem,9vw,8.5rem);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B1F19;
    --bg-rgb:11,31,25;
    --surface:#123027;
    --surface-2:#16392E;
    --text:#EEF5F1;
    --text-muted:#A9B8B0;
    --hairline:rgba(238,245,241,.14);
    --hairline-strong:rgba(238,245,241,.26);
    --accent-text:#78C6A3;
    --accent-soft:rgba(120,198,163,.13);
    --shadow:0 26px 70px rgba(0,0,0,.45);
  }
}

@media (min-width:900px){:root{--nav-h:72px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Satoshi,"Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.06}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.section-title{font-size:clamp(1.6rem,1.1rem + 2vw,2.7rem);max-width:20ch;margin-bottom:clamp(2rem,4vw,3.25rem)}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:fixed;top:8px;left:8px;z-index:100;
  transform:translateY(-160%);
  background:var(--surface);color:var(--text);
  padding:.65rem 1rem;border-radius:var(--r-md);
  border:1px solid var(--hairline-strong);
  text-decoration:none;font-weight:500;
}
.skip-link:focus-visible{transform:none}

/* ---------- Boutons ---------- */
.btn{
  --btn-y:.85rem;
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  padding:var(--btn-y) 1.45rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-weight:700;font-size:.95rem;line-height:1.15;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:#8AD2B1;transform:translateY(-1px)}
.btn--primary:active{transform:scale(.985)}
.btn--sm{--btn-y:.6rem;font-size:.8rem;padding-inline:1.05rem}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:50;
  height:var(--nav-h);
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
}
.nav__inner{
  height:100%;max-width:1240px;margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:clamp(.6rem,2vw,2rem);
}
.nav__brand{
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--text);
  font-weight:700;letter-spacing:-.01em;flex:none;
}
.nav__mark{color:var(--accent-text);flex:none;width:28px;height:28px;object-fit:contain}
.nav__wordmark{font-size:.95rem;white-space:nowrap}
.nav__links{display:none;margin-inline-start:auto;gap:clamp(1rem,2.2vw,2rem)}
.nav__links a{
  text-decoration:none;color:var(--text-muted);font-size:.92rem;font-weight:500;
  transition:color .25s var(--ease);
}
.nav__links a:hover{color:var(--text)}
.nav__actions{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}

.lang{
  background:none;border:1px solid var(--hairline-strong);
  color:var(--text-muted);
  font:inherit;font-size:.75rem;font-weight:700;letter-spacing:.04em;
  padding:.42rem .6rem;border-radius:var(--r-pill);
  cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.lang:hover{color:var(--text);border-color:var(--text-muted)}

/* Sans bouton de commande, la barre ne garde que la marque et la langue :
   les deux tiennent jusqu'à 320 px, inutile de les masquer. */
@media (max-width:359px){
  .nav__inner{gap:.5rem}
  .nav__wordmark{font-size:.88rem}
}
@media (min-width:900px){
  .nav__links{display:flex;align-items:center}
  /* Les liens portent déjà la marge auto : les actions se collent à eux. */
  .nav__links + .nav__actions{margin-inline-start:0}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100dvh;
  padding-top:var(--nav-h);
  display:flex;align-items:center;
}
.hero__inner{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,4vw,2.5rem);
  padding-block:clamp(1.5rem,4vw,3rem);
  padding-inline:clamp(1rem,4vw,2rem);
  max-width:1240px;margin-inline:auto;
}
.hero__copy{display:grid;gap:clamp(1rem,2.4vw,1.6rem);justify-items:start;max-width:34rem;min-width:0}
.hero__title{font-size:clamp(1.9rem,1.05rem + 3.2vw,4rem);letter-spacing:-.035em}
.hero__lede{color:var(--text-muted);font-size:clamp(.98rem,.92rem + .5vw,1.2rem);max-width:34ch}

.hero__media{position:relative;border-radius:var(--r-lg);overflow:hidden;min-width:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:78% 50%;aspect-ratio:1672/941}
.hero__scrim{display:none}

@media (min-width:900px){
  .hero{padding-top:0}
  /* La colonne de texte vaut le retrait du conteneur plus une largeur de lecture
     stable : sans ce calcul, le retrait grandit plus vite que la colonne sur
     grand écran et le titre finit sur trois lignes. */
  .hero__inner{
    --hero-pad-l:max(1.25rem,calc((100vw - 1240px)/2));
    grid-template-columns:minmax(0,calc(var(--hero-pad-l) + min(36rem,42vw))) minmax(0,1fr);
    gap:0;padding:0;max-width:none;
    align-items:center;
    min-height:100dvh;
  }
  .hero__copy{
    max-width:none;
    align-content:center;
    container-type:inline-size;
    padding-block:calc(var(--nav-h) + 1.5rem) 2.5rem;
    padding-inline:var(--hero-pad-l) clamp(1.75rem,3vw,3.5rem);
  }
  /* Taille indexée sur la colonne, pas sur la fenêtre : deux lignes maximum. */
  .hero__title{font-size:clamp(2.2rem,11cqw,4rem);max-width:none}
  /* Panneau qui déborde sur le bord droit : la hauteur est bornée pour
     garder le flacon pompe, les pots et la compresse entièrement dans le cadre. */
  .hero__media{
    align-self:center;
    height:min(100dvh,56vw);
    border-radius:var(--r-lg) 0 0 var(--r-lg);
  }
  .hero__media img{aspect-ratio:auto;height:100%;object-position:100% 50%}
  .hero__scrim{
    display:block;position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to right,rgba(var(--bg-rgb),.9) 0%,rgba(var(--bg-rgb),0) 22%);
  }
}

/* ---------- Offre principale ---------- */
.offer{padding-block:var(--section-y)}
.offer__grid{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
.offer__title{font-size:clamp(1.6rem,1.1rem + 2vw,2.7rem);max-width:16ch}
.offer__text{margin-top:1.1rem;color:var(--text-muted);max-width:46ch}
.offer__list{display:grid;gap:0;align-content:start}
.offer__list li{
  padding-block:clamp(.9rem,2vw,1.2rem);
  border-top:1px solid var(--hairline);
  font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);
  font-weight:500;letter-spacing:-.015em;
}
.offer__list li:last-child{border-bottom:1px solid var(--hairline)}

@media (min-width:900px){
  .offer__grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:start}
}

/* ---------- Collections ---------- */
.range{padding-block:var(--section-y);background:var(--surface);border-block:1px solid var(--hairline)}
.range__heading{display:grid;gap:.9rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.range__heading .section-title{margin-bottom:0}
.range__heading p{color:var(--text-muted);max-width:48ch}
.collection-tabs{
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);padding:3px;
  border:1px solid var(--hairline);border-radius:var(--r-pill);width:max-content;max-width:100%;
}
.collection-tabs::-webkit-scrollbar{display:none}
.collection-tabs button{
  appearance:none;border:0;background:transparent;color:var(--text-muted);
  font:inherit;font-size:.88rem;font-weight:700;line-height:1;
  padding:.75rem 1.05rem;border-radius:var(--r-pill);white-space:nowrap;cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.collection-tabs button:hover{color:var(--text)}
.collection-tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.collection-tabs button:active{transform:scale(.98)}
.collection-panel[hidden]{display:none}
.collection-panel{outline:none}
.range__grid{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(82vw,21rem),1fr);
  gap:1rem;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;
  scrollbar-width:thin;padding-bottom:.8rem;
}
.tile{
  border-radius:var(--r-lg);
  background:var(--bg);
  border:1px solid var(--hairline);
  overflow:hidden;
  display:flex;flex-direction:column;min-height:15rem;scroll-snap-align:start;
}
.tile__body{padding:clamp(1.25rem,2.5vw,1.75rem);display:grid;gap:.55rem;margin-top:auto}
.tile h3{font-size:clamp(1.1rem,1rem + .5vw,1.4rem)}
.tile p{color:var(--text-muted);font-size:.95rem;max-width:34ch}
.tile small{color:var(--text-muted);font-size:.78rem;line-height:1.5;max-width:46ch;margin-top:.35rem}
.tile--accent{background:var(--accent-soft);border-color:transparent}
.tile--deep{background:var(--surface-2);border-color:transparent}
.tile--photo{background:var(--bg)}
.tile__media{aspect-ratio:16/9;overflow:hidden}
/* Visuel de tête des collections : emballages conceptuels SAVANNAE,
   et non une photo de produits confirmés en vente.
   La source fait 1672x941, soit le ratio 16:9 de la tuile : seule la tuile
   de tête en 21:9 recadre. 56 % garde la pompe en haut et les patchs en bas. */
.tile__media img{width:100%;height:100%;object-fit:cover;object-position:50% 56%}

/* Position non confirmée : visible comme concept, jamais comme produit en stock. */
.tile--pending{background:transparent;border-style:dashed;border-color:var(--hairline-strong)}
.tile--pending h3{color:var(--text-muted)}
.tile__status{
  border-top:1px solid var(--hairline);padding-top:.6rem;
}
.no-js .collection-tabs{display:none}
.no-js .collection-panel{display:block!important;margin-top:1rem}

@media (min-width:900px){
  .range__heading{grid-template-columns:minmax(0,1fr) minmax(18rem,.7fr);align-items:end}
  .range__grid{
    grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(12,minmax(0,1fr));
    overflow:visible;gap:1.25rem;padding-bottom:0;scroll-snap-type:none;
  }
  .range__grid > .tile:nth-child(1){grid-column:span 7}
  .range__grid > .tile:nth-child(2){grid-column:span 5}
  .range__grid > .tile:nth-child(3),
  .range__grid > .tile:nth-child(4),
  .range__grid > .tile:nth-child(5){grid-column:span 4}
  .range__grid > .tile:nth-child(6){grid-column:span 12;min-height:10rem}
  .range__grid--sets > .tile:nth-child(1){grid-column:span 7}
  .range__grid--sets > .tile:nth-child(2){grid-column:span 5}
  .range__grid--sets > .tile:nth-child(3){grid-column:span 5}
  .range__grid--sets > .tile:nth-child(4){grid-column:span 7}
  .tile--feature .tile__media{aspect-ratio:21/9}
  .tile--row .tile__body{grid-template-columns:minmax(13rem,.38fr) minmax(0,1fr);align-items:end;width:100%}
}

/* ---------- Rituel ---------- */
.ritual{padding-block:var(--section-y)}
.ritual__steps{display:grid;gap:1.75rem}
.ritual__step{
  padding-left:1.4rem;border-left:2px solid var(--accent);
  display:grid;gap:.4rem;
}
.ritual__step h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem)}
.ritual__step p{color:var(--text-muted);max-width:30ch}

@media (min-width:900px){
  .ritual__steps{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
  .ritual__step{
    padding-left:0;padding-top:1.5rem;
    border-left:0;border-top:2px solid var(--accent);
  }
  .ritual__step:nth-child(2){margin-top:clamp(1.5rem,3vw,3rem)}
  .ritual__step:nth-child(3){margin-top:clamp(3rem,6vw,6rem)}
}

/* ---------- Confiance (rendue seulement si données réelles) ---------- */
.trust{padding-block:var(--section-y);background:var(--surface);border-block:1px solid var(--hairline)}
.trust__grid{display:grid;gap:1rem}
.trust__item{
  background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:clamp(1.15rem,2.4vw,1.6rem);display:grid;gap:.4rem;
}
.trust__item dt{font-weight:700}
.trust__item dd{margin:0;color:var(--text-muted);font-size:.95rem}
@media (min-width:760px){.trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.trust__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- FAQ ---------- */
.faq{padding-block:var(--section-y)}
.faq__wrap{max-width:1240px}
.faq__list{max-width:860px}
.faq__item{border-top:1px solid var(--hairline)}
.faq__item:last-child{border-bottom:1px solid var(--hairline)}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding-block:clamp(1rem,2.2vw,1.35rem);
  font-weight:500;font-size:clamp(1rem,.95rem + .35vw,1.15rem);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__sign{position:relative;width:16px;height:16px;flex:none}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;inset:50% 0 auto 0;
  height:1.5px;background:var(--accent-text);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.faq__sign::after{transform:rotate(90deg)}
.faq__item[open] .faq__sign::after{transform:rotate(0deg);opacity:0}
.faq__answer{padding-bottom:clamp(1rem,2.2vw,1.4rem);color:var(--text-muted);max-width:62ch;display:grid;gap:.6rem}

/* ---------- Pied de page ---------- */
.footer{border-top:1px solid var(--hairline);padding-block:clamp(2.25rem,5vw,3.5rem)}
.footer__inner{display:grid;gap:1.75rem;align-items:start}
.footer__brand{display:grid;gap:.75rem;justify-items:start}
/* Logo horizontal : version sombre sur fond clair, version claire sur fond sombre.
   Le rapport 5:1 est fixé par les attributs width/height, aucun décalage au chargement. */
.footer__logo{width:clamp(168px,26vw,212px);height:auto}
.footer__tagline{color:var(--text-muted);font-size:.92rem;max-width:30ch}
.footer__links{display:grid;gap:.6rem}
.footer__links a{text-decoration:none;color:var(--text-muted);font-size:.92rem;transition:color .25s var(--ease)}
.footer__links a:hover{color:var(--text)}
.footer__meta{display:grid;gap:1rem;justify-items:start}
.footer__contact{display:grid;gap:.5rem;font-size:.92rem}
.footer__contact a{color:var(--accent-text);text-decoration:none}
.footer__contact a:hover{text-decoration:underline}

@media (min-width:760px){
  .footer__inner{grid-template-columns:1fr auto auto;gap:clamp(2rem,5vw,5rem)}
  .footer__links{grid-auto-flow:row;justify-items:start}
  .footer__meta{justify-items:end}
}

/* ---------- Page confidentialité ---------- */
.legal{padding-block:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem)) var(--section-y)}
.legal__wrap{max-width:720px}
.legal h1{font-size:clamp(1.75rem,1.2rem + 2vw,2.6rem);margin-bottom:1.5rem}
.legal h2{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);margin-top:2.25rem;margin-bottom:.6rem}
.legal p{color:var(--text-muted);margin-bottom:.85rem}
.legal a{color:var(--accent-text)}

/* ---------- Ancres et révélations ---------- */
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

.js .reveal{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.js .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}