/* ============================================================ LÉA — DA rose premium 2.0 Palette : Creator/Video pink-on-dark (ui-ux-pro-max) Glassmorphism · aurora animée · grain · micro-interactions ============================================================ */ :root { /* Fond */ --bg: #0b0509; --bg-2: #140810; --bg-3: #1c0c16; --bg-card: rgba(40, 14, 28, 0.45); --bg-elevated: #241020; /* Roses */ --pink: #ec4899; --pink-light: #f472b6; --pink-bright: #ff5fa8; --pink-deep: #db2777; --pink-dark: #9d174d; --pink-pale: #fdf2f8; --gold: #ffd9a0; /* Texte */ --text: #fdeef5; --text-soft: #f3d6e4; --text-muted: #d7a3bd; /* Bordures */ --border: rgba(244, 114, 182, 0.16); --border-strong: rgba(244, 114, 182, 0.34); --green: #34e07a; /* RGB pour les halos/glows (rose) */ --accent-rgb: 236, 72, 153; --accent2-rgb: 244, 114, 182; --accent-deep-rgb: 219, 39, 119; --accent-dark-rgb: 157, 23, 107; --surf-rgb: 40, 14, 28; --bg-rgb: 11, 5, 9; --tone-deep: #2a0a18; /* Ombres */ --glow: 0 12px 44px rgba(var(--accent-rgb), 0.42); --glow-soft: 0 8px 30px rgba(var(--accent-rgb), 0.28); --card-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); --radius: 22px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ 5 PALETTES (data-theme sur ) — rose = défaut ci-dessus ============================================================ */ html[data-theme="violet"] { --bg: #0a0613; --bg-2: #120a1f; --bg-3: #1a1030; --bg-elevated: #1e1335; --bg-card: rgba(40,24,60,0.45); --pink: #a855f7; --pink-light: #c084fc; --pink-bright: #b985ff; --pink-deep: #7e22ce; --pink-dark: #581c87; --pink-pale: #f5f3ff; --gold: #e9d5ff; --text: #f3eefd; --text-soft: #ddd0f3; --text-muted: #b49ad6; --border: rgba(192,132,252,0.16); --border-strong: rgba(192,132,252,0.34); --accent-rgb: 168,85,247; --accent2-rgb: 192,132,252; --accent-deep-rgb: 126,34,206; --accent-dark-rgb: 88,28,135; --surf-rgb: 40,24,60; --bg-rgb: 10,6,19; --tone-deep: #1a0b2e; } html[data-theme="ocean"] { --bg: #04080f; --bg-2: #061320; --bg-3: #0a1c2e; --bg-elevated: #0c2032; --bg-card: rgba(12,32,50,0.45); --pink: #22d3ee; --pink-light: #67e8f9; --pink-bright: #38e0f0; --pink-deep: #0891b2; --pink-dark: #155e75; --pink-pale: #ecfeff; --gold: #bae6fd; --text: #ecfbff; --text-soft: #cfeefb; --text-muted: #8ec3d8; --border: rgba(103,232,249,0.16); --border-strong: rgba(103,232,249,0.32); --accent-rgb: 34,211,238; --accent2-rgb: 103,232,249; --accent-deep-rgb: 8,145,178; --accent-dark-rgb: 21,94,117; --surf-rgb: 12,32,50; --bg-rgb: 4,8,15; --tone-deep: #04141f; } html[data-theme="gold"] { --bg: #070605; --bg-2: #100d08; --bg-3: #1a150c; --bg-elevated: #1c170e; --bg-card: rgba(40,32,18,0.5); --pink: #e8b24a; --pink-light: #f5d27a; --pink-bright: #ffd98a; --pink-deep: #c4901f; --pink-dark: #7a5a16; --pink-pale: #fffaf0; --gold: #fff0c2; --text: #fbf3e2; --text-soft: #ecdcbf; --text-muted: #c4a978; --border: rgba(232,178,74,0.18); --border-strong: rgba(232,178,74,0.36); --accent-rgb: 232,178,74; --accent2-rgb: 245,210,122; --accent-deep-rgb: 196,144,31; --accent-dark-rgb: 122,90,22; --surf-rgb: 40,32,18; --bg-rgb: 7,6,5; --tone-deep: #1a140a; } html[data-theme="crimson"] { --bg: #0c0606; --bg-2: #160a0a; --bg-3: #200e0e; --bg-elevated: #221010; --bg-card: rgba(48,18,18,0.45); --pink: #ef4444; --pink-light: #fb7185; --pink-bright: #ff5a6e; --pink-deep: #be123c; --pink-dark: #7f1d1d; --pink-pale: #fff1f2; --gold: #ffb347; --text: #fdeeee; --text-soft: #f3d4d4; --text-muted: #d39a9a; --border: rgba(251,113,133,0.16); --border-strong: rgba(251,113,133,0.34); --accent-rgb: 239,68,68; --accent2-rgb: 251,113,133; --accent-deep-rgb: 190,18,60; --accent-dark-rgb: 127,29,29; --surf-rgb: 48,18,18; --bg-rgb: 12,6,6; --tone-deep: #2a0a0a; } html[data-theme="orange"] { --bg: #0b0805; --bg-2: #140d06; --bg-3: #1d1409; --bg-elevated: #1f160b; --bg-card: rgba(48,30,12,0.45); --pink: #f97316; --pink-light: #fdba74; --pink-bright: #ff9d3c; --pink-deep: #ea580c; --pink-dark: #9a3412; --pink-pale: #fff7ed; --gold: #ffe1b0; --text: #fdf3e7; --text-soft: #f0dcc4; --text-muted: #c9a47e; --border: rgba(253,186,116,0.16); --border-strong: rgba(253,186,116,0.34); --accent-rgb: 249,115,22; --accent2-rgb: 253,186,116; --accent-deep-rgb: 234,88,12; --accent-dark-rgb: 154,52,18; --surf-rgb: 48,30,12; --bg-rgb: 11,8,5; --tone-deep: #1a0f06; } /* T4 — Y2K Bubblegum (clair) */ html[data-theme="bubblegum"] { --bg: #fff0fa; --bg-2: #fbe6f6; --bg-3: #f3e9ff; --bg-elevated: #ffffff; --bg-card: rgba(255,255,255,0.62); --pink: #ff5fb0; --pink-light: #ff8ad4; --pink-bright: #ff9edd; --pink-deep: #d63f9e; --pink-dark: #c8348f; --pink-pale: #fff5fb; --gold: #9b7bff; --text: #5a2a55; --text-soft: #7a4a72; --text-muted: #9a3f8a; --border: rgba(255,138,212,0.3); --border-strong: rgba(255,138,212,0.5); --accent-rgb: 255,95,176; --accent2-rgb: 255,138,212; --accent-deep-rgb: 214,63,158; --accent-dark-rgb: 200,52,143; --surf-rgb: 255,210,236; --bg-rgb: 255,240,250; --tone-deep: #ffd1ec; } html[data-theme="bubblegum"] body::after { opacity: 0; } html[data-theme="bubblegum"] .profile-name, html[data-theme="bubblegum"] .section-title, html[data-theme="bubblegum"] .gamify-head, html[data-theme="bubblegum"] .unlock-title, html[data-theme="bubblegum"] .vip-inscription, html[data-theme="bubblegum"] .reviews-title, html[data-theme="bubblegum"] .faq-title { font-family: "Baloo 2", sans-serif; } html[data-theme="bubblegum"] .cta-primary, html[data-theme="bubblegum"] .unlock-button, html[data-theme="bubblegum"] .pa-primary, html[data-theme="bubblegum"] .vip-cta-btn, html[data-theme="bubblegum"] .unlock-dock-btn { box-shadow: 0 7px 0 var(--pink-dark), 0 12px 24px rgba(var(--accent-rgb),.35); border-radius: 99px; } /* corrige les textes blancs sur fond clair */ html[data-theme="bubblegum"] .unlock-offer-now, html[data-theme="bubblegum"] .vip-price { background: none; -webkit-text-fill-color: var(--pink-deep); color: var(--pink-deep); } html[data-theme="bubblegum"] .reassure strong, html[data-theme="bubblegum"] .gamify-stats b { color: var(--pink-deep); } /* textes rose pâle illisibles sur fond clair → rose foncé */ html[data-theme="bubblegum"] .more-plus, html[data-theme="bubblegum"] .more-inner b, html[data-theme="bubblegum"] .cta-secondary, html[data-theme="bubblegum"] .social-proof strong, html[data-theme="bubblegum"] .watchers b { color: var(--pink-deep); } html[data-theme="bubblegum"] .modal { background: rgba(90,42,85,.5); } /* COMBINÉ — T1 × T4 : base sombre + bonbon multicolore + fun */ html[data-theme="hybrid"] { --bg: #0c0814; --bg-2: #140c20; --bg-3: #1c1230; --bg-elevated: #1e1430; --bg-card: rgba(40,20,55,0.45); --pink: #ff6ec7; --pink-light: #b08cff; --pink-bright: #ff8ad9; --pink-deep: #c026a8; --pink-dark: #6d1d7a; --pink-pale: #fff0fb; --gold: #5fc8ff; --text: #f6eafb; --text-soft: #e6d5f3; --text-muted: #c6a6d6; --border: rgba(176,140,255,0.2); --border-strong: rgba(176,140,255,0.38); --accent-rgb: 255,110,199; --accent2-rgb: 176,140,255; --accent-deep-rgb: 192,38,168; --accent-dark-rgb: 109,29,122; --surf-rgb: 40,20,55; --bg-rgb: 12,8,20; --tone-deep: #18092a; } html[data-theme="hybrid"] .profile-name, html[data-theme="hybrid"] .gamify-head { font-family: "Baloo 2", sans-serif; } html[data-theme="hybrid"] .cta-primary, html[data-theme="hybrid"] .unlock-button, html[data-theme="hybrid"] .pa-primary { background: linear-gradient(135deg, #ff6ec7, #b08cff 55%, #5fc8ff) !important; border-radius: 18px; } html[data-theme="hybrid"] .top-logo span { background: linear-gradient(90deg, #ff6ec7, #5fc8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Sélecteur de thème (preview) */ .theme-switch { position: fixed; bottom: 18px; left: 14px; z-index: 90; display: flex; gap: 8px; padding: 8px 10px; background: rgba(10,8,12,0.7); backdrop-filter: blur(12px); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.5); } .theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; transition: transform .15s; } .theme-dot.active { border-color: #fff; transform: scale(1.18); box-shadow: 0 0 10px rgba(255,255,255,.4); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.011em; } /* Aurora animée + grain en fond global */ body::before { content: ""; position: fixed; inset: -20%; z-index: 0; background: radial-gradient(40% 30% at 20% 12%, rgba(var(--accent-rgb), 0.30), transparent 60%), radial-gradient(36% 28% at 82% 22%, rgba(var(--accent-dark-rgb), 0.34), transparent 60%), radial-gradient(45% 35% at 50% 82%, rgba(var(--accent-deep-rgb), 0.22), transparent 60%); filter: blur(36px); animation: aurora 22s ease-in-out infinite alternate; pointer-events: none; } @keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2%, -2%, 0) scale(1.08); } 100% { transform: translate3d(-2%, 1%, 0) scale(1.04); } } body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .container { position: relative; z-index: 2; max-width: 480px; margin: 0 auto; min-height: 100vh; background: radial-gradient(120% 46% at 50% -8%, rgba(var(--accent-rgb), 0.20) 0%, transparent 55%), linear-gradient(180deg, rgba(var(--surf-rgb), 0.92) 0%, rgba(var(--bg-rgb), 0.96) 42%); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 0 0 120px rgba(var(--accent-rgb), 0.12); } /* Entrées animées */ @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .profile-section, .cta-dock, .section, .footer { animation: fade-up 0.6s var(--ease) both; } .cta-dock { animation-delay: 0.05s; } .section:nth-of-type(1) { animation-delay: 0.1s; } .section-divider + .section { animation-delay: 0.15s; } /* ---------- Barre du haut (app) ---------- */ .appbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(var(--bg-rgb), 0.72); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .appbar-user { font-weight: 800; font-size: 15px; letter-spacing: .2px; } .appbar-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--green); } /* ---------- Bannière ---------- */ .banner { position: relative; height: 214px; overflow: hidden; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 48%, var(--tone-deep) 100%); } .banner-media { position: absolute; inset: 0; } .banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); } /* Vibe : cœurs flottants */ .hearts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .hearts i { position: absolute; bottom: -10%; left: var(--x); width: 14px; height: 14px; opacity: 0; animation: floatup 5.5s linear infinite; animation-delay: var(--d); } .hearts i::before { content: "♥"; color: var(--pink-light); font-size: 14px; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),.7)); } @keyframes floatup { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-220px) scale(1.1); opacity: 0; } } .banner-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 28%), linear-gradient(0deg, var(--bg) 1%, rgba(var(--bg-rgb),.3) 30%, transparent 52%); pointer-events: none; } .top-logo { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-size: 23px; font-weight: 800; letter-spacing: 0.4px; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.75); z-index: 2; } .top-logo span { background: linear-gradient(90deg, var(--pink-light), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---------- Bouton discuter ---------- */ .banner-discuter { display: flex; justify-content: flex-end; padding: 14px 18px 0; position: relative; z-index: 3; } .profile-message-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--surf-rgb), 0.55); backdrop-filter: blur(14px); border: 1px solid var(--border-strong); color: var(--text); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .18s var(--ease), box-shadow .25s, background .25s; } .profile-message-btn:hover { box-shadow: var(--glow-soft); background: rgba(var(--surf-rgb), 0.7); } .profile-message-btn:active { transform: scale(.95); } .dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52, 224, 122, .6); animation: live 1.8s infinite; } @keyframes live { 0% { box-shadow: 0 0 0 0 rgba(52, 224, 122, .5); } 70% { box-shadow: 0 0 0 7px rgba(52, 224, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 224, 122, 0); } } /* ---------- Profil (mode app) ---------- */ .profile-section { padding: 0 18px; margin-top: -46px; position: relative; z-index: 3; } .phead { display: flex; align-items: center; gap: 18px; } .avatar-box { position: relative; flex: 0 0 92px; width: 92px; height: 92px; } .avatar-wrapper { width: 92px; height: 92px; border-radius: 50%; padding: 3px; background: conic-gradient(from 140deg, var(--pink-light), var(--pink), var(--pink-deep), var(--pink-dark), var(--pink-light)); display: inline-block; position: relative; box-shadow: 0 10px 34px rgba(var(--accent-rgb), 0.42); animation: spin-ring 9s linear infinite; } @keyframes spin-ring { to { transform: rotate(360deg); } } .avatar-wrapper > * { animation: spin-ring 9s linear infinite reverse; } .avatar { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg); background: linear-gradient(135deg, var(--pink-dark), var(--tone-deep)); display: flex; align-items: center; justify-content: center; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar.avatar-empty { font-size: 34px; } .avatar-live { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 3px solid var(--bg); z-index: 2; } .profile-info { margin-top: 14px; } .profile-name { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 7px; } .verified-badge { display: inline-flex; width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),.6)); } .verified-badge svg { width: 100%; height: 100%; } .username { color: var(--text-muted); font-size: 14px; margin-top: 2px; font-weight: 500; } .online-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--green); } .watchers { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); } .watchers b { color: var(--pink-light); } .watch-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 6px #ff3b3b; animation: live 1.5s infinite; } /* Boutons Appel vidéo / Snap (façon only-me) */ .profile-actions2 { display: flex; gap: 10px; margin-top: 10px; } .profile-actions2 .pa2 { flex: 1; border-radius: 13px; padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; background: rgba(var(--surf-rgb), 0.5); backdrop-filter: blur(10px); border: 1px solid var(--border-strong); color: var(--text); transition: transform .15s, background .2s; } .profile-actions2 .pa2:active { transform: scale(.97); } .pa2-snap { background: linear-gradient(135deg, #fffc00, #ffd400) !important; color: #1a1400 !important; border: none !important; font-weight: 800; } .wa-ic { display: inline-flex; align-items: center; vertical-align: -.18em; color: #25D366; margin-right: .4em; } .wa-ic svg { width: 1.15em; height: 1.15em; } .call-top .wa-ic { vertical-align: -.22em; margin-right: .3em; } /* Tuile VOIR PLUS (fin de grille) */ .more-tile { display: flex; align-items: center; justify-content: center; background: rgba(var(--surf-rgb), 0.35); border: 1.5px dashed var(--border-strong); } .more-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; } .more-plus { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--pink); color: var(--pink-light); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 300; box-shadow: 0 0 12px rgba(var(--accent-rgb),.4); } .more-inner b { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--pink-light); margin-top: 4px; } .more-sub { font-size: 11px; color: var(--text-muted); } .bio { margin-top: 11px; font-size: 14.5px; line-height: 1.58; color: var(--text-soft); } /* ---------- Stats (en ligne, mode app) ---------- */ .stats { flex: 1; display: flex; justify-content: space-around; text-align: center; } .stat-item { display: flex; flex-direction: column; align-items: center; padding: 2px 4px; } .stat-value { font-size: 19px; font-weight: 800; } .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 1px; } /* ---------- Actions profil ---------- */ .profile-actions { display: flex; gap: 10px; margin-top: 16px; } .profile-actions button { flex: 1; border-radius: 13px; padding: 12px; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: transform .15s var(--ease), filter .2s; } .pa-primary { border: none; background: linear-gradient(135deg, var(--pink-light), var(--pink), var(--pink-deep)); color: #fff; box-shadow: var(--glow-soft); } .pa-primary:active { transform: scale(.97); } .pa-ghost { background: rgba(var(--surf-rgb), 0.55); backdrop-filter: blur(12px); border: 1px solid var(--border-strong); color: var(--text); } .pa-ghost:active { transform: scale(.97); } /* ---------- CTA principal ---------- */ .cta-dock { padding: 20px 18px 6px; position: relative; z-index: 3; } .cta-primary { width: 100%; border: none; border-radius: 18px; padding: 17px; background: linear-gradient(135deg, var(--pink-light) 0%, var(--pink) 45%, var(--pink-deep) 100%); color: #fff; cursor: pointer; box-shadow: var(--glow); display: flex; flex-direction: column; align-items: center; gap: 9px; transition: transform .16s var(--ease); position: relative; overflow: hidden; animation: cta-breathe 2.8s ease-in-out infinite; } .cta-primary::after { content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); animation: shine 3.4s infinite; } @keyframes shine { 0% { left: -65%; } 55%, 100% { left: 135%; } } .cta-primary:active { transform: scale(.98); } @keyframes cta-breathe { 0%, 100% { box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.4); transform: translateY(0); } 50% { box-shadow: 0 16px 56px rgba(var(--accent-rgb), 0.72); transform: translateY(-1px); } } .cta-main-text { font-size: 17px; font-weight: 900; letter-spacing: .4px; z-index: 1; } .cta-offer-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.24); border-radius: 999px; padding: 6px 14px; font-size: 13px; z-index: 1; } .cta-offer-was { text-decoration: line-through; opacity: .65; font-size: 13px; } .cta-offer-now { font-weight: 800; font-size: 15px; } .cta-offer-badge { background: #fff; color: var(--pink-deep); font-weight: 800; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; } /* Bandeau d'urgence (accueil) */ .urgency-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 9px 14px; border-radius: 12px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid var(--border-strong); font-size: 12.5px; } .us-left { font-weight: 700; color: var(--pink-light); } .us-count { color: var(--text-muted); } .us-count b { color: var(--text); font-variant-numeric: tabular-nums; } /* Réassurance anti-rebill */ .reassure { margin-top: 11px; text-align: center; font-size: 12.5px; color: var(--text-soft); line-height: 1.5; } .reassure strong { color: #fff; } /* Preuve sociale sous le CTA */ .social-proof { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); } .social-proof strong { color: var(--pink-light); } .sp-avatars { display: flex; flex: 0 0 auto; } .sp-avatars i { flex: 0 0 21px; display: block; width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -7px; background: linear-gradient(135deg, var(--pink-light), var(--pink-deep)); } .sp-avatars i:first-child { margin-left: 0; } /* ---------- Sections ---------- */ .section { padding: 24px 18px; position: relative; z-index: 3; } .section-divider { height: 1px; margin: 0 18px; background: linear-gradient(to right, transparent, var(--pink), transparent); opacity: .4; } .section-title { font-size: 17px; font-weight: 800; } .section-subtitle { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; } /* ---------- Progress bars ---------- */ .progress-bars { display: flex; gap: 6px; margin: 16px 0 14px; } .progress-bar { flex: 1; height: 3px; border-radius: 99px; background: rgba(var(--accent2-rgb), 0.16); overflow: hidden; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--pink-deep), var(--pink-light)); border-radius: 99px; box-shadow: 0 0 8px rgba(var(--accent-rgb),.6); } /* ---------- Stories (mode app, avec légendes) ---------- */ .stories-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; } .stories-row::-webkit-scrollbar { display: none; } .story-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; } .story-item:active { transform: scale(.95); } .story-label { font-size: 11px; color: var(--text-muted); max-width: 84px; text-align: center; white-space: nowrap; } .story-bubble { width: 82px; height: 82px; border-radius: 50%; padding: 3px; background: conic-gradient(from 120deg, var(--pink-light), var(--pink-deep), var(--pink-dark), var(--pink-light)); position: relative; overflow: hidden; transition: transform .2s var(--ease); } .story-bubble .media-inner { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--bg); } .story-bubble .media-placeholder { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--bg); background: linear-gradient(135deg, var(--pink-dark), var(--tone-deep)); font-size: 26px; } .story-bubble .media-inner.is-blurred { filter: blur(4px) brightness(.97); transform: scale(1.06); } .media-placeholder.is-blurred { filter: blur(2px); } /* petit cadenas teaser sur les stories floutées (SVG) */ .story-bubble.is-locked::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2.2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/22px no-repeat; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); } .stories-helper { margin-top: 12px; font-size: 12px; color: var(--text-muted); text-align: center; } .story-timer { font-size: 10.5px; color: var(--pink-light); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .3px; } /* ---------- Gamification (à 1 clic de débloquer X) ---------- */ .gamify-section { padding-top: 6px; } .gamify { width: 100%; cursor: pointer; text-align: left; background: var(--bg-card); backdrop-filter: blur(12px); border: 1px solid var(--border-strong); border-radius: 18px; padding: 16px 18px; box-shadow: var(--glow-soft); transition: transform .15s var(--ease); } .gamify:active { transform: scale(.99); } .gamify-head { font-size: 14px; color: var(--text); text-align: center; } .gamify-head b { color: var(--pink-light); font-weight: 800; } .gamify-lock { display: inline-flex; vertical-align: -0.18em; color: var(--gold); } .gamify-lock svg { width: 15px; height: 15px; } .gamify-bar { height: 8px; border-radius: 99px; background: rgba(var(--accent2-rgb),.16); overflow: hidden; margin: 13px 0; } .gamify-fill { height: 100%; width: 94%; border-radius: 99px; background: linear-gradient(90deg, var(--pink-deep), var(--pink-light), var(--gold)); box-shadow: 0 0 10px rgba(var(--accent-rgb),.6); animation: gamify-pulse 2.2s ease-in-out infinite; } @keyframes gamify-pulse { 0%,100% { width: 92%; } 50% { width: 96%; } } .gamify-stats { display: flex; justify-content: space-around; text-align: center; } .gamify-stats b { display: block; font-size: 17px; font-weight: 800; color: #fff; } .gamify-stats span { font-size: 10px; letter-spacing: 1px; color: var(--text-muted); } /* ---------- Grille médias ---------- */ .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .media-card { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; cursor: pointer; background: linear-gradient(160deg, var(--pink-dark), var(--tone-deep)); transition: transform .2s var(--ease), box-shadow .25s; } .media-card:hover { transform: translateY(-2px); box-shadow: var(--glow-soft); } .media-card .media-inner { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--tone-deep); } .media-card video.media-inner { object-fit: cover; } .media-card .media-inner.is-blurred { filter: blur(6px) brightness(.92); transform: scale(1.06); } .media-card .media-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; background: linear-gradient(160deg, var(--pink-dark), var(--tone-deep)); } .media-card .media-placeholder.is-blurred { filter: blur(2px); } .lock-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .lock-ico { font-size: 19px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.32); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 0 20px rgba(var(--accent-rgb), .55); animation: lock-glow 2.6s ease-in-out infinite; } @keyframes lock-glow { 0%,100% { box-shadow: 0 0 14px rgba(var(--accent-rgb),.4); } 50% { box-shadow: 0 0 26px rgba(var(--accent-rgb),.8); } } .post-views-badge, .media-duration { position: absolute; background: rgba(0,0,0,.52); backdrop-filter: blur(6px); border-radius: 8px; padding: 3px 8px; font-size: 11px; font-weight: 600; } .post-views-badge { bottom: 7px; left: 7px; } .media-duration { top: 7px; right: 7px; } /* ---------- CTA secondaire ---------- */ .cta-secondary { width: 100%; background: rgba(var(--surf-rgb), 0.5); backdrop-filter: blur(10px); border: 1px solid var(--border-strong); color: var(--pink-light); padding: 14px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; margin-bottom: 24px; transition: background .2s, transform .16s; } .cta-secondary:hover { background: rgba(var(--surf-rgb), 0.65); } .cta-secondary:active { transform: scale(.98); } /* ---------- Carte unlock ---------- */ .unlock-card { position: relative; background: var(--bg-card); backdrop-filter: blur(18px); border: 1px solid var(--border-strong); border-radius: 24px; padding: 26px 22px; text-align: center; box-shadow: var(--card-shadow); overflow: hidden; } .unlock-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 50% at 50% 0%, rgba(var(--accent-rgb),.18), transparent 70%); pointer-events: none; } .unlock-eyebrow { position: relative; display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px; color: var(--pink-light); background: rgba(var(--accent-rgb), 0.12); border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 15px; margin-bottom: 14px; } .unlock-title { position: relative; font-size: 21px; font-weight: 800; } .unlock-text { position: relative; font-size: 13.5px; color: var(--text-muted); margin-top: 6px; } .unlock-offer-block { position: relative; margin: 20px 0; } .unlock-offer-line { display: flex; align-items: center; justify-content: center; gap: 11px; } .unlock-offer-now { font-size: 40px; font-weight: 900; background: linear-gradient(180deg, #fff, #ffd2e3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .unlock-offer-pct { background: var(--pink); color: #fff; font-weight: 800; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; } .unlock-offer-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; } .unlock-offer-sub strong { color: var(--pink-light); } .unlock-benefits { position: relative; display: flex; flex-direction: column; gap: 11px; text-align: left; margin: 0 auto 22px; max-width: 280px; font-size: 14px; } .unlock-benefit { display: flex; align-items: center; gap: 10px; } .unlock-benefit::before { content: "✓"; flex: 0 0 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb), 0.18); color: var(--pink-light); font-size: 12px; font-weight: 800; } .unlock-button { position: relative; width: 100%; border: none; border-radius: 15px; padding: 16px; background: linear-gradient(135deg, var(--pink-light), var(--pink-deep)); color: #fff; font-size: 16px; font-weight: 900; letter-spacing: .4px; cursor: pointer; box-shadow: var(--glow); transition: transform .16s var(--ease), filter .2s; overflow: hidden; } .unlock-button::after { content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg); animation: shine 3.8s infinite; } .unlock-button:hover { filter: brightness(1.06); } .unlock-button:active { transform: scale(.98); } .unlock-note { position: relative; margin-top: 13px; font-size: 11.5px; color: var(--text-muted); } /* ---------- Onglets (app) ---------- */ .tabs { display: flex; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 0 2px; position: relative; z-index: 3; } .tab { flex: 1; text-align: center; padding: 13px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: color .2s; } .tab.on { color: var(--pink-light); box-shadow: inset 0 -2px 0 var(--pink); } /* ---------- Barre d'achat collante (app) ---------- */ .unlock-dock { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 80; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, var(--bg) 60%, rgba(var(--bg-rgb),.6) 100%); } .unlock-dock-btn { width: 100%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, var(--pink-light), var(--pink), var(--pink-deep)); color: #fff; border-radius: 16px; padding: 13px 18px; box-shadow: 0 10px 34px rgba(var(--accent-rgb), 0.5); animation: cta-breathe 2.8s ease-in-out infinite; position: relative; overflow: hidden; } .unlock-dock-btn::after { content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg); animation: shine 3.4s infinite; } .unlock-dock-btn:active { transform: scale(.99); } .udl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; z-index: 1; } .udl b { font-size: 15px; font-weight: 800; } .udl small { font-size: 11.5px; opacity: .85; } .udr { display: flex; align-items: baseline; gap: 7px; z-index: 1; } .udr s { font-size: 13px; opacity: .65; } .udr #dock-price { font-size: 21px; font-weight: 900; } /* ---------- Avis ---------- */ .reviews-section { padding-top: 8px; } .reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .reviews-title { font-size: 17px; font-weight: 800; } .reviews-rating { font-size: 12.5px; color: var(--text-muted); } .reviews-rating .stars { color: var(--gold); letter-spacing: 1px; } .reviews-rating b { color: var(--text); } .reviews-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .reviews-row::-webkit-scrollbar { display: none; } .review-card { flex: 0 0 230px; background: var(--bg-card); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 16px; padding: 15px; } .review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .review-name { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 5px; } .rv-check { width: 15px; height: 15px; background: var(--pink); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; } .review-stars { color: var(--gold); font-size: 12px; letter-spacing: 1px; } .review-text { font-size: 13px; line-height: 1.5; color: var(--text-soft); } /* ---------- FAQ ---------- */ .faq-section { padding-top: 8px; } .faq-title { font-size: 17px; font-weight: 800; margin-bottom: 12px; } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; background: none; border: none; cursor: pointer; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px; font-size: 14.5px; font-weight: 600; text-align: left; } .faq-ico { color: var(--pink-light); font-size: 20px; flex: 0 0 auto; line-height: 1; } .faq-a { max-height: 0; overflow: hidden; transition: max-height .25s var(--ease); } .faq-item.open .faq-a { max-height: 200px; } .faq-a p { padding: 0 2px 15px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); } /* ---------- Footer ---------- */ .footer { padding: 28px 18px 110px; text-align: center; position: relative; z-index: 3; } .footer-divider { height: 1px; background: linear-gradient(to right, transparent, var(--border-strong), transparent); margin-bottom: 24px; } .footer-security { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-bottom: 14px; } .footer-links { display: flex; justify-content: center; gap: 16px; margin-bottom: 14px; } .footer-links a { color: var(--text-muted); font-size: 12px; text-decoration: none; transition: color .2s; } .footer-links a:hover { color: var(--pink-light); } .footer-ai-notice { font-size: 11px; color: var(--text-muted); opacity: .85; max-width: 330px; margin: 0 auto 10px; line-height: 1.5; } .footer-copyright { font-size: 11px; color: var(--text-muted); opacity: .55; } /* ---------- Bouton éditeur (FAB) ---------- */ .edit-fab { position: fixed; bottom: 84px; right: 16px; z-index: 90; width: 50px; height: 50px; border-radius: 50%; background: rgba(var(--surf-rgb), 0.7); backdrop-filter: blur(10px); border: 1px solid var(--border-strong); font-size: 22px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.5); transition: transform .2s var(--ease); } .edit-fab:hover { transform: rotate(40deg) scale(1.05); } /* animation de panneau remontant — partagée par les modales */ @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } } /* ---------- Modales ---------- */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .modal.open { display: flex; animation: fade-in .25s ease; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal-content { background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 22px; max-width: 440px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; animation: pop-in .3s var(--ease); } @keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); } .modal-header h2 { font-size: 17px; } .modal-close { background: none; border: none; color: var(--text-muted); font-size: 26px; cursor: pointer; line-height: 1; } .modal-body { padding: 18px 20px; overflow-y: auto; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); } .modal-body h3 { color: var(--text); font-size: 14.5px; margin: 16px 0 6px; } .modal-body h3:first-child { margin-top: 0; } .modal-body ul { padding-left: 18px; } .modal-body li { margin-bottom: 4px; } /* ---------- Page "Inscription VIP" (plein écran) ---------- */ .modal.vip-modal-full { padding: 0; align-items: stretch; justify-content: center; } .vip-screen { width: 100%; max-width: 480px; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: radial-gradient(120% 30% at 50% 0%, rgba(var(--accent-rgb), 0.22), transparent 55%), linear-gradient(180deg, var(--bg-2), var(--bg) 60%); animation: sheet-up .35s var(--ease); } .vip-urgency { position: sticky; top: 0; z-index: 3; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .3px; color: #fff; padding: 13px 16px; background: linear-gradient(90deg, var(--pink-deep), var(--pink), var(--pink-deep)); box-shadow: 0 4px 20px rgba(var(--accent-rgb),.4); } .vip-screen-inner { padding: 20px 18px calc(28px + env(safe-area-inset-bottom, 0px)); } .vip-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .vip-inscription { font-size: 26px; font-weight: 800; flex: 1; } .vip-countdown { display: flex; gap: 6px; } .vip-cd-box { min-width: 42px; text-align: center; padding: 6px 4px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px; display: flex; flex-direction: column; align-items: center; line-height: 1; } .vip-cd-box span { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .vip-cd-box small { font-size: 8.5px; color: var(--text-muted); margin-top: 3px; letter-spacing: .5px; } .vip-close { background: none; border: none; color: var(--text-muted); font-size: 28px; cursor: pointer; line-height: 1; padding: 0 2px; } .vip-pass-card { position: relative; overflow: hidden; background: radial-gradient(100% 60% at 50% 0%, rgba(var(--accent-rgb),.28), transparent 70%), linear-gradient(150deg, rgba(var(--accent-dark-rgb),.5), rgba(var(--surf-rgb),.6)); border: 1px solid var(--border-strong); border-radius: 20px; padding: 20px; margin-bottom: 22px; box-shadow: var(--card-shadow); } .vip-pass-head { display: flex; align-items: center; gap: 14px; } .vip-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: 0 0 56px; background: linear-gradient(135deg, var(--pink), var(--pink-deep)); display: flex; align-items: center; justify-content: center; font-size: 26px; border: 2px solid var(--pink-light); } .vip-avatar img { width: 100%; height: 100%; object-fit: cover; } .vip-pass-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--text-muted); } .vip-pass-title { font-size: 20px; font-weight: 800; margin-top: 4px; } .vip-pass-title s { color: var(--text-muted); font-weight: 600; font-size: 15px; margin-left: 4px; } .vip-pass-divider { height: 1px; background: var(--border); margin: 16px 0; } .vip-pass-benefits { list-style: none; display: flex; flex-direction: column; gap: 12px; } .vip-pass-benefits li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; } .vip-check { flex: 0 0 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb),.22); color: var(--pink-light); font-size: 13px; font-weight: 800; } .vip-reg-form { display: flex; flex-direction: column; } .vip-flabel { font-size: 13px; color: var(--text-muted); margin: 4px 0 7px; } .vip-reg-form input[type="text"], .vip-reg-form input[type="email"] { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 14px; padding: 15px 16px; color: var(--text); font-size: 15px; outline: none; margin-bottom: 16px; transition: border-color .2s, box-shadow .2s; } .vip-reg-form input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18); } .vip-reg-form input::placeholder { color: var(--text-muted); } .vip-reg-form input.invalid { border-color: #ff5470; box-shadow: 0 0 0 3px rgba(255,84,112,.18); } .vip-error { display: none; color: #ff7a90; font-size: 13px; font-weight: 600; margin: -4px 0 14px; text-align: center; } .vip-age { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; color: var(--text-muted); line-height: 1.45; margin: 2px 0 20px; cursor: pointer; } .vip-age input { margin-top: 1px; width: 19px; height: 19px; accent-color: var(--pink); flex-shrink: 0; } .vip-age a { color: var(--pink-light); } .vip-cta-btn { width: 100%; border: none; border-radius: 16px; padding: 17px; background: linear-gradient(135deg, var(--pink-light), var(--pink), var(--pink-deep)); color: #fff; font-size: 15.5px; font-weight: 900; letter-spacing: .3px; cursor: pointer; box-shadow: var(--glow); position: relative; overflow: hidden; transition: transform .16s var(--ease), filter .2s; animation: cta-breathe 2.8s ease-in-out infinite; } .vip-cta-btn::after { content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); animation: shine 3.4s infinite; } .vip-cta-btn:active { transform: scale(.985); } .vip-cta-sub { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 10px; } .vip-trust { display: flex; justify-content: space-around; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); } .vip-trust-item { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); text-align: center; } .vip-trust-ico { font-size: 17px; } /* ---------- Écran "comment payer" (réassurance) ---------- */ .pt-urgency { background: linear-gradient(90deg, #1f8a4c, #28b563, #1f8a4c) !important; box-shadow: 0 4px 20px rgba(40,181,99,.35) !important; } .pt-urgency .us-ico { color: #fff; } .pt-lead { font-size: 14px; color: var(--text-soft); line-height: 1.5; margin: 2px 0 18px; } .pt-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .pt-step { display: flex; align-items: center; gap: 13px; background: var(--bg-card); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 16px; padding: 14px 15px; } .pt-num { flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pink), var(--pink-deep)); color: #fff; font-size: 13px; font-weight: 800; } .pt-ic { flex: 0 0 auto; color: var(--pink-light); display: inline-flex; } .pt-ic svg { width: 22px; height: 22px; } .pt-txt { display: flex; flex-direction: column; } .pt-txt b { font-size: 14.5px; font-weight: 700; } .pt-txt span { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; } .pt-reassure { display: flex; justify-content: space-around; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; } .pt-reassure > div { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); } .pt-ric { display: inline-flex; color: #34e07a; } .pt-ric svg { width: 14px; height: 14px; } .pt-back { width: 100%; background: none; border: none; color: var(--text-muted); font-size: 13px; margin-top: 12px; cursor: pointer; text-decoration: underline; } /* ---------- Popup relance ---------- */ .popup-content { position: relative; width: 100%; max-width: 380px; animation: pop-in .3s var(--ease); } .popup-content > .modal-close { position: absolute; top: 10px; right: 14px; z-index: 2; font-size: 28px; } .popup-card { box-shadow: 0 24px 70px rgba(0,0,0,.65); } .popup-dismiss { background: none; border: none; color: var(--text-muted); font-size: 13px; margin-top: 12px; cursor: pointer; text-decoration: underline; } /* ============================================================ ÉDITEUR ============================================================ */ .editor-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: flex-end; z-index: 300; } .editor-overlay.open { display: flex; } .editor-panel { background: var(--bg-2); width: 100%; max-width: 480px; height: 92vh; border-radius: 22px 22px 0 0; border: 1px solid var(--border-strong); display: flex; flex-direction: column; box-shadow: 0 -16px 60px rgba(0,0,0,.6); animation: sheet-up .35s var(--ease); } .editor-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .editor-head h2 { font-size: 17px; } .editor-close { background: none; border: none; color: var(--text-muted); font-size: 28px; cursor: pointer; line-height: 1; } .editor-body { flex: 1; overflow-y: auto; padding: 6px 20px 20px; } .ed-section { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--pink-light); margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .ed-field { margin-bottom: 12px; } .ed-field label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 5px; } .ed-field input, .ed-field textarea { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; color: var(--text); font-size: 14px; font-family: inherit; outline: none; transition: border-color .2s; } .ed-field input:focus, .ed-field textarea:focus { border-color: var(--pink); } .ed-field textarea { min-height: 70px; resize: vertical; line-height: 1.4; } .ed-row { display: flex; gap: 10px; } .ed-row .ed-field { flex: 1; } .ed-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 14px; cursor: pointer; } .ed-check input { width: 18px; height: 18px; accent-color: var(--pink); } .ed-imgfield { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; padding: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; } .ed-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 20px; } .ed-thumb img { width: 100%; height: 100%; object-fit: cover; } .ed-imgright { flex: 1; display: flex; flex-direction: column; gap: 6px; } .ed-imglabel { font-size: 13px; font-weight: 600; } .ed-uploadbtn { display: inline-block; background: rgba(var(--accent-rgb), 0.15); border: 1px solid var(--border-strong); color: var(--pink-light); padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center; } .ed-clear { background: none; border: none; color: var(--text-muted); font-size: 11.5px; cursor: pointer; text-align: left; text-decoration: underline; } .editor-foot { display: flex; gap: 8px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); } .editor-btn { flex: 1; border: none; border-radius: 12px; padding: 13px; font-size: 13.5px; font-weight: 700; cursor: pointer; } .editor-btn.ghost { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-muted); } .editor-btn.primary { background: linear-gradient(135deg, var(--pink), var(--pink-deep)); color: #fff; box-shadow: var(--glow-soft); } /* ============================================================ DA UPGRADE — icônes SVG · monogramme · accent or · signature ============================================================ */ /* Tailles des icônes SVG selon le contexte */ .lock-ico svg { width: 19px; height: 19px; color: #fff; } .post-views-badge, .media-duration { display: inline-flex; align-items: center; gap: 5px; } .post-views-badge svg, .media-duration svg { width: 13px; height: 13px; } .footer-security span { display: inline-flex; align-items: center; gap: 6px; } .footer-security svg { width: 15px; height: 15px; color: var(--pink-light); } .vip-trust-ico { display: inline-flex; } .vip-trust-ico svg { width: 19px; height: 19px; color: var(--pink-light); } .us-left { display: inline-flex; align-items: center; gap: 7px; } .us-ico { display: inline-flex; color: var(--gold); } .us-ico svg { width: 14px; height: 14px; } /* Monogramme avatar (placeholder premium au lieu d'un emoji) */ .avatar.avatar-empty, .avatar-mono { font-family: "Playfair Display", serif; font-weight: 700; color: var(--gold); font-size: 40px; } .vip-avatar { font-family: "Playfair Display", serif; font-weight: 700; color: var(--gold); } /* Signature éditoriale sur le nom & les titres */ .profile-name { font-family: "Playfair Display", serif; font-weight: 700; font-size: 25px; } .reviews-title, .faq-title, .unlock-title, .vip-pass-title, .vip-inscription { font-family: "Playfair Display", serif; } /* Accent OR réservé au CTA principal = point chaud unique de l'écran */ .cta-primary { border: 1px solid rgba(255, 217, 160, 0.4); box-shadow: 0 14px 48px rgba(var(--accent-rgb), 0.52), inset 0 1.5px 0 rgba(255, 233, 200, 0.6); } .cta-offer-now { color: var(--gold); } /* Désaturer les éléments secondaires pour ne pas concurrencer le CTA */ .unlock-dock-btn { animation: none; box-shadow: 0 6px 22px rgba(0,0,0,.5); } .urgency-strip { background: rgba(255, 255, 255, 0.045); border-color: var(--border); } /* ============================================================ REVUE MULTI-SKILLS — confiance paiement · a11y · perf ============================================================ */ /* Logos moyens de paiement (confiance) */ .paylogos { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; } .pl-badge { display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 44px; padding: 0 9px; background: #fff; border-radius: 5px; font-size: 12px; font-weight: 900; letter-spacing: .3px; } .pl-visa { color: #1a1f71; font-style: italic; } .pl-cb { background: linear-gradient(135deg, #0a4d8c, #1a936f); color: #fff; } .pl-mc { gap: 0; } .pl-mc i { width: 15px; height: 15px; border-radius: 50%; display: inline-block; } .pl-mc i:first-child { background: #eb001b; } .pl-mc i:last-child { background: #f79e1b; margin-left: -6px; mix-blend-mode: multiply; } /* Mini-étapes sur le formulaire VIP (réassurance sans clic) */ .vip-ministeps { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 2px 0 14px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; } .vip-ministeps b { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; margin-right: 5px; background: rgba(var(--accent-rgb), 0.22); color: var(--pink-light); font-size: 10.5px; } .vip-ministeps span { display: inline-flex; align-items: center; } .ms-sep { color: var(--pink-deep); } /* Accessibilité : focus clavier visible */ :focus-visible { outline: 2px solid var(--pink-light); outline-offset: 2px; border-radius: 6px; } :focus:not(:focus-visible) { outline: none; } /* Accessibilité : zones tactiles 44px sur les boutons de fermeture */ .modal-close, .editor-close, .vip-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Performance : aurora sur le compositeur GPU */ body::before { will-change: transform; transform: translateZ(0); } /* Performance : ne peindre les sections basses que quand on y arrive */ .reviews-section, .faq-section, .footer { content-visibility: auto; contain-intrinsic-size: auto 320px; } /* ============================================================ Accessibilité : réduction des animations ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } body::before { animation: none; } } /* ============================================================ ANIMATIONS Appel vidéo & Snap ============================================================ */ .anim-overlay { position: fixed; inset: 0; z-index: 130; display: none; } .anim-overlay.open { display: block; } .anim-stage { position: absolute; inset: 0; max-width: 480px; margin: 0 auto; background-color: #08060e; background-image: radial-gradient(120% 80% at 50% 0%, #1a0d1f, #08060e 70%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden; padding: 30px 22px; animation: anim-in .28s ease; } @keyframes anim-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } } .anim-close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 17px; cursor: pointer; backdrop-filter: blur(6px); } /* --- Appel --- */ .call-top { position: absolute; top: 54px; font-size: 13px; letter-spacing: .5px; color: rgba(255,255,255,.7); } .call-face { width: 150px; height: 150px; border-radius: 50%; background: #2a1822 center/cover no-repeat; box-shadow: 0 0 0 4px rgba(255,255,255,.12); } .call-face.ring { animation: ring 1.15s ease-in-out infinite; } @keyframes ring { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.55), 0 0 0 4px rgba(255,255,255,.12); } 50% { box-shadow: 0 0 0 22px rgba(var(--accent-rgb),0), 0 0 0 4px rgba(255,255,255,.12); } } .call-face.blur { filter: blur(15px); } .call-face.kenburns { animation: kb 6s ease-in-out infinite alternate; } @keyframes kb { from { transform: scale(1.05) translateY(0); } to { transform: scale(1.18) translateY(-6px); } } .call-name { font-size: 22px; font-weight: 800; } .call-status { font-size: 14px; color: rgba(255,255,255,.78); } .call-spinner { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .call-actions { position: absolute; bottom: 56px; display: flex; gap: 70px; } .call-btn { width: 64px; height: 64px; border-radius: 50%; border: none; font-size: 26px; color: #fff; cursor: pointer; } .call-btn.decline { background: #e23b5d; } .call-btn.accept { background: #2ec47a; animation: bob 1s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* --- Snap --- */ .snap-stage { justify-content: flex-start; } .snap-notif { margin-top: 120px; width: 100%; max-width: 340px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; backdrop-filter: blur(8px); animation: snap-pop .4s ease; } @keyframes snap-pop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } } .snap-notif-ic { width: 42px; height: 42px; border-radius: 12px; background: #fffc00; color: #000; display: flex; align-items: center; justify-content: center; font-size: 22px; } .snap-notif-tx { flex: 1; } .snap-notif-tx b { font-size: 15px; } .snap-notif-s { font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 2px; } .snap-tap { font-size: 12px; color: var(--accent); font-weight: 700; } .snap-bar { position: absolute; top: 12px; left: 14px; right: 14px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; } .snap-bar i { display: block; height: 100%; width: 100%; background: #fff; transition: width 5s linear; } .snap-media { position: absolute; inset: 0; background: #2a1822 center/cover no-repeat; } .snap-media.blur { filter: blur(20px) brightness(.9); } .snap-media.strong { filter: blur(30px) brightness(.85); transition: filter .25s; } .snap-media.reveal { filter: blur(9px) brightness(1); } .snap-count { position: absolute; inset: 0; margin: auto; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; font-size: 50px; font-weight: 800; text-shadow: 0 2px 18px rgba(0,0,0,.6); } .snap-hold { position: absolute; bottom: 70px; left: 0; right: 0; text-align: center; font-size: 14px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 14px; } .hold-ring { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); } .snap-hold.holding .hold-ring { border-top-color: var(--accent); animation: spin 1.3s linear; } .snap-head { display: flex; align-items: center; gap: 10px; align-self: stretch; padding: 8px 4px 14px; } .snap-av { width: 38px; height: 38px; border-radius: 50%; background: #2a1822 center/cover no-repeat; } .snap-head b { font-size: 15px; } .snap-on { font-size: 12px; color: #2ec47a; margin-left: auto; } .snap-thread { align-self: stretch; display: flex; flex-direction: column; gap: 8px; } .snap-msg { align-self: flex-start; background: rgba(255,255,255,.12); padding: 9px 14px; border-radius: 16px; border-bottom-left-radius: 4px; font-size: 14px; max-width: 80%; animation: snap-pop .3s ease; } .snap-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px; background: rgba(255,255,255,.1); border-radius: 16px; } .snap-typing span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); animation: typ 1s infinite; } .snap-typing span:nth-child(2) { animation-delay: .2s; } .snap-typing span:nth-child(3) { animation-delay: .4s; } @keyframes typ { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .snap-photo { align-self: flex-start; width: 150px; height: 190px; border-radius: 14px; background: #2a1822 center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 34px; margin-top: 4px; } .snap-photo.blur { filter: blur(13px); } /* --- Couche de verrouillage commune --- */ .anim-lock { position: absolute; inset: 0; z-index: 6; background: rgba(8,5,14,.74); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px; text-align: center; animation: anim-in .3s ease; } .anim-lock-ic { font-size: 34px; } .anim-lock-t { font-size: 19px; font-weight: 800; } .anim-lock-s { font-size: 13.5px; color: rgba(255,255,255,.78); max-width: 280px; line-height: 1.45; } .anim-unlock { margin-top: 10px; border: none; cursor: pointer; color: #fff; font-size: 15px; font-weight: 800; padding: 14px 26px; border-radius: 99px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: 0 8px 22px rgba(var(--accent-rgb),.45); } .anim-unlock:active { transform: scale(.97); } /* --- Sélecteur d'animations (preview) --- */ .anim-switch { position: fixed; left: 10px; bottom: 64px; z-index: 90; max-width: 168px; background: rgba(15,10,22,.82); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 9px 10px; } .as-title { font-size: 10px; color: rgba(255,255,255,.7); margin-bottom: 7px; font-weight: 700; letter-spacing: .3px; } .as-row { display: flex; flex-wrap: wrap; gap: 5px; } .as-chip { font-size: 11px; font-weight: 700; color: #eee; background: rgba(255,255,255,.1); border: 1px solid transparent; border-radius: 99px; padding: 5px 9px; cursor: pointer; } .as-chip.on { background: var(--accent); color: #fff; border-color: #fff; } /* mute + voix qui parle */ .anim-mute { position: absolute; top: 16px; left: 16px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 16px; cursor: pointer; backdrop-filter: blur(6px); } .voice-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; vertical-align: -1px; } .voice-eq i { width: 3px; background: var(--accent); border-radius: 2px; animation: eq .9s ease-in-out infinite; } .voice-eq i:nth-child(1) { height: 5px; animation-delay: 0s; } .voice-eq i:nth-child(2) { height: 11px; animation-delay: .15s; } .voice-eq i:nth-child(3) { height: 7px; animation-delay: .3s; } .voice-eq i:nth-child(4) { height: 10px; animation-delay: .45s; } @keyframes eq { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } } /* écran FaceTime (décrochage) */ .ft-photo { position: absolute; inset: 0; background: #1a1320 center/cover no-repeat; } .ft-self { position: absolute; top: 50px; right: 16px; width: 96px; height: 132px; border-radius: 12px; background: transparent; z-index: 2; } .ft-self.live { box-shadow: 0 4px 14px rgba(0,0,0,.4); } .ft-top { position: absolute; top: 50px; left: 20px; right: 120px; z-index: 2; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .ft-name { font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 9px; } .ft-timer { font-size: 14px; color: rgba(255,255,255,.85); margin-top: 3px; } .ft-controls { position: absolute; left: 0; right: 0; bottom: 42px; z-index: 2; display: flex; justify-content: center; gap: 16px; } .ft-ctrl { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; color: #fff; font-size: 11px; cursor: pointer; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .ft-ctrl span { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.22); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 24px; } .ft-ctrl i { font-style: normal; } .ft-ctrl.on span { background: #fff; } .ft-end span { background: #ff3b30; } /* mouvement léger "live" + faux bug caméra */ .ft-photo { animation: ftkb 16s ease-in-out infinite alternate; will-change: transform; } @keyframes ftkb { from { transform: scale(1.1); } to { transform: scale(1.18) translate(-1.5%, -1%); } } .ft-photo.blur { filter: blur(26px) brightness(.68) saturate(1.1); } /* écran "caméra coupée" : avatar + prénom + onde sonore animée */ .ft-co { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 0 30px; text-align: center; } .ft-avatar { width: 122px; height: 122px; border-radius: 50%; background: #2a1822 center/cover no-repeat; box-shadow: 0 8px 32px rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; } .ft-avatar.mono { font-family: "Playfair Display", serif; font-size: 50px; color: #e9c98a; background: linear-gradient(160deg, #3a2030, #190d16); } .ft-co-name { font-size: 30px; font-weight: 800; text-shadow: 0 2px 14px rgba(0,0,0,.5); } .ft-co-sub { font-size: 14px; color: rgba(255,255,255,.72); max-width: 260px; line-height: 1.4; } .ft-wave { display: flex; align-items: center; gap: 4px; height: 40px; margin-top: 8px; } .ft-wave i { width: 4px; height: 8px; border-radius: 4px; background: var(--accent); animation: ftwave 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -0.083s); } @keyframes ftwave { 0%,100% { height: 7px; opacity: .55; } 50% { height: 34px; opacity: 1; } } /* webcam du visiteur dans la vignette */ .ft-self.live { background: #000; } .ft-self video { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transform: scaleX(-1); } /* liste des voix dans l'éditeur */ .ed-greetlist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .ed-greetrow { display: flex; align-items: center; gap: 8px; } .ed-greetname { font-size: 12px; opacity: .8; min-width: 56px; } .ed-greetplay { flex: 1; text-align: left; font-size: 12px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(var(--surf-rgb), .4); color: var(--text); cursor: pointer; } .ed-greetdel { width: 30px; height: 30px; border-radius: 8px; border: none; background: rgba(255,60,80,.2); color: #ff6a7e; font-size: 14px; cursor: pointer; }