:root, [data-theme="nuit"]{--ground:#0b0a09;--ground-raised:#161412;--ink:#e6e1d6;--ink-muted:#8f897e;--rule:#2b2824;--pill:#e6e1d6;--on-pill:#0b0a09;--focus:#e6e1d6;--alert:#ff5a4f;--plate:#cfc8b8;--plate-ink:#0b0a09;--blood:#fe0000;--maggot:#efe8d4;--rot:#5c3a1e;--shadow-none:none;}
[data-theme="os"]{--ground:#e6e1d6;--ground-raised:#d8d2c4;--ink:#0b0a09;--ink-muted:#5a554c;--rule:#b9b2a3;--pill:#0b0a09;--on-pill:#e6e1d6;--focus:#0b0a09;--alert:#a30000;--plate:#cfc8b8;--plate-ink:#0b0a09;--blood:#fe0000;--maggot:#efe8d4;--rot:#5c3a1e;--shadow-none:none;}
:root{--space-1:4px;--space-2:8px;--space-3:14px;--space-4:24px;--space-5:48px;--space-6:96px;--space-7:180px;--radius-0:0px;--radius-dot:50%;--stroke-hair:1px;--font-display:"Grenze Gotisch", "Archivo", Georgia, serif;--font-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;}

/* MOHR — composants. Valeurs : tokens.css (--ground, --ink, --plate…). */

.mh, .mh * { box-sizing: border-box; }
.mh { background: var(--ground); color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .02em; -webkit-font-smoothing: antialiased; position: relative; }
.mh a { color: inherit; text-decoration: none; }
.mh img { display: block; max-width: 100%; }
.mh button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
.mh :focus-visible { outline: 1px solid var(--focus); outline-offset: 3px; }
.mh [hidden] { display: none !important; }
.mh-d { font-family: var(--font-display); font-stretch: 62%; font-weight: 300; letter-spacing: -.01em; }
.mh-label { font-size: 10px; line-height: 14px; letter-spacing: .06em; }
.mh-muted { color: var(--ink-muted); }
.mh-split { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mh-split > span { display: inline-block; }
.mh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- curseur aiguille + asticots ---------- */
html.mh-cursor-on, html.mh-cursor-on * { cursor: none !important; }
.mh-knife { position: fixed; left: 0; top: 0; z-index: 98; width: 0; height: 0; pointer-events: none; transition: opacity .3s; }
.mh-knife svg { position: absolute; left: -2px; top: -2px; width: 88px; height: 88px; }
.mh-knife span { position: absolute; left: 40px; top: -26px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: #e6e1d6; background: #7a0000; padding: 2px 6px; white-space: nowrap; }
.mh-knife span:empty { display: none; }
.mh-bg { position: fixed; inset: 0; width: 100vw !important; height: 100vh !important; z-index: 0; pointer-events: none; display: block; }
.mh-has-bg { background: transparent !important; }
.mh-has-bg > *:not(.mh-bg):not(.mh-top):not(.mh-corner):not(.mh-menu):not(.mh-cart):not(.mh-modal):not(.mh-loader):not(.mh-gate):not(.mh-scene):not(.mh-replay):not(.mh-eyering) { position: relative; z-index: 1; }
.mh-has-bg .mh-carousel, .mh-has-bg .mh-foot, .mh-has-bg .mh-foot__legal { background: transparent; }
.mh-blood { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 94; pointer-events: none; }
.mh-maggots { position: fixed; inset: 0; width: 100vw !important; height: 100vh !important; z-index: 95; pointer-events: none; }

/* ---------- liens ---------- */
.mh-link { position: relative; display: inline-block; }
.mh-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.19,1,.22,1); }
.mh-link:hover::after, .mh-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* ---------- pastille, point, bouton ---------- */
.mh-pill { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 1px 4px; background: var(--pill); color: var(--on-pill); font-size: 9px; line-height: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.mh-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blood); margin-right: 6px; vertical-align: 1px; animation: mh-pulse 1.6s ease-in-out infinite; }
@keyframes mh-pulse { 50% { opacity: .25; } }
.mh .mh-btn, .mh-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; padding: 0 18px; background: var(--pill); color: var(--on-pill); border: 1px solid var(--pill); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.mh .mh-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ground); transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.19,1,.22,1); }
.mh .mh-btn:hover::before { transform: scaleY(1); }
.mh .mh-btn:hover { color: var(--ink); }
.mh .mh-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.mh .mh-btn--ghost::before { background: var(--pill); }
.mh .mh-btn--ghost:hover { color: var(--on-pill); }
.mh .mh-btn--block { width: 100%; }
.mh .mh-btn[disabled] { background: transparent; color: var(--ink-muted); border-color: var(--rule); border-style: dashed; cursor: not-allowed; }
.mh .mh-btn[disabled]::before { display: none; }

/* ---------- Header ---------- */
.mh-top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px 24px; color: var(--ink); pointer-events: none; transition: color .3s; }
.mh-top--static { position: absolute; }
.mh-top { transition: color .3s, transform .6s cubic-bezier(.19,1,.22,1); }
.mh-top.is-away { transform: translateY(-110%); }
.mh-split img.mh-inline { vertical-align: top; }
.mh-split:has(> span > .mh-inline) { vertical-align: -.02em; }
.mh-top a, .mh-top button { pointer-events: auto; }
/* en-tête : index gravés (01–04), un trait hachuré au burin se trace sous l’entrée survolée ou active */
.mh-top { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .03em; }
.mh-top { display: flex; justify-content: space-between; align-items: center; }
.mh-top__left { display: flex; align-items: center; }
.mh-top__nav { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.mh-top__nav a, .mh-top__item, .mh-top__menu { position: relative; display: inline-flex; align-items: flex-start; gap: 5px; padding: 6px 0 10px; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; text-transform: lowercase; cursor: pointer; }
.mh-top__nav i { font-style: normal; font-size: 8px; line-height: 1; opacity: .45; transition: opacity .3s; }
.mh-top__nav a::after, .mh-top__item::after, .mh-top__menu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 5px; background: repeating-linear-gradient(-55deg, currentColor 0 1px, transparent 1px 3.5px); clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.19,1,.22,1); }
.mh-top__nav a:hover::after, .mh-top__nav a[aria-current]::after, .mh-top__item:hover::after, .mh-top__menu:hover::after, .mh-top__menu[aria-expanded="true"]::after { clip-path: inset(0 0 0 0); }
.mh-top__nav a:hover i, .mh-top__nav a[aria-current] i { opacity: 1; }
.mh-top__nav a:focus-visible, .mh-top__item:focus-visible, .mh-top__menu:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.mh-top__logo img { height: 42px; width: auto; }
.mh-top > * { color: var(--ink); transition: color .3s; }
.mh-top .mh-logo--os, .mh-top__logo[data-theme="os"] .mh-logo--nuit { display: none; }
.mh-top__logo[data-theme="os"] .mh-logo--os { display: block; }
.mh-top__right { display: flex; gap: 28px; align-items: center; }
.mh-top__right nav { margin-right: 14px; }
/* son : juste les barres, qui montent et descendent quand la musique joue */
.mh-top .mh-top__sound { padding: 6px 2px 10px; }
.mh-top__sound .mh-sound__bars { height: 15px; gap: 3px; }
.mh-top__sound .mh-sound__bars i { width: 1.5px; }
.mh-top__sound::after { display: none; }
.mh-top__sound:not(.is-on) { opacity: .6; }
.mh-top__sound:hover { opacity: 1; }
.mh-top__cart b { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; margin-left: 3px; margin-top: -1px; border: 1px solid currentColor; border-radius: 9px; font-size: 9px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.mh-top__menu { display: none; }
@media (max-width: 860px) {
  .mh-top { padding: 14px 14px; }
  .mh-top__nav { display: none; }
  .mh-top__menu { display: inline-flex; }
  .mh-top__logo img { height: 30px; }
}

/* ---------- coins fixes ---------- */
.mh-corner { position: fixed; bottom: 22px; z-index: 40; font-size: 10px; line-height: 14px; letter-spacing: .06em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: pre; transition: opacity .4s; pointer-events: none; }
.mh-corner--l { left: 24px; }
.mh-corner--c { left: 50%; width: 46px; margin-left: -23px; bottom: 18px; }
.mh-corner--c img { width: 100%; height: auto; }
.mh-corner--c .mh-star--os, [data-theme="os"].mh-corner--c .mh-star--nuit { display: none; }
[data-theme="os"].mh-corner--c .mh-star--os { display: block; }
.mh-corner--r { right: 24px; }
.mh-corner.is-hidden { opacity: 0; }
.mh-abs .mh-corner { position: absolute; }
@media (max-width: 860px) { .mh-corner--l { display: none; } }

/* ---------- Menu ---------- */
.mh-menu { position: fixed; inset: 0; z-index: 45; background: var(--ground-raised); color: var(--ink); padding: 90px 14px 24px; display: flex; flex-direction: column; justify-content: space-between; }
.mh-menu ul { list-style: none; margin: 0; padding: 0; }
.mh-menu li { border-top: 1px solid var(--rule); }
.mh-menu li a, .mh-menu li button { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 10px 0 6px; font-family: var(--font-display); font-stretch: 62%; font-weight: 300; font-size: 64px; line-height: .9; letter-spacing: -.01em; text-align: left; }
.mh-menu li small { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); letter-spacing: .06em; }


/* ---------- Loader ---------- */
.mh-loader { position: fixed; inset: 0; z-index: 90; background: var(--ground); display: grid; place-items: center; }
.mh-loader--abs { position: absolute; }
.mh-loader__star { width: 160px; }
.mh-loader__count { position: absolute; left: 24px; bottom: 22px; font-size: 10px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* ---------- intro ---------- */
.mh-intro { padding: 170px 24px 0; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 0 24px; align-items: end; }
.mh-intro p { margin: 0; grid-column: 1 / span 4; font-size: 10px; letter-spacing: .06em; color: var(--ink-muted); }
.mh-intro h1 { margin: 0; grid-column: 5 / span 8; font-family: var(--font-display); font-stretch: 62%; font-weight: 300; font-size: clamp(48px, 6.6vw, 96px); line-height: .88; }
@media (max-width: 860px) { .mh-intro { padding-top: 100px; grid-template-columns: 1fr; gap: 12px; } .mh-intro p, .mh-intro h1 { grid-column: 1; } }

/* ---------- Gallery ---------- */
.mh-world { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); row-gap: 96px; padding: 150px 24px 180px; align-items: start; }
.mh-tile { grid-column: var(--c); margin-top: var(--y, 0); position: relative; display: block; will-change: transform; }
.mh-tile__idx { display: block; margin-bottom: 6px; font-size: 10px; letter-spacing: .06em; color: var(--ink-muted); }
.mh-tile__media { position: relative; display: block; overflow: hidden; background: var(--ground-raised); will-change: transform; }
.mh-curtain { position: fixed; inset: 0; z-index: 99; background: #0b0a09; pointer-events: none; }
.mh-curtain b { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #7a0000; transform-origin: top; }
.mh-curtain i { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 L5.6 4.4 L10 5 L5.6 5.6 L5 10 L4.4 5.6 L0 5 L4.4 4.4Z' fill='%23e6e1d6'/%3E%3C/svg%3E") center/contain no-repeat; }
.mh-tile__media img { width: 100%; height: auto; }

.mh-tile__hatch { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(45deg, rgba(11,10,9,.55) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgba(11,10,9,.35) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 80%); mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 80%); }
.mh-tee3d { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.mh-plate { position: relative; }
.mh-engrave-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; pointer-events: none; }
.mh-tile__cap { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.mh-tile__name { font-family: var(--font-display); font-stretch: 62%; font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -.005em; clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.19,1,.22,1); }
.mh-tile__cap > span:last-child { font-size: 10px; letter-spacing: .06em; color: var(--ink-muted); opacity: 0; transition: opacity .4s .1s; }
.mh-tile:hover .mh-tile__name, .mh-tile:focus-visible .mh-tile__name { clip-path: inset(0 0 0 0); }
.mh-tile:hover .mh-tile__cap > span:last-child, .mh-tile:focus-visible .mh-tile__cap > span:last-child { opacity: 1; }
@media (hover: none), (max-width: 860px) { .mh-tile__name { clip-path: none; } .mh-tile__cap > span:last-child { opacity: 1; } }
@media (max-width: 860px) {
  .mh-world { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 14px; row-gap: 44px; padding: 80px 14px 120px; }
  .mh-tile { grid-column: auto !important; margin-top: 0 !important; }
  .mh-tile:nth-child(3n+1) { grid-column: 1 / -1 !important; width: 78%; }
  .mh-tile:nth-child(6n+4) { justify-self: end; }
  .mh-tile__name { font-size: 24px; }
}

/* ---------- Carousel (anneau 3D) ---------- */
.mh-carousel { position: relative; height: 100vh; min-height: 640px; max-height: 1000px; overflow: hidden; background: var(--ground); border-top: 1px solid var(--rule); }
.mh-carousel canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: pan-y; }
.mh-carousel__fallback { position: absolute; inset: 0; display: flex; gap: 60px; align-items: center; overflow-x: auto; padding: 0 30vw; scroll-snap-type: x mandatory; }
.mh-carousel__fallback img { height: 52%; width: auto; scroll-snap-align: center; }
.mh-carousel__head { position: absolute; top: 96px; left: 24px; right: 24px; display: flex; justify-content: space-between; z-index: 2; font-size: 10px; letter-spacing: .06em; color: var(--ink-muted); }
.mh-carousel__cap { position: absolute; left: 24px; bottom: 60px; z-index: 2; display: grid; gap: 6px; }
.mh-carousel__cap b { font-family: var(--font-display); font-stretch: 62%; font-weight: 300; font-size: clamp(44px, 5vw, 72px); line-height: .9; }
.mh-carousel__cap span { font-size: 10px; letter-spacing: .06em; color: var(--ink-muted); }
.mh-carousel__num { position: absolute; right: 24px; bottom: 60px; z-index: 2; font-variant-numeric: tabular-nums; }
.mh-carousel__nav { position: absolute; right: 24px; bottom: 84px; display: flex; gap: 18px; z-index: 2; }
.mh-carousel__look { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 2; }
@media (max-width: 860px) { .mh-carousel__look { display: none; } .mh-carousel__head { top: 70px; left: 14px; right: 14px; } .mh-carousel__cap { left: 14px; } .mh-carousel__num, .mh-carousel__nav { right: 14px; } }

/* ---------- Statement (vignettes entre les mots) ---------- */
.mh-statement { padding: 180px 24px; text-align: center; border-top: 1px solid var(--rule); }
.mh-statement__big { margin: 0 auto; max-width: 1200px; font-family: var(--font-display); font-stretch: 62%; font-weight: 300; font-size: clamp(56px, 11.4vw, 168px); line-height: .9; letter-spacing: -.015em; text-wrap: balance; }
.mh .mh-inline { display: inline-block; height: .74em; width: auto; vertical-align: -.04em; margin: 0 .06em; }
.mh-statement__aside { margin: 60px auto 0; display: flex; justify-content: center; gap: 40px; font-size: 10px; letter-spacing: .06em; color: var(--ink-muted); flex-wrap: wrap; }
@media (max-width: 860px) { .mh-statement { padding: 110px 14px; } }

/* ---------- DropStory (colonne collante + images) ---------- */
.mh-story { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 24px; padding: 0 24px; }
.mh-story__side { position: sticky; top: 0; height: min(100vh, 900px); display: flex; flex-direction: column; justify-content: space-between; padding: 110px 0 60px; }
.mh-story__side h2 { margin: 8px 0 0; font-family: var(--font-display); font-stretch: 62%; font-weight: 300; font-size: clamp(56px, 7vw, 112px); line-height: .86; }
.mh-story__side p { margin: 0; max-width: 34ch; font-family: var(--font-display); font-stretch: 85%; font-size: 22px; line-height: 28px; }
.mh-story__side .mh-row { display: flex; gap: 24px; align-items: center; margin-top: 24px; }
.mh-story__imgs { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); row-gap: 72px; padding: 140px 0 160px; }
.mh-story__imgs > * { grid-column: var(--c); position: relative; }
.mh-story__imgs img, .mh-story__imgs svg { width: 100%; height: auto; display: block; }
.mh-plate { background: var(--plate); aspect-ratio: 4 / 5; display: grid; place-items: center; }
.mh-plate svg { width: 92%; height: 92%; }
@media (max-width: 860px) { .mh-story { grid-template-columns: minmax(0,1fr); padding: 0 14px; } .mh-story__side { position: static; height: auto; padding: 90px 0 0; gap: 24px; } .mh-story__imgs { grid-template-columns: minmax(0,1fr); row-gap: 32px; padding: 40px 0 100px; } .mh-story__imgs > * { grid-column: 1 !important; margin-top: 0 !important; } }

/* ---------- Footer ---------- */
.mh-foot { position: relative; overflow: hidden; background: var(--ground); border-top: 1px solid var(--rule); padding: 120px 24px 0; }
.mh-foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; padding-bottom: 120px; }
.mh-foot__cols p { margin: 0 0 14px; font-size: 10px; letter-spacing: .06em; color: var(--ink-muted); }
.mh-foot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mh-foot__cols .mh-foot__ask { font-family: var(--font-display); font-stretch: 85%; font-size: 22px; line-height: 28px; margin: 0 !important; color: var(--ink) !important; letter-spacing: 0 !important; }
.mh-foot__logo { display: block; width: 100%; margin-bottom: -6%; }
.mh-foot__logo img { width: 100%; height: auto; }
.mh-foot__legal { position: relative; display: flex; justify-content: space-between; padding: 14px 0 20px; font-size: 10px; letter-spacing: .06em; color: var(--ink-muted); background: var(--ground); flex-wrap: wrap; gap: 8px; }
[data-theme="os"] .mh-foot__logo .mh-logo--nuit, .mh-foot__logo .mh-logo--os { display: none; }
[data-theme="os"] .mh-foot__logo .mh-logo--os { display: block; }
@media (max-width: 860px) { .mh-foot { padding: 20px 14px 0; } .mh-foot__cols { grid-template-columns: 1fr 1fr; padding-bottom: 70px; } }

/* ---------- Product page ---------- */
.mh-pdp { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); min-height: 100vh; }
.mh-pdp__stage { position: sticky; top: 0; height: 100vh; max-height: 1100px; background: var(--plate); display: grid; place-items: center; }
.mh-pdp__media { position: relative; height: min(78vh, 860px); width: auto; aspect-ratio: 1000 / 1414; }
.mh-pdp__media img { width: 100%; height: 100%; object-fit: cover; }
.mh-pdp__thumbs { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 8px; }
.mh-pdp__thumbs button { width: 44px; aspect-ratio: 4/5; background: var(--ground); outline: 1px solid transparent; outline-offset: 2px; }
.mh-pdp__thumbs button[aria-pressed="true"] { outline-color: var(--plate-ink); }
.mh-pdp__thumbs img, .mh-pdp__thumbs svg { width: 100%; height: 100%; object-fit: cover; }
.mh-pdp__info { padding: 120px 24px 80px; display: flex; flex-direction: column; gap: 32px; }
.mh-pdp__title { margin: 6px 0 0; font-family: var(--font-display); font-stretch: 62%; font-weight: 300; font-size: clamp(60px, 7.4vw, 112px); line-height: .86; }
.mh-pdp__lead { margin: 0; font-family: var(--font-display); font-stretch: 85%; font-size: 22px; line-height: 28px; max-width: 30ch; }
.mh-pdp__price { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0; font-variant-numeric: tabular-nums; }
.mh-details { border-top: 1px solid var(--rule); }
.mh-details details { border-bottom: 1px solid var(--rule); }
.mh-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 12px 0; }
.mh-details summary::-webkit-details-marker { display: none; }
.mh-details summary::after { content: "+"; }
.mh-details details[open] summary::after { content: "−"; }
.mh-details p { margin: 0 0 14px; color: var(--ink-muted); }
@media (max-width: 860px) { .mh-pdp { grid-template-columns: 1fr; } .mh-pdp__stage { position: relative; height: 80vh; min-height: 480px; } .mh-pdp__media { height: 62vh; } .mh-pdp__info { padding: 48px 14px 72px; } }

/* ---------- SizeSelect ---------- */
.mh-sizes { border: 0; margin: 0; padding: 0; }
.mh-sizes legend { padding: 0; margin-bottom: 10px; display: flex; justify-content: space-between; width: 100%; font-size: 10px; letter-spacing: .06em; }
.mh-sizes__row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; }
.mh-sizes__row label { position: relative; display: grid; place-items: center; height: 44px; border: 1px solid var(--rule); cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.mh-sizes__row input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mh-sizes__row label:hover { border-color: var(--ink); }
.mh-sizes__row label:has(input:checked) { background: var(--pill); color: var(--on-pill); border-color: var(--pill); }
.mh-sizes__row label:has(input:disabled) { color: var(--ink-muted); text-decoration: line-through; border-style: dashed; cursor: not-allowed; }
.mh-sizes__row label:has(input:focus-visible) { outline: 1px solid var(--focus); outline-offset: 3px; }
.mh-sizes__note { margin: 8px 0 0; font-size: 10px; letter-spacing: .06em; color: var(--alert); }

/* ---------- CartPanel (tiroir droit) ---------- */
.mh-cart { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; z-index: 70; background: var(--ground-raised); color: var(--ink); padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 24px; border-left: 1px solid var(--rule); }
.mh-cart--abs { position: absolute; }
.mh-cart__head { display: flex; justify-content: space-between; }
.mh-cart__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; flex: 1; align-content: start; overflow: auto; }
.mh-cart__line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--rule); }
.mh-cart__thumb { width: 64px; aspect-ratio: 4 / 5; background: var(--plate); display: grid; place-items: center; overflow: hidden; }
.mh-cart__thumb svg { width: 100%; height: 100%; }
.mh-cart__name { font-family: var(--font-display); font-stretch: 62%; font-size: 26px; line-height: 1; margin: 0 0 4px; font-weight: 400; }
.mh-qty { display: inline-flex; gap: 12px; margin-top: 10px; color: var(--ink-muted); }
.mh-qty button:hover { color: var(--ink); }
.mh-cart__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 14px; }
.mh-cart__total b { font-family: var(--font-display); font-stretch: 62%; font-size: 48px; line-height: 1; font-weight: 300; }

/* ---------- EditionsModal ---------- */
.mh-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(11,10,9,.78); padding: 14px; }
.mh-modal--abs { position: absolute; }
.mh-modal__box { width: 560px; max-width: 100%; background: var(--ground-raised); padding: 24px; display: grid; gap: 22px; position: relative; border: 1px solid var(--rule); }
.mh-modal__close { position: absolute; top: 20px; right: 24px; }
.mh-modal__title { margin: 0; font-family: var(--font-display); font-stretch: 62%; font-weight: 300; font-size: 72px; line-height: .88; }
.mh-modal__txt { margin: 0; font-family: var(--font-display); font-stretch: 85%; font-size: 20px; line-height: 26px; }
.mh-input { display: grid; gap: 6px; }
.mh-input span { font-size: 10px; letter-spacing: .06em; color: var(--ink-muted); }
.mh-input input { background: transparent; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); font: inherit; font-size: 16px; padding: 8px 0 10px; border-radius: 0; }
.mh-input input::placeholder { color: var(--ink-muted); }
.mh-input input:focus { outline: none; border-bottom-color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .mh *, .mh *::before, .mh *::after { transition-duration: 0s !important; animation: none !important; } }

/* ---------- Hero 3D (main gravée) ---------- */
.mh-hero3d { position: relative; height: 100vh; min-height: 640px; max-height: 1100px; overflow: hidden; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; gap: 0 24px; padding: 110px 24px 72px; }
/* la scène de la main est fixée au fond de la page : toujours visible, jamais coupée ; le contenu défile par-dessus */
.mh-hero3d__stage { position: fixed; inset: 0; z-index: -1; }
.mh-hand { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.mh-hero3d__kicker { grid-column: 1 / span 4; grid-row: 1; align-self: start; margin: 0; position: relative; z-index: 1; color: var(--ink-muted); }
.mh-hero3d__title { grid-column: 1 / span 5; grid-row: 2; margin: 0; position: relative; z-index: 1; font-family: var(--font-display); font-stretch: 62%; font-weight: 300; font-size: clamp(52px, 6.4vw, 104px); line-height: .86; text-wrap: balance; text-shadow: 0 0 24px var(--ground), 0 0 4px var(--ground); }
.mh-hero3d__side { grid-column: 10 / span 3; grid-row: 1; align-self: start; justify-self: end; display: grid; gap: 4px; text-align: right; position: relative; z-index: 1; color: var(--ink-muted); }
.mh-hero3d__cta { grid-column: 10 / span 3; grid-row: 2; align-self: end; justify-self: end; position: relative; z-index: 1; }
.mh-hero3d__scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1; color: var(--ink-muted); }
.mh-hero3d__scroll::after { content: ""; display: block; width: 1px; height: 28px; margin: 6px auto 0; background: currentColor; animation: mh-drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes mh-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 860px) {
  .mh-hero3d { height: 92vh; padding: 84px 14px 24px; grid-template-columns: 1fr; }
  .mh-hero3d__kicker, .mh-hero3d__title, .mh-hero3d__cta { grid-column: 1; }
  .mh-hero3d__side, .mh-hero3d__scroll { display: none; }
  .mh-hero3d__title { font-size: 15vw; align-self: end; }
  .mh-hero3d__cta { grid-row: 3; justify-self: start; margin-top: 18px; }
}

/* ---------- curseur rond ---------- */
.mh-ring { mix-blend-mode: difference; }
.mh-ring i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 1px solid #e6e1d6; border-radius: 50%; transition: transform .45s cubic-bezier(.19,1,.22,1), background-color .3s; }
.mh-ring b { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #e6e1d6; transition: opacity .2s; }
.mh-ring.is-hover i { transform: scale(1.8); }
.mh-ring.has-label i { transform: scale(2.4); background: #e6e1d6; }
.mh-ring.has-label b { opacity: 0; }
.mh-ring.is-down i { transform: scale(.7); }
.mh-ring span { left: 0; top: 0; transform: translate(-50%, -50%); background: none; color: #0b0a09; padding: 0; mix-blend-mode: normal; }
.mh-ring.has-label span { color: #19160f; }

/* ---------- Gate : chargement + entrée ---------- */
.mh-gate { position: fixed; inset: 0; z-index: 92; background: var(--ground); overflow: hidden; }
.mh-gate__stage { position: absolute; inset: 0; }
.mh-gate__load { position: absolute; inset: 0 0 16% 0; display: grid; place-content: center; justify-items: center; gap: 18px; pointer-events: none; }
.mh-gate__logo { width: min(300px, 64vw); height: auto; }
.mh-gate__bar { height: 3px; background: rgba(230,225,214,.14); position: relative; overflow: hidden; }
.mh-gate__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.mh-gate__bar { width: min(420px, 78vw); }
/* sous la barre : l’état du chargement (puis « entrer dans le shop ») et, à côté, le son — en capitales, sans cadre ni ombre */
.mh-gate__row { display: flex; align-items: center; justify-content: center; gap: 28px; position: relative; color: var(--ink); white-space: nowrap; }
.mh-gate__slot { display: grid; justify-items: center; }
.mh-gate__meta, .mh-gate__hint { grid-area: 1 / 1; }
.mh-gate__meta { display: flex; gap: 10px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mh-gate__hint { opacity: 0; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: lowercase; }
.mh-gate__hint.is-on { animation: mh-hint 2.2s ease-in-out .8s infinite; }
@keyframes mh-hint { 50% { color: rgba(230,225,214,.45); } }
.mh-gate__sound { pointer-events: auto; position: relative; z-index: 4; color: var(--ink-muted); }
.mh-gate__sound.is-on { color: var(--ink); }
.mh-gate:has(.mh-gate__enter:focus-visible) .mh-gate__hint { text-decoration: underline; text-underline-offset: 3px; }
.mh-gate__enter { position: absolute; inset: 0; z-index: 3; background: none; border: 0; padding: 0; cursor: pointer; }
.mh-gate__enter:focus-visible { outline: none; }

/* ---------- son : interrupteur texte + cinq tailles de burin qui vibrent ---------- */
.mh-sound { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; cursor: pointer; text-transform: lowercase; }
.mh-sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.mh-sound__bars i { width: 1px; height: 100%; background: currentColor; transform-origin: bottom; transform: scaleY(.18); transition: transform .4s; }
.mh-sound.is-on .mh-sound__bars i { animation: mh-eq 1.1s ease-in-out infinite; }
.mh-sound.is-on .mh-sound__bars i:nth-child(2) { animation-delay: -.35s; animation-duration: .9s; }
.mh-sound.is-on .mh-sound__bars i:nth-child(3) { animation-delay: -.7s; animation-duration: 1.3s; }
.mh-sound.is-on .mh-sound__bars i:nth-child(4) { animation-delay: -.2s; animation-duration: .8s; }
.mh-sound.is-on .mh-sound__bars i:nth-child(5) { animation-delay: -.55s; animation-duration: 1.2s; }
@keyframes mh-eq { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.mh-sound:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .mh-sound.is-on .mh-sound__bars i { animation: none; transform: scaleY(.7); } }
html.is-gated .mh-top, html.is-gated .mh-corner { opacity: 0; }
.mh-sound { white-space: nowrap; }
@media (max-width: 860px) { .mh-top__right { gap: 18px; } .mh-top__right nav { display: none; } .mh-top__right > * { white-space: nowrap; } }

.mh-top .mh-sound { padding: 6px 0 10px; align-items: center; }

.mh-gate__row, .mh-gate__row .mh-gate__hint, .mh-gate__row .mh-sound { text-transform: uppercase; letter-spacing: .14em; }
/* le rond et tout ce qu'il contient (logo, trait, textes) : tout en blanc, sans fondu */
.mh-gate__ring { color: #fff; }
.mh-gate__ring .mh-gate__meta, .mh-gate__ring .mh-gate__hint, .mh-gate__ring .mh-gate__sound { color: #fff; }
.mh-gate__ring .mh-gate__bar i { background: #fff; }
.mh-gate__row .mh-gate__hint { font-weight: 500; }

/* fond commun à toutes les pages : la scène de la main, fixée derrière le contenu */
.mh-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.mh-scene canvas { pointer-events: none; }
/* en-tête des pages intérieures */
.mh-pagehead { padding-top: 160px; }
/* page contact */
.mh-contact { min-height: 100vh; display: grid; align-content: center; gap: 28px; padding: 140px 24px 80px; }
.mh-contact__ask { margin: 0; max-width: 16ch; font-family: var(--font-display); font-stretch: 62%; font-weight: 300; font-size: clamp(52px, 8vw, 128px); line-height: .86; text-shadow: 0 0 24px var(--ground); }
.mh-contact__mail { justify-self: start; font-size: clamp(18px, 2.2vw, 28px); }
.mh-contact__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 24px; margin-top: 24px; }
.mh-contact__cols div { display: grid; gap: 4px; align-content: start; }
.mh-contact__cols p { margin: 0 0 6px; }
@media (max-width: 860px) { .mh-contact { padding: 110px 14px 60px; } .mh-contact__cols { grid-template-columns: 1fr; } .mh-pagehead { padding-top: 120px; } }
/* le panier sur la même ligne de base que les entrées du menu */
.mh-top__cart { align-items: center; margin-top: -4px; }
.mh-top__cart::after { bottom: -7.5px; }
.mh-top__cart b { margin-top: 0; }

/* typo d'affichage : Grenze Gotisch, une gothique de graveur, lisible ; un peu plus de graisse et d'interligne que l'ancienne condensée */
.mh-hero3d__title, .mh-intro h1, .mh-pdp__title, .mh-contact__ask, .mh-statement__big, .mh-story h2, .mh-carousel__cap, .mh-menu li a, .mh-menu li button, .mh-modal__title { font-weight: 400; line-height: .95; letter-spacing: -.005em; }
/* accueil : un seul écran, la bande d'infos posée en bas, sur la scène (sans fond ni filet) */
.mh-home { position: relative; height: 100vh; min-height: 560px; }
.mh-foot--home { position: absolute; left: 0; right: 0; bottom: 0; background: none; border-top: 0; padding: 0 24px 34px; overflow: visible; }
.mh-foot--home .mh-foot__cols { padding-bottom: 0; }
@media (max-width: 860px) { .mh-home { height: auto; min-height: 100vh; display: flex; align-items: flex-end; } .mh-foot--home { position: relative; padding: 0 14px 28px; } }
html[data-page="accueil"] .mh-corner--c { opacity: 0; }

/* rond de chargement : cadran gravé, arc, étoile au centre, éclats qui flottent */
.mh-gate__ring { position: relative; z-index: 4; pointer-events: none; width: min(520px, 92vw); aspect-ratio: 1; display: grid; place-items: center; }
.mh-gate__inner { position: relative; display: grid; justify-items: center; gap: 18px; width: 72%; }
.mh-gate__ring .mh-gate__logo { width: 78%; }
.mh-gate__ring .mh-gate__bar { width: 86%; }
.mh-gate__ring .mh-gate__row { flex-wrap: wrap; gap: 10px 24px; }
.mh-sigil__star { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; animation: mh-spin 9s linear infinite; }
.mh-gate__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; }
.mh-sigil__track { stroke-width: .45; opacity: .5; }
.mh-sigil__track--in { stroke-dasharray: 1 3; opacity: .5; }
.mh-sigil__ticks line { stroke-width: .5; opacity: .18; transition: opacity .3s; }
.mh-sigil__ticks line.is-on { opacity: .9; }
.mh-sigil__arc { stroke-width: 1.4; stroke-linecap: butt; }
.mh-sigil__shards polygon { fill: currentColor; stroke: none; }
@keyframes mh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mh-sigil__star { animation: none; } }
.mh-gate__row .mh-gate__hint { font-size: 13px; font-weight: 600; }
.mh-gate__sound { font-weight: 600; }
/* « ENTRER DANS LE SHOP » en noir */
.mh-gate__ring .mh-gate__hint { color: #0b0a09; }
@keyframes mh-hint { 50% { color: rgba(11,10,9,.45); } }
/* hors accueil : la main n'existe plus, seul l'œil qui pleure reste, en négatif, sur le noir */
.mh-scene { transition: opacity .6s ease; }
.mh-scene.is-eye canvas { opacity: .9; }
/* plongée dans le vortex : voile noir final, la bande d'infos s'efface pendant la descente */
.mh-vortex { position: fixed; inset: 0; z-index: 45; background: #000; pointer-events: none; opacity: 0; }
html.is-diving .mh-foot--home { opacity: 0; transition: opacity .4s; }
/* « ENTRER DANS LE SHOP » : fixe (plus de clignotement), dans la gothique d'affichage */
.mh-gate__hint.is-on { animation: none; }
.mh-gate__ring .mh-gate__hint { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: .08em; line-height: 1; }

/* effets de transition plein écran (sang qui coule, rideau qui brûle) */
.mh-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 96; pointer-events: none; }
.mh-fx--burn { image-rendering: auto; filter: blur(.8px) contrast(1.2); }
/* chargement : « entrer dans le shop » en minuscules */
.mh-gate__ring .mh-gate__hint { text-transform: none; letter-spacing: .04em; font-size: 22px; }
/* son du chargement : plus de texte, juste les barres (hautes) ; coupé = barres basses barrées d'un trait */
.mh-gate__sound [data-sound-label] { display: none; }
.mh-gate__sound { padding: 6px 4px; }
.mh-gate__sound .mh-sound__bars { position: relative; height: 18px; gap: 3px; }
.mh-gate__sound .mh-sound__bars i { width: 2px; }
.mh-gate__sound .mh-sound__bars::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(-35deg); transition: opacity .3s, transform .3s; }
.mh-gate__sound.is-on .mh-sound__bars::after { opacity: 0; transform: rotate(-35deg) scaleX(0); }
/* dans le rond : un vortex hachuré, semi-transparent, qui tourne lentement derrière le logo et les textes */
.mh-gate__ring::before { content: ""; position: absolute; inset: 5%; border-radius: 50%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(0,0,0,.9) 0, rgba(0,0,0,.84) 55%, rgba(0,0,0,.6) 82%, rgba(0,0,0,0) 100%),
    repeating-conic-gradient(from 0deg, rgba(230,225,214,.16) 0 .9deg, transparent .9deg 6deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  animation: mh-spin 38s linear infinite; }
.mh-gate__ring::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(230,225,214,.13) 0 1px, transparent 1px 8px);
  -webkit-mask-image: conic-gradient(from 0deg, #000, transparent 30%, #000 50%, transparent 80%, #000); mask-image: conic-gradient(from 0deg, #000, transparent 30%, #000 50%, transparent 80%, #000);
  animation: mh-spin 22s linear infinite reverse; }
.mh-gate__ring { isolation: isolate; }
.mh-gate__ring .mh-logo, .mh-gate__ring .mh-gate__logo { width: 60%; }
/* sur le vortex sombre du rond, « entrer dans le shop » repasse en blanc pour rester lisible */
.mh-gate__ring .mh-gate__hint { color: #fff; }

/* fond du rond de chargement : le vrai vortex de fumée (même shader que sous la main), en disque fondu sur les bords */
.mh-gate__ring::before, .mh-gate__ring::after { display: none; }
.mh-vortexdisc { position: absolute; inset: 2%; width: 96% !important; height: 96% !important; border-radius: 50%; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
/* rond : le cadran gravé et les pointillés tournent sur place autour du centre (animateTransform dans sigil) */
.mh-sigil__dash { stroke-width: .5; stroke-dasharray: 6 4 1 4; opacity: .55; }
/* son du chargement : les barres qui bougent ; coupé = barres figées barrées d'un trait rouge horizontal */
.mh-gate__sound .mh-sound__bars::after { left: -5px; right: -5px; top: 50%; height: 2px; margin-top: -1px; background: var(--blood); transform: none; }
.mh-gate__sound.is-on .mh-sound__bars::after { transform: scaleX(0); }
.mh-gate__sound:not(.is-on) .mh-sound__bars i { transform: scaleY(.55); }
.mh-gate__sound:not(.is-on) .mh-sound__bars i:nth-child(2) { transform: scaleY(.8); }
.mh-gate__sound:not(.is-on) .mh-sound__bars i:nth-child(4) { transform: scaleY(.4); }
/* bouton « revoir le chargement » : en bas à droite, seulement sur l'accueil */
.mh-replay { position: fixed; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: none; align-items: center; gap: 8px; padding: 8px 0; background: none; border: 0; color: var(--ink); font-family: var(--font-mono); cursor: pointer; text-transform: lowercase; }
.mh-replay span { font-size: 15px; line-height: 1; transition: transform .6s cubic-bezier(.19,1,.22,1); }
.mh-replay:hover span { transform: rotate(-360deg); }
.mh-replay::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 5px; background: repeating-linear-gradient(-55deg, currentColor 0 1px, transparent 1px 3.5px); clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.19,1,.22,1); }
.mh-replay:hover::after { clip-path: inset(0 0 0 0); }
.mh-replay:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
html[data-page="accueil"]:not(.is-gated) .mh-replay { display: inline-flex; }
@media (max-width: 860px) { .mh-replay { right: 14px; bottom: 14px; } }
/* logo MOHR de l'en-tête plus grand */
.mh-top__logo img { height: 66px; }
@media (max-width: 860px) { .mh-top__logo img { height: 44px; } }

/* son du chargement plus gros, trait rouge plus épais */
.mh-gate__sound .mh-sound__bars { height: 26px; gap: 4px; }
.mh-gate__sound .mh-sound__bars i { width: 3px; }
.mh-gate__sound .mh-sound__bars::after { left: -7px; right: -7px; height: 3.5px; margin-top: -1.75px; }
/* chargement : le logo MOHR prend toute la largeur du trait */
.mh-gate__ring .mh-gate__logo { width: 86%; }
/* rond plein liquide : trait plus épais, comme une coulée */
.mh-gate__ring .mh-sigil__arc { stroke-width: 3; }
.mh-gate__ring .mh-sigil__liquid .mh-sigil__track { stroke-width: 1.4; opacity: .6; }
/* chargement : mots de chargement dans le même style que « entrer » ; « entrer » centré, plus gros, sous le trait ; le son plus bas, centré */
.mh-gate__ring .mh-gate__row { flex-direction: column; gap: 14px; }
.mh-gate__ring .mh-gate__slot { justify-items: center; }
.mh-gate__ring .mh-gate__meta, .mh-gate__ring .mh-gate__hint { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: .04em; line-height: 1; text-transform: none; color: #fff; }
.mh-gate__ring .mh-gate__meta #gate-pct { display: none; }
.mh-gate__ring .mh-gate__sound { margin-top: 6px; }
/* rond plein liquide vectoriel (remplace le cercle filtré qui pixelisait) */
.mh-gate__ring .mh-sigil__liquid { display: none; }
.mh-sigil__liq path { stroke: none; }
.mh-sigil__liqtrack { fill: rgba(255,255,255,.35); }
.mh-sigil__liqarc { fill: #fff; }
/* barre de chargement : liquide rouge, derrière le bas du logo */
.mh-gate__ring .mh-gate__inner { grid-template-columns: 1fr; }
.mh-gate__ring .mh-gate__logo { grid-row: 1; grid-column: 1; position: relative; z-index: 1; }
.mh-gate__ring .mh-gate__bar { grid-row: 1; grid-column: 1; align-self: end; justify-self: center; width: 86%; height: 22px; margin-bottom: 6%; background: none; overflow: visible; z-index: 0; }
.mh-gate__ring .mh-gate__bar i { display: none; }
.mh-liqbar { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mh-liqbar__track { fill: rgba(254,0,0,.25); }
.mh-liqbar__fill { fill: var(--blood); }

/* — chargement v9 : barre 100 % rouge, logo au-dessus de tout, son en onde de lames — */
.mh-liqbar path, .mh-gate__ring .mh-liqbar path { stroke: none; }
.mh-liqbar__track { fill: rgba(140,0,0,.55); }
.mh-gate__ring .mh-gate__inner { z-index: 6; }
.mh-gate__ring .mh-gate__logo { width: 124%; max-width: none; justify-self: center; z-index: 3; filter: drop-shadow(0 0 18px rgba(0,0,0,.55)); }
.mh-gate__ring .mh-gate__bar { width: 108%; z-index: 1; margin-bottom: 4%; }
/* son : neuf lames effilées en miroir (une onde), qui respirent quand le son joue ; coupé = onde écrasée + entaille rouge */
.mh-gate__sound .mh-sound__wave { height: 30px; gap: 4px; align-items: center; }
.mh-gate__sound .mh-sound__wave i { width: 4px; height: 100%; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform-origin: 50% 50%; transform: scaleY(.16); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.mh-gate__sound .mh-sound__wave i:nth-child(1), .mh-gate__sound .mh-sound__wave i:nth-child(9) { --h: .35; }
.mh-gate__sound .mh-sound__wave i:nth-child(2), .mh-gate__sound .mh-sound__wave i:nth-child(8) { --h: .55; }
.mh-gate__sound .mh-sound__wave i:nth-child(3), .mh-gate__sound .mh-sound__wave i:nth-child(7) { --h: .8; }
.mh-gate__sound .mh-sound__wave i:nth-child(4), .mh-gate__sound .mh-sound__wave i:nth-child(6) { --h: .65; }
.mh-gate__sound .mh-sound__wave i:nth-child(5) { --h: 1; }
.mh-gate__sound.is-on .mh-sound__wave i { animation: mh-wave 1.3s ease-in-out infinite; }
.mh-gate__sound.is-on .mh-sound__wave i:nth-child(2n) { animation-duration: 1.05s; animation-delay: -.4s; }
.mh-gate__sound.is-on .mh-sound__wave i:nth-child(3n) { animation-duration: 1.6s; animation-delay: -.8s; }
.mh-gate__sound.is-on .mh-sound__wave i:nth-child(5) { animation-duration: .9s; }
@keyframes mh-wave { 0%, 100% { transform: scaleY(calc(var(--h) * .45)); } 50% { transform: scaleY(var(--h)); } }
.mh-gate__sound:not(.is-on) .mh-sound__wave i:nth-child(n) { transform: scaleY(.16); }
.mh-gate__sound .mh-sound__wave::after { left: -10px; right: -10px; top: 50%; height: 6px; margin-top: -3px; background: var(--blood); clip-path: polygon(0 50%, 12% 15%, 55% 0, 100% 50%, 55% 100%, 12% 85%); transform-origin: 100% 50%; transform: scaleX(1); transition: transform .45s cubic-bezier(.7,0,.2,1); }
.mh-gate__sound.is-on .mh-sound__wave::after { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .mh-gate__sound.is-on .mh-sound__wave i { animation: none; transform: scaleY(var(--h)); } }
/* entrer : sans soulignement, un peu plus gros, remonté juste sous la barre, au-dessus de tout */
.mh-gate__ring .mh-gate__hint, .mh-gate:has(.mh-gate__enter:focus-visible) .mh-gate__hint { text-decoration: none; }
.mh-gate__ring .mh-gate__hint::after, .mh-gate__ring .mh-gate__meta::after { display: none; }
.mh-gate__ring .mh-gate__meta, .mh-gate__ring .mh-gate__hint { font-size: 36px; }
.mh-gate__ring .mh-gate__row { position: relative; z-index: 7; margin-top: -7%; gap: 8px; }
.mh-gate__ring .mh-gate__sound { margin-top: 0; }
/* son : sorti du cercle, centré juste en dessous */
.mh-gate__ring .mh-gate__sound { margin-top: 76px; filter: drop-shadow(0 0 6px rgba(0,0,0,.9)) drop-shadow(0 0 2px rgba(0,0,0,.9)); }
@media (max-width: 600px) { .mh-gate__ring .mh-gate__sound { margin-top: 56px; } }
.mh-gate__ring .mh-gate__sound .mh-sound__wave { height: 44px; gap: 5px; }
.mh-gate__ring .mh-gate__sound .mh-sound__wave i { width: 5px; }
.mh-gate__ring .mh-gate__sound .mh-sound__wave::after { height: 8px; margin-top: -4px; left: -14px; right: -14px; }
/* v10 : logo un peu réduit ; son au-dessus de « entrer », l'onde bouge toujours (même coupée), entaille rouge plus fine */
.mh-gate__ring .mh-gate__logo { width: 112%; }
.mh-gate__ring .mh-gate__sound { order: -1; margin-top: 4px; margin-bottom: -2px; }
.mh-gate__ring .mh-gate__sound .mh-sound__wave { height: 34px; gap: 4px; }
.mh-gate__ring .mh-gate__sound .mh-sound__wave i { width: 4px; }
.mh-gate__ring .mh-gate__sound .mh-sound__wave i:nth-child(n) { animation: mh-wave 1.3s ease-in-out infinite; }
.mh-gate__ring .mh-gate__sound .mh-sound__wave i:nth-child(2n) { animation-duration: 1.05s; animation-delay: -.4s; }
.mh-gate__ring .mh-gate__sound .mh-sound__wave i:nth-child(3n) { animation-duration: 1.6s; animation-delay: -.8s; }
.mh-gate__ring .mh-gate__sound .mh-sound__wave i:nth-child(5) { animation-duration: .9s; animation-delay: 0s; }
.mh-gate__ring .mh-gate__sound .mh-sound__wave::after { height: 4px; margin-top: -2px; left: -6px; right: -6px; }
@media (prefers-reduced-motion: reduce) { .mh-gate__ring .mh-gate__sound .mh-sound__wave i:nth-child(n) { animation: none; transform: scaleY(var(--h)); } }
/* v11 : rond liquide noir ; « entrer » au-dessus, le son dessous ; aucun soulignement sous le son */
.mh-gate__ring .mh-sigil__liqtrack { fill: rgba(0,0,0,.55); }
.mh-gate__ring .mh-sigil__liqarc { fill: #000; }
.mh-gate__ring .mh-gate__sound { order: 0; margin-top: 2px; margin-bottom: 0; }
.mh-gate__ring .mh-gate__sound.mh-link::after, .mh-gate__ring .mh-gate__sound::after { display: none; content: none; }
.mh-gate__ring .mh-gate__sound, .mh-gate__ring .mh-gate__sound:hover { text-decoration: none; border: 0; box-shadow: none; }

/* pages intérieures : l'œil, petit et droit, sous le logo du menu, cerclé du cadran du chargement */
.mh-eyering { position: fixed; z-index: 2; width: 170px; height: 170px; margin: -85px 0 0 -85px; left: 0; top: 0; pointer-events: none; color: var(--ink); opacity: 0; transition: opacity .8s; }
.mh-eyering svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; }
.mh-eyering .mh-sigil__liquid { display: none; }
.mh-eyering .mh-sigil__liqtrack { fill: rgba(230,225,214,.3); }
.mh-eyering .mh-sigil__liqarc { fill: var(--ink); }
.mh-eyering .mh-sigil__ticks line { opacity: .55; }
html:not([data-page="accueil"]) .mh-eyering.is-on { opacity: 1; }
@media (max-width: 700px) { .mh-eyering { width: 120px; height: 120px; margin: -60px 0 0 -60px; } }
.mh-has-bg > .mh-eyering, .mh .mh-eyering { position: fixed; z-index: 3; }
.mh-eyering { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
@media (max-width: 700px) { .mh-eyering { width: 110px; height: 110px; margin: -55px 0 0 -55px; } }
/* le menu du haut est toujours présent, fixé en haut de l'écran */
.mh-top, .mh-top.is-away { position: fixed; transform: none; }
/* le logo du menu fait la largeur du cadran de l'œil (anneau tireté extérieur) */
.mh-top__logo img { height: 88px; }
@media (max-width: 700px) { .mh-top__logo img { height: 64px; } }
/* son du menu : la même onde de lames que le chargement, en petit */
.mh-top__sound .mh-sound__wave { position: relative; height: 18px; gap: 2.5px; align-items: center; }
.mh-top__sound .mh-sound__wave i { width: 2.5px; height: 100%; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform-origin: 50% 50%; }
.mh-top__sound .mh-sound__wave i:nth-child(1), .mh-top__sound .mh-sound__wave i:nth-child(9) { --h: .35; }
.mh-top__sound .mh-sound__wave i:nth-child(2), .mh-top__sound .mh-sound__wave i:nth-child(8) { --h: .55; }
.mh-top__sound .mh-sound__wave i:nth-child(3), .mh-top__sound .mh-sound__wave i:nth-child(7) { --h: .8; }
.mh-top__sound .mh-sound__wave i:nth-child(4), .mh-top__sound .mh-sound__wave i:nth-child(6) { --h: .65; }
.mh-top__sound .mh-sound__wave i:nth-child(5) { --h: 1; }
.mh-top__sound .mh-sound__wave i:nth-child(n) { animation: mh-wave 1.3s ease-in-out infinite; }
.mh-top__sound .mh-sound__wave i:nth-child(2n) { animation-duration: 1.05s; animation-delay: -.4s; }
.mh-top__sound .mh-sound__wave i:nth-child(3n) { animation-duration: 1.6s; animation-delay: -.8s; }
.mh-top__sound .mh-sound__wave i:nth-child(5) { animation-duration: .9s; animation-delay: 0s; }
.mh-top__sound .mh-sound__wave::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2.5px; margin-top: -1.25px; background: var(--blood); clip-path: polygon(0 50%, 12% 15%, 55% 0, 100% 50%, 55% 100%, 12% 85%); transform-origin: 100% 50%; transition: transform .45s cubic-bezier(.7,0,.2,1); }
.mh-top__sound.is-on .mh-sound__wave::after { transform: scaleX(0); }
.mh-top__sound:not(.is-on) { opacity: 1; }
.mh-top__sound::after { display: none; }
@media (prefers-reduced-motion: reduce) { .mh-top__sound .mh-sound__wave i:nth-child(n) { animation: none; transform: scaleY(var(--h)); } }
/* v13 — en-tête : logo à gauche, menu au milieu, panier + son à droite, écarts égaux (space-between) ; en différence pour rester lisible sur le blanc */
.mh-top { display: flex; justify-content: space-between; align-items: center; mix-blend-mode: difference; color: #fff !important; }
.mh-top > nav { display: flex; }
.mh-top > nav .mh-top__nav { gap: 28px; }
.mh-top__right nav { margin-right: 0; }
.mh-top .mh-logo--os, .mh-top__logo[data-theme="os"] .mh-logo--os { display: none !important; }
.mh-top .mh-logo--nuit, .mh-top__logo[data-theme="os"] .mh-logo--nuit { display: block !important; }
.mh-top [data-theme], .mh-top a, .mh-top button { color: #fff !important; }
@media (max-width: 860px) { .mh-top > nav { display: none; } }
/* l'œil des pages intérieures et son cadran passent au-dessus du contenu, en différence : visibles même sur fond blanc */
.mh-scene.is-eye { z-index: 48; mix-blend-mode: difference; pointer-events: none; }
.mh-eyering { z-index: 49 !important; mix-blend-mode: difference; color: #fff; }
.mh-eyering .mh-sigil__liqtrack { fill: rgba(255,255,255,.3); } .mh-eyering .mh-sigil__liqarc { fill: #fff; }
/* fond des fiches produit et de la collab : blanc, pas beige */
[data-theme="os"] { --ground: #ffffff; --ground-raised: #f1f1f1; --rule: #d6d6d6; --on-pill: #ffffff; }
[data-theme="os"] { --plate: #ffffff; }
.mh-pdp__stage[data-theme="os"], [data-theme="os"] .mh-pdp__media { background: #fff; }
/* fiche produit : vignettes « face » / « dos » (le démon qui porte le t-shirt) et choix d'impression */
.mh-pdp__thumbs button { position: relative; }
.mh-pdp__thumbs button em { position: absolute; left: 0; right: 0; bottom: 3px; font: 600 9px/1 var(--font-mono); font-style: normal; letter-spacing: .08em; text-align: center; color: #0b0a09; }
.mh-sides { margin-bottom: 18px; }
.mh-sides .mh-sizes__row { grid-template-columns: repeat(2, 1fr); }
.mh-demon { cursor: grab; } .mh-demon:active { cursor: grabbing; }
/* suivi du visage (webcam) : un petit œil à côté du son ; éteint = entaille rouge comme le son */
.mh-top__cam::after { display: none; }
.mh-cam__eye { position: relative; display: inline-block; width: 26px; height: 14px; }
.mh-cam__eye svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; }
.mh-cam__eye circle { fill: currentColor; stroke: none; transform-origin: 15px 8px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.mh-top__cam:not(.is-on) .mh-cam__eye circle { transform: scale(.55); }
.mh-top__cam.is-on .mh-cam__eye circle { animation: mh-cam-look 2.6s ease-in-out infinite; }
@keyframes mh-cam-look { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 65% { transform: translateX(4px); } }
.mh-cam__eye::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2.5px; margin-top: -1.25px; background: var(--blood); clip-path: polygon(0 50%, 12% 15%, 55% 0, 100% 50%, 55% 100%, 12% 85%); transform-origin: 100% 50%; transition: transform .45s cubic-bezier(.7,0,.2,1); }
.mh-top__cam.is-on .mh-cam__eye::after { transform: scaleX(0); }
.mh-top__cam.is-busy .mh-cam__eye { animation: mh-cam-busy .8s ease-in-out infinite; }
@keyframes mh-cam-busy { 50% { opacity: .35; } }
.mh-top__cam.is-blocked { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .mh-top__cam.is-on .mh-cam__eye circle { animation: none; } }
/* suivi du visage : vidéo cachée (doit rester dans la page pour iOS) et message d'erreur */
.mh-headvideo { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; z-index: -1; }
.mh-headtoast { position: fixed; z-index: 60; right: 16px; top: 76px; max-width: min(340px, calc(100vw - 32px)); padding: 10px 12px; font: 12px/1.4 var(--font-mono); color: #fff; background: #0b0a09; border: 1px solid rgba(255,255,255,.25); opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.mh-headtoast.is-on { opacity: 1; transform: none; }
.mh-sides .mh-sizes__row:has(label:only-child) { grid-template-columns: 1fr; }
.mh-credit { margin-top: 8px; font-size: 10px; opacity: .55; } .mh-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* commande (dans le panier) et formulaire de contact : champs gravés, soulignés, sans boîte */
.mh-checkout, .mh-contact__form { display: grid; gap: 14px; }
.mh-checkout label, .mh-contact__form label { display: grid; gap: 4px; font: 11px/1.2 var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); }
.mh-checkout input, .mh-contact__form input, .mh-contact__form textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); font: 15px/1.4 var(--font-body, inherit); padding: 6px 0; border-radius: 0; resize: vertical; }
.mh-checkout input:focus, .mh-contact__form input:focus, .mh-contact__form textarea:focus { outline: none; border-bottom-color: var(--ink); }
.mh-checkout__row { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.mh-checkout__msg:empty, [data-contact-msg]:empty { display: none; }
.mh-contact__form { grid-template-columns: 1fr 1fr; max-width: 720px; margin: 28px 0 22px; }
.mh-contact__wide, .mh-contact__form > button, .mh-contact__form > p { grid-column: 1 / -1; }
.mh-contact__form > button { justify-self: start; }
.mh-contact__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 700px) { .mh-contact__form { grid-template-columns: 1fr; } }