/* Démo boutique : les trois thèmes au choix dans le panel (01/11/2026). Chargé après app.css.
   Chaque thème pose ses couleurs et ses polices sur <body> (elles priment sur celles du store), puis habille l'accueil
   (menu.js), la fiche (dish.js) et le panier. ?theme=nike|drop|mur force un thème. */

/* ---------- briques communes aux 3 thèmes ---------- */
.ta-pointure { margin-top: 30px; }
.ta-pointure__head { display: flex; align-items: baseline; justify-content: space-between; }
.rail { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 4px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail__b { flex: none; min-width: 52px; height: 48px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--line); font-weight: 700; font-size: 15px; transition: background .15s, color .15s, border-color .15s; }
.rail__b.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ta-pointure__note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.ta-pointure__note b { color: var(--ink); }
.pcard__cat { font-size: 14px; color: var(--muted); }
.lbl { display: block; margin-top: 10px; font-size: 14px; font-weight: 500; font-style: normal; color: #D33918; }
.lbl--nouveau { color: #007D48; }
.offer { margin: 0 0 14px; padding: 14px; border-radius: var(--radius-lg); background: var(--accent); color: var(--accent-ink); }
.offer b { display: block; font-size: 16px; }
.offer span { display: block; font-size: 12.5px; opacity: .85; margin-top: 2px; }
.offer__bar { height: 7px; margin-top: 10px; border-radius: 4px; background: color-mix(in srgb, var(--accent-ink) 18%, transparent); overflow: hidden; }
.offer__bar i { display: block; height: 100%; background: var(--accent-ink); border-radius: 4px; transition: width .4s; }
@keyframes secoue { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.is-shake { animation: secoue .4s; }

/* =========================================================================================
   NIKE : blanc et noir, la photo en héros, titres très gras, boutons pilule, grille aérée
   ========================================================================================= */
body.style-nike { --bg: #FFFFFF; --surface: #F5F5F5; --ink: #111111; --muted: #707072; --line: #E5E5E5; --accent: #111111; --accent-ink: #FFFFFF;
  --font-ui: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-title: 'Anton', Impact, sans-serif; --title-case: uppercase;
  --radius: 8px; --radius-lg: 0px; --shadow: none; --install-bg: #111; --install-ink: #fff; color-scheme: light; }
html:has(body.style-nike) { background: #fff; }
.style-nike .announce { background: #F5F5F5; color: #111; font-weight: 500; font-size: 12.5px; }
.style-nike .header { background: rgba(255, 255, 255, .94); border-bottom: 0; }
.style-nike .brand__logo { height: 40px; }
.style-nike .n-hero { margin: -14px -16px 0; aspect-ratio: 4 / 4.4; overflow: hidden; background: #F5F5F5; cursor: pointer; }
.style-nike .n-hero__img { width: 100%; height: 100%; object-fit: cover; }
.style-nike .n-hero__txt { padding: 22px 0 4px; }
.style-nike .n-hero__txt small { font-size: 15px; font-weight: 500; }
.style-nike .n-hero__txt h1 { margin-top: 4px; font-size: 50px; line-height: .9; letter-spacing: -.005em; }
.style-nike .n-hero__txt p { margin: 10px 0 0; font-size: 15px; line-height: 1.45; max-width: 36ch; }
.style-nike .n-pills { display: flex; gap: 10px; margin-top: 18px; }
.style-nike .n-pill { height: 42px; padding: 0 22px; border-radius: 999px; background: #111; color: #fff; font-weight: 500; font-size: 15px; }
.style-nike .n-pill--ghost { background: #fff; color: #111; box-shadow: inset 0 0 0 1.5px #CACACB; }
.style-nike h2, .style-nike .n-sec h2, .style-nike .group__title, .style-nike .ta-pointure__head h2 { font-family: var(--font-ui); text-transform: none; font-weight: 500; font-size: 22px; letter-spacing: -.01em; color: #111; }
.style-nike .n-sec { margin: 40px 0 14px; }
.style-nike .n-car { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.style-nike .n-car::-webkit-scrollbar { display: none; }
.style-nike .n-c { flex: 0 0 72%; max-width: 280px; scroll-snap-align: start; font-size: 15px; line-height: 1.35; cursor: pointer; }
.style-nike .n-c__ph { aspect-ratio: 4 / 5; background: #F5F5F5; overflow: hidden; }
.style-nike .n-c__ph img { width: 100%; height: 100%; object-fit: cover; }
.style-nike .n-c b { display: block; font-weight: 500; }
.style-nike .n-c > span { display: block; color: #707072; }
.style-nike .n-c .price { margin-top: 6px; }
.style-nike .ta-pointure { margin-top: 40px; padding: 18px 16px; margin-left: -16px; margin-right: -16px; background: #F5F5F5; }
.style-nike .ta-pointure .rail { margin-left: -16px; margin-right: -16px; }
.style-nike .rail__b { border-radius: 8px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px #E5E5E5; font-weight: 500; }
.style-nike .rail__b.is-on { background: #111; color: #fff; box-shadow: none; }
.style-nike .link { color: #111; text-decoration: underline; font-weight: 500; }
.style-nike .n-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.style-nike .n-tile { position: relative; aspect-ratio: 1; overflow: hidden; background: #F5F5F5; }
.style-nike .n-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.style-nike .n-tile:active img { transform: scale(1.03); }
.style-nike .n-tile b { position: absolute; left: 10px; bottom: 10px; background: #fff; padding: 8px 15px; border-radius: 999px; font-weight: 500; font-size: 14px; }
.style-nike .cats { margin-top: 34px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid #E5E5E5; gap: 22px; padding-top: 6px; padding-bottom: 0; }
.style-nike .cat { height: 42px; padding: 0; border-radius: 0; background: none; border: 0; color: #707072; font-weight: 500; font-size: 15px; box-shadow: none; }
.style-nike .cat.is-active { color: #111; box-shadow: inset 0 -2px 0 #111; }
.style-nike .group__title { margin: 30px 0 14px; }
.style-nike .pgrid { gap: 28px 8px; }
.style-nike .pcard__media { border-radius: 0; background: #F5F5F5; }
.style-nike .pcard__name { font-family: var(--font-ui); text-transform: none; font-weight: 500; font-size: 15px; margin-top: 2px; }
.style-nike .pcard .lbl { margin-top: 10px; }
.style-nike .pcard .price { font-family: var(--font-ui); font-weight: 500; font-size: 15px; margin-top: 6px; }
.style-nike .pcard .add { width: 34px; height: 34px; background: #fff; color: #111; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.style-nike .nav { background: rgba(255, 255, 255, .97); border-top: 1px solid #E5E5E5; }
.style-nike .nav__item { color: #707072; font-weight: 500; }
.style-nike .nav__item.is-active { color: #111; }
.style-nike .nav__bubble { background: #111; color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.style-nike .nav__badge { background: #D33918; color: #fff; }
.style-nike .cartbar__btn { border-radius: 999px; background: #111; color: #fff; font-family: var(--font-ui); }
.style-nike .cartbar__count { border-radius: 50%; background: #fff; color: #111; }
/* fiche Nike */
.style-nike .sheet { background: #fff; }
.style-nike .sheet__media { aspect-ratio: 4 / 4.2; border-radius: 22px 22px 0 0; background: #F5F5F5; }
.style-nike .sheet__head { flex-direction: column; gap: 2px; }
.style-nike .sheet__head h2 { font-family: var(--font-ui); text-transform: none; font-weight: 500; font-size: 24px; letter-spacing: -.01em; }
.style-nike .sheet__head .price { color: #111; font-weight: 500; font-size: 16px; margin-top: 8px; }
.style-nike .sheet__body .pills { margin-bottom: 4px; }
.style-nike .sheet__body .pill { background: none; color: #D33918; padding: 0; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.style-nike .opt { padding: 0; background: none; border: 0; border-radius: 0; margin-top: 26px; }
.style-nike .opt__head h3 { font-family: var(--font-ui); text-transform: none; font-weight: 500; font-size: 16px; }
.style-nike .opt__rule { display: none; }
.style-nike .opt__list--grid { grid-template-columns: repeat(3, 1fr); }
.style-nike .opt__list--grid .choice { border: 0; box-shadow: inset 0 0 0 1px #E5E5E5; border-radius: 8px; font-weight: 400; min-height: 50px; }
.style-nike .opt__list--grid .choice.is-on { background: #fff; color: #111; box-shadow: inset 0 0 0 1.5px #111; font-weight: 600; }
.style-nike .opt__list--grid .choice.is-out { background: #F5F5F5; box-shadow: none; opacity: .55; }
.style-nike .opt[data-group="pointure"] .choice__name::before { content: "EU "; }
.style-nike .sheet__foot { background: #fff; border-top: 1px solid #E5E5E5; }
.style-nike .btn { border-radius: 999px; background: #111; color: #fff; font-weight: 500; font-family: var(--font-ui); text-transform: none; }
.style-nike .btn--ghost { background: #fff; color: #111; border: 0; box-shadow: inset 0 0 0 1.5px #CACACB; }
.style-nike .btn--wa { background: #111; }
.style-nike .qty { background: #fff; border: 1.5px solid #CACACB; }
.style-nike .line { border-radius: 0; background: #fff; border: 0; border-bottom: 1px solid #E5E5E5; padding: 0 0 14px; }
.style-nike .line__img { border-radius: 0; width: 96px; height: 120px; background: #F5F5F5; }
.style-nike .line__name { font-family: var(--font-ui); text-transform: none; font-weight: 500; font-size: 15px; }
.style-nike .summary { border-radius: 0; background: none; border: 0; padding: 4px 0; }
.style-nike .summary__row--total .price { color: #111; }
.style-nike .modes { border-radius: 999px; background: #F5F5F5; }
.style-nike .mode.is-on { background: #111; color: #fff; }
.style-nike .field { border-radius: 8px; background: #fff; border-color: #CACACB; }
.style-nike .offer { border-radius: 0; background: #F5F5F5; color: #111; }
.style-nike .offer__bar { background: #E5E5E5; }
.style-nike .offer__bar i { background: #111; }
.style-nike .demo-note { color: #707072; }

/* =========================================================================================
   DROP : nuit et jaune, bandeau qui défile, titres géants, chiffres en monospace
   ========================================================================================= */
body.style-drop { --bg: #0A0A0A; --surface: #161616; --ink: #F4F4F4; --muted: #9A9A9A; --line: #2A2A2A; --accent-ink: #0A0A0A;
  --font-ui: 'Inter', system-ui, sans-serif; --font-title: 'Anton', Impact, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --title-case: uppercase;
  --radius: 12px; --radius-lg: 16px; --shadow: none; color-scheme: dark; }
html:has(body.style-drop) { background: #0A0A0A; }
.style-drop .header { background: rgba(10, 10, 10, .85); border-bottom: 0; }
.style-drop .d-tick { margin: -14px -16px 0; overflow: hidden; background: var(--accent); color: var(--accent-ink); font: 400 15px/32px var(--font-title); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.style-drop .d-tick div { display: inline-block; animation: defile 26s linear infinite; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .style-drop .d-tick div { animation: none; } }
.style-drop .d-hero { position: relative; margin: 0 -16px; height: min(122vw, 560px); overflow: hidden; cursor: pointer; }
.style-drop .d-hero__img { width: 100%; height: 100%; object-fit: cover; }
.style-drop .d-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0) 38%, rgba(10, 10, 10, .96)); }
.style-drop .d-kick { position: absolute; z-index: 2; top: 14px; left: 16px; font: 700 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; background: #0A0A0A; color: var(--accent); padding: 6px 9px; border-radius: 6px; }
.style-drop .d-hero h1 { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 76px; font-size: clamp(64px, 22vw, 104px); line-height: .82; letter-spacing: -.01em; color: #F4F4F4; }
.style-drop .d-hero h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px #F4F4F4; }
.style-drop .d-meta { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; font: 700 18px var(--font-mono); }
.style-drop .d-cta { height: 46px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 400 18px var(--font-title); letter-spacing: .03em; text-transform: uppercase; }
.style-drop .ta-pointure__head h2 { font-size: 30px; }
.style-drop .rail__b { font-family: var(--font-mono); border-color: #2A2A2A; color: #CFCFCF; }
.style-drop .ta-pointure__note b { color: var(--accent); }
.style-drop .link { color: var(--accent); }
.style-drop .cats { background: rgba(10, 10, 10, .92); }
.style-drop .cat { background: #161616; border-color: #2A2A2A; }
.style-drop .cat.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.style-drop .group__title { font-size: 40px; color: var(--accent); }
.style-drop .pgrid { gap: 18px 10px; }
.style-drop .pcard__n { position: absolute; top: 8px; left: 10px; font: 400 32px/1 var(--font-title); color: rgba(255, 255, 255, .92); text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.style-drop .pcard__last { position: absolute; bottom: 10px; left: 8px; font: 700 10px var(--font-mono); text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 4px 7px; border-radius: 5px; }
.style-drop .pcard__name { font-family: var(--font-title); font-size: 19px; letter-spacing: .01em; }
.style-drop .pcard .price { font: 700 14px var(--font-mono); color: #CFCFCF; }
.style-drop .nav { background: rgba(14, 14, 14, .96); border-top: 1px solid #1f1f1f; }
.style-drop .nav__item.is-active { color: var(--accent); }
.style-drop .btn, .style-drop .cartbar__btn { font-family: var(--font-title); text-transform: uppercase; font-weight: 400; font-size: 19px; letter-spacing: .03em; }
.style-drop .cartbar__btn { background: var(--accent); color: var(--accent-ink); }
.style-drop .cartbar__count { background: var(--accent-ink); color: var(--accent); }
.style-drop .sheet__head h2 { font-size: 40px; line-height: .92; }
.style-drop .sheet__head .price { font: 700 19px var(--font-mono); color: var(--ink); }
.style-drop .opt { background: none; border: 0; padding: 0; }
.style-drop .opt__head h3 { font-size: 22px; }
.style-drop .opt__list--grid .choice { font-family: var(--font-mono); border-color: #2A2A2A; }
.style-drop .opt__list--grid .choice.is-out { border-style: dashed; }
.style-drop .summary__row--total .price, .style-drop .line .price { font-family: var(--font-mono); }

/* =========================================================================================
   LE MUR : une paire par écran, on glisse vers le haut, la pointure sous le pouce
   ========================================================================================= */
body.style-mur { --bg: #000000; --surface: #141414; --ink: #FFFFFF; --muted: rgba(255, 255, 255, .7); --line: #2A2A2A; --accent-ink: #000000;
  --font-ui: 'Archivo', 'Inter', system-ui, sans-serif; --font-title: 'Archivo', system-ui, sans-serif; --title-case: uppercase;
  --radius: 14px; --radius-lg: 18px; --shadow: none; color-scheme: dark; }
html:has(body.style-mur) { background: #000; }
.style-mur h1, .style-mur h2, .style-mur h3 { font-weight: 900; letter-spacing: -.03em; }
.style-mur .header { display: none; }
.style-mur main:has(#screenMenu:not([hidden])) { max-width: none; padding: 0; }
.style-mur #screenMenu { padding: 0; }
.style-mur .cartbar { display: none; }
.style-mur .nav { background: rgba(0, 0, 0, .86); border-top: 1px solid rgba(255, 255, 255, .08); }
.style-mur .nav__item.is-active { color: #fff; }
.style-mur .m-hud { position: fixed; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 12px; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.style-mur .m-hud img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.style-mur .m-tabs { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; }
.style-mur .m-tabs::-webkit-scrollbar { display: none; }
.style-mur .m-tabs button { flex: none; font: 700 15px var(--font-ui); color: rgba(255, 255, 255, .62); padding-bottom: 4px; }
.style-mur .m-tabs button.is-on { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.style-mur .m-feed { position: fixed; top: 0; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.style-mur .m-feed::-webkit-scrollbar { display: none; }
.style-mur .m-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #111; }
.style-mur .m-slide__img { width: 100%; height: 100%; object-fit: cover; }
.style-mur .m-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .9) 100%); }
.style-mur .m-side { position: absolute; z-index: 3; right: 12px; bottom: 214px; display: flex; flex-direction: column; gap: 18px; }
.style-mur .m-side button { display: grid; justify-items: center; gap: 4px; font: 700 11px var(--font-ui); color: #fff; }
.style-mur .m-side svg { width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); stroke-width: 2.2; }
.style-mur .m-info { position: absolute; z-index: 3; left: 14px; right: 74px; bottom: 132px; }
.style-mur .m-tag { display: inline-block; font: 800 10.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 4px 8px; border-radius: 4px; }
.style-mur .m-info h2 { margin-top: 10px; font-size: 34px; line-height: .95; color: #fff; }
.style-mur .m-info p { margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, .78); }
.style-mur .m-info p b { color: #fff; }
.style-mur .m-buy { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 48px; display: flex; gap: 8px; }
.style-mur .m-sizes { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.style-mur .m-sizes::-webkit-scrollbar { display: none; }
.style-mur .m-sizes button { flex: none; min-width: 46px; height: 58px; padding: 0 8px; border-radius: 12px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 800 15px var(--font-ui); color: #fff; }
.style-mur .m-sizes button.is-on { background: #fff; color: #000; }
.style-mur .m-sizes button.is-off { opacity: .32; text-decoration: line-through; }
.style-mur .m-go { flex: none; width: 104px; height: 58px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font: 900 15px/1.05 var(--font-ui); text-transform: uppercase; }
.style-mur .m-go small { display: block; font: 700 12px var(--font-ui); text-transform: none; }
.style-mur .m-hint { position: absolute; z-index: 3; left: 14px; bottom: 14px; margin: 0; display: flex; justify-content: flex-start; align-items: center; gap: 4px; font: 600 10px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.style-mur .m-hint svg { width: 12px; height: 12px; animation: monte 1.6s ease-in-out infinite; }
@keyframes monte { 50% { transform: translateY(-4px); } }
.style-mur .sheet__head h2 { font-size: 32px; line-height: .95; }
.style-mur .opt { background: none; border: 0; padding: 0; }
.style-mur .opt__list--grid .choice { border-color: #2A2A2A; }
.style-mur .line__name { font-weight: 900; }


/* =========================================================================================
   MAISON (03/11/2026) : parfumerie de niche. Sépia, ivoire, serif doré. Signature : l'arche (la fenêtre de la
   distillerie), qui cadre le héros, chaque flacon et les familles olfactives.
   ========================================================================================= */
body.style-maison { --bg: #14100C; --surface: #1F1812; --ink: #F1E8D8; --muted: #B8A58A; --line: #3A2D21; --accent: #C9A35A; --accent-ink: #14100C;
  --font-ui: 'Jost', 'Helvetica Neue', Arial, sans-serif; --font-title: 'Cormorant Garamond', Georgia, serif; --title-case: none;
  --radius: 4px; --radius-lg: 4px; --shadow: none; --install-bg: #C9A35A; --install-ink: #14100C; --arche: 999px 999px 4px 4px; color-scheme: dark; }
html:has(body.style-maison) { background: #14100C; }
.style-maison .announce { background: #1F1812; color: #C9A35A; letter-spacing: .16em; text-transform: uppercase; font-size: 10.5px; font-weight: 500; }
.style-maison .header { background: rgba(20, 16, 12, .92); border-bottom: 1px solid #2A2018; }
.style-maison .brand__logo { height: 42px; }
/* héros : la photo dans une grande arche, le texte en dessous, centré comme une page de catalogue */
.style-maison .x-hero { margin: 4px -4px 0; text-align: center; }
.style-maison .x-hero__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arche); border: 1px solid #3A2D21; }
.style-maison .x-hero__txt { padding: 26px 12px 0; }
.style-maison .x-hero__txt small { display: block; color: #C9A35A; letter-spacing: .22em; text-transform: uppercase; font-size: 11px; }
.style-maison .x-hero__txt h1 { margin-top: 12px; font-weight: 500; font-size: 42px; line-height: 1.02; color: #F1E8D8; }
.style-maison .x-hero__txt p { margin: 12px auto 0; max-width: 32ch; color: #B8A58A; font-size: 15px; line-height: 1.5; }
.style-maison .x-btn { margin-top: 22px; height: 48px; padding: 0 28px; border-radius: 999px; background: #C9A35A; color: #14100C; font-weight: 500; letter-spacing: .06em; font-size: 14px; text-transform: uppercase; }
.style-maison .x-decant { margin: 44px 0 0; padding: 22px 0; border-top: 1px solid #3A2D21; border-bottom: 1px solid #3A2D21; text-align: center; }
.style-maison .x-orn { color: #C9A35A; font-size: 14px; }
.style-maison .x-decant p { margin: 8px 0 0; font-family: var(--font-title); font-size: 24px; font-style: italic; color: #B8A58A; }
.style-maison .x-decant b { font-style: normal; font-weight: 600; color: #F1E8D8; }
.style-maison .x-h { margin: 44px 0 20px; text-align: center; font-weight: 500; font-size: 32px; color: #F1E8D8; scroll-margin-top: 90px; }
/* la collection : une fiche éditoriale par parfum */
.style-maison .x-list { display: flex; flex-direction: column; gap: 46px; }
.style-maison .x-p { cursor: pointer; }
.style-maison .x-p__ph { position: relative; width: 84%; margin: 0 auto; }
.style-maison .x-p__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arche); background: #1F1812; }
.style-maison .x-p__n { position: absolute; left: -14px; top: 46%; font-family: var(--font-title); font-style: italic; font-size: 22px; color: #C9A35A; writing-mode: vertical-rl; transform: rotate(180deg); }
.style-maison .x-p__b { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(20, 16, 12, .85); color: #C9A35A; font-style: normal; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.style-maison .x-p__txt { text-align: center; padding: 18px 6px 0; }
.style-maison .x-p__fam { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8C7A62; }
.style-maison .x-p__txt h3 { margin-top: 6px; font-size: 34px; font-weight: 500; color: #F1E8D8; }
.style-maison .x-p__notes { margin: 8px 0 0; font-family: var(--font-title); font-style: italic; font-size: 19px; color: #C9A35A; }
.style-maison .x-p__txt p { margin: 8px auto 0; max-width: 34ch; color: #B8A58A; font-size: 14.5px; line-height: 1.5; }
.style-maison .x-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.style-maison .x-size { display: flex; flex-direction: column; gap: 2px; padding: 11px 4px; border: 1px solid #3A2D21; border-radius: 4px; color: #F1E8D8; font-size: 12.5px; }
.style-maison .x-size span { color: #B8A58A; }
.style-maison .x-size b { font-weight: 500; font-size: 15px; color: #F1E8D8; }
.style-maison .x-size.is-off { opacity: .45; } .style-maison .x-size.is-off b { font-weight: 400; color: #B8A58A; }
.style-maison .x-p.is-off { opacity: .55; }
/* familles olfactives : trois arches côte à côte */
.style-maison .x-fams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.style-maison .x-fam { text-align: center; align-self: start; }
.style-maison .x-fam img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; border-radius: var(--arche); }
.style-maison .x-fam b { display: block; margin-top: 10px; font-family: var(--font-title); font-weight: 500; font-size: 17px; line-height: 1.15; color: #F1E8D8; }
.style-maison .demo-note { margin-top: 40px; text-align: center; color: #8C7A62; }
/* barre du bas, panier, fiche */
.style-maison .nav { background: rgba(20, 16, 12, .97); border-top: 1px solid #2A2018; }
.style-maison .nav__item { color: #8C7A62; } .style-maison .nav__item.is-active { color: #F1E8D8; }
.style-maison .nav__bubble, .style-maison .cartbar__btn { background: #C9A35A; color: #14100C; box-shadow: none; }
.style-maison .cartbar__btn { border-radius: 999px; font-family: var(--font-ui); }
.style-maison .cartbar__count { background: #14100C; color: #C9A35A; border-radius: 50%; }
.style-maison .nav__badge { background: #F1E8D8; color: #14100C; }
.style-maison .sheet, .style-maison .sheet__foot { background: #14100C; border-color: #2A2018; }
.style-maison .sheet__media { aspect-ratio: 4 / 4.4; border-radius: var(--arche); margin: 14px 14px 0; background: #1F1812; }
.style-maison .sheet__head { flex-direction: column; gap: 4px; text-align: center; align-items: center; }
.style-maison .sheet__head h2 { font-weight: 500; font-size: 36px; color: #F1E8D8; }
.style-maison .sheet__head .price { color: #C9A35A; font-size: 16px; }
.style-maison .sheet__body .pill { background: none; color: #C9A35A; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.style-maison .opt { background: none; border: 0; padding: 0; margin-top: 24px; }
.style-maison .opt__head h3 { font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #B8A58A; }
.style-maison .choice { background: #1F1812; border: 1px solid #3A2D21; border-radius: 4px; color: #F1E8D8; }
.style-maison .choice.is-on { background: #1F1812; box-shadow: inset 0 0 0 1.5px #C9A35A; border-color: #C9A35A; color: #F1E8D8; }
.style-maison .choice__price { color: #C9A35A; }
.style-maison .btn, .style-maison .btn--wa { border-radius: 999px; background: #C9A35A; color: #14100C; font-family: var(--font-ui); font-weight: 500; text-transform: none; }
.style-maison .btn--ghost { background: transparent; color: #F1E8D8; border: 0; box-shadow: inset 0 0 0 1px #5A4734; }
.style-maison .qty { background: #1F1812; border-color: #3A2D21; }
.style-maison .line { background: transparent; border: 0; border-bottom: 1px solid #2A2018; border-radius: 0; padding: 0 0 14px; }
.style-maison .line__img { width: 84px; height: 105px; border-radius: 999px 999px 3px 3px; background: #1F1812; }
.style-maison .line__name { font-family: var(--font-title); font-weight: 600; font-size: 19px; }
.style-maison .summary { background: none; border: 0; }
.style-maison .summary__row--total .price { color: #C9A35A; }
.style-maison .modes { background: #1F1812; border-radius: 999px; } .style-maison .mode.is-on { background: #C9A35A; color: #14100C; }
.style-maison .field { background: #1F1812; border-color: #3A2D21; color: #F1E8D8; border-radius: 4px; }
.style-maison .offer { background: #1F1812; color: #F1E8D8; border-radius: 4px; } .style-maison .offer__bar { background: #2A2018; } .style-maison .offer__bar i { background: #C9A35A; }
.style-maison h2, .style-maison h3 { font-weight: 500; }
.style-maison .sheet__notes { margin: 6px 0 0; text-align: center; font-family: var(--font-title); font-style: italic; font-size: 20px; color: #C9A35A; }
.style-maison .sheet__desc { text-align: center; color: #B8A58A; }
/* Maison v2 (03/11/2026, après l'étude Kurkdjian, Malle, Amouage, Aesop, Diptyque) : le doré réservé aux familles et à l'action */
.style-maison .x-h small { display: block; margin-bottom: 6px; font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #8C7A62; }
.style-maison .x-fam-tags { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #C9A35A; }
.style-maison .x-fam-tags i, .style-maison .sheet__fam i { font-style: normal; margin: 0 8px; color: #5A4734; }
.style-maison .x-p__txt h3 { margin-top: 8px; }
.style-maison .x-p__txt p { font-family: var(--font-title); font-style: italic; font-size: 19px; line-height: 1.35; color: #CDB79A; }
.style-maison .x-size { position: relative; padding: 16px 4px 12px; border-radius: 999px 999px 4px 4px; }
.style-maison .x-size span { font-family: var(--font-title); font-size: 21px; line-height: 1; color: #F1E8D8; }
.style-maison .x-size small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8C7A62; }
.style-maison .x-size b { margin-top: 6px; }
.style-maison .x-size.is-star { border-color: #C9A35A; }
.style-maison .x-sizes--1 { grid-template-columns: 1fr; max-width: 220px; margin-left: auto; margin-right: auto; }
.style-maison .x-sizes--1 .x-size { border-radius: 999px; flex-direction: row; justify-content: space-between; padding: 14px 22px; background: #C9A35A; border-color: #C9A35A; }
.style-maison .x-sizes--1 .x-size span, .style-maison .x-sizes--1 .x-size b { color: #14100C; margin: 0; font-family: var(--font-ui); font-size: 15px; }
/* coffret découverte : la porte d'entrée */
.style-maison .x-cof { margin: 52px -16px 0; padding: 36px 16px 40px; background: #1F1812; border-top: 1px solid #3A2D21; border-bottom: 1px solid #3A2D21; text-align: center; cursor: pointer; }
.style-maison .x-cof__ph img { width: 78%; margin: 0 auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arche); }
.style-maison .x-cof__txt small { display: block; margin-top: 22px; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #C9A35A; }
.style-maison .x-cof__txt h2 { margin-top: 8px; font-size: 34px; font-weight: 500; color: #F1E8D8; }
.style-maison .x-cof__txt p { margin: 8px auto 0; max-width: 30ch; font-family: var(--font-title); font-style: italic; font-size: 19px; color: #CDB79A; }
/* la Maison racontée */
.style-maison .x-maison { margin: 60px -16px 0; position: relative; }
.style-maison .x-maison__img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; }
.style-maison .x-maison__txt { padding: 0 24px; margin-top: -24px; position: relative; text-align: center; }
.style-maison .x-maison__txt::before { content: ''; position: absolute; inset: -60px 0 auto; height: 160px; background: linear-gradient(to bottom, transparent, #14100C 60%); z-index: -1; }
.style-maison .x-maison__txt small { display: block; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #C9A35A; }
.style-maison .x-maison__txt h2 { margin-top: 10px; font-size: 34px; font-weight: 500; line-height: 1.05; color: #F1E8D8; }
.style-maison .x-maison__txt p { margin: 14px auto 0; max-width: 34ch; color: #B8A58A; font-size: 14.5px; line-height: 1.6; }
/* services */
.style-maison .x-serv { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid #3A2D21; }
.style-maison .x-serv li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid #3A2D21; }
.style-maison .x-serv b { font-family: var(--font-title); font-weight: 500; font-size: 20px; color: #F1E8D8; }
.style-maison .x-serv span { font-size: 13px; color: #8C7A62; text-align: right; }
/* fiche : identité, pyramide, contenances en arches */
.style-maison .sheet__fam { margin: 14px 0 0; text-align: center; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #C9A35A; }
.style-maison .sheet__desc { margin-top: 10px; font-family: var(--font-title); font-style: italic; font-size: 21px; line-height: 1.35; color: #CDB79A; }
.style-maison .sheet__pyr { margin: 28px 0 0; border-top: 1px solid #3A2D21; }
.style-maison .sheet__pyr div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid #3A2D21; }
.style-maison .sheet__pyr dt { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #8C7A62; padding-top: 3px; }
.style-maison .sheet__pyr dd { margin: 0; color: #F1E8D8; font-size: 15px; }
.style-maison .sheet__pour { margin: 16px 0 0; text-align: center; font-size: 14px; color: #B8A58A; }
.style-maison .sheet__pour b { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400; color: #8C7A62; margin-bottom: 4px; }
.style-maison .opt__rule, .style-maison .choice__mark { display: none; }
.style-maison .opt__hint { color: #8C7A62; }
.style-maison .opt[data-group="contenance"] .opt__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style-maison .opt[data-group="contenance"] .choice { flex-direction: column; justify-content: center; gap: 6px; min-height: 92px; padding: 16px 4px 12px; text-align: center; border: 1px solid #3A2D21; border-radius: 999px 999px 4px 4px; }
.style-maison .opt[data-group="contenance"] .choice__name { flex: none; font-weight: 400; font-size: 13px; color: #F1E8D8; }
.style-maison .opt[data-group="contenance"] .choice__price { font-size: 16px; font-weight: 500; color: #F1E8D8; }
.style-maison .opt[data-group="contenance"] .choice.is-on { border-color: #C9A35A; box-shadow: inset 0 0 0 1px #C9A35A; }
.style-maison .opt[data-group="contenance"] .choice.is-on .choice__price { color: #C9A35A; }
.style-maison .sheet__body .pills { display: none; }
.style-maison .allergens { text-align: center; }
/* panier : en faire un cadeau */
.style-maison .gift { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #3A2D21; border-radius: 4px; background: #1F1812; cursor: pointer; }
.style-maison .gift input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #C9A35A; flex: none; }
.style-maison .gift span { font-size: 13px; color: #B8A58A; line-height: 1.4; }
.style-maison .gift b { display: block; font-family: var(--font-title); font-weight: 600; font-size: 18px; color: #F1E8D8; }
.style-maison .brand { justify-content: center; }
.style-maison .brand__logo { display: none; }
.style-maison .brand__name { font-family: var(--font-title); font-weight: 500; font-size: 26px; letter-spacing: .34em; margin-right: -.34em; color: #F1E8D8; }
.style-maison .x-hero__img, .style-maison .x-p__ph img { box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.style-maison .ok { color: #C9A35A; }