/* ============================================================================ RESPICARE — Patch CSS : agrandissement du chatbot pour PC + bouton loupe ============================================================================ VERSION : v1.0.0 Build : 2026-05-19 / r001 Auteur : © 2026 Armand Vereecke — Respicare Usage : - Inclure dans de index.html APRÈS le CSS principal : - Ou copier ces règles dans le fichier style.css principal But (Ajustement C demandé par Armand le 19/05/2026) : - PC (>1024px) : chatbot plus large (480-520px) et plus haut (70-75% écran) - Tablette : 400-450px de large - Mobile : conserver le plein écran actuel - Police interne : 15-16px (au lieu de 14px) pour confort de lecture - Bouton loupe (🔍+) cliquable pour agrandir davantage (utile seniors/malvoyants) ============================================================================ */ /* ============================================================ PC (écrans larges > 1024px) ============================================================ */ @media (min-width: 1025px) { #chatWindow { width: 500px !important; max-width: 500px !important; height: 75vh !important; max-height: 800px !important; min-height: 600px !important; font-size: 15px !important; } #chatWindow .chat-message, #chatWindow .bubble { font-size: 15px !important; line-height: 1.5 !important; } #chatWindow .chat-option, #chatWindow button.chat-option { min-height: 42px !important; font-size: 14.5px !important; padding: 10px 14px !important; } #chatWindow input, #chatWindow textarea { font-size: 15px !important; padding: 10px 12px !important; } } /* ============================================================ Tablette (768px - 1024px) ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { #chatWindow { width: 430px !important; max-width: 430px !important; height: 70vh !important; font-size: 14.5px !important; } } /* ============================================================ Mode "agrandi" — déclenché par le bouton loupe La classe .chat-enlarged est ajoutée par JS au clic sur 🔍+ ============================================================ */ @media (min-width: 768px) { #chatWindow.chat-enlarged { width: 680px !important; max-width: 680px !important; height: 85vh !important; max-height: 900px !important; font-size: 17px !important; } #chatWindow.chat-enlarged .chat-message, #chatWindow.chat-enlarged .bubble { font-size: 17px !important; line-height: 1.6 !important; } #chatWindow.chat-enlarged .chat-option, #chatWindow.chat-enlarged button.chat-option { min-height: 48px !important; font-size: 16px !important; padding: 12px 16px !important; } #chatWindow.chat-enlarged input, #chatWindow.chat-enlarged textarea { font-size: 17px !important; padding: 12px 14px !important; } } /* ============================================================ Bouton loupe (🔍+) injecté par chat.js dans l'en-tête ============================================================ */ .chat-zoom-button { background: rgba(255, 255, 255, 0.2); border: none; color: white; cursor: pointer; padding: 6px 10px; border-radius: 6px; margin-right: 6px; font-size: 14px; transition: background 0.2s, transform 0.2s; display: inline-flex; align-items: center; gap: 4px; } .chat-zoom-button:hover { background: rgba(255, 255, 255, 0.35); transform: scale(1.05); } .chat-zoom-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Sur mobile, on cache le bouton loupe (pas de sens — plein écran déjà) */ @media (max-width: 767px) { .chat-zoom-button { display: none !important; } } /* ============================================================ Tag de version (.chat-version-tag) injecté par chat.js Style fallback au cas où le style inline ne s'applique pas ============================================================ */ .chat-version-tag { font-size: 11px; color: rgba(255, 255, 255, 0.7); font-weight: normal; margin-left: 8px; letter-spacing: 0.3px; }