/**------- SALDEA site.css v3 - luxe -------
  Echelle : 1u = min(100vw/1920, 100vh/1080) -> la scene remplit l'ecran,
  le socle touche TOUJOURS le bas de fenetre (composition ancree en bas).
  Fond, lumiere, anneau, ombre : 100% code. Images : fichiers client verbatim.
  Langage : luxe sobre - hairlines or, tracking genereux, easing veloute. */
:root {
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  --t: max(var(--u), 0.88px);   /* typo : ne descend jamais sous 88% */
  --gold: #8b703b;
  --gold-text: #cdb98f;
  --gold-bright: #d9cba8;
  --gold-rock: #b39355;
  --ink: #e9e4da;
  --muted: #b9b4ac;
  --line: #5c564c;
  --hairline: rgba(196, 180, 156, 0.35);
  --serif: 'Footlight MT', 'Footlight MT Light', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.5s; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: #0f0f11;
  min-height: 100vh;
  overflow-x: hidden;
  animation: pagein 0.9s var(--ease);
}
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse calc(var(--u)*560) calc(var(--u)*420) at 50% 58%,
      rgba(150, 96, 48, 0.28), rgba(150, 96, 48, 0) 100%),
    radial-gradient(ellipse calc(var(--u)*1050) calc(var(--u)*780) at 50% 62%,
      rgba(96, 62, 34, 0.24), rgba(96, 62, 34, 0) 100%),
    radial-gradient(ellipse calc(var(--u)*1650) calc(var(--u)*1200) at 50% 64%,
      rgba(52, 36, 24, 0.30), rgba(52, 36, 24, 0) 100%),
    linear-gradient(180deg, #16120f 0%, #121013 46%, #0f0f11 100%);
}
.hide { display: none !important; }
img { user-select: none; -webkit-user-drag: none; }

/**------- entree en scene : leve de rideau discret, cascade -------*/
.rise { opacity: 0; transform: translateY(calc(var(--u) * 14));
  animation: rise 0.9s var(--ease) forwards; }
.rise.d1 { animation-delay: 0.08s; } .rise.d2 { animation-delay: 0.18s; }
.rise.d3 { animation-delay: 0.28s; } .rise.d4 { animation-delay: 0.38s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/**------- barre du haut : AUCUNE bande, flotte sur le fond -------*/
.topbar { position: relative; z-index: 20; background: transparent; }
.tbar-in {
  width: calc(var(--u) * 1920); margin: 0 auto;
  height: calc(var(--u) * 110);
  display: flex; align-items: center;
  padding: 0 calc(var(--u) * 35) 0 calc(var(--u) * 48);
}
.brand img { height: calc(var(--u) * 30); display: block;
  transition: opacity 0.3s var(--ease); }
.brand:hover img { opacity: 0.8; }
.mainnav { margin-left: auto; display: flex; gap: calc(var(--u) * 58); }
.mainnav a {
  position: relative;
  font-size: calc(var(--t) * 19); color: var(--muted);
  letter-spacing: calc(var(--u) * 1);
  text-decoration: none; padding-bottom: calc(var(--u) * 8);
  transition: color 0.35s var(--ease);
}
.mainnav a::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 0; height: calc(var(--u) * 2); transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #dcc084, #b6944e, #dcc084, transparent);
  transition: width 0.45s var(--ease);
}
.mainnav a.on { color: #fff; }
.mainnav a.on::after, .mainnav a:hover::after { width: 100%; }
.mainnav a:hover { color: #fff; }
.topactions { display: flex; gap: calc(var(--u) * 14); margin-left: calc(var(--u) * 55); }
.iconbtn {
  position: relative;
  width: calc(var(--u) * 44); height: calc(var(--u) * 44);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(160, 152, 138, 0.35);
  border-radius: calc(var(--u) * 4); cursor: pointer;
  color: var(--ink); text-decoration: none;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.iconbtn img { width: calc(var(--u) * 20); height: calc(var(--u) * 20);
  filter: brightness(0) invert(0.88); }
.iconbtn:hover { border-color: var(--gold-text); transform: translateY(calc(var(--u) * -1)); }
.langbtn { font-size: calc(var(--t) * 17); color: var(--ink); }
.badge-count {
  position: absolute; top: calc(var(--u) * -8); right: calc(var(--u) * -8);
  min-width: calc(var(--u) * 20); height: calc(var(--u) * 20);
  padding: 0 calc(var(--u) * 4);
  background: linear-gradient(160deg, #e6c264, #b6944e 55%, #96793c); color: #1a1508;
  font-size: calc(var(--t) * 13); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/**------- scene boutique : remplit la fenetre, ancree au bas -------*/
.stage {
  position: relative; overflow: hidden;
  width: calc(var(--u) * 1920);
  height: calc(100vh - var(--u) * 110);
  margin: 0 auto;
  transform-origin: left bottom;
  transition: transform 0.55s var(--ease);
}
body.cart-open .stage, body.cart-open .pagewrap { transform: scale(0.775); }

.hero-left { position: absolute; left: calc(var(--u) * 48); top: calc(var(--u) * 128); width: calc(var(--u) * 400); }
.hero-left h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: calc(var(--t) * 38); letter-spacing: calc(var(--u) * 4);
  color: var(--gold-text);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.pdesc {
  margin-top: calc(var(--u) * 32);
  font-family: var(--serif); font-size: calc(var(--t) * 20);
  line-height: 1.6; color: #d5cec2;
  transition: opacity 0.35s var(--ease) 0.05s, transform 0.35s var(--ease) 0.05s;
}
.swapping h1, .swapping .pdesc, .swapping .pval {
  opacity: 0; transform: translateY(calc(var(--u) * 8));
}
.badge {
  margin-top: calc(var(--u) * 20); display: inline-block;
  border: 1px solid var(--gold-rock); color: var(--gold-bright);
  font-size: calc(var(--t) * 12); letter-spacing: calc(var(--u) * 4);
  padding: calc(var(--u) * 6) calc(var(--u) * 14);
}
.prix { margin-top: calc(var(--u) * 54); }
.pval { font-family: var(--serif); font-size: calc(var(--t) * 32); color: var(--gold-bright);
  transition: opacity 0.35s var(--ease) 0.1s, transform 0.35s var(--ease) 0.1s; display: inline-block; }
.chaque { font-size: calc(var(--t) * 13); color: var(--muted); margin-left: calc(var(--u) * 4); }
.achat { margin-top: calc(var(--u) * 48); display: flex; align-items: center; gap: calc(var(--u) * 14); }
.qlabel { font-family: var(--serif); font-size: calc(var(--t) * 24); color: var(--ink); }
.qinput {
  width: calc(var(--u) * 62); height: calc(var(--u) * 46);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  color: var(--ink); text-align: center; font-size: calc(var(--t) * 20);
  border-radius: calc(var(--u) * 3);
  transition: border-color 0.3s var(--ease);
}
.qinput:focus { outline: none; border-color: var(--gold-text); }
.qinput::-webkit-outer-spin-button, .qinput::-webkit-inner-spin-button { -webkit-appearance: none; }
.qinput[type=number] { -moz-appearance: textfield; appearance: textfield; }
.goldbtn {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(115deg, rgba(255, 246, 220, 0.05) 0, rgba(255, 246, 220, 0.05) 1px, rgba(20, 12, 2, 0.05) 1px, rgba(20, 12, 2, 0.05) 2px, transparent 2px, transparent 4px),
    linear-gradient(180deg, #b6944e 0%, #97783e 40%, #83672f 66%, #a5864a 100%);
  color: #f6eed6; border: 0; cursor: pointer;
  font-size: calc(var(--t) * 16); letter-spacing: calc(var(--u) * 4);
  padding: calc(var(--u) * 13) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 2); font-family: var(--serif);
  transition: filter 0.35s var(--ease), transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.goldbtn::after {
  content: ''; position: absolute; top: 0; left: -70%;
  width: 45%; height: 100%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 244, 214, 0.22), transparent);
  transition: left 0.6s var(--ease);
}
.goldbtn:hover { filter: brightness(1.1);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 26) rgba(139, 112, 59, 0.35); }
.goldbtn:hover::after { left: 125%; }
.goldbtn:disabled { opacity: 0.5; cursor: default; }

/**------- centre : tout ancre au BAS (le socle touche toujours la fenetre) */
.hero-center { position: absolute; inset: 0; pointer-events: none; }
.hero-center::before {
  content: ''; position: absolute;
  left: calc(var(--u) * (958 - 430)); bottom: calc(var(--u) * 160);
  width: calc(var(--u) * 860); height: calc(var(--u) * 660);
  background: radial-gradient(closest-side,
    rgba(168, 106, 52, 0.30), rgba(120, 76, 40, 0.14) 55%, rgba(120, 76, 40, 0) 100%);
  animation: breathe 7s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: 0.85; } to { opacity: 1; } }
.hero-center::after {
  content: ''; position: absolute;
  left: calc(var(--u) * (958 - 230)); bottom: calc(var(--u) * 300);
  width: calc(var(--u) * 460); height: calc(var(--u) * 120);
  background: radial-gradient(closest-side,
    rgba(222, 150, 74, 0.26), rgba(222, 150, 74, 0) 100%);
}
.ringsvg {
  position: absolute;
  left: calc(var(--u) * (958 - 280)); bottom: calc(var(--u) * 212);
  width: calc(var(--u) * 560); height: calc(var(--u) * 560);
}
.ringsvg path {
  fill: none; stroke: var(--hairline);
  stroke-width: 1.2; stroke-linecap: round;
}
.candle {
  position: absolute; left: calc(var(--u) * (958 - 162)); bottom: calc(var(--u) * 330);
  width: calc(var(--u) * 324); z-index: 2;
  transform: rotate(-8deg);
  filter: drop-shadow(0 calc(var(--u) * 22) calc(var(--u) * 32) rgba(0, 0, 0, 0.45));
  animation: lev 7s ease-in-out infinite alternate;
  transition: opacity 0.4s var(--ease);
}
@keyframes lev {
  from { transform: rotate(-8deg) translateY(0); }
  to   { transform: rotate(-8deg) translateY(calc(var(--u) * -10)); }
}
.rockwrap {
  position: absolute; left: calc(var(--u) * (958 - 250)); bottom: 0;
  width: calc(var(--u) * 500); z-index: 1;
}
.rockwrap .rock { width: 100%; display: block; }
.rockshadow {
  position: absolute; top: calc(var(--u) * 16); left: 50%;
  width: calc(var(--u) * 210); transform: translateX(-50%);
  mix-blend-mode: multiply; opacity: 0.85;
}
.rockname {
  position: absolute; top: calc(var(--u) * 158); left: 0; width: 100%;
  text-align: center; z-index: 3;
  font-family: var(--serif); font-size: calc(var(--u) * 38);
  letter-spacing: calc(var(--u) * 15); text-indent: calc(var(--u) * 15);
  color: rgba(179, 147, 85, 0.72);
  text-shadow: 0 calc(var(--u) * -1) calc(var(--u) * 1) rgba(0, 0, 0, 0.85),
    0 calc(var(--u) * 1) calc(var(--u) * 1) rgba(255, 232, 178, 0.14);
  transition: opacity 0.35s var(--ease);
}
.swapping-name { opacity: 0 !important; }
/**------- etiquettes olfactives : EXACTEMENT dans les troues de l'anneau
  (rayon 260u autour du centre bougie, angles -90/-150/-30/+150/+30) */
.wl { position: absolute; transform: translate(-50%, 50%); text-align: center; z-index: 2; }
.wl-nom { display: block; font-size: calc(var(--t) * 22); color: #f2ede4;
  letter-spacing: calc(var(--u) * 1); }
.wl-val { display: block; margin-top: calc(var(--u) * 3); font-family: var(--serif);
  font-size: calc(var(--t) * 20); color: var(--gold-bright); }
.wl-epice  { left: calc(var(--u) * 958);    bottom: calc(var(--u) * 752); }
.wl-boise  { left: calc(var(--u) * 732.5);  bottom: calc(var(--u) * 622); }
.wl-floral { left: calc(var(--u) * 1183.5); bottom: calc(var(--u) * 622); }
.wl-jour   { left: calc(var(--u) * 732.5);  bottom: calc(var(--u) * 362); }
.wl-nuit   { left: calc(var(--u) * 1183.5); bottom: calc(var(--u) * 362); }

/**------- rail droit -------*/
.rail { position: absolute; inset: 0; pointer-events: none; }
.rail > * { pointer-events: auto; }
.rubwrap { position: absolute; left: calc(var(--u) * 1630); top: calc(var(--u) * 20); }
.rubbtn {
  display: flex; align-items: center; justify-content: space-between;
  width: calc(var(--u) * 200); height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 16);
  background: linear-gradient(180deg, rgba(30, 25, 18, 0.9), rgba(19, 15, 11, 0.9));
  color: var(--gold-text); border: 1px solid rgba(196, 180, 156, 0.35);
  border-radius: calc(var(--u) * 2); cursor: pointer;
  font-family: var(--serif); font-size: calc(var(--t) * 16);
  letter-spacing: calc(var(--u) * 3);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.rubbtn:hover, .rubwrap.open .rubbtn {
  border-color: rgba(220, 192, 132, 0.75);
  box-shadow: 0 0 calc(var(--u) * 18) rgba(182, 148, 78, 0.18),
    inset 0 0 calc(var(--u) * 12) rgba(182, 148, 78, 0.08);
}
.chev {
  width: calc(var(--u) * 7); height: calc(var(--u) * 7);
  border-right: 1px solid var(--gold-text); border-bottom: 1px solid var(--gold-text);
  transform: rotate(45deg) translateY(calc(var(--u) * -1));
  transition: transform 0.35s var(--ease);
}
.rubwrap.open .chev { transform: rotate(225deg) translateY(calc(var(--u) * -2)); }
.rublist {
  position: absolute; top: calc(100% + var(--u) * 6); left: 0; right: 0;
  background: linear-gradient(180deg, #1b1610, #120e0a);
  border: 1px solid rgba(196, 180, 156, 0.3);
  border-radius: calc(var(--u) * 2); overflow: hidden; z-index: 25;
  box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 44) rgba(0, 0, 0, 0.55);
  animation: rubopen 0.32s var(--ease);
}
@keyframes rubopen { from { opacity: 0; transform: translateY(calc(var(--u) * -8)); } to { opacity: 1; transform: none; } }
.rubopt {
  display: block; width: 100%; text-align: left;
  padding: calc(var(--u) * 11) calc(var(--u) * 16);
  background: transparent; border: 0; cursor: pointer;
  color: #b9b0a0; font-family: var(--serif);
  font-size: calc(var(--t) * 15); letter-spacing: calc(var(--u) * 3);
  transition: color 0.25s var(--ease), background 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.rubopt + .rubopt { border-top: 1px solid rgba(196, 180, 156, 0.12); }
.rubopt:hover, .rubopt.sel {
  color: #ecdcae; padding-left: calc(var(--u) * 22);
  background: linear-gradient(90deg, rgba(182, 148, 78, 0.16), transparent 70%);
}
.rail-line {
  position: absolute; left: calc(var(--u) * 1555); top: calc(var(--u) * 100);
  width: calc(var(--u) * 17); height: calc(var(--u) * 560);
  background: transparent; cursor: pointer; touch-action: none;
}
.rail-line::before {
  content: ''; position: absolute; left: 50%; top: 0;
  width: 1px; height: 100%; background: rgba(122, 114, 100, 0.4);
}
.rail-cursor {
  position: absolute; left: calc(50% - var(--u) * 2); top: 0;
  width: calc(var(--u) * 4); height: calc(var(--u) * 30);
  background: linear-gradient(180deg, #e6c264, #a5864a); transition: top 0.12s linear;
}
.rail-list {
  position: absolute; left: calc(var(--u) * 1595); top: calc(var(--u) * 92);
  width: calc(var(--u) * 260); height: calc(var(--u) * 548);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * 38); overflow-y: auto; scrollbar-width: none;
}
.rail-list::-webkit-scrollbar { display: none; }
.thumb { background: none; border: 0; cursor: pointer; text-align: center; flex: none;
  transition: transform 0.35s var(--ease); }
.thumb:hover { transform: translateY(calc(var(--u) * -3)); }
.thumb img {
  width: calc(var(--u) * 116); display: block; margin: 0 auto;
  padding: calc(var(--u) * 8);
  background: radial-gradient(closest-side, rgba(160, 100, 48, 0.38), rgba(160, 100, 48, 0) 78%);
  opacity: 0.45; transition: opacity 0.3s var(--ease);
}
.thumb:hover img { opacity: 0.85; }
.thumb.on img { opacity: 1; }
.thumb .tname {
  display: block; margin-top: calc(var(--u) * 4);
  font-family: var(--serif); font-size: calc(var(--t) * 18);
  letter-spacing: calc(var(--u) * 3.5); color: #a08c62;
  transition: color 0.3s var(--ease);
}
.thumb.on .tname { color: #e8dcba; }
.searchwrap { position: absolute; left: calc(var(--u) * 1575); bottom: calc(var(--u) * 108); width: calc(var(--u) * 310); }
.searchinput {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--line); color: var(--ink);
  font-size: calc(var(--t) * 16); padding: calc(var(--u) * 8) calc(var(--u) * 30) calc(var(--u) * 8) 0;
  transition: border-color 0.3s var(--ease);
}
.searchinput::placeholder { color: #8f897f; }
.searchinput:focus { outline: none; border-bottom-color: var(--gold-text); }
.searchico { position: absolute; right: 0; bottom: calc(var(--u) * 10);
  width: calc(var(--u) * 17); filter: brightness(0) invert(0.8); }

/**------- reseaux -------*/
.socials {
  position: fixed;
  right: calc((100vw - var(--u) * 1920) / 2 + var(--u) * 35);
  bottom: calc(var(--u) * 22);
  display: flex; gap: calc(var(--u) * 12); z-index: 15;
}

/**------- pages Nous / Contact -------*/
.pagewrap { position: relative; width: calc(var(--u) * 1920); margin: 0 auto;
  min-height: calc(100vh - var(--u) * 110);
  transform-origin: left bottom; transition: transform 0.55s var(--ease); }
/* le texte commence AU niveau du haut de la photo et remplit EXACTEMENT
   sa hauteur (photo 852x1104 -> 568u de large = 736u de haut) */
.nouswrap { display: flex; align-items: flex-start; gap: calc(var(--u) * 46);
  padding: calc(var(--u) * 60) calc(var(--u) * 80) 0 calc(var(--u) * 48); }
.nous-photo img { width: calc(var(--u) * 568); display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect; }
.nous-texte {
  flex: 1; max-width: calc(var(--u) * 1180);
  height: calc(var(--u) * 736);
  display: flex; flex-direction: column; justify-content: space-between;
}
.nous-texte h1 { font-size: calc(var(--t) * 33); font-weight: 700;
  color: #f5f1e8; margin: 0; line-height: 1; }
.nous-texte p { font-family: var(--serif); font-size: calc(var(--t) * 20);
  line-height: 1.5; color: #ddd6ca; margin: 0; text-align: justify; }

.contactwrap { padding: calc(var(--u) * 150) 0 0 calc(var(--u) * 55); }
.contact-form { width: calc(var(--u) * 780); }
.cline input {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: calc(var(--t) * 18); font-family: var(--sans);
  padding: calc(var(--u) * 7) 0; margin-bottom: calc(var(--u) * 40);
  transition: border-color 0.3s var(--ease);
}
.cline input::placeholder { color: #9a938a; }
.cline input:focus { outline: none; border-bottom-color: var(--gold-text); }
.cline:nth-child(1) input { width: calc(var(--u) * 240); }
.cline:nth-child(2) input { width: calc(var(--u) * 400); }
.clabel { display: block; font-size: calc(var(--t) * 16); color: #a89f92;
  letter-spacing: calc(var(--u) * 1); margin-bottom: calc(var(--u) * 12); }
.contact-form textarea {
  width: 100%; height: calc(var(--u) * 350);
  background: linear-gradient(135deg, rgba(244, 240, 233, 0.78), rgba(203, 196, 185, 0.55));
  border: 0; border-radius: calc(var(--u) * 6);
  padding: calc(var(--u) * 16); font-size: calc(var(--t) * 16);
  color: #2a261f; font-family: var(--sans); resize: none;
  transition: box-shadow 0.3s var(--ease);
}
.contact-form textarea:focus { outline: none;
  box-shadow: 0 0 0 1px var(--gold-text); }
.contact-form .goldbtn { margin-top: calc(var(--u) * 24);
  font-size: calc(var(--t) * 14); padding: calc(var(--u) * 11) calc(var(--u) * 24); }
.cmsg { margin-top: calc(var(--u) * 14); color: #9fd49f; font-size: calc(var(--t) * 15); }
.hp { position: absolute; left: -6000px; opacity: 0; }
.contact-sep {
  position: absolute; left: calc(var(--u) * 1100); top: calc(var(--u) * 252);
  width: 1px; height: calc(var(--u) * 600); background: rgba(122, 114, 100, 0.35);
}
.contact-infos { position: absolute; left: calc(var(--u) * 1128); top: calc(var(--u) * 252);
  width: calc(var(--u) * 620); }
.contact-infos h2 { font-family: var(--serif); font-size: calc(var(--t) * 22);
  font-weight: 500; letter-spacing: calc(var(--u) * 2); color: #e5ddcc;
  margin-bottom: calc(var(--u) * 18); }
.cmap { width: calc(var(--u) * 600); height: calc(var(--u) * 377);
  display: block; border-radius: calc(var(--u) * 3);
  box-shadow: 0 0 0 1px rgba(196, 180, 156, 0.18),
    0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(0, 0, 0, 0.35);
  filter: sepia(0.5) saturate(0.8) brightness(0.93) contrast(0.96); }
.cmail { font-family: var(--serif); font-size: calc(var(--t) * 18);
  letter-spacing: calc(var(--u) * 0.5); color: #e5ddcc;
  margin-top: calc(var(--u) * 30); }
.ctel { font-family: var(--serif); font-size: calc(var(--t) * 16);
  color: #c9c2b6; margin-top: calc(var(--u) * 14); }
/**------- panier coulissant -------*/
.veil { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 30;
  backdrop-filter: blur(3px); animation: pagein 0.3s var(--ease); }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 31;
  width: calc(var(--u) * 430); background: #14100c;
  border-left: 1px solid rgba(196, 180, 156, 0.25); display: flex; flex-direction: column;
  box-shadow: calc(var(--u) * -24) 0 calc(var(--u) * 60) rgba(0, 0, 0, 0.45);
  animation: slidein 0.45s var(--ease);
}
@keyframes slidein { from { transform: translateX(102%); } to { transform: none; } }
.cart-head { display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--u) * 26) calc(var(--u) * 24); }
.cart-head h2 { font-family: var(--serif); font-weight: 500;
  font-size: calc(var(--t) * 26); color: var(--gold-text);
  letter-spacing: calc(var(--u) * 1); }
.xbtn { width: calc(var(--u) * 36); height: calc(var(--u) * 36);
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: calc(var(--u) * 3); cursor: pointer; font-size: calc(var(--t) * 15);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
.xbtn:hover { color: #fff; border-color: #fff; }
.cart-items { flex: 1; overflow-y: auto; padding: 0 calc(var(--u) * 24); }
.citem { display: flex; align-items: center; gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 14) 0; border-bottom: 1px solid rgba(92, 86, 76, 0.3); }
.citem img { width: calc(var(--u) * 46); }
.ci-nom { flex: 1; font-family: var(--serif); font-size: calc(var(--t) * 19);
  letter-spacing: calc(var(--u) * 2); color: var(--ink); }
.ci-prix { font-size: calc(var(--t) * 16); color: var(--gold-bright); }
.ci-qty { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.ci-qty button { width: calc(var(--u) * 26); height: calc(var(--u) * 26);
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  cursor: pointer; border-radius: calc(var(--u) * 2);
  transition: border-color 0.25s var(--ease); }
.ci-qty button:hover { border-color: var(--gold-text); }
.cart-empty { padding: calc(var(--u) * 30) 0; color: var(--muted);
  font-size: calc(var(--t) * 17); }
.cart-foot { padding: calc(var(--u) * 22) calc(var(--u) * 24) calc(var(--u) * 28);
  border-top: 1px solid #3a332a; }
.cart-line { display: flex; justify-content: space-between;
  font-size: calc(var(--t) * 18); margin-bottom: calc(var(--u) * 16); }
.cart-foot .goldbtn { width: 100%; }

/**------- modale paiement -------*/
.paywrap { position: fixed; inset: 0; z-index: 40;
  background: rgba(10, 8, 6, 0.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: pagein 0.35s var(--ease); }
.paypanel { position: relative; width: calc(var(--u) * 1320);
  height: calc(var(--u) * 830); background: #f2f0ec;
  border-radius: calc(var(--u) * 5);
  box-shadow: 0 calc(var(--u) * 34) calc(var(--u) * 90) rgba(0, 0, 0, 0.55);
  color: #23201b; animation: paymodal 0.5s var(--ease); }
@keyframes paymodal {
  from { opacity: 0; transform: translateY(calc(var(--u) * 22)) scale(0.985); }
  to { opacity: 1; transform: none; } }
.payx { position: absolute; top: calc(var(--u) * 24); right: calc(var(--u) * 26);
  border-color: #b5b0a6; color: #7a756c; z-index: 2; }
.paycols { display: flex; height: 100%; padding: calc(var(--u) * 56) calc(var(--u) * 60) calc(var(--u) * 96); gap: calc(var(--u) * 56); }
.payform { flex: 1; max-width: calc(var(--u) * 640); }
.payform h3 { font-family: var(--serif); font-size: calc(var(--t) * 30);
  font-weight: 500; margin-bottom: calc(var(--u) * 30); color: #3a352d;
  letter-spacing: calc(var(--u) * 1); }
.frow { margin-bottom: calc(var(--u) * 22); display: flex; gap: calc(var(--u) * 18); }
.frow input { flex: 1; background: transparent; border: 0;
  border-bottom: 1px solid #b5b0a6; font-size: calc(var(--t) * 18);
  padding: calc(var(--u) * 9) 0; color: #23201b; font-family: var(--sans);
  transition: border-color 0.3s var(--ease); }
.frow input:focus { outline: none; border-bottom-color: var(--gold); }
.frow input::placeholder { color: #8d887e; }
.frow.coupon { margin-top: calc(var(--u) * 34); align-items: center; }
.linkbtn { background: none; border: 0; color: var(--gold);
  font-size: calc(var(--t) * 16); cursor: pointer; letter-spacing: calc(var(--u) * 1);
  transition: opacity 0.25s var(--ease); }
.linkbtn:hover { text-decoration: underline; }
.payerr { color: #a33; font-size: calc(var(--t) * 15); }
.payrecap { width: calc(var(--u) * 400); border-left: 1px solid #d8d4cb;
  padding-left: calc(var(--u) * 46); }
.rrow { display: flex; align-items: center; gap: calc(var(--u) * 10);
  font-size: calc(var(--t) * 16); margin-bottom: calc(var(--u) * 12); color: #4a463f; }
.rrow img { width: calc(var(--u) * 30); }
.rline { display: flex; justify-content: space-between;
  font-size: calc(var(--t) * 17); margin-top: calc(var(--u) * 12); color: #4a463f; }
.rline.total { border-top: 1px solid #cac5bb; padding-top: calc(var(--u) * 14);
  margin-top: calc(var(--u) * 18); font-size: calc(var(--t) * 21);
  font-weight: 600; color: #23201b; }
.payfootbar { position: absolute; right: calc(var(--u) * 46); bottom: calc(var(--u) * 34); }
.payfootbar .goldbtn { font-size: calc(var(--t) * 19);
  padding: calc(var(--u) * 14) calc(var(--u) * 44); }
.payok { position: absolute; inset: 0; background: #f2f0ec;
  border-radius: calc(var(--u) * 5); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  animation: pagein 0.4s var(--ease); }
.payok h3 { font-family: var(--serif); font-size: calc(var(--t) * 40);
  color: var(--gold); margin-bottom: calc(var(--u) * 16); }
.payok p { font-size: calc(var(--t) * 20); color: #4a463f; }

/**------- popup d'ouverture -------*/
.popupwrap { position: fixed; inset: 0; z-index: 50;
  background: rgba(8, 6, 4, 0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: pagein 0.4s var(--ease); }
.popupcard { position: relative; width: calc(var(--u) * 580);
  background: #171310; border: 1px solid var(--gold-rock);
  border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 46);
  text-align: center;
  box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 70) rgba(0, 0, 0, 0.7);
  animation: paymodal 0.55s var(--ease); }
.popupcard .xbtn { position: absolute; top: calc(var(--u) * 14); right: calc(var(--u) * 14); }
.popupcard h3 { font-family: var(--serif); font-weight: 500;
  font-size: calc(var(--t) * 30); color: var(--gold-text);
  margin-bottom: calc(var(--u) * 14); letter-spacing: calc(var(--u) * 1); }
.popupcard p { font-size: calc(var(--t) * 17); line-height: 1.5;
  color: #d5cec2; margin-bottom: calc(var(--u) * 24); }
.popnl { display: flex; gap: calc(var(--u) * 12); }
.popnl input { flex: 1; background: rgba(255,255,255,0.05);
  border: 1px solid var(--line); border-radius: calc(var(--u) * 3);
  color: var(--ink); font-size: calc(var(--t) * 16);
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  transition: border-color 0.3s var(--ease); }
.popnl input:focus { outline: none; border-color: var(--gold-text); }
.popmsg { margin: calc(var(--u) * 16) 0 0; color: var(--gold-bright);
  font-size: calc(var(--t) * 17); }
.popupcard .linkbtn { margin-top: calc(var(--u) * 20); color: #8f897f; }
/**------- SALDEA mobile (portrait <= 860px) -------
  Meme identite que le PC : texte en tete, scene bougie + roue au centre,
  socle grave en pied, rail de creations en bande horizontale. */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }

  /* barre du haut : logo + actions, nav centree en dessous */
  .tbar-in { width: 100%; height: auto; flex-wrap: wrap;
    padding: 12px 16px 6px; }
  .brand img { height: 22px; }
  .topactions { margin-left: auto; gap: 10px; }
  .iconbtn { width: 34px; height: 34px; border-radius: 3px; }
  .iconbtn img { width: 16px; height: 16px; }
  .langbtn { font-size: 13px; }
  .badge-count { min-width: 16px; height: 16px; font-size: 11px;
    top: -6px; right: -6px; }
  .mainnav { order: 3; width: 100%; justify-content: center;
    gap: 34px; margin-top: 8px; }
  .mainnav a { font-size: 14px; padding-bottom: 6px; }
  .mainnav a::after { height: 1.5px; }

  /* scene boutique : flux vertical, socle en pied de scene */
  .stage { width: 100%; height: auto; overflow: visible;
    display: flex; flex-direction: column; }
  body.cart-open .stage, body.cart-open .pagewrap { transform: none; }
  .hero-left { position: static; width: 100%; padding: 12px 24px 0;
    text-align: center; }
  .hero-left h1 { font-size: 26px; letter-spacing: 4px; }
  .pdesc { font-size: 15px; line-height: 1.55; margin-top: 10px; }
  .badge { font-size: 10px; letter-spacing: 3px; margin-top: 12px;
    padding: 5px 10px; }
  .prix { margin-top: 14px; }
  .pval { font-size: 22px; } .chaque { font-size: 11px; }
  .achat { margin-top: 12px; justify-content: center; gap: 10px; }
  .qlabel { font-size: 17px; }
  .qinput { width: 46px; height: 38px; font-size: 16px; }
  .goldbtn { font-size: 13px; letter-spacing: 3px; padding: 10px 20px; }

  .hero-center { position: relative; inset: auto; width: 100%;
    height: 112vw; margin-top: 4px; }
  .hero-center::before { left: 50%; transform: translateX(-50%);
    bottom: 26vw; width: 96vw; height: 76vw; }
  .hero-center::after { left: 50%; transform: translateX(-50%);
    bottom: 42vw; width: 56vw; height: 12vw; }
  .ringsvg { left: 50%; margin-left: -36vw; bottom: 30vw;
    width: 72vw; height: 72vw; }
  .candle { left: 50%; margin-left: -21vw; bottom: 44vw; width: 42vw; }
  .rockwrap { left: 50%; margin-left: -32vw; bottom: 0; width: 64vw; }
  .rockname { font-size: 19px; letter-spacing: 8px; text-indent: 8px;
    top: 26%; }
  .wl-nom { font-size: 13px; letter-spacing: 0.5px; }
  .wl-val { font-size: 12px; margin-top: 1px; }
  .wl-epice  { left: 50vw;    bottom: 99vw; }
  .wl-boise  { left: 21.1vw;  bottom: 82.7vw; }
  .wl-floral { left: 78.9vw;  bottom: 82.7vw; }
  .wl-jour   { left: 21.1vw;  bottom: 49.3vw; }
  .wl-nuit   { left: 78.9vw;  bottom: 49.3vw; }

  /* rail : menu + recherche cote a cote, creations en bande horizontale */
  .rail { position: static; display: flex; flex-wrap: wrap;
    align-items: center; gap: 12px; padding: 20px 16px 8px; }
  .rubwrap { position: static; order: 1; width: 47%; }
  .rubbtn { width: 100%; height: 38px; font-size: 13px; letter-spacing: 2px; }
  .searchwrap { position: static; order: 2; width: 47%; margin-left: auto; }
  .searchinput { font-size: 14px; padding: 6px 26px 6px 0; }
  .searchico { width: 14px; bottom: 8px; }
  .rail-line { display: none; }
  .rail-list { position: static; order: 3; width: 100%; height: auto;
    flex-direction: row; justify-content: flex-start; align-items: flex-start;
    gap: 20px; overflow-x: auto; overflow-y: hidden;
    padding: 10px 4px 4px; scrollbar-width: none; }
  .thumb { flex: none; }
  .thumb img { width: 72px; padding: 6px; }
  .thumb .tname { font-size: 11px; letter-spacing: 2px; margin-top: 3px; }

  .socials { position: static; justify-content: center;
    padding: 10px 0 20px; }

  /* pages Nous / Contact : empilees */
  .pagewrap { width: 100%; min-height: 0; }
  .nouswrap { flex-direction: column; gap: 16px; padding: 16px 20px 8px; }
  .nous-photo img { width: 100%; }
  .nous-texte { height: auto; display: block; max-width: none; }
  .nous-texte h1 { font-size: 22px; margin-bottom: 12px; }
  .nous-texte p { font-size: 15px; line-height: 1.55; margin-bottom: 12px; }

  .contactwrap { padding: 22px 20px 10px; }
  .contact-form { width: 100%; }
  .cline input { width: 100% !important; font-size: 16px;
    margin-bottom: 24px; }
  .clabel { font-size: 14px; }
  .contact-form textarea { height: 190px; font-size: 15px; }
  .contact-sep { display: none; }
  .contact-infos { position: static; width: 100%; margin-top: 30px;
    padding-bottom: 8px; }
  .contact-infos h2 { font-size: 18px; margin-bottom: 12px; }
  .cmap { width: 100%; height: 62vw; }
  .cmail { font-size: 16px; margin-top: 18px; }
  .ctel { font-size: 14px; margin-top: 8px; }

  /* panier plein ecran */
  .cart-drawer { width: 100vw; border-left: 0; }
  .cart-head h2 { font-size: 20px; }
  .citem img { width: 38px; }
  .ci-nom { font-size: 15px; }

  /* paiement : plein ecran, une colonne, Payer fixe */
  .paypanel { width: 100vw; height: 100dvh; border-radius: 0;
    overflow-y: auto; }
  .paycols { flex-direction: column; height: auto; gap: 16px;
    padding: 24px 18px 110px; }
  .payform { max-width: none; }
  .payform h3 { font-size: 21px; margin-bottom: 16px; }
  .frow { gap: 12px; margin-bottom: 14px; }
  .frow.two { flex-direction: column; gap: 0; }
  .frow.two input { margin-bottom: 14px; }
  .frow input { font-size: 16px; }
  .payrecap { width: 100%; border-left: 0; padding-left: 0;
    border-top: 1px solid #d8d4cb; padding-top: 14px; }
  .payfootbar { position: fixed; right: 16px; bottom: 16px; }
  .payx { position: fixed; }
  .payok { position: fixed; inset: 0; }

  /* popup */
  .popupcard { width: 92vw; padding: 26px 18px; }
  .popupcard h3 { font-size: 22px; }
  .popupcard p { font-size: 14px; }
}

/**------- mobile v2 : carrousel des creations EN HAUT, gestes -------*/
@media (max-width: 860px) {
  .stage { flex-flow: row wrap; }
  .rail { display: contents; }
  .rail-list { order: 1; width: 100%; margin: 2px 0 0;
    padding: 10px 14px 4px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .thumb { scroll-snap-align: center; }
  .thumb img { transition: transform 0.2s var(--ease), opacity 0.3s var(--ease); }
  .thumb:active img { transform: scale(0.92); }
  .thumb.on img { opacity: 1; }
  .hero-left { order: 2; }
  .rubwrap { order: 3; width: 46%; margin: 10px 0 0 16px; }
  .searchwrap { order: 4; width: 46%; margin: 10px 16px 0 auto; }
  .hero-center { order: 5; margin-top: 12px; touch-action: pan-y; }
  .hero-center * { pointer-events: none; }
  .page-boutique .socials { display: none; }
  .goldbtn:active { transform: scale(0.96); }
  .iconbtn:active { transform: scale(0.94); }
  .rubopt { padding: 13px 16px; }
}

/**------- mobile v3 : PREMIER ECRAN = LA SCENE (comme le PC) -------
  Arrivee : titre + roue + bougie + socle colle au bas du 1er ecran.
  Le reste (description, prix, achat, carrousel, filtres) au defilement. */
@media (max-width: 860px) {
  .hero-left { display: contents; }
  .hero-left h1 { order: 1; width: 100%; text-align: center;
    font-size: 24px; letter-spacing: 5px; padding: 6px 20px 0; }
  .hero-center { order: 2; margin-top: 0;
    height: calc(100dvh - 158px); min-height: 430px; }
  .ringsvg { width: 88vw; height: 88vw; margin-left: -44vw; bottom: 30vw; }
  .candle { width: 50vw; margin-left: -25vw; bottom: 46vw; }
  .rockwrap { width: 72vw; margin-left: -36vw; }
  .rockname { font-size: 21px; letter-spacing: 9px; text-indent: 9px; top: 27%; }
  .hero-center::before { bottom: 24vw; width: 100vw; height: 96vw; }
  .hero-center::after { bottom: 46vw; width: 60vw; height: 13vw; }
  .wl-epice  { left: 50vw;    bottom: 114vw; }
  .wl-boise  { left: 14.8vw;  bottom: 94.3vw; }
  .wl-floral { left: 85.2vw;  bottom: 94.3vw; }
  .wl-jour   { left: 14.8vw;  bottom: 53.7vw; }
  .wl-nuit   { left: 85.2vw;  bottom: 53.7vw; }
  .pdesc { order: 3; width: 100%; text-align: center;
    padding: 16px 26px 0; margin-top: 0; }
  .badge { order: 4; margin: 12px auto 0; }
  .prix { order: 5; width: 100%; text-align: center; margin-top: 12px; }
  .achat { order: 6; width: 100%; margin: 12px 0 4px; }
  .rail-list { order: 7; margin-top: 10px; }
  .rubwrap { order: 8; }
  .searchwrap { order: 9; }
}

/**------- mobile v4 : scene compacte, zero vide, CTA visible ecran 1 -------*/
@media (max-width: 860px) {
  html, body { height: auto; }
  .hero-left h1 { padding-top: 2px; font-size: 22px; }
  .hero-center { height: 124vw; min-height: 0; }
  .pdesc { padding-top: 12px; font-size: 14px; line-height: 1.5;
    padding-left: 34px; padding-right: 34px; }
  .prix { margin-top: 8px; }
  .achat { margin-top: 8px; }
}

/**------- mobile v5 : REPLIQUE DE LA MAQUETTE mobile.png -------
  Burger or + logo / recherche + collection / bande carrousel /
  profil olfactif en colonne gauche le long d'un filet / bougie centrale /
  socle pleine largeur avec reseaux + droits. Menu = tiroir gauche. */
.burger { display: none; }
.copyline { position: fixed; left: 0; right: 0; bottom: 5px; text-align: center;
  font-size: 11px; color: rgba(185, 180, 172, 0.6); z-index: 14;
  pointer-events: none; }
@media (max-width: 860px) {
  body.page-boutique { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  body.page-boutique .stage { flex: 1; }

  /* barre 1 : burger or + logo a gauche, panier + langue a droite */
  .tbar-in { padding: 10px 14px 8px; }
  .burger { display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 40px; height: 40px; background: none; border: 0;
    cursor: pointer; margin-right: 10px; }
  .burger span { display: block; width: 24px; height: 3px;
    background: linear-gradient(90deg, #c9a13d, #a8843a); border-radius: 2px; }
  .brand img { height: 24px; }
  .mainnav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 45;
    width: 78vw; max-width: 340px; margin: 0;
    background: #14100c; border-right: 1px solid rgba(196, 180, 156, 0.25);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column; justify-content: flex-start;
    gap: 0; padding: 74px 0 0;
    transform: translateX(-105%);
    transition: transform 0.45s var(--ease); }
  body.nav-open .mainnav { transform: none; }
  .mainnav > a { width: auto; margin: 0 22px; padding: 18px 6px;
    font-family: var(--serif); font-size: 17px; letter-spacing: 4px;
    color: var(--gold-text); border-bottom: 1px solid rgba(196, 180, 156, 0.15); }
  .mainnav > a::after { display: none; }
  .mainnav > a.on { color: #f0e2bc; }

  /* barre 2 : recherche a gauche, collection a droite (comme la maquette) */
  .searchwrap { order: 1; width: 50%; margin: 6px 0 8px 14px;
    border: 1px solid var(--line); border-radius: 5px;
    padding: 9px 30px 9px 10px; }
  .searchinput { border-bottom: 0; padding: 0; font-size: 13px; }
  .searchico { right: 8px; bottom: 10px; }
  .rubwrap { order: 2; width: 34%; margin: 6px 14px 8px auto; }
  .rubbtn { height: 40px; font-size: 12px; letter-spacing: 2px; }

  /* bande carrousel : pleine largeur, inactives estompees */
  .rail-list { order: 3; margin: 0; padding: 10px 12px 8px;
    background: linear-gradient(180deg, rgba(8, 6, 5, 0.55), rgba(8, 6, 5, 0.25));
    gap: 22px; }
  .thumb img { width: 84px; padding: 4px; opacity: 0.5; }
  .thumb .tname { font-size: 13px; letter-spacing: 3px; color: #7d6c4e;
    margin-top: 2px; }
  .thumb.on img { opacity: 1; }
  .thumb.on .tname { color: #f3ead2; }

  /* scene : filet + profil olfactif en colonne gauche, bougie au centre */
  .hero-left h1 { display: none; }
  .pdesc { display: none; }
  .hero-center { order: 4; flex: 1; width: 100%; height: auto; min-height: 0;
    margin: 0;
    background: linear-gradient(180deg, rgba(122, 114, 100, 0.45), rgba(122, 114, 100, 0.45)) no-repeat 24px 4% / 1px 66%; }
  .ringsvg { display: none; }
  .hero-center::before { left: 50%; transform: translateX(-50%);
    top: 6%; bottom: auto; width: 120vw; height: 74%; }
  .hero-center::after { display: none; }
  .wl { position: absolute; transform: none; text-align: left;
    left: 34px; right: auto; bottom: auto; }
  .wl-nom { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
  .wl-val { font-size: 13px; margin-top: 2px; }
  .wl-epice  { left: 34px; top: 5%; }
  .wl-boise  { left: 34px; top: 19%; }
  .wl-floral { left: 34px; top: 33%; }
  .wl-jour   { left: 34px; top: 47%; }
  .wl-nuit   { left: 34px; top: 61%; }
  .candle { width: 46vw; left: 50%; margin-left: -21vw; top: 12%; bottom: auto;
    transform: none; animation: levmob 7s ease-in-out infinite alternate; }
  .badge { position: absolute; left: 34px; top: 73%; margin: 0; z-index: 3; }
  .prix { position: absolute; right: 18px; top: 26%; width: auto; margin: 0;
    text-align: right; z-index: 3; }
  .pval { font-size: 20px; }
  .achat { position: absolute; right: 18px; top: 34%; width: auto; margin: 0;
    gap: 8px; z-index: 3; }
  .qlabel { display: none; }
  .qinput { width: 42px; height: 36px; font-size: 15px; }
  .achat .goldbtn { font-size: 12px; letter-spacing: 2px; padding: 10px 16px; }

  /* socle pleine largeur, reseaux dedans, droits en pied */
  .rockwrap { left: 0; margin-left: 0; width: 100vw; bottom: 0; }
  .rockname { font-size: 26px; letter-spacing: 10px; text-indent: 10px;
    top: 24%; }
  .page-boutique .socials { display: flex; position: fixed; left: 50%;
    right: auto; transform: translateX(-50%); bottom: 30px; gap: 16px; }
  .page-boutique .copyline { display: block; position: fixed; left: 0;
    right: 0; bottom: 6px; text-align: center; font-size: 10px;
    color: rgba(185, 180, 172, 0.75); z-index: 16; }
}
@keyframes levmob { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/**------- mobile v5b : corrections de rangees flex -------*/
@media (max-width: 860px) {
  body.page-boutique .stage { flex: 1 1 auto; align-content: flex-start; }
  .searchwrap { position: relative; }
  .hero-center { flex: none; width: 100%;
    height: calc(100dvh - 272px); min-height: 330px; }
  .prix { position: fixed; right: 18px; top: 46dvh; }
  .achat { position: fixed; right: 18px; top: 52.5dvh; }
  .badge { position: fixed; left: 34px; top: 78dvh; }
}

/**------- mobile v5c : neutralise les offsets desktop herites -------*/
@media (max-width: 860px) {
  .searchwrap { left: 0; right: auto; top: auto; bottom: auto; }
  .wl-epice  { top: 4%; }
  .wl-boise  { top: 17%; }
  .wl-floral { top: 30%; }
  .wl-jour   { top: 43%; }
  .wl-nuit   { top: 56%; }
  .badge { left: auto; right: 18px; top: 60dvh; }
}

/**------- mobile v6 : composition ANCREE AU SOCLE, adaptative tous ecrans -----
  --m retrecit quand l'ecran manque de hauteur : la scene garde exactement
  la meme composition (bougie/etiquettes/prix au-dessus du socle) partout. */
@media (max-width: 860px) {
  body { --m: min(1vw, calc((100dvh - 272px - 64.7vw) / 80)); }
  .rockwrap { left: 0; margin-left: 0; width: 100vw; bottom: 0; }
  .candle {
    width: calc(var(--m) * 46);
    left: 50vw; margin-left: calc(var(--m) * -23);
    top: auto; bottom: calc(64.7vw + var(--m) * 6);
  }
  .wl { left: 30px; top: auto; }
  .wl-nuit   { bottom: calc(64.7vw + var(--m) * 4); }
  .wl-jour   { bottom: calc(64.7vw + var(--m) * 20); }
  .wl-floral { bottom: calc(64.7vw + var(--m) * 36); }
  .wl-boise  { bottom: calc(64.7vw + var(--m) * 52); }
  .wl-epice  { bottom: calc(64.7vw + var(--m) * 68); }
  .hero-center { background-position: 22px 4%; background-size: 1px calc(96% - 64.7vw); }
  .hero-center::before { top: auto; bottom: calc(64.7vw - var(--m) * 24);
    width: 120vw; height: calc(var(--m) * 105); }
  .prix  { top: auto; right: 16px; bottom: calc(64.7vw + var(--m) * 34); }
  .achat { top: auto; right: 16px; bottom: calc(64.7vw + var(--m) * 14); }
  .badge { top: auto; left: auto; right: 16px; bottom: calc(64.7vw + var(--m) * 54); }
}

/**------- mobile v6b : etiquettes adaptatives (petits ecrans) -------*/
@media (max-width: 860px) {
  .wl-nom { font-size: max(11px, calc(var(--m) * 4)); }
  .wl-val { font-size: max(9px, calc(var(--m) * 3.2)); }
}

/**------- bandeau cookies -------*/
.ckbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px;
  z-index: 70; display: flex; align-items: center; gap: 14px;
  background: #171310; border: 1px solid rgba(196, 180, 156, 0.35);
  border-radius: 4px; padding: 10px 16px; max-width: min(92vw, 560px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.ckbar p { font-size: 12.5px; color: #d5cec2; margin: 0; }
.ckbar .goldbtn { font-size: 11px; padding: 7px 14px; letter-spacing: 2px; }

/**------- mobile v7 : rocher -20%, centre, COLLE au bas (ancrage viewport),
  toute la pile descend avec lui -------*/
@media (max-width: 860px) {
  body { --m: min(1vw, calc((100dvh - 272px - 51.8vw) / 80)); }
  .rockwrap { position: fixed; left: 50%; margin-left: -40vw; width: 80vw;
    bottom: 0; }
  .rockname { font-size: 22px; letter-spacing: 8px; text-indent: 8px; top: 26%; }
  .candle { position: fixed; bottom: calc(51.8vw + var(--m) * 6); }
  .wl { position: fixed; left: 30px; }
  .wl-nuit   { bottom: calc(51.8vw + var(--m) * 4); }
  .wl-jour   { bottom: calc(51.8vw + var(--m) * 20); }
  .wl-floral { bottom: calc(51.8vw + var(--m) * 36); }
  .wl-boise  { bottom: calc(51.8vw + var(--m) * 52); }
  .wl-epice  { bottom: calc(51.8vw + var(--m) * 68); }
  .hero-center { background-size: 1px calc(96% - 51.8vw); }
  .hero-center::before { bottom: calc(51.8vw - var(--m) * 24); }
  .prix  { bottom: calc(51.8vw + var(--m) * 34); }
  .achat { bottom: calc(51.8vw + var(--m) * 14); }
  .badge { bottom: calc(51.8vw + var(--m) * 54); }
  .ckbar { bottom: calc(51.8vw + var(--m) * 78); }
}

/**------- popup selection de collections (cases a cocher, multi) -------*/
.rubpop { position: fixed; inset: 0; z-index: 65;
  background: rgba(8, 6, 4, 0.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: pagein 0.3s var(--ease); }
.rubcard { width: min(86vw, 340px); background: #171310;
  border: 1px solid var(--gold-rock); border-radius: 5px;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
  animation: paymodal 0.4s var(--ease); }
.rubcard h4 { font-family: var(--serif); font-weight: 500;
  font-size: 19px; letter-spacing: 3px; color: var(--gold-text);
  margin-bottom: 14px; }
.rubchk { display: flex; align-items: center; gap: 12px;
  padding: 11px 2px; cursor: pointer;
  border-bottom: 1px solid rgba(196, 180, 156, 0.12); }
.rubchk input { display: none; }
.rubchk .box { width: 17px; height: 17px; flex: none;
  border: 1px solid rgba(196, 180, 156, 0.55); border-radius: 3px;
  position: relative; transition: background 0.25s var(--ease); }
.rubchk input:checked + .box {
  background: linear-gradient(160deg, #e6c264, #b6944e 60%, #96793c);
  border-color: #dcc084; }
.rubchk input:checked + .box::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 9px;
  border-right: 2px solid #1a1508; border-bottom: 2px solid #1a1508;
  transform: rotate(42deg); }
.rubchk .lbl { font-family: var(--serif); font-size: 15px;
  letter-spacing: 2.5px; color: #d5cec2; }
.rubchk input:checked ~ .lbl { color: #f0e2bc; }
.rubcard .goldbtn { width: 100%; margin-top: 16px;
  font-size: 13px; padding: 11px 0; }

/**------- mobile v8 : descriptif sur le rocher (panneau blanc translucide) --*/
@media (max-width: 860px) {
  .pdesc {
    display: block; position: fixed; z-index: 3;
    left: 50%; transform: translateX(-50%);
    width: 68vw; bottom: 76px;
    margin: 0; padding: 8px 12px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    backdrop-filter: blur(4px);
    font-size: 11px; line-height: 1.45; text-align: center;
    color: #f2ede4; pointer-events: none;
  }
}

/**------- mobile v9 : TOUT homothetique (rocher inclus) via --k -------
  Meme visuel sur tous les ecrans mobiles, seul le facteur d'echelle change. */
@media (max-width: 860px) {
  body { --k: min(1vw, calc((100dvh - 272px) / 135)); --m: var(--k); }
  .rockwrap { width: calc(var(--k) * 80); margin-left: calc(var(--k) * -40); }
  .rockname { font-size: max(13px, calc(var(--k) * 5.6));
    letter-spacing: calc(var(--k) * 2); text-indent: calc(var(--k) * 2); }
  .candle { width: calc(var(--k) * 46); margin-left: calc(var(--k) * -23);
    bottom: calc(var(--k) * 57.8); }
  .wl-nuit   { bottom: calc(var(--k) * 55.8); }
  .wl-jour   { bottom: calc(var(--k) * 71.8); }
  .wl-floral { bottom: calc(var(--k) * 87.8); }
  .wl-boise  { bottom: calc(var(--k) * 103.8); }
  .wl-epice  { bottom: calc(var(--k) * 119.8); }
  .hero-center { background-size: 1px calc(96% - var(--k) * 51.8); }
  .hero-center::before { bottom: calc(var(--k) * 27.8);
    width: calc(var(--k) * 120); height: calc(var(--k) * 105); }
  .prix  { bottom: calc(var(--k) * 85.8); }
  .achat { bottom: calc(var(--k) * 65.8); }
  .badge { bottom: calc(var(--k) * 105.8); }
  .ckbar { bottom: calc(var(--k) * 130); }
  .pdesc { width: calc(var(--k) * 68); font-size: max(9px, calc(var(--k) * 2.9));
    bottom: calc(44px + var(--k) * 6); }
}

/**------- mobile v9b : panneau descriptif centre (marge, pas transform) -----*/
@media (max-width: 860px) {
  .pdesc {
    left: 50%; margin-left: calc(var(--k) * -34);
    transform: none; animation: none; opacity: 1;
    bottom: max(58px, calc(var(--k) * 16));
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/**------- ombre du socle EN CODE : centree sur l'ombre actuelle, formes en %
  du rocher -> proportionnelle a toutes les tailles. Active des maintenant ;
  remplace l'ombre gravee quand rock.png sans ombre sera depose. -------*/
.rockwrap::after {
  content: ''; position: absolute;
  left: 50%; top: 13.2%;
  width: 44%; height: 15.5%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/**------- mobile v9c : gravure remontee, panneau sous la gravure -------*/
@media (max-width: 860px) {
  .rockname { top: 17%; }
  .pdesc { bottom: 62px; font-size: max(9px, calc(var(--k) * 2.6));
    -webkit-line-clamp: 4; }
}

/**------- v10 : ombre recalee (mesure y 29%), barre d'achat en bas (mobile),
  ligne de profil exacte du haut d'Epice au bas de Nuit -------*/
.rockwrap::after { top: 29%; width: 48%; height: 13%; }
.profline { display: none; }
@media (max-width: 860px) {
  .hero-center { background: none; }
  .profline { display: block; position: fixed; z-index: 2;
    left: 22px; width: 1px;
    bottom: calc(var(--k) * 55.8);
    height: calc(var(--k) * 64 + 30px);
    background: rgba(122, 114, 100, 0.45); }
  .rockname { top: 8%; }
  .pdesc { bottom: 100px; font-size: max(9px, calc(var(--k) * 2.45));
    -webkit-line-clamp: 3; }
  .prix { right: auto; left: calc(50% - var(--k) * 38); bottom: 56px;
    text-align: left; }
  .pval { font-size: 17px; }
  .chaque { font-size: 10px; }
  .achat { right: calc(50% - var(--k) * 38); bottom: 50px; }
  .qinput { width: 38px; height: 32px; font-size: 14px; }
  .achat .goldbtn { font-size: 11px; padding: 8px 13px; }
  .badge { right: auto; left: 30px; bottom: calc(var(--k) * 132); top: auto; }
  .page-boutique .socials { bottom: 16px; }
  .page-boutique .socials .iconbtn { width: 30px; height: 30px; }
  .copyline { bottom: 2px; font-size: 9.5px; }
}

/**------- v11 : tete du tiroir (burger+logo position exacte), reseaux au
  pied du tiroir, rocher desencombre -------*/
.navhead, .navsocials { display: none; }
@media (max-width: 860px) {
  .navhead { display: flex; align-items: center;
    position: absolute; top: 10px; left: 14px; }
  .navhead .burger { margin-right: 10px; }
  .navlogo { height: 24px; }
  .navsocials { display: flex; gap: 12px;
    margin: auto 22px 26px; padding: 24px 6px 0; }
  .page-boutique .socials { display: none; }
  .prix { bottom: 46px; }
  .achat { bottom: 40px; }
  .pdesc { bottom: 96px; }
}

/**------- v12 : descriptif retire de la version mobile (demande Redha) -----*/
@media (max-width: 860px) {
  .pdesc { display: none !important; }
}

/**------- popup descriptif de la bougie (tap mobile) -------*/
.descpop { position: fixed; inset: 0; z-index: 66;
  background: rgba(8, 6, 4, 0.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: pagein 0.3s var(--ease); }
.desccard { position: relative; width: min(86vw, 360px);
  background: #171310; border: 1px solid var(--gold-rock);
  border-radius: 5px; padding: 26px 22px 22px; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
  animation: paymodal 0.4s var(--ease); }
.desccard .xbtn { position: absolute; top: 10px; right: 10px; }
.desccard h4 { font-family: var(--serif); font-weight: 500;
  font-size: 22px; letter-spacing: 5px; color: var(--gold-text);
  margin-bottom: 12px; }
.desccard p { font-family: var(--serif); font-size: 15px; line-height: 1.6;
  color: #ddd6ca; }
@media (max-width: 860px) {
  .hero-center .candle { pointer-events: auto; cursor: pointer; }
}

/**------- v13 : panier mobile au gabarit du menu (78vw, pas plein ecran) ---*/
@media (max-width: 860px) {
  .cart-drawer { width: 78vw; max-width: 340px;
    border-left: 1px solid rgba(196, 180, 156, 0.25); }
}

/**------- v13b : rangee panier compacte a 78vw -------*/
@media (max-width: 860px) {
  .cart-head { padding: 18px 16px; }
  .cart-items { padding: 0 14px; }
  .citem { gap: 8px; }
  .citem img { width: 30px; }
  .ci-nom { font-size: 13px; letter-spacing: 1px; }
  .ci-qty { gap: 5px; }
  .ci-qty button { width: 22px; height: 22px; font-size: 12px; }
  .ci-prix { font-size: 12.5px; }
  .cart-foot { padding: 14px 16px 18px; }
}

/**------- v14 : gravure ancree en bas de la FACE AVANT du rocher (mobile) --*/
@media (max-width: 860px) {
  .rockname { top: 56%; }
}

/**------- v15 : titre remonte, badge centre sur le rocher, tiroirs 64vw,
  boutons sociaux 44px carres nets espacement exact -------*/
.desccard .descbadge { margin: 0 auto 12px; }
@media (max-width: 860px) {
  .rockname { top: 48%; }
  .badge { left: 50%; right: auto; top: auto; margin: 0;
    transform: translateX(-50%); bottom: calc(var(--k) * 35); z-index: 3; }
  .mainnav { width: 64vw; max-width: 280px; }
  .cart-drawer { width: 64vw; max-width: 280px; }
  .cart-foot .goldbtn { font-size: 11px; letter-spacing: 1.5px; padding: 11px 0; }
  .navsocials { gap: 14px; margin-left: 22px; }
  .navsocials .iconbtn { width: 44px; height: 44px; border-radius: 0; }
  .navsocials .iconbtn img { width: 20px; height: 20px; }
}

/**------- v15b : boutons sociaux du tiroir - carres 44, espacement exact ---*/
@media (max-width: 860px) {
  .mainnav .navsocials .iconbtn { width: 44px; height: 44px;
    margin: 0; padding: 0; border-radius: 0;
    border-bottom: 1px solid rgba(160, 152, 138, 0.35); }
  .mainnav .navsocials .iconbtn img { width: 20px; height: 20px; }
}

/**------- ombre glissante sur le rocher -------
  Voile sombre qui balaie la pierre comme un passage de nuage.
  Masque = la silhouette du rocher lui-meme (jamais d'ombre hors pierre).
  Le degrade interne glisse sous le masque fixe (GPU, transform only). */
.rocksheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask-image: url('/img/socle.png');
  mask-image: url('/img/socle.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  overflow: hidden;
}
.rocksheen::before {
  content: ''; position: absolute;
  top: -12%; bottom: -12%; left: -85%; width: 72%;
  background: linear-gradient(100deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.26) 34%,
    rgba(0, 0, 0, 0.32) 50%,
    rgba(0, 0, 0, 0.26) 66%,
    rgba(0, 0, 0, 0) 100%);
  transform: translateX(0) skewX(-12deg);
  animation: rocksweep 11s infinite;
}
@keyframes rocksweep {
  0%       { transform: translateX(0) skewX(-12deg);
             animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  58%, 100% { transform: translateX(365%) skewX(-12deg); }
}