/* ============================================= ELANCI DIGITAL — widgets.css Cookie RGPD + WhatsApp + Google Maps Ajouter dans : ============================================= */ /* ───────────────────────────────────────────── BANDEAU COOKIES RGPD ───────────────────────────────────────────── */ .cookie-banner { position: fixed; bottom: -200px; /* Caché par défaut */ left: 0; right: 0; z-index: 9999; padding: 0 1rem 1rem; transition: bottom 0.4s cubic-bezier(.4,0,.2,1); pointer-events: none; } .cookie-banner.cookie-show { bottom: 0; pointer-events: all; } .cookie-banner.cookie-hide { bottom: -200px; pointer-events: none; } .cookie-inner { background: #1a1a2e; color: #fff; border-radius: 16px 16px 0 0; padding: 1.4rem 1.8rem; display: flex; align-items: center; gap: 1.2rem; max-width: 960px; margin: 0 auto; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); flex-wrap: wrap; } .cookie-icon { font-size: 2rem; flex-shrink: 0; } .cookie-text { flex: 1; min-width: 200px; } .cookie-text strong { display: block; font-size: 1rem; margin-bottom: 0.3rem; color: #fff; } .cookie-text p { font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); margin: 0; line-height: 1.5; } .cookie-text a { color: #00aeef; text-decoration: none; font-weight: 600; } .cookie-text a:hover { text-decoration: underline; } .cookie-actions { display: flex; gap: 0.7rem; flex-shrink: 0; flex-wrap: wrap; } .cookie-btn { padding: 0.6rem 1.4rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600; font-family: 'Poppins', sans-serif; cursor: pointer; border: 2px solid transparent; transition: all 0.25s ease; white-space: nowrap; } .cookie-btn-accept { background: #00aeef; color: #fff; border-color: #00aeef; } .cookie-btn-accept:hover { background: #0099d4; border-color: #0099d4; transform: translateY(-1px); } .cookie-btn-refuse { background: transparent; color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.3); } .cookie-btn-refuse:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.6); transform: translateY(-1px); } /* ───────────────────────────────────────────── BOUTON WHATSAPP FLOTTANT ───────────────────────────────────────────── */ .whatsapp-float { position: fixed; bottom: 30px; left: 30px; z-index: 9000; width: 58px; height: 58px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45); text-decoration: none; opacity: 0; visibility: hidden; transform: scale(0.7); transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease; } .whatsapp-float.whatsapp-visible { opacity: 1; visibility: visible; transform: scale(1); } .whatsapp-float:hover { background: #20b958; transform: scale(1.1); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.55); } /* Anneau pulsant */ .whatsapp-pulse { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: rgba(37, 211, 102, 0.4); animation: waPulse 2.2s ease-out infinite; } @keyframes waPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } } .whatsapp-icon { width: 30px; height: 30px; fill: #fff; position: relative; z-index: 1; } /* Tooltip */ .whatsapp-tooltip { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); background: #1a1a2e; color: #fff; font-size: 0.78rem; font-weight: 600; font-family: 'Poppins', sans-serif; white-space: nowrap; padding: 0.4rem 0.9rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; } .whatsapp-tooltip::before { content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right-color: #1a1a2e; } .whatsapp-float:hover .whatsapp-tooltip { opacity: 1; visibility: visible; } /* ───────────────────────────────────────────── SECTION GOOGLE MAPS (contact.php) ───────────────────────────────────────────── */ .maps-section { padding: 0 0 80px; background: var(--light-gray); } .maps-card { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); position: relative; } .maps-card iframe { display: block; width: 100%; height: 420px; border: none; filter: saturate(0.9); } .maps-info-bar { background: var(--white); padding: 1.2rem 2rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .maps-info-item { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; color: var(--text-color); } .maps-info-item i { color: var(--primary-color); font-size: 1rem; width: 18px; text-align: center; } .maps-info-item a { color: var(--text-color); text-decoration: none; transition: color 0.2s; } .maps-info-item a:hover { color: var(--primary-color); } /* ───────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────── */ @media (max-width: 768px) { .cookie-inner { padding: 1.2rem; gap: 0.8rem; } .cookie-actions { width: 100%; justify-content: stretch; } .cookie-btn { flex: 1; text-align: center; } .whatsapp-float { bottom: 20px; left: 20px; width: 52px; height: 52px; } .whatsapp-tooltip { display: none; /* Masqué sur mobile */ } .maps-card iframe { height: 300px; } .maps-info-bar { padding: 1rem; gap: 1rem; } }