/* ==========================================================================
   PEE.CHAT : Unlock (agent unlock, 11/10/2026) — packs, apercus, animation,
   reglage du masque en grand, prix en 3 pieces, bulle MP alignee.
   Charge apres feed-v2.css et rectif.css : ne touche qu'aux classes pd-*.
   ========================================================================== */

/* ---- carrousel (un fichier = une diapo ; pack = plusieurs) ---- */
.pd-m .pd-trk { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; z-index: 0; }
.pd-m .pd-trk::-webkit-scrollbar { display: none; }
.pd-m .pd-sl { position: relative; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; background: #111; }
html .pd-m .pd-sl > img, html .pd-m .pd-sl > video {
    position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
    min-height: 0 !important; margin: 0 !important; border-radius: 0 !important; object-fit: cover !important; object-position: center 40%; display: block; background: #111 !important;
    -webkit-user-drag: none; user-select: none;
}
html .pd-m .pd-sl > video { object-fit: contain !important; background: #000 !important; }
.pd-m .pd-sl > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-nopv { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 35%, rgba(255, 107, 53, .2), transparent 70%), #151515; }
.pd-m { background: #111; container-type: inline-size; }

/* points (centres) */
.pd-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 99px; background: rgba(10, 10, 10, .34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.pd-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .5); transition: width .25s ease, background .25s ease; }
.pd-dots i.on { width: 16px; background: linear-gradient(90deg, #FF6B35, #F7C948); box-shadow: 0 0 8px rgba(255, 107, 53, .6); }
/* fleches (ordinateur seulement), paire symetrique au milieu des bords */
.pd-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 32px; height: 32px; border-radius: 50%; padding: 0; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 10, 10, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; }
.pd-nav.p { left: 8px; } .pd-nav.n { right: 8px; }
@media (hover: hover) and (pointer: fine) { .pd-pk:not(.pd-lk):hover .pd-nav { display: flex; } }
.pd-first .pd-nav.p, .pd-last .pd-nav.n { opacity: .3; pointer-events: none; }

/* ---- badge cadenas / oeil : le meme que le badge Unlock du menu ---- */
.pd-bdg { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #0A0A0A; border: 1px solid rgba(255, 107, 53, .28); box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }
.pd-bdg svg { width: 26px; height: 26px; overflow: visible; }
.pd-bdg .pd-shk { transform-box: fill-box; transform-origin: 85% 100%; }
.pd-lkc .pd-bdg .pd-shk { animation: pdShk 3.2s ease-in-out infinite; }
@keyframes pdShk { 0%, 78%, 100% { transform: none; } 86% { transform: translateY(-1.6px); } 92% { transform: translateY(.4px); } }

/* ---- apercu verrouille (acheteur) : une colonne centree en verre ---- */
html .pd-m .pd-ub.pd-lkc {
    position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
    width: calc(100% - 24px); max-width: 340px; box-sizing: border-box; z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 14px 14px 12px; border-radius: 18px;
    background: rgba(10, 10, 10, .36); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
html .pd-lkc .pd-ulbl { padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; font: 800 .58rem/1.3 Orbitron, sans-serif; letter-spacing: .16em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); white-space: nowrap; }
.pd-lkc .pd-chips { display: grid; gap: 6px; width: 100%; margin: 0; }
.pd-chips.pd-c1 { grid-template-columns: minmax(0, auto); justify-content: center; }
.pd-chips.pd-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-chips.pd-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html .pd-m .pd-ub.pd-lkc:has(.pd-c1), html .pd-m .pd-ub.pd-lkc.pd-cvc { width: max-content; max-width: calc(100% - 24px); }
/* 3 pieces : deux touches egales puis la troisieme centree dessous ; une rangee de 3 si la place le permet, l'une sous l'autre si c'est tres etroit */
.pd-lkc .pd-chips.pd-c3 { display: flex; flex-wrap: wrap; justify-content: center; }
.pd-lkc .pd-chips.pd-c3 > .pd-coin { flex: 0 0 calc(50% - 3px); box-sizing: border-box; }
@container (min-width: 460px) { .pd-lkc .pd-chips.pd-c3 > .pd-coin { flex-basis: calc(33.333% - 4px); } }
@container (max-width: 236px) { .pd-lkc .pd-chips.pd-c3 > .pd-coin, .pd-lkc .pd-chips.pd-c2 > .pd-coin { flex-basis: 100%; } .pd-lkc .pd-chips.pd-c2 { grid-template-columns: minmax(0, 1fr); } }
.pd-lkc .pd-coin { justify-content: center; padding: 8px 10px; min-width: 0; overflow: hidden; }
.pd-lkc .pd-coin .pd-amt b { overflow: hidden; text-overflow: ellipsis; }
.pd-lkc .pd-coin .pd-amt { min-width: 0; }
.pd-soc { display: inline-flex; align-items: center; gap: 4px; font: 600 .66rem/1 Inter, sans-serif; color: rgba(255, 255, 255, .72); }
.pd-soc svg { width: 11px; height: 11px; }
.pd-cvc .pd-btn { padding: 8px 16px; }
.pd-demo { pointer-events: none; }
.pd-lkc.pd-demo::before { content: 'WHAT BUYERS SEE'; font: 800 .48rem/1 Orbitron, sans-serif; letter-spacing: .18em; color: #F7C948; }
.pd-lk .pd-dots { bottom: 9px; }

/* bulles MP et rooms (etroites) : 3 pieces = 3 touches de meme largeur l'une sous l'autre */
.pd-f .pd-chips.pd-c3 { grid-template-columns: minmax(0, 1fr); }
.paid-bubble .pd-lkc, .pd-room .pd-lkc { gap: 7px; padding: 12px 12px 10px; }
.pd-f .pd-chips { display: grid; gap: 6px; }

/* ---- createur : puce prix + oeil, centree en haut ---- */
.pd-krow { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; justify-content: center; gap: 6px; max-width: calc(100% - 16px); }
html .pd-krow .pd-k { position: static !important; transform: none !important; left: auto !important; top: auto !important; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; min-width: 0; overflow: hidden; white-space: nowrap; background: rgba(10, 10, 10, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .14); }
.pd-kp { display: inline-flex; align-items: center; gap: 3px; font: 800 .56rem Orbitron, sans-serif; letter-spacing: .04em; }
.pd-kp b { font-weight: 800; }
.pd-kp + .pd-kp::before { content: '·'; opacity: .55; margin: 0 3px 0 1px; }
html .pd-kp .pd-cl { width: 12px !important; height: 12px !important; }
html .pd-kp .btc-cyber.pd-cl { font-size: 12px !important; }
.pd-eye { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; padding: 0; border: 1px solid rgba(255, 255, 255, .24); background: rgba(10, 10, 10, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease; }
.pd-eye svg { width: 15px; height: 15px; }
.pd-eye.on { background: linear-gradient(135deg, #FF6B35, #F7C948); color: #0A0A0A; border-color: transparent; box-shadow: 0 4px 14px rgba(255, 107, 53, .45); }
.pd-eye:active { transform: scale(.92); }
.pd-own .pd-trk { transition: opacity .25s ease; }

/* ---- bulle MP : la bulle prend la largeur du media (plus de decalage), lignes centrees ---- */
html .message-bubble.paid-bubble { width: -webkit-fit-content !important; width: fit-content !important; max-width: 100%; }
html .message-content.dm-media-content:has(.paid-bubble) { max-width: none !important; }
.paid-bubble > .pd-slot { width: 250px; max-width: 66vw; }
html .paid-bubble .pd-m { width: 100% !important; max-width: none !important; }
html .paid-bubble .pd-f { width: 100%; max-width: none; box-sizing: border-box; }
html .paid-bubble .pd-gone, html .paid-bubble .pd-guest { width: 100%; box-sizing: border-box; min-width: 0; justify-content: center; }
.paid-bubble .pd-slot > .pd-st { justify-content: center; text-align: center; padding: .45rem .35rem .1rem; line-height: 1.35; }
.paid-bubble .pd-slot > .pd-pill { max-width: 100%; box-sizing: border-box; flex-wrap: wrap; white-space: normal; row-gap: 2px; border-radius: 14px; text-align: center; }
html .paid-bubble .pd-pill .pd-pw b { max-width: 150px; }
.paid-bubble .pd-cap { text-align: center; }
@media (max-width: 767px) { .paid-bubble > .pd-slot { width: 210px; max-width: 64vw; } }
.pd-room .pd-m { width: 190px; }

/* ---- animation au deblocage : le flou se dissout en douceur sur l'original ---- */
html .pd-m .pd-sl > img.pd-from { z-index: 1; pointer-events: none; }
.pd-rv .pd-sl > img:not(.pd-from), .pd-rv .pd-sl > video { filter: blur(18px) saturate(1.3); transform: scale(1.06); }
.pd-rv.go .pd-sl > img:not(.pd-from), .pd-rv.go .pd-sl > video { animation: pdSharp 1.3s .2s cubic-bezier(.2, .75, .25, 1) both; }
.pd-rv.go .pd-sl > img.pd-from { animation: pdMelt 1.1s .1s ease-out both; }
.pd-rv::after { content: ''; position: absolute; inset: -25%; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(247, 201, 72, .55), rgba(255, 107, 53, .22) 45%, transparent 72%); }
.pd-rv.go::after { animation: pdGlow 1.3s ease-out both; }
.pd-fly { position: absolute !important; left: 50%; top: 50%; z-index: 7; transform: translate(-50%, -50%); pointer-events: none; }
.pd-rv.go .pd-fly { animation: pdFly 1.05s .1s ease-in both; }
.pd-rv.go .pd-fly .pd-shk { animation: pdOpen .4s ease-out both; }
html .pd-m .pd-ok { left: 50% !important; right: auto !important; top: 10px; transform: translateX(-50%); z-index: 7; padding: 5px 11px; font-size: .52rem; box-shadow: 0 6px 18px rgba(0, 200, 81, .35); }
.pd-rv .pd-ok { opacity: 0; }
.pd-rv.go .pd-ok { animation: pdOkIn .45s .85s both, pdOkOut .6s 3.8s forwards; }
@keyframes pdSharp { from { filter: blur(18px) saturate(1.3) brightness(1.12); transform: scale(1.06); } to { filter: blur(0) saturate(1) brightness(1); transform: none; } }
@keyframes pdMelt { from { opacity: 1; filter: blur(0); transform: scale(1); } to { opacity: 0; filter: blur(16px); transform: scale(1.05); } }
@keyframes pdGlow { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes pdFly { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); } 100% { opacity: 0; transform: translate(-50%, -62%) scale(1.7); } }
@keyframes pdOpen { from { transform: none; } to { transform: translateY(-3px) rotate(-16deg); } }
@keyframes pdOkIn { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.9); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes pdOkOut { to { opacity: 0; transform: translateX(-50%) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
    .pd-rv *, .pd-rv::after, .pd-lkc .pd-bdg .pd-shk { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ---- feed (tuile Unlock du nouveau feed), grilles, visionneuse ---- */
html .f2-pdt .pd-m .pd-ub.pd-lkc, html .pv-paid .pd-m .pd-ub.pd-lkc {
    top: 46% !important; left: 50% !important; bottom: auto !important; right: auto !important; transform: translate(-50%, -50%) !important;
    padding: 16px 18px 13px !important; gap: 9px; background: rgba(10, 10, 10, .34) !important; max-width: calc(100% - 28px);
}
html .f2-pdt .pd-lkc .pd-ulbl, html .pv-paid .pd-lkc .pd-ulbl { padding: 0 !important; background: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-size: .6rem; }
.f2-pdt .pd-bdg, .pv-paid .pd-bdg { width: 52px; height: 52px; flex-basis: 52px; border-radius: 16px; }
.f2-pdt .pd-bdg svg, .pv-paid .pd-bdg svg { width: 29px; height: 29px; }
.f2-pdt .pd-dots { bottom: auto; top: 42px; }
.pv-paid .pd-dots { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 96px); }
.f2-pdt .pd-krow { top: 42px; }
.pv-paid .pd-krow { top: calc(max(10px, env(safe-area-inset-top)) + 56px); }
.f2-pdt .pd-pk .pd-krow ~ .pd-dots, .f2-pdt .pd-own.pd-pk .pd-dots { top: 80px; }
html .f2-pdt .pd-m .pd-ok { top: 42px !important; }
.f2-pdt .pd-slot > .pd-pill, .f2-pdt .pd-slot > .pd-st { top: 80px; }
.f2-pdt .pd-own.pd-pk ~ .pd-pill, .f2-pdt .pd-own.pd-pk ~ .pd-st { top: 108px; }
/* grilles (feed en grille, profils) : petit badge, pas de texte */
.f2-grid .pd-lkc .pd-soc, .f2-pgrid .pd-lkc .pd-soc, .f2-grid .pd-lkc .pd-chips, .f2-pgrid .pd-lkc .pd-chips, .f2-grid .pd-dots, .f2-pgrid .pd-dots, .f2-grid .pd-krow, .f2-pgrid .pd-krow { display: none !important; }
html .f2-grid .f2-pdt .pd-m .pd-ub.pd-lkc, html .f2-pgrid .f2-pdt .pd-m .pd-ub.pd-lkc { padding: 9px !important; background: none !important; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: translate(-50%, -50%) !important; }
.pd-gn { display: inline-flex; align-items: center; gap: 3px; }
.pd-gn svg { width: 11px; height: 11px; }

/* ---- feuille Unlock (acheteur) : choix de la piece, cases egales ---- */
.pd-paywith { display: block; text-align: center; margin: 0 0 6px; }
.pd-sheet .pd-coins { width: 100%; gap: 6px; }
.pd-sheet .pd-coins.pd-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.pd-sheet .pd-coins .pd-sg { justify-content: center; }

/* ---- composeur ---- */
.pd-sheet.pd-comp > * + * { margin-top: 7px; }
.pd-drop { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 14px 16px; border-radius: 16px; text-align: center; cursor: pointer;
    border: 1px dashed rgba(255, 107, 53, .45); background: radial-gradient(100% 120% at 50% 0%, rgba(255, 107, 53, .1), transparent 70%), rgba(255, 255, 255, .02); }
.pd-drop b { font: 800 .95rem Rajdhani, sans-serif; color: #fff; }
.pd-drop small { font-size: .7rem; color: rgba(255, 255, 255, .55); max-width: 290px; }
.pd-drop .pd-btn { margin-top: 3px; padding: 8px 18px; }
.pd-vsw { width: 100%; max-width: 300px; margin-left: auto !important; margin-right: auto !important; }
.pd-vsw .pd-sg { padding: 5px 8px; font-size: .72rem; }
.pd-vsw .pd-sg svg { width: 12px; height: 12px; }
.pd-pvw { position: relative; display: flex; justify-content: center; cursor: zoom-in; border-radius: 12px; outline: none; }
.pd-pvw:focus-visible { box-shadow: 0 0 0 2px #FF6B35; }
.pd-pvw .pd-edit { pointer-events: none; }
.pd-zh { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 99px; white-space: nowrap;
    background: rgba(10, 10, 10, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .18); font: 700 .7rem Rajdhani, sans-serif; letter-spacing: .04em; color: #fff; pointer-events: none; }
.pd-busy { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; width: 100%; border-radius: 12px; overflow: hidden; background: #111; color: rgba(255, 255, 255, .7); font-size: .72rem; }
.pd-busy img, .pd-busy canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(10px) brightness(.6); }
.pd-busy span { position: relative; padding: 6px 12px; border-radius: 99px; background: rgba(10, 10, 10, .5); }
.pd-bvw { display: flex; justify-content: center; }
html .pd-bvw .pd-m { width: 200px !important; max-width: 100%; border-radius: 14px; }
@media (max-height: 720px) { html .pd-bvw .pd-m { width: 168px !important; } }
.pd-demo-m .pd-ub { pointer-events: none; }
.pd-strip { display: flex; gap: 7px; justify-content: safe center; overflow-x: auto; padding: 6px 4px 2px; scrollbar-width: none; }
.pd-strip::-webkit-scrollbar { display: none; }
.pd-th { position: relative; flex: 0 0 50px; width: 50px; height: 50px; }
.pd-thb { position: relative; width: 100%; height: 100%; padding: 0; border-radius: 11px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .08); background: #151515; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pd-thb img, .pd-thb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thb .pd-fi { width: 100%; height: 100%; padding: 0; align-items: center; border-radius: 0; }
.pd-th.on .pd-thb { border-color: #FF6B35; box-shadow: 0 0 0 3px rgba(255, 107, 53, .22); }
.pd-thv { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: rgba(10, 10, 10, .65); color: #fff; display: flex; align-items: center; justify-content: center; }
.pd-thv svg { width: 8px; height: 8px; }
.pd-thw { position: absolute; inset: 0; background: rgba(10, 10, 10, .45); }
.pd-thw::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid rgba(255, 107, 53, .3); border-top-color: #FF6B35; animation: pdSpin .8s linear infinite; }
@keyframes pdSpin { to { transform: rotate(360deg); } }
.pd-thx { position: absolute; top: -6px; right: -6px; width: 19px; height: 19px; border-radius: 50%; padding: 0; border: 1px solid rgba(255, 255, 255, .25); background: #0A0A0A; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.pd-thx svg { width: 9px; height: 9px; }
.pd-tha { display: flex; align-items: center; justify-content: center; border-radius: 11px; border: 1px dashed rgba(255, 107, 53, .55); color: #FF8C5A; cursor: pointer; background: rgba(255, 107, 53, .05); box-sizing: border-box; }
.pd-pinfo { display: block; text-align: center; font: 800 .52rem/1.3 Orbitron, sans-serif; letter-spacing: .12em; color: #F7C948; margin-top: 4px !important; }
.pd-pricer { align-items: center; }
.pd-pricer > .pd-l { display: block; text-align: center; }
.pd-pricer .pd-coins { width: 100%; }
.pd-pgrid { display: grid; gap: 8px; width: 100%; justify-content: center; }
.pd-pgrid.pd-n1 { grid-template-columns: minmax(0, 180px); }
.pd-pgrid.pd-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-pgrid.pd-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-pc { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 6px 7px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.pd-pch { display: inline-flex; align-items: center; gap: 4px; font: 800 .58rem Orbitron, sans-serif; letter-spacing: .08em; color: rgba(255, 255, 255, .85); }
html .pd-pc .pd-in.p { width: 100%; box-sizing: border-box; text-align: center; padding: 7px 6px; }
.pd-pc small { font-size: .64rem; color: rgba(255, 255, 255, .6); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pd-pc small b { color: #00C851; }
.pd-pricer > .pd-note { margin-top: 0 !important; }

/* ---- reglage en grand du masque ---- */
.pd-zoom { position: fixed; inset: 0; z-index: 30010; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pdF .18s ease; }
.pd-zin { position: relative; width: 100%; max-width: 760px; max-height: 100%; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 16px 16px; border-radius: 22px; color: #fff; font-family: Inter, sans-serif;
    background: radial-gradient(120% 60% at 50% 0%, rgba(255, 107, 53, .13), transparent 55%), linear-gradient(160deg, #1c1c1c, #101010); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px rgba(0, 0, 0, .7); animation: pdU .22s ease; }
.pd-zh2 { position: relative; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 44px; min-height: 34px; justify-content: center; }
.pd-zh2 b { font: 900 1rem Inter, sans-serif; background: linear-gradient(90deg, #FF6B35, #FF9A3D 45%, #F7C948); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pd-zh2 .pd-x { position: absolute; right: 0; top: 0; }
.pd-zstage { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.pd-zed { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.pd-zed .pm-ed { gap: 10px; }
.pd-zed .pm-edsz { max-width: 340px; }
.pd-znav { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; padding: 0; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(145deg, #252525, #141414); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pd-znav[disabled] { opacity: .3; cursor: default; }
.pd-zin .pd-four { width: 100%; max-width: 520px; }
.pd-zin .pd-note { margin: 0 !important; }
.pd-zact { display: flex; justify-content: center; gap: 8px; width: 100%; max-width: 420px; margin-top: 2px; }
.pd-zact.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-zact .pd-btn { justify-content: center; padding: 11px 16px; min-width: 150px; }
.pd-zact.two .pd-btn { min-width: 0; }
@media (max-width: 640px) {
    .pd-zoom { padding: 0; align-items: stretch; }
    .pd-zin { max-width: none; min-height: 100%; border-radius: 0; justify-content: center; padding: calc(12px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)); }
    .pd-znav { flex-basis: 30px; width: 30px; height: 30px; }
    .pd-zstage { gap: 6px; }
}

/* Composeur : Unlock / Click to view / Privacy sur une seule rangee, icone au-dessus (retour du 11/10) */
.pd-seg.pd-acc { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pd-seg.pd-acc2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-seg.pd-acc .pd-sg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 9px 4px; min-width: 0; white-space: nowrap; line-height: 1.1; }
.pd-seg.pd-acc .pd-sg > span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.pd-seg.pd-acc .pd-sg b { font-size: .8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pd-seg.pd-acc .pd-sg small { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.pd-seg.pd-acc .pd-sg svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ==========================================================================
   UNLOCK2 (11/10 soir) : fenetre d'achat au-dessus de la visionneuse, masque qui suit
   l'image partout (image entiere sur fond flou), statuts des MP, plus de filigrane
   ========================================================================== */
/* 1. feuilles Unlock et reglage du masque au-dessus de tout (la visionneuse est a 59000 / 100002) */
.pd-back { z-index: 2147483000 !important; }
.pd-zoom { z-index: 2147483100 !important; }
/* la visionneuse retire les fonds en degrade des boutons (.pv button) : les touches de prix gardent le leur */
html .pv .pd-btn { background-image: linear-gradient(135deg, #FF6B35, #F7C948) !important; color: #0A0A0A !important; }
html .pv .pd-btn.gh { background-image: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)) !important; color: #fff !important; }
html .pv .pd-btn .pd-amt b, html .pv .pd-btn .pd-amt small { color: inherit; }
/* 2. le masque est dans l'image : partout ou le cadre n'a pas la forme de l'image (visionneuse plein ecran, carte du feed
   pour une image pas en 4:5), on montre l'image entiere (contain) sur un fond flou d'elle-meme ; ailleurs (MP, rooms,
   feed en 4:5) le cadre a deja la forme de l'image. Le pentagone garde ainsi la meme taille et la meme place partout. */
html .pv-paid .pd-m .pd-sl > img, html .pv-paid .pd-m .pd-sl > canvas, html .pd-m.pd-fitc .pd-sl > img { object-fit: contain !important; object-position: center !important; background: transparent !important; }
.pv-paid .pd-m .pd-sl[style*="--pdbg"]::before, .pd-m.pd-fitc .pd-sl[style*="--pdbg"]::before { content: ''; position: absolute; inset: -30px; background: var(--pdbg) center / cover no-repeat; filter: blur(22px) brightness(.55) saturate(1.2); pointer-events: none; }
.pv-paid .pd-m .pd-sl > img, .pd-m.pd-fitc .pd-sl > img { z-index: 1; }
html .pv-paid .pd-m .pd-sl > img.pd-from, html .pd-m.pd-fitc .pd-sl > img.pd-from { z-index: 2; }
/* medias Unlock / Privacy ouverts dans la visionneuse depuis un MP : image entiere aussi */
html .pv .pv-img[src*="/api/paid/preview/"], html .pv .pv-img[src*="/pm/"] { object-fit: contain !important; object-position: center !important; }
/* 4. statut « Unlocked » de l'acheteur : dans les messages (pas sur la carte du feed ni dans la visionneuse) */
.f2-pdt .pd-slot > .pd-stb, .pv-paid .pd-slot > .pd-stb { display: none !important; }
.paid-bubble .pd-slot > .pd-st.ok, .pd-room .pd-slot > .pd-st.ok { color: #00C851; font-weight: 700; }
/* filigrane retire partout (aussi sur une bulle deja dessinee) */
.pd-wm { display: none !important; }
/* lignes d'etat sous le media des MP : une ligne de texte centree, l'icone dans la ligne */
html .paid-bubble .pd-slot > .pd-st, html .pd-room .pd-slot > .pd-st { display: block; text-align: center; }
.paid-bubble .pd-slot > .pd-st svg, .pd-room .pd-slot > .pd-st svg { display: inline-block; vertical-align: -2px; margin-right: 4px; width: 12px; height: 12px; }
/* barre du bas des cartes Unlock = celle des posts du feed ; le nombre de deblocages en tete, meme style que les boutons */
.post-actions-bar .pd-ab { display: flex; flex: 1; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .8rem; color: var(--text-muted, rgba(255, 255, 255, .5)); font-size: .85rem; font-family: var(--font-body, Inter, sans-serif); }
.post-actions-bar .pd-ab svg { width: 18px; height: 18px; }

/* ==========================================================================
   UNLOCK3 (11/10 nuit) : rooms (image qui remplit la carte, plus de puce qui saute)
   ========================================================================== */
/* le style general du chat de room (#roomChatMessages img : 160 x 120 force) rapetissait l'image dans la carte Unlock */
html #roomChatMessages .pd-m .pd-sl > img, html #roomChatMessages .pd-m .pd-sl > video, html #roomChatMessages .pd-m .pd-sl > canvas,
html .room-chat-messages .pd-m .pd-sl > img, html .room-chat-messages .pd-m .pd-sl > video, html .room-message .pd-m .pd-sl > img, html .room-message .pd-m .pd-sl > video {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
    min-height: 0 !important; margin: 0 !important; border-radius: 0 !important; object-fit: cover !important; object-position: center 40% !important; display: block !important;
}
html #roomChatMessages .pd-m .pd-sl > video, html .room-message .pd-m .pd-sl > video { object-fit: contain !important; }
html #roomChatMessages .pd-m.pd-fitc .pd-sl > img, html .room-message .pd-m.pd-fitc .pd-sl > img { object-fit: contain !important; object-position: center !important; }
html #roomChatMessages .pd-m .pd-sl > img.pd-from { z-index: 2; }
/* puce UNLOCKED : seulement dans le feed et la visionneuse ; dans les MP et les rooms la ligne « ✓ Unlocked » sous l'image suffit
   (la puce apparaissait puis s'en allait : « elle saute ») */
.paid-bubble .pd-ok, .pd-room .pd-ok { display: none !important; }

/* room : la ligne d etat se centre sous la carte (le slot prend la largeur de la carte) */
.pd-room > .pd-slot { width: 190px; max-width: 100%; }

/* ==========================================================================
   UNLOCK4 (12/10) : fenetre « New Unlock post »
   ========================================================================== */
/* zone de depot : tout est la des le premier affichage (paid.js), seule l'opacite bouge, rien ne pousse le texte ni Browse */
html body .pd-comp .pd-drop.aa-dz, html body .pd-comp .pd-drop.aa-dz .pd-bdg, html body .pd-comp .pd-drop .aa-dz-t { animation: none; translate: none; scale: none; transform: none; transition: none; }
html body .pd-comp .pd-drop.aa-dz.pd-dz1 { animation: pdDzFade .35s ease both; }
html body .pd-comp .pd-drop.pd-dz1 .aa-dz-t { animation: pdDzFade .35s ease both; }
html body .pd-comp .pd-drop.pd-dz1 .aa-dz-t:nth-child(2) { animation-delay: .07s; }
html body .pd-comp .pd-drop.pd-dz1 .aa-dz-t:nth-child(3) { animation-delay: .14s; }
html body .pd-comp .pd-drop.pd-dz1 .aa-dz-t:nth-child(4) { animation-delay: .21s; }
html body .pd-comp .pd-drop:hover .aa-dz-t, html body .pd-comp .pd-drop.aa-dz-over .aa-dz-t { transform: none; }
html body .pd-comp .pd-drop .aa-dz-pen { display: none !important; }   /* plus de pentagone autour du cadenas */
html body .pd-comp .pd-drop .aa-dz-frame rect { stroke: url(#pdBg); }
html body .pd-comp .pd-drop .aa-dz-types { min-height: 50px; }
html body .pd-comp .pd-drop .aa-dz-hint { min-height: 1em; }
@keyframes pdDzFade { from { opacity: 0; } to { opacity: 1; } }
/* Unlock / Privacy : deux boutons compacts d'une ligne (~40 px), meme largeur, cote a cote, centres */
html body .pd-comp .pd-seg.pd-acc { display: grid !important; grid-template-columns: repeat(2, minmax(0, 168px)); justify-content: center; gap: 8px; }
html body .pd-comp .pd-seg.pd-acc .pd-sg { flex-direction: row; height: 40px; min-height: 40px; padding: 0 12px; gap: 7px; align-items: center; justify-content: center; box-sizing: border-box; }
html body .pd-comp .pd-seg.pd-acc .pd-sg > span { flex-direction: row; align-items: baseline; gap: 5px; }
html body .pd-comp .pd-seg.pd-acc .pd-sg b { font: 700 .88rem Rajdhani, sans-serif; }
html body .pd-comp .pd-seg.pd-acc .pd-sg small { font-size: .52rem; letter-spacing: .12em; opacity: .7; }
html body .pd-comp .pd-seg.pd-acc .pd-sg svg { width: 15px; height: 15px; }
html body .pd-comp .pd-seg.pd-acc .pd-sg:not(.on) { background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: reduce) { html body .pd-comp .pd-drop.pd-dz1, html body .pd-comp .pd-drop.pd-dz1 .aa-dz-t { animation: none; } }

/* ==========================================================================
   UNLOCK5 (12/10) : zone de depot fine + embleme qui se transforme, ouverture sans saut
   ========================================================================== */
html body .pd-comp .pd-drop.aa-dz.pd-dzf {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; min-height: 66px; box-sizing: border-box;
    padding: 10px 12px; text-align: left; animation: none; translate: none; scale: none; transform: none;
}
html body .pd-comp .pd-dzf .pd-dzt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 0 1 auto; }
html body .pd-comp .pd-dzf .pd-dzt b { font: 800 .92rem/1.15 Rajdhani, sans-serif; color: #fff; white-space: nowrap; }
html body .pd-comp .pd-dzf .pd-dzt small { font-size: .66rem; line-height: 1.25; color: rgba(255, 255, 255, .55); max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .pd-comp .pd-dzf .pd-btn { flex: 0 0 auto; margin: 0; padding: 8px 14px; animation: none; }
/* l'embleme : un seul carre arrondi (44 px), cinq glyphes superposes qui se relaient en fondu, sans rien deplacer */
.pd-morph { position: relative; display: inline-block; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; background: #0A0A0A; border: 1px solid rgba(255, 107, 53, .3); box-shadow: 0 4px 14px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06); overflow: hidden; }
.pd-morph > i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; animation: pdMorph 10s ease-in-out infinite; }
.pd-morph > i:first-child { opacity: 1; }   /* sans animation (economie, capture) : le cadenas reste visible */
.pd-morph > i svg { width: 24px; height: 24px; overflow: visible; }
.pd-morph > i:nth-child(1) { animation-delay: -1s; }
.pd-morph > i:nth-child(2) { animation-delay: 1s; }
.pd-morph > i:nth-child(3) { animation-delay: 3s; }
.pd-morph > i:nth-child(4) { animation-delay: 5s; }
.pd-morph > i:nth-child(5) { animation-delay: 7s; }
@keyframes pdMorph { 0% { opacity: 0; transform: scale(.82) rotate(-10deg); } 5% { opacity: 1; transform: none; } 19% { opacity: 1; transform: none; } 24% { opacity: 0; transform: scale(.82) rotate(10deg); } 100% { opacity: 0; } }
.pd-morph.sm { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
.pd-morph.sm > i svg { width: 17px; height: 17px; }
/* pendant l'envoi : l'embleme tourne a gauche de la barre de progression */
.pd-upl { display: none; align-items: center; gap: 10px; }
.pd-upl.on { display: flex; }
.pd-upl .pd-prog { flex: 1 1 auto; margin: 0 !important; }
@media (prefers-reduced-motion: reduce) { .pd-morph > i { animation: none; } .pd-morph > i:first-child { opacity: 1; } }
/* ouverture de la fenetre : rien ne glisse ni ne clignote (fondu du voile seulement) */
html body .pd-sheet.pd-comp { animation: none; }
@media (max-width: 380px) { html body .pd-comp .pd-drop.aa-dz.pd-dzf { gap: 9px; padding: 9px 10px; } html body .pd-comp .pd-dzf .pd-btn { padding: 7px 11px; } }