/* =================================================================== ASSISTANCE.CSS — Styles du widget d'assistance (préfixe .asst-) Isolement total : tous les sélecteurs sont préfixés .asst- pour ne jamais entrer en conflit avec le CSS du projet hôte. =================================================================== */ /* --- Variables internes (préfixées, pas de :root) --- Déclarées sur les 3 racines du widget : le panneau et l'overlay sont ajoutés dans à côté de .asst-widget, pas dedans — sans ça leurs var(--asst-*) ne résolvent pas (fond transparent, panneau « grisé »). */ .asst-widget, .asst-panel, .asst-overlay { --asst-purple: #5D0FE8; --asst-purple-light: rgba(93, 15, 232, 0.10); --asst-ink: #15101F; --asst-ink2: #5C5670; --asst-ink3: #9A93AD; --asst-bg: #FBFAFF; --asst-surface: #FFFFFF; --asst-line: rgba(21, 16, 31, 0.10); --asst-red: #D6453B; --asst-green: #18A058; --asst-amber: #C9820B; --asst-radius: 14px; --asst-shadow: 0 10px 40px -16px rgba(91, 40, 180, 0.30); --asst-ease: cubic-bezier(0.32, 0.72, 0, 1); --asst-font: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-family: var(--asst-font); font-size: 15px; line-height: 1.5; color: var(--asst-ink); -webkit-font-smoothing: antialiased; } .asst-widget { position: fixed; bottom: 24px; right: 24px; z-index: 99990; } /* 06/08/2026 : sur les pages qui ont le bouton WhatsApp flottant (index, demo), la bulle d'aide recouvrait WhatsApp (mêmes coordonnées, z-index supérieur). Elle s'empile désormais AU-DESSUS de WhatsApp (bottom 18 + 58 ; l'ancien bouton « Besoin d'aide ? » a été fusionné dans le widget le même jour, la pile n'a plus que deux bulles). */ body:has(.wa-float) .asst-widget { bottom: 86px; right: 18px; } @media (max-width: 600px) { body:has(.wa-float) .asst-widget { bottom: 80px; right: 14px; } } /* --- Bouton flottant principal --- */ .asst-fab { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--asst-purple), #2F80ED); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: var(--asst-shadow); transition: transform 0.3s var(--asst-ease), box-shadow 0.3s var(--asst-ease); margin-left: auto; } .asst-fab:hover { transform: scale(1.08); box-shadow: 0 16px 48px -16px rgba(91, 40, 180, 0.44); } .asst-fab:active { transform: scale(0.95); } /* --- Menu contextuel (deux actions) --- */ .asst-menu { display: none; flex-direction: column; gap: 4px; background: var(--asst-surface); border: 1px solid var(--asst-line); border-radius: var(--asst-radius); padding: 6px; box-shadow: var(--asst-shadow); margin-bottom: 10px; min-width: 220px; } .asst-menu.asst-open { display: flex; animation: asstFadeUp 0.25s var(--asst-ease) both; } .asst-menu button { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: none; background: none; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--asst-ink); cursor: pointer; text-align: left; transition: background 0.2s var(--asst-ease); } .asst-menu button:hover { background: var(--asst-purple-light); color: var(--asst-purple); } .asst-menu button svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.6; fill: none; } /* --- Panneau latéral --- */ .asst-panel { display: none; position: fixed; top: 0; right: 0; width: 420px; max-width: 100vw; height: 100vh; height: 100dvh; background: var(--asst-bg); box-shadow: -8px 0 48px -20px rgba(21, 16, 31, 0.28); z-index: 99991; flex-direction: column; animation: asstSlideIn 0.35s var(--asst-ease) both; } .asst-panel.asst-open { display: flex; } .asst-panel-header { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--asst-line); background: var(--asst-surface); } .asst-panel-header h3 { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--asst-ink); } .asst-panel-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--asst-line); background: none; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--asst-ink2); transition: background 0.2s var(--asst-ease); } .asst-panel-close:hover { background: var(--asst-purple-light); color: var(--asst-purple); } .asst-panel-body { flex: 1; overflow-y: auto; padding: 22px; overscroll-behavior: contain; } .asst-panel-body h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--asst-ink); } .asst-panel-body h3 { font-size: 16px; font-weight: 700; margin: 20px 0 8px; color: var(--asst-ink); } .asst-panel-body h3:first-child { margin-top: 0; } .asst-panel-body p, .asst-panel-body li { font-size: 14px; color: var(--asst-ink2); line-height: 1.6; } .asst-panel-body ol { padding-left: 20px; margin: 6px 0 14px; } .asst-panel-body ol li { margin-bottom: 5px; } .asst-panel-body a { color: var(--asst-purple); font-weight: 600; } .asst-emptystate { text-align: center; padding: 32px 16px; color: var(--asst-ink3); } .asst-emptystate svg { width: 40px; height: 40px; stroke: var(--asst-ink3); stroke-width: 1.4; fill: none; margin-bottom: 12px; } .asst-emptystate p { font-size: 14px; margin: 0 0 12px; } .asst-btn-sm { display: inline-block; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--asst-purple); background: var(--asst-purple-light); border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background 0.2s var(--asst-ease); } .asst-btn-sm:hover { background: rgba(93, 15, 232, 0.18); } /* --- Formulaire de signalement --- */ .asst-form-group { margin-bottom: 16px; } .asst-form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--asst-ink); margin-bottom: 5px; } .asst-form-group textarea, .asst-form-group select, .asst-form-group input[type="file"] { width: 100%; border: 1px solid var(--asst-line); border-radius: 10px; padding: 11px 13px; font-family: inherit; font-size: 14px; color: var(--asst-ink); background: var(--asst-surface); resize: vertical; transition: border-color 0.2s var(--asst-ease); } .asst-form-group textarea:focus, .asst-form-group select:focus { outline: none; border-color: var(--asst-purple); } .asst-form-group textarea { min-height: 90px; } .asst-form-group .asst-hint { font-size: 12px; color: var(--asst-ink3); margin-top: 4px; } .asst-submit { width: 100%; background: linear-gradient(135deg, var(--asst-purple), #2F80ED); color: #fff; border: none; border-radius: 12px; padding: 13px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform 0.25s var(--asst-ease), box-shadow 0.25s var(--asst-ease); } .asst-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -12px rgba(91, 40, 180, 0.50); } .asst-submit:active { transform: scale(0.98); } .asst-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .asst-msg { padding: 11px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; margin-bottom: 14px; display: none; } .asst-msg.asst-msg-show { display: block; animation: asstFadeUp 0.3s var(--asst-ease) both; } .asst-msg-success { background: #E6F6ED; color: var(--asst-green); border: 1px solid rgba(24, 160, 88, 0.18); } .asst-msg-error { background: #FBE9E7; color: var(--asst-red); border: 1px solid rgba(214, 69, 59, 0.18); } .asst-msg-info { background: #FBF1DC; color: var(--asst-amber); border: 1px solid rgba(201, 130, 11, 0.18); } /* --- Overlay (fond semi-transparent derrière le panneau) --- */ .asst-overlay { display: none; position: fixed; inset: 0; background: rgba(21, 16, 31, 0.35); z-index: 99990; animation: asstFadeIn 0.3s var(--asst-ease) both; } .asst-overlay.asst-open { display: block; } /* --- Animations --- */ @keyframes asstFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes asstFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes asstSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } /* --- Responsive --- */ @media (max-width: 480px) { .asst-panel { width: 100vw; } .asst-widget { bottom: 16px; right: 16px; } .asst-fab { width: 44px; height: 44px; font-size: 20px; } }