/* ========================================================================== adresse-autocomplete.css — menu déroulant du composant d'autocomplétion d'adresse (adresse-autocomplete.js). Chargé dans base.html (artisan) ET plateforme/_layout.html (B2C). Le menu est appended sur en position:fixed (overlay indépendant du layout du parent). Look neutre + theme-aware (clair/sombre) cohérent avec la DA « Bleu de Prusse » (accent #134B63), autonome des deux systèmes de tokens (fonctionne identiquement côté VoxNote artisan et côté plateforme B2C). ZÉRO emoji : l'icône de chaque option est un SVG lucide (map-pin) dans le JS. ========================================================================== */ .aa-adr-menu { position: fixed; z-index: 9999; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 288px; overflow-y: auto; background: #ffffff; color: #0E2A36; border: 1px solid rgba(14, 42, 54, 0.16); border-radius: 12px; box-shadow: 0 12px 32px rgba(14, 42, 54, 0.18); -webkit-overflow-scrolling: touch; } .aa-adr-menu[hidden] { display: none; } /* Indicateur de chargement : overlay 16px sur le bord droit du champ. Décoratif (pointer-events:none) : ne gêne jamais la frappe / le focus. */ .aa-adr-spinner { position: fixed; z-index: 9998; width: 16px; height: 16px; line-height: 0; pointer-events: none; color: #134B63; } .aa-adr-spinner[hidden] { display: none; } .aa-adr-spinner .aa-adr-spin-svg { display: block; animation: aa-adr-spin 0.7s linear infinite; } @keyframes aa-adr-spin { to { transform: rotate(360deg); } } /* Accessibilité : pas d'animation de rotation → pulsation d'opacité douce. */ @media (prefers-reduced-motion: reduce) { .aa-adr-spinner .aa-adr-spin-svg { animation: aa-adr-pulse 1.2s ease-in-out infinite; } @keyframes aa-adr-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } } .aa-adr-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1.3; color: inherit; } .aa-adr-option .aa-adr-pin { flex: 0 0 auto; color: #134B63; opacity: 0.75; } .aa-adr-option .aa-adr-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aa-adr-option.is-active, .aa-adr-option:hover { background: rgba(19, 75, 99, 0.12); } /* --- Thème sombre (les deux apps posent data-theme sur ) ------------ */ @media (prefers-color-scheme: dark) { .aa-adr-menu { background: #07171E; color: #EFF4F6; border-color: rgba(239, 244, 246, 0.18); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } .aa-adr-option .aa-adr-pin { color: #4FA3C0; } .aa-adr-spinner { color: #4FA3C0; } .aa-adr-option.is-active, .aa-adr-option:hover { background: rgba(79, 163, 192, 0.2); } } html[data-theme="dark"] .aa-adr-menu { background: #07171E; color: #EFF4F6; border-color: rgba(239, 244, 246, 0.18); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .aa-adr-option .aa-adr-pin { color: #4FA3C0; } html[data-theme="dark"] .aa-adr-spinner { color: #4FA3C0; } html[data-theme="dark"] .aa-adr-option.is-active, html[data-theme="dark"] .aa-adr-option:hover { background: rgba(79, 163, 192, 0.2); } html[data-theme="light"] .aa-adr-menu { background: #ffffff; color: #0E2A36; border-color: rgba(14, 42, 54, 0.16); box-shadow: 0 12px 32px rgba(14, 42, 54, 0.18); } html[data-theme="light"] .aa-adr-option .aa-adr-pin { color: #134B63; } html[data-theme="light"] .aa-adr-spinner { color: #134B63; } html[data-theme="light"] .aa-adr-option.is-active, html[data-theme="light"] .aa-adr-option:hover { background: rgba(19, 75, 99, 0.12); }