/* Mosaïques 02-04 portées depuis presentation-melodiza-fx/mission-mock/ par porter.py (ne pas éditer à la main : relancer le portage) */
/* ---- chapitre 02 : catalogue.html (porté tel quel) ---- */
.mz-02 { position: absolute; right: 67.2px; top: 50%; transform: translateY(-50%); width: 873.6px; height: 700px; }
.mz-02 .z-win { position: absolute; border-radius: 18px; overflow: hidden; background: var(--win);
         box-shadow: 0 24px 60px -24px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.08); }
.mz-02 .z-win .z-bar { position: absolute; top: 0; left: 0; right: 0; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px;
              background: rgba(255,255,255,.04); font-size: 11px; color: rgba(255,255,255,.6); z-index: 2; }
.mz-02 .z-win .z-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mz-02 .z-win .z-media { position: absolute; inset: 26px 0 0 0; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: left top; }
.mz-02 .z-pad { padding: 18px; }
.mz-02 .z-h4 { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6); }
.mz-02 .z-num { font-weight: 600; font-size: 38px; letter-spacing: -.02em; }
.mz-02 .z-sub { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 2px; }
.mz-02 .z-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 10px; border-radius: 999px;
          background: rgba(255,31,143,.14); color: #ff8cc4; font-size: 12px; font-weight: 500; }
.mz-02 .z-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.mz-02 .z-kind { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.mz-02 .z-phone { position: absolute; aspect-ratio: 9 / 19.5; border-radius: 30px; padding: 8px; background: #050406;
           box-shadow: 0 30px 70px -24px rgba(0,0,0,.85), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.mz-02 .z-phone .z-screen { position: relative; width: 100%; height: 100%; border-radius: 23px; overflow: hidden;
                   background: radial-gradient(120% 70% at 60% 35%, #2a0f1f 0%, #120a10 60%, #0b080c 100%); }
.mz-02 .z-phone .z-notch { position: absolute; top: 8px; left: 50%; width: 32%; height: 18px; transform: translateX(-50%); border-radius: 10px; background: #050406; z-index: 2; }
.mz-02 .z-phone canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mz-02 .z-phone .z-txt { position: absolute; left: 10%; right: 10%; bottom: 9%; }
.mz-02 .z-lieu { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 24px; line-height: 1.05; margin-top: 3px; transition: opacity .45s, transform .55s cubic-bezier(.22,1,.36,1); }
.mz-02 .z-lieu.z-out { opacity: 0; transform: translateY(5px); }
.mz-02 .z-rail { position: absolute; left: 0; right: 0; top: 46px; display: flex; gap: 16px; padding: 0 18px; animation: z02-rail 22s linear infinite; }
.mz-02 .z-pl { flex: 0 0 150px; }
.mz-02 .z-pl .z-c { position: relative; width: 150px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.mz-02 .z-pl .z-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-02 .z-pl .z-c b { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-02 .z-pl .z-c b::before { content: ""; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.mz-02 .z-pl .z-t { margin-top: 9px; font-size: 15px; font-weight: 600; }
.mz-02 .z-pl .z-s { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 1px; }
@keyframes z02-rail { to { transform: translateX(-50%); } }
.mz-02 .z-ticket { background: #f6f3ee; color: #19151a; }
.mz-02 .z-ticket .z-ti { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 24px; line-height: 1; }
.mz-02 .z-ticket .z-ts { font-size: 12px; color: #6b6168; margin-top: 4px; }
.mz-02 .z-qr { width: 64px; height: 64px; margin-top: 12px; background:
        conic-gradient(from 90deg at 3px 3px, #19151a 25%, transparent 0) 0 0/8px 8px; border-radius: 4px; opacity: .9; }
.mz-02 .z-np { position: absolute; inset: 40px 14px 18px; display: flex; flex-direction: column; align-items: center; }
.mz-02 .z-np img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.mz-02 .z-np .z-t { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 22px; margin-top: 14px; }
.mz-02 .z-np .z-a { font-size: 12px; color: rgba(255,255,255,.6); }
.mz-02 .z-np .z-pr { width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); margin-top: 16px; overflow: hidden; }
.mz-02 .z-np .z-pr i { display: block; height: 100%; width: 40%; background: var(--rose); animation: z02-pr 12s linear infinite; }
@keyframes z02-pr { from { width: 5% } to { width: 95% } }
.mz-02 .z-np .z-ctl { display: flex; gap: 22px; align-items: center; margin-top: 16px; }
.mz-02 .z-np .z-ctl b { width: 44px; height: 44px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-02 .z-np .z-ctl b::before { content: ""; width: 4px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: content-box; width: 4px; }
.mz-02 .z-np .z-ctl s { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.mz-02 .z-np .z-ctl s.z-p { border-right: 10px solid #fff; }
.mz-02 .z-np .z-ctl s.z-n { border-left: 10px solid #fff; }
.mz-02 .z-badges { display: flex; flex-direction: column; gap: 10px; }
.mz-02 .z-badges img, .mz-02 .z-badges .z-web { height: 34px; width: auto; display: block; }
.mz-02 .z-badges .z-web { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 7px; border: 1px solid #8a8a8a; background: #000; font-size: 13px; font-weight: 500; }
.mz-02 .z-logos { background: #0d0b0e; }
.mz-02 .z-logos .z-marq { position: absolute; inset: 0; display: flex; align-items: center; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mz-02 .z-logos .z-track { display: flex; align-items: center; gap: 90px; padding-left: 90px; animation: z02-marq 26s linear infinite; }
@keyframes z02-marq { to { transform: translateX(-50%); } }
.mz-02 .z-logos img { opacity: .92; height: 74px; width: auto; object-fit: contain; }
.mz-02 .z-stat .z-num { font-size: 30px; }
.mz-02 .z-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,31,143,.14); display: grid; place-items: center; color: #ff8cc4; font-size: 16px; }
.mz-02 .z-offer .z-n { color: var(--rose); font-weight: 600; font-size: 13px; }
.mz-02 .z-offer .z-tx { font-size: 18px; font-weight: 500; line-height: 1.3; margin-top: 6px; }
.mz-02 .z-duo { display: flex; align-items: center; justify-content: center; gap: 18px; }
.mz-02 .z-duo .z-m { font-family: "Bodoni Moda", serif; font-size: 54px; }
.mz-02 .z-duo .z-m em { color: #ff6fb0; font-style: italic; }
.mz-02 .z-duo .z-x { font-size: 22px; color: rgba(255,255,255,.5); }
.mz-02 .z-duo .z-pl2 { background: #f6f3ee; border-radius: 12px; padding: 10px 14px; }
.mz-02 .z-duo .z-pl2 img { height: 66px; display: block; }
.mz-02 .z-w-gen { padding: 40px 0 16px; }
.mz-02 .z-marq2 { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mz-02 .z-trk { display: flex; width: max-content; animation: z02-rail 34s linear infinite; }
.mz-02 .z-grp { display: flex; gap: 12px; padding-right: 12px; }
.mz-02 .z-gn { position: relative; flex: 0 0 148px; height: 172px; border-radius: 14px; overflow: hidden; background: #1b1620; isolation: isolate;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.mz-02 .z-gn { background: radial-gradient(140% 100% at 0% 0%, var(--t) 0%, color-mix(in srgb, var(--t) 35%, #120e16) 55%, #120e16 100%); }
.mz-02 .z-gn svg { position: absolute; left: 50%; top: 37%; width: 46px; transform: translate(-50%,-50%); opacity: .9; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.mz-02 .z-gn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,8,12,0) 45%, rgba(10,8,12,.55) 100%); }
.mz-02 .z-gn .z-gk { position: absolute; left: 12px; top: 11px; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mz-02 .z-gn .z-gt { position: absolute; left: 12px; right: 10px; bottom: 30px; font-family: "Bodoni Moda", serif; font-style: italic; font-size: 23px; line-height: 1; }
.mz-02 .z-gn .z-gc { position: absolute; left: 12px; bottom: 13px; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.mz-02 .z-gn .z-eq { position: absolute; right: 11px; top: 10px; display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.mz-02 .z-gn .z-eq b { width: 2px; border-radius: 1px; background: var(--rose); animation: z02-eq 1s ease-in-out infinite; }
.mz-02 .z-gn .z-eq b:nth-child(2) { animation-delay: -.35s }
.mz-02 .z-gn .z-eq b:nth-child(3) { animation-delay: -.7s }
@keyframes z02-eq { 0%,100% { height: 30% } 50% { height: 100% } }
.mz-02 .z-cert { background: linear-gradient(160deg, #e9e3da, #d9d1c6); color: #19151a; padding: 15px 16px 14px; }
.mz-02 .z-cert::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(25,21,26,.12); border-radius: 13px; pointer-events: none; }
.mz-02 .z-cert .z-hd { display: flex; align-items: center; justify-content: space-between; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.mz-02 .z-cert .z-hd span { display: flex; align-items: center; gap: 7px; }
.mz-02 .z-cert .z-hd img { width: 16px; height: 16px; }
.mz-02 .z-cert .z-hd em { font-style: normal; color: #8a7f86; letter-spacing: .08em; font-weight: 500; }
.mz-02 .z-cert .z-body { display: flex; gap: 14px; margin-top: 9px; align-items: flex-end; }
.mz-02 .z-cert .z-ct { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 21px; line-height: 1; }
.mz-02 .z-cert dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(25,21,26,.14); font-size: 11px; }
.mz-02 .z-cert dt { color: #8a7f86; }
.mz-02 .z-cert dd { margin: 0; font-weight: 500; }
.mz-02 .z-cert .z-qrw { margin-left: auto; text-align: center; flex: none; }
.mz-02 .z-cert .z-qrw img { width: 62px; height: 62px; mix-blend-mode: multiply; display: block; }
.mz-02 .z-cert .z-qrw small { display: block; margin-top: 5px; font-size: 9.5px; color: #8a7f86; letter-spacing: .04em; }
.mz-02 .z-cert .z-seal { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10px !important; padding: 5px 10px 5px 6px; border-radius: 999px; background: rgba(255,31,143,.1); color: #c2186f; font-size: 11px; font-weight: 600; }
.mz-02 .z-cert .z-seal::before { content: "✓"; width: 16px; height: 16px; border-radius: 50%; background: var(--rose); color: #fff; font-size: 10px; display: grid; place-items: center; }
.mz-02 .z-list { position: absolute; inset: 52px 12px 12px; overflow: hidden; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
.mz-02 .z-list .z-in { animation: z02-up 18s linear infinite; }
@keyframes z02-up { to { transform: translateY(-50%); } }
.mz-02 .z-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mz-02 .z-row img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.mz-02 .z-row .z-t { font-size: 13px; font-weight: 600; }
.mz-02 .z-row .z-s { font-size: 11px; color: rgba(255,255,255,.55); }
.mz-02 .z-row .z-p { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-02 .z-row .z-p::before { content: ""; border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.mz-02 .z-ph-head { position: absolute; top: 34px; left: 16px; right: 16px; font-family: "Bodoni Moda", serif; font-style: italic; font-size: 22px; }
.mz-02 .z-ph-sub { position: absolute; top: 62px; left: 16px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); font-weight: 600; }
.mz-02 .z-genres { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mz-02 .z-genres span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12px; color: rgba(255,255,255,.8); }
.mz-02 .z-genres span.z-on { background: rgba(255,31,143,.16); color: #ff8cc4; }
.mz-02 .z-ph-sub { transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.mz-02 .z-ph-sub.z-out { opacity: 0; transform: translateY(4px); }
.mz-02 { display: flex; align-items: center; gap: clamp(20px, 40.32px, 40px); }
.mz-02 > .z-phone { position: relative; left: auto !important; top: auto !important; transform: none !important; width: auto !important; flex: 0 0 max(27%, 220px); }
.mz-02 .z-col { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(22px, 36px, 40px); }
.mz-02 .z-col > .z-win:nth-child(2) { min-width: min(340px, 100%); }
.mz-02 .z-ph-head { white-space: nowrap; font-size: 21px; }
.mz-02 .z-col > .z-win { position: relative; left: auto !important; top: auto !important; }
.mz-02 .z-qrimg { width: 84px; height: 84px; margin-top: 12px; display: block; border-radius: 4px; }

/* ---- chapitre 03 : ambiance.html (porté tel quel) ---- */
.mz-03 { position: absolute; right: 67.2px; top: 50%; transform: translateY(-50%); width: 873.6px; height: 700px; }
.mz-03 .z-win { position: absolute; border-radius: 18px; overflow: hidden; background: var(--win);
         box-shadow: 0 24px 60px -24px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.08); }
.mz-03 .z-win .z-bar { position: absolute; top: 0; left: 0; right: 0; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px;
              background: rgba(255,255,255,.04); font-size: 11px; color: rgba(255,255,255,.6); z-index: 2; }
.mz-03 .z-win .z-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mz-03 .z-win .z-media { position: absolute; inset: 26px 0 0 0; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: left top; }
.mz-03 .z-pad { padding: 18px; }
.mz-03 .z-h4 { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6); }
.mz-03 .z-num { font-weight: 600; font-size: 38px; letter-spacing: -.02em; }
.mz-03 .z-sub { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 2px; }
.mz-03 .z-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 10px; border-radius: 999px;
          background: rgba(255,31,143,.14); color: #ff8cc4; font-size: 12px; font-weight: 500; }
.mz-03 .z-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.mz-03 .z-kind { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.mz-03 .z-phone { position: absolute; aspect-ratio: 9 / 19.5; border-radius: 30px; padding: 8px; background: #050406;
           box-shadow: 0 30px 70px -24px rgba(0,0,0,.85), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.mz-03 .z-phone .z-screen { position: relative; width: 100%; height: 100%; border-radius: 23px; overflow: hidden;
                   background: radial-gradient(120% 70% at 60% 35%, #2a0f1f 0%, #120a10 60%, #0b080c 100%); }
.mz-03 .z-phone .z-notch { position: absolute; top: 8px; left: 50%; width: 32%; height: 18px; transform: translateX(-50%); border-radius: 10px; background: #050406; z-index: 2; }
.mz-03 .z-phone canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mz-03 .z-phone .z-txt { position: absolute; left: 10%; right: 10%; bottom: 9%; }
.mz-03 .z-lieu { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 24px; line-height: 1.05; margin-top: 3px; transition: opacity .45s, transform .55s cubic-bezier(.22,1,.36,1); }
.mz-03 .z-lieu.z-out { opacity: 0; transform: translateY(5px); }
.mz-03 .z-rail { position: absolute; left: 0; right: 0; top: 46px; display: flex; gap: 16px; padding: 0 18px; animation: z03-rail 22s linear infinite; }
.mz-03 .z-pl { flex: 0 0 150px; }
.mz-03 .z-pl .z-c { position: relative; width: 150px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.mz-03 .z-pl .z-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-03 .z-pl .z-c b { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-03 .z-pl .z-c b::before { content: ""; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.mz-03 .z-pl .z-t { margin-top: 9px; font-size: 15px; font-weight: 600; }
.mz-03 .z-pl .z-s { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 1px; }
@keyframes z03-rail { to { transform: translateX(-50%); } }
.mz-03 .z-ticket { background: #f6f3ee; color: #19151a; }
.mz-03 .z-ticket .z-ti { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 24px; line-height: 1; }
.mz-03 .z-ticket .z-ts { font-size: 12px; color: #6b6168; margin-top: 4px; }
.mz-03 .z-qr { width: 64px; height: 64px; margin-top: 12px; background:
        conic-gradient(from 90deg at 3px 3px, #19151a 25%, transparent 0) 0 0/8px 8px; border-radius: 4px; opacity: .9; }
.mz-03 .z-np { position: absolute; inset: 40px 14px 18px; display: flex; flex-direction: column; align-items: center; }
.mz-03 .z-np img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.mz-03 .z-np .z-t { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 22px; margin-top: 14px; }
.mz-03 .z-np .z-a { font-size: 12px; color: rgba(255,255,255,.6); }
.mz-03 .z-np .z-pr { width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); margin-top: 16px; overflow: hidden; }
.mz-03 .z-np .z-pr i { display: block; height: 100%; width: 40%; background: var(--rose); animation: z03-pr 12s linear infinite; }
@keyframes z03-pr { from { width: 5% } to { width: 95% } }
.mz-03 .z-np .z-ctl { display: flex; gap: 22px; align-items: center; margin-top: 16px; }
.mz-03 .z-np .z-ctl b { width: 44px; height: 44px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-03 .z-np .z-ctl b::before { content: ""; width: 4px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: content-box; width: 4px; }
.mz-03 .z-np .z-ctl s { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.mz-03 .z-np .z-ctl s.z-p { border-right: 10px solid #fff; }
.mz-03 .z-np .z-ctl s.z-n { border-left: 10px solid #fff; }
.mz-03 .z-badges { display: flex; flex-direction: column; gap: 10px; }
.mz-03 .z-badges img, .mz-03 .z-badges .z-web { height: 34px; width: auto; display: block; }
.mz-03 .z-badges .z-web { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 7px; border: 1px solid #8a8a8a; background: #000; font-size: 13px; font-weight: 500; }
.mz-03 .z-logos { background: #0d0b0e; }
.mz-03 .z-logos .z-marq { position: absolute; inset: 0; display: flex; align-items: center; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mz-03 .z-logos .z-track { display: flex; align-items: center; gap: 90px; padding-left: 90px; animation: z03-marq 26s linear infinite; }
@keyframes z03-marq { to { transform: translateX(-50%); } }
.mz-03 .z-logos img { opacity: .92; height: 74px; width: auto; object-fit: contain; }
.mz-03 .z-stat .z-num { font-size: 30px; }
.mz-03 .z-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,31,143,.14); display: grid; place-items: center; color: #ff8cc4; font-size: 16px; }
.mz-03 .z-offer .z-n { color: var(--rose); font-weight: 600; font-size: 13px; }
.mz-03 .z-offer .z-tx { font-size: 18px; font-weight: 500; line-height: 1.3; margin-top: 6px; }
.mz-03 .z-duo { display: flex; align-items: center; justify-content: center; gap: 18px; }
.mz-03 .z-duo .z-m { font-family: "Bodoni Moda", serif; font-size: 54px; }
.mz-03 .z-duo .z-m em { color: #ff6fb0; font-style: italic; }
.mz-03 .z-duo .z-x { font-size: 22px; color: rgba(255,255,255,.5); }
.mz-03 .z-duo .z-pl2 { background: #f6f3ee; border-radius: 12px; padding: 10px 14px; }
.mz-03 .z-duo .z-pl2 img { height: 66px; display: block; }
.mz-03 .z-w-gen { padding: 40px 0 16px; }
.mz-03 .z-marq2 { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mz-03 .z-trk { display: flex; width: max-content; animation: z03-rail 34s linear infinite; }
.mz-03 .z-grp { display: flex; gap: 12px; padding-right: 12px; }
.mz-03 .z-gn { position: relative; flex: 0 0 148px; height: 172px; border-radius: 14px; overflow: hidden; background: #1b1620; isolation: isolate;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.mz-03 .z-gn { background: radial-gradient(140% 100% at 0% 0%, var(--t) 0%, color-mix(in srgb, var(--t) 35%, #120e16) 55%, #120e16 100%); }
.mz-03 .z-gn svg { position: absolute; left: 50%; top: 37%; width: 46px; transform: translate(-50%,-50%); opacity: .9; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.mz-03 .z-gn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,8,12,0) 45%, rgba(10,8,12,.55) 100%); }
.mz-03 .z-gn .z-gk { position: absolute; left: 12px; top: 11px; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mz-03 .z-gn .z-gt { position: absolute; left: 12px; right: 10px; bottom: 30px; font-family: "Bodoni Moda", serif; font-style: italic; font-size: 23px; line-height: 1; }
.mz-03 .z-gn .z-gc { position: absolute; left: 12px; bottom: 13px; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.mz-03 .z-gn .z-eq { position: absolute; right: 11px; top: 10px; display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.mz-03 .z-gn .z-eq b { width: 2px; border-radius: 1px; background: var(--rose); animation: z03-eq 1s ease-in-out infinite; }
.mz-03 .z-gn .z-eq b:nth-child(2) { animation-delay: -.35s }
.mz-03 .z-gn .z-eq b:nth-child(3) { animation-delay: -.7s }
@keyframes z03-eq { 0%,100% { height: 30% } 50% { height: 100% } }
.mz-03 .z-cert { background: linear-gradient(160deg, #e9e3da, #d9d1c6); color: #19151a; padding: 15px 16px 14px; }
.mz-03 .z-cert::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(25,21,26,.12); border-radius: 13px; pointer-events: none; }
.mz-03 .z-cert .z-hd { display: flex; align-items: center; justify-content: space-between; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.mz-03 .z-cert .z-hd span { display: flex; align-items: center; gap: 7px; }
.mz-03 .z-cert .z-hd img { width: 16px; height: 16px; }
.mz-03 .z-cert .z-hd em { font-style: normal; color: #8a7f86; letter-spacing: .08em; font-weight: 500; }
.mz-03 .z-cert .z-body { display: flex; gap: 14px; margin-top: 9px; align-items: flex-end; }
.mz-03 .z-cert .z-ct { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 21px; line-height: 1; }
.mz-03 .z-cert dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(25,21,26,.14); font-size: 11px; }
.mz-03 .z-cert dt { color: #8a7f86; }
.mz-03 .z-cert dd { margin: 0; font-weight: 500; }
.mz-03 .z-cert .z-qrw { margin-left: auto; text-align: center; flex: none; }
.mz-03 .z-cert .z-qrw img { width: 62px; height: 62px; mix-blend-mode: multiply; display: block; }
.mz-03 .z-cert .z-qrw small { display: block; margin-top: 5px; font-size: 9.5px; color: #8a7f86; letter-spacing: .04em; }
.mz-03 .z-cert .z-seal { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10px !important; padding: 5px 10px 5px 6px; border-radius: 999px; background: rgba(255,31,143,.1); color: #c2186f; font-size: 11px; font-weight: 600; }
.mz-03 .z-cert .z-seal::before { content: "✓"; width: 16px; height: 16px; border-radius: 50%; background: var(--rose); color: #fff; font-size: 10px; display: grid; place-items: center; }
.mz-03 .z-list { position: absolute; inset: 52px 12px 12px; overflow: hidden; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
.mz-03 .z-list .z-in { animation: z03-up 18s linear infinite; }
@keyframes z03-up { to { transform: translateY(-50%); } }
.mz-03 .z-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mz-03 .z-row img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.mz-03 .z-row .z-t { font-size: 13px; font-weight: 600; }
.mz-03 .z-row .z-s { font-size: 11px; color: rgba(255,255,255,.55); }
.mz-03 .z-row .z-p { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-03 .z-row .z-p::before { content: ""; border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.mz-03 .z-ph-head { position: absolute; top: 34px; left: 16px; right: 16px; font-family: "Bodoni Moda", serif; font-style: italic; font-size: 22px; }
.mz-03 .z-ph-sub { position: absolute; top: 62px; left: 16px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); font-weight: 600; }
.mz-03 .z-genres { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mz-03 .z-genres span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12px; color: rgba(255,255,255,.8); }
.mz-03 .z-genres span.z-on { background: rgba(255,31,143,.16); color: #ff8cc4; }
.mz-03 .z-ph-sub { transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.mz-03 .z-ph-sub.z-out { opacity: 0; transform: translateY(4px); }
.mz-03 .z-qrimg { width: 84px; height: 84px; margin-top: 12px; display: block; border-radius: 4px; }
.mz-03 { display: flex; align-items: center; gap: clamp(20px, 40.32px, 40px); }
.mz-03 > .z-phone { position: relative; left: auto !important; top: auto !important; transform: none !important; width: auto !important; flex: 0 0 max(27%, 220px); }
.mz-03 .z-col { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(22px, 36px, 40px); }
.mz-03 .z-col > .z-win:nth-child(2) { min-width: min(340px, 100%); }
.mz-03 .z-ph-head { white-space: nowrap; font-size: 21px; }
.mz-03 .z-col > .z-win { position: relative; left: auto !important; top: auto !important; }
.mz-03 .z-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mz-03 .z-w-prog { padding: 40px 18px 18px; }
.mz-03 .z-w-prog .z-top { display: flex; align-items: baseline; justify-content: space-between; }
.mz-03 .z-w-prog .z-top b { font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400; font-size: 24px; }
.mz-03 .z-w-prog .z-clock { font-variant-numeric: tabular-nums; font-size: 13px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 7px; }
.mz-03 .z-w-prog .z-clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgba(255,31,143,.2); }
.mz-03 .z-slots { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.mz-03 .z-slot { position: relative; border-radius: 12px; padding: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: background .6s, box-shadow .6s; min-width: 0; }
.mz-03 .z-slot.z-on { background: rgba(255,31,143,.12); box-shadow: inset 0 0 0 1px rgba(255,31,143,.45); }
.mz-03 .z-slot .z-h { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
.mz-03 .z-slot .z-n { font-size: 13px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.mz-03 .z-slot img { width: 100%; height: 54px; object-fit: cover; border-radius: 8px; margin-top: 9px; display: block; opacity: .55; transition: opacity .6s; }
.mz-03 .z-slot.z-on img { opacity: 1; }
.mz-03 .z-slot .z-p { font-size: 12px; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.7); }
.mz-03 .z-slot.z-on .z-p { color: #fff; }
.mz-03 .z-track { position: relative; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); margin-top: 14px; }
.mz-03 .z-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--rose); }
.mz-03 .z-track s { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,31,143,.35); }
.mz-03 .z-hours { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.4); margin-top: 7px; font-variant-numeric: tabular-nums; }
.mz-03 .z-w-sites { padding: 40px 16px 14px; }
.mz-03 .z-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 10px; background: rgba(255,255,255,.06); position: relative; font-size: 12px; font-weight: 500; text-align: center; }
.mz-03 .z-seg span { position: relative; z-index: 1; padding: 6px 0; color: rgba(255,255,255,.6); transition: color .4s; }
.mz-03 .z-seg span.z-on { color: #fff; }
.mz-03 .z-seg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 8px; background: var(--rose); transition: transform .55s cubic-bezier(.22,1,.36,1); }
.mz-03 .z-site { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mz-03 .z-site:last-child { border-bottom: 0; }
.mz-03 .z-site img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.mz-03 .z-site .z-t { font-size: 13px; font-weight: 600; }
.mz-03 .z-site .z-s { font-size: 11px; color: rgba(255,255,255,.55); }
.mz-03 .z-site .z-eq { margin-left: auto; display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.mz-03 .z-site .z-eq b { width: 2px; border-radius: 1px; background: var(--rose); animation: z03-eq 1s ease-in-out infinite; }
.mz-03 .z-site .z-eq b:nth-child(2) { animation-delay: -.35s }
.mz-03 .z-site .z-eq b:nth-child(3) { animation-delay: -.7s }
@keyframes z03-eq { 0%,100% { height: 30% } 50% { height: 100% } }

/* ---- chapitre 04 : simple.html (porté tel quel) ---- */
.mz-04 { position: absolute; right: 67.2px; top: 50%; transform: translateY(-50%); width: 873.6px; height: 700px; }
.mz-04 .z-win { position: absolute; border-radius: 18px; overflow: hidden; background: var(--win);
         box-shadow: 0 24px 60px -24px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.08); }
.mz-04 .z-win .z-bar { position: absolute; top: 0; left: 0; right: 0; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px;
              background: rgba(255,255,255,.04); font-size: 11px; color: rgba(255,255,255,.6); z-index: 2; }
.mz-04 .z-win .z-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mz-04 .z-win .z-media { position: absolute; inset: 26px 0 0 0; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: left top; }
.mz-04 .z-pad { padding: 18px; }
.mz-04 .z-h4 { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6); }
.mz-04 .z-num { font-weight: 600; font-size: 38px; letter-spacing: -.02em; }
.mz-04 .z-sub { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 2px; }
.mz-04 .z-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 10px; border-radius: 999px;
          background: rgba(255,31,143,.14); color: #ff8cc4; font-size: 12px; font-weight: 500; }
.mz-04 .z-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.mz-04 .z-kind { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.mz-04 .z-phone { position: absolute; aspect-ratio: 9 / 19.5; border-radius: 30px; padding: 8px; background: #050406;
           box-shadow: 0 30px 70px -24px rgba(0,0,0,.85), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.mz-04 .z-phone .z-screen { position: relative; width: 100%; height: 100%; border-radius: 23px; overflow: hidden;
                   background: radial-gradient(120% 70% at 60% 35%, #2a0f1f 0%, #120a10 60%, #0b080c 100%); }
.mz-04 .z-phone .z-notch { position: absolute; top: 8px; left: 50%; width: 32%; height: 18px; transform: translateX(-50%); border-radius: 10px; background: #050406; z-index: 2; }
.mz-04 .z-phone canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mz-04 .z-phone .z-txt { position: absolute; left: 10%; right: 10%; bottom: 9%; }
.mz-04 .z-lieu { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 24px; line-height: 1.05; margin-top: 3px; transition: opacity .45s, transform .55s cubic-bezier(.22,1,.36,1); }
.mz-04 .z-lieu.z-out { opacity: 0; transform: translateY(5px); }
.mz-04 .z-rail { position: absolute; left: 0; right: 0; top: 46px; display: flex; gap: 16px; padding: 0 18px; animation: z04-rail 22s linear infinite; }
.mz-04 .z-pl { flex: 0 0 150px; }
.mz-04 .z-pl .z-c { position: relative; width: 150px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.mz-04 .z-pl .z-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-04 .z-pl .z-c b { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-04 .z-pl .z-c b::before { content: ""; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.mz-04 .z-pl .z-t { margin-top: 9px; font-size: 15px; font-weight: 600; }
.mz-04 .z-pl .z-s { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 1px; }
@keyframes z04-rail { to { transform: translateX(-50%); } }
.mz-04 .z-ticket { background: #f6f3ee; color: #19151a; }
.mz-04 .z-ticket .z-ti { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 24px; line-height: 1; }
.mz-04 .z-ticket .z-ts { font-size: 12px; color: #6b6168; margin-top: 4px; }
.mz-04 .z-qr { width: 64px; height: 64px; margin-top: 12px; background:
        conic-gradient(from 90deg at 3px 3px, #19151a 25%, transparent 0) 0 0/8px 8px; border-radius: 4px; opacity: .9; }
.mz-04 .z-np { position: absolute; inset: 40px 14px 18px; display: flex; flex-direction: column; align-items: center; }
.mz-04 .z-np img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.mz-04 .z-np .z-t { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 22px; margin-top: 14px; }
.mz-04 .z-np .z-a { font-size: 12px; color: rgba(255,255,255,.6); }
.mz-04 .z-np .z-pr { width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); margin-top: 16px; overflow: hidden; }
.mz-04 .z-np .z-pr i { display: block; height: 100%; width: 40%; background: var(--rose); animation: z04-pr 12s linear infinite; }
@keyframes z04-pr { from { width: 5% } to { width: 95% } }
.mz-04 .z-np .z-ctl { display: flex; gap: 22px; align-items: center; margin-top: 16px; }
.mz-04 .z-np .z-ctl b { width: 44px; height: 44px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-04 .z-np .z-ctl b::before { content: ""; width: 4px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: content-box; width: 4px; }
.mz-04 .z-np .z-ctl s { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.mz-04 .z-np .z-ctl s.z-p { border-right: 10px solid #fff; }
.mz-04 .z-np .z-ctl s.z-n { border-left: 10px solid #fff; }
.mz-04 .z-badges { display: flex; flex-direction: column; gap: 10px; }
.mz-04 .z-badges img, .mz-04 .z-badges .z-web { height: 34px; width: auto; display: block; }
.mz-04 .z-badges .z-web { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 7px; border: 1px solid #8a8a8a; background: #000; font-size: 13px; font-weight: 500; }
.mz-04 .z-logos { background: #0d0b0e; }
.mz-04 .z-logos .z-marq { position: absolute; inset: 0; display: flex; align-items: center; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mz-04 .z-logos .z-track { display: flex; align-items: center; gap: 90px; padding-left: 90px; animation: z04-marq 26s linear infinite; }
@keyframes z04-marq { to { transform: translateX(-50%); } }
.mz-04 .z-logos img { opacity: .92; height: 74px; width: auto; object-fit: contain; }
.mz-04 .z-stat .z-num { font-size: 30px; }
.mz-04 .z-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,31,143,.14); display: grid; place-items: center; color: #ff8cc4; font-size: 16px; }
.mz-04 .z-offer .z-n { color: var(--rose); font-weight: 600; font-size: 13px; }
.mz-04 .z-offer .z-tx { font-size: 18px; font-weight: 500; line-height: 1.3; margin-top: 6px; }
.mz-04 .z-duo { display: flex; align-items: center; justify-content: center; gap: 18px; }
.mz-04 .z-duo .z-m { font-family: "Bodoni Moda", serif; font-size: 54px; }
.mz-04 .z-duo .z-m em { color: #ff6fb0; font-style: italic; }
.mz-04 .z-duo .z-x { font-size: 22px; color: rgba(255,255,255,.5); }
.mz-04 .z-duo .z-pl2 { background: #f6f3ee; border-radius: 12px; padding: 10px 14px; }
.mz-04 .z-duo .z-pl2 img { height: 66px; display: block; }
.mz-04 .z-w-gen { padding: 40px 0 16px; }
.mz-04 .z-marq2 { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mz-04 .z-trk { display: flex; width: max-content; animation: z04-rail 34s linear infinite; }
.mz-04 .z-grp { display: flex; gap: 12px; padding-right: 12px; }
.mz-04 .z-gn { position: relative; flex: 0 0 148px; height: 172px; border-radius: 14px; overflow: hidden; background: #1b1620; isolation: isolate;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.mz-04 .z-gn { background: radial-gradient(140% 100% at 0% 0%, var(--t) 0%, color-mix(in srgb, var(--t) 35%, #120e16) 55%, #120e16 100%); }
.mz-04 .z-gn svg { position: absolute; left: 50%; top: 37%; width: 46px; transform: translate(-50%,-50%); opacity: .9; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.mz-04 .z-gn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,8,12,0) 45%, rgba(10,8,12,.55) 100%); }
.mz-04 .z-gn .z-gk { position: absolute; left: 12px; top: 11px; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mz-04 .z-gn .z-gt { position: absolute; left: 12px; right: 10px; bottom: 30px; font-family: "Bodoni Moda", serif; font-style: italic; font-size: 23px; line-height: 1; }
.mz-04 .z-gn .z-gc { position: absolute; left: 12px; bottom: 13px; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.mz-04 .z-gn .z-eq { position: absolute; right: 11px; top: 10px; display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.mz-04 .z-gn .z-eq b { width: 2px; border-radius: 1px; background: var(--rose); animation: z04-eq 1s ease-in-out infinite; }
.mz-04 .z-gn .z-eq b:nth-child(2) { animation-delay: -.35s }
.mz-04 .z-gn .z-eq b:nth-child(3) { animation-delay: -.7s }
@keyframes z04-eq { 0%,100% { height: 30% } 50% { height: 100% } }
.mz-04 .z-cert { background: linear-gradient(160deg, #e9e3da, #d9d1c6); color: #19151a; padding: 15px 16px 14px; }
.mz-04 .z-cert::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(25,21,26,.12); border-radius: 13px; pointer-events: none; }
.mz-04 .z-cert .z-hd { display: flex; align-items: center; justify-content: space-between; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.mz-04 .z-cert .z-hd span { display: flex; align-items: center; gap: 7px; }
.mz-04 .z-cert .z-hd img { width: 16px; height: 16px; }
.mz-04 .z-cert .z-hd em { font-style: normal; color: #8a7f86; letter-spacing: .08em; font-weight: 500; }
.mz-04 .z-cert .z-body { display: flex; gap: 14px; margin-top: 9px; align-items: flex-end; }
.mz-04 .z-cert .z-ct { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 21px; line-height: 1; }
.mz-04 .z-cert dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(25,21,26,.14); font-size: 11px; }
.mz-04 .z-cert dt { color: #8a7f86; }
.mz-04 .z-cert dd { margin: 0; font-weight: 500; }
.mz-04 .z-cert .z-qrw { margin-left: auto; text-align: center; flex: none; }
.mz-04 .z-cert .z-qrw img { width: 62px; height: 62px; mix-blend-mode: multiply; display: block; }
.mz-04 .z-cert .z-qrw small { display: block; margin-top: 5px; font-size: 9.5px; color: #8a7f86; letter-spacing: .04em; }
.mz-04 .z-cert .z-seal { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10px !important; padding: 5px 10px 5px 6px; border-radius: 999px; background: rgba(255,31,143,.1); color: #c2186f; font-size: 11px; font-weight: 600; }
.mz-04 .z-cert .z-seal::before { content: "✓"; width: 16px; height: 16px; border-radius: 50%; background: var(--rose); color: #fff; font-size: 10px; display: grid; place-items: center; }
.mz-04 .z-list { position: absolute; inset: 52px 12px 12px; overflow: hidden; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
.mz-04 .z-list .z-in { animation: z04-up 18s linear infinite; }
@keyframes z04-up { to { transform: translateY(-50%); } }
.mz-04 .z-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mz-04 .z-row img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.mz-04 .z-row .z-t { font-size: 13px; font-weight: 600; }
.mz-04 .z-row .z-s { font-size: 11px; color: rgba(255,255,255,.55); }
.mz-04 .z-row .z-p { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-04 .z-row .z-p::before { content: ""; border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.mz-04 .z-ph-head { position: absolute; top: 34px; left: 16px; right: 16px; font-family: "Bodoni Moda", serif; font-style: italic; font-size: 22px; }
.mz-04 .z-ph-sub { position: absolute; top: 62px; left: 16px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); font-weight: 600; }
.mz-04 .z-genres { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mz-04 .z-genres span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12px; color: rgba(255,255,255,.8); }
.mz-04 .z-genres span.z-on { background: rgba(255,31,143,.16); color: #ff8cc4; }
.mz-04 .z-ph-sub { transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.mz-04 .z-ph-sub.z-out { opacity: 0; transform: translateY(4px); }
.mz-04 .z-qrimg { width: 84px; height: 84px; margin-top: 12px; display: block; border-radius: 4px; }
.mz-04 { display: flex; align-items: center; gap: clamp(20px, 40.32px, 40px); }
.mz-04 > .z-phone { position: relative; left: auto !important; top: auto !important; transform: none !important; width: auto !important; flex: 0 0 max(27%, 220px); }
.mz-04 .z-col { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(22px, 36px, 40px); }
.mz-04 .z-col > .z-win:nth-child(2) { min-width: min(340px, 100%); }
.mz-04 .z-ph-head { white-space: nowrap; font-size: 21px; }
.mz-04 .z-col > .z-win { position: relative; left: auto !important; top: auto !important; }
.mz-04 .z-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mz-04 .z-w-prog { padding: 40px 18px 18px; }
.mz-04 .z-w-prog .z-top { display: flex; align-items: baseline; justify-content: space-between; }
.mz-04 .z-w-prog .z-top b { font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400; font-size: 24px; }
.mz-04 .z-w-prog .z-clock { font-variant-numeric: tabular-nums; font-size: 13px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 7px; }
.mz-04 .z-w-prog .z-clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgba(255,31,143,.2); }
.mz-04 .z-slots { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.mz-04 .z-slot { position: relative; border-radius: 12px; padding: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: background .6s, box-shadow .6s; min-width: 0; }
.mz-04 .z-slot.z-on { background: rgba(255,31,143,.12); box-shadow: inset 0 0 0 1px rgba(255,31,143,.45); }
.mz-04 .z-slot .z-h { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
.mz-04 .z-slot .z-n { font-size: 13px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.mz-04 .z-slot img { width: 100%; height: 54px; object-fit: cover; border-radius: 8px; margin-top: 9px; display: block; opacity: .55; transition: opacity .6s; }
.mz-04 .z-slot.z-on img { opacity: 1; }
.mz-04 .z-slot .z-p { font-size: 12px; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.7); }
.mz-04 .z-slot.z-on .z-p { color: #fff; }
.mz-04 .z-track { position: relative; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); margin-top: 14px; }
.mz-04 .z-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--rose); }
.mz-04 .z-track s { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,31,143,.35); }
.mz-04 .z-hours { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.4); margin-top: 7px; font-variant-numeric: tabular-nums; }
.mz-04 .z-w-sites { padding: 40px 16px 14px; }
.mz-04 .z-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 10px; background: rgba(255,255,255,.06); position: relative; font-size: 12px; font-weight: 500; text-align: center; }
.mz-04 .z-seg span { position: relative; z-index: 1; padding: 6px 0; color: rgba(255,255,255,.6); transition: color .4s; }
.mz-04 .z-seg span.z-on { color: #fff; }
.mz-04 .z-seg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 8px; background: var(--rose); transition: transform .55s cubic-bezier(.22,1,.36,1); }
.mz-04 .z-site { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mz-04 .z-site:last-child { border-bottom: 0; }
.mz-04 .z-site img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.mz-04 .z-site .z-t { font-size: 13px; font-weight: 600; }
.mz-04 .z-site .z-s { font-size: 11px; color: rgba(255,255,255,.55); }
.mz-04 .z-site .z-eq { margin-left: auto; display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.mz-04 .z-site .z-eq b { width: 2px; border-radius: 1px; background: var(--rose); animation: z04-eq 1s ease-in-out infinite; }
.mz-04 .z-site .z-eq b:nth-child(2) { animation-delay: -.35s }
.mz-04 .z-site .z-eq b:nth-child(3) { animation-delay: -.7s }
@keyframes z04-eq { 0%,100% { height: 30% } 50% { height: 100% } }
.mz-04 .z-phones { position: relative; flex: 0 0 58%; height: 100%; }
.mz-04 .z-phones .z-phone { position: absolute; width: 49%; }
.mz-04 .z-phones .z-p1 { left: 0; top: 50%; transform: translateY(-58%) scale(.94); filter: brightness(.82); }
.mz-04 .z-phones .z-p2 { left: 37%; top: 50%; transform: translateY(-42%); z-index: 2; box-shadow: 0 40px 90px -20px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,255,255,.14); }
.mz-04 .z-ph4 .z-np { inset: 44px 16px 18px; }
.mz-04 .z-ph4 .z-np .z-lbl { align-self: stretch; text-align: center; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.mz-04 .z-ph4 .z-np img { box-shadow: 0 18px 40px -14px rgba(0,0,0,.8); }
.mz-04 .z-ph4 .z-np .z-t { align-self: flex-start; font-family: "General Sans", system-ui; font-style: normal; font-weight: 600; font-size: 17px; margin-top: 16px; transition: opacity .4s; }
.mz-04 .z-ph4 .z-np .z-a { align-self: flex-start; margin-top: 2px; }
.mz-04 .z-ph4 .z-np .z-pr i { animation: z04-pr 9s linear infinite; }
.mz-04 .z-ph4 .z-np .z-tm { align-self: stretch; display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.45); margin-top: 6px; font-variant-numeric: tabular-nums; }
.mz-04 .z-ph4 .z-np .z-ctl { margin-top: 12px; }
.mz-04 .z-ph4 .z-np .z-nx { align-self: stretch; display: flex; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: rgba(255,255,255,.5); }
.mz-04 .z-ph4 .z-np .z-nx span:last-child { color: #fff; font-weight: 500; }
.mz-04 .z-w-stores { width: fit-content; max-width: 100%; }
.mz-04 .z-w-stores .z-stores { margin-top: 0; flex-wrap: nowrap; }
.mz-04 .z-w-stores .z-sb { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 14px 30px -12px rgba(0,0,0,.8); }
.mz-04 .z-dispo { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.mz-04 .z-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.mz-04 .z-sb { display: inline-flex; align-items: center; gap: 7px; width: clamp(112px, 157.92px, 132px); height: 42px; padding: 0 10px; overflow: hidden; border-radius: 9px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.mz-04 .z-sb svg { width: 18px; height: 18px; flex: none; }
.mz-04 .z-sb > span { display: flex; flex-direction: column; font-size: clamp(12px, 16.46px, 14px); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.mz-04 .z-sb small { font-size: 8.5px; font-weight: 500; letter-spacing: .02em; opacity: .85; margin-bottom: 2px; }
.mz-04 .z-stores img { height: 30px; width: auto; display: block; border-radius: 6px; }
.mz-04 .z-stores .z-web { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 6px; border: 1px solid #8a8a8a; background: #000; font-size: 12px; font-weight: 500; }
.mz-04 .z-stores .z-web svg { width: 13px; height: 13px; }
.mz-04 .z-w-play { padding: 40px 16px 16px; }
.mz-04 .z-w-play .z-npl { display: flex; gap: 12px; align-items: center; }
.mz-04 .z-w-play .z-npl img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; }
.mz-04 .z-w-play .z-nt { font-size: 14px; font-weight: 600; }
.mz-04 .z-w-play .z-ns { font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.55); }
.mz-04 .z-w-play .z-eq2 { margin-left: auto; display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.mz-04 .z-w-play .z-eq2 b { width: 2px; border-radius: 1px; background: var(--rose); animation: z04-eq 1s ease-in-out infinite; }
.mz-04 .z-w-play .z-eq2 b:nth-child(2) { animation-delay: -.35s }
.mz-04 .z-w-play .z-eq2 b:nth-child(3) { animation-delay: -.7s }
.mz-04 .z-w-play .z-bar2 { height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); margin-top: 14px; overflow: hidden; }
.mz-04 .z-w-play .z-bar2 i { display: block; height: 100%; width: 0; background: var(--rose); animation: z04-prog 9s linear infinite; }
@keyframes z04-prog { to { width: 100%; } }
.mz-04 .z-w-play .z-facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.mz-04 .z-w-play .z-facts span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12px; color: rgba(255,255,255,.82); }

/* ---- chapitre 05 : terrain.html (porté tel quel) ---- */
.mz-05 { position: absolute; right: 67.2px; top: 50%; transform: translateY(-50%); width: 873.6px; height: 700px; }
.mz-05 .z-win { position: absolute; border-radius: 18px; overflow: hidden; background: var(--win);
         box-shadow: 0 24px 60px -24px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.08); }
.mz-05 .z-win .z-bar { position: absolute; top: 0; left: 0; right: 0; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px;
              background: rgba(255,255,255,.04); font-size: 11px; color: rgba(255,255,255,.6); z-index: 2; }
.mz-05 .z-win .z-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mz-05 .z-win .z-media { position: absolute; inset: 26px 0 0 0; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: left top; }
.mz-05 .z-pad { padding: 18px; }
.mz-05 .z-h4 { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6); }
.mz-05 .z-num { font-weight: 600; font-size: 38px; letter-spacing: -.02em; }
.mz-05 .z-sub { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 2px; }
.mz-05 .z-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 10px; border-radius: 999px;
          background: rgba(255,31,143,.14); color: #ff8cc4; font-size: 12px; font-weight: 500; }
.mz-05 .z-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.mz-05 .z-kind { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.mz-05 .z-phone { position: absolute; aspect-ratio: 9 / 19.5; border-radius: 30px; padding: 8px; background: #050406;
           box-shadow: 0 30px 70px -24px rgba(0,0,0,.85), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.mz-05 .z-phone .z-screen { position: relative; width: 100%; height: 100%; border-radius: 23px; overflow: hidden;
                   background: radial-gradient(120% 70% at 60% 35%, #2a0f1f 0%, #120a10 60%, #0b080c 100%); }
.mz-05 .z-phone .z-notch { position: absolute; top: 8px; left: 50%; width: 32%; height: 18px; transform: translateX(-50%); border-radius: 10px; background: #050406; z-index: 2; }
.mz-05 .z-phone canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mz-05 .z-phone .z-txt { position: absolute; left: 10%; right: 10%; bottom: 9%; }
.mz-05 .z-lieu { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 24px; line-height: 1.05; margin-top: 3px; transition: opacity .45s, transform .55s cubic-bezier(.22,1,.36,1); }
.mz-05 .z-lieu.z-out { opacity: 0; transform: translateY(5px); }
.mz-05 .z-rail { position: absolute; left: 0; right: 0; top: 46px; display: flex; gap: 16px; padding: 0 18px; animation: z05-rail 22s linear infinite; }
.mz-05 .z-pl { flex: 0 0 150px; }
.mz-05 .z-pl .z-c { position: relative; width: 150px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.mz-05 .z-pl .z-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-05 .z-pl .z-c b { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-05 .z-pl .z-c b::before { content: ""; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.mz-05 .z-pl .z-t { margin-top: 9px; font-size: 15px; font-weight: 600; }
.mz-05 .z-pl .z-s { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 1px; }
@keyframes z05-rail { to { transform: translateX(-50%); } }
.mz-05 .z-ticket { background: #f6f3ee; color: #19151a; }
.mz-05 .z-ticket .z-ti { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 24px; line-height: 1; }
.mz-05 .z-ticket .z-ts { font-size: 12px; color: #6b6168; margin-top: 4px; }
.mz-05 .z-qr { width: 64px; height: 64px; margin-top: 12px; background:
        conic-gradient(from 90deg at 3px 3px, #19151a 25%, transparent 0) 0 0/8px 8px; border-radius: 4px; opacity: .9; }
.mz-05 .z-np { position: absolute; inset: 40px 14px 18px; display: flex; flex-direction: column; align-items: center; }
.mz-05 .z-np img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.mz-05 .z-np .z-t { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 22px; margin-top: 14px; }
.mz-05 .z-np .z-a { font-size: 12px; color: rgba(255,255,255,.6); }
.mz-05 .z-np .z-pr { width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); margin-top: 16px; overflow: hidden; }
.mz-05 .z-np .z-pr i { display: block; height: 100%; width: 40%; background: var(--rose); animation: z05-pr 12s linear infinite; }
@keyframes z05-pr { from { width: 5% } to { width: 95% } }
.mz-05 .z-np .z-ctl { display: flex; gap: 22px; align-items: center; margin-top: 16px; }
.mz-05 .z-np .z-ctl b { width: 44px; height: 44px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-05 .z-np .z-ctl b::before { content: ""; width: 4px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: content-box; width: 4px; }
.mz-05 .z-np .z-ctl s { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.mz-05 .z-np .z-ctl s.z-p { border-right: 10px solid #fff; }
.mz-05 .z-np .z-ctl s.z-n { border-left: 10px solid #fff; }
.mz-05 .z-badges { display: flex; flex-direction: column; gap: 10px; }
.mz-05 .z-badges img, .mz-05 .z-badges .z-web { height: 34px; width: auto; display: block; }
.mz-05 .z-badges .z-web { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 7px; border: 1px solid #8a8a8a; background: #000; font-size: 13px; font-weight: 500; }
.mz-05 .z-logos { background: #0d0b0e; }
.mz-05 .z-logos .z-marq { position: absolute; inset: 0; display: flex; align-items: center; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mz-05 .z-logos .z-track { display: flex; align-items: center; gap: 90px; padding-left: 90px; animation: z05-marq 26s linear infinite; }
@keyframes z05-marq { to { transform: translateX(-50%); } }
.mz-05 .z-logos img { opacity: .92; height: 74px; width: auto; object-fit: contain; }
.mz-05 .z-stat .z-num { font-size: 30px; }
.mz-05 .z-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,31,143,.14); display: grid; place-items: center; color: #ff8cc4; font-size: 16px; }
.mz-05 .z-offer .z-n { color: var(--rose); font-weight: 600; font-size: 13px; }
.mz-05 .z-offer .z-tx { font-size: 18px; font-weight: 500; line-height: 1.3; margin-top: 6px; }
.mz-05 .z-duo { display: flex; align-items: center; justify-content: center; gap: 18px; }
.mz-05 .z-duo .z-m { font-family: "Bodoni Moda", serif; font-size: 54px; }
.mz-05 .z-duo .z-m em { color: #ff6fb0; font-style: italic; }
.mz-05 .z-duo .z-x { font-size: 22px; color: rgba(255,255,255,.5); }
.mz-05 .z-duo .z-pl2 { background: #f6f3ee; border-radius: 12px; padding: 10px 14px; }
.mz-05 .z-duo .z-pl2 img { height: 66px; display: block; }
.mz-05 .z-w-gen { padding: 40px 0 16px; }
.mz-05 .z-marq2 { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mz-05 .z-trk { display: flex; width: max-content; animation: z05-rail 34s linear infinite; }
.mz-05 .z-grp { display: flex; gap: 12px; padding-right: 12px; }
.mz-05 .z-gn { position: relative; flex: 0 0 148px; height: 172px; border-radius: 14px; overflow: hidden; background: #1b1620; isolation: isolate;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.mz-05 .z-gn { background: radial-gradient(140% 100% at 0% 0%, var(--t) 0%, color-mix(in srgb, var(--t) 35%, #120e16) 55%, #120e16 100%); }
.mz-05 .z-gn svg { position: absolute; left: 50%; top: 37%; width: 46px; transform: translate(-50%,-50%); opacity: .9; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.mz-05 .z-gn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,8,12,0) 45%, rgba(10,8,12,.55) 100%); }
.mz-05 .z-gn .z-gk { position: absolute; left: 12px; top: 11px; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mz-05 .z-gn .z-gt { position: absolute; left: 12px; right: 10px; bottom: 30px; font-family: "Bodoni Moda", serif; font-style: italic; font-size: 23px; line-height: 1; }
.mz-05 .z-gn .z-gc { position: absolute; left: 12px; bottom: 13px; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.mz-05 .z-gn .z-eq { position: absolute; right: 11px; top: 10px; display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.mz-05 .z-gn .z-eq b { width: 2px; border-radius: 1px; background: var(--rose); animation: z05-eq 1s ease-in-out infinite; }
.mz-05 .z-gn .z-eq b:nth-child(2) { animation-delay: -.35s }
.mz-05 .z-gn .z-eq b:nth-child(3) { animation-delay: -.7s }
@keyframes z05-eq { 0%,100% { height: 30% } 50% { height: 100% } }
.mz-05 .z-cert { background: linear-gradient(160deg, #e9e3da, #d9d1c6); color: #19151a; padding: 15px 16px 14px; }
.mz-05 .z-cert::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(25,21,26,.12); border-radius: 13px; pointer-events: none; }
.mz-05 .z-cert .z-hd { display: flex; align-items: center; justify-content: space-between; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.mz-05 .z-cert .z-hd span { display: flex; align-items: center; gap: 7px; }
.mz-05 .z-cert .z-hd img { width: 16px; height: 16px; }
.mz-05 .z-cert .z-hd em { font-style: normal; color: #8a7f86; letter-spacing: .08em; font-weight: 500; }
.mz-05 .z-cert .z-body { display: flex; gap: 14px; margin-top: 9px; align-items: flex-end; }
.mz-05 .z-cert .z-ct { font-family: "Bodoni Moda", serif; font-style: italic; font-size: 21px; line-height: 1; }
.mz-05 .z-cert dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(25,21,26,.14); font-size: 11px; }
.mz-05 .z-cert dt { color: #8a7f86; }
.mz-05 .z-cert dd { margin: 0; font-weight: 500; }
.mz-05 .z-cert .z-qrw { margin-left: auto; text-align: center; flex: none; }
.mz-05 .z-cert .z-qrw img { width: 62px; height: 62px; mix-blend-mode: multiply; display: block; }
.mz-05 .z-cert .z-qrw small { display: block; margin-top: 5px; font-size: 9.5px; color: #8a7f86; letter-spacing: .04em; }
.mz-05 .z-cert .z-seal { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10px !important; padding: 5px 10px 5px 6px; border-radius: 999px; background: rgba(255,31,143,.1); color: #c2186f; font-size: 11px; font-weight: 600; }
.mz-05 .z-cert .z-seal::before { content: "✓"; width: 16px; height: 16px; border-radius: 50%; background: var(--rose); color: #fff; font-size: 10px; display: grid; place-items: center; }
.mz-05 .z-list { position: absolute; inset: 52px 12px 12px; overflow: hidden; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
.mz-05 .z-list .z-in { animation: z05-up 18s linear infinite; }
@keyframes z05-up { to { transform: translateY(-50%); } }
.mz-05 .z-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mz-05 .z-row img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.mz-05 .z-row .z-t { font-size: 13px; font-weight: 600; }
.mz-05 .z-row .z-s { font-size: 11px; color: rgba(255,255,255,.55); }
.mz-05 .z-row .z-p { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; }
.mz-05 .z-row .z-p::before { content: ""; border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.mz-05 .z-ph-head { position: absolute; top: 34px; left: 16px; right: 16px; font-family: "Bodoni Moda", serif; font-style: italic; font-size: 22px; }
.mz-05 .z-ph-sub { position: absolute; top: 62px; left: 16px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); font-weight: 600; }
.mz-05 .z-genres { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mz-05 .z-genres span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12px; color: rgba(255,255,255,.8); }
.mz-05 .z-genres span.z-on { background: rgba(255,31,143,.16); color: #ff8cc4; }
.mz-05 .z-ph-sub { transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.mz-05 .z-ph-sub.z-out { opacity: 0; transform: translateY(4px); }
.mz-05 .z-qrimg { width: 84px; height: 84px; margin-top: 12px; display: block; border-radius: 4px; }
.mz-05 { display: flex; align-items: center; gap: clamp(20px, 40.32px, 40px); }
.mz-05 > .z-phone { position: relative; left: auto !important; top: auto !important; transform: none !important; width: auto !important; flex: 0 0 max(27%, 220px); }
.mz-05 .z-col { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(22px, 36px, 40px); }
.mz-05 .z-col > .z-win:nth-child(2) { min-width: min(340px, 100%); }
.mz-05 .z-ph-head { white-space: nowrap; font-size: 21px; }
.mz-05 .z-col > .z-win { position: relative; left: auto !important; top: auto !important; }
.mz-05 .z-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mz-05 .z-w-prog { padding: 40px 18px 18px; }
.mz-05 .z-w-prog .z-top { display: flex; align-items: baseline; justify-content: space-between; }
.mz-05 .z-w-prog .z-top b { font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400; font-size: 24px; }
.mz-05 .z-w-prog .z-clock { font-variant-numeric: tabular-nums; font-size: 13px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 7px; }
.mz-05 .z-w-prog .z-clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgba(255,31,143,.2); }
.mz-05 .z-slots { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.mz-05 .z-slot { position: relative; border-radius: 12px; padding: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: background .6s, box-shadow .6s; min-width: 0; }
.mz-05 .z-slot.z-on { background: rgba(255,31,143,.12); box-shadow: inset 0 0 0 1px rgba(255,31,143,.45); }
.mz-05 .z-slot .z-h { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
.mz-05 .z-slot .z-n { font-size: 13px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.mz-05 .z-slot img { width: 100%; height: 54px; object-fit: cover; border-radius: 8px; margin-top: 9px; display: block; opacity: .55; transition: opacity .6s; }
.mz-05 .z-slot.z-on img { opacity: 1; }
.mz-05 .z-slot .z-p { font-size: 12px; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.7); }
.mz-05 .z-slot.z-on .z-p { color: #fff; }
.mz-05 .z-track { position: relative; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); margin-top: 14px; }
.mz-05 .z-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--rose); }
.mz-05 .z-track s { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,31,143,.35); }
.mz-05 .z-hours { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.4); margin-top: 7px; font-variant-numeric: tabular-nums; }
.mz-05 .z-w-sites { padding: 40px 16px 14px; }
.mz-05 .z-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 10px; background: rgba(255,255,255,.06); position: relative; font-size: 12px; font-weight: 500; text-align: center; }
.mz-05 .z-seg span { position: relative; z-index: 1; padding: 6px 0; color: rgba(255,255,255,.6); transition: color .4s; }
.mz-05 .z-seg span.z-on { color: #fff; }
.mz-05 .z-seg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 8px; background: var(--rose); transition: transform .55s cubic-bezier(.22,1,.36,1); }
.mz-05 .z-site { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mz-05 .z-site:last-child { border-bottom: 0; }
.mz-05 .z-site img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.mz-05 .z-site .z-t { font-size: 13px; font-weight: 600; }
.mz-05 .z-site .z-s { font-size: 11px; color: rgba(255,255,255,.55); }
.mz-05 .z-site .z-eq { margin-left: auto; display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.mz-05 .z-site .z-eq b { width: 2px; border-radius: 1px; background: var(--rose); animation: z05-eq 1s ease-in-out infinite; }
.mz-05 .z-site .z-eq b:nth-child(2) { animation-delay: -.35s }
.mz-05 .z-site .z-eq b:nth-child(3) { animation-delay: -.7s }
@keyframes z05-eq { 0%,100% { height: 30% } 50% { height: 100% } }
.mz-05 { flex-direction: column; align-items: stretch; justify-content: center; }
.mz-05 .z-venues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, clamp(480px, 604.8px, 620px)); align-self: center; }
.mz-05 .z-vn { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #000;
        box-shadow: 0 24px 50px -24px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); }
.mz-05 .z-tl { position: absolute; perspective: 500px; }
.mz-05 .z-tl .z-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.65,0,.35,1); }
.mz-05 .z-vn.z-flip .z-tl .z-in { transform: rotateY(180deg); }
.mz-05 .z-tl .z-f, .mz-05 .z-tl .z-b { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mz-05 .z-tl .z-b { transform: rotateY(180deg); }
.mz-05 .z-tl .z-f img { position: absolute; object-fit: cover; filter: brightness(.8); }
.mz-05 .z-tl .z-b .z-lgp { position: absolute; display: grid; grid-template-columns: repeat(2, 34%); grid-auto-rows: 17%; justify-content: center; align-content: center; gap: 9% 8%; padding-bottom: 16%; background: radial-gradient(120% 80% at 50% 40%, #1d1520 0%, #000 70%); }
.mz-05 .z-tl .z-b .z-lgp img { width: 100%; height: 100%; object-fit: contain; transform: scale(var(--h)); }
.mz-05 .z-vn::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(10,8,12,0) 55%, rgba(10,8,12,.85) 100%); }
.mz-05 .z-vn .z-k { position: absolute; left: 14px; right: 12px; bottom: 14px; z-index: 3; font-family: "Bodoni Moda", serif; font-style: italic; font-size: clamp(15px, 19.32px, 19px); line-height: 1.05; }