/* ============================================================================= * ZIC Landing — Vitrine publique : produits digitaux (badges + viewer) * ============================================================================= */ /* ---- Badges carte ---- */ .zh-shop-card-digital { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(141, 34, 255, 0.92); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.2px; backdrop-filter: blur(4px); } .zh-shop-card-owned { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(16, 185, 129, 0.95); color: #fff; font-size: 10px; font-weight: 700; } /* ---- Cover digital (carte sans miniature : jamais noir) ---- */ .zh-shop-card-digital-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(150deg, #2a1055 0%, #4c1d95 55%, #7b3ff2 100%); } /* ---- Cover digital dans le détail (ebook/PDF sans miniature : icône au lieu du noir) ---- */ .zh-shop-detail-digital-cover { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 320px; font-size: 96px; background: linear-gradient(150deg, #2a1055 0%, #4c1d95 55%, #7b3ff2 100%); border-radius: inherit; } /* ---- Bloc digital dans le détail produit ---- */ .zh-shop-detail-digital { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 10px; } /* display:flex écraserait l'attribut hidden → sans ça, le bloc digital (fmt + boutons « View content »/« extrait ») reste visible sur un produit physique. */ .zh-shop-detail-digital[hidden] { display: none; } .zh-shop-detail-digital-fmt { margin: 0; font-size: 13px; font-weight: 600; color: var(--zh-shop-primary, #8d22ff); } .zh-shop-detail-digital-actions { display: flex; flex-direction: column; gap: 8px; } /* ---- Viewer modal (monté sur ) ---- */ .zh-dv-modal { --dv-bg: var(--pp-card, #ffffff); --dv-text: var(--pp-text, #1f1840); --dv-soft: var(--pp-text-muted, #6b7280); --dv-border: var(--pp-border, #e9e7f3); --dv-primary: #8d22ff; --dv-green: #10b981; /* Le viewer est monté hors de .zh-shop-root : on redéfinit les tokens des boutons .zh-shop-btn (sinon var() vide → bouton transparent, texte invisible). */ --zh-shop-primary: #8d22ff; --zh-shop-primary-dk: #7314e0; --zh-shop-bg: var(--pp-card, #ffffff); --zh-shop-bg-soft: var(--pp-bg-soft, #f8f6ff); --zh-shop-text: var(--pp-text, #1f1840); --zh-shop-border: var(--pp-border, #e9e7f3); --zh-shop-radius-sm: 10px; position: fixed; inset: 0; z-index: 2600; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: "DM Sans", system-ui, sans-serif; } .zh-dv-modal[hidden] { display: none; } .zh-dv-backdrop { position: absolute; inset: 0; background: var(--pp-scrim, rgba(8, 4, 18, 0.72)); backdrop-filter: blur(6px); cursor: pointer; } .zh-dv-card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 880px; max-height: 92vh; background: var(--dv-bg); color: var(--dv-text); border-radius: 20px; box-shadow: 0 32px 80px var(--pp-shadow, rgba(0, 0, 0, 0.5)); overflow: hidden; animation: zh-dv-in 0.18s ease-out; } @keyframes zh-dv-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .zh-dv-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--dv-border); } .zh-dv-head-text { flex: 1 1 auto; min-width: 0; } .zh-dv-title { font-family: "Space Grotesk", "DM Sans", sans-serif; font-weight: 800; font-size: 16px; color: var(--dv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zh-dv-sub { font-size: 12px; color: var(--dv-soft); margin-top: 2px; } .zh-dv-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--dv-border); background: var(--pp-card-light, #f6f5fb); color: var(--dv-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .zh-dv-close svg { width: 17px; height: 17px; } .zh-dv-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .zh-dv-loading { display: flex; justify-content: center; padding: 40px 0; } .zh-dv-empty { padding: 30px 12px; text-align: center; color: var(--dv-soft); font-size: 14px; } .zh-dv-stage { position: relative; width: 100%; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; } .zh-dv-video { width: 100%; height: 100%; display: block; background: #000; } .zh-dv-status { display: flex; } .zh-dv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; } .zh-dv-badge--ok { background: #dcfce7; color: #166534; } .zh-dv-badge--lock { background: #fef3c7; color: #92660a; } /* Leçons (masterclass) */ .zh-dv-lessons { display: flex; flex-direction: column; gap: 6px; } .zh-dv-lessons-title { font-family: "Space Grotesk", "DM Sans", sans-serif; font-weight: 800; font-size: 14px; margin-bottom: 2px; } .zh-dv-lesson { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; background: var(--pp-card-light, #faf9ff); border: 1px solid var(--dv-border); color: var(--dv-text); cursor: pointer; font: inherit; } .zh-dv-lesson:hover:not(.is-locked) { border-color: var(--dv-primary); } .zh-dv-lesson.is-locked { cursor: default; opacity: 0.75; } .zh-dv-lesson-idx { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; background: #ede9fe; color: var(--dv-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; } .zh-dv-lesson-title { flex: 1 1 auto; font-size: 13px; font-weight: 600; } /* Ebook */ .zh-dv-pdf { width: 100%; height: 62vh; border: 1px solid var(--dv-border); border-radius: 12px; background: var(--pp-card-light, #faf9ff); } .zh-dv-pdf-preview { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px; } .zh-dv-actions { display: flex; gap: 8px; } /* Fichiers */ .zh-dv-files { display: flex; flex-direction: column; gap: 8px; } .zh-dv-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--pp-card-light, #faf9ff); border: 1px solid var(--dv-border); } .zh-dv-file.is-locked { opacity: 0.7; } .zh-dv-file-ic { font-size: 18px; flex: 0 0 auto; } .zh-dv-file-main { flex: 1 1 auto; min-width: 0; } .zh-dv-file-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zh-dv-file-sub { font-size: 11px; color: var(--dv-soft); margin-top: 2px; } .zh-dv-file-dl { flex: 0 0 auto; text-decoration: none; } /* CTA achat */ .zh-dv-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(141, 34, 255, 0.08), rgba(109, 40, 217, 0.05)); border: 1px solid rgba(141, 34, 255, 0.2); } .zh-dv-buy-note { font-size: 13px; color: var(--dv-text); font-weight: 600; } /* Paiement en pièces (XP) dans le viewer digital. */ .zh-dv-xp-pill { flex: 1 1 100%; font-size: 12px; font-weight: 800; color: #6d28d9; background: rgba(124, 58, 237, .10); border-radius: 999px; padding: 5px 12px; text-align: center; } .zh-dv-xp-btn { flex: 1 1 100%; background: rgba(124, 58, 237, .12); color: #6d28d9; border: 1px solid rgba(124, 58, 237, .30); } .zh-dv-xp-btn:hover { background: rgba(124, 58, 237, .18); } .zh-dv-xp-btn[disabled] { opacity: .6; cursor: default; } .zh-dv-xp-note { flex: 1 1 100%; font-size: 12px; font-weight: 700; color: #6d28d9; text-align: center; } /* Responsive */ @media (max-width: 760px) { .zh-dv-modal { padding: 0; align-items: stretch; } .zh-dv-card { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; } .zh-dv-pdf { height: 70vh; } }