/* =========================================================
   HONED : site vitrine
   Maquette desktop 1512 x 982, mobile 1080 x 1920 (Figma "FINAL")
   --u = 1px de la maquette desktop, --m = 1px de la maquette mobile
   ========================================================= */

/* Novecento Sans : chargée depuis Adobe Fonts (projet « Honed », lien dans le <head> des pages) */

:root {
  --u: min(calc(100vw / 1512), calc(100vh / 982));
  --black: #000;
  --white: #fff;
  --font-title: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --font-caps: "novecento-sans", "Figtree", "Helvetica Neue", Arial, sans-serif;
  --fade: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-snap-type: y mandatory; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-caps);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* ---------- Écrans & scène ---------- */
.screen {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: calc(982 * var(--u));
  overflow: hidden;
  background: var(--white);
  /* aimantation : chaque section se cale sur l'écran, le scroll ne s'arrête jamais entre deux */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* La scène reprend exactement le cadre Figma 1512 x 982, centrée dans l'écran */
.stage {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(1512 * var(--u));
  height: calc(982 * var(--u));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.stage a, .stage button { pointer-events: auto; }
[style*="--x"] {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
}
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* bouton son des vidéos campagne : texte en négatif de l'image pour rester lisible sur clair comme sur foncé */
.sound {
  position: absolute; right: calc(42 * var(--u)); bottom: calc(40 * var(--u)); z-index: 2;
  font-family: var(--font-caps); font-weight: 500;
  font-size: calc(14 * var(--u)); line-height: 1; letter-spacing: .02em;
  text-transform: uppercase; color: #fff; mix-blend-mode: difference;
  padding: calc(10 * var(--u)) 0;
}
.sound::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: .55em; height: .55em; margin: -0.15em .6em 0 0;
  border: 1px solid currentColor; border-radius: 50%;
}
.sound[aria-pressed="true"]::before { background: currentColor; }
.sound:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Header ---------- */
.header {
  position: fixed; z-index: 50;
  left: 0; right: 0; top: 0;
  pointer-events: none;
  mix-blend-mode: normal;
}
.header__inner {
  position: relative;
  margin: calc(28 * var(--u)) auto 0;
  width: calc(1447 * var(--u));
  height: calc(31 * var(--u));
}
.header a, .header button { pointer-events: auto; }
.header__logo { position: absolute; left: 0; top: calc(4.4 * var(--u)); width: calc(75.4 * var(--u)); }
.header__logo img { width: 100%; height: auto; }
.header__shop {
  position: absolute; left: 50%; top: calc(6.7 * var(--u));
  transform: translateX(-50%);
  font-family: var(--font-caps); font-weight: 500;
  font-size: calc(14 * var(--u)); line-height: 1;
  text-transform: uppercase; white-space: nowrap;
}
.header__icons { position: absolute; right: 0; top: calc(4.7 * var(--u)); display: flex; align-items: flex-start; gap: calc(6 * var(--u)); }
.header__icons img { height: auto; }
.i-search { width: calc(16 * var(--u)); }
.i-account { width: calc(17 * var(--u)); }
.i-bag { width: calc(13 * var(--u)); margin-top: calc(1 * var(--u)); }
.header__burger { display: none; }

/* ---------- Typo ---------- */
.big-title {
  font-family: var(--font-title); font-weight: 700;
  font-size: calc(150 * var(--u));
  line-height: .9;
  letter-spacing: -0.03em;
  white-space: pre;
  margin: 0;
}
.big-title--center { left: 50%; top: 50%; transform: translate(-50%, -54%); position: absolute; }
.dot { display: inline-block; vertical-align: baseline; height: auto; }
.dot--24 { width: calc(24 * var(--u)); margin-left: calc(8 * var(--u)); }
.dot--18 { width: calc(18 * var(--u)); margin-left: calc(6 * var(--u)); }

.cloud li {
  font-family: var(--font-mono); font-weight: 400;
  font-size: calc(10 * var(--u)); line-height: .9; letter-spacing: -0.03em;
  white-space: nowrap;
}
.cloud li::before {
  content: ""; position: absolute;
  left: calc(-13 * var(--u)); top: calc(1 * var(--u));
  width: calc(9 * var(--u)); height: calc(8 * var(--u));
  background: url("../assets/svg/bullet.svg") center / 100% 100% no-repeat;
}

.tagline { position: absolute; inset: 0; margin: 0; }
.tagline span {
  font-family: var(--font-mono); font-weight: 300;
  font-size: calc(12 * var(--u)); line-height: .9; letter-spacing: -0.03em;
  white-space: nowrap;
}

/* ---------- Carrousels en fondu ---------- */
.fade { position: absolute; inset: 0; }
.fade__item {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity var(--fade) ease;
}
.fade__item.is-active { opacity: 1; }
/* Visuel composé de 2 photos : plein cadre en desktop, empilé en mobile */
.split__half { position: relative; display: block; overflow: hidden; height: 100%; }
.split__half img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.split__half--b { display: none; }

/* ---------- 1. Hero ---------- */
.logo-tagline { position: absolute; height: auto; }
.hero__logo { left: calc(492 * var(--u)); top: calc(416 * var(--u)); width: calc(527 * var(--u)); }

/* ---------- 4. Product focus ---------- */
.focus__track {
  position: absolute; inset: 0;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.focus__track::-webkit-scrollbar { display: none; }
.focus__slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; cursor: pointer; }
.focus__media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background: #d9d6d6; }
.stage--half { left: 50%; }
.focus__title {
  position: absolute; left: calc(42 * var(--u)); top: calc(704 * var(--u));
  font-family: var(--font-title); font-weight: 700;
  font-size: calc(108 * var(--u)); line-height: .85; letter-spacing: -0.03em;
  white-space: nowrap;
}
.focus__text {
  position: absolute; left: calc(50 * var(--u)); top: calc(871 * var(--u));
  width: calc(434 * var(--u));
  font-family: var(--font-caps); font-weight: 400;
  font-size: calc(15 * var(--u)); line-height: .9;
  text-transform: uppercase;
}
.focus__nav {
  position: absolute; z-index: 2;
  left: calc(50% - 756 * var(--u) + 42 * var(--u));
  top: calc(50% - 491 * var(--u) + 120 * var(--u));
  display: flex; gap: calc(8 * var(--u));
}
.focus__nav button {
  width: calc(9 * var(--u)); height: calc(8 * var(--u));
  background: url("../assets/svg/bullet.svg") center / 100% 100% no-repeat;
  opacity: .35; transition: opacity .3s;
}
.focus__nav button.is-active { opacity: 1; background-color: var(--black); border-radius: 1px; }

/* ---------- 5. Gros plans ---------- */
.closeups__logo { left: calc(798 * var(--u)); top: calc(633 * var(--u)); width: calc(670 * var(--u)); }

/* ---------- 8. Rituels ---------- */
.rituals__bg { z-index: 0; }
.rituals__track {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 0;
  top: calc(50% - 491 * var(--u) + 109 * var(--u));
  display: flex; gap: calc(30 * var(--u));
  padding-left: max(0px, calc(50% - 756 * var(--u)));
  padding-right: calc(40 * var(--u));
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
}
.rituals__track::-webkit-scrollbar { display: none; }
.rituals__track.is-dragging { cursor: grabbing; }
.rituals__track.is-dragging .ritual-card { pointer-events: none; }
.ritual-card {
  position: relative; flex: 0 0 auto;
  width: calc(673 * var(--u)); height: calc(873 * var(--u));
  border: 1px solid transparent;
  transition: border-color .25s;
  background: #eef2f4;
}
.ritual-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.ritual-card__num, .ritual-card__name {
  position: absolute; left: 50%; transform: translateX(-50%);
  opacity: 0; transition: opacity .25s;
  white-space: nowrap;
}
.ritual-card__num {
  top: calc(559 * var(--u)); margin-left: calc(55 * var(--u));
  font-family: var(--font-mono); font-weight: 500;
  font-size: calc(14 * var(--u)); line-height: .85; letter-spacing: -0.03em;
}
.ritual-card__name {
  top: calc(570 * var(--u));
  font-family: var(--font-title); font-weight: 700;
  font-size: calc(108 * var(--u)); line-height: .9; letter-spacing: -0.03em;
}
.ritual-card:hover, .ritual-card:focus-visible { border-color: var(--black); outline: none; }
.ritual-card:hover span, .ritual-card:focus-visible span { opacity: 1; }

/* ---------- Fiche rituel ---------- */
.ritual {
  position: fixed; inset: 0; z-index: 40;
  background: var(--white);
  animation: fadeIn .35s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ritual__media { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; overflow: hidden; background: #eef2f4; }
.ritual__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.ritual__steps {
  position: absolute; left: calc(28 * var(--u)); top: calc(81 * var(--u));
  display: grid; gap: calc(15 * var(--u));
}
.ritual__steps button { display: flex; align-items: flex-start; gap: calc(7 * var(--u)); text-align: left; }
.ritual__steps img {
  width: calc(39 * var(--u)); height: calc(39 * var(--u));
  object-fit: cover; border: 1px solid transparent; border-radius: calc(3 * var(--u));
}
.ritual__steps .is-active img { border-color: var(--black); }
.ritual__steps strong {
  display: block; padding-top: calc(10 * var(--u));
  font-family: var(--font-title); font-weight: 700;
  font-size: calc(12 * var(--u)); line-height: .85; letter-spacing: -0.03em; text-transform: uppercase;
}
.ritual__steps em {
  display: block; margin-top: calc(2 * var(--u));
  font-family: var(--font-mono); font-style: normal; font-weight: 400;
  font-size: calc(12 * var(--u)); line-height: .85; letter-spacing: -0.03em;
}
.ritual__steps button[disabled] { cursor: default; }
.ritual__body { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; }
.ritual__title {
  position: absolute; left: calc(33 * var(--u)); top: calc(704 * var(--u));
  font-family: var(--font-title); font-weight: 700;
  font-size: calc(108 * var(--u)); line-height: .85; letter-spacing: -0.03em;
  white-space: nowrap;
}
.ritual__title::after {
  content: ""; display: inline-block;
  width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-left: calc(6 * var(--u));
  background: url("../assets/svg/ritual-mark.svg") center / contain no-repeat;
}
.ritual__tagline span { font-size: calc(14 * var(--u)); }
.ritual__text {
  position: absolute; left: calc(42 * var(--u)); top: calc(858 * var(--u));
  width: calc(475 * var(--u));
  font-size: calc(15 * var(--u)); line-height: .9; text-transform: uppercase;
}
/* Rituels avec l'image à droite (Calm, Night) */
.ritual.is-right .ritual__media { left: 50%; }
.ritual.is-right .ritual__steps { left: calc(50% + 28 * var(--u)); }
.ritual.is-right .ritual__body { left: 0; }

.close-btn { position: absolute; width: calc(39 * var(--u)); height: calc(39 * var(--u)); }
.close-btn img { position: absolute; inset: 0; width: 100%; height: 100%; }
.close-btn .close-btn__x { inset: 16.67%; width: 66.66%; height: 66.66%; }
.ritual__close { right: calc(35 * var(--u)); top: calc(81 * var(--u)); z-index: 2; }

/* ---------- 12. Fin ---------- */
.end__logo { position: absolute; left: calc(254 * var(--u)); top: calc(347 * var(--u)); width: calc(1003 * var(--u)); height: auto; }
.footer {
  position: absolute; left: 50%; top: calc(50% - 491 * var(--u) + 860 * var(--u));
  transform: translateX(calc(-756 * var(--u) + 448 * var(--u)));
  display: grid; grid-template-columns: repeat(4, calc(168 * var(--u)));
}
.footer h3 {
  position: relative; padding-left: calc(14 * var(--u));
  font-family: var(--font-caps); font-weight: 500;
  font-size: calc(18 * var(--u)); line-height: .9; text-transform: uppercase;
  margin-bottom: calc(5 * var(--u));
}
.footer h3::before {
  content: ""; position: absolute; left: 0; top: calc(3 * var(--u));
  width: calc(9 * var(--u)); height: calc(9 * var(--u));
  background: url("../assets/svg/footer-bullet.svg") center / 100% 100% no-repeat;
}
.footer li { font-size: calc(12 * var(--u)); line-height: 1; text-transform: uppercase; }
.footer a:hover { text-decoration: underline; }

/* ---------- Menu mobile ---------- */
.menu { position: fixed; inset: 0; z-index: 45; background: var(--white); }

/* =========================================================
   MOBILE (maquette 1080 x 1920)
   ========================================================= */
@media (max-width: 767px) {
  .sound { right: calc(40 * var(--m)); bottom: calc(60 * var(--m)); font-size: calc(30 * var(--m)); padding: calc(20 * var(--m)) 0; }
  :root { --m: calc(100vw / 1080); --u: var(--m); }

  .screen { height: auto; min-height: 100svh; }
  .stage { position: absolute; inset: 0; width: auto; height: auto; transform: none; }

  /* Header */
  .header__inner { margin: 0; width: 100%; height: calc(150 * var(--m)); }
  .header__logo { left: calc(46 * var(--m)); top: calc(40 * var(--m)); width: calc(190 * var(--m)); }
  .header__shop, .header__icons { display: none; }
  .header__burger {
    display: grid; align-content: space-between;
    position: absolute; right: calc(46 * var(--m)); top: calc(40 * var(--m));
    width: calc(54 * var(--m)); height: calc(36 * var(--m));
  }
  .header__burger span { display: block; height: max(1px, calc(3 * var(--m))); background: var(--black); }
  .menu__links { position: absolute; left: calc(46 * var(--m)); top: calc(290 * var(--m)); display: grid; gap: calc(70 * var(--m)); justify-items: start; }
  .menu__links a {
    font-family: var(--font-caps); font-weight: 400; text-transform: uppercase;
    font-size: calc(82 * var(--m)); line-height: 1;
    text-decoration: underline; text-decoration-thickness: max(1px, calc(3 * var(--m))); text-underline-offset: calc(12 * var(--m));
  }
  .menu__search img { width: calc(64 * var(--m)); height: auto; }
  .menu__close { right: calc(46 * var(--m)); bottom: calc(80 * var(--m)); width: calc(40 * var(--m)); height: calc(40 * var(--m)); }

  /* Visuels composés (2 photos côte à côte) : empilés en mobile */
  .hero, .diptych { height: 100svh; }
  .split { display: grid; grid-template-rows: 1fr 1fr; }
  .split .split__half--b { display: block; }
  .split__half img { width: 200%; max-width: none; }
  .split .split__half--b img { left: -100%; }
  .split--reverse .split__half--b { order: -1; }
  .hero__logo { left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(820 * var(--m)); }

  /* Textes */
  .text-screen { display: flex; align-items: center; }
  .text-screen .stage { position: relative; padding: calc(260 * var(--m)) calc(46 * var(--m)); }
  .big-title, .big-title--center {
    position: static; transform: none;
    font-size: calc(112 * var(--m));
    white-space: pre-line;
  }
  .big-title.big-title--mobile-right { text-align: right; }
  .cloud { display: none; }
  .dot--24 { width: calc(22 * var(--m)); }

  /* Product focus */
  .focus { height: 100svh; }
  .focus__media { left: 0; width: 100%; bottom: auto; height: calc(100% - 600 * var(--m)); }
  .stage--half { left: 0; }
  .focus__title { left: calc(46 * var(--m)); top: auto; bottom: calc(350 * var(--m)); font-size: calc(155 * var(--m)); }
  .focus .tagline { inset: auto 0 calc(300 * var(--m)) 0; height: calc(40 * var(--m)); }
  .focus .tagline span { position: static; display: inline-block; margin: 0 0 0 calc(46 * var(--m)); font-size: calc(22 * var(--m)); }
  .focus .tagline span:nth-child(even) { transform: translateY(calc(20 * var(--m))); }
  .focus__text { left: calc(46 * var(--m)); top: auto; bottom: calc(110 * var(--m)); width: calc(860 * var(--m)); font-size: calc(26 * var(--m)); }
  .focus__nav { left: calc(46 * var(--m)); top: auto; bottom: calc(50 * var(--m)); gap: calc(18 * var(--m)); }
  .focus__nav button { width: calc(22 * var(--m)); height: calc(20 * var(--m)); }

  /* Gros plans */
  .closeups { height: 100svh; }
  .closeups__logo { left: 50%; top: auto; bottom: calc(220 * var(--m)); transform: translateX(-50%); width: calc(900 * var(--m)); }

  /* Rituels : liste verticale */
  .rituals { height: auto; min-height: 0; }
  .rituals__bg { display: none; }
  .rituals__track {
    position: relative; top: 0;
    flex-direction: column; align-items: center;
    gap: calc(19 * var(--m));
    padding: calc(180 * var(--m)) 0 calc(120 * var(--m));
    overflow: visible; cursor: default;
  }
  .ritual-card { width: calc(403 * var(--m)); height: calc(521 * var(--m)); border-color: #b9b9b9; }
  .ritual-card span { opacity: 1; }
  .ritual-card__name { top: calc(395 * var(--m)); font-size: calc(58 * var(--m)); }
  .ritual-card__num { top: calc(385 * var(--m)); margin-left: calc(40 * var(--m)); font-size: calc(10 * var(--m)); }

  /* Fiche rituel */
  .ritual { overflow-y: auto; }
  .ritual__media, .ritual.is-right .ritual__media { left: 0; width: 100%; bottom: auto; height: calc(100% - 560 * var(--m)); }
  .ritual__steps, .ritual.is-right .ritual__steps { left: calc(46 * var(--m)); top: calc(650 * var(--m)); gap: calc(19 * var(--m)); }
  .ritual__steps img { width: calc(150 * var(--m)); height: calc(150 * var(--m)); border-radius: calc(8 * var(--m)); border-color: rgba(0,0,0,.15); }
  .ritual__steps strong { font-size: calc(24 * var(--m)); padding-top: calc(55 * var(--m)); }
  .ritual__steps em { font-size: calc(24 * var(--m)); }
  .ritual__body, .ritual.is-right .ritual__body { left: 0; width: 100%; top: auto; height: 30%; }
  .ritual__title { left: calc(46 * var(--m)); top: auto; bottom: calc(260 * var(--m)); font-size: calc(155 * var(--m)); }
  .ritual__title::after { width: calc(22 * var(--m)); height: calc(22 * var(--m)); }
  .ritual__tagline { inset: auto 0 calc(205 * var(--m)) 0; height: calc(40 * var(--m)); }
  .ritual__tagline span { position: static; display: inline-block; margin-left: calc(46 * var(--m)); font-size: calc(20 * var(--m)); }
  .ritual__tagline span:nth-child(even) { transform: translateY(calc(20 * var(--m))); }
  .ritual__text { left: calc(46 * var(--m)); top: auto; bottom: calc(70 * var(--m)); width: calc(860 * var(--m)); font-size: calc(26 * var(--m)); }
  .ritual__close { right: calc(46 * var(--m)); top: auto; bottom: calc(70 * var(--m)); position: fixed; width: calc(40 * var(--m)); height: calc(40 * var(--m)); }

  /* Fin */
  .end { display: flex; flex-direction: column; justify-content: space-between; height: 100svh; padding: calc(700 * var(--m)) calc(40 * var(--m)) calc(80 * var(--m)); }
  .end .stage { position: relative; }
  .end__logo { position: static; width: 100%; }
  .footer { position: static; transform: none; grid-template-columns: repeat(4, 1fr); gap: calc(20 * var(--m)); }
  .footer h3 { font-size: calc(24 * var(--m)); padding-left: calc(20 * var(--m)); }
  .footer h3::before { width: calc(14 * var(--m)); height: calc(14 * var(--m)); top: calc(2 * var(--m)); }
  .footer li { font-size: calc(17 * var(--m)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade__item, .ritual { transition: none; animation: none; }
}