/* ============================================= 🎬 MOTEUR SUGGESTIONS (UNIFIÉ + OVERLAY MOBILE UX PRO) ============================================= */ /* ✅ Lock scroll global quand overlay ouvert (classe posée par JS sur ) */ html.wpz-search-lock, body.wpz-search-lock{ overflow:hidden !important; height:100% !important; touch-action:none !important; } /* Conteneur */ #moteur-recherche-suggestions{ position:relative; width:100%; max-width:600px; } /* Wrapper input */ #moteur-recherche-suggestions .moteur-recherche-wrapper{ position:relative; display:flex; align-items:center; width:100%; } /* Form */ #moteur-recherche-suggestions form{ display:flex; width:100%; flex-wrap:nowrap; } /* Input */ #moteur-recherche-suggestions input[type="text"], #moteur-recherche-suggestions #search-input{ flex:1; width:100%; padding:8px; /* place pour la croix à droite */ font-size:16px; border-radius:5px; border:none; outline:none; min-width:0; } #moteur-recherche-suggestions input[type="text"]:focus, #moteur-recherche-suggestions #search-input:focus{ border-color:#c0392b; border-radius:0px; } /* Bouton submit (tu le caches déjà) */ #moteur-recherche-suggestions button.search-button{ padding:0 1.2rem; border:none; background:#fff; color:#000; font-size:1.2rem; cursor:pointer; display:none !important; } .search-button::before{ content:">"; color:#c0392b; display:inline-block; font-weight:bold; font-size:25px; } /* ✅ Croix rouge (bouton fermer) */ #moteur-recherche-suggestions .search-close{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:none; background:transparent; cursor:pointer; display:none; /* visible seulement quand overlay ouvert */ align-items:center; justify-content:center; border-radius:999px; -webkit-tap-highlight-color:transparent; } #moteur-recherche-suggestions .search-close::before{ content:"✕"; color:#e53935; font-size:20px; font-weight:700; line-height:1; } #moteur-recherche-suggestions .search-close:hover{ background:rgba(229,57,53,.08); } /* ============================================= 🧾 Suggestions (desktop/tablette = dropdown) ============================================= */ #suggestions-list{ position:absolute; top:100%; left:0; right:0; background:#fff; z-index:9999; list-style:none; margin:4px 0 0; padding:0; border-radius:6px; max-height:320px; overflow-y:auto; border:1px solid #ddd; box-shadow:0 4px 12px rgba(0,0,0,.08); display:none; } #suggestions-list:has(li){ display:block; } /* Item */ #suggestions-list li{ display:flex; gap:10px; padding:8px 10px; cursor:pointer; /* ✅ clé pour que la vignette s'étire à la hauteur du contenu droit */ align-items:stretch; } #suggestions-list li:hover{ background:#f5f5f5; } /* ============================================= 🖼️ Thumb AUTO (plus de height fixe) -> s'étire automatiquement à la hauteur du contenu de droite ============================================= */ .suggestion-thumb{ width:40px; /* largeur stable */ flex-shrink:0; /* ✅ auto-height : prend la hauteur du LI (donc du contenu de droite) */ height:auto; align-self:stretch; border-radius:8px; overflow:hidden; background:#f0f0f0; display:flex; align-items:center; justify-content:center; font-size:16px; } .suggestion-thumb img{ width:100%; height:100%; /* remplit la hauteur étirée */ object-fit:cover; display:block; } /* Meta */ .suggestion-meta{ display:flex; flex-direction:column; justify-content:center; min-width:0; } /* Badges au-dessus */ .suggestion-badges{ display:flex; gap:6px; margin:0 0 4px 0; align-items:center; flex-wrap:wrap; } /* ✅ FIX SCOPE : neutralise les badges globaux "absolute" des vignettes template */ #suggestions-list .suggestion-badges .badge-nouveau, #suggestions-list .suggestion-badges .badge-decompte, #suggestions-list .suggestion-badges .badge-futur, #suggestions-list .suggestion-badges .badge-cinema{ position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; z-index:auto !important; box-shadow:none !important; display:inline-flex; align-items:center; padding:5px !important; border-radius:5px !important; font-size:.6rem !important; font-weight:700; line-height:1.2; color:#fff; white-space:nowrap; } #suggestions-list .suggestion-badges .badge-nouveau{ background-color:#e74c3c; /* rouge */ } #suggestions-list .suggestion-badges .badge-decompte{ background-color:#2980b9; /* bleu */ } #suggestions-list .suggestion-badges .badge-cinema{ background-color:#f39c12; /* orange cinéma / projecteur */ } #suggestions-list .suggestion-badges .badge-futur{ background-color:#2980b9; /* bleu */ } .suggestion-title{ font-size:14px; font-weight:600; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .suggestion-info{ font-size:12px; color:#444; } .suggestion-type-film .suggestion-info::before{ content:"🎬 "; } .suggestion-type-acteur .suggestion-info::before{ content:"👤 "; } /* ============================================= 🖥️ DESKTOP – Panneau de suggestions plus haut ============================================= */ @media (min-width: 768px){ #suggestions-list{ max-height: min(80vh, 620px); } } /* ============================================= 📱 OVERLAY MOBILE : actif UNIQUEMENT si .wpz-open ============================================= */ @media (max-width:600px){ /* Fond général du panneau (résultats) */ #moteur-recherche-suggestions.wpz-open{ position:fixed; inset:0; width:100%; height:100dvh; background:#f3f4f6; /* gris clair pour délimiter résultats */ z-index:2147483647; display:flex; flex-direction:column; isolation:isolate; } /* Zone recherche = “carte” distincte */ #moteur-recherche-suggestions.wpz-open form{ flex-shrink:0; background:#ffffff; padding:14px; margin:12px; border-radius:5px; box-shadow:0 8px 20px rgba(0,0,0,.12); border:none; } /* Input dans la carte */ #moteur-recherche-suggestions.wpz-open #search-input, #moteur-recherche-suggestions.wpz-open input[type="text"]{ font-size:15px; padding:12px 44px 12px 12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:5px; } /* Croix visible uniquement en overlay */ #moteur-recherche-suggestions.wpz-open .search-close{ display:inline-flex; } /* Liste plein écran scrollable (scroll uniquement ici) */ #moteur-recherche-suggestions.wpz-open #suggestions-list{ position:relative; top:0; left:0; right:0; margin:0; padding-top:4px; border-radius:0; border:0; box-shadow:none; background:transparent; flex:1; max-height:none; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; display:none; } #moteur-recherche-suggestions.wpz-open #suggestions-list:has(li){ display:block; } /* Items “cartes” alignés avec la carte de recherche */ #moteur-recherche-suggestions.wpz-open #suggestions-list li{ background:#ffffff; margin:0 12px 8px; border-radius:5px; box-shadow:0 2px 6px rgba(0,0,0,.06); padding:12px 12px; gap:12px; align-items:stretch; /* ✅ toujours stretch */ } #moteur-recherche-suggestions.wpz-open #suggestions-list li:hover{ background:#ffffff; } /* Thumb auto en mobile aussi */ #moteur-recherche-suggestions.wpz-open .suggestion-thumb{ width:44px; height:auto; align-self:stretch; border-radius:5px; } /* Badges un poil plus grands en mobile overlay */ #moteur-recherche-suggestions.wpz-open #suggestions-list .suggestion-badges .badge-nouveau, #moteur-recherche-suggestions.wpz-open #suggestions-list .suggestion-badges .badge-decompte, #moteur-recherche-suggestions.wpz-open #suggestions-list .suggestion-badges .badge-futur, #moteur-recherche-suggestions.wpz-open #suggestions-list .suggestion-badges .badge-cinema{ font-size:12px; padding:3px 9px; } }