/** * You & Me Paris — autocomplétion enrichie (ticket Odoo #00256). * * Surcharge, depuis le thème enfant, du ps_searchbar.css du module. * Le bloc #search_widget reprend celui du module à l'identique ; les règles * .ui-autocomplete.searchbar-autocomplete ont été retirées : elles habillaient * le widget jQuery UI, que ps_searchbar.js du thème ne monte plus. */ #search_widget { margin-bottom: 0.625rem; overflow: auto; } #search_widget form { position: relative; } #search_widget form i { position: absolute; padding: 0.5rem; } #search_widget form i.clear { right: 15px; display: none; } #search_widget form input { width: 100%; padding: 10px 20px 10px 40px; outline: none; background-color: #f1f1f1; border: none; border-radius: 5px; } @media only screen and (min-width: 768px) { #search_widget { float: right; margin-bottom: 0; } } @media only screen and (min-width: 992px) { #search_widget { min-width: 16.5rem; } } /* ------------------------------------------------------------------ * * Bande de recherche ouverte * * Elle s'affichait par-dessus le header, recouvrant logo et menu. * #header est le seul ancêtre positionné (position:relative, z-index 999) : * on y ancre la bande en `top: 100%`, donc juste EN DESSOUS de lui. * ------------------------------------------------------------------ */ /* Le formulaire repasse en `static` : sans cela l'input se positionnerait par rapport à lui — donc dans le header — au lieu de #header. */ body.ymp-search-open #search_widget form { position: static; } /* Champ et croix partagent une hauteur EXPLICITE (--ymp-bar-h). En laissant chacun se dimensionner sur son padding et sa ligne, les deux boîtes ne tombaient pas d'accord — 50 px contre 36 — et la croix se retrouvait 7 px trop haut. Une hauteur commune + un centrage flex retirent la question : plus rien ne dépend de la métrique de la police d'icônes. */ body.ymp-search-open #search_widget form { --ymp-bar-h: 56px; } body.ymp-search-open #search_widget form input[type="text"] { position: absolute; top: 100%; left: 0; z-index: 2; width: 100%; height: var(--ymp-bar-h); padding: 0 64px 0 24px; font-size: 1rem; line-height: var(--ymp-bar-h); /* Sans cela le texte saisi herite du gris placeholder du theme (#9b9b9b) et la requete tapee par le client est illisible. */ color: #0a0a10; background: #fff; border-radius: 0; box-shadow: 0 6px 18px rgba(0, 83, 118, 0.12); } /* La croix de fermeture, au bout de la bande. */ body.ymp-search-open #search_widget form i.clear { /* !important obligatoire : custom.js du theme pose `display: block` EN LIGNE sur cette icone. Sans cela le conteneur reste un bloc, `align-items` est inerte et le glyphe se cale en haut de la boite de 56 px (mesure : 17 px trop haut). */ display: flex !important; align-items: center; justify-content: center; position: absolute; top: 100%; right: 0; z-index: 3; height: var(--ymp-bar-h); padding: 0 22px; color: #005376; background: #fff; font-size: 22px; line-height: 1; cursor: pointer; } body.ymp-search-open #search_widget form i.clear:hover { color: #df0246; } /* Le pictogramme loupe reste dans le header et sert d'interrupteur. */ #search_widget form img { cursor: pointer; } @media only screen and (max-width: 767px) { body.ymp-search-open #search_widget form { --ymp-bar-h: 48px; } body.ymp-search-open #search_widget form input[type="text"] { padding: 0 56px 0 16px; } body.ymp-search-open #search_widget form i.clear { padding: 0 18px; font-size: 20px; } } /* ------------------------------------------------------------------ * * Panneau d'autocomplétion * Il est posé sur et positionné en JS : aucun overflow d'ancêtre * ne peut le rogner, et il survit au repositionnement de la barre. * ------------------------------------------------------------------ */ .ymp-ac { position: absolute; z-index: 1100; max-height: 78vh; overflow-y: auto; padding: 18px 20px 20px; background: #fff; color: #0a0a10; border: 1px solid #e2e8eb; border-radius: 4px; box-shadow: 0 12px 32px rgba(0, 83, 118, 0.16); text-align: left; } .ymp-ac[hidden] { display: none; } .ymp-ac__block + .ymp-ac__block { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eaf1f3; } .ymp-ac__title { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.2; color: #005376; text-transform: uppercase; } .ymp-ac__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .ymp-ac__head .ymp-ac__title { margin-bottom: 0; } .ymp-ac__all { font-size: 0.85rem; color: #005376; text-decoration: underline; white-space: nowrap; } .ymp-ac__all:hover, .ymp-ac__all.is-active { color: #df0246; } /* Suggestions de mots-clés */ .ymp-ac__suggestions { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; } .ymp-ac__suggestion { display: inline-block; padding: 4px 10px; font-size: 0.85rem; color: #005376; background: #eaf1f3; border-radius: 999px; text-decoration: none; } .ymp-ac__suggestion:hover, .ymp-ac__suggestion.is-active { color: #fff; background: #005376; text-decoration: none; } /* Grille produits */ .ymp-ac__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; margin: 0; padding: 0; list-style: none; } .ymp-ac__product { display: flex; gap: 10px; align-items: flex-start; padding: 6px; border-radius: 4px; color: inherit; text-decoration: none; } .ymp-ac__product:hover, .ymp-ac__product.is-active { background: #eaf1f3; color: inherit; text-decoration: none; } .ymp-ac__thumb { flex: 0 0 62px; width: 62px; height: 62px; overflow: hidden; background: #f6f6f6; border-radius: 3px; } .ymp-ac__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ymp-ac__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ymp-ac__name { font-size: 0.86rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ymp-ac__prices { display: flex; align-items: baseline; gap: 8px; } .ymp-ac__price { font-weight: 700; font-size: 0.92rem; color: #005376; } .ymp-ac__regular { font-size: 0.8rem; color: #8a9499; text-decoration: line-through; } .ymp-ac__empty { margin: 0; padding: 6px 2px; font-size: 0.9rem; color: #5a6a71; } @media only screen and (max-width: 991px) { .ymp-ac__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (max-width: 767px) { .ymp-ac { padding: 14px 16px 18px; border-left: none; border-right: none; border-radius: 0; max-height: 70vh; } .ymp-ac__grid { grid-template-columns: 1fr; gap: 4px; } .ymp-ac__thumb { flex-basis: 54px; width: 54px; height: 54px; } } body.ymp-search-open #search_widget form input[type="text"]::placeholder { color: #9b9b9b; opacity: 1; }