/* ============================================================ BioMonde — Recherche produit maison (barre + panneau suggestions) Handle 'bio-search' → assets/css/bio-search.css 100% dans la DA Biomonde : tous les tokens via var(--x, fallback). Cible le markup EXACT de bio_search_render_form() + suggestions JS. ============================================================ */ /* ── 0. ANCRAGE DU PANNEAU ───────────────────────────────────── Le panneau .bio-search-suggestions est positionné en absolute DANS le .bio-search-form (contrat : pas de détachement ). */ .bio-search-wrap, .bio-search-form { position: relative; } .bio-search-wrap { width: 100%; font-family: var(--bio-font, 'Quicksand', system-ui, -apple-system, sans-serif); } .bio-search-form { margin: 0; display: block; width: 100%; /* remplit le wrap (le wrap porte le max-width) — sinon barre rikiki */ } /* ── 1. CHAMP DE SAISIE (pilule) ──────────────────────────────── */ .bio-search-input { width: 100%; box-sizing: border-box; height: 46px; /* place à droite pour la loupe (~50px), gauche confortable (~20px) */ padding: 0 50px 0 20px; margin: 0; background: #fff; border: 1.5px solid var(--bio-green-soft, #B8D97A); border-radius: var(--bio-pill-radius, 50px); font-family: var(--bio-font, 'Quicksand', system-ui, -apple-system, sans-serif); font-size: 15px; font-weight: 500; color: var(--bio-brown-dark, #3E302B); line-height: 1.2; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border-color var(--bio-transition-fast, 0.2s ease), box-shadow var(--bio-transition-fast, 0.2s ease); } .bio-search-input::placeholder { color: var(--bio-text-muted, #888); opacity: 1; } /* Supprime la croix native de reset du type=search (style maison) */ .bio-search-input::-webkit-search-decoration, .bio-search-input::-webkit-search-cancel-button, .bio-search-input::-webkit-search-results-button, .bio-search-input::-webkit-search-results-decoration { -webkit-appearance: none; } .bio-search-input:focus { outline: none; border: 2px solid var(--bio-search-accent, var(--bio-green, #8CB93F)); -webkit-box-shadow: var(--bio-shadow-focus-ring, 0 0 0 3px rgba(var(--bio-green-rgb), 0.25)); box-shadow: var(--bio-shadow-focus-ring, 0 0 0 3px rgba(var(--bio-green-rgb), 0.25)); } /* Défense anti-thème : certains thèmes / Elementor imposent `input:focus { border-radius:4px }`, ce qui « carre » la pilule au focus (ce rayon de base était auparavant masqué par une ancienne règle !important globale, désormais scopée). On ré-affirme le rayon pilule, scopé à NOTRE composant (.bio-theme-search) → aucune fuite vers d'autres champs. !important assumé : il faut gagner contre une règle hôte inconnue, quel que soit le thème (plugin destiné à la vente). */ .bio-theme-search .bio-search-input, .bio-theme-search .bio-search-input:focus { border-radius: var(--bio-pill-radius, 50px) !important; } /* ── 2. BOUTON SUBMIT (loupe ronde) ───────────────────────────── Cercle parfaitement niché dans la pilule : 6px de marge ÉGALE sur les 4 côtés. Champ desktop = 46px → cercle 34px (46 − 2×6). Le centrage vertical (top:50% + translateY) donne 6px haut/bas, right:6px à droite. */ .bio-search-submit { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 50%; /* Couleurs RÉGLABLES (Thème > Header > Recherche). !important assumé : bat la règle bouton globale `button:not(...)` (spécificité 0,2,1) qui sinon impose fond brun + texte blanc. Défauts = look historique. */ background: var(--bio-search-btn-bg, #5D4037) !important; color: var(--bio-search-btn-ic, #fff) !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 0; -webkit-appearance: none; appearance: none; transition: background-color var(--bio-transition-fast, 0.2s ease), color var(--bio-transition-fast, 0.2s ease); } .bio-search-submit svg { display: block; width: 20px; height: 20px; fill: currentColor; pointer-events: none; } /* Survol : on garde les couleurs choisies, on assombrit juste un peu (marche pour fond plein comme pour fond transparent). */ .bio-search-submit:hover { filter: brightness(0.92); } /* Fond transparent (style « flat ») : léger halo au survol pour le retour clic. */ .bio-sbtn-flat .bio-search-submit:hover { background: rgba(var(--bio-green-rgb), 0.14) !important; filter: none; } .bio-search-submit:focus-visible { outline: 2px solid var(--bio-search-accent, var(--bio-green, #8CB93F)); outline-offset: 2px; } /* ── 3. PANNEAU DE SUGGESTIONS ───────────────────────────────── Ancré sous le champ (top:100% + 8px), pleine largeur du form. */ .bio-search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--bio-card-bg, #fff); border: 1px solid var(--bio-border-warm, #e8e3dc); border-radius: var(--bio-search-radius, 20px); -webkit-box-shadow: var(--bio-shadow-hover, 0 10px 25px rgba(var(--bio-brown-rgb), 0.12)); box-shadow: var(--bio-shadow-hover, 0 10px 25px rgba(var(--bio-brown-rgb), 0.12)); z-index: 10000; /* doit passer AU-DESSUS du header sticky (z:9999) et de la barre de rayons .bio-desktop-view (z:9999) */ padding: 8px 0; font-family: var(--bio-font, 'Quicksand', sans-serif); max-height: 70vh; overflow: auto; -webkit-overflow-scrolling: touch; } .bio-search-suggestions[hidden] { display: none; } /* ── 4. EN-TÊTE DE GROUPE (Catégories / Produits) ─────────────── */ .bio-search-headline { /* flex : l'en-tête « Vos dernières recherches » porte un bouton « Effacer » à droite. */ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; gap: 12px; padding: 10px 16px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--bio-text-muted, #888); } /* ── 4bis. PASTILLES DE L'ÉTAT INITIAL (recherches récentes, rayons) ── Le panneau ouvert sur un champ VIDE ne doit pas être une vitrine : c'est le moment où le visiteur ne sait pas quoi taper. Ces deux rangées lui donnent un point de départ, et la première ne coûte aucune requête (elle vient du navigateur). */ .bio-search-chips { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; /* UNE seule ligne qui défile. En passant à la ligne, 6 rayons prenaient trois rangées et repoussaient les produits hors de l'écran ; ici la hauteur ne dépend plus ni du nombre de pastilles ni de la longueur des libellés. Même pattern que le bandeau de collections du tiroir Rayons. */ -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: 8px; padding: 4px 16px 12px; margin: 0; /* le fondu de droite dit « ça continue » sans occuper de place */ -webkit-mask-image: -webkit-linear-gradient(left, black calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%); } .bio-search-chips::-webkit-scrollbar { display: none; } .bio-search-chips > * { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } /* ⚠️ (0,3,0) : il FAUT passer devant la règle globale du thème `button:not([class*="elementor"]):not(.single_add_to_cart_button)`, qui pèse (0,2,1) et repeignait les pastilles-boutons en marron plein alors que les pastilles-liens restaient beiges. Ne pas retomber à un sélecteur plus court. */ .bio-search-suggestions .bio-search-chips .bio-search-chip { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; /* 34 px : confortable au pouce sans peser dans un panneau qui doit rester court. */ height: 34px; padding: 0 14px; border-radius: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--bio-font, 'Quicksand', sans-serif); font-size: 13px; font-weight: 700; color: var(--bio-brown-dark, #372726); background: var(--bio-h-btn-bg, #F0EBE0); border: 1px solid var(--bio-border-warm, #e8e3dc); text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease; } .bio-search-suggestions .bio-search-chips .bio-search-chip:hover { background: var(--bio-border-warm, #e8e3dc); } .bio-search-suggestions .bio-search-chips .bio-search-chip:focus-visible { outline: 2px solid var(--bio-green, #A8C400); outline-offset: 2px; } .bio-search-suggestions .bio-search-headline .bio-search-oubli { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--bio-text-muted, #888); text-decoration: underline; cursor: pointer; } .bio-search-suggestions .bio-search-headline .bio-search-oubli:hover { color: var(--bio-brown-dark, #372726); } .bio-search-suggestions .bio-search-headline .bio-search-oubli:focus-visible { outline: 2px solid var(--bio-green, #A8C400); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .bio-search-suggestions .bio-search-chips .bio-search-chip { transition: none; } } /* ── 5. LIGNES (suggestion produit + catégorie) ───────────────── */ .bio-search-suggestion, .bio-search-cat { display: flex; align-items: center; gap: 12px; padding: 9px 14px; margin: 1px 8px; text-decoration: none; color: var(--bio-brown-dark, #3E302B); border-radius: var(--bio-radius-md, 12px); transition: background-color var(--bio-transition-fast, 0.2s ease); } /* Repli si flex `gap` non supporté (vieux Safari) — espacement via marges */ @supports not (gap: 1px) { .bio-search-suggestion > * + *, .bio-search-cat > * + * { margin-left: 12px; } } .bio-search-suggestion:hover, .bio-search-suggestion.is-active, .bio-search-cat:hover, .bio-search-cat.is-active { background: rgba(var(--bio-green-rgb), 0.10); } /* ── 6. VIGNETTE PRODUIT ──────────────────────────────────────── */ .bio-search-thumb { flex: 0 0 auto; display: block; width: 48px; height: 48px; } .bio-search-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--bio-img-radius, 12px); display: block; } /* Image désactivée par option : masquer toute la vignette */ .no-img .bio-search-thumb { display: none; } /* ── 7. INFOS + TITRE PRODUIT ─────────────────────────────────── */ .bio-search-info { flex: 1 1 auto; min-width: 0; display: block; } .bio-search-title { display: block; color: var(--bio-brown, #5D4037); font-weight: 600; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } .bio-search-title mark { background: transparent; color: var(--bio-search-accent, var(--bio-green-dark, #6BA032)); font-weight: 800; padding: 0; } /* ── 8. PRIX PRODUIT (vert, gras, poussé à droite) ────────────── */ .bio-search-price, .bio-search-price .amount, .bio-search-price .woocommerce-Price-amount, .bio-search-price bdi { color: var(--bio-green, #8CB93F) !important; font-weight: 800; white-space: nowrap; } .bio-search-price { flex: 0 0 auto; margin-left: auto; font-size: 14px; line-height: 1.2; } /* Prix désactivé par option */ .no-price .bio-search-price { display: none; } /* ── 9. CATÉGORIES (nom + fil d'ariane) ───────────────────────── */ .bio-search-cat-name { display: block; font-weight: 700; color: var(--bio-brown, #5D4037); font-size: 14px; line-height: 1.3; } .bio-search-cat-name mark { background: transparent; color: var(--bio-search-accent, var(--bio-green-dark, #6BA032)); font-weight: 800; padding: 0; } .bio-search-cat-path { display: block; margin-top: 1px; font-size: 11px; color: var(--bio-text-muted, #888); line-height: 1.2; } /* Catégories désactivées par option : masquer le groupe entier */ .no-cats .bio-search-group-cats { display: none; } /* ── 10. PIED « Voir tous les produits » ──────────────────────── */ .bio-search-more { display: block; text-align: center; padding: 12px; margin-top: 4px; font-weight: 700; font-size: 14px; color: var(--bio-green-dark, #6BA032); border-top: 1px solid var(--bio-border-warm, #e8e3dc); text-decoration: none; transition: background-color var(--bio-transition-fast, 0.2s ease); } .bio-search-more:hover, .bio-search-more.is-active { background: rgba(var(--bio-green-rgb), 0.10); } /* ── 11. AUCUN RÉSULTAT ───────────────────────────────────────── */ .bio-search-nores { padding: 16px; color: var(--bio-text-muted, #888); text-align: center; font-size: 14px; } /* Note « résultats approchés » (tolérance aux fautes, style « vouliez-vous dire »). */ .bio-search-approx { padding: 10px 16px 2px; font-size: 12px; font-style: italic; color: var(--bio-text-muted, #888); } /* Badge Promo dans les suggestions (déclencheur d'achat). Couleur personnalisable. */ .bio-search-promo { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 8px; background: var(--bio-search-promo-bg, #C0392B); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; vertical-align: middle; } /* ── 12. RESPONSIVE MOBILE (≤ 768px) ──────────────────────────── */ @media (max-width: 768px) { .bio-search-input { height: 48px; /* tap target confortable ≥ 44px */ min-height: 44px; font-size: 16px; /* anti-zoom iOS au focus */ padding-right: 52px; } .bio-search-submit { /* Champ 48px ici → cercle 36px = 6px de marge égale partout. (Avec le header thème mobile, l'input passe à 42px et bio-theme- mobile.css réajuste le cercle en conséquence.) */ width: 36px; height: 36px; right: 6px; } /* Selon le header, le cercle retombe à 30 px : sous le seuil de confort tactile, et c'est l'action principale de l'en-tête. On élargit la zone d'appui à 44 px par un pseudo-élément transparent plutôt qu'en grossissant le dessin : la pilule ne fait que 42 à 48 px de haut, un cercle de 44 px la remplirait entièrement. */ .bio-search-submit::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* ⚠️ LE PANNEAU NE DOIT PLUS ÊTRE PRISONNIER DU CHAMP. Mesuré le 17/08/2026 en 390 px : le logo occupe 154 px, le champ ne fait donc que 224 px, et le panneau (ancré left:0/right:0 sur le formulaire) héritait de cette largeur. Le contenu réclamait 354 px : 132 px partaient derrière une barre de défilement horizontale et les prix étaient coupés en plein milieu. On garde l'ancrage à DROITE du champ, déjà à 12 px du bord de l'écran, et on étend vers la gauche : le panneau retrouve toute la largeur utile, centré. Il ne peut pas déborder, puisque son bord gauche tombe à (24 - 12) = 12 px du bord de l'écran. */ .bio-search-suggestions { left: auto; right: 0; width: calc(100vw - 24px); /* laisse de la place au clavier virtuel : panneau un peu plus court */ max-height: 60vh; border-radius: var(--bio-search-radius, 20px); /* filet de sécurité : plus jamais de défilement horizontal, quoi qu'on y mette */ overflow-x: hidden; overflow-y: auto; } /* Le prix portait flex:0 0 auto + white-space:nowrap : il ne rétrécissait JAMAIS. Avec le calculateur au poids (plugin tiers), il contient DEUX prix complets avec leur unité, « 15,95 € par kg 15,33 € par kg », soit 253 px rigides dans une ligne de 206 px. Il peut désormais rétrécir et passer à la ligne ENTRE les deux prix ; chaque montant reste insécable, on ne coupe jamais un prix en deux. */ .bio-search-price { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; min-width: 0; white-space: normal; text-align: right; } .bio-search-price del, .bio-search-price ins, .bio-search-price .amount, .bio-search-price .woocommerce-Price-amount, .bio-search-price bdi { white-space: nowrap; } .bio-search-suggestion, .bio-search-cat { /* 9 px au lieu de 11 : la rangee reste bien au-dessus du minimum tactile (vignette de 48 px + 2×9), et on gagne deux produits visibles. */ padding: 9px 14px; } /* Le fil d'Ariane des categories coutait deux lignes pleines avant le premier produit. Sur un ecran de 390 px, ce qu'on cherche c'est le produit ; le nom de la categorie suffit a se reperer. */ .bio-search-cat-path { display: none; } /* Au-dela de deux categories, on repousse les produits sans rien apporter. */ .bio-search-group-cats .bio-search-cat:nth-of-type(n+3) { display: none; } /* Titres Kwizat en majuscules : jusqu'a 3 lignes. Deux au maximum, coupees proprement. Le titre complet reste dans l'attribut du lien pour les lecteurs d'ecran, on ne perd donc pas l'information. */ .bio-search-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } }