/* Claude — 2026-08-04 — recherche mobile header. Portee stricte : mobile uniquement (<=767px). Tablette/desktop non touches par ce fichier (le bouton telephone reste visible ailleurs via son propre reglage Elementor hide_mobile, pas par CSS). cf. journal_dev_2026-08-04_header_recherche_mobile.md. 🔴 v10 — ABANDON DE L'OVERLAY PLEIN ECRAN (conflit iOS connu, remonte par test reel repete) : la combinaison position:fixed + inset:0 + body{overflow:hidden} + clavier qui redimensionne le viewport visuel force iOS Safari a recomposer en continu -> freeze a la frappe, invisible sur desktop. Remplace par un PANNEAU ANCRE (position:absolute) sous l'icone, dans le flux normal du widget — jamais de position:fixed, jamais de body verrouille, jamais de reparenting vers . Le widget reste a sa place du debut a la fin : ca elimine du meme coup tous les problemes de selecteurs CSS/variables scopees rencontres avec le reparenting. Le mecanisme d'OUVERTURE (clic sur .e-search-submit) est gere par koaprint-header-search-toggle.js et n'est pas touche ici : ce fichier ne fait que du visuel. Deux valeurs legacy pre-existantes (widget HTML c0aa01a, _elementor_data post 25) sont en conflit avec ce fichier sur les MEMES proprietes (logo max-width, gap du cluster). Comme ce widget est rendu plus loin dans le corps de page que le (donc gagne a egalite de specificite/!important par ordre de source), on neutralise via une specificite superieure (selecteur descendant a 2 classes) plutot que d'editer la source — zero modification de _elementor_data pour ces 2 valeurs. */ @media (max-width: 767px) { /* ===== Ligne logo/actions : gap resserre + logo reduit (budget verifie a 320/375/390) ===== */ .elementor-element-bec155d .elementor-element-5c0f4cf { gap: 6px !important; } .elementor-element-bec155d .elementor-element-db55768 { max-width: 110px !important; } /* ============================================================ BOUTON RECHERCHE (ecc87e3) — etat ferme = le vrai bouton submit Elementor, style seulement (mecanisme d'ouverture non touche, cf. JS). Primaire : fond vert plein, icone blanche. INCHANGE depuis la validation — ne pas casser. ============================================================ */ .elementor-element-5c0f4cf > .elementor-element-ecc87e3 { flex: 0 0 48px !important; width: 48px !important; max-width: 48px !important; min-width: 0 !important; height: 44px !important; position: relative !important; align-self: center !important; } .elementor-element-ecc87e3 .elementor-widget-container { width: 100% !important; height: 100% !important; } .elementor-element-ecc87e3 .e-search-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; } /* Etat ferme : le form reste dans son petit gabarit 48x44, seul le bouton submit est visible */ .elementor-element-ecc87e3 .e-search-form { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; position: static !important; } .elementor-element-ecc87e3 .e-search-input-wrapper { display: none; } .elementor-element-ecc87e3 .e-search-submit { width: 48px !important; height: 44px !important; min-width: 48px !important; max-width: 48px !important; padding: 0 !important; margin: 0 !important; border-radius: 16px !important; background: rgb(15, 84, 77) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background-color 120ms ease-out !important; } .elementor-element-ecc87e3 .e-search-submit svg { width: 20px !important; height: 20px !important; } .elementor-element-ecc87e3 .e-search-submit:active { background: rgb(11, 65, 59) !important; /* ~8% plus fonce */ } /* 🔴 CORRECTIF z-index (diagnostic + fix valides en direct par le coordinateur, en console sur koaprint.fr) : le panneau s'affichait BEHIND le hero de la page. Cause : la chaine d'ancetres du widget (ecc87e3 > 5c0f4cf > bec155d + le conteneur header) est en position:relative mais z-index:auto, alors qu'une section du hero a un z-index explicite (1, voire 100 sur une autre section) — sans z-index sur ses propres ancetres, le panneau ne peut jamais passer au-dessus, quel que soit SON PROPRE z-index. Classe posee/retiree par le JS (boostHeaderStacking/unboostHeaderStacking) UNIQUEMENT pendant que la recherche est ouverte, plutot qu'un z-index permanent sur tout le header — evite tout risque residuel sur l'empilement du reste du header (dropdown hamburger c5b0b01 notamment) en dehors de ce moment precis. */ .koa-search-header-boost { position: relative !important; z-index: 10000 !important; } /* ============================================================ ETAT OUVERT — panneau ancre sous l'icone, HORS FLUX (comme le dropdown du hamburger c5b0b01) mais jamais position:fixed. Le widget reste .elementor-element-ecc87e3 avec position: relative (deja pose ci-dessus) : c'est le point d'ancrage du panneau. Le form/input-wrapper NE BOUGENT PAS dans le DOM — seul le CSS transforme .e-search-input-wrapper en panneau. ============================================================ */ .elementor-element-ecc87e3.koa-search-open .e-search-form { position: static !important; /* le form reste dans son gabarit 48x44, seul le wrapper sort */ } .elementor-element-ecc87e3.koa-search-open .e-search-input-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; position: absolute !important; top: calc(100% + 10px) !important; /* left calcule et pose en inline par le JS (positionPanel) au moment de l'ouverture, pour rester dans l'ecran quelle que soit la position de l'icone dans le header — impossible a garantir en CSS pur puisque l'icone n'est pas ancree a un bord de l'ecran. */ background: #fff !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important; padding: 10px !important; box-sizing: border-box !important; z-index: 9999 !important; max-height: calc(100vh - 160px) !important; max-height: calc(100dvh - 160px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease-out, transform 180ms ease-out; } .elementor-element-ecc87e3.koa-search-open.koa-search-visible .e-search-input-wrapper { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .elementor-element-ecc87e3.koa-search-open .e-search-input-wrapper { transition: none !important; } } /* Champ : meme cause/meme fix que precedemment (Elementor pose no-icon-label/no-icon-clear sur l'input avec une regle display:none plus specifique que notre ancien selecteur — ici on inclut ces classes directement pour la depasser, independamment du reparenting). */ .elementor-element-ecc87e3.koa-search-open input.e-search-input.no-icon-label.no-icon-clear, .elementor-element-ecc87e3.koa-search-open .e-search-input { display: block !important; visibility: visible !important; opacity: 1 !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 48px !important; box-sizing: border-box !important; border: 1px solid rgba(0, 0, 0, .12) !important; border-radius: 16px !important; padding: 0 16px !important; margin: 0 !important; font-size: 16px !important; /* >=16px : evite le zoom auto iOS au focus */ line-height: normal !important; background: #fff !important; background-color: #fff !important; color: #1a1a1a !important; } .elementor-element-ecc87e3.koa-search-open .e-search-input::placeholder { color: rgba(0, 0, 0, .45) !important; } /* Croix native Elementor (clear du champ) : masquee, on garde uniquement notre croix de fermeture pour un role clair. Vider le champ reste possible au clavier. */ .elementor-element-ecc87e3.koa-search-open .e-search-input-wrapper svg.e-fas-times, .elementor-element-ecc87e3.koa-search-open .e-search-input-wrapper [class*="clear" i] { display: none !important; } /* Croix de fermeture (injectee par le JS, ajoutee comme enfant de e-search-input-wrapper) */ .koa-search-close { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; background: transparent !important; color: rgba(0, 0, 0, .6) !important; padding: 0 !important; cursor: pointer !important; } /* Suggestions de categories (injectees par le JS) : forcees sur leur propre ligne (flex-wrap sur le panneau + flex-basis:100%) sous le champ/la croix. */ .koa-search-suggestions { flex: 0 0 100% !important; width: 100% !important; } .koa-search-suggestions-label { padding: 10px 4px 6px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #595959; /* AA sur fond blanc */ } .koa-search-suggestions-list { list-style: none; margin: 0; padding: 0; } .koa-search-suggestions-list li { border-top: 1px solid rgba(0, 0, 0, .06); } .koa-search-suggestions-list li:first-child { border-top: 0; } .koa-search-suggestions-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 4px; font-size: 15px; color: #1a1a1a; text-decoration: none; } .koa-search-suggestions-list a:active { background: rgba(15, 84, 77, .06); } /* Claude — 2026-08-04 — filtrage local des catégories à la frappe : nom + compteur de produits sur chaque ligne de résultat (catégorie/marque/technique filtrée). Compteur discret, jamais en gras, toujours à droite — cf. mission recherche mobile. */ .koa-search-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .koa-search-item-count { flex: 0 0 auto; font-size: 12px; font-weight: 400; color: rgba(0, 0, 0, .45); white-space: nowrap; } /* Ligne d'action permanente ("Rechercher « … » dans tous les produits" / "Chercher la référence « … »") : même gabarit de ligne que les résultats (.koa-search-suggestions-list a ci-dessus, hauteur 44px/padding/police), mise en avant par la couleur d'accent du site pour la distinguer visuellement des simples catégories. Sélecteur combiné pour l'emporter sur .koa-search-suggestions-list a (couleur #1a1a1a). */ .koa-search-suggestions-list a.koa-search-action-link { color: rgb(15, 84, 77); font-weight: 600; justify-content: flex-start; } .koa-search-suggestions-list a.koa-search-action-link:active { background: rgba(15, 84, 77, .06); } /* Mention discrète affichée quand aucune catégorie ne correspond à la saisie (la ligne d'action reste toujours présente au-dessus, dans la liste). */ .koa-search-no-match { padding: 8px 4px 4px 4px; font-size: 13px; color: rgba(0, 0, 0, .45); } /* ============================================================ BURGER (c5b0b01) — bouton secondaire 44x44 radius16. On ne touche qu'a l'apparence du bouton lui-meme : la logique du panneau deroulant (position/overlay) reste celle deja en place (regle legacy c0aa01a, non modifiee). ============================================================ */ .elementor-element-c5b0b01 .elementor-menu-toggle { width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(15, 84, 77, .08) !important; border-radius: 16px !important; color: rgb(15, 84, 77) !important; transition: background-color 120ms ease-out !important; } .elementor-element-c5b0b01 .elementor-menu-toggle svg, .elementor-element-c5b0b01 .elementor-menu-toggle i { color: rgb(15, 84, 77) !important; fill: rgb(15, 84, 77) !important; } .elementor-element-c5b0b01 .elementor-menu-toggle:active { background: rgba(15, 84, 77, .16) !important; } }