/* Galerie Mahoraise — feuille de style principale
   Thème sombre « galerie » : noir chaud, ivoire, sable doré, rouge cœur du logo. */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --bg: #0c0b0a;
  --bg-2: #12100e;
  --surface: #191613;
  --surface-2: #221e1a;
  --surface-3: #2c2722;
  --line: rgba(243, 237, 228, .10);
  --line-2: rgba(243, 237, 228, .18);
  --text: #f3ede4;
  --muted: #b3a99c;
  --faint: #8c8378;
  --gold: #d4b27c;
  --gold-2: #ecd3a5;
  --heart: #e3262f;
  --heart-2: #ff4d55;
  --ok: #8fd19e;
  --warn: #f0c070;
  --wa: #25d366;
  --scene-white: #f2eee8;

  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1440px;
  --sec: clamp(4rem, 9vw, 8rem);
  --hdr-h: 72px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
dialog { color: inherit; }
::selection { background: var(--gold); color: #1a140c; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 1000; background: var(--text); color: var(--bg); padding: .7rem 1.2rem; border-radius: 999px; font-weight: 700; transition: top .2s; }
.skip:focus { top: 16px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
sup { font-size: .65em; line-height: 0; }
kbd { font: 600 .7rem/1 var(--font-sans); padding: .3em .5em; border: 1px solid var(--line-2); border-radius: 6px; color: var(--muted); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .25s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease-out) both; }
::view-transition-group(hero-img) { animation-duration: .5s; animation-timing-function: var(--ease-out); }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ------------------------------------------------------------ typographie */
.display {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; line-height: .98;
  font-size: clamp(3rem, 8.5vw, 7.5rem);
}
.display em, .h2 em { font-style: italic; color: var(--gold-2); }
.display--md { font-size: clamp(2.6rem, 6vw, 5rem); }
.display--sm { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -.005em; }
.eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow--light { color: var(--gold-2); }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line-2); padding-bottom: .2rem; transition: gap .3s var(--ease), border-color .3s; }
.link-arrow:hover { gap: .8rem; border-color: var(--gold); }
.linklike { text-decoration: underline; text-underline-offset: .2em; color: inherit; font-size: inherit; }

/* ------------------------------------------------------------ boutons */
.btn {
  --b-bg: var(--surface-2); --b-fg: var(--text); --b-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .75rem 1.4rem; border-radius: 999px; border: 1px solid var(--b-bd);
  background: var(--b-bg); color: var(--b-fg); font-weight: 650; font-size: .95rem; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; position: relative; isolation: isolate; overflow: hidden;
  transition: transform .35s var(--ease), background-color .3s, border-color .3s, box-shadow .3s, color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn--primary { --b-bg: var(--text); --b-fg: #14110e; }
.btn--primary:hover { --b-bg: #fff; box-shadow: 0 12px 40px -12px rgba(243, 237, 228, .45); }
.btn--ghost { --b-bg: transparent; --b-bd: var(--line-2); }
.btn--ghost:hover { --b-bd: var(--text); }
.btn--glass { --b-bg: rgba(255, 255, 255, .1); --b-bd: rgba(255, 255, 255, .22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn--glass:hover { --b-bg: rgba(255, 255, 255, .18); }
.btn--heart { --b-bg: var(--heart); --b-fg: #fff; }
.btn--heart:hover { --b-bg: var(--heart-2); box-shadow: 0 14px 44px -12px rgba(227, 38, 47, .65); }
.btn--wa { --b-bg: rgba(37, 211, 102, .12); --b-bd: rgba(37, 211, 102, .35); --b-fg: #c9f5d9; }
.btn--wa:hover { --b-bg: rgba(37, 211, 102, .2); }
.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .88rem; }
.btn--lg { min-height: 56px; padding: 1rem 1.8rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn img { width: 18px; height: 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row--center { justify-content: center; }

.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  color: var(--text); text-decoration: none; transition: background-color .25s, transform .25s var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, .08); }
.icon-btn .icon { width: 22px; height: 22px; }
.count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--heart); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; line-height: 1;
}
.count.bump { animation: bump .45s var(--ease-out); }
.count--inline { position: static; display: inline-grid; background: var(--gold); color: #1a140c; }
@keyframes bump { 40% { transform: scale(1.45); } }

.chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .45rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s;
}
.chip span { color: var(--faint); font-weight: 600; font-size: .8rem; }
.chip:hover { border-color: var(--text); }
.chip.is-active, .chip--radio:has(input:checked) { background: var(--text); color: #14110e; border-color: var(--text); }
.chip.is-active span { color: #6b6156; }
.chip--radio { cursor: pointer; }
.chip--radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip--radio:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.badge { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; background: rgba(12, 11, 10, .72); color: var(--gold-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(236, 211, 165, .25); }
.badge--low { color: var(--warn); border-color: rgba(240, 192, 112, .35); }
.pill-new { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .2rem .45rem; border-radius: 6px; background: var(--heart); color: #fff; margin-left: .3rem; vertical-align: 2px; }

/* ------------------------------------------------------------ bandeau + header */
.announce { background: #000; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .02em; height: 36px; overflow: hidden; position: relative; z-index: 51; }
.announce__track { height: 100%; display: flex; justify-content: center; gap: 2.5rem; align-items: center; }
.announce p { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.announce a { color: inherit; text-decoration: none; }
.announce .icon { color: var(--gold); width: 16px; height: 16px; }
@media (max-width: 899px) {
  .announce__track { display: block; }
  .announce p { position: absolute; inset: 0; justify-content: center; animation: ticker 12s infinite; opacity: 0; }
  .announce p:nth-child(2) { animation-delay: 4s; }
  .announce p:nth-child(3) { animation-delay: 8s; }
}
@keyframes ticker { 0% { opacity: 0; transform: translateY(100%); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-100%); } }

.hdr {
  position: sticky; top: 0; z-index: 50; height: var(--hdr-h);
  background: rgba(12, 11, 10, .72); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid var(--line); transition: transform .45s var(--ease), background-color .35s, border-color .35s;
}
.hdr.is-hidden { transform: translateY(-100%); }
body[data-page="home"] .hdr:not(.is-scrolled) { background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 1rem; }
.hdr__logo { display: block; flex: none; }
.hdr__logo img { width: auto; height: 38px; }
.hdr__burger { margin-left: -8px; }
.hdr__nav { display: none; }
.hdr__actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.search-trigger { display: inline-flex; align-items: center; gap: .6rem; height: 44px; padding: 0 .75rem; border-radius: 999px; color: var(--text); }
.search-trigger span, .search-trigger kbd { display: none; }
@media (min-width: 1100px) {
  .hdr__burger { display: none; }
  .hdr__logo img { height: 44px; }
  .hdr__nav { display: block; margin-left: 2.5rem; height: 100%; }
  .hdr__nav > ul { display: flex; height: 100%; list-style: none; gap: .25rem; }
  .hdr__nav > ul > li { display: flex; align-items: center; }
  .hdr__nav > ul > li > a { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .9rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--text); transition: background-color .25s; }
  .hdr__nav > ul > li > a:hover, .hdr__nav a[aria-current="page"] { background: rgba(255, 255, 255, .08); }
  .hdr__nav .icon { width: 14px; height: 14px; transition: transform .3s; }
  .search-trigger { min-width: 240px; border: 1px solid var(--line-2); padding: 0 .5rem 0 1rem; color: var(--muted); transition: border-color .25s, color .25s; }
  .search-trigger:hover { border-color: var(--text); color: var(--text); }
  .search-trigger span { display: inline; flex: 1; text-align: left; font-size: .9rem; }
  .search-trigger kbd { display: inline-block; }
  .has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
  .has-mega:hover > a .icon { transform: rotate(180deg); }
}
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: rgba(18, 16, 14, .97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line); padding: 1.75rem 0 2rem; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mega__in { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; }
.mega__grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.mega__item { display: grid; gap: .3rem; text-decoration: none; }
.mega__img { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.mega__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mega__item:hover img { transform: scale(1.06); }
.mega__name { font-weight: 650; margin-top: .35rem; }
.mega__count { font-size: .8rem; color: var(--muted); }
.mega__side { display: grid; gap: .6rem; align-content: start; }
.mega__cta { display: flex; gap: .9rem; align-items: center; padding: 1rem; border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: background-color .25s; }
.mega__cta:hover { background: var(--surface-2); }
.mega__cta .icon { color: var(--gold); width: 24px; height: 24px; }
.mega__cta span { display: grid; font-size: .82rem; color: var(--muted); }
.mega__cta strong { color: var(--text); font-size: .95rem; }

/* ------------------------------------------------------------ images contexte */
.is-black { background: var(--bg, #000); }
.is-white { background: var(--bg, var(--scene-white)); }
.is-scene { background: var(--surface); }

/* ------------------------------------------------------------ hero accueil */
.hero { position: relative; min-height: min(100svh, 980px); margin-top: calc(-1 * var(--hdr-h)); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 9s linear; }
.hero__slide.is-active img { transform: scale(1); }
.hero__slide figcaption { position: absolute; right: var(--gutter); bottom: clamp(5.5rem, 10vw, 7rem); opacity: 0; transition: opacity .6s .6s; }
.hero__slide.is-active figcaption { opacity: 1; }
@media (max-width: 899px) { .hero__slide figcaption { display: none; } }
.hero__slide figcaption a { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: #fff; text-decoration: none; padding: .5rem .9rem; border-radius: 999px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to top, rgba(12, 11, 10, 1) 0%, rgba(12, 11, 10, .55) 32%, rgba(12, 11, 10, 0) 62%),
  linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%); }
.hero__content { padding-bottom: clamp(6rem, 12vw, 9rem); padding-top: calc(var(--hdr-h) + 4rem); }
.hero__content .display { margin: 1.1rem 0 1.4rem; }
.hero__lead { max-width: 52ch; color: #e6ded2; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__dots { position: absolute; left: 0; right: 0; bottom: 2.2rem; display: flex; gap: .5rem; }
.hero__dots button { width: 44px; height: 24px; display: grid; align-items: center; }
.hero__dots span { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; position: relative; }
.hero__dots span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero__dots [aria-current="true"] span::after { animation: dot 7s linear forwards; }
.hero.is-paused .hero__dots [aria-current="true"] span::after { animation-play-state: paused; }
@keyframes dot { to { transform: scaleX(1); } }

/* ------------------------------------------------------------ marquee */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 1.1rem 0; background: var(--bg-2); }
.marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 40s linear infinite; font-weight: 600; color: var(--muted); font-size: .95rem; }
.marquee__track span { display: inline-flex; gap: .6rem; align-items: center; white-space: nowrap; }
.marquee__track .icon { color: var(--gold); }
.marquee__track i { font-style: normal; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ sections */
.sec { padding-block: var(--sec) 0; }
.sec:last-of-type { padding-bottom: var(--sec); }
.sec-head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 900px; }
.sec-head .link-arrow { justify-self: start; margin-top: .4rem; }
.sec-head__lead { color: var(--muted); max-width: 60ch; }
@media (min-width: 900px) {
  .sec-head:has(.link-arrow) { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
  .sec-head:has(.link-arrow) .eyebrow, .sec-head:has(.link-arrow) .h2 { grid-column: 1; }
  .sec-head:has(.link-arrow) .link-arrow { grid-column: 2; grid-row: 2; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(40px) scale(.98); } }

/* bento univers */
.bento { display: grid; gap: clamp(10px, 1.4vw, 18px); grid-template-columns: repeat(2, 1fr); }
.bento__item { position: relative; border-radius: var(--radius); overflow: hidden; text-decoration: none; min-height: 210px; display: block; isolation: isolate; }
.bento__media { position: absolute; inset: 0; z-index: -1; }
.bento__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.bento__media.is-black img, .bento__media.is-white img { object-fit: contain; }
.bento__item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 55%); transition: opacity .4s; }
.bento__item:hover img { transform: scale(1.06); }
.bento__label { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 2vw, 1.6rem); display: grid; gap: .15rem; }
.bento__name { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1; }
.bento__count { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--gold-2); }
.bento__count .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.bento__item:hover .bento__count .icon { transform: translateX(4px); }
.bento__item--1, .bento__item--2 { grid-column: span 2; min-height: 300px; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: 280px 280px 220px; }
  .bento__item { min-height: 0; }
  .bento__item--1 { grid-area: 1 / 1 / 3 / 3; }
  .bento__item--2 { grid-area: 1 / 3 / 2 / 5; }
  .bento__item--3 { grid-area: 2 / 3 / 3 / 4; }
  .bento__item--4 { grid-area: 2 / 4 / 3 / 5; }
}

/* stories */
.stories-sec { overflow: hidden; }
.stories { list-style: none; display: flex; gap: clamp(.9rem, 2vw, 1.6rem); overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem 0 1rem; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.stories li { scroll-snap-align: start; }
.story { display: grid; justify-items: center; gap: .6rem; width: clamp(84px, 11vw, 120px); }
.story__ring { width: 100%; aspect-ratio: 1; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, var(--heart), var(--gold), var(--heart)); transition: transform .35s var(--ease); }
.story:hover .story__ring { transform: scale(1.05) rotate(-3deg); }
.story.is-seen .story__ring { background: var(--line-2); }
.story__img { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg); }
.story__img img { width: 100%; height: 100%; object-fit: cover; }
.story__title { font-size: .82rem; font-weight: 600; text-align: center; line-height: 1.25; }

.viewer { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; animation: fade .3s; }
.viewer__frame { position: relative; width: min(100vw, calc(100svh * 9 / 16)); height: min(100svh, 920px); overflow: hidden; background: #111; border-radius: 0; }
@media (min-width: 700px) { .viewer__frame { border-radius: 22px; height: min(92svh, 900px); width: calc(min(92svh, 900px) * 9 / 16); } }
.viewer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 6s ease-out both; }
@keyframes kenburns { from { transform: scale(1.15) translateX(4%); } to { transform: scale(1.02); } }
.viewer__bars { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 2; }
.viewer__bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.viewer__bars span i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.viewer__bars span.done i { transform: scaleX(1); }
.viewer__bars span.run i { animation: dot 6s linear forwards; }
.viewer.is-paused .viewer__bars span.run i { animation-play-state: paused; }
.viewer__top { position: absolute; top: 26px; left: 16px; right: 8px; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.viewer__top strong { font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.viewer__top img { width: 28px; height: 28px; border-radius: 50%; background: #000; }
.viewer__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent 45%), linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent 20%); }
.viewer__text { position: absolute; left: 20px; right: 20px; bottom: 24px; z-index: 2; display: grid; gap: .5rem; }
.viewer__text h2 { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1; }
.viewer__text p { color: #ddd; }
.viewer__cta { margin-top: .6rem; }
.viewer__nav { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 2fr; z-index: 1; }
.viewer__close { color: #fff; }

/* budget */
.budget { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.budget__intro { display: grid; gap: 1.1rem; align-content: start; }
.budget__intro > p:not(.eyebrow) { color: var(--muted); max-width: 46ch; }
.budget__intro .btn { justify-self: start; }
.budget__control { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .6rem 1rem; padding: 1.4rem 1.4rem 1rem; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); margin-top: .5rem; }
.budget__control label { font-weight: 650; }
.budget__control output { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--gold-2); }
.budget__control input { grid-column: 1 / -1; }
.budget__scale { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: .78rem; color: var(--faint); }
.budget__count { font-weight: 600; min-height: 1.6em; }
.budget__count strong { color: var(--gold-2); }
.budget__results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.budget__results .card:nth-child(n+5) { display: none; }
@media (min-width: 1000px) { .budget { grid-template-columns: minmax(320px, 5fr) 7fr; } }

/* range */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --pct: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--gold) var(--pct), var(--surface-3) var(--pct)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--surface-3); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--text); border: 5px solid var(--gold); box-shadow: 0 4px 16px rgba(0, 0, 0, .5); transition: transform .2s; }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 5px solid var(--gold); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

/* rails horizontaux */
.rail, .coll-rail { position: relative; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 300px); gap: clamp(12px, 1.4vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 1rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
.coll-rail .rail__track { grid-auto-columns: min(82vw, 420px); }
.rail__nav { display: none; }
@media (min-width: 1000px) {
  .rail__track { grid-auto-columns: calc((100% - 3 * 20px) / 4); margin-inline: 0; padding-inline: 0; }
  .rail__nav { display: flex; gap: .5rem; position: absolute; top: -4.5rem; right: 0; }
  .sec-head:has(.link-arrow) + .rail .rail__nav { right: 15rem; }
  .rail__nav .icon-btn { border: 1px solid var(--line-2); }
  .rail__nav .icon-btn[disabled] { opacity: .3; }
}

/* ------------------------------------------------------------ carte produit */
.card { position: relative; display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.card__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.card__media.is-black img, .card__media.is-white img { object-fit: contain; padding: 4%; }
.card:hover .card__media img { transform: scale(1.05); }
.card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: .35rem; pointer-events: none; max-width: calc(100% - 64px); }
.wish {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(12, 11, 10, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text);
  transition: transform .3s var(--ease), background-color .25s, color .25s;
}
.wish .icon { width: 20px; height: 20px; transition: fill .2s; }
.wish:hover { transform: scale(1.08); }
.wish[aria-pressed="true"] { color: var(--heart-2); }
.wish[aria-pressed="true"] .icon { fill: currentColor; }
.wish.pop { animation: pop .5s var(--ease-out); }
@keyframes pop { 30% { transform: scale(1.35); } 60% { transform: scale(.9); } }
.card__wish { position: absolute; top: 8px; right: 8px; }
.card__quick { display: none; }
/* Aperçu rapide : superposé au bas de l'image (souris uniquement) */
@media (hover: hover) and (min-width: 700px) {
  .card { display: grid; grid-template-rows: auto auto; align-content: start; }
  .card__media { grid-area: 1 / 1; }
  .card__quick {
    grid-area: 1 / 1; align-self: end; margin: 0 10px 10px; height: 40px;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    border-radius: 999px; font-size: .85rem; font-weight: 650; background: rgba(243, 237, 228, .92); color: #14110e;
    opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--ease);
  }
  .card__quick .icon { width: 18px; height: 18px; }
  .card:hover .card__quick, .card__quick:focus-visible { opacity: 1; transform: none; }
}
.card__body { display: grid; gap: .25rem; padding-inline: .15rem; }
.card__eyebrow { font-size: .72rem; color: var(--faint); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__title { font-size: 1rem; font-weight: 650; line-height: 1.3; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.card__wish, .card__quick { z-index: 2; }
.card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.card__price strong { font-size: 1.05rem; font-weight: 750; }
.card__monthly { font-size: .82rem; color: var(--gold-2); font-weight: 600; }

/* ------------------------------------------------------------ jeu teaser */
.play { display: grid; gap: 3rem; align-items: center; background: radial-gradient(120% 120% at 0% 100%, rgba(227, 38, 47, .18), transparent 55%), var(--surface); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4.5rem); margin-top: var(--sec); overflow: hidden; }
.play__text { display: grid; gap: 1.1rem; }
.play__text > p:not(.eyebrow) { color: var(--muted); max-width: 50ch; }
.play__text .btn { justify-self: start; }
.play__deck { position: relative; height: 340px; }
.play__card { position: absolute; left: 50%; top: 50%; width: min(260px, 64vw); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.play__card img { width: 100%; height: 100%; object-fit: cover; }
.play__card.is-black img { object-fit: contain; }
.play__card--1 { transform: translate(-50%, -50%) rotate(-10deg) translateX(-30px); }
.play__card--2 { transform: translate(-50%, -50%) rotate(6deg) translateX(30px); }
.play__card--3 { transform: translate(-50%, -50%); animation: tease 4.5s var(--ease) infinite; }
.play__stamp { position: absolute; top: 18px; left: 16px; padding: .3rem .7rem; border: 3px solid var(--ok); color: var(--ok); border-radius: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-14deg); opacity: 0; animation: stamp 4.5s var(--ease) infinite; }
@keyframes tease { 0%, 20% { transform: translate(-50%, -50%); } 45%, 55% { transform: translate(-20%, -52%) rotate(12deg); } 80%, 100% { transform: translate(-50%, -50%); } }
@keyframes stamp { 0%, 25% { opacity: 0; } 45%, 55% { opacity: 1; } 75%, 100% { opacity: 0; } }
@media (min-width: 900px) { .play { grid-template-columns: 1fr 1fr; } .play__deck { height: 420px; order: 2; } }

/* collections */
.coll-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; aspect-ratio: 4 / 5; isolation: isolate; }
.coll-card__media { position: absolute; inset: 0; z-index: -1; }
.coll-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.coll-card__media.is-black img { object-fit: contain; }
.coll-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent 55%); }
.coll-card:hover img { transform: scale(1.06); }
.coll-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem; display: grid; }
.coll-card__name { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; }
.coll-card__meta { color: var(--gold-2); font-size: .88rem; font-weight: 600; }
.coll-grid { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); padding-bottom: var(--sec); }
.coll-card--grid { aspect-ratio: 4 / 3; }

/* engagements */
.promises { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; padding: 0; margin-top: var(--sec); }
.promise { background: var(--bg); padding: clamp(1.3rem, 3vw, 2.4rem); display: grid; gap: .5rem; align-content: start; }
.promise .icon { width: 30px; height: 30px; color: var(--gold); margin-bottom: .4rem; }
.promise h3 { font-size: 1rem; }
.promise p { color: var(--muted); font-size: .9rem; }
@media (min-width: 900px) { .promises { grid-template-columns: repeat(4, 1fr); } }

/* showroom */
.showroom { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.showroom__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.showroom__media img { width: 100%; height: 100%; object-fit: cover; }
.showroom__body { display: grid; gap: 1.2rem; }
.showroom__body > p:not(.eyebrow) { color: var(--muted); }
.info-list { display: grid; gap: 1rem; margin: .5rem 0; }
.info-list div { display: grid; gap: .2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.info-list dt { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.info-list dd { margin: 0; color: var(--text); }
.info-list a { color: var(--text); }
@media (min-width: 900px) { .showroom { grid-template-columns: 1fr 1fr; } }
.open-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 650; color: var(--muted); }
.open-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.open-status .icon { display: none; }
.open-status.is-open { color: var(--ok); }
.open-status.is-open::before { background: var(--ok); box-shadow: 0 0 0 0 rgba(143, 209, 158, .6); animation: pulse 2s infinite; }
.open-status--badge { position: absolute; left: 1rem; top: 1rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(12, 11, 10, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(143, 209, 158, 0); } 100% { box-shadow: 0 0 0 0 rgba(143, 209, 158, 0); } }

/* ------------------------------------------------------------ footer */
.ftr { margin-top: var(--sec); background: var(--bg-2); border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 5rem) 0 calc(2rem + env(safe-area-inset-bottom)); font-size: .92rem; }
.ftr__top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.ftr__brand { display: grid; gap: 1rem; align-content: start; max-width: 380px; }
.ftr__brand > p:not(.open-status) { color: var(--muted); }
.ftr__logo img { height: 46px; width: auto; }
.ftr__social { display: flex; gap: .3rem; margin-left: -10px; }
.ftr__col h2 { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-weight: 700; }
.ftr__col ul { list-style: none; display: grid; gap: .55rem; }
.ftr__col a { color: var(--muted); text-decoration: none; transition: color .2s; }
.ftr__col a:hover { color: var(--text); }
.ftr__col address { font-style: normal; color: var(--muted); margin-bottom: 1rem; }
.ftr__hours { margin-bottom: 1rem !important; }
.ftr__hours li { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); max-width: 260px; }
.ftr__col p a { color: var(--text); }
.ftr__legal { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.5rem; }
.ftr__legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.ftr__legal a, .ftr__legal button { color: var(--muted); font-size: .85rem; text-decoration: none; }
.ftr__legal a:hover, .ftr__legal button:hover { color: var(--text); }
.ftr__notes { margin-top: 1.5rem; display: grid; gap: .4rem; color: var(--faint); font-size: .8rem; max-width: 900px; }
@media (min-width: 700px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ftr__top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

/* ------------------------------------------------------------ barre d'onglets mobile */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(14, 12, 11, .86);
  backdrop-filter: saturate(1.4) blur(20px); -webkit-backdrop-filter: saturate(1.4) blur(20px); border-top: 1px solid var(--line);
}
.tabbar > a, .tabbar > button { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0 2px; font-size: .66rem; font-weight: 650; color: var(--muted); text-decoration: none; }
.tabbar .icon { width: 24px; height: 24px; }
.tabbar [aria-current="page"] { color: var(--text); }
.tabbar .count { top: 0; right: calc(50% - 22px); }
.tabbar__play { margin-top: -22px; }
.tabbar__heart { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #000; border: 1px solid var(--line-2); box-shadow: 0 10px 30px -6px rgba(227, 38, 47, .55); }
.tabbar__heart img { width: 40px; height: 40px; }
.tabbar__play[aria-current="page"] .tabbar__heart { border-color: var(--heart); }
body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) { .tabbar { display: none; } body { padding-bottom: 0; } }

/* ------------------------------------------------------------ dialogs */
dialog { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog[open] { animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; } }
body:has(dialog[open]) { overflow: hidden; }

.search { width: 100%; height: 100%; margin: 0; }
.search__panel { width: min(100%, 860px); margin: 0 auto; margin-top: max(0px, 8vh); background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); max-height: 100svh; display: flex; flex-direction: column; animation: drop .35s var(--ease-out); }
@media (min-width: 700px) { .search__panel { border-radius: var(--radius-lg); max-height: 80vh; } }
@media (max-width: 699px) { .search__panel { margin-top: 0; height: 100svh; border-radius: 0; } }
@keyframes drop { from { transform: translateY(-20px); opacity: 0; } }
.search__bar { display: flex; align-items: center; gap: .75rem; padding: .7rem .7rem .7rem 1.3rem; border-bottom: 1px solid var(--line); }
.search__bar > .icon { color: var(--gold); width: 22px; height: 22px; }
.search__bar input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font-size: 1.15rem; outline: none; }
.search__bar input::-webkit-search-cancel-button { display: none; }
.search__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 1rem 1.3rem; }
.search__suggest > span { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-right: .3rem; }
.search__suggest .chip { min-height: 34px; padding: .3rem .8rem; font-size: .85rem; }
.search__results { overflow-y: auto; padding: 0 .6rem .8rem; overscroll-behavior: contain; }
.result { display: grid; grid-template-columns: 72px 1fr auto; gap: 1rem; align-items: center; padding: .6rem .7rem; border-radius: 14px; text-decoration: none; }
.result[aria-selected="true"], .result:hover { background: var(--surface-2); }
.result__img { width: 72px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.result__img img { width: 100%; height: 100%; object-fit: cover; }
.result__img.is-black img { object-fit: contain; }
.result__name { font-weight: 650; display: block; }
.result__meta { font-size: .8rem; color: var(--muted); }
.result__price { font-weight: 700; text-align: right; }
.result__price small { display: block; color: var(--gold-2); font-weight: 600; font-size: .75rem; }
.result mark { background: none; color: var(--gold-2); }
.search__all { display: flex; justify-content: center; padding: .8rem; }
.search__empty { padding: 2rem 1.3rem; color: var(--muted); }

.drawer { position: fixed; inset: 0 0 0 auto; width: min(100vw, 460px); height: 100%; margin: 0; background: var(--surface); border-left: 1px solid var(--line); display: none; flex-direction: column; }
.drawer[open] { display: flex; animation: slide-in .4s var(--ease-out); }
.drawer--left { inset: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--line); }
.drawer--left[open] { animation-name: slide-in-left; }
@keyframes slide-in { from { transform: translateX(100%); } }
@keyframes slide-in-left { from { transform: translateX(-100%); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 1rem 1.4rem; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; }
.drawer__head .hdr__logo img { height: 34px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; overscroll-behavior: contain; }
.drawer__foot { padding: 1.2rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: .7rem; background: var(--bg-2); }

.menu__univers { list-style: none; display: grid; gap: .3rem; }
.menu__univers a { display: flex; align-items: center; gap: 1rem; padding: .5rem; border-radius: 14px; text-decoration: none; font-weight: 650; font-size: 1.05rem; }
.menu__univers a:hover { background: var(--surface-2); }
.menu__univers a .icon { margin-left: auto; color: var(--faint); }
.menu__img { width: 56px; height: 42px; border-radius: 10px; overflow: hidden; flex: none; }
.menu__img img { width: 100%; height: 100%; object-fit: cover; }
.menu__links { list-style: none; display: grid; margin: 1.2rem 0; border-top: 1px solid var(--line); padding-top: .8rem; }
.menu__links a { display: block; padding: .7rem .5rem; text-decoration: none; color: var(--muted); font-weight: 600; }
.menu .btn { width: 100%; }

/* lignes panier */
.line { display: grid; grid-template-columns: 84px 1fr auto; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.line__img { width: 84px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; display: block; }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__img.is-black img, .line__img.is-white img { object-fit: contain; }
.line__name { font-weight: 650; text-decoration: none; line-height: 1.3; display: block; }
.line__meta { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.line__price { font-weight: 700; text-align: right; white-space: nowrap; }
.line__actions { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.line__remove { font-size: .8rem; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; }
.line__remove:hover { color: var(--text); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; height: 44px; }
.qty button { width: 40px; height: 100%; display: grid; place-items: center; border-radius: 999px; }
.qty button:hover { background: rgba(255, 255, 255, .06); }
.qty .icon { width: 16px; height: 16px; }
.qty input { width: 2.4rem; text-align: center; background: transparent; border: 0; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty--sm { height: 36px; }
.qty--sm button { width: 34px; }
.totals { display: grid; gap: .45rem; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; color: var(--muted); }
.totals .free { color: var(--ok); font-weight: 650; }
.totals .grand { color: var(--text); font-size: 1.15rem; font-weight: 750; padding-top: .5rem; border-top: 1px solid var(--line); margin-top: .3rem; }
.totals small { display: block; font-size: .75rem; color: var(--faint); }
.cart-empty { text-align: center; padding: 3rem 1rem; display: grid; gap: 1rem; justify-items: center; color: var(--muted); }
.cart-empty .icon { width: 48px; height: 48px; color: var(--faint); }

.quick { width: min(100% - 24px, 980px); margin: auto; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; }
.quick[open] { animation: zoom .35s var(--ease-out); }
@keyframes zoom { from { opacity: 0; transform: scale(.96); } }
.quick__in { display: grid; max-height: 90svh; overflow-y: auto; }
.quick__media { aspect-ratio: 4 / 3; }
.quick__media img { width: 100%; height: 100%; object-fit: cover; }
.quick__media.is-black img, .quick__media.is-white img { object-fit: contain; }
.quick__body { padding: clamp(1.2rem, 3vw, 2.2rem); display: grid; gap: 1rem; align-content: start; position: relative; }
.quick__body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.02; padding-right: 2.5rem; }
.quick__close { position: absolute; top: .8rem; right: .8rem; }
.quick__price { font-size: 1.6rem; font-weight: 750; }
.quick__price small { display: block; font-size: .9rem; color: var(--gold-2); font-weight: 600; }
.quick__desc { color: var(--muted); font-size: .95rem; }
@media (min-width: 800px) { .quick__in { grid-template-columns: 1.2fr 1fr; } .quick__media { aspect-ratio: auto; min-height: 100%; } }

.lightbox { width: 100vw; height: 100svh; margin: 0; background: #000; }
.lightbox__stage { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; touch-action: pan-x pan-y pinch-zoom; }
.lightbox__stage img { max-width: none; width: min(100%, 1600px); height: auto; cursor: zoom-in; transition: width .3s var(--ease); }
.lightbox__stage.is-zoomed img { width: 200%; cursor: zoom-out; }
.lightbox__close { position: fixed; top: 16px; right: 16px; z-index: 2; background: rgba(0, 0, 0, .6); }

.toasts { position: fixed; z-index: 300; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: .5rem; width: min(100% - 32px, 420px); pointer-events: none; }
@media (min-width: 1100px) { .toasts { bottom: 24px; left: auto; right: 24px; transform: none; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .9rem; padding: .7rem .7rem .7rem .9rem; border-radius: 16px; background: var(--text); color: #14110e; box-shadow: var(--shadow); animation: toast-in .45s var(--ease-out); font-weight: 600; font-size: .9rem; }
.toast.is-out { animation: toast-out .3s var(--ease) forwards; }
.toast img { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; background: #000; flex: none; }
.toast span { flex: 1; line-height: 1.3; }
.toast a, .toast button { color: #14110e; font-weight: 800; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; padding: .4rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* consentement cookies */
.consent { position: fixed; z-index: 250; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: 460px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); display: grid; gap: .9rem; animation: toast-in .5s var(--ease-out); }
@media (min-width: 1100px) { .consent { left: 24px; bottom: 24px; right: auto; } }
.consent h2 { font-size: 1rem; }
.consent p { font-size: .86rem; color: var(--muted); }
.consent a { color: var(--text); }
.consent .btn-row { gap: .5rem; }
.consent .btn { flex: 1; min-height: 44px; padding-inline: 1rem; }
.consent__opts { display: grid; gap: .6rem; }
.toggle { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem; border-radius: 12px; background: var(--surface); font-size: .86rem; }
.toggle strong { display: block; font-size: .9rem; }
.toggle span { color: var(--muted); }
.toggle input { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--surface-3); position: relative; cursor: pointer; transition: background-color .2s; margin-top: 2px; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform .25s var(--ease); }
.toggle input:checked { background: var(--gold); }
.toggle input:checked::after { transform: translateX(18px); }
.toggle input:disabled { opacity: .6; cursor: not-allowed; }

/* ------------------------------------------------------------ boutique */
.shop-hero { position: relative; margin-top: calc(-1 * var(--hdr-h)); padding-top: var(--hdr-h); min-height: clamp(320px, 46vh, 480px); display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.shop-hero__media { position: absolute; inset: 0; z-index: -2; }
.shop-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.shop-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--bg) 2%, rgba(12, 11, 10, .6) 45%, rgba(12, 11, 10, .35)); }
.shop-hero__in { padding-block: 3rem 2rem; display: grid; gap: .9rem; }
.shop-hero__lead { max-width: 60ch; color: #e2d9cc; }
body[data-page="shop"] .hdr:not(.is-scrolled), body[data-page="collection"] .hdr:not(.is-scrolled) { background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .5rem; font-size: .82rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }

.univers-chips { display: flex; gap: .5rem; overflow-x: auto; padding-block: 1rem; scrollbar-width: none; position: sticky; top: var(--hdr-h); z-index: 20; background: linear-gradient(var(--bg) 70%, transparent); transition: top .45s var(--ease); }
.univers-chips::-webkit-scrollbar { display: none; }
body:has(.hdr.is-hidden) .univers-chips { top: 0; }

.shop { display: grid; gap: 2rem; padding-top: 1rem; }
.shop__main { min-width: 0; container-type: inline-size; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.toolbar__count { color: var(--muted); font-size: .9rem; margin-right: auto; }
.toolbar__count span { color: var(--text); font-weight: 700; }
.toolbar__search { display: none; }
.select { position: relative; display: inline-flex; align-items: center; }
.select select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 2.4rem 0 1rem; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-weight: 600; font-size: .88rem; cursor: pointer; }
.select select option { background: var(--surface); }
.select .icon { position: absolute; right: .8rem; width: 16px; height: 16px; pointer-events: none; }
.toolbar__filter { order: -1; }
@media (min-width: 640px) {
  .toolbar__search { display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
  .toolbar__search input { border: 0; background: transparent; outline: none; width: 160px; color: var(--text); }
}
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.active-filters:empty { display: none; }
.active-filters button { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .5rem .35rem .8rem; border-radius: 999px; background: var(--surface-2); font-size: .82rem; font-weight: 600; }
.active-filters .icon { width: 14px; height: 14px; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 2.5vw, 2.4rem) clamp(10px, 1.4vw, 20px); }
@container (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@container (min-width: 1080px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.grid--wide { grid-template-columns: 1fr; }
@media (min-width: 800px) { .grid--wide { grid-template-columns: repeat(2, 1fr); } }
.grid .card.is-entering { animation: card-in .5s var(--ease-out) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }

.filters { display: none; }
.filters__form { display: grid; gap: .3rem; }
.filters fieldset { border: 0; padding: 1.1rem 0; margin: 0; border-bottom: 1px solid var(--line); display: grid; gap: .5rem; min-width: 0; }
.filters legend { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: .4rem; padding: 0; margin-bottom: .5rem; float: left; width: 100%; }
.filters legend .icon { color: var(--gold); }
.filters output { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-2); line-height: 1; clear: both; }
.f-hint { font-size: .78rem; color: var(--faint); }
.f-scroll { display: grid; gap: .1rem; max-height: 260px; overflow-y: auto; padding-right: .3rem; clear: both; }
.check { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; cursor: pointer; font-size: .92rem; clear: both; }
.check input { position: absolute; opacity: 0; }
.check__box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; transition: background-color .2s, border-color .2s; }
.check__box .icon { width: 14px; height: 14px; opacity: 0; stroke-width: 2.4; color: #14110e; }
.check input:checked + .check__box { background: var(--gold); border-color: var(--gold); }
.check input:checked + .check__box .icon { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--gold); outline-offset: 2px; }
.check__n { margin-left: auto; color: var(--faint); font-size: .8rem; }
.check.is-zero { opacity: .4; }
.filters__head { display: flex; align-items: center; justify-content: space-between; }
.filters__head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; }
.filters__foot { display: flex; gap: .6rem; padding-top: 1rem; }
.filters__foot .btn { flex: 1; }

@media (max-width: 1099px) {
  .filters.is-open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 120; background: var(--surface); padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom)); animation: slide-up .4s var(--ease-out); }
  .filters.is-open .filters__form { flex: 1; overflow-y: auto; }
  @keyframes slide-up { from { transform: translateY(100%); } }
}
@media (min-width: 1100px) {
  .shop { grid-template-columns: 270px 1fr; gap: 3rem; }
  .filters { display: block; position: sticky; top: calc(var(--hdr-h) + 70px); align-self: start; max-height: calc(100vh - var(--hdr-h) - 90px); overflow-y: auto; padding-right: .5rem; scrollbar-width: thin; }
  .filters__head .filters__close, .filters__foot .btn--primary, .toolbar__filter { display: none; }
  .filters__head { padding-top: 1rem; }
}

.empty { text-align: center; display: grid; gap: 1rem; justify-items: center; padding: 4rem 1rem; color: var(--muted); }
.empty h2 { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; color: var(--text); }
.empty--big { padding-block: 5rem; }
.empty__icon { width: 84px; height: 84px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--heart); }
.empty__icon .icon { width: 36px; height: 36px; }

/* ------------------------------------------------------------ fiche produit */
.pdp { padding-top: 1.2rem; }
.pdp__grid { display: grid; gap: clamp(1.5rem, 4vw, 4rem); margin-top: 1.2rem; }
.pdp__gallery { display: grid; gap: .8rem; align-content: start; }
.pdp__figure { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; }
.pdp__img { width: 100%; height: 100%; object-fit: cover; view-transition-name: hero-img; transition: transform .2s ease-out; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.pdp__figure.is-black .pdp__img, .pdp__figure.is-white .pdp__img { object-fit: contain; }
.pdp__figure.is-zooming .pdp__img { transform: scale(2); }
.pdp__expand { position: absolute; right: 12px; bottom: 12px; background: rgba(12, 11, 10, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.palette { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--muted); font-weight: 600; }
.palette span { margin-right: .3rem; letter-spacing: .1em; text-transform: uppercase; }
.palette i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line-2); }
.pdp__info { display: grid; gap: 1.1rem; align-content: start; }
.pdp__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1; }
.pdp__badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.pdp__badges:empty { display: none; }
.pdp__badges .badge { backdrop-filter: none; background: var(--surface-2); }
.pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.pdp__price strong { font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 750; letter-spacing: -.01em; }
.pdp__eco { font-size: .82rem; color: var(--muted); }
.pdp__monthly { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: 14px; background: rgba(212, 178, 124, .09); border: 1px solid rgba(212, 178, 124, .22); color: var(--gold-2); font-size: .95rem; }
.pdp__monthly a { color: inherit; text-decoration: none; }
.pdp__monthly .icon { width: 22px; height: 22px; }
.avail { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; }
.avail__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.avail--in { color: var(--ok); }
.avail--low { color: var(--warn); }
.avail--order { color: var(--muted); }
.variants { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; min-width: 0; }
.variants legend { font-weight: 650; font-size: .9rem; margin-bottom: .6rem; padding: 0; }
.variants legend span { color: var(--gold-2); font-weight: 600; margin-left: .3rem; }
.variants__list { display: flex; flex-wrap: wrap; gap: .4rem; }
.variant { cursor: pointer; }
.variant input { position: absolute; opacity: 0; }
.variant span { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .86rem; font-weight: 600; transition: all .2s; }
.variant input:checked + span { background: var(--text); color: #14110e; border-color: var(--text); }
.variant input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.pdp__buy { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pdp__buy .qty { height: 56px; }
.pdp__add { flex: 1; min-width: 200px; }
.wish--lg { width: 56px; height: 56px; border: 1px solid var(--line-2); background: transparent; }
.wish--lg .icon { width: 24px; height: 24px; }
.perks { list-style: none; display: grid; gap: .7rem; padding: 1.1rem 0; border-block: 1px solid var(--line); }
.perks li { display: flex; gap: .8rem; align-items: center; font-size: .9rem; color: var(--muted); }
.perks strong { color: var(--text); font-weight: 650; }
.perks .icon { color: var(--gold); width: 22px; height: 22px; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; cursor: pointer; font-weight: 650; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { transition: transform .3s var(--ease); width: 18px; height: 18px; }
.accordion details[open] summary .icon { transform: rotate(180deg); }
.accordion details > div { padding-bottom: 1.2rem; color: var(--muted); display: grid; gap: .7rem; font-size: .95rem; }
.accordion details > div a { color: var(--text); }
.specs { display: grid; gap: .5rem; margin: 0; }
.specs div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; }
.specs dt { color: var(--faint); }
.specs dd { margin: 0; color: var(--text); }
@media (min-width: 1000px) {
  .pdp__grid { grid-template-columns: 1.35fr 1fr; }
  .pdp__gallery { position: sticky; top: calc(var(--hdr-h) + 1rem); align-self: start; }
}
.buybar { position: fixed; left: 0; right: 0; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; gap: .6rem; padding: .6rem var(--gutter); background: rgba(25, 22, 19, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); transform: translateY(150%); transition: transform .4s var(--ease); }
.buybar.is-visible { transform: none; }
.buybar__info { flex: 1; display: grid; line-height: 1.2; }
.buybar__info strong { font-size: 1.1rem; }
.buybar__info span { font-size: .75rem; color: var(--gold-2); }
.buybar .wish { background: transparent; border: 1px solid var(--line-2); }
@media (min-width: 1100px) { .buybar { bottom: 0; } }

/* ------------------------------------------------------------ pages génériques */
.page-head { padding-top: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1rem; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-head__lead { color: var(--muted); max-width: 62ch; font-size: 1.05rem; }
.page-head__lead a { color: var(--text); }

.coll-hero { position: relative; margin-top: calc(-1 * var(--hdr-h)); padding-top: var(--hdr-h); min-height: min(80svh, 720px); display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.coll-hero__media { position: absolute; inset: 0; z-index: -2; }
.coll-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.coll-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--bg) 3%, rgba(12, 11, 10, .4) 50%, rgba(12, 11, 10, .2)); }
.coll-hero__in { padding-block: 3rem; display: grid; gap: .9rem; }
.coll-hero__lead { color: #e2d9cc; font-size: 1.1rem; }

.builder__grid { display: grid; gap: 2rem; align-items: start; }
.builder__list { list-style: none; display: grid; gap: .5rem; }
.builder__item { display: flex; align-items: center; gap: .5rem; }
.builder__label { flex: 1; display: grid; grid-template-columns: auto 76px 1fr auto; align-items: center; gap: 1rem; padding: .7rem 1rem .7rem .8rem; border-radius: 16px; background: var(--surface); border: 1px solid transparent; cursor: pointer; transition: border-color .2s, background-color .2s; }
.builder__label:hover { background: var(--surface-2); }
.builder__label:has(input:checked) { border-color: var(--gold); background: rgba(212, 178, 124, .08); }
.builder__label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.builder__label input { position: absolute; opacity: 0; }
.builder__check { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.builder__check .icon { width: 16px; height: 16px; opacity: 0; color: #14110e; stroke-width: 2.4; }
.builder__label:has(input:checked) .builder__check { background: var(--gold); border-color: var(--gold); }
.builder__label:has(input:checked) .builder__check .icon { opacity: 1; }
.builder__img { width: 76px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.builder__img img { width: 100%; height: 100%; object-fit: cover; }
.builder__img.is-black img { object-fit: contain; }
.builder__name { font-weight: 650; line-height: 1.3; }
.builder__name small { display: block; color: var(--muted); font-weight: 500; font-size: .8rem; }
.builder__price { font-weight: 700; white-space: nowrap; }
.builder__sum { position: sticky; top: calc(var(--hdr-h) + 1rem); padding: 1.6rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); display: grid; gap: .8rem; }
.builder__total { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; transition: color .3s; }
.builder__total.flash { color: var(--gold-2); }
.builder__meta { color: var(--muted); font-size: .9rem; }
.builder__note { font-size: .8rem; color: var(--faint); }
.builder__note a { color: inherit; }
@media (max-width: 560px) { .builder__label { grid-template-columns: auto 56px 1fr; } .builder__img { width: 56px; } .builder__price { grid-column: 3; } }
@media (min-width: 1000px) { .builder__grid { grid-template-columns: 1fr 360px; } }
@media (max-width: 999px) { .builder__sum { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); top: auto; z-index: 10; box-shadow: var(--shadow); padding: 1rem 1.2rem; gap: .5rem; } .builder__sum .eyebrow, .builder__note { display: none; } .builder__total { font-size: 2.2rem; } }

/* jeu coup de coeur */
.swipe { min-height: calc(100svh - var(--hdr-h) - 36px - 70px); display: grid; place-items: center; padding-block: 2rem 3rem; }
.swipe__intro { display: grid; gap: 1.2rem; justify-items: center; text-align: center; max-width: 640px; }
.swipe__logo { width: 96px; height: 96px; border-radius: 28px; animation: beat 1.6s var(--ease) infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
.swipe__lead { color: var(--muted); font-size: 1.05rem; }
.swipe__choice { border: 0; padding: 0; margin: .5rem 0; display: grid; gap: .8rem; justify-items: center; }
.swipe__choice legend { font-weight: 650; margin-bottom: .8rem; }
.swipe__choice .chips { justify-content: center; }
.swipe__keys { font-size: .8rem; color: var(--faint); }
@media (hover: none) { .swipe__keys { display: none; } }
.swipe__game { width: min(100%, 440px); display: grid; gap: 1rem; justify-items: center; }
.swipe__progress { width: 100%; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.swipe__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--heart)); transition: width .4s var(--ease); }
.swipe__counter { font-size: .85rem; color: var(--muted); font-weight: 600; }
.swipe__stack { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 62svh; }
.sw-card { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; will-change: transform; transition: transform .45s var(--ease-out), opacity .45s; }
.sw-card:active { cursor: grabbing; }
.sw-card.is-dragging { transition: none; }
.sw-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sw-card.is-black img { object-fit: contain; background: var(--bg, #000); }
.sw-card.is-white img { object-fit: contain; background: var(--scene-white); }
.sw-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .88), transparent 50%); pointer-events: none; }
.sw-card__info { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; display: grid; gap: .2rem; pointer-events: none; }
.sw-card__info p { font-size: .75rem; color: var(--gold-2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sw-card__info h2 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.02; }
.sw-card__info strong { font-size: 1.05rem; }
.sw-card__info span { font-size: .85rem; color: var(--gold-2); margin-left: .5rem; }
.sw-card__stamp { position: absolute; top: 1.6rem; padding: .3rem .8rem; border: 4px solid; border-radius: 12px; font-weight: 900; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .06em; opacity: 0; pointer-events: none; }
.sw-card__stamp--like { left: 1.2rem; color: var(--ok); transform: rotate(-14deg); }
.sw-card__stamp--nope { right: 1.2rem; color: var(--heart-2); transform: rotate(14deg); }
.sw-card:nth-last-child(2) { transform: scale(.95) translateY(14px); }
.sw-card:nth-last-child(3) { transform: scale(.9) translateY(28px); }
.sw-card:nth-last-child(n+4) { opacity: 0; }
.swipe__actions { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: .5rem; }
.swipe__btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); transition: transform .25s var(--ease), background-color .2s; }
.swipe__btn:hover { transform: scale(1.08); }
.swipe__btn:active { transform: scale(.92); }
.swipe__btn .icon { width: 24px; height: 24px; }
.swipe__btn--nope, .swipe__btn--like { width: 72px; height: 72px; }
.swipe__btn--nope .icon, .swipe__btn--like .icon { width: 30px; height: 30px; }
.swipe__btn--nope { color: var(--heart-2); }
.swipe__btn--like { color: #fff; background: var(--heart); border-color: var(--heart); box-shadow: 0 14px 40px -10px rgba(227, 38, 47, .7); }
.swipe__btn--like .icon { fill: currentColor; }
.swipe__btn--undo, .swipe__btn--info { color: var(--muted); }
.swipe__result { width: 100%; display: grid; gap: 2rem; text-align: center; justify-items: center; }
.swipe__result .h2 { max-width: 18ch; }
.style-card { width: min(100%, 720px); padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: var(--radius-lg); background: radial-gradient(120% 120% at 100% 0%, rgba(227, 38, 47, .2), transparent 50%), var(--surface); border: 1px solid var(--line); display: grid; gap: 1rem; }
.style-card dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 0; text-align: left; }
.style-card dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.style-card dd { margin: .2rem 0 0; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.05; }
.swipe__result .grid { width: 100%; text-align: left; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 400; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 14px; height: 14px; animation: fall linear forwards; }
.confetti i::before { content: "♥"; color: var(--c); font-style: normal; font-size: 14px; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }

/* projet */
.project__bar { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); margin-bottom: 2rem; position: sticky; top: calc(var(--hdr-h) + .6rem); z-index: 15; }
.project__sum { display: grid; }
.project__sum strong { font-family: var(--font-display); font-size: 2.2rem; line-height: 1.05; font-weight: 400; }
.project__sum span:last-child { color: var(--muted); font-size: .85rem; }
.masonry { columns: 2 220px; column-gap: clamp(10px, 1.4vw, 20px); padding-bottom: var(--sec); }
.pin { break-inside: avoid; margin-bottom: clamp(10px, 1.4vw, 20px); position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface); animation: card-in .5s var(--ease-out) both; }
.pin__media { display: block; }
.pin__media img { width: 100%; height: auto; }
.pin__body { padding: .9rem 1rem 1rem; display: grid; gap: .5rem; }
.pin__name { font-weight: 650; text-decoration: none; line-height: 1.3; }
.pin__price { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.pin__price span { font-size: .8rem; color: var(--gold-2); }
.pin__actions { display: flex; gap: .4rem; }
.pin__actions .btn { flex: 1; }
.pin .wish { position: absolute; top: 8px; right: 8px; }
@media (min-width: 1000px) { .masonry { columns: 4 240px; } }

/* panier & commande */
.cart-page, .checkout { display: grid; gap: 2rem; align-items: start; padding-bottom: 2rem; }
.cart-page__lines .line { grid-template-columns: 120px 1fr auto; }
.cart-page__lines .line__img { width: 120px; }
.summary { position: sticky; top: calc(var(--hdr-h) + 1rem); padding: 1.6rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 1rem; }
.summary h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; }
.summary__lines { list-style: none; display: grid; gap: .5rem; font-size: .9rem; color: var(--muted); max-height: 260px; overflow-y: auto; }
.summary__lines li { display: flex; justify-content: space-between; gap: 1rem; }
.summary__note { font-size: .8rem; color: var(--faint); }
.summary__note a { color: inherit; }
.reassure { list-style: none; display: grid; gap: .5rem; font-size: .85rem; color: var(--muted); }
.reassure li { display: flex; gap: .6rem; align-items: center; }
.reassure .icon { color: var(--gold); width: 18px; height: 18px; }
@media (min-width: 1000px) { .cart-page, .checkout { grid-template-columns: 1fr 400px; } }
@media (max-width: 560px) { .cart-page__lines .line { grid-template-columns: 84px 1fr; } .cart-page__lines .line__img { width: 84px; } .cart-page__lines .line__price { grid-column: 2; text-align: left; } }
.notice { display: flex; gap: 1rem; padding: 1.4rem; border-radius: var(--radius); background: rgba(212, 178, 124, .08); border: 1px solid rgba(212, 178, 124, .25); }
.notice > .icon { color: var(--gold); width: 26px; height: 26px; }
.notice h2 { font-size: 1.1rem; margin-bottom: .4rem; }
.notice p { color: var(--muted); }
.checkout__main { display: grid; gap: 1.4rem; }
.checkout__options { display: grid; gap: .7rem; }
.option { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .25s, transform .25s var(--ease); }
.option:hover { border-color: var(--gold); transform: translateX(4px); }
.option > .icon:first-child { color: var(--gold); width: 28px; height: 28px; }
.option span { flex: 1; display: grid; font-size: .85rem; color: var(--muted); }
.option strong { color: var(--text); font-size: 1rem; }
.checkout__legal { font-size: .82rem; color: var(--faint); }
.checkout__legal a { color: var(--muted); }

/* contact */
.contact-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.contact-card { padding: 1.6rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; display: grid; gap: .4rem; transition: border-color .25s, transform .3s var(--ease); }
.contact-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.contact-card .icon { width: 30px; height: 30px; color: var(--gold); margin-bottom: .5rem; }
.contact-card h2 { font-size: 1.05rem; }
.contact-card p { color: var(--muted); font-size: .9rem; }

/* FAQ */
.faq { max-width: 900px; display: grid; padding-bottom: var(--sec); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h2 { font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 600; }
.faq__item summary .icon { transition: transform .35s var(--ease); flex: none; color: var(--gold); }
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__item > div { padding-bottom: 1.6rem; color: var(--muted); display: grid; gap: .8rem; max-width: 70ch; }

/* pages légales */
.legal { display: grid; gap: 2.5rem; padding-bottom: var(--sec); }
.legal__nav { display: grid; gap: 2rem; align-content: start; }
.legal__nav ul, .legal__nav ol { list-style: none; display: grid; gap: .2rem; margin-top: .8rem; }
.legal__nav a { display: block; padding: .35rem .7rem; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .9rem; }
.legal__nav a:hover { color: var(--text); background: var(--surface); }
.legal__nav a[aria-current] { color: var(--text); background: var(--surface-2); font-weight: 650; }
.legal__toc { display: none; }
@media (min-width: 1000px) {
  .legal { grid-template-columns: 260px minmax(0, 1fr); gap: 4rem; }
  .legal__nav { position: sticky; top: calc(var(--hdr-h) + 1.5rem); max-height: calc(100vh - var(--hdr-h) - 3rem); overflow-y: auto; }
  .legal__toc { display: block; }
}
.prose { max-width: 75ch; color: #ddd4c7; font-size: 1rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.1rem; }
.prose section { margin-top: 2.6rem; }
.prose section > * + * { margin-top: 1rem; }
.prose h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--text); scroll-margin-top: calc(var(--hdr-h) + 1rem); }
.prose h3 { font-size: 1.1rem; color: var(--text); margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: .4rem; }
.prose li::marker { color: var(--gold); }
.prose a { color: var(--gold-2); }
.prose strong { color: var(--text); }
.prose .lead { font-size: 1.15rem; color: var(--text); }
.prose .callout { padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--surface); border-left: 3px solid var(--gold); }
.prose .callout > * + * { margin-top: .8rem; }
.prose .updated { margin-top: 3rem; font-size: .85rem; color: var(--faint); }
.prose mark.todo { background: rgba(240, 192, 112, .16); color: var(--warn); padding: .05em .35em; border-radius: 4px; border: 1px dashed rgba(240, 192, 112, .5); }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--text); }
.prose .btn { margin-top: .5rem; }

/* 404 */
.notfound { display: grid; gap: 2.5rem; align-items: center; padding-block: 3rem var(--sec); }
.notfound > div:last-child { display: grid; gap: 1.2rem; }
.notfound__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.notfound__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) brightness(.7); }
@media (min-width: 900px) { .notfound { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ préférences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero__slide img { transform: none !important; }
  .marquee__track { animation: none; }
}

@media print {
  .announce, .hdr, .tabbar, .ftr, .toasts, .consent, .buybar, .project__bar .btn-row, .pin .wish, .pin__actions, .crumbs { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .masonry { columns: 3; }
  .pin { background: #fff; border: 1px solid #ccc; }
  .pin__price span { color: #444; }
  .display, .project__sum strong { color: #000; }
}
.icon--fill { fill: currentColor; }

/* Ajustements petits écrans */
@media (max-width: 560px) {
  .card__badges .badge { font-size: .64rem; padding: .22rem .5rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .card__badges .badge + .badge { display: none; }
  .card__wish { width: 36px; height: 36px; top: 6px; right: 6px; }
  .card__wish .icon { width: 17px; height: 17px; }
  .card__badges { top: 8px; left: 8px; max-width: calc(100% - 52px); }
  .pdp__buy { flex-wrap: nowrap; gap: .5rem; }
  .pdp__buy .qty button { width: 32px; }
  .pdp__buy .qty input { width: 1.8rem; }
  .pdp__add { min-width: 0; padding-inline: .9rem; }
  .pdp__add .icon { display: none; }
}
.swipe__result .grid { grid-template-columns: repeat(auto-fill, minmax(min(100% / 2 - 10px, 230px), 1fr)); }
.chip--radio span { color: inherit; font-weight: inherit; font-size: inherit; }

/* ------------------------------------------------------------ fluidité & 3D */
.is-scene { background: var(--bg, var(--surface)); }
img.is-pending { opacity: 0; }
img.img-in { animation: img-in .6s var(--ease) both; }
@keyframes img-in { from { opacity: 0; filter: blur(8px); } }

/* Photos en relief (WebGL) : le canvas recouvre l'image d'origine */
.depth-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s var(--ease); pointer-events: none; }
.depth-canvas.is-ready { opacity: 1; }
.hero__slide .depth-canvas { transform: scale(1.08); transition: opacity 1s var(--ease), transform 9s linear; }
.hero__slide.is-active .depth-canvas { transform: scale(1); }
.hero__slide figcaption { z-index: 1; }

/* Inclinaison 3D des cartes */
@media (hover: hover) and (pointer: fine) {
  .card__media { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out), box-shadow .4s; will-change: transform; }
  .card__media.is-tilting { transition: transform .12s linear, box-shadow .4s; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
  .card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 240, 215, .22), transparent 55%); }
  .card__media.is-tilting::after { opacity: 1; }
}

/* Annonce galerie 3D (accueil) */
.g3d-teaser { position: relative; display: grid; align-items: end; min-height: clamp(420px, 62vh, 620px); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; isolation: isolate; }
.g3d-teaser__media { position: absolute; inset: 0; z-index: -1; }
.g3d-teaser__media img { width: 100%; height: 100%; object-fit: cover; }
.g3d-teaser::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 7, 6, .92), rgba(8, 7, 6, .2) 60%), linear-gradient(to right, rgba(8, 7, 6, .6), transparent 60%); pointer-events: none; }
.g3d-teaser__body { display: grid; gap: 1rem; padding: clamp(1.5rem, 5vw, 4rem); max-width: 720px; }
.g3d-teaser__text { color: #e6ded2; max-width: 52ch; }
.g3d-teaser .btn { justify-self: start; }
.g3d-teaser:hover .btn { transform: translateY(-2px); }

.grid--gallery { grid-template-columns: repeat(auto-fill, minmax(min(100% / 2 - 10px, 260px), 1fr)); }
.card { content-visibility: auto; contain-intrinsic-size: auto 360px; }

/* Simulateur de budget : bien visible partout */
.budget { padding: clamp(1.4rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); border-radius: var(--radius-lg); background: radial-gradient(120% 120% at 0% 0%, rgba(212, 178, 124, .14), transparent 55%), var(--surface); border: 1px solid rgba(212, 178, 124, .22); }
.budget-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .4rem 1.2rem; padding: 1rem 1.3rem; margin-bottom: 1.2rem; border-radius: var(--radius); background: radial-gradient(140% 140% at 0% 0%, rgba(212, 178, 124, .16), transparent 60%), var(--surface); border: 1px solid rgba(212, 178, 124, .3); scroll-margin-top: calc(var(--hdr-h) + 70px); }
.budget-bar__label { display: flex; align-items: center; gap: .6rem; font-size: .95rem; white-space: nowrap; }
.budget-bar__label .icon { color: var(--gold); width: 24px; height: 24px; }
.budget-bar__label a { color: inherit; text-decoration: none; }
.budget-bar output { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--gold-2); white-space: nowrap; min-width: 8.5rem; text-align: right; }
.budget-bar__hint { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); }
@media (max-width: 640px) {
  .budget-bar { grid-template-columns: 1fr auto; }
  .budget-bar input { grid-column: 1 / -1; grid-row: 2; }
  .budget-bar output { font-size: 1.4rem; min-width: 0; }
}
.pdp__monthly { flex-wrap: wrap; }
.pdp__budget { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--text) !important; text-decoration: underline !important; text-underline-offset: .2em; }
.pdp__budget .icon { width: 14px; height: 14px; }
.hdr__nav > ul > li > a { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1599px) {
  .hdr__nav { margin-left: 1.2rem; }
  .hdr__nav > ul > li > a { padding: .5rem .7rem; font-size: .9rem; }
  .search-trigger { min-width: 0; border-color: transparent; padding: 0 .75rem; }
  .search-trigger span, .search-trigger kbd { display: none; }
}
@media (min-width: 1100px) and (max-width: 1259px) {
  .hdr__logo img { height: 38px; }
  .hdr__nav { margin-left: .6rem; }
  .hdr__nav > ul { gap: 0; }
  .hdr__nav > ul > li > a { padding: .45rem .5rem; font-size: .86rem; }
  .hdr__nav .pill-new { display: none; }
}

/* Bascule « Par mois / Total » */
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); }
.seg button { padding: .38rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--muted); transition: background-color .2s, color .2s; }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { background: var(--gold); color: #1a140c; }
.budget-bar { grid-template-columns: auto auto 1fr; }
.budget-bar output { grid-column: 3; justify-self: end; }
.budget-bar input[type="range"] { grid-column: 1 / -1; }
.budget-bar__label { gap: .5rem; }
.budget__control { grid-template-columns: 1fr auto; }
.budget__control .seg { grid-column: 1 / -1; justify-self: start; margin-top: .2rem; }
.budget__control output { font-size: 2.2rem; }
@media (max-width: 640px) {
  .budget-bar { grid-template-columns: auto 1fr; }
  .budget-bar .seg { grid-column: 2; justify-self: end; }
  .budget-bar output { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

/* ------------------------------------------------------------ Créer ma pièce (configurateur 3D) */
.pl { --pl-h: calc(100svh - var(--hdr-h) - 36px - 92px); }
.pl__intro { padding-block: .9rem .8rem; display: grid; gap: .3rem; }
.pl__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; }
.pl__title em { color: var(--gold-2); }
.pl__app { display: grid; grid-template-columns: minmax(0, 1fr) 390px; height: max(560px, var(--pl-h)); border-block: 1px solid var(--line); }
.pl__stage { position: relative; overflow: hidden; background: radial-gradient(ellipse 85% 75% at 50% 42%, #4a4038 0%, #2a241f 48%, #141110 100%); transition: background .6s; }
.pl__stage.is-evening { background: radial-gradient(ellipse 85% 75% at 50% 42%, #2c2520 0%, #17130f 55%, #0a0908 100%); }
.pl__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.pl__labels { position: absolute; inset: 0; pointer-events: none; }
.pl__labels span { position: absolute; transform: translate(-50%, -50%); padding: .15rem .5rem; border-radius: 6px; background: rgba(20, 17, 14, .82); color: var(--gold-2); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pl-model-loading { position: absolute; z-index: 4; left: .8rem; bottom: 4rem; margin: 0; padding: .65rem .9rem; border-radius: .7rem; background: rgba(20,17,14,.9); color: var(--text); border: 1px solid var(--line); font-size: .85rem; pointer-events: none; }
.pl-model-loading[hidden] { display: none; }
.pl__toolbar { position: absolute; top: .8rem; left: .8rem; display: flex; gap: .5rem; align-items: center; }
.pl__toolbar .seg { background: rgba(20, 17, 14, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pl__toolbar .seg button[aria-pressed="true"] { background: var(--gold); color: #1a140c; }
.pl__tool { background: rgba(20, 17, 14, .82); }
.pl__help { position: absolute; left: .9rem; bottom: .7rem; font-size: .75rem; font-weight: 600; color: rgba(243, 237, 228, .55); pointer-events: none; }
.is-plan .pl__help { display: none; }
.pl__empty { position: absolute; left: 50%; bottom: 2.6rem; transform: translateX(-50%); width: min(92%, 460px); display: flex; gap: .6rem; align-items: center; padding: .8rem 1rem; border-radius: 14px; background: rgba(20, 17, 14, .86); color: var(--text); font-size: .88rem; font-weight: 600; }
.pl__empty .icon { color: var(--gold); flex: none; }
.pl__sel { position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); width: min(96%, 620px); display: grid; grid-template-columns: 72px 1fr; gap: .4rem .9rem; align-items: center; padding: .7rem .8rem; border-radius: var(--radius); background: rgba(20, 17, 14, .92); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: toast-in .3s var(--ease-out); }
.pl__sel img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; background: #000; }
.pl__sel-txt { display: grid; line-height: 1.3; min-width: 0; }
.pl__sel-txt strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl__sel-txt small { color: var(--muted); font-size: .78rem; }
.pl__sel-txt small:last-child { color: var(--gold-2); }
.pl__sel-actions { grid-column: 1 / -1; display: flex; gap: .2rem; align-items: center; border-top: 1px solid var(--line); padding-top: .45rem; }
.pl__sel-actions .btn { margin-left: auto; }
.pl__flip .icon { transform: scaleX(-1); }
.pl__start { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 1rem; background: rgba(12, 11, 10, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-y: auto; }
.pl__start-in { width: min(100%, 860px); display: grid; gap: 1rem; text-align: center; justify-items: center; }
.pl__start-in > p:not(.eyebrow) { color: #e2d9cc; max-width: 60ch; }
.pl__start-grid { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin-top: .5rem; }
.pl-start-card { display: grid; text-align: left; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); transition: transform .3s var(--ease), border-color .3s; }
.pl-start-card:hover, .pl-start-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); }
.pl-start-card__img { aspect-ratio: 4 / 3; overflow: hidden; display: block; background: var(--surface-2); }
.pl-start-card__img img { width: 100%; height: 100%; object-fit: cover; }
.pl-start-card__empty { display: grid; place-items: center; height: 100%; color: var(--gold); }
.pl-start-card__empty .icon { width: 40px; height: 40px; }
.pl-start-card__txt { display: grid; padding: .7rem .8rem; }
.pl-start-card__txt small { color: var(--muted); font-size: .78rem; }
.pl__panel { display: flex; flex-direction: column; min-height: 0; background: var(--bg-2); border-left: 1px solid var(--line); }
.pl__tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.pl__tabs button { position: relative; padding: .9rem .3rem; font-size: .85rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; display: inline-flex; justify-content: center; align-items: center; gap: .3rem; }
.pl__tabs button[aria-selected="true"] { color: var(--text); border-color: var(--gold); }
.pl__body { flex: 1; overflow-y: auto; padding: 0 1.1rem 1.5rem; overscroll-behavior: contain; }
.pl-sec { padding: 1.1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .7rem; }
.pl-sec--tight { gap: .6rem; position: sticky; top: 0; background: var(--bg-2); z-index: 1; }
.pl-sec h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; justify-content: space-between; }
.pl-note { font-size: .8rem; color: var(--muted); }
.pl-field { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; font-size: .88rem; }
.pl-field input[type="range"], .pl-field select { grid-column: 1 / -1; }
.pl-field output { font-weight: 700; color: var(--gold-2); grid-row: 1; grid-column: 2; font-size: .85rem; }
.pl-field select { height: 40px; padding: 0 .8rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); }
.pl-presets, .pl-chips, .pl-add { display: flex; flex-wrap: wrap; gap: .4rem; }
.pl-presets button, .pl-chips button, .pl-add button { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .82rem; font-weight: 650; color: var(--text); transition: background-color .2s, border-color .2s; }
.pl-presets button:hover, .pl-chips button:hover, .pl-add button:hover { border-color: var(--text); }
.pl-presets button[aria-pressed="true"], .pl-chips button[aria-pressed="true"] { background: var(--text); color: #14110e; border-color: var(--text); }
.pl-add .icon, .pl-presets .icon { width: 16px; height: 16px; }
.pl-swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.pl-swatch { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid var(--bg-2); box-shadow: 0 0 0 1px var(--line-2); transition: transform .2s; }
.pl-swatch:hover { transform: scale(1.1); }
.pl-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold); }
.pl-color { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); cursor: pointer; }
.pl-color input { width: 34px; height: 34px; border: 0; border-radius: 50%; padding: 0; background: none; cursor: pointer; }
.pl-switch { position: relative; display: inline-block; }
.pl-switch input { position: absolute; opacity: 0; }
.pl-switch span { display: block; width: 42px; height: 24px; border-radius: 999px; background: var(--surface-3); transition: background-color .2s; cursor: pointer; }
.pl-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform .25s var(--ease); }
.pl-switch input:checked + span { background: var(--gold); }
.pl-switch input:checked + span::after { transform: translateX(18px); }
.pl-switch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.pl-item { display: grid; gap: .5rem; padding: .8rem; border-radius: 14px; background: var(--surface); }
.pl-item__head { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; }
.pl-item__head .icon-btn { width: 34px; height: 34px; }
.pl-item__head .icon { width: 18px; height: 18px; }
.pl-search { display: flex; align-items: center; gap: .5rem; height: 42px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.pl-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--text); }
.pl-cat { list-style: none; display: grid; gap: .35rem; padding-top: .6rem; }
.pl-prod { width: 100%; display: grid; grid-template-columns: 64px 1fr auto; gap: .7rem; align-items: center; padding: .45rem; border-radius: 12px; text-align: left; transition: background-color .2s; }
.pl-prod:hover { background: var(--surface); }
.pl-prod__img { width: 64px; height: 48px; border-radius: 8px; overflow: hidden; }
.pl-prod__img img { width: 100%; height: 100%; object-fit: cover; }
.pl-prod__img.is-black img, .pl-prod__img.is-white img { object-fit: contain; }
.pl-prod__txt { display: grid; line-height: 1.3; min-width: 0; }
.pl-prod__txt strong { font-size: .88rem; font-weight: 650; }
.pl-prod__txt small { font-size: .76rem; color: var(--muted); }
.pl-prod__add { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--gold); }
.pl-prod:hover .pl-prod__add { background: var(--gold); color: #1a140c; }
.pl-prod__add .icon { width: 18px; height: 18px; }
.pl-sum { list-style: none; display: grid; gap: .5rem; }
.pl-sum li { display: grid; grid-template-columns: 56px 1fr auto; gap: .7rem; align-items: center; }
.pl-sum img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; background: #000; }
.pl-sum span { display: grid; line-height: 1.3; font-size: .88rem; }
.pl-sum a { text-decoration: none; font-weight: 650; }
.pl-sum small { color: var(--gold-2); }
.pl-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .6rem; border-top: 1px solid var(--line); }
.pl-total strong { font-size: 1.3rem; }
.pl-actions { border-bottom: 0; }
.pl__fallback { display: none; padding-block: 2rem; color: var(--muted); }
.pl.is-fallback .pl__app { display: none; }
.pl.is-fallback .pl__fallback { display: block; }
body.is-app .ftr { margin-top: 0; }
@media (max-width: 999px) {
  .pl__app { grid-template-columns: 1fr; height: auto; }
  .pl__stage { height: 56svh; min-height: 340px; }
  .pl__panel { border-left: 0; }
  .pl__tabs { position: sticky; top: var(--hdr-h); z-index: 5; }
  body:has(.hdr.is-hidden) .pl__tabs { top: 0; }
  .pl__body { overflow: visible; }
  .pl__start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl__start-grid > :last-child { grid-column: 1 / -1; }
  .pl__start-in .h2 { font-size: 1.8rem; }
  .pl__start-in > p:not(.eyebrow) { font-size: .88rem; }
  .pl-sec--tight { top: calc(var(--hdr-h) + 46px); }
  .pl__help { display: none; }
}
@media (max-width: 640px) {
  .pl__sel { grid-template-columns: 56px 1fr; }
  .pl__sel img { width: 56px; height: 42px; }
  .pl__sel-actions .btn { padding-inline: .7rem; }
  .pl__tabs button { font-size: .78rem; padding-inline: .1rem; }
}

/* Configurateur : parcours guidé */
.pl__addbtn { position: absolute; top: .8rem; right: .8rem; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.pl__tabs i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .7rem; font-weight: 800; background: var(--surface-3); color: var(--muted); }
.pl__tabs button[aria-selected="true"] i { background: var(--gold); color: #1a140c; }
.pl-next { padding: 1.1rem 0 .4rem; }
@media (max-width: 640px) {
  .pl__tabs i { display: none; }
  .pl__addbtn { top: auto; bottom: .8rem; right: .8rem; }
  .pl__sel:not([hidden]) ~ .pl__addbtn, .pl__addbtn:has(~ .pl__sel:not([hidden])) { display: none; }
}

/* Configurateur : formes, angles, obstacles, budget */
.pl__tool:disabled { opacity: .4; cursor: default; }
.pl__total { position: absolute; top: 3.7rem; right: .8rem; display: grid; text-align: right; padding: .45rem .8rem; border-radius: 12px; background: rgba(20, 17, 14, .82); line-height: 1.25; pointer-events: none; }
.pl__total strong { font-size: 1rem; }
.pl__total span { font-size: .75rem; color: var(--gold-2); }
.pl__hint { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(92%, 440px); padding: .55rem .9rem; border-radius: 12px; background: rgba(20, 17, 14, .9); color: var(--text); font-size: .85rem; font-weight: 650; text-align: center; pointer-events: none; animation: toast-in .25s var(--ease-out); }
.pl__sel-img { padding: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; line-height: 0; }
.pl-vertex, .pl-insert { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: auto; touch-action: none; }
.pl-vertex { width: 22px; height: 22px; background: var(--gold); border: 3px solid #14110e; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: grab; }
.pl-vertex:active { cursor: grabbing; }
.pl-insert { width: 22px; height: 22px; display: grid; place-items: center; background: rgba(20, 17, 14, .82); color: var(--gold-2); font-size: .95rem; font-weight: 800; line-height: 1; opacity: .75; }
.pl-insert:hover { opacity: 1; }
@media (pointer: coarse) { .pl-vertex { width: 30px; height: 30px; } .pl-insert { width: 28px; height: 28px; } }
.is-drawing .pl__canvas { cursor: crosshair; }
.pl-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.pl-shapes button { display: grid; justify-items: center; gap: .35rem; padding: .6rem .2rem; border-radius: 12px; border: 1px solid var(--line-2); font-size: .76rem; font-weight: 650; transition: border-color .2s, background-color .2s; }
.pl-shapes button:hover { border-color: var(--text); }
.pl-shapes button[aria-pressed="true"] { border-color: var(--gold); background: var(--surface); }
.pl-shape { width: 34px; height: 26px; background: var(--muted); }
.pl-shapes button[aria-pressed="true"] .pl-shape { background: var(--gold); }
.pl-shape--l { clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 55%, 55% 100%, 0 100%); }
.pl-shape--u { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 68% 55%, 32% 55%, 32% 100%, 0 100%); }
.pl-shape--libre { clip-path: polygon(12% 0, 100% 18%, 86% 100%, 42% 78%, 0 100%); }
.pl-monthly { text-align: right; color: var(--gold-2); font-size: .85rem; margin-top: -.4rem; }
.pl-monthly a { color: inherit; text-decoration: none; }
.pl-budget { display: flex; gap: .45rem; align-items: center; padding: .6rem .8rem; border-radius: 12px; background: var(--surface); font-size: .85rem; font-weight: 650; color: var(--gold-2); }
.pl-budget .icon { width: 18px; height: 18px; flex: none; }
.pl-budget.is-over { color: #f0a78c; }

/* Version privée du gérant */
.private-bar { background: #3b1d12; color: #ffd7b8; font-size: .8rem; font-weight: 700; text-align: center; padding: .45rem 1rem; }
.badge--hidden { background: rgba(227, 38, 47, .9); color: #fff; border-color: transparent; }
.variant__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: .45rem; box-shadow: 0 0 0 1px var(--line-2); vertical-align: -1px; }
.totals .monthly small { color: var(--gold-2); font-weight: 650; }

/* ------------------------------------------------------------ inspirations Roche Bobois (octobre 2026) */
/* En-tête : logo au centre, navigation répartie à gauche et à droite */
.hdr__in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; }
.hdr__left, .hdr__right { display: flex; align-items: center; height: 100%; min-width: 0; }
.hdr__right { justify-content: flex-end; gap: .25rem; }
.hdr__actions { margin-left: 0; }
@media (max-width: 699px) { .hdr__wish { display: none; } }
@media (min-width: 1100px) {
  .hdr__nav, .hdr__left .hdr__nav { margin-left: -.9rem; }
  .hdr__right .hdr__nav { margin-left: 0; }
  .search-trigger, .search-trigger:hover { min-width: 0; border-color: transparent; padding: 0 .75rem; color: var(--text); font-weight: 600; }
  .search-trigger kbd { display: none; }
  .search-trigger span { display: none; }
}
@media (min-width: 1440px) { .search-trigger span { display: inline; } }

/* Accueil : intérieurs « signature », grandes photos pleine largeur et peu de texte */
.signature { display: grid; gap: 6px; padding-top: 6px; }
.sig { position: relative; display: block; height: min(88svh, 880px); min-height: 460px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.sig__media { position: absolute; inset: 0; }
.sig__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.sig:hover .sig__media img { transform: scale(1.03); }
.sig::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(100deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .2) 38%, transparent 62%); }
.sig__text { position: absolute; z-index: 1; top: clamp(1.5rem, 5vw, 3.5rem); left: var(--gutter); display: grid; justify-items: start; gap: .35rem; max-width: min(30rem, 84%); text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }
.sig__eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.sig__name { font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 3.8rem); line-height: 1; }
.sig__line { font-size: .98rem; color: rgba(255, 255, 255, .9); }
.sig__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin-top: .35rem; font-size: 1.1rem; font-weight: 750; }
.sig__price small { font-size: .85rem; font-weight: 650; color: var(--gold-2); }
.sig__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: .35em; }
.sig__more .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.sig:hover .sig__more .icon { transform: translateX(4px); }
@media (max-width: 699px) {
  .sig { height: 74svh; min-height: 420px; }
  .sig::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .2) 45%, transparent 70%); }
}

/* Cartes produit : versions disponibles */
.card__variants { display: flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--muted); }
.card__variants i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--line-2); }
.card__variants span { margin-left: .15rem; }

/* Fiche produit : partage, dimensions sous le nom, rendez-vous au showroom */
.pdp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.pdp__share { flex: none; margin-top: .35rem; border: 1px solid var(--line-2); }
.pdp__share .icon { width: 20px; height: 20px; }
.pdp__dims { display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem; color: var(--muted); }
.pdp__dims .icon { width: 18px; height: 18px; color: var(--gold); }
.pdp__contact { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 420px) { .pdp__contact { grid-template-columns: 1fr; } }

/* Revenir en haut de la page */
.totop { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 54; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: #14110e; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s var(--ease), visibility .3s; }
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.totop .icon { width: 22px; height: 22px; transform: rotate(180deg); }
body.has-buybar .totop { bottom: calc(150px + env(safe-area-inset-bottom)); }
body.is-app .totop { display: none; }
@media (min-width: 1100px) { .totop { right: 24px; bottom: 24px; } body.has-buybar .totop { bottom: 96px; } }
@media print { .totop { display: none !important; } }


/* Fiche produit : « Voir en 3D » et « Voir chez moi » (réalité augmentée) */
.pdp__3d { display: grid; gap: .6rem; }
.pdp__3d .btn { border-color: rgba(236, 211, 165, .45); }
.pdp__3d-note { font-size: .78rem; color: var(--muted); margin-top: -.3rem; }
.pdp__3d .is-pulse { animation: ar-pulse 1.4s var(--ease) 3; border-color: var(--gold); }
@keyframes ar-pulse { 50% { box-shadow: 0 0 0 8px rgba(212, 178, 124, .25); } }
.arqr { width: min(420px, calc(100vw - 32px)); padding: 1.6rem; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-align: center; }
.arqr::backdrop { background: rgba(0, 0, 0, .65); }
.arqr h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; margin-bottom: 1rem; }
.arqr__close { position: absolute; top: .6rem; right: .6rem; }
.arqr__code { width: 220px; margin: 0 auto 1rem; padding: 10px; border-radius: 14px; background: #fff; }
.arqr__code svg { display: block; width: 100%; height: auto; }
.arqr ol { text-align: left; display: grid; gap: .35rem; padding-left: 1.2rem; font-size: .9rem; color: var(--muted); }

/* Créer ma pièce : poignée de rotation, distances aux murs, glisser-déposer, catalogue en vignettes */
.pl-rot { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; pointer-events: auto; touch-action: none; cursor: grab; background: var(--gold); color: #1a140c; border: 3px solid rgba(20, 17, 14, .85); box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .6); transition: transform .15s var(--ease); }
.pl-rot:hover { transform: translate(-50%, -50%) scale(1.08); }
.pl-rot:active { cursor: grabbing; }
.pl-rot .icon { width: 20px; height: 20px; }
@media (pointer: coarse) { .pl-rot { width: 48px; height: 48px; } }
.pl__labels .pl-cote { background: var(--gold-2); color: #1a140c; font-size: .72rem; padding: .1rem .45rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.pl__help .icon { width: 14px; height: 14px; display: inline; vertical-align: -2px; color: var(--gold); }
.pl__drop { position: absolute; inset: 1rem; display: none; place-items: center; align-content: center; gap: .5rem; border: 2px dashed var(--gold); border-radius: var(--radius); background: rgba(212, 178, 124, .08); color: var(--gold-2); font-weight: 700; pointer-events: none; }
.pl__drop .icon { width: 28px; height: 28px; }
.pl__stage.is-dropping .pl__drop { display: grid; }
.pl-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.pl-cat > .pl-note { grid-column: 1 / -1; }
.pl-prod { position: relative; grid-template-columns: 1fr; gap: .45rem; padding: .45rem; background: var(--surface); border: 1px solid transparent; transition: border-color .2s, transform .2s var(--ease), background-color .2s; }
.pl-prod:hover { background: var(--surface-2); border-color: var(--line-2); transform: translateY(-2px); }
.pl-prod[draggable="true"] { cursor: grab; }
.pl-prod__img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; }
.pl-prod__txt strong { font-size: .84rem; line-height: 1.25; }
.pl-prod__txt small { font-size: .72rem; }
.pl-prod__add { position: absolute; top: .8rem; right: .8rem; width: 30px; height: 30px; background: rgba(20, 17, 14, .8); }
.pl-prod__txt small b { color: var(--text); font-weight: 750; }
.pl-prod__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.pl-prod__tags em { font-style: normal; font-size: .66rem; font-weight: 700; padding: .12rem .4rem; border-radius: 999px; background: var(--surface-3); color: var(--muted); }
.pl-prod__tags em.is-3d { background: rgba(212, 178, 124, .18); color: var(--gold-2); }
@media (max-width: 480px) {
  .pl__toolbar { gap: .3rem; left: .5rem; top: .6rem; }
  .pl__toolbar .pl__tool { width: 38px; height: 38px; }
  .pl__toolbar .seg button { padding-inline: .6rem; }
}

/* Créer ma pièce : boutons de la vue */
.pl__pad { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); display: grid; gap: .35rem; padding: .35rem; border-radius: 999px; background: rgba(20, 17, 14, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); }
.pl__pad .icon-btn { width: 40px; height: 40px; }
.pl__pad .icon-btn .icon { width: 20px; height: 20px; }
.pl__pad [data-cam="next"] { display: none; }
.pl.is-eye .pl__pad [data-cam="next"] { display: inline-grid; }
.pl.is-eye .pl__pad [data-cam="in"], .pl.is-eye .pl__pad [data-cam="out"], .pl.is-plan .pl__pad [data-cam="left"], .pl.is-plan .pl__pad [data-cam="right"] { display: none; }
@media (max-width: 640px) { .pl__pad { top: auto; bottom: 4.2rem; transform: none; } .pl__pad .icon-btn { width: 38px; height: 38px; } }

/* Créer ma pièce : manipulation façon jeu, fiche du meuble, catalogue */
.pl__help b { font-weight: 800; }
.pl__help .is-bad { color: #ff8a8d; }
.pl__help .is-warn { color: #f5b860; }
.pl__sel { grid-template-columns: 72px 1fr auto; }
.pl__sel-img { padding: 0; border-radius: 8px; overflow: hidden; }
.pl__sel-x { width: 34px; height: 34px; align-self: start; }
.pl__sel-x .icon { width: 18px; height: 18px; }
.pl__sel-actions { overflow-x: auto; scrollbar-width: none; gap: .1rem; }
.pl__sel-actions::-webkit-scrollbar { display: none; }
.pl-act { flex: none; display: inline-grid; justify-items: center; gap: .15rem; min-width: 54px; padding: .35rem .35rem .3rem; border-radius: 10px; font-size: .66rem; font-weight: 700; color: var(--muted); transition: background-color .15s, color .15s; }
.pl-act:hover, .pl-act:focus-visible { background: var(--surface-2); color: var(--text); }
.pl-act .icon { width: 20px; height: 20px; }
.pl-sel-status { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 650; padding: .35rem .6rem; border-radius: 10px; }
.pl-sel-status .icon { width: 16px; height: 16px; flex: none; }
.pl-sel-status.is-warn { background: rgba(240, 160, 48, .14); color: #f5b860; }
.pl-sel-status.is-bad { background: rgba(229, 72, 77, .14); color: #ff8a8d; }
.pl-ctx { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; padding: .45rem .6rem; border-radius: 12px; background: var(--surface); font-size: .82rem; }
.pl-ctx > span:first-child { font-weight: 700; color: var(--gold-2); }
.pl-ctx small { color: var(--muted); font-size: .74rem; }
.pl-step { display: inline-flex; align-items: center; gap: .3rem; }
.pl-step button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--text); }
.pl-step button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.pl-step button:disabled { opacity: .35; cursor: not-allowed; }
.pl-step .icon { width: 16px; height: 16px; }
.pl-step output { min-width: 1.4em; text-align: center; font-weight: 800; }
.pl-ctx__btn { margin-left: auto; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .76rem; font-weight: 700; }
.pl-ctx__btn:hover { border-color: var(--text); }
.pl-lit { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 999px; border: 1px dashed var(--line-2); font-size: .78rem; font-weight: 700; color: var(--text); }
button.pl-lit:hover { border-color: var(--gold); color: var(--gold); }
.pl-lit.is-on { border-style: solid; border-color: rgba(212, 178, 124, .5); background: rgba(212, 178, 124, .12); }
.pl-lit .icon { width: 14px; height: 14px; }
.pl-lit button { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; margin-left: .1rem; color: var(--muted); }
.pl-lit button:hover { color: var(--text); background: var(--surface-3); }
.pl-lit small { color: var(--muted); font-weight: 600; }
/* étiquette qui suit le meuble tenu */
.pl-tag { position: absolute; z-index: 4; transform: translate(-50%, -100%); padding: .3rem .65rem; border-radius: 999px; background: rgba(20, 17, 14, .9); color: var(--text); font-size: .78rem; font-weight: 700; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6); }
.pl-tag.is-bad { background: #c93a3f; color: #fff; }
.pl-tag.is-warn { background: #e0922a; color: #1a140c; }
/* question posée sur la vue */
.pl-ask { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 1rem; background: rgba(12, 11, 10, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: toast-in .2s var(--ease-out); }
.pl-ask__in { width: min(100%, 420px); display: grid; gap: .6rem; padding: 1.2rem 1.3rem; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.pl-ask__in strong { font-size: 1.05rem; }
.pl-ask__in p { color: var(--muted); font-size: .9rem; }
.pl-ask__btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.pl-ask__btns .icon { width: 16px; height: 16px; }
/* catalogue */
.pl-search__x { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); }
.pl-search__x:hover { color: var(--text); background: var(--surface-2); }
.pl-search__x .icon { width: 16px; height: 16px; }
.pl-types { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .1rem; }
.pl-types:empty { display: none; }
.pl-types::-webkit-scrollbar { display: none; }
.pl-types button { flex: none; padding: .3rem .65rem; border-radius: 8px; font-size: .76rem; font-weight: 650; color: var(--muted); background: var(--surface); }
.pl-types button small { opacity: .6; font-size: .7rem; }
.pl-types button:hover { color: var(--text); }
.pl-types button[aria-pressed="true"] { background: rgba(212, 178, 124, .18); color: var(--gold-2); }
.pl-mode { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; padding: .55rem .5rem .55rem .8rem; border-radius: 12px; background: rgba(212, 178, 124, .14); border: 1px solid rgba(212, 178, 124, .35); color: var(--gold-2); font-size: .85rem; font-weight: 700; }
.pl-mode span { flex: 1; }
.pl-mode .icon { width: 18px; height: 18px; flex: none; }
.pl-mode .icon-btn { width: 32px; height: 32px; color: var(--text); }
.pl-catbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .8rem; font-size: .78rem; color: var(--muted); }
.pl-catbar select { height: 32px; padding: 0 .6rem; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: .78rem; }
.pl-prod__in { position: absolute; left: .8rem; top: .8rem; display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .45rem; border-radius: 999px; background: rgba(20, 17, 14, .82); color: var(--gold-2); font-size: .66rem; font-weight: 750; }
.pl-prod__in .icon { width: 12px; height: 12px; }
.pl-prod__txt small.pl-prod__size { opacity: .8; }
.pl-link { color: var(--gold-2); text-decoration: underline; font-weight: 700; }
/* catalogue : suggestions, vignettes de rubriques, rubrique ouverte */
.pl-sugg { display: grid; gap: .45rem; padding: 1rem 0 .4rem; }
.pl-sugg h3 { display: flex; align-items: center; gap: .4rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pl-sugg h3 .icon { width: 16px; height: 16px; }
.pl-sugg__why { font-size: .84rem; font-weight: 700; margin-top: .35rem; }
.pl-strip { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: .3rem; margin-inline: -.1rem; }
.pl-mini { flex: none; width: 112px; display: grid; gap: .2rem; padding: .35rem; border-radius: 12px; background: var(--surface); border: 1px solid transparent; text-align: left; scroll-snap-align: start; transition: border-color .2s, transform .2s var(--ease); cursor: pointer; }
.pl-mini:hover, .pl-mini:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.pl-mini__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #000; }
.pl-mini__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-mini__img.is-black img, .pl-mini__img.is-white img { object-fit: contain; }
.pl-mini strong { font-size: .72rem; line-height: 1.2; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-mini small { font-size: .72rem; color: var(--gold-2); font-weight: 700; }
.pl-browse { padding: 1rem 0 .2rem; display: flex; justify-content: center; }
.pl-browse .seg { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.pl-browse .seg button { padding-inline: .4rem; }
.pl-tiles { padding-top: .9rem; display: grid; gap: .5rem; }
.pl-tiles h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pl-tiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.pl-tile { position: relative; display: grid; text-align: left; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid transparent; transition: border-color .2s, transform .25s var(--ease); }
.pl-tile:hover, .pl-tile:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.pl-tile__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.pl-tile__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pl-tile__img.is-black img, .pl-tile__img.is-white img { object-fit: contain; }
.pl-tile:hover .pl-tile__img img { transform: scale(1.05); }
.pl-tile__txt { display: grid; padding: .5rem .65rem .6rem; line-height: 1.25; }
.pl-tile__txt strong { font-size: .86rem; font-weight: 700; }
.pl-tile__txt small { font-size: .72rem; color: var(--muted); }
.pl-tile__badge { position: absolute; left: .5rem; top: .5rem; padding: .15rem .5rem; border-radius: 999px; background: var(--gold); color: #1a140c; font-size: .66rem; font-weight: 800; }
.pl-listhead { display: grid; gap: .35rem; padding: 1rem 0 .3rem; }
.pl-listhead strong { font-size: 1.15rem; font-family: var(--font-display); font-weight: 400; }
.pl-back { justify-self: start; display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 700; color: var(--gold-2); }
.pl-back .icon { width: 16px; height: 16px; transform: rotate(90deg); }
.pl-back:hover { color: var(--text); }
.pl-listhead + .pl-types, .pl-types + .pl-types { margin-top: .45rem; }
/* fiche du meuble : volet « autres modèles » / « va bien avec » */
.pl-act[aria-pressed="true"] { background: rgba(212, 178, 124, .18); color: var(--gold-2); }
.pl-selstrip { grid-column: 1 / -1; display: grid; gap: .4rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.pl-selstrip__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .78rem; font-weight: 700; color: var(--gold-2); }
.pl-selstrip__head span { display: inline-flex; align-items: center; gap: .35rem; }
.pl-selstrip__head .icon { width: 16px; height: 16px; }
.pl-selstrip .pl-mini { width: 96px; background: var(--surface-2); }
/* téléphone, tablette : la fiche du meuble devient un volet fixé en bas de l'écran, sous la vue 3D (qui reste visible) */
@media (max-width: 999px) {
  .pl__sel { position: fixed; z-index: 40; left: 8px; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); transform: none; width: auto; max-height: 48svh; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-2); box-shadow: 0 -12px 40px -12px rgba(0, 0, 0, .7); }
  .pl.is-stage-off .pl__sel { display: none; }
}
@media (max-width: 640px) {
  .pl__sel { grid-template-columns: 56px 1fr auto; }
  .pl-act { min-width: 48px; }
}

/* Fiche d'un ensemble : ce qu'il contient */
.pdp__set { margin: 1.2rem 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius, 14px); background: rgba(255, 255, 255, .02); }
.pdp__set-title { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pdp__set ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pdp__set li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: .75rem; }
.pdp__set-img { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; display: block; }
.pdp__set-img img { width: 100%; height: 100%; object-fit: cover; }
.pdp__set-name { display: grid; line-height: 1.25; }
.pdp__set-name small { color: var(--muted); font-size: .8rem; }
.pdp__set-qty { color: var(--gold, currentColor); font-weight: 700; }
.pdp__set-alone { font-size: .82rem; white-space: nowrap; }
@media (max-width: 480px) { .pdp__set li { grid-template-columns: 44px 1fr; } .pdp__set-img { width: 44px; height: 44px; } .pdp__set-alone { grid-column: 2; } }
.pdp__only { margin: .6rem 0; padding: .6rem .8rem; border-radius: 10px; background: rgba(227, 38, 47, .12); border: 1px solid rgba(227, 38, 47, .4); font-size: .9rem; }

/* =====================================================================
   Créer ma pièce : espace plein écran (barre du haut, panneau à gauche, vue 3D)
   ===================================================================== */
body.is-app { overflow: hidden; }
.pl { position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; background: var(--bg); }
.pl-top { flex: none; height: 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0 1rem; background: #0b0a09; border-bottom: 1px solid var(--line); }
.pl-top__back { justify-self: start; display: inline-flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; padding: .35rem .5rem; border-radius: 10px; }
.pl-top__back:hover { background: var(--surface); }
.pl-top__arrow { width: 18px; height: 18px; transform: scaleX(-1); }
.pl-top__brand { font-family: var(--font-display); font-size: 1.2rem; }
.pl-steps { display: flex; gap: .25rem; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.pl-steps button { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem .45rem .5rem; border-radius: 999px; font-size: .88rem; font-weight: 700; color: var(--muted); transition: background-color .2s, color .2s; }
.pl-steps button:hover { color: var(--text); }
.pl-steps button i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .74rem; font-weight: 800; background: var(--surface-3); color: var(--muted); }
.pl-steps button[aria-current="step"] { background: var(--gold); color: #1a140c; }
.pl-steps button[aria-current="step"] i { background: #1a140c; color: var(--gold-2); }
.pl-steps__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--surface-3); color: var(--text); font-size: .7rem; font-weight: 800; }
.pl-steps button[aria-current="step"] .pl-steps__count { background: #1a140c; color: var(--gold-2); }
.pl-top__total { justify-self: end; display: grid; text-align: right; line-height: 1.2; }
.pl-top__total strong { font-size: 1.05rem; }
.pl-top__total span { font-size: .74rem; color: var(--gold-2); }
.pl .pl__app { flex: 1; min-height: 0; min-width: 0; height: auto; display: grid; grid-template-columns: 410px minmax(0, 1fr); border: 0; }
.pl .pl__panel { min-height: 0; border-left: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.pl .pl__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1.2rem 1.5rem; }
.pl__foot { flex: none; display: flex; gap: .6rem; padding: .8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg-2); }
.pl__foot[hidden] { display: none; }
.pl__foot .btn { flex: 1; justify-content: center; }
.pl__foot .btn .icon { width: 18px; height: 18px; }
.pl .pl__stage { height: auto; min-height: 0; }
.pl .pl__start { position: absolute; inset: 0; z-index: 10; background: radial-gradient(ellipse 80% 70% at 50% 40%, #2a241f 0%, #0c0b0a 100%); backdrop-filter: none; }
.pl__start-in .h2 em { color: var(--gold-2); }
.pl-start-own { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; text-align: left; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--gold); color: #1a140c; box-shadow: 0 18px 40px -18px rgba(212, 178, 124, .6); transition: transform .25s var(--ease); }
.pl-start-own:hover { transform: translateY(-2px); }
.pl-start-own strong { display: block; font-size: 1.05rem; }
.pl-start-own small { display: block; font-size: .84rem; opacity: .8; }
.pl-start-own__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #1a140c; color: var(--gold-2); }
.pl-start-own__ico .icon { width: 24px; height: 24px; }
.pl__start-or { font-size: .88rem; color: var(--muted); margin-top: .4rem; }
.pl .pl__start-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl__start-quit { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
/* étapes guidées de la pièce */
.pl-wiz { display: grid; gap: .35rem; padding: 1.3rem 0 .6rem; }
.pl-wiz__step { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.pl-wiz__title { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; }
.pl-wiz__lead { font-size: .88rem; color: var(--muted); }
.pl-wiz__bar { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: .4rem; }
.pl-wiz__bar span { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width .4s var(--ease); }
.pl-shapes--big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding: .8rem 0; }
.pl-shapes--big button { display: grid; justify-items: center; gap: .3rem; padding: 1.1rem .6rem .9rem; border-radius: 16px; background: var(--surface); border: 2px solid transparent; text-align: center; transition: border-color .2s, background-color .2s; }
.pl-shapes--big button:hover { border-color: var(--line-2); }
.pl-shapes--big button[aria-pressed="true"] { border-color: var(--gold); background: rgba(212, 178, 124, .1); }
.pl-shapes--big .pl-shape { width: 72px; height: 56px; margin-bottom: .3rem; }
.pl-shapes--big strong { font-size: .92rem; }
.pl-shapes--big small { font-size: .74rem; color: var(--muted); }
.pl-openadd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pl-openadd button { display: grid; justify-items: center; gap: .25rem; padding: .9rem .4rem .7rem; border-radius: 14px; background: var(--surface); border: 1px solid transparent; transition: border-color .2s; }
.pl-openadd button:hover { border-color: var(--gold); }
.pl-openadd svg { width: 46px; height: 46px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; }
.pl-openadd strong { font-size: .84rem; }
.pl-openadd small { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; color: var(--gold-2); font-weight: 700; }
.pl-openadd small .icon { width: 12px; height: 12px; }
/* bouton et volet « Murs & sol », toujours disponibles sur la vue */
.pl-amb { position: absolute; top: .8rem; right: .8rem; z-index: 3; display: inline-flex; align-items: center; gap: .45rem; height: 42px; padding: 0 1rem 0 .85rem; border-radius: 999px; background: rgba(20, 17, 14, .86); border: 1px solid var(--line-2); color: var(--text); font-size: .84rem; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s; }
.pl-amb:hover, .pl-amb[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-2); }
.pl-amb .icon { width: 18px; height: 18px; }
.pl-ambpop { position: absolute; z-index: 6; top: 3.8rem; right: .8rem; width: min(340px, calc(100% - 1.6rem)); max-height: calc(100% - 4.6rem); overflow-y: auto; padding: .3rem 1rem 1rem; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: toast-in .2s var(--ease-out); }
.pl-ambpop__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; background: var(--bg-2); }
.pl-ambpop__head .icon-btn { width: 34px; height: 34px; }
.pl-ambpop .pl-sec { padding: .7rem 0; }
.pl-ambpop .pl-sec:last-child { border-bottom: 0; }
/* barre d'actions flottante au-dessus du meuble choisi */
.pl-actbar { position: absolute; z-index: 5; transform: translate(-50%, -100%); display: grid; gap: .25rem; padding: .35rem; border-radius: 18px; background: rgba(14, 12, 10, .95); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); transition: opacity .15s; animation: toast-in .2s var(--ease-out); }
.pl-actbar.is-below { transform: translate(-50%, 0); }
.pl-actbar.is-away { opacity: 0; pointer-events: none; }
.pl-actbar__row { display: flex; align-items: stretch; }
.pl-actbar button { display: grid; justify-items: center; align-content: center; gap: .2rem; min-width: 62px; padding: .45rem .45rem .4rem; border-radius: 12px; font-size: .68rem; font-weight: 700; color: #e9dfd2; white-space: nowrap; transition: background-color .15s, color .15s; }
.pl-actbar button:hover, .pl-actbar button:focus-visible { background: rgba(212, 178, 124, .16); color: var(--gold-2); }
.pl-actbar button[aria-pressed="true"] { background: var(--gold); color: #1a140c; }
.pl-actbar button .icon { width: 20px; height: 20px; }
.pl-actbar__sep { width: 1px; margin: .35rem .2rem; background: var(--line-2); }
.pl-rotpop { display: grid; grid-template-columns: 3.4em 1fr; align-items: center; gap: .5rem; padding: .35rem .7rem .2rem; border-bottom: 1px solid var(--line); }
.pl-rotpop output { font-weight: 800; color: var(--gold-2); text-align: center; font-variant-numeric: tabular-nums; }
.pl-rotpop input { width: 100%; accent-color: var(--gold); }
/* curseur « déplacer » sur un meuble (croix de flèches dorée) */
.pl__canvas.is-over { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 2l4.5 4.5h-3V12h5.5V9l4.5 5-4.5 5v-3h-5.5v5.5h3L14 26l-4.5-4.5h3V16H7v3l-4.5-5L7 9v3h5.5V6.5h-3z' fill='%23d4b27c' stroke='%231a140c' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, move; }
/* fiche du meuble choisi */
.pl-fiche { display: grid; gap: .55rem; padding: 1rem 0 1.4rem; }
.pl-fiche__img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #000; padding: 0; }
.pl-fiche__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-fiche__img.is-black img, .pl-fiche__img.is-white img { object-fit: contain; }
.pl-fiche__name { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; margin-top: .3rem; }
.pl-fiche__price b { font-size: 1.1rem; }
.pl-fiche__price small { color: var(--gold-2); font-size: .78rem; }
.pl-fiche__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.pl-fiche__seg { display: grid; grid-template-columns: 1fr 1fr; margin-top: .6rem; }
/* catalogue */
.pl-catnav { padding-top: 1rem; }
.pl-catrow { display: flex; gap: .5rem; }
.pl-roomsel { position: relative; flex: 1; }
.pl-roomsel select { width: 100%; height: 42px; padding: 0 2.4rem 0 1rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 700; font-size: .88rem; appearance: none; -webkit-appearance: none; cursor: pointer; }
.pl-roomsel .icon { position: absolute; right: .9rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; color: var(--gold-2); }
.pl-autobtn { flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 42px; padding: 0 .9rem; border-radius: 999px; border: 1px solid rgba(227, 38, 47, .55); color: #ff8a8d; font-size: .8rem; font-weight: 750; }
.pl-autobtn:hover { background: rgba(227, 38, 47, .12); }
.pl-autobtn .icon { width: 16px; height: 16px; }
.pl-prod__img { position: relative; }
.pl-prod__cta { position: absolute; left: 50%; bottom: .55rem; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border-radius: 999px; background: var(--gold); color: #1a140c; font-size: .7rem; font-weight: 800; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s var(--ease); pointer-events: none; }
.pl-prod__cta .icon { width: 14px; height: 14px; }
.pl-prod:hover .pl-prod__cta, .pl-prod:focus-visible .pl-prod__cta { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .pl-prod__cta { display: none; } }
/* téléphone, tablette : vue en haut, panneau en dessous */
@media (max-width: 999px) {
  .pl-top { height: 52px; grid-template-columns: auto 1fr auto; gap: .4rem; padding: 0 .5rem; }
  .pl-top__brand { display: none; }
  .pl-steps { justify-self: center; }
  .pl-steps button { padding: .35rem .7rem .35rem .4rem; font-size: .78rem; gap: .35rem; }
  .pl-steps button i { width: 20px; height: 20px; }
  .pl .pl__app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 50fr) minmax(0, 50fr); }
  .pl__foot { padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); }
  .pl__foot .btn { min-width: 0; padding-inline: .8rem; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-roomsel { min-width: 0; }
  .pl-catrow .pl-autobtn { padding: 0 .8rem; }
  .pl .pl__stage { order: -1; height: auto; min-height: 0; }
  .pl .pl__panel { border-right: 0; border-top: 1px solid var(--line); }
  .pl .pl__body { overflow-y: auto; padding: 0 1rem 1rem; }
  .pl .pl-sec--tight { top: 0; }
  .pl .pl__start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl .pl__start-grid > :last-child { grid-column: auto; }
  .pl__help { display: none; }
  /* barre d’actions : posée en bas de la vue, sur toute la largeur */
  .pl-actbar { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; transform: none !important; }
  .pl-actbar__row { overflow-x: auto; scrollbar-width: none; justify-content: space-between; }
  .pl-actbar button { flex: 1 0 auto; min-width: 50px; padding-inline: .25rem; font-size: .62rem; }
  .pl-amb span { display: none; }
  .pl-amb { width: 42px; padding: 0; justify-content: center; }
}
@media (max-width: 560px) {
  .pl-top__total { display: none; }
  .pl-steps button:not([aria-current="step"]) span { display: none; }
  .pl-steps button:not([aria-current="step"]) { padding-right: .4rem; }
  .pl .pl__start-in .h2 { font-size: 1.6rem; }
  .pl-start-own { grid-template-columns: auto 1fr; }
  .pl-start-own > .icon { display: none; }
}
@media (max-width: 640px) { .pl.is-ready .pl__pad { bottom: 5.4rem; } }
/* poignées pour tirer les murs (vue Plan) et valeurs à taper */
.pl__labels .pl-wallh { position: absolute; width: 46px; height: 16px; padding: 0; border-radius: 999px; transform: translate(-50%, -50%) rotate(var(--a, 0deg)); pointer-events: auto; touch-action: none; background: var(--gold); border: 2px solid #1a140c; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6); transition: transform .15s var(--ease), background-color .15s; }
.pl__labels .pl-wallh::after { content: ""; position: absolute; inset: 4px 15px; border-left: 2px solid #1a140c; border-right: 2px solid #1a140c; }
.pl__labels .pl-wallh.is-ns { cursor: ns-resize; }
.pl__labels .pl-wallh.is-ew { cursor: ew-resize; }
.pl__labels .pl-wallh:hover { background: var(--gold-2); transform: translate(-50%, -50%) rotate(var(--a, 0deg)) scale(1.12); }
@media (pointer: coarse) { .pl__labels .pl-wallh { width: 56px; height: 22px; } }
.pl-field .pl-num { grid-row: 1; grid-column: 2; display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); }
.pl-num input { width: 74px; height: 32px; padding: 0 .45rem; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--gold-2); font-weight: 750; font-size: .88rem; text-align: right; -moz-appearance: textfield; }
.pl-num input::-webkit-outer-spin-button, .pl-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pl-num input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.pl-num i { font-style: normal; }
/* page d'entrée « espace de création » (plein écran, avant les étapes) */
.pl .pl__start { display: block; overflow-y: auto; padding: 0; }
.pl .pl__start[hidden] { display: none; }
.pl-intro { min-height: 100%; display: grid; grid-template-rows: auto 1fr; padding: 1.2rem clamp(1rem, 4vw, 3rem) 2.5rem; }
.pl-intro__quit { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .88rem; text-decoration: none; padding: .4rem .6rem; border-radius: 10px; }
.pl-intro__quit:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.pl-intro__main { align-self: center; justify-self: center; width: min(100%, 980px); display: grid; justify-items: center; gap: 1.1rem; text-align: center; animation: pl-page .5s var(--ease-out); }
.pl-intro__main[hidden] { display: none; }
.pl-intro__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.02; max-width: 16ch; }
.pl-intro__title em { color: var(--gold-2); }
.pl-intro__lead { max-width: 60ch; color: #ddd2c4; font-size: clamp(.95rem, 1.6vw, 1.08rem); }
.pl-intro__steps { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin: .8rem 0 .4rem; padding: 0; }
.pl-intro__steps li { display: grid; justify-items: center; gap: .2rem; padding: 1.1rem .6rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.pl-intro__steps i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .3rem; background: var(--gold); color: #1a140c; font-weight: 800; }
.pl-intro__steps strong { font-size: .92rem; }
.pl-intro__steps small { font-size: .76rem; color: var(--muted); }
.pl-intro__go { display: grid; justify-items: center; gap: .7rem; margin-top: .6rem; }
.pl-intro__next { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: 280px; height: 60px; padding: 0 2rem; border-radius: 999px; background: var(--gold); color: #1a140c; font-size: 1.12rem; font-weight: 800; box-shadow: 0 20px 44px -18px rgba(212, 178, 124, .75); transition: transform .25s var(--ease), box-shadow .25s; }
.pl-intro__next:hover { transform: translateY(-2px); box-shadow: 0 26px 50px -18px rgba(212, 178, 124, .9); }
.pl-intro__next .icon { width: 22px; height: 22px; }
.pl-intro__next.is-alt { height: 50px; min-width: 240px; background: transparent; color: var(--text); border: 1px solid var(--line-2); box-shadow: none; font-size: .98rem; }
.pl-intro__next.is-alt:hover { border-color: var(--gold); color: var(--gold-2); }
.pl-intro__alt { display: inline-flex; align-items: center; gap: .4rem; color: var(--gold-2); font-weight: 700; font-size: .92rem; text-decoration: underline; text-underline-offset: .25em; padding: .4rem; }
.pl-intro .pl__start-grid { width: 100%; margin-top: .6rem; }
@keyframes pl-page { from { opacity: 0; transform: translateY(18px); } }
/* étapes de la pièce : chaque étape arrive comme une nouvelle page */
[data-pl-tab="room"].is-enter > * { animation: pl-step .4s var(--ease-out) both; }
[data-pl-tab="room"].is-enter > :nth-child(2) { animation-delay: .06s; }
[data-pl-tab="room"].is-enter > :nth-child(3) { animation-delay: .12s; }
@keyframes pl-step { from { opacity: 0; transform: translateX(26px); } }
/* bas du panneau : gros bouton « Suivant » bien visible */
.pl__foot { display: grid; gap: .6rem; }
.pl-foot__dots { display: flex; justify-content: center; gap: 6px; }
.pl-foot__dots i { width: 26px; height: 4px; border-radius: 4px; background: var(--surface-3); transition: background-color .3s; }
.pl-foot__dots i.is-on { background: var(--gold); }
.pl-foot__row { display: flex; gap: .6rem; align-items: center; }
.pl-foot__next { flex: 1; min-width: 0; height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 0 1.2rem; border-radius: 999px; background: var(--gold); color: #1a140c; font-size: 1.05rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 14px 32px -16px rgba(212, 178, 124, .8); transition: transform .2s var(--ease); }
.pl-foot__next:hover { transform: translateY(-1px); }
.pl-foot__next .icon { width: 20px; height: 20px; flex: none; }
.pl-foot__back { flex: none; height: 56px; display: inline-flex; align-items: center; gap: .4rem; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); font-weight: 700; font-size: .92rem; white-space: nowrap; }
.pl-foot__back:hover { border-color: var(--text); }
.pl-foot__back .icon { width: 18px; height: 18px; }
@media (max-width: 999px) {
  .pl-foot__next, .pl-foot__back { height: 50px; font-size: .95rem; }
  .pl-foot__back { padding: 0 .9rem; }
}
@media (max-width: 760px) {
  .pl-intro__steps { grid-template-columns: 1fr; gap: .45rem; text-align: left; }
  .pl-intro__steps li { grid-template-columns: auto 1fr; grid-template-rows: auto auto; justify-items: start; column-gap: .8rem; row-gap: 0; padding: .7rem .9rem; }
  .pl-intro__steps i { grid-row: 1 / 3; margin: 0; align-self: center; }
  .pl-intro__next { min-width: 0; width: 100%; }
  .pl-intro__go { width: 100%; }
}
/* bouton « Murs » de la vue : pleins / transparents / masqués (le libellé montre l'état actuel) */
.pl-walls { display: inline-flex; align-items: center; gap: .4rem; height: 42px; padding: 0 .9rem 0 .75rem; border-radius: 999px; background: rgba(20, 17, 14, .82); border: 1px solid var(--line-2); color: var(--text); font-size: .82rem; font-weight: 700; white-space: nowrap; transition: border-color .2s, color .2s; }
.pl-walls:hover { border-color: var(--gold); color: var(--gold-2); }
.pl-walls .icon { width: 18px; height: 18px; }
.pl-walls span { display: none; }
.pl-walls:not([data-mode]) .pl-walls__full, .pl-walls[data-mode="full"] .pl-walls__full, .pl-walls[data-mode="glass"] .pl-walls__glass, .pl-walls[data-mode="off"] .pl-walls__off { display: inline; }
.pl-walls[data-mode="glass"], .pl-walls[data-mode="off"] { border-color: var(--gold); color: var(--gold-2); }
.pl.is-plan .pl-walls { display: none; }
@media (max-width: 560px) {
  .pl__toolbar [data-pl-photo], .pl__toolbar [data-pl-redo] { display: none; }
  .pl-walls { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .pl-walls span { display: none !important; }
}
/* barre d'outils de la vue : tout sur une ligne (« Murs & sol » à droite), retour à la ligne si l'écran est étroit */
.pl .pl__toolbar { right: .8rem; flex-wrap: wrap; row-gap: .45rem; pointer-events: none; }
.pl .pl__toolbar > * { pointer-events: auto; }
.pl .pl__toolbar .pl-amb { position: static; margin-left: auto; }
.pl .pl-ambpop { top: 4rem; }
.pl .pl__body { overflow-x: hidden; }
@media (max-width: 999px) { .pl .pl__toolbar { left: .5rem; right: .5rem; top: .6rem; } }

/* Téléphone : les photos du catalogue restent visibles dès l'entrée dans Mes meubles. */
.pl-mobile-catalogue { display: none; }
@media (max-width: 999px) {
  .pl[data-mode="furniture"] .pl__app { grid-template-rows: minmax(140px, 25fr) minmax(0, 75fr); }
  .pl[data-mode="furniture"] .pl-mobile-catalogue { display: flex; flex: none; align-items: center; justify-content: space-between; gap: .4rem; padding: .45rem .8rem; border-bottom: 1px solid var(--line); }
  .pl-mobile-catalogue strong { font-size: .85rem; }
  .pl-mobile-catalogue button { padding: .4rem .65rem; border-radius: 999px; background: var(--surface-2); color: var(--gold-2); font-size: .78rem; font-weight: 700; min-height: 36px; }
  .pl[data-mode="furniture"] .pl-catnav { padding-top: .5rem; }
  .pl[data-mode="furniture"] .pl-search { margin-bottom: .4rem; }
  .pl[data-mode="furniture"] .pl-types { margin-top: .4rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
  .pl[data-mode="furniture"] .pl-types button { flex: none; white-space: nowrap; }
  .pl[data-mode="furniture"] .pl-catbar { padding-top: .3rem; }
  .pl[data-mode="furniture"] .pl-prod__img { aspect-ratio: 4 / 3; }
  .pl[data-mode="furniture"] .pl__pad { display: none; }
  .pl[data-mode="furniture"].is-mobile-room .pl__app { grid-template-rows: minmax(0, 65fr) minmax(160px, 35fr); }
  .pl[data-mode="furniture"].is-mobile-room .pl__pad { display: grid; }
  .pl[data-mode="furniture"].is-mobile-room .pl-catnav, .pl[data-mode="furniture"].is-mobile-room .pl-catbar { display: none; }
  .pl[data-mode="furniture"].is-mobile-room .pl-cat { padding-top: .4rem; }
}

@media (max-width: 999px) {
  .pl-mobile-catalogue strong { margin-right: auto; }
  .pl[data-mode="furniture"] .pl-catnav { gap: .4rem; padding-block: .5rem; position: static; }
  .pl[data-mode="furniture"] .pl-search { margin-bottom: 0; }
  .pl[data-mode="furniture"]:not(.has-mobile-filters) .pl-types,
  .pl[data-mode="furniture"]:not(.has-mobile-filters) .pl-catbar { display: none; }
  .pl[data-mode="furniture"].is-mobile-room [data-pl-mobile-filters] { display: none; }
}

.menu__planner { margin-bottom: 1rem; min-height: 52px; justify-content: space-between; }

.pl__labels .pl-room-element { position:absolute; transform:translate(-50%,-50%); min-width:44px; height:44px; padding:0 .4rem; border-radius:12px; background:var(--gold); border:2px solid #1a140c; color:#1a140c; font-size:.8rem; font-weight:800; pointer-events:auto; touch-action:none; cursor:grab; box-shadow:0 3px 12px #0008; }
.pl__labels .pl-room-element.is-selected { background:#fff; outline:3px solid var(--gold); }
.pl__labels .pl-room-element:active { cursor:grabbing; }

/* Garder la pièce lisible pendant le choix des meubles, y compris avec une sélection. */
@media (max-width:999px) {
  .pl[data-mode="furniture"] .pl__app { grid-template-rows:minmax(220px,42fr) minmax(0,58fr); }
  .pl[data-mode="furniture"]:not(.is-mobile-room) .pl-actbar,
  .pl[data-mode="furniture"]:not(.is-mobile-room) .pl__labels { display:none; }
  .pl[data-mode="furniture"]:not(.has-mobile-filters) .pl-search { display:none; }
  .pl[data-mode="furniture"] .pl-catnav { padding-block:.35rem; }
  .pl[data-mode="furniture"].is-mobile-room .pl__app { grid-template-rows:minmax(220px,65fr) minmax(160px,35fr); }
}
.pl__labels .pl-room-element { z-index:2; }