.post-pin { position: relative; width: 0; height: 0; pointer-events: none; transform: translate3d(0, 0, 0); } .post-pin * { pointer-events: auto; box-sizing: border-box; } .post-pin--compact .post-pin-bubble { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 12px)); display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: rgba(6, 40, 80, 0.98); /* transparence intacte */ border: 3px solid #000; /* contour plus épais */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); /* ombre plus forte */ max-width: 180px; } .post-pin-dot { width:10px; height:10px; border-radius:999px; background:#ff8a00; margin-right:6px; flex-shrink:0; } .post-pin-text { color:#e8f5ff; font-size:11px; font-weight:500; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .post-pin--compact .post-pin-pointer-small { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid rgba(6, 40, 80, 0.98); /* transparence intacte */ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); } /* Template mini wrapper */ .sw-template-mini-wrap{ position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 12px)) scale(0.62); transform-origin: bottom center; will-change: transform; } @media (max-width: 640px){ .sw-template-mini-wrap{ transform: translate(-50%, calc(-100% - 12px)) scale(0.52); } } /* FIX: Grosses cartes (expanded/full) - fond opaque + couleurs propres par catégorie */ .sw-centered-modal .post-card.sw-expanded-shell { background: rgba(15, 23, 42, 0.98) !important; /* transparence intacte */ border: 3px solid #000 !important; /* contour plus épais */ box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 16px rgba(56,189,248,0.5) !important; padding: 12px 14px; color: #e5e7eb !important; /* texte blanc clair */ width: min(92vw, 440px); height: min(86vh, 640px); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Couleur badge par catégorie dans grosse carte */ .sw-centered-modal [data-category="NEWS"] .sw-modal-badge { background: rgba(56,189,248,0.35) !important; border-color: #38bdf8 !important; color: #D7F3FF !important; } .sw-centered-modal [data-category="EVENT"] .sw-modal-badge { background: rgba(168,85,247,0.35) !important; border-color: #a855f7 !important; color: #F3E8FF !important; } .sw-centered-modal [data-category="FRIENDS"] .sw-modal-badge { background: rgba(34,197,94,0.35) !important; border-color: #22c55e !important; color: #D1FAE5 !important; } .sw-centered-modal [data-category="MARKET"] .sw-modal-badge { background: rgba(250,204,21,0.35) !important; border-color: #facc15 !important; color: #FEFCE8 !important; } /* Hero (image en haut) + titre + stats : lisibles */ .sw-modal-hero { background: rgba(15, 23, 42, 0.98) !important; /* transparence intacte */ border: 3px solid #000 !important; /* contour plus épais */ box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 16px rgba(56,189,248,0.5) !important; } .sw-centered-modal.sw-modal-fullscreen{ width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0 !important; margin: 0 !important; } .sw-centered-modal.sw-modal-fullscreen .post-card.sw-expanded-shell{ width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0 !important; } .sw-modal-title, .sw-modal-summary, .sw-stat-pill, .sw-modal-meta, .sw-livechat-title, .sw-chat-line, .sw-livechat-input { color: #e5e7eb !important; /* texte blanc partout */ } .sw-stat-pill { background: rgba(148, 163, 184, 0.25) !important; border: 1px solid rgba(148, 163, 184, 0.5) !important; } .sw-cta-primary { background: rgba(56,189,248,0.35) !important; color: #ffffff !important; } .sw-livechat-input { background: rgba(255,255,255,0.1) !important; color: #ffffff !important; } /* Expanded layout pieces */ .sw-expanded-shell{ padding: 10px 12px; } .sw-expanded-top{ display:flex; gap:10px; align-items:flex-start; } .sw-expanded-left{ flex: 1; } .sw-expanded-right{ width: 150px; min-width: 140px; display:flex; flex-direction:column; gap:8px; padding-top: 4px; } .sw-watch-title{ font-size: 11px; font-weight: 800; color:#bfdbfe; text-transform: uppercase; letter-spacing: .06em; } .sw-watch-list{ display:flex; flex-direction:column; gap:6px; } .sw-watch-item{ font-size: 11px; color:#e8f5ff; background: rgba(3, 14, 32, 0.75); border: 1px solid rgba(90, 190, 255, 0.35); border-radius: 10px; padding: 6px 8px; } .sw-watch-msg{ opacity:.85; margin-top:2px; font-size: 10px; color:#c7e3ff; } .sw-add-feed-btn{ margin-top: 2px; border: 1px solid rgba(148,163,184,.7); border-radius: 10px; padding: 8px 10px; background: rgba(5, 35, 70, 0.85); color:#e8f5ff; font-weight: 900; font-size: 11px; cursor:pointer; } .sw-news-generated{ margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(3, 14, 32, 0.75); border: 1px solid rgba(90, 190, 255, 0.35); } .sw-news-title{ font-size: 12px; font-weight: 900; color:#e8f5ff; margin-bottom: 2px; } .sw-news-sub{ font-size: 10px; color:#9eb7ff; } .sw-actions-row{ margin-top: 8px; } .sw-livechat{ margin-top: 8px; } .sw-livechat-title{ font-weight: 800; letter-spacing:.04em; margin-bottom: 6px; } .sw-livechat-body{ display:flex; flex-direction:column; gap:3px; margin-bottom: 8px; opacity:.95; } .sw-chat-line{ font-size: 10px; color:#c7e3ff; } .sw-livechat-inputrow{ display:flex; gap:8px; align-items:center; } .sw-livechat-input{ flex:1; border-radius: 999px; border: 1px solid rgba(90, 190, 255, 0.35); background: rgba(3, 14, 32, 0.75); color:#e8f5ff; padding: 8px 10px; font-size: 11px; outline: none; } .sw-livechat-post{ border:none; border-radius: 10px; padding: 8px 12px; background: rgba(56,189,248,0.22); color:#e8f5ff; font-weight: 900; font-size: 11px; cursor:pointer; } /* Mobile: keep overlay readable */ @media (max-width: 640px){ .sw-expanded-overlay-card{ width: min(94vw, 360px); } .sw-expanded-top{ flex-direction: column; } .sw-expanded-right{ display:none; } .sw-livechat-body{ max-height: 150px; overflow-y: auto; padding-right: 4px; } .sw-chat-line{ font-size: 12px; line-height: 1.35; } .sw-livechat-inputrow{ flex-direction: column; align-items: stretch; gap: 6px; } .sw-livechat-input{ font-size: 13px; padding: 10px 12px; } .sw-livechat-post{ width: 100%; font-size: 13px; padding: 10px 14px; } } /* Fix full wrap collapse */ .post-pin--expanded .post-card.sw-expanded-shell{ width: 440px !important; min-width: 440px !important; max-width: 440px !important; height: 640px !important; max-height: 640px !important; overflow: hidden !important; } /* Override hidden overflow for centered modal to allow scroll */ .sw-centered-modal .post-card.sw-expanded-shell{ overflow-y: auto !important; } .sw-template-full-wrap{ display: block !important; width: 440px !important; height: 640px !important; } .sw-template-full-wrap > *{ display: block !important; } /* Expanded header */ .sw-expanded-badge{ display:inline-flex; align-items:center; justify-content:center; padding: 6px 10px; border-radius: 999px; font-weight: 900; font-size: 12px; background: rgba(56,189,248,0.18); color: #D7F3FF; width: fit-content; } .sw-expanded-title{ margin-top: 10px; font-size: 26px; font-weight: 900; line-height: 1.05; color: #F0F7FF; } .sw-expanded-snippet{ margin-top: 8px; font-size: 14px; font-weight: 700; color: #B5C7E6; } /* SW_EXPANDED_POLISH */ .post-pin--expanded .post-card{ background: linear-gradient(135deg, rgba(56,189,248,0.16), rgba(7,18,37,0.98) 55%, rgba(2,6,23,0.98)); border: 3px solid #000 !important; /* contour plus épais */ box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 24px rgba(56,189,248,0.22); } .sw-expanded-badge{ display:inline-flex; align-items:center; justify-content:center; padding: 7px 12px; border-radius: 999px; font-weight: 900; font-size: 12px; letter-spacing: .04em; color: #d7f3ff; background: rgba(56,189,248,0.16); border: 3px solid #000 !important; /* contour plus épais */ margin-bottom: 10px; } .sw-expanded-title{ font-size: 28px; font-weight: 950; line-height: 1.05; color: #f0f7ff; margin-bottom: 8px; } .sw-expanded-meta{ font-size: 12px; font-weight: 700; color: rgba(181,199,230,0.95); margin-bottom: 10px; } .sw-expanded-snippet{ font-size: 14px; line-height: 1.35; color: rgba(215,233,255,0.95); background: rgba(3,14,32,0.45); border: 1px solid rgba(90,190,255,0.22); border-radius: 14px; padding: 10px 12px; } .post-card-btn{ background: rgba(56,189,248,0.14); border: 1px solid rgba(56,189,248,0.35); color: #e8f5ff; font-weight: 900; padding: 6px 12px; } .post-card-btn:active{ transform: scale(0.98); } /* Center modal content */ .sw-modal{ padding: 12px 14px; } .sw-modal-toprow{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom: 10px; } .sw-modal-badge{ display:inline-flex; align-items:center; justify-content:center; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .06em; background: rgba(56,189,248,0.16); border: 3px solid #000 !important; /* contour plus épais */ color:#D7F3FF; text-transform: uppercase; } .sw-modal-meta{ margin-top: 6px; font-size: 11px; color:#9eb7ff; opacity:.95; display:flex; gap:6px; flex-wrap:wrap; } .sw-modal-x{ border:none; border-radius:999px; width:34px; height:34px; background: rgba(3,14,32,0.55); color:#e8f5ff; font-weight:900; cursor:pointer; border:1px solid rgba(90,190,255,0.25); flex-shrink:0; } .sw-modal-hero{ width:100%; height: 180px; min-height: 180px; flex: 0 0 auto; border-radius: 16px; overflow:hidden; border: 3px solid #000 !important; /* contour plus épais */ background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.18), rgba(3,14,32,0.98)); box-shadow: 0 10px 24px rgba(0,0,0,0.35); margin-bottom: 10px; } .sw-modal-hero img{ width:100%; height:100%; object-fit: cover; display:block; } .sw-modal-hero-fallback{ width:100%; height:100%; background: radial-gradient(circle at 35% 35%, rgba(56,189,248,0.22), rgba(3,14,32,0.98)); } .sw-modal-title{ font-size: 22px; font-weight: 900; line-height: 26px; color:#F0F7FF; margin: 6px 0 8px; } .sw-modal-summary{ font-size: 13px; line-height: 17px; color:#D7E9FF; opacity:.95; margin-bottom: 8px; flex: 0 0 auto; } .sw-stat-row{ display:flex; gap:8px; flex-wrap:wrap; margin: 6px 0 10px; } .sw-stat-pill{ font-size: 11px; color:#c7e3ff; background: rgba(3, 14, 32, 0.58); border: 1px solid rgba(90, 190, 255, 0.22); padding: 6px 10px; border-radius: 999px; } .sw-modal-cta-row{ display:flex; flex-direction:column; gap:10px; margin-bottom: 10px; } .sw-cta-primary{ width:100%; border:none; border-radius: 14px; padding: 14px 12px; font-weight: 900; font-size: 14px; color:#e8f5ff; cursor:pointer; background: rgba(56,189,248,0.22); box-shadow: 0 10px 18px rgba(0,0,0,0.35); } .sw-cta-primary:disabled{ opacity:.55; cursor:default; } .sw-cta-actions{ display:flex; gap:8px; flex-wrap:wrap; } /* Mobile tighten */ @media (max-width: 640px){ .sw-modal-hero{ height: 150px; } .sw-modal-title{ font-size: 20px; line-height: 24px; } .sw-centered-modal .post-card.sw-expanded-shell{ width: min(96vw, 420px); height: min(92vh, 700px); } } /* SW_CENTERED_MODAL_ANIM */ .sw-centered-backdrop{ position: fixed; inset: 0; z-index: 9999999; background: rgba(0,0,0,0.08); backdrop-filter: blur(1px); display: flex; align-items: center; justify-content: center; padding: 12px; pointer-events: auto; opacity: 0; transition: opacity 440ms ease; } .sw-centered-backdrop.sw-modal-fullscreen{ padding: 0; } .sw-centered-modal{ transform: scale(0.94); opacity: 0.0; transition: transform 440ms ease, opacity 440ms ease; will-change: transform, opacity; } .sw-centered-backdrop.sw-open{ opacity: 1; } .sw-centered-modal.sw-open{ transform: scale(1); opacity: 1.0; } /* SW_MINI_SMOOTH_MOVE */ .post-pin{ will-change: transform; transform: translate3d(0,0,0); } .post-pin, .post-pin *{ transition: none !important; } .sw-template-mini-wrap{ backface-visibility: hidden; transform: translate3d(-50%, calc(-100% - 12px), 0) scale(0.62); transform-origin: bottom center; } @media (max-width: 640px){ .sw-template-mini-wrap{ transform: translate3d(-50%, calc(-100% - 12px), 0) scale(0.52); } } .post-pin--compact .post-pin-pointer-small{ filter: none; } @media (prefers-reduced-motion: reduce){ .sw-centered-backdrop, .sw-centered-modal{ transition: none !important; } } .post-pin.sw-appear{ opacity: 0; transform: translate3d(0,0,0) scale(0.96); transition: opacity 840ms ease, transform 840ms ease; } .post-pin.sw-appear.sw-appear-in{ opacity: 1; transform: translate3d(0,0,0) scale(1); } .post-pin.sw-disappear{ opacity: 0; transform: translate3d(0,0,0) scale(0.96); transition: opacity 840ms ease, transform 840ms ease; }