.main-slider-three__carousel .owl-nav { display: none !important; } /* ----- Reset minimal ----- */ #gmw-wa-widget, #gmw-wa-widget * { box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* ----- Bouton flottant ----- */ #gmw-wa-widget .wa-fab{ position: fixed; right: 200px; bottom: 20px; width: 60px; height: 60px; border: 0; border-radius: 50%; background:#25D366; color:#fff; cursor:pointer; z-index: 2147483000; display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 24px rgba(0,0,0,.2); animation: wa-pulse 1.6s infinite; } #gmw-wa-widget .wa-fab svg{ width:32px; height:32px; fill: currentColor; } #gmw-wa-widget .wa-badge{ position:absolute; top:-2px; right:-2px; width:14px; height:14px; background:#e53935; border:2px solid #fff; border-radius:50%; } @keyframes wa-pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} } /* ----- Fenêtre de chat ----- */ #gmw-wa-widget .wa-window{ position: fixed; right: 200px; bottom: 90px; width: 340px; max-width: calc(100vw - 40px); background:#fff; border-radius: 14px; overflow:hidden; box-shadow: 0 16px 40px rgba(0,0,0,.18); transform: translateY(10px); opacity:0; pointer-events:none; transition: .25s ease; z-index:2147483000; } #gmw-wa-widget .wa-window.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; } /* Header style WhatsApp */ #gmw-wa-widget .wa-header{ background:#128C7E; color:#fff; padding:10px; display:flex; align-items:center; gap:10px; } #gmw-wa-widget .wa-avatar-wrap{ position:relative; } #gmw-wa-widget .wa-avatar{ width:38px; height:38px; border-radius:50%; display:block; object-fit:cover; border:2px solid rgba(255,255,255,.2); } #gmw-wa-widget .wa-online-dot{ position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; background:#4CAF50; border:2px solid #128C7E; } #gmw-wa-widget .wa-user{ line-height:1.1; } #gmw-wa-widget .wa-name{ font-weight:600; font-size:14px; } #gmw-wa-widget .wa-status{ font-size:12px; opacity:.9; } #gmw-wa-widget .wa-close{ margin-left:auto; background:transparent; color:#fff; border:0; font-size:24px; line-height:1; cursor:pointer; opacity:.8; } #gmw-wa-widget .wa-close:hover{ opacity:1; } /* Corps de conversation */ #gmw-wa-widget .wa-body{ background: url("wp_132.jpg") repeat; background-size: cover; /* ou contain si tu veux sans crop */ padding: 12px 12px 8px; min-height: 180px; max-height: 50vh; overflow:auto; } #gmw-wa-widget .wa-time{ font-size:11px; color:#667781; text-align:center; margin:4px 0 10px; user-select:none; } #gmw-wa-widget .wa-msg{ display:flex; align-items:flex-end; margin: 6px 0; } #gmw-wa-widget .wa-msg .wa-bubble{ background:#fff; padding:8px 10px; border-radius:8px 8px 8px 0; max-width:80%; box-shadow:0 1px 0 rgba(0,0,0,.05); position:relative; font-size:14px; color:#111B21; } #gmw-wa-widget .wa-msg .wa-meta{ font-size:11px; color:#8696a0; margin-left:6px; align-self:flex-end; white-space:nowrap; } /* Bulle "typing" */ #gmw-wa-widget .wa-typing .wa-bubble{ background:#fff; } #gmw-wa-widget .wa-dots{ display:inline-flex; gap:4px; } #gmw-wa-widget .wa-dots span{ width:6px; height:6px; background:#9AA3A8; border-radius:50%; display:block; animation: wa-blink 1.2s infinite ease-in-out; } #gmw-wa-widget .wa-dots span:nth-child(2){ animation-delay:.2s } #gmw-wa-widget .wa-dots span:nth-child(3){ animation-delay:.4s } @keyframes wa-blink{ 0%,80%,100%{opacity:.2; transform:translateY(0)} 40%{opacity:1; transform:translateY(-2px)} } /* Barre de saisie */ #gmw-wa-widget .wa-inputbar{ display:flex; gap:8px; padding:10px; border-top:1px solid rgba(0,0,0,.06); background:#F0F2F5; } #gmw-wa-widget .wa-inputbar input{ flex:1; min-width:0; border:0; border-radius:18px; padding:10px 14px; font-size:14px; outline:none; background:#fff; } #gmw-wa-widget .wa-inputbar input::placeholder { color: #999; /* couleur du texte placeholder */ opacity: 1; /* important car certains navigateurs réduisent l’opacité */ font-style: none; /* optionnel, si tu veux en italique */ } #gmw-wa-widget .wa-inputbar .wa-send{ width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; background:#25D366; color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; } #gmw-wa-widget .wa-inputbar .wa-send:hover{ filter:brightness(0.95); } /* Accessibilité focus */ #gmw-wa-widget .wa-fab:focus, #gmw-wa-widget .wa-close:focus, #gmw-wa-widget .wa-send:focus, #gmw-wa-widget .wa-inputbar input:focus{ outline: 2px solid #80a9cf; outline-offset: 2px; } #gmw-wa-widget .wa-send img { width: 35px; height: 35px; display: block; filter: brightness(0) invert(1); /* => rend l'icône blanche */ } #gmw-wa-widget { display: none; } #gmw-wa-widget.is-visible { display: block; } /* Sur mobile (moins de 500px de large) → on colle à gauche */ @media (max-width: 500px) { #gmw-wa-widget .wa-fab { right: 200px; /* ou left:20px si tu veux carrément à gauche */ } #gmw-wa-widget .wa-window { left: 20px; /* même alignement que la bulle */ max-width: none; /* pas de limite fixe */ } } /* Bouton flottant */ #gmw-wa-widget .wa-fab { position: fixed; right: 200px; bottom: 20px; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2147483000; box-shadow: 0 8px 24px rgba(0,0,0,.2); overflow: visible; /* important pour voir les ondes */ } /* Ondes uniquement quand le bouton a la classe .is-rippling */ #gmw-wa-widget .wa-fab.is-rippling::before, #gmw-wa-widget .wa-fab.is-rippling::after { content: ""; position: absolute; inset: 0; border: 2px solid #25D366; border-radius: 50%; animation: wa-ripple 2.2s infinite; opacity: 0; pointer-events: none; } #gmw-wa-widget .wa-fab.is-rippling::after { animation-delay: 1.1s; } @keyframes wa-ripple { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(2.5); opacity: 0; } 100% { transform: scale(2.5); opacity: 0; } } /* ----- Fenêtre de chat ----- */ #gmw-wa-widget .wa-window{ bottom: 110px; } #gmw-wa-widget .wa-fab { bottom: 40px; }