.app-root{ min-height:100vh; display:flex; flex-direction:column; } .main-shell{ flex: 1 0 auto; display:block; padding:0; } .map-shell{ position:relative; width:100%; height:auto; overflow:visible; border:none; background:transparent; } .seo-section { padding: 0 20px 36px; } .seo-card { max-width: 980px; margin: 0 auto; padding: 26px 28px; border-radius: 18px; border: 1px solid rgba(59, 130, 246, 0.4); background: rgba(4, 12, 32, 0.7); box-shadow: 0 18px 38px rgba(2, 6, 23, 0.35); } .seo-kicker { text-transform: uppercase; font-size: 12px; letter-spacing: 0.22em; color: rgba(148, 163, 184, 0.9); font-weight: 600; } .seo-card h2 { margin: 10px 0 8px; font-size: 24px; } .seo-card p { margin: 0 0 16px; color: rgba(226, 232, 240, 0.9); line-height: 1.6; } .seo-cta { border: none; border-radius: 999px; padding: 10px 18px; font-weight: 600; background: #38bdf8; color: #0f172a; cursor: pointer; } .sw-footer { border-top: 1px solid rgba(59, 130, 246, 0.25); background: rgba(2, 8, 23, 0.9); padding: 24px 16px 36px; } .sw-footer-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: center; } .sw-footer-brand { font-weight: 700; letter-spacing: 0.18em; font-size: 13px; color: rgba(226, 232, 240, 0.85); } .sw-footer-nav { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .sw-footer-nav a { color: rgba(226, 232, 240, 0.9); text-decoration: none; font-weight: 500; font-size: 14px; } .sw-footer-nav a:hover { color: #38bdf8; } /* Chat styles moved to ChatContainer.css */ .contact-avatar { width: 24px; height: 24px; border-radius: 50%; background: #38bdf8; color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; } /* Bulles de chats actifs flottantes à côté du bouton */ .active-chats-bubbles { position: fixed; bottom: 16px; right: 140px; /* décalage pour être à côté du bouton Contacts */ display: flex; gap: 6px; z-index: 51; } .chat-bubble { padding: 4px 10px; background: rgba(30, 41, 59, 0.8); border-radius: 999px; color: #e5e7eb; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); backdrop-filter: blur(10px); } .chat-avatar { width: 22px; height: 22px; border-radius: 50%; background: #38bdf8; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; } .chat-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bubble-remove { background: red; border: none; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 12px; cursor: pointer; } /* Espace pour les bulles */ .below-stage { padding-bottom: 70px; } /* ───────────────────────────────────────────────────────────────────────────── World Navigation & Containers ───────────────────────────────────────────────────────────────────────────── */ .world-nav { position: sticky; top: 52px; z-index: 900; display: flex; justify-content: center; gap: 8px; padding: 8px 16px; background: rgba(2, 8, 23, 0.95); backdrop-filter: blur(20px); } .world-nav-btn { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .world-nav-btn i { font-size: 14px; } .world-nav-btn:hover { background: rgba(255, 255, 255, 0.1); color: white; border-color: rgba(255, 255, 255, 0.2); } .world-nav-btn.is-active { background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(6, 182, 212, 0.3)); border-color: rgba(59, 130, 246, 0.5); color: white; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25); } .world-nav-btn.is-active i { color: #38bdf8; } /* World containers */ .world-container { width: 100%; } .world-fullscreen { min-height: calc(100vh - 110px); } /* World placeholder */ .world-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; background: linear-gradient(180deg, #0a1628 0%, #0d2847 100%); } .world-placeholder-content { text-align: center; } .world-placeholder-title { font-size: 24px; font-weight: 700; color: white; margin-bottom: 8px; } .world-placeholder-subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.6); } /* Responsive */ @media (max-width: 640px) { .world-nav { gap: 6px; padding: 8px 12px; } .world-nav-btn { padding: 8px 14px; font-size: 12px; } .world-nav-btn span { display: none; } .world-nav-btn i { font-size: 16px; } }