/** * LOCLIGHT — le menu déroulant de la recherche (views/js/search.js). * ------------------------------------------------------------------ * Remplace le rendu jQuery UI (.ui-autocomplete.searchbar-autocomplete), * qui était positionné par une dizaine de `top`/`left` en dur, un par * palier de largeur, avec des !important partout. Ici le menu est * posé dans le , en position FIXE, et placé sous le champ par * search.js — le widget du header est une icône de 40 px en overflow:hidden, * qui découpait tout menu posé à l'intérieur. * * Même langage que le reste du site : carte blanche, coins 14 px, filet * #f0f0ee, jaune #ffc600 pour l'accent, vert #1f9d55 pour ce qui est * disponible. */ .ll-sr { display: none; /* fixe et dans le body : le widget du header est en overflow:hidden */ position: fixed; top: 0; left: 0; z-index: 100000; width: 420px; max-width: calc(100vw - 16px); max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; background: #fff; border: 1px solid #f0f0ee; border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .16); padding: 6px; font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; text-align: left; } .ll-sr.ll-sr-on { display: block; } .ll-sr-i { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: #1a1a1a; text-decoration: none !important; cursor: pointer; } .ll-sr-i:hover, .ll-sr-i.ll-sr-sel { background: #faf9f5; } .ll-sr-i + .ll-sr-i { border-top: 1px solid #f6f6f3; } .ll-sr-img { flex: 0 0 44px; width: 44px !important; height: 44px !important; border-radius: 8px; border: 1px solid #eeeeea; background: #fff; object-fit: cover; display: block; max-width: none; } .ll-sr-noimg { background: #f4f4f1; border-style: dashed; } .ll-sr-txt { flex: 1 1 auto; min-width: 0; } .ll-sr-n { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #1a1a1a; /* deux lignes au maximum : au-delà, le menu devient une page */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ce que le client vient de taper, à sa place exacte dans le nom */ .ll-sr-n b { font-weight: 800; color: #000; background: rgba(255, 198, 0, .28); border-radius: 3px; } .ll-sr-meta { display: none; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; } .ll-sr-meta.ll-sr-ok { display: inline-block; color: #1f9d55; } .ll-sr-meta.ll-sr-ko { display: inline-block; color: #b02a2a; } .ll-sr-p { flex: 0 0 auto; text-align: right; font-size: 13px; font-weight: 800; color: #1a1a1a; white-space: nowrap; line-height: 1.2; } .ll-sr-p small { display: block; font-size: 9.5px; font-weight: 600; color: #8a8a82; text-transform: none; letter-spacing: 0; } .ll-sr-vide { padding: 14px 10px; font-size: 12.5px; font-weight: 600; color: #8a8a82; } .ll-sr-vide b { color: #1a1a1a; } .ll-sr-tout { display: block; width: 100% !important; height: auto !important; min-width: 0; margin-top: 4px; padding: 9px 10px; border: 0; border-top: 1px solid #f0f0ee; border-radius: 0 0 10px 10px; background: #fff; color: #6b6b63; font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; cursor: pointer; } .ll-sr-tout:hover { background: #ffc600; color: #1a1a1a; } /* Sous 1200 px — téléphone ET iPad — le header remplace la loupe par une pilule déployée sur la rangée, et search.js cale le menu dessus : mêmes bords, 6 px en dessous. Le menu reprend le filet jaune et l'ombre de la barre pour ne faire qu'un seul bloc avec elle. Sa largeur et sa position viennent du JS, jamais d'ici. */ @media (max-width: 1199px) { .ll-sr { max-width: none; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); border: 1px solid rgba(255, 198, 0, .55); border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .35); padding: 5px; } .ll-sr-tout { border-radius: 0 0 12px 12px; } } /* iPad : le menu fait toute la rangée, autant en profiter — lignes et vignettes un cran plus grandes. */ @media (min-width: 768px) and (max-width: 1199px) { .ll-sr-i { padding: 9px 10px; gap: 12px; } .ll-sr-img { flex: 0 0 48px; width: 48px !important; height: 48px !important; } .ll-sr-n { font-size: 14px; } .ll-sr-p { font-size: 14px; } .ll-sr-meta { font-size: 10.5px; } .ll-sr-tout { font-size: 12px; padding: 11px 10px; } } /* Téléphone : lignes resserrées, l'écran est étroit. */ @media (max-width: 767px) { .ll-sr-i { padding: 8px; gap: 11px; } .ll-sr-n { font-size: 12px; } .ll-sr-p { font-size: 12.5px; } }