/** * Styles pour le bouton d'installation PWA Permis Online * Design: 100% FIDÈLE au bouton quiz nitro * @version 3.3.4 - Système CSS critique automatique */ /* Import Google Fonts Inter */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;800;900&display=swap'); /* ======================================================================== CSS CRITIQUE - AUTOMATIQUEMENT chargé inline pour éviter FOUC Tout ce qui est entre START et END sera extrait et injecté dans MODIFIE ICI et ça se synchronise automatiquement - ZÉRO duplication ! ======================================================================== */ /* CRITICAL CSS START */ /* Bouton principal - évite FOUC */ body #pwa-install-button, html body #pwa-install-button { background-image: linear-gradient(168deg, rgb(0 0 0 / 98%), #0e1c5b) !important; border-bottom: 6px solid rgb(42 79 156) !important; border-radius: 24px !important; box-shadow: none !important; } /* Titre - évite FOUC */ button#pwa-install-button .pwa-install-title, body button#pwa-install-button .pwa-install-title, html body button#pwa-install-button .pwa-install-title, #pwa-install-container #pwa-install-button .pwa-install-title, body #pwa-install-container #pwa-install-button .pwa-install-title, html body #pwa-install-container #pwa-install-button .pwa-install-title { background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Sous-titre - évite FOUC */ button#pwa-install-button .pwa-install-subtitle, body button#pwa-install-button .pwa-install-subtitle, html body button#pwa-install-button .pwa-install-subtitle { color: rgba(148, 163, 184, 0.9) !important; } /* Badge - évite FOUC */ .pwa-badge, body .pwa-badge, html body .pwa-badge { display: inline-block !important; background: #ffffff !important; } /* CRITICAL CSS END */ /* ======================================================================== Container ======================================================================== */ body #pwa-install-container, html body #pwa-install-container { position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 999999 !important; display: none; animation: slideInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; opacity: 1 !important; transform-style: preserve-3d !important; will-change: transform !important; cursor: pointer !important; } body #pwa-install-container.pwa-show, html body #pwa-install-container.pwa-show { display: inline-block !important; position: fixed !important; } body #pwa-install-container.pwa-hidden-by-footer, html body #pwa-install-container.pwa-hidden-by-footer { opacity: 0 !important; pointer-events: none !important; } @keyframes slideInUp { from { opacity: 0; transform: translateY(60px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } body #pwa-install-container:hover, html body #pwa-install-container:hover { transform: translateY(-3px) !important; } /* ======================================================================== Bouton principal - 100% FIDÈLE au fichier quiz ======================================================================== */ body #pwa-install-button, html body #pwa-install-button { position: relative !important; /* LARGEUR RESPONSIVE - ultra mobile-friendly */ width: clamp(280px, 95vw, 400px) !important; min-width: 280px !important; max-width: 400px !important; height: 80px !important; /* Dégradé EXACTEMENT comme l'exemple */ background-image: linear-gradient(168deg, rgb(0 0 0 / 98%), #0e1c5b) !important; border: none !important; border-bottom: 6px solid rgb(42 79 156) !important; border-radius: 24px !important; cursor: pointer !important; display: flex !important; align-items: center !important; padding: 0 28px 0 35px !important; gap: 20px !important; overflow: hidden !important; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* BOX-SHADOW supprimé comme dans référence (lignes 1487-1499) */ box-shadow: none !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; /* OUTLINE NONE - vire la bordure bleue au clic */ outline: none !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; transform-style: preserve-3d !important; user-select: none !important; -webkit-user-select: none !important; } /* Effet de verre - comme lignes 578-592 */ body #pwa-install-button::before, html body #pwa-install-button::before { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 24px !important; background: linear-gradient( 115deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.02) 100% ) !important; pointer-events: none !important; z-index: 1 !important; } /* Ondes d'énergie - comme lignes 595-628 */ body #pwa-install-button::after, html body #pwa-install-button::after { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 24px !important; overflow: hidden !important; pointer-events: none !important; z-index: 0 !important; background: linear-gradient( 90deg, transparent, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1), transparent ) !important; animation: waveFlow 6s ease-in-out infinite !important; opacity: 0.5 !important; } @keyframes waveFlow { 0% { transform: translateX(-100%) skewX(-10deg); opacity: 0; } 20% { opacity: 0.5; } 80% { opacity: 0.5; } 100% { transform: translateX(100%) skewX(-10deg); opacity: 0; } } /* Hover - ondes accélérées comme lignes 1037-1046 */ body #pwa-install-button:hover::after, html body #pwa-install-button:hover::after { animation-duration: 2s !important; background: linear-gradient( 90deg, transparent, rgba(239, 68, 68, 0.15), rgba(251, 191, 36, 0.15), transparent ) !important; } /* Hover - comme lignes 855-867 MAIS sans box-shadow (lignes 1496-1499) */ body #pwa-install-button:hover, html body #pwa-install-button:hover { transform: scale(1.02) translateZ(10px) !important; border-bottom-color: rgba(37, 99, 235, 0.9) !important; box-shadow: none !important; } /* Active - comme ligne 1049 */ body #pwa-install-button:active, html body #pwa-install-button:active { transform: translateY(2px) scale(0.98) !important; border-bottom: 4px solid rgb(42 79 156) !important; transition: transform 0.1s ease !important; } /* ======================================================================== Section gauche - Loader avec halo ======================================================================== */ .pwa-install-left, body .pwa-install-left, html body .pwa-install-left { position: relative !important; width: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; pointer-events: none !important; z-index: 2 !important; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) drop-shadow(-1px -1px 2px rgba(255, 255, 255, 0.05)) !important; } /* Halo lumineux - comme lignes 646-656 */ .pwa-install-left::after, body .pwa-install-left::after, html body .pwa-install-left::after { content: '' !important; position: absolute !important; inset: -8px !important; background: radial-gradient( circle, rgba(59, 130, 246, 0.3), transparent 70% ) !important; border-radius: 50% !important; filter: blur(15px) !important; animation: glowPulse 3s ease-in-out infinite !important; } @keyframes glowPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } /* Loader SVG - comme lignes 658-664 */ #pwa-install-button .pwa-install-icon, body #pwa-install-button .pwa-install-icon, html body #pwa-install-button .pwa-install-icon { width: 34px !important; height: 34px !important; position: relative !important; color: rgba(255, 255, 255, 0.85) !important; animation: spinLoader 2s linear infinite !important; filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6)) !important; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } @keyframes spinLoader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Icône Font Awesome power-off duotone GRANDE sans loader */ .pwa-install-left i, body .pwa-install-left i, html body .pwa-install-left i { font-size: 32px !important; z-index: 3 !important; --fa-primary-color: rgba(255, 255, 255, 0.95) !important; --fa-secondary-color: rgba(96, 165, 250, 0.8) !important; --fa-primary-opacity: 1 !important; --fa-secondary-opacity: 1 !important; filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.9)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) !important; color: #ffffff !important; transition: all 0.3s ease !important; } /* Hover sur l'icône power-off */ body #pwa-install-button:hover .pwa-install-left i, html body #pwa-install-button:hover .pwa-install-left i { transform: scale(1.15) !important; filter: drop-shadow(0 0 20px rgba(59, 130, 246, 1)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8)) !important; } /* Hover - accélère rotation comme lignes 873-876 */ body #pwa-install-button:hover .pwa-install-icon, html body #pwa-install-button:hover .pwa-install-icon { transform: rotate(360deg) scale(1.1) !important; filter: drop-shadow(0 0 20px rgba(59, 130, 246, 1)) !important; } body #pwa-install-button:hover .pwa-install-left::after, html body #pwa-install-button:hover .pwa-install-left::after { transform: scale(1.5) !important; background: radial-gradient( circle, rgba(59, 130, 246, 0.5), transparent 60% ) !important; } /* ======================================================================== Section centrale - Texte - comme lignes 667-677 et 810-852 ======================================================================== */ .pwa-install-center, body .pwa-install-center, html body .pwa-install-center { display: flex !important; flex-direction: column !important; gap: 8px !important; flex: 1 !important; align-items: center !important; pointer-events: none !important; z-index: 2 !important; position: relative !important; } /* Titre - comme lignes 810-825 */ button#pwa-install-button .pwa-install-title, body button#pwa-install-button .pwa-install-title, html body button#pwa-install-button .pwa-install-title, #pwa-install-container #pwa-install-button .pwa-install-title, body #pwa-install-container #pwa-install-button .pwa-install-title, html body #pwa-install-container #pwa-install-button .pwa-install-title { font-size: 20px !important; font-weight: 800 !important; background: linear-gradient( 135deg, #ffffff 0%, #e2e8f0 100% ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; letter-spacing: -0.02em !important; transition: all 0.4s ease !important; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important; position: relative !important; margin: 0 !important; padding: 0 !important; } /* Hover titre - comme lignes 887-897 */ body #pwa-install-button:hover .pwa-install-title, html body #pwa-install-button:hover .pwa-install-title { background: linear-gradient( 135deg, #3b82f6 0%, #9333ea 100% ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; transform: scale(1.05) !important; } /* Sous-titre - comme lignes 827-852 */ button#pwa-install-button .pwa-install-subtitle, body button#pwa-install-button .pwa-install-subtitle, html body button#pwa-install-button .pwa-install-subtitle, #pwa-install-container #pwa-install-button .pwa-install-subtitle, body #pwa-install-container #pwa-install-button .pwa-install-subtitle, html body #pwa-install-container #pwa-install-button .pwa-install-subtitle { font-size: 13px !important; font-weight: 600 !important; color: rgba(148, 163, 184, 0.9) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; transition: all 0.4s ease !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; flex-wrap: nowrap !important; margin: 0 !important; padding: 0 !important; } /* Barres décoratives - comme lignes 841-852 */ button#pwa-install-button .pwa-install-subtitle::before, button#pwa-install-button .pwa-install-subtitle::after, body button#pwa-install-button .pwa-install-subtitle::before, body button#pwa-install-button .pwa-install-subtitle::after { content: '' !important; width: 20px !important; height: 1px !important; background: linear-gradient( 90deg, transparent, rgba(59, 130, 246, 0.5), transparent ) !important; } /* Hover sous-titre - comme lignes 899-901 */ body #pwa-install-button:hover .pwa-install-subtitle, html body #pwa-install-button:hover .pwa-install-subtitle { color: rgba(226, 232, 240, 1) !important; } /* ======================================================================== Section droite - Badge GO! ======================================================================== */ .pwa-install-right, body .pwa-install-right, html body .pwa-install-right { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; z-index: 2 !important; } /* Badge GO! - SIMPLE avec fond blanc et spans colorés - SANS ANIMATION */ .pwa-badge, body .pwa-badge, html body .pwa-badge, #pwa-install-button .pwa-badge, body #pwa-install-button .pwa-badge, html body #pwa-install-button .pwa-badge { position: relative !important; padding: 10px 18px !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 2px rgba(0, 0, 0, 0.1) !important; font-size: 20px !important; font-weight: 900 !important; letter-spacing: 0.5px !important; line-height: 1 !important; text-align: center !important; display: inline-block !important; } /* Spans colorés dans le badge (G O !) */ .pwa-badge span, body .pwa-badge span, html body .pwa-badge span { font-weight: 900 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; } /* Plus besoin de ::before, le badge a directement le fond blanc */ @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ======================================================================== Bouton de fermeture ======================================================================== */ .pwa-close-button, body .pwa-close-button, html body .pwa-close-button { position: absolute !important; top: -12px !important; left: -12px !important; width: 32px !important; height: 32px !important; background: rgba(0, 0, 0, 0.85) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-radius: 50% !important; border: 3px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; opacity: 0 !important; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important; z-index: 20 !important; padding: 0 !important; box-shadow: none !important; outline: none !important; } .pwa-close-button:hover, body .pwa-close-button:hover, html body .pwa-close-button:hover { background: rgba(220, 38, 38, 0.95) !important; transform: scale(1.15) !important; border-color: rgba(255, 255, 255, 0.6) !important; } #pwa-install-container:hover .pwa-close-button, body #pwa-install-container:hover .pwa-close-button, html body #pwa-install-container:hover .pwa-close-button { opacity: 1 !important; } /* ======================================================================== Responsive - COMME LIGNES 1055-1136 ======================================================================== */ @media (max-width: 768px) { body #pwa-install-container { bottom: 12px !important; right: 12px !important; left: 12px !important; } body #pwa-install-button { /* Ultra responsive pour tablettes */ width: calc(100% - 24px) !important; min-width: auto !important; max-width: 420px !important; height: 72px !important; padding: 0 20px 0 25px !important; margin: 0 auto !important; } button#pwa-install-button .pwa-install-title, body button#pwa-install-button .pwa-install-title, html body button#pwa-install-button .pwa-install-title { font-size: 18px !important; } button#pwa-install-button .pwa-install-subtitle, body button#pwa-install-button .pwa-install-subtitle, html body button#pwa-install-button .pwa-install-subtitle { font-size: 12px !important; } .pwa-badge, body .pwa-badge, html body .pwa-badge { font-size: 18px !important; padding: 8px 14px !important; } #pwa-install-button .pwa-install-icon, body #pwa-install-button .pwa-install-icon, html body #pwa-install-button .pwa-install-icon { width: 28px !important; height: 28px !important; } .pwa-install-left, body .pwa-install-left, html body .pwa-install-left { width: 40px !important; height: 40px !important; } .pwa-install-left::before, body .pwa-install-left::before, html body .pwa-install-left::before { font-size: 12px !important; } .pwa-install-left::after, body .pwa-install-left::after, html body .pwa-install-left::after { inset: -6px !important; } } /* Mobile très petit - COMME LIGNES 1138-1255 */ @media (max-width: 480px) { body #pwa-install-container { bottom: 8px !important; right: 8px !important; left: 8px !important; } body #pwa-install-button { width: calc(100% - 16px) !important; min-width: auto !important; max-width: 100% !important; height: 64px !important; gap: 10px !important; padding: 0 12px 0 16px !important; border-radius: 20px !important; margin: 0 auto !important; } button#pwa-install-button .pwa-install-title, body button#pwa-install-button .pwa-install-title, html body button#pwa-install-button .pwa-install-title { font-size: 15px !important; } button#pwa-install-button .pwa-install-subtitle, body button#pwa-install-button .pwa-install-subtitle, html body button#pwa-install-button .pwa-install-subtitle { font-size: 10px !important; } button#pwa-install-button .pwa-install-subtitle::before, button#pwa-install-button .pwa-install-subtitle::after { width: 12px !important; } .pwa-badge, body .pwa-badge, html body .pwa-badge { font-size: 16px !important; padding: 7px 12px !important; } #pwa-install-button .pwa-install-icon, body #pwa-install-button .pwa-install-icon, html body #pwa-install-button .pwa-install-icon { width: 24px !important; height: 24px !important; } .pwa-install-left, body .pwa-install-left, html body .pwa-install-left { width: 32px !important; height: 32px !important; } .pwa-install-left::before, body .pwa-install-left::before, html body .pwa-install-left::before { font-size: 10px !important; } .pwa-install-left::after, body .pwa-install-left::after, html body .pwa-install-left::after { inset: -5px !important; } } /* ======================================================================== Animations pour toasts ======================================================================== */ @keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* ======================================================================== FORCE styles en mode sombre ======================================================================== */ @media (prefers-color-scheme: dark) { body #pwa-install-button, html body #pwa-install-button { background-image: linear-gradient(168deg, rgb(0 0 0 / 98%), #0e1c5b) !important; } button#pwa-install-button .pwa-install-title, body button#pwa-install-button .pwa-install-title, html body button#pwa-install-button .pwa-install-title, #pwa-install-container #pwa-install-button .pwa-install-title, body #pwa-install-container #pwa-install-button .pwa-install-title, html body #pwa-install-container #pwa-install-button .pwa-install-title { background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } button#pwa-install-button .pwa-install-subtitle, body button#pwa-install-button .pwa-install-subtitle, html body button#pwa-install-button .pwa-install-subtitle { color: rgba(148, 163, 184, 0.9) !important; } }